forkandflow.github.io/summer-slams-dsa.html at main · forkandflow/forkandflow.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
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summer Slams DSA25</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="Vibrant-Summer-Slams-DSA25-Logo.png">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
      font-family: 'Poppins', sans-serif;
      overflow-x: hidden;
      color: #f9fafb;

    }

    body {
      background: linear-gradient(135deg, #0f172a, #1e293b);
    }

    .parallax {
      /* The image used */
      background-image: url('your-background-image.jpg'); /* Replace with your image URL */
      height: 8vh; /* Full height */
      background-attachment: fixed; /* Parallax effect */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .glass-wrapper {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: 35px 30px;
      width: 90%;
      max-width: 500px;
      text-align: center;
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      animation: zoomIn 1.5s ease-out;
      position: relative; /* Position relative for z-index */
      z-index: 1; /* Ensure it appears above the background */
      margin: 0 auto; /* Center the glass wrapper */
      top: 0; /* Remove extra space above */
            margin-bottom: 100px;

    }

    .logo {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 20px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
    }

    h1 {
      font-size: 2.3rem;
      color: #38bdf8;
      font-weight: 800;
      margin-bottom: 10px;
      text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
    }

    .section-title {
      color: #38bdf8;
      font-weight: 600;
      margin-top: 20px;
      margin-bottom: 8px;
      font-size: 1.2rem;
    }

    ul {
      list-style-type: disc;
      text-align: left;
      margin: 0 auto 15px;
      padding-left: 20px;
      color: #e2e8f0;
    }

    p, li {
      font-size: 0.98rem;
    }

    footer {
      font-size: 0.85rem;
      color: #94a3b8;
      margin-top: 25px;
    }

    @keyframes zoomIn {
      from {
        transform: scale(0.6);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    .particles {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      pointer-events: none;
    }

    .particle {
      position: absolute;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 50%;
      animation: float 12s infinite ease-in-out;
    }

    @keyframes float {
      0%   { transform: translateY(0) scale(1); opacity: 0.2; }
      50%  { transform: translateY(-60vh) scale(1.3); opacity: 0.6; }
      100% { transform: translateY(0) scale(1); opacity: 0.2; }
    }

    @media screen and (max-width: 480px) {
      .glass-wrapper {
        padding: 25px 20px;
      }

      h1 {
        font-size: 2rem;
      }

      .section-title {
        font-size: 1rem;
      }

      ul {
        padding-left: 16px;
      }

      .logo {
        width: 90px;
        height: 90px;
      }
    }
  </style>
</head>

<body>
  <div class="parallax"></div>
  <div class="particles" id="particles-container"></div>

  <div class="glass-wrapper">
    <strong>Fork & Flow Community Presents</strong><br><br>
    <img src="Vibrant-Summer-Slams-DSA25-Logo.png" alt="Event Logo" class="logo">
    <h1>Summer Slams DSA25</h1>
    <p>Your DSA showdown starts here!</p>

    <div class="section-title">🚀 About Event Rounds</div>
<ul>
  <li><strong>Round 1 (Mock Test):</strong> Practice-only MCQ & coding quiz. This round is <em>unranked</em> and helps participants warm up before the main round.</li>
  <li><strong>Round 2 (Ranked Challenge):</strong> Solve 5 DSA coding questions of varying difficulty. This is the main round where winners are decided based on performance.</li>
</ul>


    <div class="section-title">🏆 Rewards</div>
    <ul>
      <p>Top Winner in Each Category (Easy, Medium, Expert) will receive:</p>
      <li><strong></strong>Custom Certificate of Victory – Honoring 1st (Easy Category), 1st (Medium Category), and 1st (Hard Category) place in each category</li>
      <li><strong></strong>Featured on the Official “Winner Wall” Microsite</li>
      <li><em></em>Exclusive Invitation to Join the Fork & Flow Community</li>
      <li>Priority Access to Future Events, Mentorship Opportunities, and Career Tracks</li>
    </ul>

    <div class="section-title">🌐 Community</div>
    <p>Top performers will receive exclusive invites to the <strong>Fork & Flow</strong> developer community for mentorship and future tech tracks.</p>

    <div class="section-title">📅 Event Details</div>
    <p>Summer Slams DSA25 is a national-level 24-hour online coding challenge organized by Fork & Flow Community. Participants will compete individually in a category of their choice (Easy, Medium, or Expert), solving 5 curated DSA problems within 3 hours.

This is your chance to showcase your problem-solving skills, earn recognition, and get featured among India's brightest upcoming coders.</p>

    <div class="section-title">📝 Eligibility</div>
    <ul>
      <li>Open to all students, professionals, and coding enthusiasts across India.</li>
      <li>No restrictions on college, year, or background.</li>
      <li>Individual participation only (no teams).</li>
      <li>Inter-college and inter-specialization not applicable, as it is solo only.</li>
    </ul>

    <div class="section-title">⏰ Event Timeline</div>
    <ul>
      <li><strong>Practice Round:</strong> 1 July 2025 (unranked)</li>
      <li><strong>Main Event Start:</strong> 5 July 2025, 11:00 AM IST</li>
      <li><strong>Main Event End:</strong> 6 July 2025, 11:00 AM IST</li>
    </ul>

    <div class="section-title">❓ Question Format</div>
    <ul>
      <li>5 DSA problems in every category (Easy, Medium, Hard).</li>
      <li>Auto-evaluated with partial scoring enabled.</li>
      <li>Topics include arrays, recursion, graphs, trees, dynamic programming, etc.</li>
    </ul>

    <div class="section-title">📊 Scoring & Evaluation</div>
    <ul>
      <li>Total: 100 Points.</li>
      <li>Partial marks awarded based on passed test cases.</li>
      <li>No negative marking or penalties.</li>
      <li>Final rankings are based on score + total time taken.</li>
      <li>Results will be announced directly post-evaluation.</li>
    </ul>

    <div class="section-title">📜 Rules & Guidelines</div>
    <ul>
      <li>Participation is individual only.</li>
      <li>Once the test is started, the 3-hour timer cannot be paused or resumed.</li>
      <li>Each participant can attempt the contest only once.</li>
      <li>Use of AI tools like ChatGPT, Copilot, etc., is strictly prohibited.</li>
      <li>Plagiarism will result in immediate disqualification.</li>
      <li>Participants must submit code within the contest platform only.</li>
      <li>Practice round is for familiarity and not considered for ranking.</li>
      <li>No resubmission or appeal post-event.</li>
    </ul>

    <div class="section-title">🏅 Rewards</div>
    <p>Top 1st Winners from all three categories will receive:</p>
    <ul>
      <li>Custom Certificate of Victory – Honoring 1st position in each category.</li>
      <li>Featured on the Official “Winner Wall” Microsite.</li>
      <li>Exclusive Invitation to Join the Fork & Flow Community.</li>
      <li>Priority Access to Future Events, Mentorship Opportunities, and Career Tracks.</li>
      <li><em>Note:</em> No participation certificates will be issued. This is an excellence-focused contest.</li>
    </ul>

    <div class="section-title">💬 Communication & Support</div>
    <p>All queries and coordination will happen on our official Discord server. Live support and clarifications during the event. Post-event feedback and testimonial form for top performers.</p>

    <a href="https://discord.gg/8FEwEAxrn6" class="register-btn">Join Discord Server</a><br><br>
    <!-- Place this inside your .glass-wrapper div, ideally below the round details -->
<a href="https://unstop.com/p/summer-slams-dsa25-national-level-dsa-coding-challenge-fork-flow-community-1502768" class="register-btn">Register Now</a>

    <div class="section-title">⏳ Registrations Ends In</div>
<div id="countdown-timer" class="countdown-box">Loading...</div>

<style>
  .countdown-box {
    font-size: 1.4rem;
    font-weight: 600;
    color: #facc15;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 10px 20px;
    border-radius: 12px;
    margin-top: 10px;
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.2);
  }
</style>

<script>
  function updateCountdown() {
    const targetDate = new Date("July 04, 2025 11:00:00 GMT+0530"); // IST
    const now = new Date();
    const diff = targetDate - now;

    const countdownElement = document.getElementById("countdown-timer");

    if (diff <= 0) {
      countdownElement.innerHTML = "Registration is closed now!";
      return;
    }

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((diff / (1000 * 60)) % 60);
    const seconds = Math.floor((diff / 1000) % 60);

    countdownElement.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s remaining`;
  }

  // Initial call and then update every second
  updateCountdown();
  setInterval(updateCountdown, 1000);
</script>


<style>
  .register-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #3b82f6;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
  }

  .register-btn:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.5);
  }

  .register-btn:active {
    transform: scale(0.96);
  }
</style>

    <footer>&copy; 2025 Summer Slams DSA25. Crafted with 💙 for innovators.</footer>
  </div>

  <script>
    const particleContainer = document.getElementById("particles-container");
    for (let i = 0; i < 60; i++) {
      const p = document.createElement("div");
      p.classList.add("particle");
      const size = Math.random() * 10 + 4;
      p.style.width = `${size}px`;
      p.style.height = `${size}px`;
      p.style.left = `${Math.random() * 100}%`;
      p.style.top = `${Math.random() * 100}%`;
      p.style.animationDuration = `${6 + Math.random() * 6}s`;
      particleContainer.appendChild(p);
    }
  </script>
</body>
</html>