Merge pull request #1 from RemiSaurel/dev

Hide Youtube player + footer + styling

src/App.vue

@@ -5,11 +5,19 @@
       <h3 id="time"></h3>
     </header>
     <to-do-list></to-do-list>
-    <div class="ytb">
+    <div id="switch_youtube">
-      <iframe width="80%" height="400" src="https://www.youtube.com/embed/MCkTebktHVc?autoplay=1&mute=1" title="YouTube video player" frameborder="0"
+      <label class="switch">
-              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
+        <input type="checkbox" v-model="displayYoutube">
+        <span class="slider round"></span>
+      </label>
+    </div>
+    <div class="ytb" v-show="displayYoutube">
+      <iframe width="80%" height="400" src="https://www.youtube-nocookie.com/embed/MCkTebktHVc?autoplay=1&mute=1" title="YouTube video player" frameborder="0"
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+      id="youtube_video">
       </iframe>
     </div>
+    <footer>Made with 💙 by <a href="https://github.com/RemiSaurel" target="_blank" class="name">Rémi Saurel</a> </footer>
   </div>
 </template>
 
@@ -21,8 +29,15 @@ export default {
   components: {
     Welcome,
     ToDoList
+  },
+  data() {
+    return {
+      displayYoutube: true
     }
   }
+}
+
+
 window.addEventListener("load", () => {
   clock();
 
@@ -52,13 +67,22 @@ window.addEventListener("load", () => {
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap');
 
 * {
-  background-color: #FFF5DE;
   font-family: 'Outfit', sans-serif;
 }
 
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+body {
+  background-color: #FFF5DE;
+}
+
 .ytb {
   text-align: center;
   margin-top: 16px;
+  user-select: none;
 }
 
 header {
@@ -70,7 +94,111 @@ header {
   align-items: center;
 }
 
+footer {
+  text-align: center;
+  margin-top: 16px;
+  margin-bottom: 0;
+  width: 100%;
+}
+
 #time {
-  font-size: 20px;
+  font-size: 28px;
+}
+
+/* TEXT UNDERLINE */
+.name {
+  display: inline-block;
+  position: relative;
+  color: #79624c;
+}
+
+.name:after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: -2px;
+  left: 0;
+  background-color: #79624c;
+  transform-origin: bottom right;
+  transition: transform 0.5s ease-out;
+}
+
+.name:hover:after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+
+/* SWITCH */
+#switch_youtube {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  margin-top: 16px;
+  margin-right: 10vw;
+}
+
+.switch {
+  position: absolute;
+  justify-content: flex-end;
+  display: inline-block;
+  width: 40px;
+  height: 24px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 2px;
+  bottom: 3px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #79624c;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #79624c;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(17px);
+  -ms-transform: translateX(17px);
+  transform: translateX(17px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 16px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
 }
 </style>

src/components/ToDoList.vue

@@ -3,7 +3,7 @@
     <input @keydown.enter="addItem(item)" type="text" name="todo" id="todo_input" v-model="item"
     placeholder="Insérer votre todo">
     <div id="liste">
-      <div v-for="item in items" :key="item.id" class="item">
+      <div v-for="item in items" :key="item" class="item">
         <div id="text">
           {{item}}
         </div>
@@ -54,12 +54,12 @@ export default {
     margin: 8px 0;
     box-sizing: border-box;
     border-radius: 16px;
-    border: 2px solid saddlebrown;
+    border: 3px solid #79624c;
   }
 
   #todo_input:focus {
     outline: none !important;
-    border: 2px solid #8783D1;
+    border: 3px solid #343197;
   }
 
   #liste {
@@ -67,18 +67,24 @@ export default {
     flex-direction: column;
   }
 
+  .checkbox {
+    border-radius: 16px;
+    font-size: 24px;
+  }
+
   .item {
     display: flex;
     font-size: 18px;
     margin-top: 8px;
     align-items: center;
-    padding: 8px 10px 8px 10px;
+    padding: 10px 10px 10px 10px;
     border-radius: 12px;
     max-width: 50vw;
     box-shadow: rgba(111, 111, 111, 0.2) 0px 7px 29px 0px;
     margin-left: auto;
     margin-right: auto;
     word-break: break-all;
+    background-color: white;
   }
 
   .item:hover {
@@ -87,7 +93,7 @@ export default {
 
   #trash {
     font-size: 20px;
-    padding: 8px;
+    padding-left: 8px;
     cursor: pointer;
   }
 </style>