uprava

4 years ago · dd3cea445e
22 changed files with 780 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/dist/css/app.542a1608.css
+++ b/dist/css/app.542a1608.css
@ -0,0 +1 @@
+.vyber1{width:158px}.vyber,.vyber1{padding:12px;border:none}.kalen,.vyber,.vyber1{background-color:#0563af;color:#fff}.wrapper{display:grid;grid-template-columns:1fr 1fr}.seat{display:inline-block;width:50px;height:50px;text-align:center;border:1px solid grey;margin:2px;background-color:#3e9c35}.seat div:hover{cursor:pointer;background-color:#d3d3d3}.seat .disabled{color:#fff}.seat .disabled:hover{cursor:default;background-color:transparent}.seat .chosen{background-color:#90ee90}.col{width:90%;opacity:.99}.col,.hlavni{background-color:#fff}.hlavni{width:50%;margin:0 auto}.hlava{width:100%;margin:0 auto;text-align:center}#app{background-image:url(../img/leta.f93aa404.jpeg)}.obr{width:30px}h1,h2,h3,p{font-family:Arial,Helvetica,sans-serif}.druha{width:30%;float:left}.col1{width:100%}.hlavni2{width:80%;margin:0 auto}.foto{float:right;width:100%}@media (max-width:1200px){.wrapper{display:grid;grid-template-columns:1fr 1fr}.seat{display:inline-block;width:50px;height:50px;text-align:center;border:1px solid grey;margin:2px;background-color:#3e9c35}.seat div:hover{cursor:pointer;background-color:#d3d3d3}.seat .disabled{color:#fff}.seat .disabled:hover{cursor:default;background-color:transparent}.seat .chosen{background-color:#90ee90}.col{width:80%;background-color:#fff;opacity:.99}.hlavni{background-color:#fff}.hlava,.hlavni{width:90%;margin:0 auto}.hlava{text-align:center}#app{background-image:url(../img/leta.f93aa404.jpeg)}.obr{width:30px}h1,h2,h3,p{font-family:Arial,Helvetica,sans-serif}.druha{width:30%;float:left}.col1{width:100%}.hlavni2{width:80%;margin:0 auto}.foto{float:right;width:100%}}@media (max-width:800px){.wrapper{display:grid;grid-template-columns:1fr}.seat{display:inline-block;width:50px;height:50px;text-align:center;border:1px solid grey;margin:2px;background-color:#3e9c35}.seat div:hover{cursor:pointer;background-color:#d3d3d3}.seat .disabled{color:#fff}.seat .disabled:hover{cursor:default;background-color:transparent}.seat .chosen{background-color:#90ee90}.col{width:80%;opacity:.99;min-height:100px}.col,.hlavni{background-color:#fff}.hlavni{width:90%;margin:0 auto}.hlava{width:100%;margin:0 auto;text-align:center}#app{background-image:url(../img/leta.f93aa404.jpeg)}.obr{width:30px}h1,h2,h3,p{font-family:Arial,Helvetica,sans-serif}.druha{width:30%;float:left}.col1{width:80%;opacity:.99}.col1,.hlavni2{background-color:#fff}.hlavni2{width:50%;margin:0 auto}.foto{float:right;width:100%}}@media (max-width:500px){.wrapper{display:grid;grid-template-columns:1fr}.seat{display:inline-block;width:50px;height:50px;text-align:center;border:1px solid grey;margin:2px;background-color:#3e9c35}.seat div:hover{cursor:pointer;background-color:#d3d3d3}.seat .disabled{color:#fff}.seat .disabled:hover{cursor:default;background-color:transparent}.seat .chosen{background-color:#90ee90}.col{width:100%;opacity:.99;min-height:100px}.col,.hlavni{background-color:#fff}.hlavni{width:90%;margin:0 auto}.hlava{width:100%;margin:0 auto;text-align:center}#app{background-image:url(../img/leta.f93aa404.jpeg)}.obr{width:30px}h1,h2,h3,p{font-family:Arial,Helvetica,sans-serif}.druha{width:30%;float:left}.col1{width:100%;opacity:.99}.col1,.hlavni2{background-color:#fff}.hlavni2{width:50%;margin:0 auto}.foto{float:right;width:100%}}
--- a/dist/favicon.ico
+++ b/dist/favicon.ico
--- a/dist/img/let.b8aa2981.png
+++ b/dist/img/let.b8aa2981.png
--- a/dist/img/leta.f93aa404.jpeg
+++ b/dist/img/leta.f93aa404.jpeg
--- a/dist/img/sedadlo.df0d5804.png
+++ b/dist/img/sedadlo.df0d5804.png
--- a/dist/index.html
+++ b/dist/index.html
@ -0,0 +1 @@
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>letenka</title><link href="/css/app.542a1608.css" rel="preload" as="style"><link href="/js/app.85d40bdc.js" rel="preload" as="script"><link href="/js/chunk-vendors.11f5230c.js" rel="preload" as="script"><link href="/css/app.542a1608.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but letenka doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.11f5230c.js"></script><script src="/js/app.85d40bdc.js"></script></body></html>
--- a/dist/js/app.85d40bdc.js
+++ b/dist/js/app.85d40bdc.js
--- a/dist/js/app.85d40bdc.js.map
+++ b/dist/js/app.85d40bdc.js.map
--- a/dist/js/chunk-vendors.11f5230c.js
+++ b/dist/js/chunk-vendors.11f5230c.js
--- a/dist/js/chunk-vendors.11f5230c.js.map
+++ b/dist/js/chunk-vendors.11f5230c.js.map
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,587 @@
+
+<template>
+    <div id="app">
+        <div class="hlava"><h1>Letenka</h1></div>
+        <div class="wrapper">
+            
+                <div class="col1">
+                    <div class="hlavni">
+                        <div class="hlavni2">
+                            <br>
+                    
+                            <h2>Parametry letu</h2>
+                            <p>
+                                 Tip cesty
+                                <br>
+
+                                <select class="vyber" v-model="travelType"> <!-- načtení výběru do travelType -->
+                                   
+                                     <option value="" disabled>Vyberte jednu možnost</option> <!-- mrtvý výběr (je vidět,ale nejde vybrat) -->
+                                     <option v-for="(option, index) in travelTypes" :key="index" :value="option"> <!-- vypsání textu z travelTypes (option je jeden řádek v datech) -->
+                                        {{ option.text }}
+                                    </option>
+                                </select>
+                            </p>
+                        
+                            
+                            <!-- volba destinace -->
+                            <p>
+                                Destinace
+                                <br>
+                                <select class="vyber" v-model="travelDestinaction">
+                                    <option  value="" disabled>Vyberte jednu možnost</option>
+                                    <option  v-for="(option, index) in travelDestinactions" :key="index" :value="option">
+                                        {{ option.text }}
+                                    </option>
+                                </select>
+                            </p>
+                        
+                            
+                            <!-- datum odletu -->
+                            
+                        
+                        
+                            <div v-if="travelType.value == 'O'" class="input-group">
+                                <label for="inputDepartureDate"></label>
+                                <p>Označte datum odletu</p>
+                                <v-date-picker v-model="departureRangeDate" :min-date="new Date()" value="" id=""/>
+                            </div>
+                            <div v-else class="input-group">
+                                <label for="inputDepartureRangeDate"> Označte datum příletu a odletu</label>
+                                <v-date-picker v-model="departureRangeDate" :min-date="new Date()" is-range />
+                            <!-- datum příletu pokud zpáteční -->
+                            </div>
+                        </div>
+                        <div class="hlavni2">
+                            <p>
+                                <label  for="inputPersonCount">Počet cestujících</label><br>
+                                <!-- <input v-model="personCount" type="number" id="inputPersonCount" min="1" max="3"> výběr počtu cestujícich --> 
+                                <input class="vyber1" v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="3">
+                            </p>
+                            
+                            <!-- volba třídy E, B -->
+                            <p>
+                                <label for="inputClassType">Volba třídy</label><br>
+                                <select class="vyber" v-on:change="chosenSeats = []" v-model="classType" id="inputClassType">
+                                    <option value="" disabled>Vyberte jednu možnost</option>
+                                    <option v-for="(option, index) in classTypes" :key="index" :value="option">
+                                        {{ option.text }}
+                                    </option>
+                                </select>
+                            </p>
+                             <seat v-model="chosenSeats" :seats="seats" :classType = "classType" :personCount= "PersonCount" />
+                            
+                            
+                            
+                            <br>
+                            <button class="vyber" v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
+                        </div>
+                    
+                    </div>
+
+                </div>
+
+                <div class="col">
+                    <div class="hlavni1">
+                        
+                    
+                        <div class="hlavni2">
+                            <img class="foto" src="./assets/let.png" alt="">
+                            <h2>Objednávka</h2>
+                            <p v-if="travelType">
+                                Typ cesty: 
+                                <span style="text-transform: lowercase"> <!-- vypsání výběru  -->
+                                    {{ travelType.text }}
+                                </span>
+                            </p>
+                            <p v-if="travelDestinaction">
+                                Cílová destinace 
+                                <span style="text-transform: lowercase">
+                                    {{ travelDestinaction.text }}
+                                </span>
+                            </p>
+                            <p>
+                                Počet cestujích: {{ personCount}} <!-- vypsání počtu cestujích -->
+                            </p>
+                            <p v-if="classType">
+                                Třída: 
+                                <span style="text-transform: lowercase">
+                                    {{ classType.text }}
+                                </span>
+                            </p>
+
+                            <div v-if="chosenSeats.length">
+                            
+                                Vybraná místa: 
+                                <div class="sedadlo"> <!-- Vypíše vybraná sedadla -->
+                                    <div class="seat" v-for="seat in chosenSeats" :key="seat">
+                                        {{ seat }}
+                                        
+                                    </div>
+                                </div>
+                            </div>
+                           
+                            
+                            
+
+                            
+                        </div>
+                    </div>
+                        
+
+                </div>
+        
+                
+                
+            
+        </div>
+    </div>
+     
+    
+</template>
+
+<script>
+
+import Vue from 'vue';
+
+import VCalendar from 'v-calendar';
+import seat from './components/seat';
+
+Vue.use(VCalendar, {});
+
+export default {
+  components: { seat },
+  name: 'App',
+  data: function() {
+      return {
+          travelDestinaction: "",
+          travelDestinactions: [
+              { value: "P", text: "Paris" },    /* označení a s ním svázaný text */
+              { value: "L", text: "London" },
+          ],
+         
+          
+          travelType: "",
+          travelTypes: [
+              { value: "R", text: "Zpáteční" },
+              { value: "O", text: "Jednosměrná" },
+          ],
+          personCount: 1, /* minimální počet cestujicich  */
+
+          classType: "",
+          classTypes: [
+              { value: "E", text: "Ekonomi" },
+              { value: "B", text: "Business" },
+              { value: "F", text: "First" }
+          ],
+          seats: [              /* definuji sedadla */
+              "F1", "F2", "F3",  
+              "B1", "B2", "B3", 
+              "E1", "E2", "E3", "E4", "E5", "E6",
+          ],
+          chosenSeats: [],
+          departuredate: new Date(),
+          departurerangedate: {
+              start: new Date(),
+              end: new Date(),
+
+          },
+      }
+  },
+  methods: {
+      addSeatClick: function(seat) {
+          if (this.chosenSeats.length < this.personCount) {
+              this.chosenSeats.push(seat);
+          }
+          else {
+              alert("Všichni cestující již sedí!");
+          }
+      },
+      personCountChange: function() {
+          let diff = this.personCount - this.chosenSeats.length;
+              // diff je záporné číslo1
+              for (let i = diff; i < 0; i++) {
+                  this.chosenSeats.pop();       
+              }
+          
+      }
+  }
+}
+</script>
+
+<style>
+    .vyber1{
+        background-color: #0563af;
+        width: 158px;
+        padding: 12px;
+        border: none;
+        color: white;
+    }
+
+
+    .vyber{
+        background-color: #0563af;
+        padding: 12px;
+        border: none;
+        color: white;
+    }
+    .kalen{
+         background-color: #0563af;
+         color: white;
+
+    }
+    
+    
+
+
+  .wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    
+  }
+
+  .seat {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      text-align: center;
+      border: 1px solid gray;
+      margin: 2px;
+      background-color: rgb(62, 156, 53);
+      
+  }
+
+  .seat div:hover {
+      cursor: pointer;
+      background-color: lightgray;
+  }
+
+  .seat .disabled {
+      color: rgb(255, 255, 255);
+  }
+
+  .seat .disabled:hover {
+      cursor: default;
+      background-color: transparent;
+  }
+
+  .seat .chosen {
+      background-color: lightgreen;
+  }
+  .col{
+      width: 90%;
+      background-color: rgb(255, 255, 255);
+        opacity: 0.99;
+  }
+
+  .hlavni{
+      width: 50%;
+    margin: 0 auto;
+    background-color: white;
+      
+  }
+  .hlava{
+      width: 100%;
+      margin: 0 auto;
+      text-align: center;
+  }
+  #app{
+      background-image: url("./assets/leta.jpeg");
+  }
+  .obr{
+      width: 30px;
+  }
+  h1,h2,h3,p {
+      font-family: Arial, Helvetica, sans-serif;
+  }
+
+  .druha{
+      width: 30%;
+    float: left;
+
+  }
+  .col1{
+      width: 100%;
+  }
+  .hlavni2{
+      width: 80%;
+      margin: 0 auto;
+
+  }
+  .foto{
+      float: right;
+      width: 100%;
+  }
+
+  
+  @media (max-width: 1200px) {
+     .wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    
+  }
+
+  .seat {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      text-align: center;
+      border: 1px solid gray;
+      margin: 2px;
+      background-color: rgb(62, 156, 53);
+      
+  }
+
+  .seat div:hover {
+      cursor: pointer;
+      background-color: lightgray;
+  }
+
+  .seat .disabled {
+      color: rgb(255, 255, 255);
+  }
+
+  .seat .disabled:hover {
+      cursor: default;
+      background-color: transparent;
+  }
+
+  .seat .chosen {
+      background-color: lightgreen;
+  }
+  .col{
+      width: 80%;
+      background-color: rgb(255, 255, 255);
+        opacity: 0.99;
+  }
+
+  .hlavni{
+      width: 90%;
+    margin: 0 auto;
+    background-color: white;
+      
+  }
+  .hlava{
+      width: 90%;
+      margin: 0 auto;
+      text-align: center;
+  }
+  #app{
+      background-image: url("./assets/leta.jpeg");
+  }
+  .obr{
+      width: 30px;
+  }
+  h1,h2,h3,p {
+      font-family: Arial, Helvetica, sans-serif;
+  }
+
+  .druha{
+      width: 30%;
+    float: left;
+
+  }
+  .col1{
+      width: 100%;
+  }
+  .hlavni2{
+      width: 80%;
+      margin: 0 auto;
+      }
+    .foto{
+      float: right;
+      width: 100%;
+  }
+    
+    
+}
+
+
+  @media (max-width: 800px) {
+      .wrapper {
+    display: grid;
+    grid-template-columns: 1fr;
+    
+  }
+
+  .seat {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      text-align: center;
+      border: 1px solid gray;
+      margin: 2px;
+      background-color: rgb(62, 156, 53);
+      
+  }
+
+  .seat div:hover {
+      cursor: pointer;
+      background-color: lightgray;
+  }
+
+  .seat .disabled {
+      color: rgb(255, 255, 255);
+  }
+
+  .seat .disabled:hover {
+      cursor: default;
+      background-color: transparent;
+  }
+
+  .seat .chosen {
+      background-color: lightgreen;
+  }
+  .col{
+      width: 80%;
+      background-color: rgb(255, 255, 255);
+        opacity: 0.99;
+         min-height: 100px;
+    
+  }
+
+  .hlavni{
+      width: 90%;
+    margin: 0 auto;
+    background-color: white;
+      
+  }
+  .hlava{
+      width: 100%;
+      margin: 0 auto;
+      text-align: center;
+  }
+  #app{
+      background-image: url("./assets/leta.jpeg");
+  }
+  .obr{
+      width: 30px;
+  }
+  h1,h2,h3,p {
+      font-family: Arial, Helvetica, sans-serif;
+  }
+
+  .druha{
+      width: 30%;
+    float: left;
+
+  }
+  .col1{
+      width: 80%;
+      background-color: rgb(255, 255, 255);
+        opacity: 0.99;
+       
+  }
+  .hlavni2{
+       width: 50%;
+    margin: 0 auto;
+    background-color: white;
+
+  }
+  .foto{
+      float: right;
+      width: 100%;
+    
+    
+    }
+}
+
+
+@media (max-width: 500px) {
+
+.wrapper {
+    display: grid;
+    grid-template-columns: 1fr;
+    
+  }
+
+  .seat {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      text-align: center;
+      border: 1px solid gray;
+      margin: 2px;
+      background-color: rgb(62, 156, 53);
+      
+  }
+
+  .seat div:hover {
+      cursor: pointer;
+      background-color: lightgray;
+  }
+
+  .seat .disabled {
+      color: rgb(255, 255, 255);
+  }
+
+  .seat .disabled:hover {
+      cursor: default;
+      background-color: transparent;
+  }
+
+  .seat .chosen {
+      background-color: lightgreen;
+  }
+  .col{
+      width: 100%;
+      background-color: rgb(255, 255, 255);
+        opacity: 0.99;
+         min-height: 100px;
+    
+  }
+
+  .hlavni{
+      width: 90%;
+    margin: 0 auto;
+    background-color: white;
+      
+  }
+  .hlava{
+      width: 100%;
+      margin: 0 auto;
+      text-align: center;
+  }
+  #app{
+      background-image: url("./assets/leta.jpeg");
+  }
+  .obr{
+      width: 30px;
+  }
+  h1,h2,h3,p {
+      font-family: Arial, Helvetica, sans-serif;
+  }
+
+  .druha{
+      width: 30%;
+    float: left;
+
+  }
+  .col1{
+      width: 100%;
+      background-color: rgb(255, 255, 255);
+        opacity: 0.99;
+       
+  }
+  .hlavni2{
+       width: 50%;
+    margin: 0 auto;
+    background-color: white;
+
+  }
+  .foto{
+      float: right;
+      width: 100%;
+    }
+  
+    
+    
+}
+
+
+  
+
+  
+  
+
+</style>
--- a/src/assets/let.png
+++ b/src/assets/let.png
--- a/src/assets/leta.jpeg
+++ b/src/assets/leta.jpeg
--- a/src/assets/leta.jpg
+++ b/src/assets/leta.jpg
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/sedadlo.png
+++ b/src/assets/sedadlo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/components/seat.vue
+++ b/src/components/seat.vue
@ -0,0 +1,90 @@
+<template>
+ <div class="seatWrap">
+    <div class="seat" v-for="(seat, index) in seats" :key="index">
+        <div v-if="chosenSeats.indexOf(seat) >= 0" v-on:click="chosenSeats.splice(chosenSeats.indexOf(seat), 1)" class="chosen">
+            {{ seat }}
+         </div>
+        <div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
+            {{ seat }}
+         </div>
+         <div v-else class="disabled">
+            {{ seat }}
+         </div>
+           
+                                        
+    </div>
+ </div>
+  
+
+</template>
+
+<script>
+export default {
+    name: "seat",
+    props:[
+        "seats",
+        "classType",
+        "personCount",
+        "value",
+        
+    ],
+    data: function() {
+        return {
+            chosenSeats: this.value 
+        }
+
+    },
+    methods: {
+         methods: {
+      addSeatClick: function(seat) {
+          if (this.chosenSeats.length < this.personCount) {
+              this.chosenSeats.push(seat);
+              this.$emit("input", this.chosenSeats);
+          
+          }
+          else {
+              alert("Všichni cestující již sedí!");
+          }
+      },
+      watch: {
+          value: function(value){
+              this.chosenSeats = value;
+          }
+      }
+    }
+    }
+
+}
+</script>
+
+<style>
+.seat {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      text-align: center;
+      border: 1px solid gray;
+      margin: 2px;
+      background-color: rgb(62, 156, 53);
+      
+  }
+
+  .seat div:hover {
+      cursor: pointer;
+      background-color: lightgray;
+  }
+
+  .seat .disabled {
+      color: rgb(255, 255, 255);
+  }
+
+  .seat .disabled:hover {
+      cursor: default;
+      background-color: transparent;
+  }
+
+  .seat .chosen {
+      background-color: lightgreen;
+  }
+
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,13 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+
+Vue.config.productionTip = false
+
+
+
+
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
			`@ -0,0 +1 @@`
			.vyber1{width:158px}.vyber,.vyber1{padding:12px;border:none}.kalen,.vyber,.vyber1{background-color:#0563af;color:#fff}.wrapper{display:grid;grid-template-columns:1fr 1fr}.seat{display:inline-block;width:50px;height:50px;text-align:center;border:1px solid grey;margin:2px;background-color:#3e9c35}.seat div:hover{cursor:pointer;background-color:#d3d3d3}.seat .disabled{color:#fff}.seat .disabled:hover{cursor:default;background-color:transparent}.seat .chosen{background-color:#90ee90}.col{width:90%;opacity:.99}.col,.hlavni{background-color:#fff}.hlavni{width:50%;margin:0 auto}.hlava{width:100%;margin:0 auto;text-align:center}#app{background-image:url(../img/leta.f93aa404.jpeg)}.obr{width:30px}h1,h2,h3,p{font-family:Arial,Helvetica,sans-serif}.druha{width:30%;float:left}.col1{width:100%}.hlavni2{width:80%;margin:0 auto}.foto{float:right;width:100%}@media (max-width:1200px){.wrapper{display:grid;grid-template-columns:1fr 1fr}.seat{display:inline-block;width:50px;height:50px;text-align:center;border:1px solid grey;margin:2px;background-color:#3e9c35}.seat div:hover{cursor:pointer;background-color:#d3d3d3}.seat .disabled{color:#fff}.seat .disabled:hover{cursor:default;background-color:transparent}.seat .chosen{background-color:#90ee90}.col{width:80%;background-color:#fff;opacity:.99}.hlavni{background-color:#fff}.hlava,.hlavni{width:90%;margin:0 auto}.hlava{text-align:center}#app{background-image:url(../img/leta.f93aa404.jpeg)}.obr{width:30px}h1,h2,h3,p{font-family:Arial,Helvetica,sans-serif}.druha{width:30%;float:left}.col1{width:100%}.hlavni2{width:80%;margin:0 auto}.foto{float:right;width:100%}}@media (max-width:800px){.wrapper{display:grid;grid-template-columns:1fr}.seat{display:inline-block;width:50px;height:50px;text-align:center;border:1px solid grey;margin:2px;background-color:#3e9c35}.seat div:hover{cursor:pointer;background-color:#d3d3d3}.seat .disabled{color:#fff}.seat .disabled:hover{cursor:default;background-color:transparent}.seat .chosen{background-color:#90ee90}.col{width:80%;opacity:.99;min-height:100px}.col,.hlavni{background-color:#fff}.hlavni{width:90%;margin:0 auto}.hlava{width:100%;margin:0 auto;text-align:center}#app{background-image:url(../img/leta.f93aa404.jpeg)}.obr{width:30px}h1,h2,h3,p{font-family:Arial,Helvetica,sans-serif}.druha{width:30%;float:left}.col1{width:80%;opacity:.99}.col1,.hlavni2{background-color:#fff}.hlavni2{width:50%;margin:0 auto}.foto{float:right;width:100%}}@media (max-width:500px){.wrapper{display:grid;grid-template-columns:1fr}.seat{display:inline-block;width:50px;height:50px;text-align:center;border:1px solid grey;margin:2px;background-color:#3e9c35}.seat div:hover{cursor:pointer;background-color:#d3d3d3}.seat .disabled{color:#fff}.seat .disabled:hover{cursor:default;background-color:transparent}.seat .chosen{background-color:#90ee90}.col{width:100%;opacity:.99;min-height:100px}.col,.hlavni{background-color:#fff}.hlavni{width:90%;margin:0 auto}.hlava{width:100%;margin:0 auto;text-align:center}#app{background-image:url(../img/leta.f93aa404.jpeg)}.obr{width:30px}h1,h2,h3,p{font-family:Arial,Helvetica,sans-serif}.druha{width:30%;float:left}.col1{width:100%;opacity:.99}.col1,.hlavni2{background-color:#fff}.hlavni2{width:50%;margin:0 auto}.foto{float:right;width:100%}}
			`@ -0,0 +1 @@`
			<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>letenka</title><link href="/css/app.542a1608.css" rel="preload" as="style"><link href="/js/app.85d40bdc.js" rel="preload" as="script"><link href="/js/chunk-vendors.11f5230c.js" rel="preload" as="script"><link href="/css/app.542a1608.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but letenka doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.11f5230c.js"></script><script src="/js/app.85d40bdc.js"></script></body></html>