150 lines
7.4 KiB
HTML
150 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Art Deco Time Manager - UI Hybrid 5</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="time-manager-container">
|
|
<header class="tm-header">
|
|
<div class="art-deco-frame">
|
|
<h1 class="tm-title">Chronos Suite</h1>
|
|
<p class="tm-subtitle">Your Elegant Time Companion</p>
|
|
</div>
|
|
<div class="tm-current-time">
|
|
<div class="time-display" id="currentTime">00:00:00</div>
|
|
<div class="date-display" id="currentDate">Monday, January 1, 1920</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="tm-navigation">
|
|
<button class="nav-tab active" data-view="calendar">Calendar</button>
|
|
<button class="nav-tab" data-view="timer">Timer</button>
|
|
<button class="nav-tab" data-view="schedule">Schedule</button>
|
|
<button class="nav-tab" data-view="timezone">World Time</button>
|
|
<button class="nav-tab" data-view="deadlines">Deadlines</button>
|
|
</nav>
|
|
|
|
<main class="tm-content">
|
|
<section class="view-panel active" id="calendarView">
|
|
<div class="calendar-container">
|
|
<div class="calendar-header">
|
|
<button class="calendar-nav" id="prevMonth">◄</button>
|
|
<h2 class="calendar-month-year" id="monthYear">January 1920</h2>
|
|
<button class="calendar-nav" id="nextMonth">►</button>
|
|
</div>
|
|
<div class="calendar-grid" id="calendarGrid">
|
|
<div class="day-header">Sun</div>
|
|
<div class="day-header">Mon</div>
|
|
<div class="day-header">Tue</div>
|
|
<div class="day-header">Wed</div>
|
|
<div class="day-header">Thu</div>
|
|
<div class="day-header">Fri</div>
|
|
<div class="day-header">Sat</div>
|
|
</div>
|
|
<div class="events-panel">
|
|
<h3 class="events-title">Today's Affairs</h3>
|
|
<ul class="events-list" id="eventsList"></ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="view-panel" id="timerView">
|
|
<div class="timer-container">
|
|
<div class="timer-display">
|
|
<div class="timer-digits" id="timerDisplay">00:00:00</div>
|
|
</div>
|
|
<div class="timer-controls">
|
|
<button class="timer-btn" id="startTimer">Start</button>
|
|
<button class="timer-btn" id="pauseTimer">Pause</button>
|
|
<button class="timer-btn" id="resetTimer">Reset</button>
|
|
</div>
|
|
<div class="timer-presets">
|
|
<h3>Quick Sets</h3>
|
|
<div class="preset-buttons">
|
|
<button class="preset-btn" data-minutes="5">5 min</button>
|
|
<button class="preset-btn" data-minutes="15">15 min</button>
|
|
<button class="preset-btn" data-minutes="30">30 min</button>
|
|
<button class="preset-btn" data-minutes="60">1 hour</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="view-panel" id="scheduleView">
|
|
<div class="schedule-container">
|
|
<h2 class="schedule-title">Daily Programme</h2>
|
|
<form class="schedule-form" id="scheduleForm">
|
|
<input type="time" class="schedule-input" id="scheduleTime" required>
|
|
<input type="text" class="schedule-input" id="scheduleTask" placeholder="Enter appointment details" required>
|
|
<button type="submit" class="schedule-btn">Add to Schedule</button>
|
|
</form>
|
|
<div class="schedule-timeline" id="scheduleTimeline"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="view-panel" id="timezoneView">
|
|
<div class="timezone-container">
|
|
<h2 class="timezone-title">World Clock</h2>
|
|
<div class="timezone-grid" id="timezoneGrid">
|
|
<div class="timezone-card" data-tz="America/New_York">
|
|
<h3>New York</h3>
|
|
<div class="tz-time"></div>
|
|
</div>
|
|
<div class="timezone-card" data-tz="Europe/London">
|
|
<h3>London</h3>
|
|
<div class="tz-time"></div>
|
|
</div>
|
|
<div class="timezone-card" data-tz="Europe/Paris">
|
|
<h3>Paris</h3>
|
|
<div class="tz-time"></div>
|
|
</div>
|
|
<div class="timezone-card" data-tz="Asia/Tokyo">
|
|
<h3>Tokyo</h3>
|
|
<div class="tz-time"></div>
|
|
</div>
|
|
</div>
|
|
<div class="timezone-converter">
|
|
<h3>Time Converter</h3>
|
|
<input type="time" class="converter-input" id="converterTime">
|
|
<select class="converter-select" id="fromTimezone">
|
|
<option value="local">Local Time</option>
|
|
<option value="America/New_York">New York</option>
|
|
<option value="Europe/London">London</option>
|
|
<option value="Asia/Tokyo">Tokyo</option>
|
|
</select>
|
|
<button class="converter-btn" id="convertTime">Convert</button>
|
|
<div class="converter-results" id="converterResults"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="view-panel" id="deadlinesView">
|
|
<div class="deadlines-container">
|
|
<h2 class="deadlines-title">Important Deadlines</h2>
|
|
<form class="deadline-form" id="deadlineForm">
|
|
<input type="text" class="deadline-input" id="deadlineTitle" placeholder="Deadline title" required>
|
|
<input type="datetime-local" class="deadline-input" id="deadlineDate" required>
|
|
<select class="deadline-input" id="deadlinePriority">
|
|
<option value="low">Low Priority</option>
|
|
<option value="medium">Medium Priority</option>
|
|
<option value="high">High Priority</option>
|
|
</select>
|
|
<button type="submit" class="deadline-btn">Add Deadline</button>
|
|
</form>
|
|
<div class="deadlines-list" id="deadlinesList"></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="tm-footer">
|
|
<div class="art-deco-ornament"></div>
|
|
<p class="footer-text">Tempus Fugit · Carpe Diem</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |