StudyFlow/index.html at main · nikomarinovic/StudyFlow · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>StudyFlow - Study Smarter, Not Harder</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/mobile.css">
  <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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    /* ── Scrolling sync bar ── */
    .sync-bar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: hsl(199,89%,95%);
      border-bottom: 1px solid hsl(199,89%,82%);
      height: 2rem; overflow: hidden;
    }
    /* Fade edges */
    .sync-bar::before,
    .sync-bar::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 4rem; z-index: 1; pointer-events: none;
    }
    .sync-bar::before { left: 0;  background: linear-gradient(to right, hsl(199,89%,95%), transparent); }
    .sync-bar::after  { right: 0; background: linear-gradient(to left,  hsl(199,89%,95%), transparent); }

    .sync-track {
      display: flex; align-items: center;
      white-space: nowrap; width: max-content;
      animation: sync-scroll 35s linear infinite;
    }
    .sync-track:hover { animation-play-state: paused; }

    .sync-item {
      display: inline-flex; align-items: center; gap: .45rem;
      font-size: .75rem; color: hsl(199,55%,38%); font-weight: 500;
      padding: 0 2rem; line-height: 2rem;
    }
    .sync-item svg { flex-shrink: 0; color: hsl(199,89%,42%); }
    .sync-item strong { font-weight: 700; color: hsl(199,89%,25%); }
    .sync-dot {
      display: inline-block; width: .3rem; height: .3rem; border-radius: 50%;
      background: hsl(199,60%,72%); margin: 0 .25rem; vertical-align: middle;
    }

    @keyframes sync-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* Push navbar + hero down */
    .nav-bar { top: 2rem !important; }
    .hero-section { padding-top: 10rem !important; }
  </style>
</head>
<body>

  <!-- Scrolling sync notice -->
  <div class="sync-bar">
    <div class="sync-track" id="syncTrack"></div>
  </div>

  <script>
    (function() {
      const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/></svg>`;
      const dot = `<span class="sync-dot"></span>`;
      const messages = [
        `${icon}&nbsp;<strong>Cross-device sync coming soon</strong> — your data is stored on this device only.`,
        `${icon}&nbsp;<strong>We're working on cloud sync</strong> — stay tuned for updates.`,
        `${icon}&nbsp;<strong>Sessions &amp; exams</strong> are safely stored locally for now.`,
        `${icon}&nbsp;<strong>Cross-device sync coming soon</strong> — your data is stored on this device only.`,
        `${icon}&nbsp;<strong>We're working on cloud sync</strong> — stay tuned for updates.`,
        `${icon}&nbsp;<strong>Sessions &amp; exams</strong> are safely stored locally for now.`,
      ];
      const html = messages.map(m => `<span class="sync-item">${m}</span>${dot}`).join('');
      // Double it for seamless infinite loop
      document.getElementById('syncTrack').innerHTML = html + html;
    })();
  </script>

  <nav class="nav-bar">
    <div class="container">
      <a href="index.html" class="logo">
        <div class="logo-icon">
          <svg 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="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path>
          </svg>
        </div>
        <span class="logo-text">StudyFlow</span>
      </a>
      <div class="nav-buttons">
        <a href="auth.html" class="btn btn-ghost">Sign In</a>
        <a href="coming-soon.html" class="btn btn-ghost">Pricing</a>
        <a href="auth.html?mode=signup" class="btn btn-hero">Get Started</a>
      </div>
    </div>
  </nav>

  <section class="hero-section">
    <div class="bg-decoration bg-decoration-1"></div>
    <div class="bg-decoration bg-decoration-2"></div>
    <div class="container hero-content">
      <div class="badge fade-in">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path>
          <path d="M5 3v4"></path><path d="M19 17v4"></path><path d="M3 5h4"></path><path d="M17 19h4"></path>
        </svg>
        Your AI Study Coach
      </div>
      <h1 class="hero-title fade-in-delay-1">
        Study Smarter,<br><span class="gradient-text">Not Harder</span>
      </h1>
      <p class="hero-subtitle fade-in-delay-2">
        The intelligent study planner that creates personalized schedules, tracks your progress, and keeps you accountable — all in one beautiful app.
      </p>
      <div class="hero-cta fade-in-delay-3">
        <a href="auth.html?mode=signup" class="btn btn-hero btn-xl">
          Start Free Trial
          <svg 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="M5 12h14"></path><path d="m12 5 7 7-7 7"></path>
          </svg>
        </a>
      </div>
      <div class="stats fade-in-delay-4">
        <div class="stat"><div class="stat-value gradient-text">10K+</div><div class="stat-label">Students</div></div>
        <div class="stat"><div class="stat-value gradient-text">2M+</div><div class="stat-label">Study Hours</div></div>
        <div class="stat"><div class="stat-value gradient-text">95%</div><div class="stat-label">Pass Rate</div></div>
      </div>
    </div>
  </section>

  <section class="features-section">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">Everything You Need</h2>
        <p class="section-subtitle">Powerful features designed to maximize your study efficiency</p>
      </div>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect><line x1="16" x2="16" y1="2" y2="6"></line><line x1="8" x2="8" y1="2" y2="6"></line><line x1="3" x2="21" y1="10" y2="10"></line>
            </svg>
          </div>
          <h3 class="feature-title">Smart Scheduling</h3>
          <p class="feature-description">AI-powered study plans that adapt to your exams and availability</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline>
            </svg>
          </div>
          <h3 class="feature-title">Focus Timer</h3>
          <p class="feature-description">Pomodoro-style sessions with automatic breaks for peak productivity</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path>
            </svg>
          </div>
          <h3 class="feature-title">Gamification</h3>
          <p class="feature-description">Earn points, maintain streaks, and unlock achievements</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 3v18h18"></path><path d="m19 9-5 5-4-4-3 3"></path>
            </svg>
          </div>
          <h3 class="feature-title">Analytics</h3>
          <p class="feature-description">Track progress with beautiful insights and performance metrics</p>
        </div>
      </div>
    </div>
  </section>

  <section class="how-it-works-section">
    <div class="container">
      <div class="how-it-works-grid">
        <div class="how-it-works-content">
          <span class="section-label">How It Works</span>
          <h2 class="section-title-left">Your Personal Study Coach</h2>
          <p class="section-text">Tell us about your study habits, add your exams, and let our AI create the perfect study schedule tailored just for you.</p>
          <ul class="benefits-list">
            <li class="benefit-item">
              <svg 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="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>
              <span>Personalized study plans based on your schedule</span>
            </li>
            <li class="benefit-item">
              <svg 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="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>
              <span>Auto-prioritize by difficulty and deadlines</span>
            </li>
            <li class="benefit-item">
              <svg 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="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>
              <span>Track every minute of focused study time</span>
            </li>
            <li class="benefit-item">
              <svg 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="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>
              <span>Get insights on your best study patterns</span>
            </li>
          </ul>
          <a href="auth.html?mode=signup" class="btn btn-hero btn-lg">
            Start Your Journey
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </div>
        <div class="how-it-works-visual">
          <div class="glass-card demo-card">
            <div class="demo-text">Create your account to see personalized study insights.</div>
          </div>
          <div class="float-decoration float-decoration-1"></div>
          <div class="float-decoration float-decoration-2"></div>
        </div>
      </div>
    </div>
  </section>

  <section class="cta-section">
    <div class="container">
      <div class="cta-card">
        <div class="cta-background"></div>
        <div class="cta-pattern"></div>
        <div class="cta-content">
          <h2 class="cta-title">Ready to Ace Your Exams?</h2>
          <p class="cta-subtitle">Join thousands of students who've transformed their study habits with StudyFlow.</p>
          <a href="auth.html?mode=signup" class="btn btn-glass btn-xl">
            Get Started Free
            <svg 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="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </div>
      </div>
    </div>
  </section>

  <footer class="footer">
    <div class="container footer-content">
      <div class="footer-left">
        <div class="footer-logo">
          <div class="logo-icon-small">
            <svg 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="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path>
            </svg>
          </div>
          <span class="footer-logo-text">StudyFlow</span>
        </div>
      </div>
      <div class="footer-center"><p>© 2026 StudyFlow. All rights reserved.</p></div>
      <div class="footer-right">
        <a href="https://github.com/nikomarinovic" target="_blank" rel="noopener" class="footer-social" aria-label="GitHub">
          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 .5C5.73.5.5 5.74.5 12.03c0 5.1 3.29 9.43 7.86 10.96.57.1.78-.25.78-.56v-2.02c-3.2.7-3.87-1.54-3.87-1.54-.52-1.33-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.2 1.77 1.2 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.72-1.55-2.55-.3-5.23-1.29-5.23-5.74 0-1.27.45-2.3 1.2-3.12-.12-.3-.52-1.52.11-3.17 0 0 .98-.31 3.2 1.2a11.2 11.2 0 0 1 5.82 0c2.22-1.51 3.2-1.2 3.2-1.2.63 1.65.23 2.87.11 3.17.75.82 1.2 1.85 1.2 3.12 0 4.46-2.68 5.44-5.23 5.74.41.36.78 1.08.78 2.18v3.23c0 .31.21.66.79.55 4.57-1.53 7.85-5.86 7.85-10.95C23.5 5.74 18.27.5 12 .5z"/>
          </svg>
        </a>
      </div>
    </div>
  </footer>
  <script src="js/config.js"></script>
  <script src="js/mobile-nav.js"></script>
  <script src="js/db.js"></script>
  <script src="js/index.js"></script>
</body>
</html>