simple_app/index.html at main · shraddhasun/simple_app · 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
<!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>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #0f0f1a;
      font-family: 'Segoe UI', system-ui, sans-serif;
      color: #fff;
    }
    h1 { font-size: 1.4rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: #aaa; margin-bottom: 2.5rem; }
    .timer { display: flex; gap: 1.5rem; margin-bottom: 2.5rem; }
    .unit { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
    .digits { background: #1e1e30; border: 1px solid #2e2e50; border-radius: 12px; padding: 1.2rem 1.8rem; font-size: 3.5rem; font-weight: 700; min-width: 110px; text-align: center; color: #7c6fff; text-shadow: 0 0 20px rgba(124,111,255,0.5); }
    .label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #666; }
    .sep { font-size: 3.5rem; font-weight: 700; color: #333; padding-top: 1.2rem; }
    .controls { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
    button { padding: 0.65rem 1.8rem; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
    #startBtn { background: #7c6fff; color: #fff; }
    #pauseBtn { background: #2e2e50; color: #aaa; }
    #resetBtn { background: #1e1e30; color: #666; border: 1px solid #2e2e50; }
    .set-time { display: flex; align-items: center; gap: 0.6rem; color: #666; font-size: 0.85rem; }
    .set-time input { width: 60px; padding: 0.4rem 0.5rem; background: #1e1e30; border: 1px solid #2e2e50; border-radius: 6px; color: #aaa; font-size: 0.85rem; text-align: center; }
    #status { margin-top: 1.2rem; font-size: 0.9rem; color: #7c6fff; letter-spacing: 0.08em; min-height: 1.4em; }
  </style>
</head>
<body>
  <h1>Countdown Timer</h1>
  <div class="timer">
    <div class="unit"><div class="digits" id="hours">00</div><div class="label">Hours</div></div>
    <div class="sep">:</div>
    <div class="unit"><div class="digits" id="minutes">10</div><div class="label">Minutes</div></div>
    <div class="sep">:</div>
    <div class="unit"><div class="digits" id="seconds">00</div><div class="label">Seconds</div></div>
  </div>
  <div class="controls">
    <button id="startBtn" onclick="startTimer()">Start</button>
    <button id="pauseBtn" onclick="pauseTimer()">Pause</button>
    <button id="resetBtn" onclick="resetTimer()">Reset</button>
  </div>
  <div class="set-time">
    Set:
    <input type="number" id="setH" min="0" max="99" value="0"/>h
    <input type="number" id="setM" min="0" max="59" value="10"/>m
    <input type="number" id="setS" min="0" max="59" value="0"/>s
    <button onclick="applyTime()" style="padding:0.35rem 0.9rem;font-size:0.8rem;background:#2e2e50;color:#aaa;border:1px solid #3e3e70;border-radius:6px;">Apply</button>
  </div>
  <div id="status"></div>
  <script>
    let totalSeconds = 600, remaining = 600, interval = null, running = false;
    function pad(n) { return String(n).padStart(2,'0'); }
    function render() {
      document.getElementById('hours').textContent = pad(Math.floor(remaining/3600));
      document.getElementById('minutes').textContent = pad(Math.floor((remaining%3600)/60));
      document.getElementById('seconds').textContent = pad(remaining%60);
    }
    function startTimer() {
      if (running || remaining <= 0) return;
      running = true;
      document.getElementById('status').textContent = 'Running...';
      interval = setInterval(() => {
        remaining--;
        render();
        if (remaining <= 0) { clearInterval(interval); running = false; document.getElementById('status').textContent = 'Time is up!'; }
      }, 1000);
    }
    function pauseTimer() {
      if (!running) return;
      clearInterval(interval); running = false;
      document.getElementById('status').textContent = 'Paused';
    }
    function resetTimer() {
      clearInterval(interval); running = false; remaining = totalSeconds; render();
      document.getElementById('status').textContent = '';
    }
    function applyTime() {
      const h = parseInt(document.getElementById('setH').value)||0;
      const m = parseInt(document.getElementById('setM').value)||0;
      const s = parseInt(document.getElementById('setS').value)||0;
      clearInterval(interval); running = false;
      totalSeconds = h*3600 + m*60 + s; remaining = totalSeconds; render();
      document.getElementById('status').textContent = '';
    }
    render();
  </script>
</body>
</html>