alphadroid-project.github.io/index.html at main · AlphaDroid-Project/alphadroid-project.github.io · GitHub

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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AlphaDroid ROM | Next-Generation Android Experience</title>
    <link rel="shortcut icon" href="images/fav.ico" type="image/x-icon">
    <script src="config.js" defer></script>
    <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=Roboto+Flex:opsz,slnt,wdth,wght@8..144,-10..0,25..151,100..1000&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.33/dist/cdn/beer.min.css" rel="stylesheet" />
    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.33/dist/cdn/beer.min.js"></script>
    <style>
        /* Critical CSS - Above the fold styles */
        :root {
            --primary: #6750A4;
            --on-primary: #FFFFFF;
            --surface: #FEF7FF;
            --on-surface: #1D1B20;
            --animation-speed: 0.4s;
        }
        * { font-family: 'Roboto Flex', sans-serif; }
        html { scroll-behavior: smooth; }
        body {
            background-color: var(--surface);
            color: var(--on-surface);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Critical layout styles */
        .hero {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }

        /* Floating action button above all, respecting bottom navbar and safe area */
        .fab {
            position: fixed;
            right: 16px;
            bottom: calc(var(--fab-bottom, 16px) + env(safe-area-inset-bottom));
            z-index: 9999;
            transition: opacity 400ms cubic-bezier(.4,0,.2,1), transform 400ms cubic-bezier(.4,0,.2,1);
            opacity: 1;
            transform: translateY(0);
        }
        .fab.hide {
            opacity: 0;
            pointer-events: none;
            transform: translateY(40px);
        }

        /* Add fade transitions for hero and app */
        #hero, #app {
            transition: opacity 400ms ease-in-out;
        }
        #hero.fade-out, #app.fade-out {
            opacity: 0;
        }
        #hero.fade-in, #app.fade-in {
            opacity: 1;
        }

        /* Push the footer behind everything and disable interaction */
        footer.s.fixed.bottom-align.right-align {
            z-index: -1;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <header class="fixed center-align" >
        <nav>
            <button id="home" class="center-align extra transparent">
                <i><svg width="69" height="70" viewBox="0 0 69 70" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M25.5508 1.07617C29.3887 -1.13945 34.2959 0.175799 36.5117 4.01367L67.6592 57.9609C69.8747 61.7988 68.5593 66.707 64.7217 68.9229C60.8839 71.1384 55.9766 69.823 53.7607 65.9854L29.5723 24.0908L14.9746 49.375C12.7589 53.2128 7.85155 54.5279 4.01367 52.3125C0.175837 50.0967 -1.13936 45.1895 1.07617 41.3516L22.3633 4.48047C23.0406 3.10165 24.1205 1.90197 25.5508 1.07617ZM28.875 0.709961C28.1907 0.70788 27.5022 0.774053 26.8213 0.916016L37.0762 18.6768C39.0455 22.0873 43.2639 23.3899 46.7764 21.793L45.8291 20.1523C43.223 21.2365 40.1543 20.2461 38.7051 17.7363L28.875 0.709961Z"/>
                </svg></i>
                <p class="top bold">AlphaDroid</p>
            </button>
            <div class="max transparent"></div>
        </nav>
    </header>

    <nav id="desktop" class="m l left">
        <header>
            <button id="menu" class="extra circle transparent">
                <i>menu</i>
            </button>
            <button class="extend square round" onclick="navigateTo('#devices')">
                <i>download</i>
                <span>Download</span>
            </button>
        </header>
        <a id="nav-home-desktop" onclick="navigateTo('#')">
            <i>home</i>
            <span>Home</span>
        </a>
        <a id="nav-features-desktop" onclick="navigateTo('#features')">
            <i>checklist</i>
            <span>Features</span>
        </a>
        <a id="nav-screenshots-desktop" onclick="navigateTo('#screenshots')">
            <i>smartphone</i>
            <span>Screenshots</span>
        </a>
    </nav>
    <nav id="mobile" class="s bottom">
        <a id="nav-home-mobile" onclick="navigateTo('#')">
            <i>home</i>
            <span>Home</span>
        </a>
        <a id="nav-features-mobile" onclick="navigateTo('#features')">
            <i>checklist</i>
            <span>Features</span>
        </a>
        <a id="nav-screenshots-mobile" onclick="navigateTo('#screenshots')">
            <i>smartphone</i>
            <span>Screenshots</span>
        </a>
    </nav>

    <nav class="fab flex bottom-align medium-margin">
        <button class="extend circle extra large-elevate" onclick="navigateTo('#devices')">
            <i>download</i>
            <span>Download</span>
        </button>
    </nav>

    <main class="responsive max" style="min-height:100vh; padding: 0;">
        <!-- Hero moved outside main for full-width layout -->
        <section id="hero" class="hero" style="display:flex; align-items:center; justify-content:center; box-sizing:border-box; position:relative; overflow:hidden;">
            <div class="container">
                <div class="hero-content center-align" style="position:relative; z-index:1;">
                    <h1 id="hero-title">Experience the Future of Android</h1>
                    <p id="hero-subtitle">AlphaDroid is a custom ROM based on LineageOS/crDroid, with a new look and some extra features and optimizations.</p>
                    <div class="hero-buttons large-padding" id="hero-buttons">
                        <a href="#download">
                            <button class="round large">
                                <i>rocket_launch</i>
                                <span>Install Now</span>
                            </button>
                        </a>
                        <a href="#features">
                            <button class="round large border">
                                <i>visibility</i>
                                <span>View Features</span>
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <div id="app"></div>
    </main>


    <script src="index.js" defer></script>
    <script src="route.js"></script>
    <script src="performance.js" defer></script>
    <script>
        // REMOVE Service Worker to prevent caching issues
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.getRegistrations().then(function(registrations) {
                for(let registration of registrations) {
                    registration.unregister();
                    console.log('Service Worker unregistered');
                }
            });
        }
    </script>
    <script>
        // Adjust FAB position to sit above the bottom navbar when it's visible
        function updateFabPosition() {
            const mobileNav = document.getElementById('mobile');
            let offset = 16; // default when no bottom nav or on larger screens

            if (mobileNav) {
                const styles = window.getComputedStyle(mobileNav);
                const isVisible = styles.display !== 'none' && styles.visibility !== 'hidden' && styles.opacity !== '0';
                if (isVisible) {
                    offset = (mobileNav.offsetHeight || 0) + 16;
                }
            }

            // Hide FAB when desktop navigation rail is visible
            const desktopNav = document.getElementById('desktop');
            const fab = document.querySelector('nav.fab');
            let desktopVisible = false;
            if (desktopNav) {
                const ds = window.getComputedStyle(desktopNav);
                desktopVisible = ds.display !== 'none' && ds.visibility !== 'hidden' && desktopNav.offsetWidth > 0 && desktopNav.offsetHeight > 0;
            }
            // Hide FAB when at #devices route
            const hash = window.location.hash || '#';
            if (fab) {
                if (desktopVisible || hash === '#devices') {
                    fab.classList.add('hide');
                } else {
                    fab.classList.remove('hide');
                }
            }

            document.documentElement.style.setProperty('--fab-bottom', offset + 'px');
        }

        // New function to update hero min-height
        function updateHeroHeight() {
            const hero = document.querySelector('.hero');
            const header = document.querySelector('header');
            const mobileNav = document.getElementById('mobile');
            let headerHeight = header ? header.offsetHeight : 0;
            let mobileNavHeight = 0;
            if (mobileNav) {
                const styles = window.getComputedStyle(mobileNav);
                const isVisible = styles.display !== 'none' && styles.visibility !== 'hidden' && styles.opacity !== '0';
                if (isVisible) {
                    mobileNavHeight = mobileNav.offsetHeight;
                }
            }
            const totalSubtract = headerHeight + mobileNavHeight;
            const viewportHeight = window.innerHeight;
            const newHeight = viewportHeight - totalSubtract;
            hero.style.minHeight = newHeight + 'px';
        }

        // New: Show/hide hero based on route
        function updateHeroVisibility() {
            const hero = document.getElementById('hero');
            if (!hero) return;
            const hash = window.location.hash || '#';
            const homeSectionHashes = ['#', '#home', '#features', '#screenshots', '#download'];
            const onHomePage = window.__currentPagePath === 'pages/home.html';
            if (homeSectionHashes.includes(hash) || onHomePage) {
                hero.style.display = 'flex';
            } else {
                hero.style.display = 'none';
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            updateFabPosition();
            updateHeroHeight();
            updateHeroVisibility();
            // Initialize navigation state with a slight delay to ensure DOM is ready
            setTimeout(() => {
                if (typeof updateNavigationState === 'function') {
                    updateNavigationState();
                }
            }, 100);
        });
        window.addEventListener('resize', () => {
            updateFabPosition();
            updateHeroHeight();
        });
        window.addEventListener('orientationchange', () => {
            updateFabPosition();
            updateHeroHeight();
        });
        window.addEventListener('hashchange', () => {
            updateHeroVisibility();
            updateFabPosition(); // <-- ensure FAB updates on hash change
            // Ensure navigation state updates on hash change
            setTimeout(() => {
                if (typeof updateNavigationState === 'function') {
                    updateNavigationState();
                }
            }, 50);
        });

        // Add scroll listener for navigation state updates when DOM is ready
        window.addEventListener('scroll', () => {
            if (typeof handleScrollNavigationUpdate === 'function') {
                handleScrollNavigationUpdate();
            }
        }, { passive: true });

        document.getElementById('menu').addEventListener('click', function() {
            document.getElementById('desktop').classList.toggle('max');
            updateFabPosition();
        });

        document.getElementById('home').addEventListener('click', function() {
            if (window.scrollY > 0) {
                window.scrollTo({ top: 0, behavior: 'smooth' });
                setTimeout(() => navigateTo('/'), 500);
            } else {
                navigateTo('/');
            }
        });

        // Update hero content from configuration
        window.addEventListener('configReady', function(event) {
            const config = event.detail.config;
            const hero = config?.content?.hero;

            if (hero) {
                const titleEl = document.getElementById('hero-title');
                const subtitleEl = document.getElementById('hero-subtitle');
                const buttonsEl = document.getElementById('hero-buttons');

                if (titleEl && hero.title) titleEl.textContent = hero.title;
                if (subtitleEl && hero.subtitle) subtitleEl.textContent = hero.subtitle;

                if (buttonsEl && hero.buttons && Array.isArray(hero.buttons)) {
                    buttonsEl.innerHTML = hero.buttons.map(button => `
                        <a href="${button.route || '#'}">
                            <button class="round large ${button.style === 'secondary' ? 'border' : ''}">
                                <i>${button.icon || ''}</i>
                                <span>${button.text || ''}</span>
                            </button>
                        </a>
                    `).join('');
                }
            }
        });
    </script>
</body>
</html>