DroidPage/index.html at development · OneDroid/DroidPage · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DroidPage | Mobile App Landing Page Builder</title>
    <meta name="description"
        content="DroidPage is a free, client-side builder for beautiful mobile app landing pages. Pick a theme, customize it, and export a ready-to-host website in seconds.">
    <link rel="icon" href="assets/img/droid-page-icon.png">
    <link rel="stylesheet" href="assets/css/home.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
</head>

<body>
    <header class="site-nav" id="site-nav">
        <div class="nav-inner">
            <a href="index.html" class="brand" aria-label="DroidPage home">
                <img src="assets/img/droid-page-icon.png" alt="" class="brand-icon">
                <span>DroidPage</span>
            </a>

            <nav class="nav-links" id="nav-links">
                <a href="#about" data-nav-link>About</a>
                <a href="#themes" data-nav-link>Themes</a>
                <a href="editor.html" class="nav-cta">Editor</a>
            </nav>

            <div class="nav-actions">
                <button id="theme-toggle" class="icon-btn" title="Toggle light / dark" aria-label="Toggle light / dark">
                    <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5" />
                        <path
                            d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
                    </svg>
                    <svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
                    </svg>
                </button>
                <button id="nav-toggle" class="icon-btn nav-toggle" title="Menu" aria-label="Open menu"
                    aria-expanded="false">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="3" y1="6" x2="21" y2="6" />
                        <line x1="3" y1="12" x2="21" y2="12" />
                        <line x1="3" y1="18" x2="21" y2="18" />
                    </svg>
                </button>
            </div>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="hero-inner">
                <span class="hero-badge">No code &middot; 100% in your browser</span>
                <h1>Launch a stunning landing page for your mobile app.</h1>
                <p class="hero-sub">
                    Pick a professionally designed theme, customize it with your own content and brand,
                    then export a fast, static website ready to host anywhere.
                </p>
                <div class="hero-actions">
                    <a href="editor.html" class="btn btn-primary">Open the Editor</a>
                    <a href="#themes" class="btn btn-ghost">Browse Themes</a>
                </div>
            </div>
        </section>

        <section class="section themes-section" id="themes">
            <div class="section-head">
                <h2>Choose a theme</h2>
                <p>Preview any theme live in a new tab, or jump straight into the editor to make it yours.</p>
            </div>
            <div class="theme-grid" id="theme-grid">
                <div class="theme-card-skeleton"></div>
                <div class="theme-card-skeleton"></div>
                <div class="theme-card-skeleton"></div>
            </div>
        </section>

        <section class="section about-section" id="about">
            <div class="about-grid">
                <div class="about-copy">
                    <h2>Built for makers, not markup.</h2>
                    <p>
                        DroidPage is a fully client-side landing page builder. There's no account, no backend,
                        and nothing leaves your machine. Your project lives in your browser and exports to clean,
                        dependency-free HTML and CSS.
                    </p>
                </div>
                <ul class="about-features">
                    <li>
                        <span class="about-feature-title">Live editing</span>
                        <span class="about-feature-text">Change content, colors, and typography and see it update
                            instantly.</span>
                    </li>
                    <li>
                        <span class="about-feature-title">Your brand</span>
                        <span class="about-feature-text">Upload your icon and screenshots, tweak the palette, and adjust
                            the navbar.</span>
                    </li>
                    <li>
                        <span class="about-feature-title">Static export</span>
                        <span class="about-feature-text">Download a ZIP and host it on GitHub Pages, Netlify, Vercel, or
                            anywhere.</span>
                    </li>
                </ul>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="footer-inner">
            <a href="index.html" class="brand brand-sm">
                <img src="assets/img/droid-page-icon.png" alt="" class="brand-icon">
                <span>DroidPage</span>
            </a>
            <p class="footer-note">A landing page builder for mobile apps.</p>
            <a href="https://github.com/OneDroid/DroidPage" target="_blank" rel="noopener" class="footer-link">GitHub</a>
        </div>
    </footer>

    <script type="module" src="assets/js/pages/home.js"></script>
</body>

</html>