v4/the-story.html at main · 4simpleproblems/v4 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4SP - THE STORY</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-auth-compat.js"></script>
    <script src="/firebase-config.js"></script>
    <script src="/panic-key.js"></script>
    <script src="/url-changer.js"></script>
    <style>
        /* This inline style ensures the links are hidden by default before JS loads */
        .logged-in-link, .logged-out-link {
            display: none;
        }

        /* Styles for the fade-in animation */
        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.45s ease-out, transform 0.3s ease-out;
        }
        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <section class="hero-section dark-bg">
        <div class="container">
            <h1>4SP - THE STORY</h1>
        </div>
    </section>

    <header class="main-header light-bg">
        <div class="container">
            <div class="logo">
                <img src="images/logo-dark.png" alt="4SP Logo">
            </div>
            <nav class="main-nav">
                <ul id="mainNavLinks">
                    <li class="dropdown" id="more-dropdown">
                        <a class="dropbtn">MORE</a>
                    </li>
                    <li class="logged-in-link"><a href="logged-in/dashboard.html">DASHBOARD</a></li>
                </ul>
            </nav>
            <div class="auth-buttons" id="authButtons">
            </div>
        </div>
    </header>

    <section class="news-bar light-bg">
        <div class="container">
            <p>the journey of 4simpleproblems</p>
        </div>
    </section>

    <section class="hp-infra-section light-bg">
    <div class="container">
        <h2>THE 4SP STORY</h2>
        <p>How a small side project for fun at school became a fully customizable platform built by a student — for students.</p>
    </div>
</section>

<section class="info-sections light-bg">
    <div class="container">

        <div class="info-item left-image fade-in-section">
            <div class="info-content">
                <h3>VERSION 1 — THE BEGINNING</h3>
                <p>4SP started as a fun little side project at school. It was originally just a two-page site — one page with a 20-sound soundboard and the other with an autoclicker and a simple request form. Only about four people knew about it. It wasn’t meant to be serious — just something to make boring classes more entertaining. But this basic foundation would later become something much more.</p>
            </div>
        </div>

        <div class="info-item right-image fade-in-section">
            <div class="info-content">
                <h3>VERSION 2 — WHEN IT TOOK OFF</h3>
                <p>With V2, things really picked up. I added actual structure — pages like a proper soundboard, a media area, a playlists beta, some simple games, proxy lists, feedback and request pages, legal info, and even account settings. Word of mouth took over. I told just a few people, but it spread across grades, even to elementary and high schoolers. By this version, around 30–40 users were on it. Proxies helped boost popularity but also brought attention.</p>
            </div>
        </div>

        <div class="info-item left-image fade-in-section">
            <div class="info-content">
                <h3>VERSION 3 — THE REFINEMENT</h3>
                <p>V3 brought a full visual reskin. It had a black-and-white layout with blue accents, sharper corners, and improved account management. The dashboard got cleaned up, and some extra tools like the game “Slotz” and the Vern proxy V2 were added. Proxies were still active here. Even though tools like a video or music player never made it, this version helped 4SP feel more like a brand than just a site. By May 21st, 93 users had joined — across grades, schools, and even people I never told directly.</p>
            </div>
        </div>

        <div class="info-item right-image fade-in-section">
            <div class="info-content">
                <h3>VERSION 4 — THE PLATFORM</h3>
                <p>V4 was a complete rebuild — the moment 4SP leveled up from a side project into a platform. It introduced a modular dashboard where users could load in powerful widgets like Notes, Countdowns, a Weather app, a Grading Calculator, and a Shortcut system that could launch tools or even external pages on demand. The old request forms were consolidated into a single sleek app with voting and issue tracking. Proxies were cut to keep the site clean and sustainable as popularity grew. On top of that, I built in panic key and tab disguising features designed for subtle use in class, complete with customizable panic key settings that gave users full control. It wasn’t just another version — V4 felt like a professional product.</p>
            </div>
        </div>

        <div class="info-item left-image fade-in-section">
            <div class="info-content">
                <h3>THE JOURNEY</h3>
                <p>This website has gone through multiple iterations from the start of development, and I have gone through an amazing journey to bring 4SP to you. And I introduce, Project-Vanadium. I think that this version is 𝘣𝘶𝘪𝘭𝘵 𝘧𝘰𝘳 𝘮𝘰𝘳𝘦. Thank you, everyone, for joining me on this journey for this website, and I hope you enjoy this website, because it's more than a website — it's a movement, built with the people in mind. It's not about greedy companies chasing revenue. It's about connection, personalization, and most of all, it's for the students who needed something different — something they could call their own.</p>
            </div>
        </div>

    </div>
</section>


    <footer>
        <div class="container">
            <p>&copy; 2025 4SP. All rights reserved.</p>
        </div>
    </footer>

    <div class="dropdown-content" id="more-menu-content">
        <div class="dropdown-header">MORE</div>
        <hr class="dropdown-divider">
        <a href="index.html">HOME</a>
        <a href="legal.html">LEGAL</a>
        <a href="https://buymeacoffee.com/4simpleproblems" target="_blank" rel="noopener noreferrer">DONATE</a>
    </div>

    <script>
        // Firebase Authentication Logic
        const authButtonsDiv = document.getElementById('authButtons');
        const loggedInLinks = document.querySelectorAll('.logged-in-link');
        const loggedOutLinks = document.querySelectorAll('.logged-out-link');

        function logout() {
            firebase.auth().signOut().catch(error => console.error('Error logging out:', error));
        }

        firebase.auth().onAuthStateChanged(user => {
            authButtonsDiv.innerHTML = '';
            if (user) {
                authButtonsDiv.innerHTML = `<a href="#" class="btn btn-logout" onclick="logout()">LOGOUT</a>`;
                loggedInLinks.forEach(link => link.style.display = 'inline-block');
                loggedOutLinks.forEach(link => link.style.display = 'none');
            } else {
                authButtonsDiv.innerHTML = `<a href="login.html" class="btn btn-login">LOGIN</a> <a href="signup.html" class="btn btn-signup">SIGN UP</a>`;
                loggedInLinks.forEach(link => link.style.display = 'none');
                loggedOutLinks.forEach(link => link.style.display = 'inline-block');
            }
        });

        document.addEventListener('DOMContentLoaded', () => {
            // Dropdown Menu Logic
            const dropdownTrigger = document.getElementById('more-dropdown');
            const dropdownContent = document.getElementById('more-menu-content');

            if (dropdownTrigger && dropdownContent) {
                let hideTimeout;

                const showMenu = () => {
                    clearTimeout(hideTimeout);
                    const rect = dropdownTrigger.getBoundingClientRect();
                    dropdownContent.style.top = `${window.scrollY + rect.bottom + 10}px`;
                    dropdownContent.style.left = `${rect.left}px`;
                    dropdownContent.classList.add('show');
                };

                const hideMenu = () => {
                    hideTimeout = setTimeout(() => {
                        dropdownContent.classList.remove('show');
                    }, 200);
                };

                dropdownTrigger.addEventListener('mouseenter', showMenu);
                dropdownTrigger.addEventListener('mouseleave', hideMenu);

                dropdownContent.addEventListener('mouseenter', () => clearTimeout(hideTimeout));
                dropdownContent.addEventListener('mouseleave', hideMenu);
            }

            // Intersection Observer for fade-in animations
            const sections = document.querySelectorAll('.fade-in-section');
            const observer = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('is-visible');
                    }
                });
            }, {
                threshold: 0.1 // Trigger when 10% of the element is visible
            });

            sections.forEach(section => {
                observer.observe(section);
            });
        });
    </script>
</body>
</html>