Skip to content

Commit 6d6869c

Browse files
ravixalgorithmravixalgorithm
authored
Merge pull request #1 from ravixalgorithm/main
completed the project
2 parents 5b78da4 + 74f0742 commit 6d6869c

File tree

4 files changed

+381
-0
lines changed

4 files changed

+381
-0
lines changed

‎challenges/2025-06-28.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
[
2+
{
3+
"event": "Frontend Challenge 01 [FC01]",
4+
"date": "2025-06-28",
5+
"status": "upcoming",
6+
"projects": [
7+
8+
]
9+
}
10+
]

‎readme.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,48 @@
11

2+
# 🚀 Challenge Submissions Webpage
3+
4+
Welcome to the **Codextream Community Challenge Submissions** repository!
5+
6+
This is a simple and modern webpage where students can showcase their projects for various challenges and events.
7+
> 👉 **Just fork the repo, add your project details, and open a Pull Request to get featured!**
8+
9+
<hr>
10+
11+
## 📝 How to Contribute
12+
13+
1️⃣ **Fork** this repository.
14+
15+
2️⃣ **Add your project** in the correct `challenges/YYYY-MM-DD.json` file.
16+
17+
> **✨ Tip: Include your social links (GitHub, LinkedIn, etc.) — it helps others connect with your work!**
18+
19+
✅ Example:
20+
```json
21+
{
22+
"projectName": "FC01_Ravi",
23+
"studentName": "Ravi Pratap Singh",
24+
"rollNo": "230104047",
25+
"branch": "Computer Science & Engineering",
26+
"college": "Harcourt Butler Technical University",
27+
"liveLink": "https://philosopai.netlify.app/",
28+
"socials": {
29+
"github": "https://github.com/ravixalgorthm",
30+
"linkedin": "https://linkedin.com/in/ravixalgorthm",
31+
"instagram": "https://instagram.com/ravixalgorthm"
32+
}
33+
}
34+
```
35+
36+
3️⃣ **Open a Pull Request** — your project will appear on the site once your PR is merged!
37+
38+
## 💻 View or Test Locally
39+
40+
👉 Open `index.html` in your browser.
41+
42+
If you want to run it locally with fetch working: Use **VSCode Live Server**
43+
44+
<hr>
45+
46+
## 🙌 Thanks for being part of Codextream!
47+
48+
Made with ❤️ by Codextream Community and Created by [Ravixalgorithm](https://github.com/ravixalgorithm)

‎src/index.html‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Challenge Submissions | Codextream Community</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<!-- Tailwind CSS CDN -->
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<!-- Font Awesome for icons -->
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
11+
<!-- Google Fonts for Space Grotesk -->
12+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
13+
<!-- Tab Icon -->
14+
<link rel="icon" href="https://codextream.in/logo.svg">
15+
16+
<style>
17+
/* Custom CSS Variables for the new dark theme */
18+
:root {
19+
--color-primary: #00C9B1; /* Vibrant Teal/Green */
20+
--color-secondary: #008D79; /* Darker Teal */
21+
--color-background-base: #0A0A0A; /* Very dark base background */
22+
--color-glass-bg: rgba(255, 255, 255, 0.05); /* More transparent, lighter glass background */
23+
--color-glass-border: rgba(255, 255, 255, 0.1); /* Subtle white border for glass */
24+
--color-text-light: #F0F0F0; /* Light text for contrast */
25+
--color-text-muted: #A0A0A0; /* Muted text for descriptions */
26+
--color-shadow: rgba(0, 0, 0, 0.4); /* More pronounced shadows for depth */
27+
--blur-intensity: blur(25px); /* Even more intense blur for diffused glass effect */
28+
--background-patch-color: rgba(0, 201, 177, 0.12); /* Slightly more opaque color for blurred patches */
29+
}
30+
31+
body {
32+
font-family: 'Space Grotesk', sans-serif; /* Apply Space Grotesk font */
33+
background-color: var(--color-background-base); /* Solid dark background */
34+
color: var(--color-text-light);
35+
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
36+
min-height: 100vh;
37+
position: relative; /* Needed for patches */
38+
overflow-x: hidden; /* Prevent horizontal scroll from patches */
39+
}
40+
41+
/* Common styles for background patches */
42+
.background-patch {
43+
position: absolute;
44+
background-color: var(--background-patch-color);
45+
border-radius: 50%;
46+
z-index: -1; /* Send behind content */
47+
pointer-events: none; /* Do not interfere with clicks */
48+
}
49+
50+
/* Custom glassmorphism effect for all relevant elements */
51+
.glass {
52+
background-color: var(--color-glass-bg);
53+
backdrop-filter: var(--blur-intensity);
54+
border: 1px solid var(--color-glass-border);
55+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
56+
transition: all 0.3s ease-in-out;
57+
}
58+
59+
/* Navbar specific styles */
60+
.navbar {
61+
background-color: var(--color-glass-bg); /* Use glass background for navbar */
62+
backdrop-filter: var(--blur-intensity);
63+
border-bottom: 1px solid var(--color-glass-border);
64+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); /* Consistent shadow for navbar */
65+
}
66+
67+
/* Project card specific background - now fully glass */
68+
.project-card {
69+
background-color: var(--color-glass-bg); /* Now a glass effect too */
70+
backdrop-filter: var(--blur-intensity);
71+
border: 1px solid var(--color-glass-border); /* Consistent border */
72+
box-shadow: 0 4px 30px rgba(0,0,0,0.2); /* Soft shadow for cards */
73+
}
74+
75+
/* Search input specific styles to apply glass */
76+
.search-wrap input#search {
77+
background-color: var(--color-glass-bg);
78+
backdrop-filter: var(--blur-intensity);
79+
border: 1px solid var(--color-glass-border); /* Match glass border */
80+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); /* Match glass shadow */
81+
}
82+
/* Override specific focus state for search to match primary color */
83+
.search-wrap input#search:focus {
84+
border-color: var(--color-primary); /* Keep primary color on focus */
85+
background-color: rgba(255, 255, 255, 0.05); /* Slightly lighter on focus */
86+
}
87+
88+
89+
/* Adjust hover effect for cards */
90+
.project-card:hover {
91+
transform: translateY(-8px); /* More pronounced lift */
92+
box-shadow: 0 15px 40px var(--color-shadow); /* Stronger shadow on hover */
93+
}
94+
95+
/* Space Grotesk font specifics */
96+
.font-space-grotesk {
97+
font-family: 'Space Grotesk', sans-serif;
98+
}
99+
100+
/* Keyframe for pulse effect on heart */
101+
@keyframes pulse {
102+
0% { transform: scale(1); }
103+
50% { transform: scale(1.1); }
104+
100% { transform: scale(1); }
105+
}
106+
107+
/* Keyframes for patch movement animations */
108+
@keyframes movePatch1 {
109+
0% { transform: translate(0, 0) scale(1); }
110+
50% { transform: translate(50px, -30px) scale(1.05); }
111+
100% { transform: translate(0, 0) scale(1); }
112+
}
113+
114+
@keyframes movePatch2 {
115+
0% { transform: translate(0, 0) scale(1); }
116+
50% { transform: translate(-40px, 60px) scale(1.1); }
117+
100% { transform: translate(0, 0) scale(1); }
118+
}
119+
120+
@keyframes movePatch3 {
121+
0% { transform: translate(0, 0) scale(1); }
122+
50% { transform: translate(30px, 40px) scale(1.03); }
123+
100% { transform: translate(0, 0) scale(1); }
124+
}
125+
@keyframes movePatch4 {
126+
0% { transform: translate(0, 0) scale(1); }
127+
50% { transform: translate(-20px, -50px) scale(1.08); }
128+
100% { transform: translate(0, 0) scale(1); }
129+
}
130+
@keyframes movePatch5 {
131+
0% { transform: translate(0, 0) scale(1); }
132+
50% { transform: translate(60px, -10px) scale(1.02); }
133+
100% { transform: translate(0, 0) scale(1); }
134+
}
135+
</style>
136+
</head>
137+
<body class="transition-colors duration-300 ease-in-out">
138+
<!-- Background patches (added as specific divs for more control) -->
139+
<div class="background-patch top-1/4 left-1/4 w-96 h-96 filter blur-[150px] opacity-70 animate-movePatch1"></div>
140+
<div class="background-patch bottom-1/3 right-1/4 w-80 h-80 filter blur-[120px] opacity-60 animate-movePatch2"></div>
141+
<div class="background-patch top-10 right-1/2 w-72 h-72 filter blur-[180px] opacity-50 animate-movePatch3"></div>
142+
<div class="background-patch bottom-10 left-1/3 w-64 h-64 filter blur-[100px] opacity-40 animate-movePatch4"></div>
143+
<div class="background-patch top-1/2 left-10 w-128 h-128 filter blur-[200px] opacity-30 animate-movePatch5"></div>
144+
<div class="background-patch bottom-20 right-10 w-112 h-112 filter blur-[170px] opacity-20 animate-movePatch1"></div>
145+
146+
147+
<!-- Navbar -->
148+
<nav class="navbar w-full sticky top-0 z-50 flex items-center justify-between py-4 px-6 md:px-12 rounded-b-3xl">
149+
<div class="flex items-center">
150+
<span class="text-2xl md:text-3xl font-bold tracking-tight text-[var(--color-primary)] font-space-grotesk">Codextream Community</span>
151+
</div>
152+
</nav>
153+
154+
<div class="container mx-auto px-4 py-8 md:py-12 max-w-7xl">
155+
<!-- Instructions Section -->
156+
<section class="instructions glass p-6 md:p-10 rounded-2xl text-center max-w-3xl mx-auto my-8">
157+
<h1 class="text-4xl md:text-5xl font-extrabold mb-2 text-[var(--color-primary)] tracking-tight font-space-grotesk">
158+
Challenge Submissions
159+
</h1>
160+
<p class="text-lg md:text-xl font-semibold mb-6 text-[var(--color-secondary)] font-space-grotesk">
161+
<b>by Codextream Community</b>
162+
</p>
163+
<ul class="text-left max-w-xl mx-auto list-disc pl-5 text-[var(--color-text-muted)] leading-relaxed font-space-grotesk">
164+
<li class="mb-2"><b>Fork</b> this repository</li>
165+
<li class="mb-2"><b>Add</b> your project in the correct <code class="bg-[var(--color-card-bg)] text-[var(--color-primary)] px-2 py-1 rounded">YYYY-MM-DD.json</code></li>
166+
<li class="mb-2">Include: Project Name, Your Name, Roll No., Branch, College, Live Link, and socials (optionals)</li>
167+
<li class="mb-2"><b>Open a Pull Request</b>—your project will appear below after merge!</li>
168+
</ul>
169+
</section>
170+
171+
<!-- Search Bar -->
172+
<div class="search-wrap flex justify-center my-8 md:my-12">
173+
<input type="text" id="search" placeholder="🔍 Search by project, name, branch, college, event..." autocomplete="off"
174+
class="w-full max-w-2xl px-6 py-4 text-lg border-2 rounded-full
175+
focus:outline-none text-[var(--color-text-light)] placeholder-[var(--color-text-muted)]
176+
shadow-lg transition-all duration-300 ease-in-out font-space-grotesk">
177+
</div>
178+
179+
<!-- Events Container -->
180+
<main id="events" class="grid gap-12 md:gap-16"></main>
181+
182+
<!-- Footer -->
183+
<footer class="text-center mt-16 py-8 text-sm md:text-base text-[var(--color-text-muted)] font-space-grotesk">
184+
<p>
185+
Made with <span class="heart text-red-500 text-xl inline-block animate-pulse">❤</span> by
186+
<a href="https://codextream.in" target="_blank" rel="noopener" class="text-[var(--color-primary)] font-semibold hover:underline">Codextream Community</a>.
187+
<br> and created by
188+
<a href="" target="_blank" class="text-[var(--color-primary)] font-semibold hover:underline">Ravixalgorithm</a>.
189+
</p>
190+
</footer>
191+
</div>
192+
193+
<script src="./script.js"></script>
194+
</body>
195+
</html>

‎src/script.js‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
// List all JSON files for each date here
2+
const jsonFiles = [
3+
"/challenges/2025-06-28.json",
4+
];
5+
6+
let allEvents = [];
7+
8+
// Social icons Font Awesome classes
9+
const SVGs = {
10+
github: `<i class="fab fa-github"></i>`,
11+
linkedin: `<i class="fab fa-linkedin"></i>`, // Corrected icon for LinkedIn
12+
instagram: `<i class="fab fa-instagram"></i>`
13+
};
14+
15+
// Util: render socials
16+
function renderSocials(socials) {
17+
if (!socials) return '';
18+
const links = [
19+
socials.github ? `<a href="${socials.github}" title="GitHub" target="_blank" rel="noopener" class="flex items-center justify-center w-8 h-8 rounded-full text-[var(--color-primary)] bg-[var(--color-glass-bg)] hover:bg-[var(--color-primary)] hover:text-white transition-colors duration-300 shadow-md">
20+
${SVGs.github}
21+
</a>` : '',
22+
socials.linkedin ? `<a href="${socials.linkedin}" title="LinkedIn" target="_blank" rel="noopener" class="flex items-center justify-center w-8 h-8 rounded-full text-[var(--color-primary)] bg-[var(--color-glass-bg)] hover:bg-[var(--color-primary)] hover:text-white transition-colors duration-300 shadow-md">
23+
${SVGs.linkedin}
24+
</a>` : '',
25+
socials.instagram ? `<a href="${socials.instagram}" title="Instagram" target="_blank" rel="noopener" class="flex items-center justify-center w-8 h-8 rounded-full text-[var(--color-primary)] bg-[var(--color-glass-bg)] hover:bg-[var(--color-primary)] hover:text-white transition-colors duration-300 shadow-md">
26+
${SVGs.instagram}
27+
</a>` : ''
28+
].filter(Boolean).join('');
29+
return links ? `<div class="socials flex items-center space-x-2 ml-4">${links}</div>` : '';
30+
}
31+
32+
// Render events to DOM
33+
function renderEvents(events) {
34+
const eventsDiv = document.getElementById("events");
35+
eventsDiv.innerHTML = events
36+
.map(
37+
(event) => `
38+
<section class="event-section animate-fade-in">
39+
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-[var(--color-text-light)] text-center font-space-grotesk">
40+
${event.event}
41+
<span class="date text-base md:text-lg text-[var(--color-primary)] bg-[var(--color-glass-bg)] px-3 py-1 rounded-lg ml-3 shadow-sm font-space-grotesk">
42+
${event.date}
43+
(${event.projects.length} Submissions)
44+
</span>
45+
<span class="date text-base md:text-lg text-[#aoaoao] bg-[var(--color-glass-bg)] px-3 py-1 rounded-lg ml-3 shadow-sm font-space-grotesk">
46+
(${event.status})
47+
</span>
48+
</h2>
49+
<div class="projects grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
50+
${event.projects
51+
.map(
52+
(proj) => `
53+
<div class="project-card glass p-6 rounded-xl flex flex-col justify-between
54+
hover:translate-y-[-8px] hover:shadow-xl transition-all duration-300 font-space-grotesk">
55+
<h3 class="text-xl font-bold mb-2 text-[var(--color-primary)] font-space-grotesk">${proj.projectName}</h3>
56+
<div class="meta text-sm text-[var(--color-text-muted)] mb-4 leading-relaxed font-space-grotesk">
57+
<div class="mb-1"><strong>Name:</strong> ${proj.studentName}</div>
58+
<div class="mb-1"><strong>Roll No.:</strong> ${proj.rollNo}</div>
59+
<div class="mb-1"><strong>Branch:</strong> ${proj.branch}</div>
60+
<div class="mb-1"><strong>College:</strong> ${proj.college}</div>
61+
</div>
62+
<div class="card-actions flex items-center justify-between mt-4">
63+
<a href="${proj.liveLink}" class="live-link bg-[var(--color-primary)] text-white px-5 py-2 rounded-lg text-base font-semibold
64+
hover:bg-[var(--color-secondary)] transition-colors duration-300 shadow-lg font-space-grotesk gap-2 flex items-center">
65+
Live Demo <i class="fa fa-external-link" aria-hidden="true"></i>
66+
67+
</a>
68+
${renderSocials(proj.socials)}
69+
</div>
70+
</div>
71+
`
72+
)
73+
.join("")}
74+
${event.projects.length === 0 ? `
75+
<div class="col-span-full text-center text-[var(--color-text-muted)] py-8 font-space-grotesk">No submissions yet for this event.</div>
76+
` : ''}
77+
</div>
78+
</section>
79+
`
80+
)
81+
.join("");
82+
}
83+
84+
// Fetch and setup
85+
Promise.all(
86+
jsonFiles.map(file => fetch(file).then(res => res.json()))
87+
).then(filesData => {
88+
allEvents = filesData.flat();
89+
allEvents.sort((a, b) => b.date.localeCompare(a.date));
90+
renderEvents(allEvents);
91+
});
92+
93+
94+
// --- Search functionality ---
95+
const searchInput = document.getElementById("search");
96+
searchInput.addEventListener("input", function () {
97+
const q = searchInput.value.trim().toLowerCase();
98+
if (!q) {
99+
renderEvents(allEvents);
100+
return;
101+
}
102+
// filter by projectName, studentName, rollNo, branch, college, event, or socials
103+
const filtered = allEvents
104+
.map(event => ({
105+
...event,
106+
projects: event.projects.filter(proj =>
107+
[
108+
event.date,
109+
event.event,
110+
proj.projectName,
111+
proj.studentName,
112+
proj.rollNo,
113+
proj.branch,
114+
proj.college,
115+
event.event,
116+
...(proj.socials ? Object.values(proj.socials).map(s => s.toLowerCase()) : []) // Ensure socials are lowercased
117+
]
118+
.filter(Boolean)
119+
.join(' ')
120+
.toLowerCase()
121+
.includes(q)
122+
)
123+
}))
124+
.filter(event => event.projects.length > 0);
125+
renderEvents(filtered);
126+
});
127+
128+
const root = document.documentElement;
129+
root.setAttribute("data-theme", "dark");

0 commit comments

Comments
 (0)