-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
148 lines (135 loc) · 7.57 KB
/
Copy pathindex.html
File metadata and controls
148 lines (135 loc) · 7.57 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>SocialSpaces | Connect via Real-World Availability</title>
<meta name="description" content="Find groups and activities that match your exact availability. Connect with real people in real time.">
<!-- PWA / Android -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#38B6FF">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="SocialSpaces">
<link rel="apple-touch-icon" href="/icons/icon-192.png">
<link rel="icon" type="image/png" href="/icons/icon-192.png">
<link rel="shortcut icon" href="/favicon.ico">
<!-- OG / Social -->
<meta property="og:type" content="website">
<meta property="og:title" content="SocialSpaces — Connect via Real-World Availability">
<meta property="og:description" content="Find groups that match your exact schedule. Hyper-local social matching.">
<meta property="og:image" content="/icons/icon-512.png">
<!-- Prevent dark-mode flash -->
<script>try { var t = localStorage.getItem('eca-theme'); if (t === 'dark') { document.documentElement.classList.add('dark') } else { document.documentElement.classList.add('light') } } catch (e) { }</script>
<!-- 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=Montserrat:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="styles.css">
</head>
<body class="page-bg-logo">
<!-- Navigation -->
<nav style="background: var(--surface-50); padding: var(--space-16); border-bottom: 1px solid var(--surface-200);">
<div style="max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;">
<div style="font-family: 'Anurati', sans-serif; font-weight: 400; font-size: var(--text-h3); color: var(--base-white); display: flex; align-items: center; gap: 12px;">
<img src="logo.png" alt="Logo" style="width: 32px; height: 32px; border-radius: 6px; box-shadow: 0 2px 8px rgba(255,255,255,0.2);">
SocialSpaces
</div>
<div class="user-menu" style="display: flex; gap: var(--space-12); align-items: center;">
<a href="pages/login.html" class="btn btn-ghost btn-sm" style="min-height: 36px;">Log in</a>
<button id="dark-mode-toggle">🌙</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<header style="padding: var(--space-48) 0; text-align: center;">
<div style="max-width: 800px; margin: 0 auto; padding: 0 var(--space-16);">
<h1>Connect Real People in Real Time</h1>
<p style="font-size: var(--text-lg); margin-bottom: var(--space-32); color: var(--text-muted);">
Find groups and activities that match your exact availability. No more scheduling conflicts.
</p>
<div style="display: flex; gap: var(--space-16); justify-content: center;">
<a href="pages/signup.html" class="btn btn-primary btn-lg">Get Started</a>
<a href="pages/login.html" class="btn btn-secondary btn-lg">Log in</a>
</div>
</div>
</header>
<!-- Features Preview -->
<section id="features" style="padding: var(--space-48) 0; background: var(--surface-100);">
<div style="max-width: 1200px; margin: 0 auto; padding: 0 var(--space-16); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-32);">
<!-- Feature 1 -->
<div style="background: var(--surface-100); padding: var(--space-24); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);">
<div style="font-size: 32px; margin-bottom: 12px;">🕒</div>
<h3>Availability First</h3>
<p>Set your free time (e.g., "Saturday 6-9pm") and instantly see who else is free.</p>
</div>
<!-- Feature 2 -->
<div style="background: var(--surface-100); padding: var(--space-24); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);">
<div style="font-size: 32px; margin-bottom: 12px;">📍</div>
<h3>Nearby Discovery</h3>
<p>Find interest groups within your 5km radius. Badminton, coding, hiking, and more.</p>
</div>
<!-- Feature 3 -->
<div style="background: var(--surface-100); padding: var(--space-24); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);">
<div style="font-size: 32px; margin-bottom: 12px;">👥</div>
<h3>Instant Groups</h3>
<p>Join open groups instantly or create your own. Automated ice-breakers to start the chat.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer style="margin-top: var(--space-48); padding: var(--space-32); text-align: center; color: var(--text-muted);">
© 2025 SocialSpaces. All rights reserved. ·
<a href="pages/privacy-policy.html" style="color: var(--primary-500); text-decoration: none;">Privacy Policy</a>
</footer>
<!-- PWA Install Banner -->
<div id="pwa-install-banner">
<img src="/icons/icon-192.png" alt="SocialSpaces">
<div class="banner-text">
<strong>Install SocialSpaces</strong>
<span>Add to home screen for the best experience</span>
</div>
<div class="banner-actions">
<button id="pwa-install-btn" class="btn btn-primary btn-sm" style="min-height: 36px; font-size: 13px;">Install</button>
<button id="pwa-dismiss-btn" class="btn btn-ghost btn-sm" style="min-height: 36px; font-size: 13px;">✕</button>
</div>
</div>
</body>
<script type="module">
import { initDarkModeToggle } from './js/dark-mode.js';
initDarkModeToggle();
// Register Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(reg => console.log('✅ SW registered:', reg.scope))
.catch(err => console.warn('SW registration failed:', err));
}
// PWA Install Banner
let deferredPrompt = null;
const banner = document.getElementById('pwa-install-banner');
const installBtn = document.getElementById('pwa-install-btn');
const dismissBtn = document.getElementById('pwa-dismiss-btn');
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
// Show banner after 3s if user hasn't dismissed before
if (!localStorage.getItem('pwa-dismissed')) {
setTimeout(() => banner.classList.add('visible'), 3000);
}
});
installBtn?.addEventListener('click', async () => {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('PWA install outcome:', outcome);
deferredPrompt = null;
banner.classList.remove('visible');
});
dismissBtn?.addEventListener('click', () => {
banner.classList.remove('visible');
localStorage.setItem('pwa-dismissed', '1');
});
</script>
</html>