widgets/countdown.html at main · VolkisAI/widgets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Countdown Timer</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css">
  <style>
    body {
      background-color: transparent;
      margin: 0;
      padding: 0;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .flip-clock-wrapper {
      max-width: 100%; /* Allow full width */
      margin: 0 auto;
    }

    .flip-clock-divider.days,
    .flip-clock-divider.hours,
    .flip-clock-divider.minutes,
    .flip-clock-divider.seconds {
      width: 10px; /* Reduce space between the cards */
    }

    .flip-clock-label {
      display: none; /* Hide the labels */
    }

    @media only screen and (max-width: 320px) {
      .flip-clock-wrapper ul {
        height: 30px;
        line-height: 30px;
        margin: 1px;
        width: 20px !important;
      }

      .flip-clock-wrapper ul li a div.up:after {
        top: 14px;
      }

      .flip {
        width: 20px !important;
      }

      .flip-clock-divider {
        height: 30px;
        width: 8px !important;
      }

      .flip-clock-dot {
        height: 3px;
        width: 3px;
        left: 1px !important;
      }

      .flip-clock-dot.top {
        top: 10px;
      }

      .flip-clock-dot.bottom {
        bottom: 5px;
      }

      .flip-clock-divider .flip-clock-label {
        font-size: 10px !important;
      }

      .flip-clock-divider.days .flip-clock-label,
      .flip-clock-divider.hours .flip-clock-label,
      .flip-clock-divider.minutes .flip-clock-label,
      .flip-clock-divider.seconds .flip-clock-label {
        right: -40px !important;
      }

      .flip-clock-wrapper ul li {
        line-height: 30px;
      }

      .flip-clock-wrapper ul {
        width: 20px !important;
      }

      .flip-clock-wrapper ul li a div div.inn {
        font-size: 18px;
      }
    }

    /* Add other responsive adjustments if necessary */
  </style>
</head>
<body>
  <div class="flip-clock-wrapper">
    <div class="timer"></div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
  <script>
    $(document).ready(function() {
      // Get London time
      var options = { timeZone: 'Europe/London', year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
      var formatter = new Intl.DateTimeFormat([], options);
      var londonDate = new Date(formatter.format(new Date()));

      // Set target date (in UK date format)
      var targetDate = new Date("08/09/2023");

      var seconds = (targetDate - londonDate) / 1000;

      var clock = $(".timer").FlipClock(seconds, {
        countdown: true,
        clockFace: 'DailyCounter'
      });
    });
  </script>
</body>
</html>