Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

SmartClock#10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
dhanshrii2006 wants to merge1 commit intoPacktPublishing:main
base:main
Choose a base branch
Loading
fromdhanshrii2006:newadditions
Open
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions50-Projects-In-50-Days---HTML-CSS-JavaScript
Open in desktop
Submodule 50-Projects-In-50-Days---HTML-CSS-JavaScript added at e2bcd2
290 changes: 267 additions & 23 deletionstheme-clock/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,272 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Theme Clock</title>
</head>
<body>
<!-- Inspired by this dribbble shot https://dribbble.com/shots/5958443-Alarm-clock -->

<button class="toggle">Dark mode</button>

<div class="clock-container">
<div class="clock">
<div class="needle hour"></div>
<div class="needle minute"></div>
<div class="needle second"></div>
<div class="center-point"></div>
</div>

<div class="time"></div>
<div class="date"></div>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Enhanced Theme Clock</title>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- Control Panel -->
<div class="control-panel">
<button class="toggle-theme" id="toggleTheme">
<i class="fas fa-moon"></i>
<span>Dark Mode</span>
</button>

<button class="fullscreen-btn" id="fullscreenBtn">
<i class="fas fa-expand"></i>
</button>

<button class="sound-toggle" id="soundToggle">
<i class="fas fa-volume-up"></i>
</button>

<button class="settings-btn" id="settingsBtn">
<i class="fas fa-cog"></i>
</button>
</div>

<!-- Settings Panel -->
<div class="settings-panel" id="settingsPanel">
<div class="settings-content">
<h3>Settings</h3>

<div class="setting-group">
<label>Timezone:</label>
<select id="timezoneSelect">
<option value="local">Local Time</option>
<option value="UTC">UTC</option>
<option value="America/New_York">New York</option>
<option value="America/Los_Angeles">Los Angeles</option>
<option value="Europe/London">London</option>
<option value="Europe/Paris">Paris</option>
<option value="Asia/Tokyo">Tokyo</option>
<option value="Asia/Shanghai">Shanghai</option>
<option value="Asia/Kolkata">Mumbai</option>
<option value="Australia/Sydney">Sydney</option>
</select>
</div>

<div class="setting-group">
<label>Clock Theme:</label>
<select id="clockTheme">
<option value="modern">Modern</option>
<option value="classic">Classic</option>
<option value="minimal">Minimal</option>
<option value="neon">Neon</option>
</select>
</div>

<div class="setting-group">
<label>Animation Speed:</label>
<input type="range" id="animationSpeed" min="0.1" max="2" step="0.1" value="1">
<span id="speedValue">1x</span>
</div>

<button class="close-settings" id="closeSettings">Close</button>
</div>
</div>

<!-- Main Container -->
<div class="main-container">
<!-- Tab Navigation -->
<div class="tab-nav">
<button class="tab-btn active" data-tab="clock">
<i class="fas fa-clock"></i>
Clock
</button>
<button class="tab-btn" data-tab="stopwatch">
<i class="fas fa-stopwatch"></i>
Stopwatch
</button>
<button class="tab-btn" data-tab="timer">
<i class="fas fa-hourglass-half"></i>
Timer
</button>
<button class="tab-btn" data-tab="alarm">
<i class="fas fa-bell"></i>
Alarm
</button>
</div>

<!-- Clock Tab -->
<div class="tab-content active" id="clock-tab">
<div class="clock-container">
<div class="clock" id="analogClock">
<!-- Hour markers -->
<div class="hour-markers">
<div class="marker hour-12">12</div>
<div class="marker hour-3">3</div>
<div class="marker hour-6">6</div>
<div class="marker hour-9">9</div>
<!-- Minute markers -->
<div class="minute-markers">
<!-- These will be generated by JavaScript -->
</div>
</div>

<div class="needle hour" id="hourHand"></div>
<div class="needle minute" id="minuteHand"></div>
<div class="needle second" id="secondHand"></div>
<div class="center-point"></div>
</div>

<div class="digital-display">
<div class="time" id="digitalTime"></div>
<div class="date" id="digitalDate"></div>
<div class="timezone-info" id="timezoneInfo">Local Time</div>
</div>
</div>
</div>

<!-- Stopwatch Tab -->
<div class="tab-content" id="stopwatch-tab">
<div class="stopwatch-container">
<div class="stopwatch-display">
<div class="stopwatch-time" id="stopwatchTime">00:00:00</div>
<div class="stopwatch-ms" id="stopwatchMs">000</div>
</div>
<div class="stopwatch-controls">
<button class="control-btn start" id="stopwatchStart">
<i class="fas fa-play"></i>
Start
</button>
<button class="control-btn pause" id="stopwatchPause">
<i class="fas fa-pause"></i>
Pause
</button>
<button class="control-btn reset" id="stopwatchReset">
<i class="fas fa-redo"></i>
Reset
</button>
<button class="control-btn lap" id="stopwatchLap">
<i class="fas fa-flag"></i>
Lap
</button>
</div>
<div class="lap-times" id="lapTimes"></div>
</div>
</div>

<!-- Timer Tab -->
<div class="tab-content" id="timer-tab">
<div class="timer-container">
<div class="timer-setup" id="timerSetup">
<div class="time-inputs">
<div class="input-group">
<label>Hours</label>
<input type="number" id="timerHours" min="0" max="23" value="0">
</div>
<div class="input-group">
<label>Minutes</label>
<input type="number" id="timerMinutes" min="0" max="59" value="5">
</div>
<div class="input-group">
<label>Seconds</label>
<input type="number" id="timerSeconds" min="0" max="59" value="0">
</div>
</div>
<button class="control-btn start" id="timerStart">
<i class="fas fa-play"></i>
Start Timer
</button>
</div>

<div class="timer-display hidden" id="timerDisplay">
<div class="timer-circle">
<svg class="progress-ring" width="200" height="200">
<circle class="progress-ring-circle" cx="100" cy="100" r="90"/>
</svg>
<div class="timer-time" id="timerTime">05:00</div>
</div>
<div class="timer-controls">
<button class="control-btn pause" id="timerPause">
<i class="fas fa-pause"></i>
Pause
</button>
<button class="control-btn stop" id="timerStop">
<i class="fas fa-stop"></i>
Stop
</button>
</div>
</div>
</div>
</div>

<!-- Alarm Tab -->
<div class="tab-content" id="alarm-tab">
<div class="alarm-container">
<div class="alarm-setup">
<div class="time-inputs">
<div class="input-group">
<label>Hour</label>
<input type="number" id="alarmHour" min="1" max="12" value="7">
</div>
<div class="input-group">
<label>Minute</label>
<input type="number" id="alarmMinute" min="0" max="59" value="0">
</div>
<div class="input-group">
<label>AM/PM</label>
<select id="alarmAmPm">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
</div>
<div class="alarm-days">
<label>Repeat:</label>
<div class="day-buttons">
<button class="day-btn" data-day="0">Sun</button>
<button class="day-btn" data-day="1">Mon</button>
<button class="day-btn" data-day="2">Tue</button>
<button class="day-btn" data-day="3">Wed</button>
<button class="day-btn" data-day="4">Thu</button>
<button class="day-btn" data-day="5">Fri</button>
<button class="day-btn" data-day="6">Sat</button>
</div>
</div>
<button class="control-btn start" id="alarmSet">
<i class="fas fa-bell"></i>
Set Alarm
</button>
</div>

<div class="active-alarms" id="activeAlarms">
<h3>Active Alarms</h3>
<div class="alarm-list" id="alarmList"></div>
</div>
</div>
</div>
</div>

<!-- Alarm Modal -->
<div class="alarm-modal hidden" id="alarmModal">
<div class="modal-content">
<div class="alarm-icon">
<i class="fas fa-bell fa-3x"></i>
</div>
<h2>Alarm!</h2>
<div class="alarm-time" id="alarmModalTime"></div>
<button class="control-btn stop" id="dismissAlarm">
<i class="fas fa-times"></i>
Dismiss
</button>
</div>
</div>

<!-- Audio elements for sounds -->
<audio id="alarmSound" loop>
<source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFIXfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBSuJ1/LNeSsF" type="audio/wav">
</audio>

<audio id="tickSound">
<source src="data:audio/wav;base64,UklGRuACAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YdwCAAC4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA" type="audio/wav">
</audio>

<script src="script.js"></script>
</body>
</html>
</body>
</html>
Loading
[8]ページ先頭
©2009-2025 Movatter.jp