Skip to content

Commit 1fe5106

Browse files
hewigovenshewigovens
committed
Add About page, screenshots, and responsive nav
Introduce a new about.html and add light/dark screenshot assets (day_*/dark_* images). Update index.html to include an about link, a hamburger nav toggle, and a new screenshots/theme-toggle section with a small script; privacy.html gets the same nav toggle/link. Revamp styles.css with new variables, hamburger/nav styles, screenshot grid, button and card polish, responsive media queries, and reduced-motion support to make the site mobile-friendly and visually consistent.
1 parent 3872ff4 commit 1fe5106

12 files changed

Lines changed: 544 additions & 119 deletions

‎about.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>About AnyTime</title>
7+
<meta
8+
name="description"
9+
content="About AnyTime, the timezone calculator for iPhone, iPad, and Mac."
10+
>
11+
<link rel="icon" type="image/png" sizes="1024x1024" href="icon.png">
12+
<link rel="apple-touch-icon" href="icon.png">
13+
<link rel="stylesheet" href="styles.css">
14+
</head>
15+
<body>
16+
<div class="shell">
17+
<header class="nav">
18+
<a class="brand" href="index.html">
19+
<img class="brand-mark" src="icon.png" alt="">
20+
<span>AnyTime</span>
21+
</a>
22+
<button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false" onclick="this.setAttribute('aria-expanded',this.getAttribute('aria-expanded')==='false'?'true':'false');this.closest('.nav').querySelector('.nav-links').classList.toggle('open')">
23+
<span class="nav-toggle-bar"></span>
24+
<span class="nav-toggle-bar"></span>
25+
<span class="nav-toggle-bar"></span>
26+
</button>
27+
<nav class="nav-links" aria-label="Primary">
28+
<a class="nav-link" href="index.html">Support</a>
29+
<a class="nav-link current" href="about.html">About</a>
30+
<a class="nav-link" href="privacy.html">Privacy</a>
31+
</nav>
32+
</header>
33+
34+
<section class="hero">
35+
<p class="eyebrow">About</p>
36+
<h1>AnyTime</h1>
37+
<p class="lead">
38+
A reference-first timezone calculator. Pick one city as the anchor and see every other zone relative to it.
39+
</p>
40+
</section>
41+
42+
<main>
43+
<div class="grid">
44+
<section class="card span-6">
45+
<h2>What It Does</h2>
46+
<ul>
47+
<li>Compare multiple time zones from one reference clock</li>
48+
<li>Shift time by hours or days for scheduling across regions</li>
49+
<li>Paste natural-language times and convert them automatically</li>
50+
<li>Search cities, regions, abbreviations, and UTC offsets</li>
51+
<li>Create Calendar events from a timezone card</li>
52+
<li>Drag to reorder, swipe for quick actions</li>
53+
</ul>
54+
</section>
55+
56+
<section class="card span-6">
57+
<h2>Technology</h2>
58+
<ul>
59+
<li>SwiftUI on iOS 17+ and macOS 14+</li>
60+
<li>Local search index for fast city and offset lookup</li>
61+
<li>Smart Paste with date extraction and geocoding</li>
62+
<li>Optional location access for nearby timezone matching</li>
63+
<li>Optional Calendar access for event creation</li>
64+
<li>All data stored locally on-device</li>
65+
</ul>
66+
</section>
67+
</div>
68+
69+
<section class="card contact-card">
70+
<h2>Contact</h2>
71+
<p>
72+
For support or review-related questions, email
73+
<a href="mailto:hi@hewig.dev">hi@hewig.dev</a>.
74+
</p>
75+
</section>
76+
</main>
77+
78+
<footer class="footer">
79+
<span>AnyTime support site</span>
80+
<span>Maintained for the current App Store release.</span>
81+
</footer>
82+
</div>
83+
</body>
84+
</html>

‎images/dark_dial.png‎

167 KB
Loading

‎images/dark_home.png‎

251 KB
Loading

‎images/dark_search.png‎

86.4 KB
Loading

‎images/dark_settings.png‎

57.3 KB
Loading

‎images/day_dial.png‎

213 KB
Loading

‎images/day_home.png‎

286 KB
Loading

‎images/day_search.png‎

89.6 KB
Loading

‎images/day_settings.png‎

51.7 KB
Loading

‎index.html‎

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,14 @@
1919
<img class="brand-mark" src="icon.png" alt="">
2020
<span>AnyTime</span>
2121
</a>
22+
<button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false" onclick="this.setAttribute('aria-expanded',this.getAttribute('aria-expanded')==='false'?'true':'false');this.closest('.nav').querySelector('.nav-links').classList.toggle('open')">
23+
<span class="nav-toggle-bar"></span>
24+
<span class="nav-toggle-bar"></span>
25+
<span class="nav-toggle-bar"></span>
26+
</button>
2227
<nav class="nav-links" aria-label="Primary">
2328
<a class="nav-link current" href="index.html">Support</a>
29+
<a class="nav-link" href="about.html">About</a>
2430
<a class="nav-link" href="privacy.html">Privacy</a>
2531
</nav>
2632
</header>
@@ -29,90 +35,84 @@
2935
<p class="eyebrow">iPhone, iPad, and Mac</p>
3036
<h1>Timezone math without the mess.</h1>
3137
<p class="lead">
32-
AnyTime helps you compare cities, shift a reference time, paste times from text, and turn
33-
timezone planning into something quick and readable.
38+
Compare cities, shift a reference time, paste times from text, and plan across time zones.
3439
</p>
3540
<div class="hero-actions">
3641
<a class="button primary" href="mailto:hi@hewig.dev">Email Support</a>
3742
<a class="button secondary" href="privacy.html">Privacy Policy</a>
3843
</div>
3944
</section>
4045

41-
<main class="grid">
42-
<section class="card span-7">
43-
<h2>Support</h2>
44-
<p>
45-
For bug reports, App Store review follow-up, product questions, or account-related requests,
46-
contact <a href="mailto:hi@hewig.dev">hi@hewig.dev</a>.
47-
</p>
48-
<p>
49-
If you email support, include the device model, OS version, app version, and a short
50-
description of what you expected versus what happened.
51-
</p>
52-
<div class="hero-actions">
53-
<a class="button secondary" href="https://github.com/hewigovens/AnyTime">Source Code</a>
54-
<a class="button secondary" href="https://github.com/hewigovens/AnyTime/issues">Issue Tracker</a>
46+
<main>
47+
<!-- Screenshots with theme toggle -->
48+
<section class="screenshot-section">
49+
<div class="theme-toggle" role="radiogroup" aria-label="Screenshot theme">
50+
<button class="theme-btn active" data-theme="day" aria-pressed="true" onclick="setTheme('day')">
51+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="3.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.41 1.41M11.54 11.54l1.41 1.41M3.05 12.95l1.41-1.41M11.54 4.46l1.41-1.41" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
52+
Light
53+
</button>
54+
<button class="theme-btn" data-theme="dark" aria-pressed="false" onclick="setTheme('dark')">
55+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M13.36 10.06A6 6 0 0 1 5.94 2.64 6 6 0 1 0 13.36 10.06Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
56+
Dark
57+
</button>
5558
</div>
56-
</section>
57-
58-
<section class="card span-5">
59-
<h2>What AnyTime Does</h2>
60-
<ul>
61-
<li>Compare multiple time zones from one reference clock.</li>
62-
<li>Shift time by hours or days for scheduling across regions.</li>
63-
<li>Search cities and offsets quickly.</li>
64-
<li>Paste natural-language times and convert them into a reference time.</li>
65-
<li>Create Calendar events from a timezone card when you want to save a plan.</li>
66-
</ul>
67-
</section>
68-
69-
<section class="card span-12">
70-
<h2>Highlights</h2>
71-
<div class="mini-grid">
72-
<article class="card">
73-
<h3>Reference-first</h3>
74-
<p>
75-
Keep one timezone as the anchor and see the rest relative to it instead of doing
76-
mental conversions every time.
77-
</p>
78-
</article>
79-
<article class="card">
80-
<h3>Location-aware</h3>
81-
<p>
82-
The app can highlight timezones that match your current location and make it easier
83-
to pick the nearby city during search.
84-
</p>
85-
</article>
86-
<article class="card">
87-
<h3>Local and lightweight</h3>
88-
<p>
89-
Your saved clocks stay on-device. AnyTime does not require an account just to use the app.
90-
</p>
91-
</article>
59+
<div class="screenshot-grid">
60+
<figure class="screenshot-item">
61+
<img class="shot-day" src="images/day_home.png" alt="AnyTime home screen in light mode">
62+
<img class="shot-dark" src="images/dark_home.png" alt="AnyTime home screen in dark mode" hidden>
63+
<figcaption>World clocks</figcaption>
64+
</figure>
65+
<figure class="screenshot-item">
66+
<img class="shot-day" src="images/day_dial.png" alt="Reference time picker in light mode">
67+
<img class="shot-dark" src="images/dark_dial.png" alt="Reference time picker in dark mode" hidden>
68+
<figcaption>Reference time</figcaption>
69+
</figure>
70+
<figure class="screenshot-item">
71+
<img class="shot-day" src="images/day_search.png" alt="City search in light mode">
72+
<img class="shot-dark" src="images/dark_search.png" alt="City search in dark mode" hidden>
73+
<figcaption>Search</figcaption>
74+
</figure>
75+
<figure class="screenshot-item">
76+
<img class="shot-day" src="images/day_settings.png" alt="Settings in light mode">
77+
<img class="shot-dark" src="images/dark_settings.png" alt="Settings in dark mode" hidden>
78+
<figcaption>Settings</figcaption>
79+
</figure>
9280
</div>
9381
</section>
82+
<script>
83+
function setTheme(t) {
84+
document.querySelectorAll('.shot-day').forEach(function(el) { el.hidden = t !== 'day'; });
85+
document.querySelectorAll('.shot-dark').forEach(function(el) { el.hidden = t !== 'dark'; });
86+
document.querySelectorAll('.theme-btn').forEach(function(el) {
87+
var active = el.dataset.theme === t;
88+
el.classList.toggle('active', active);
89+
el.setAttribute('aria-pressed', active);
90+
});
91+
}
92+
</script>
9493

95-
<section class="card span-8">
96-
<h2>Privacy Summary</h2>
97-
<p>
98-
AnyTime does not include advertising SDKs or third-party analytics. It stores your saved
99-
clocks and display preferences on your device.
100-
</p>
101-
<p>
102-
Optional location access is used only to help identify your nearby timezone in the app.
103-
Optional Calendar access is used only when you ask the app to create a calendar event.
104-
</p>
105-
<p><a href="privacy.html">Read the full Privacy Policy</a></p>
106-
</section>
94+
<!-- Compact info cards -->
95+
<div class="grid">
96+
<section class="card span-6">
97+
<h2>Support</h2>
98+
<p>
99+
Bug reports, questions, or App Store review follow-up:
100+
<a href="mailto:hi@hewig.dev">hi@hewig.dev</a>
101+
</p>
102+
<div class="hero-actions">
103+
<a class="button secondary" href="https://github.com/hewigovens/AnyTime">Source Code</a>
104+
<a class="button secondary" href="https://github.com/hewigovens/AnyTime/issues">Issue Tracker</a>
105+
</div>
106+
</section>
107107

108-
<section class="card span-4">
109-
<h2>Current App</h2>
110-
<p class="pill"><span class="pill-dot"></span>Rewritten SwiftUI release</p>
111-
<p>
112-
This support site reflects the current AnyTime app and its latest timezone calculator,
113-
search, location, and calendar tools.
114-
</p>
115-
</section>
108+
<section class="card span-6">
109+
<h2>Privacy</h2>
110+
<p>
111+
No accounts. No analytics. No tracking. Clocks stay on your device. Optional location and Calendar access are used only for the features you invoke.
112+
</p>
113+
<p><a href="privacy.html">Full Privacy Policy</a></p>
114+
</section>
115+
</div>
116116
</main>
117117

118118
<footer class="footer">

0 commit comments

Comments
 (0)