init

2026-08-08 23:51:05 +02:00
commit bb7a17a874
73 changed files with 15038 additions and 0 deletions
@@ -0,0 +1,118 @@
+<template>
+    <ul class="vuejs-countdown">
+        <li>
+            <p class="digit">{{ hours }}</p>
+            <p class="text">H</p>
+        </li>
+        <li>
+            <p class="digit">{{ minutes }}</p>
+            <p class="text">M</p>
+        </li>
+        <li>
+            <p class="digit">{{ seconds }}</p>
+            <p class="text">S</p>
+        </li>
+    </ul>
+</template>
+
+<script>
+let interval = null;
+
+export default {
+    name: 'vuejsCountDown',
+    props: {
+        deadline: {
+            type: String
+        },
+        end: {
+            type: String
+        },
+        stop: {
+            type: Boolean
+        }
+    },
+    data() {
+        return {
+            now: new Date,
+            date: null,
+            diff: 0
+        }
+    },
+    created() {
+        interval = setInterval(() => {
+            this.now = new Date;
+        }, 500);
+    },
+    computed: {
+        twoDigits(value) {
+            if ( value.toString().length <= 1 ) {
+                return '0'+value.toString()
+            }
+            else
+            {
+                return value.toString() 
+            }
+        },
+
+        seconds() {
+            let value = 60 - this.now.getSeconds() - 1 
+            return value < 10 ? '0' + value.toString() : value.toString()
+        },
+
+        minutes() {
+            let value = 60 - this.now.getMinutes() - 1 
+            return value < 10 ? '0' + value.toString() : value.toString()
+        },
+
+        hours() {
+            let value = 24 - this.now.getHours() - 1 
+            return value < 10 ? '0' + value.toString() : value.toString()
+        }
+    },
+    destroyed() {
+        clearInterval(interval);
+    }
+}
+</script>
+<style>
+.vuejs-countdown {
+  padding: 0;
+  margin: 0;
+}
+.vuejs-countdown li {
+  display: inline-block;
+  margin: 0 8px;
+  text-align: center;
+  position: relative;
+}
+.vuejs-countdown li p {
+    margin: 0;
+}
+.vuejs-countdown li:after {
+  content: ":";
+  position: absolute;
+  top: 0;
+  right: -13px;
+  font-size: 1.75rem;
+}
+.vuejs-countdown li:first-of-type {
+  margin-left: 0;
+}
+.vuejs-countdown li:last-of-type {
+  margin-right: 0;
+}
+.vuejs-countdown li:last-of-type:after {
+  content: "";
+}
+.vuejs-countdown .digit {
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+  margin-bottom: 0;
+}
+.vuejs-countdown .text {
+  text-transform: uppercase;
+  margin-bottom: 0;
+  font-size: 1rem;
+}
+</style>