|
|
@@ -0,0 +1,252 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Clock</title>
|
|
|
+ <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
+ transition: background-color 0.3s ease, color 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ body.light-mode {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ body.dark-mode {
|
|
|
+ background-color: #1a1a1a;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cat-background {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url('./img/cat.jpg');
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ z-index: -1;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cat-background.active {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .clock-container {
|
|
|
+ text-align: center;
|
|
|
+ padding: 40px;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border-radius: 20px;
|
|
|
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ body.dark-mode .clock-container {
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .cat-background.active ~ * .clock-container,
|
|
|
+ .cat-background.active ~ .clock-container {
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ body.dark-mode .cat-background.active ~ * .clock-container,
|
|
|
+ body.dark-mode .cat-background.active ~ .clock-container {
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ font-size: 72px;
|
|
|
+ font-weight: 300;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-top: 20px;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toggle-container {
|
|
|
+ position: fixed;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dark-mode-toggle {
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cat-mode-toggle {
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toggle-label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ body.dark-mode .toggle-label {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cat-background.active ~ * .toggle-label,
|
|
|
+ .cat-background.active ~ .toggle-label {
|
|
|
+ text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
|
|
|
+ }
|
|
|
+
|
|
|
+ .mode-icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <script src="../script/jquery.min.js"></script>
|
|
|
+ <script src="../script/ao_module.js"></script>
|
|
|
+</head>
|
|
|
+<body class="light-mode">
|
|
|
+ <!-- Cat Background -->
|
|
|
+ <div class="cat-background" id="catBackground"></div>
|
|
|
+
|
|
|
+ <!-- Dark Mode Toggle -->
|
|
|
+ <div class="toggle-container dark-mode-toggle">
|
|
|
+ <div class="toggle-label">
|
|
|
+ <div class="ui toggle checkbox" id="darkModeToggle">
|
|
|
+ <input type="checkbox" name="darkMode">
|
|
|
+ <label><img src="./img/light-mode.svg" class="mode-icon" id="modeIcon" alt="Mode" style="margin-top: -0.3em;"></label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Cat Mode Toggle -->
|
|
|
+ <div class="toggle-container cat-mode-toggle">
|
|
|
+ <div class="toggle-label">
|
|
|
+ <div class="ui toggle checkbox" id="catModeToggle">
|
|
|
+ <input type="checkbox" name="catMode">
|
|
|
+ <label>Cat Mode</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Clock Display -->
|
|
|
+ <div class="clock-container">
|
|
|
+ <div class="time" id="time">00:00:00 AM</div>
|
|
|
+ <div class="date" id="date">Loading...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="../../script/jquery.min.js"></script>
|
|
|
+ <script src="../../script/semantic/semantic.min.js"></script>
|
|
|
+ <script>
|
|
|
+ // Initialize Semantic UI checkboxes
|
|
|
+ $('.ui.checkbox').checkbox();
|
|
|
+
|
|
|
+ // Fix the window size
|
|
|
+ //ao_module_setFixedWindowSize();
|
|
|
+
|
|
|
+ // Update cat background based on dark mode
|
|
|
+ function updateCatBackground() {
|
|
|
+ const isDarkMode = document.body.classList.contains('dark-mode');
|
|
|
+ const catBg = $('#catBackground');
|
|
|
+ if (isDarkMode) {
|
|
|
+ catBg.css('background-image', 'url("./img/cat-dark.jpg")');
|
|
|
+ } else {
|
|
|
+ catBg.css('background-image', 'url("./img/cat.jpg")');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Update clock function
|
|
|
+ function updateClock() {
|
|
|
+ const now = new Date();
|
|
|
+
|
|
|
+ // Format time
|
|
|
+ let hours = now.getHours();
|
|
|
+ const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
|
+ const seconds = String(now.getSeconds()).padStart(2, '0');
|
|
|
+ const ampm = hours >= 12 ? 'PM' : 'AM';
|
|
|
+ hours = hours % 12;
|
|
|
+ hours = hours ? hours : 12; // 0 should be 12
|
|
|
+ const hoursStr = String(hours).padStart(2, '0');
|
|
|
+
|
|
|
+ document.getElementById('time').textContent = `${hoursStr}:${minutes}:${seconds} ${ampm}`;
|
|
|
+
|
|
|
+ // Format date
|
|
|
+ const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
|
|
+ const dayOfWeek = days[now.getDay()];
|
|
|
+ const day = String(now.getDate()).padStart(2, '0');
|
|
|
+ const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
|
+ const year = now.getFullYear();
|
|
|
+
|
|
|
+ document.getElementById('date').textContent = `${dayOfWeek}, ${day}/${month}/${year}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Dark mode toggle
|
|
|
+ $('#darkModeToggle').checkbox({
|
|
|
+ onChecked: function() {
|
|
|
+ document.body.classList.remove('light-mode');
|
|
|
+ document.body.classList.add('dark-mode');
|
|
|
+ $('#modeIcon').attr('src', './img/light-mode.svg');
|
|
|
+ updateCatBackground();
|
|
|
+ localStorage.setItem('darkMode', 'true');
|
|
|
+ },
|
|
|
+ onUnchecked: function() {
|
|
|
+ document.body.classList.remove('dark-mode');
|
|
|
+ document.body.classList.add('light-mode');
|
|
|
+ $('#modeIcon').attr('src', './img/dark-mode.svg');
|
|
|
+ updateCatBackground();
|
|
|
+ localStorage.setItem('darkMode', 'false');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // Cat mode toggle
|
|
|
+ $('#catModeToggle').checkbox({
|
|
|
+ onChecked: function() {
|
|
|
+ updateCatBackground();
|
|
|
+ $('#catBackground').addClass('active');
|
|
|
+ localStorage.setItem('catMode', 'true');
|
|
|
+ },
|
|
|
+ onUnchecked: function() {
|
|
|
+ $('#catBackground').removeClass('active');
|
|
|
+ localStorage.setItem('catMode', 'false');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // Load saved preferences
|
|
|
+ if (localStorage.getItem('darkMode') === 'true') {
|
|
|
+ $('#darkModeToggle').checkbox('check');
|
|
|
+ $('#modeIcon').attr('src', './img/light-mode.svg');
|
|
|
+ } else {
|
|
|
+ $('#modeIcon').attr('src', './img/dark-mode.svg');
|
|
|
+ }
|
|
|
+
|
|
|
+ if (localStorage.getItem('catMode') === 'true') {
|
|
|
+ $('#catModeToggle').checkbox('check');
|
|
|
+ updateCatBackground();
|
|
|
+ $('#catBackground').addClass('active');
|
|
|
+ }
|
|
|
+
|
|
|
+ // Update clock immediately and then every second
|
|
|
+ updateClock();
|
|
|
+ setInterval(updateClock, 1000);
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
Toby Chui
