Skip to content

Commit 28731c3

Browse files
one-kashone-kash
committed
feat: comprehensive UX improvements
- Add SEO meta tags (OpenGraph, Twitter Cards, JSON-LD structured data) - Add mobile hamburger menu with smooth toggle animation - Add scroll progress bar at top of page - Add scroll-to-top button that appears on scroll - Add entrance animations with fade-in on scroll - Add active nav highlighting based on scroll position - Add accessibility: focus states, reduced motion support - Simplify hero CTA to single primary download button - Add external link indicators (arrows) in footer - Add dynamic copyright year - Add "Built by OneKash Labs" branding with link - Create custom 404 error page matching site theme
1 parent 6474207 commit 28731c3

2 files changed

Lines changed: 485 additions & 74 deletions

File tree

‎404.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
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.0">
6+
<title>Page Not Found - KashCal</title>
7+
<meta name="robots" content="noindex">
8+
<link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/KashCal/KashCal/main/fastlane/metadata/android/en-US/images/icon.png">
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
min-height: 100vh;
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
justify-content: center;
22+
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
23+
color: #fff;
24+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
25+
padding: 2rem;
26+
text-align: center;
27+
}
28+
29+
.container {
30+
max-width: 500px;
31+
}
32+
33+
.error-code {
34+
font-size: 8rem;
35+
font-weight: 800;
36+
background: linear-gradient(135deg, #00d4aa 0%, #7c3aed 50%, #ec4899 100%);
37+
-webkit-background-clip: text;
38+
-webkit-text-fill-color: transparent;
39+
background-clip: text;
40+
line-height: 1;
41+
margin-bottom: 1rem;
42+
}
43+
44+
h1 {
45+
font-size: 1.5rem;
46+
font-weight: 600;
47+
margin-bottom: 1rem;
48+
color: #e0e0e0;
49+
}
50+
51+
p {
52+
color: #888;
53+
margin-bottom: 2rem;
54+
line-height: 1.6;
55+
}
56+
57+
.home-link {
58+
display: inline-flex;
59+
align-items: center;
60+
gap: 0.5rem;
61+
padding: 0.875rem 1.75rem;
62+
background: linear-gradient(135deg, #00d4aa, #00b894);
63+
color: #000;
64+
text-decoration: none;
65+
border-radius: 8px;
66+
font-weight: 600;
67+
transition: transform 0.2s, box-shadow 0.2s;
68+
}
69+
70+
.home-link:hover {
71+
transform: translateY(-2px);
72+
box-shadow: 0 8px 25px rgba(0, 212, 170, 0.3);
73+
}
74+
75+
.home-link svg {
76+
width: 18px;
77+
height: 18px;
78+
}
79+
80+
@media (prefers-reduced-motion: reduce) {
81+
.home-link {
82+
transition: none;
83+
}
84+
.home-link:hover {
85+
transform: none;
86+
}
87+
}
88+
</style>
89+
</head>
90+
<body>
91+
<div class="container">
92+
<div class="error-code">404</div>
93+
<h1>Page Not Found</h1>
94+
<p>The calendar event you're looking for doesn't exist. It may have been moved or deleted.</p>
95+
<a href="/" class="home-link">
96+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
97+
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
98+
<polyline points="9 22 9 12 15 12 15 22"></polyline>
99+
</svg>
100+
Back to KashCal
101+
</a>
102+
</div>
103+
</body>
104+
</html>

0 commit comments

Comments
 (0)