-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
99 lines (89 loc) · 5.91 KB
/
index.html
File metadata and controls
99 lines (89 loc) · 5.91 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>Distraction-Free Focus Timer | Beautiful Pomodoro Timer for Study & Work</title>
<meta name="title" content="Distraction-Free Focus Timer | Beautiful Pomodoro Timer for Study & Work">
<meta name="description" content="A beautiful, distraction-free focus timer perfect for study sessions, work, and productivity. Clean, minimal design with AMOLED black background. Set custom timers or use the default 25-minute Pomodoro timer.">
<meta name="keywords" content="focus timer, pomodoro timer, study timer, distraction free timer, work timer, productivity timer, minimal timer, beautiful timer, focus app, study app, pomodoro technique">
<meta name="author" content="Focus Timer">
<meta name="robots" content="index, follow">
<meta name="language" content="English">
<meta name="theme-color" content="#000000">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Distraction-Free Focus Timer | Beautiful Pomodoro Timer">
<meta property="og:description" content="A beautiful, distraction-free focus timer perfect for study sessions and work. Clean, minimal design with AMOLED black background.">
<meta property="og:site_name" content="Focus Timer">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Distraction-Free Focus Timer | Beautiful Pomodoro Timer">
<meta property="twitter:description" content="A beautiful, distraction-free focus timer perfect for study sessions and work. Clean, minimal design.">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23000000'/%3E%3Cpath d='M 50 15 L 50 35 M 50 50 L 70 50' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='50' cy='50' r='5' fill='%23ffffff'/%3E%3C/svg%3E">
<link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23000000'/%3E%3Cpath d='M 50 15 L 50 35 M 50 50 L 70 50' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='50' cy='50' r='5' fill='%23ffffff'/%3E%3C/svg%3E">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Comfortaa:wght@300;400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Distraction-Free Focus Timer",
"description": "A beautiful, distraction-free focus timer perfect for study sessions, work, and productivity. Clean, minimal design with AMOLED black background.",
"url": "https://beautiful-timer.vercel.app/",
"applicationCategory": "ProductivityApplication",
"operatingSystem": "Any",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"featureList": [
"Pomodoro timer",
"Custom timer settings",
"Distraction-free interface",
"AMOLED black background",
"Focus mode with auto-hide UI",
"Beautiful minimal design"
]
}
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="container fade-in" role="main" aria-label="Focus Timer Application">
<div class="motto">One thing at a time</div>
<div class="timer-edit" id="timerEdit">
<div class="timer-input-group">
<input type="number" id="editMinutes" class="timer-input-inline" min="0" max="99" value="25" placeholder="25">
<div class="timer-button-group">
<button class="timer-btn-inc-dec" id="incMinutes" aria-label="Increase minutes">↑</button>
<button class="timer-btn-inc-dec" id="decMinutes" aria-label="Decrease minutes">↓</button>
</div>
</div>
<span class="timer-separator">:</span>
<div class="timer-input-group">
<input type="number" id="editSeconds" class="timer-input-inline" min="0" max="59" value="0" placeholder="00">
<div class="timer-button-group">
<button class="timer-btn-inc-dec" id="incSeconds" aria-label="Increase seconds">↑</button>
<button class="timer-btn-inc-dec" id="decSeconds" aria-label="Decrease seconds">↓</button>
</div>
</div>
</div>
<div class="timer-display" id="timerDisplay" role="timer" aria-live="polite" aria-atomic="true" aria-label="Timer: 25 minutes and 0 seconds">25:00</div>
<div class="controls" role="group" aria-label="Timer controls">
<button class="btn btn-primary" id="startBtn" aria-label="Start timer">start</button>
<button class="btn btn-secondary" id="pauseBtn" disabled aria-label="Pause timer">pause</button>
<button class="btn btn-secondary" id="resetBtn" aria-label="Reset timer">reset</button>
</div>
<div class="status" id="status" role="status" aria-live="polite">ready to focus</div>
</main>
<canvas id="confetti" width="1" height="1"></canvas>
<script src="script.js"></script>
</body>
</html>