BetterBootstrap/index.html at main · Germanized/BetterBootstrap · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BetterBootstrap - Seamlessly Enhance Your Discord</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Favicon Links (ensure these exist or remove if unused) -->
    <link rel="icon" href="images/favicon.ico" sizes="any">
    <link rel="icon" href="images/favicon.svg" type="image/svg+xml">
    <link rel="images/apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>

    <header class="site-header">
        <div class="container header-container">
            <a href="#" class="logo">
                <span class="logo-better">Better</span><span class="logo-bootstrap">Bootstrap</span>
            </a>
            <nav class="main-nav">
                <a href="#features">Features</a>
                <a href="#credits">Credits</a>
                <!-- Updated nav button class for unified styling -->
                <a href="#download" class="nav-button gradient-button">Download</a>
            </nav>
        </div>
    </header>

    <main>
        <!-- Full Width Hero Section -->
        <section class="hero full-width-hero">
            <div class="hero-content-wrapper">
                <div class="container hero-content reveal reveal-fade-up">
                    <h1>Keep Discord Better.<br>Effortlessly.</h1>
                    <p class="large-subtext">BetterBootstrap ensures your enhanced Discord experience is always ready, automatically handling BetterDiscord installation and updates silently in the background.</p>
                    <!-- Unified button class usage -->
                    <a href="#download" class="cta-button gradient-button large-button">
                        Get BetterBootstrap <span class="arrow">→</span>
                    </a>
                </div>
            </div>
            <div class="hero-background-glow"></div>
        </section>

        <!-- Features Section -->
        <section id="features" class="features section-padding section-bordered">
            <div class="container">
                <h2 class="section-title reveal reveal-fade-up">Intelligent Automation.<br>Seamless Integration.</h2>
                <div class="feature-grid">
                    <!-- Feature 1: Auto-Start (Rocket Icon) -->
                    <div class="feature-card reveal reveal-fade-up">
                         <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.314.06a15.09 15.09 0 0 1-2.448-2.448c.019-.107.039-.213.06-.314M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                            </svg>
                        </div>
                        <h3>Auto-Start Reliability</h3>
                        <p>Initiates BetterDiscord seamlessly with every Windows startup. No manual steps needed.</p>
                    </div>
                     <!-- Feature 2: Constant Check (Shield Check Icon) -->
                    <div class="feature-card reveal reveal-fade-up reveal-delay-1">
                         <div class="feature-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c3.196 0-6.1-1.248-8.25-3.285Z" />
                            </svg>
                        </div>
                        <h3>Persistent Presence</h3>
                        <p>Actively monitors Discord launches and ensures BetterDiscord is injected.</p>
                    </div>
                    <!-- Feature 3: Silent Operation (Eye Slash Icon) -->
                    <div class="feature-card reveal reveal-fade-up reveal-delay-2">
                         <div class="feature-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L6.228 6.228" />
                            </svg>
                        </div>
                        <h3>Invisible Worker</h3>
                        <p>Runs entirely in the background. Access settings easily via the system tray icon.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Simplicity Section -->
        <section class="how-it-works section-padding text-section">
             <div class="container reveal reveal-fade-up">
                <h2 class="section-title alt-style">Focus on Discord,<br>Not on Setup.</h2>
                <p class="large-subtext">BetterBootstrap eliminates the repetitive task of managing BetterDiscord installations after updates. It’s the silent partner that keeps your customized Discord experience running smoothly, day after day.</p>
             </div>
        </section>


        <!-- Credits Section -->
        <section id="credits" class="credits section-padding section-bordered">
            <div class="container"> <!-- Removed reveal here, applied to cards below -->
                <h2 class="section-title reveal reveal-fade-up">Acknowledgments</h2>
                 <div class="credits-grid">
                     <!-- Credit Card 1: Zerebos -->
                     <div class="credit-card reveal reveal-fade-up reveal-delay-1"> <!-- Added reveal to card -->
                        <div class="profile-picture-frame">
                            <!-- Added placeholder src and onerror fallback -->
                            <img src="images/zerebos-placeholder.png" alt="Zerebos Profile Picture" class="profile-pic" onerror="this.style.display='none'; this.parentElement.innerHTML='<div class=\'avatar-placeholder\'>Z</div>';">
                        </div>
                        <div class="credit-info">
                            <h3>Zerebos</h3>
                            <p class="subtext">Creator of BetterDiscord. (Most Commits)</p>
                        </div>
                    </div>
                     <!-- Credit Card 2: Germanized -->
                    <div class="credit-card reveal reveal-fade-up reveal-delay-2"> <!-- Added reveal to card -->
                        <div class="profile-picture-frame">
                            <!-- Added onerror fallback -->
                            <img src="images/germanized-placeholder.png" alt="Germanized Profile Picture" class="profile-pic" onerror="this.style.display='none'; this.parentElement.innerHTML='<div class=\'avatar-placeholder\'>G</div>';">
                        </div>
                        <div class="credit-info">
                            <h3>Germanized</h3>
                            <p class="subtext">Made Alot of Plugins / Creator of BetterBootstrap.</p>
                        </div>
                    </div>
                 </div>
            </div>
        </section>

        <!-- Download Section -->
        <section id="download" class="download-section section-padding">
            <div class="container reveal reveal-fade-up">
                <h2 class="section-title">Get BetterBootstrap Today.</h2>
                <p class="large-subtext">Download the latest version for Windows and experience a hassle-free, enhanced Discord.</p>
                 <!-- Unified button class usage -->
                 <a href="https://github.com/Germanized/BetterBootstrap-Release" class="cta-button gradient-button large-button" target="_blank" rel="noopener noreferrer">
                     Download for Windows <span class="arrow">→</span>
                 </a>
                 </a>
            </div>
        </section>

    </main>

    <footer class="site-footer minimal-footer">
        <div class="container footer-content">
             <p class="version-info">Current Version: 3.7.0 | Requires Windows 10 / 11</p>
             <p class="copyright-info">© 2025 BetterBootstrap. Design inspired by Apple. All rights reserved.</p>
        </div>
    </footer>

    <!-- Full JavaScript -->
    <script src="script.js"></script>
</body>
</html>