Poznavacka 2.1

petrzjunior · Jan 22, 2017 · d4be202 · d4be202
1 parent d7ef2b6
commit d4be202
Show file tree

Hide file tree

Showing 10 changed files with 316 additions and 67 deletions.
diff --git a/poznavacka/flexbox.css b/poznavacka/flexbox.css
@@ -0,0 +1,188 @@
+/* Paleta blue/grey
+  .dark-primary-color    { background: #388E3C; }
+  .default-primary-color { background: #4CAF50; }
+  .light-primary-color   { background: #C8E6C9; }
+  .text-primary-color    { color: #FFFFFF; }
+  .accent-color          { background: #607D8B; }
+  .primary-text-color    { color: #212121; }
+  .secondary-text-color  { color: #757575; }
+  .divider-color         { border-color: #BDBDBD; }
+*/
+
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont,
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+    "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  color: rgba(0, 0, 0, 0.7);
+}
+.page {
+  max-width: 1100px;
+  margin: auto;
+}
+p {
+  margin: 0 1rem;
+}
+
+.jumbotron {
+  display: block;
+  padding: 4rem 2rem;
+  background-color: #4CAF50;
+  color: #FFFFFF;
+  border-radius: 0.4rem;
+  margin-bottom: 32px;
+}
+.card {
+  border: 2px solid #BDBDBD;
+  border-radius: 0.3rem;
+  padding-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.card .card-title {
+  margin: 0;
+  padding: 1rem;
+  background-color: #e0e0e0;
+  font-size: 20px;
+  font-weight: 500;
+}
+.card .card-text {
+  font-size: 1.25em;
+}
+ul.list-group {
+  list-style: none;
+  margin: 0px 10px;
+  padding: 0;
+  border: 1px solid #BDBDBD;
+  border-radius: 5px;
+  overflow: hidden;
+}
+li.list-group-item {
+  padding: 10px 10px;
+  border-top: 1px solid #BDBDBD;
+}
+li.list-group-item:first-of-type {
+  border: none;
+}
+li.list-group-item.active + li.list-group-item.active {
+  border-top: none;
+  padding-top: 11px;
+}
+li.list-group-item.active {
+  background-color: #4CAF50;
+  color: white;
+}
+.tlacitka-div a {
+  background-color: #4CAF50;
+  border: none;
+  border-radius: 0.3rem;
+  color: white;
+  padding: 10px 20px 10px 10px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+}
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-content: flex-start;
+  align-items: stretch;
+}
+.container div {
+  margin: 10px;
+}
+.obrazek-div {
+  flex: 1 1 auto;
+  width: 450px;
+}
+.reseni-div {
+  flex: 1 1 auto;
+  width: 450px;
+}
+.tlacitka-div {
+  flex: 1 1 auto;
+  width: 400px;
+}
+.seznam-div {
+  flex: 1 1 auto;
+  width: 400px;
+}
+
+.display-3 {
+  font-weight: 300;
+  font-size: 72px;
+  margin-top: 0;
+  margin-bottom: .5rem;
+}
+@media screen and (max-width: 670px) {
+  .display-3{
+    font-size: 48px;
+  }
+}
+.lead {
+  font-weight: 300;
+  font-size: 20px;
+  margin: 0;
+  color: #c8e6c9;
+}
+
+.reseni {
+  background-color: #607D8B;
+  color: #607D8B;
+  font-size: 3em;
+  flex-grow: 1;
+  flex-basis: 130px;
+}
+.list-group:empty {
+  display: none;
+}
+.reseni:hover, .click {
+  background-color: #fff;
+}
+.list-group-item.active:hover, .btn:hover {
+  background-color: #388E3C;
+}
+.obrazek-div {
+  height: 300px;
+}
+.obrazek {
+  height: 100%;
+  max-width: 100%;
+}
+
+.noselect {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+li.list-group-item:before {
+  font-family: "icons";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1em;
+  margin-left: .2em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+li.active::before {
+  content: "\e801";
+}
+
+li:not(.active)::before {
+  content: "\f096";
+}
diff --git a/poznavacka/font/icons.eot b/poznavacka/font/icons.eot
diff --git a/poznavacka/font/icons.svg b/poznavacka/font/icons.svg
diff --git a/poznavacka/font/icons.ttf b/poznavacka/font/icons.ttf
diff --git a/poznavacka/font/icons.woff b/poznavacka/font/icons.woff
diff --git a/poznavacka/font/icons.woff2 b/poznavacka/font/icons.woff2
diff --git a/poznavacka/icons.css b/poznavacka/icons.css
@@ -0,0 +1,61 @@
+@font-face {
+  font-family: 'icons';
+  src: url('font/icons.eot?53798734');
+  src: url('font/icons.eot?53798734#iefix') format('embedded-opentype'),
+       url('font/icons.woff2?53798734') format('woff2'),
+       url('font/icons.woff?53798734') format('woff'),
+       url('font/icons.ttf?53798734') format('truetype'),
+       url('font/icons.svg?53798734#icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'icons';
+    src: url('font/icons.svg?53798734#icons') format('svg');
+  }
+}
+*/
+
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "icons";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.icon-right:before { content: '\e800'; } /* '' */
+.icon-check:before { content: '\e801'; } /* '' */
+.icon-download:before { content: '\f02e'; } /* '' */
+.icon-check-empty:before { content: '\f096'; } /* '' */
diff --git a/poznavacka/index.html b/poznavacka/index.html
@@ -1,60 +1,37 @@
 <!DOCTYPE html>
 
 <head>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
-  <script src="https://use.fontawesome.com/b709bdf18e.js"></script>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link href="poznavacka.css" rel="stylesheet">
+  <link href="flexbox.css" rel="stylesheet">
+  <link href="icons.css" rel="stylesheet">
 </head>
 
 <body>
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12">
-        <div class="jumbotron">
-          <h1 class="display-3">Poznávačka master</h1>
-          <p class="lead">Verze 2.0-beta</p>
-        </div>
-        <div class="row">
-          <div class="col-lg-6 col-md-12 odsazeni">
-            <div id="obr-div">
-              <img id="obrazek" class="img img-responsive" src="http://lorempixel.com/300/300/" />
-            </div>
-          </div>
-          <div class="col-lg-6 col-md-12 odsazeni">
-            <div class="card card-block">
-              <h4 class="card-title">Řešení:</h4>
-              <div class="reseni">
-                <p class="reseni-text noselect" style="padding-left: 10px">-nic-</p>
-              </div>
-              <p class="card-text">Najeďte nebo klikněte.</p>
-            </div>
-          </div>
-        </div>
-        <div class="col-md-6 col-sm-12 odsazeni">
-          <ul class="list-group" id="kat-list">
-          </ul>
-        </div>
-        <div class="col-md-6 col-sm-12 odsazeni">
-          <a id="pripravit" href="#!" onclick="parseJSON(); return false;" class="btn btn-secondary"><i class="fa fa-lg fa-tasks" aria-hidden="true"></i> Načíst</a>
-          <a id="nahodna" href="#!" onclick="dalsi(); return false;" class="btn btn-primary">Další obrázek</a>
-          <a id="zamichat" href="#!" onclick="return false;" class="btn btn-secondary disabled"><i class="fa fa-lg fa-random" aria-hidden="true"></i> Zamíchat</a>
-        </div>
-        <div class="row" style="margin-top: 20px">
-          <div class="col-md-12">
-            <div class="progress">
-              <div id="kytky-progress" class="progress-bar" role="progressbar">
-                <span class="sr-only">x% Complete</span>
-              </div>
-            </div>
-          </div>
+  <div class="page">
+    <div class="jumbotron">
+      <h1 class="display-3">Poznávačka master</h1>
+      <p class="lead">stvořil Petr Zahradník</p>
+    </div>
+    <div class="container">
+      <div class="obrazek-div">
+        <img class="obrazek" src="placeholder-300.png" />
+      </div>
+      <div class="reseni-div card">
+        <h4 class="card-title">Řešení:</h4>
+        <div class="reseni">
+          <p class="reseni-text noselect">-nic-</p>
         </div>
+        <p class="card-text">Najeďte nebo klikněte.</p>
+      </div>
+      <div class="seznam-div">
+        <ul class="list-group" id="kat-list"></ul>
+      </div>
+      <div class="tlacitka-div">
+        <a id="nahodna" href="#!" onclick="dalsi(); return false;" class="btn"><i class="icon-right"></i>Další obrázek</a>
       </div>
     </div>
   </div>
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
-  <script src="papaparse.js"></script>
   <script src="poznavacka.js"></script>
 </body>
diff --git a/poznavacka/placeholder-300.png b/poznavacka/placeholder-300.png