Skip to content

Commit 13b1506

Browse files
BaconSpacesBaconSpaces
authored
Create index.html
1 parent 1476bbf commit 13b1506

File tree

1 file changed

+368
-0
lines changed

1 file changed

+368
-0
lines changed

‎index.html‎

Lines changed: 368 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,368 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>PolyExtender</title>
5+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
6+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
10+
<style>
11+
body {
12+
font-family: 'Poppins', sans-serif;
13+
background-color: #f5f7fa;
14+
}
15+
16+
nav {
17+
box-shadow: none;
18+
}
19+
20+
.brand-logo {
21+
font-weight: 600;
22+
letter-spacing: 1px;
23+
}
24+
25+
a {
26+
color: #16aaf2;
27+
transition: color 0.3s ease;
28+
}
29+
30+
a:hover {
31+
color: #0c99dd;
32+
}
33+
34+
.backer {
35+
background: linear-gradient(135deg, #16aaf2 0%, #0c72b7 100%);
36+
}
37+
38+
.backer-dark {
39+
background: #0c99dd;
40+
}
41+
42+
.hero-section {
43+
height: 500px;
44+
position: relative;
45+
overflow: hidden;
46+
}
47+
48+
.particles {
49+
position: absolute;
50+
top: 0;
51+
left: 0;
52+
width: 100%;
53+
height: 100%;
54+
z-index: 1;
55+
}
56+
57+
.hero-content {
58+
position: relative;
59+
z-index: 2;
60+
padding-top: 50px;
61+
}
62+
63+
.logo-pulse {
64+
animation: pulse 2s infinite;
65+
}
66+
67+
@keyframes pulse {
68+
0% { transform: scale(1); }
69+
50% { transform: scale(1.05); }
70+
100% { transform: scale(1); }
71+
}
72+
73+
.hero-title {
74+
font-weight: 700;
75+
margin: 20px 0 10px;
76+
letter-spacing: 1px;
77+
}
78+
79+
.hero-subtitle {
80+
font-weight: 300;
81+
margin-top: 0;
82+
opacity: 0.9;
83+
}
84+
85+
.card {
86+
border-radius: 10px;
87+
overflow: hidden;
88+
transition: transform 0.3s ease, box-shadow 0.3s ease;
89+
}
90+
91+
.card:hover {
92+
transform: translateY(-5px);
93+
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
94+
}
95+
96+
.card-content {
97+
padding: 24px;
98+
border-radius: 10px 10px 0 0;
99+
}
100+
101+
.card-title {
102+
font-weight: 600;
103+
font-size: 20px;
104+
}
105+
106+
.card-action {
107+
background-color: #ffffff;
108+
padding: 16px 24px;
109+
border-top: none;
110+
}
111+
112+
.card-link {
113+
color: #16aaf2 !important;
114+
font-weight: 500;
115+
text-transform: uppercase;
116+
letter-spacing: 0.5px;
117+
font-size: 14px;
118+
}
119+
120+
.card-link:hover {
121+
color: #0c99dd !important;
122+
}
123+
124+
.section-title {
125+
font-weight: 600;
126+
margin-bottom: 30px;
127+
position: relative;
128+
display: inline-block;
129+
}
130+
131+
.section-title:after {
132+
content: '';
133+
position: absolute;
134+
width: 60%;
135+
height: 3px;
136+
background-color: #16aaf2;
137+
bottom: -10px;
138+
left: 0;
139+
}
140+
141+
footer {
142+
padding: 20px 0;
143+
color: #90a4ae;
144+
font-weight: 300;
145+
}
146+
147+
.preloader-wrapper {
148+
display: block;
149+
margin: 50px auto;
150+
}
151+
152+
/* Animation for cards */
153+
.fade-in {
154+
animation: fadeIn 0.8s ease forwards;
155+
opacity: 0;
156+
}
157+
158+
@keyframes fadeIn {
159+
from { opacity: 0; transform: translateY(20px); }
160+
to { opacity: 1; transform: translateY(0); }
161+
}
162+
</style>
163+
</head>
164+
<body>
165+
166+
<header class="z-depth-1">
167+
<nav class="z-depth-0 backer-dark">
168+
<div class="nav-wrapper container">
169+
<a href="#" class="brand-logo">PolyExtender</a>
170+
<ul class="right hide-on-med-and-down">
171+
<li><a href="index.html">Home</a></li>
172+
<li><a href="#projects">Projects</a></li>
173+
<li><a href="#about">About</a></li>
174+
</ul>
175+
</div>
176+
</nav>
177+
</header>
178+
179+
<div class="hero-section backer white-text valign-wrapper">
180+
<div id="particles" class="particles"></div>
181+
<div class="container center-align hero-content">
182+
<img src="https://r2.fivemanage.com/image/XAN6kdmkqwml.png" style="height: 140px;" alt="PolyExtender Logo" class="logo-pulse">
183+
<h1 class="hero-title">PolyExtender</h1>
184+
<h4 class="hero-subtitle">Enhance Your Stream Experience</h4>
185+
<a href="#projects" class="btn-large white black-text waves-effect waves-light pulse" style="margin-top: 30px;">Explore Projects</a>
186+
</div>
187+
</div>
188+
189+
<main class="container" style="padding: 4rem 0">
190+
<section id="projects">
191+
<h2 class="section-title">Our Projects</h2>
192+
<p class="flow-text grey-text" style="margin-bottom: 40px;">Discover our collection of extensions designed to enhance your streaming experience.</p>
193+
194+
<div id="repo-cards" class="row">
195+
<div class="center">
196+
<div class="preloader-wrapper big active">
197+
<div class="spinner-layer spinner-blue">
198+
<div class="circle-clipper left">
199+
<div class="circle"></div>
200+
</div><div class="gap-patch">
201+
<div class="circle"></div>
202+
</div><div class="circle-clipper right">
203+
<div class="circle"></div>
204+
</div>
205+
</div>
206+
</div>
207+
</div>
208+
</div>
209+
</section>
210+
211+
<section id="about" style="margin-top: 80px;">
212+
<h2 class="section-title">About PolyExtender</h2>
213+
<div class="row">
214+
<div class="col s12 m8">
215+
<p class="flow-text">PolyExtender is dedicated to creating powerful extensions that enhance your streaming platforms. Our tools are designed to provide more functionality, better customization, and an overall improved experience.</p>
216+
</div>
217+
<div class="col s12 m4 center-align">
218+
<div class="card-panel backer white-text" style="border-radius: 10px;">
219+
<i class="material-icons large">extension</i>
220+
<h5>Powerful Extensions</h5>
221+
</div>
222+
</div>
223+
</div>
224+
</section>
225+
</main>
226+
227+
<footer class="container section center-align">
228+
<div class="divider" style="margin-bottom: 20px;"></div>
229+
<p>&copy; 2025 PolyExtender • All Rights Reserved</p>
230+
<div class="social-icons" style="margin-top: 10px;">
231+
<a href="#" class="grey-text text-darken-1"><i class="material-icons">code</i></a>
232+
<a href="#" class="grey-text text-darken-1"><i class="material-icons">rss_feed</i></a>
233+
<a href="#" class="grey-text text-darken-1"><i class="material-icons">mail</i></a>
234+
</div>
235+
</footer>
236+
237+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
238+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
239+
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js"></script>
240+
241+
<script>
242+
// Initialize Materialize components
243+
document.addEventListener('DOMContentLoaded', function() {
244+
M.AutoInit();
245+
});
246+
247+
// Particles background
248+
window.onload = function() {
249+
if(typeof Particles !== 'undefined') {
250+
Particles.init({
251+
selector: '#particles',
252+
color: ['#ffffff', '#f5f5f5'],
253+
connectParticles: true,
254+
maxParticles: 100,
255+
responsive: [
256+
{ breakpoint: 768, options: { maxParticles: 60 } },
257+
{ breakpoint: 425, options: { maxParticles: 30 } }
258+
]
259+
});
260+
}
261+
};
262+
263+
// Function to generate visually pleasing colors
264+
function getRandomColor() {
265+
// Array of visually pleasing colors
266+
const colors = [
267+
'#3498db', '#2ecc71', '#9b59b6', '#e74c3c', '#1abc9c',
268+
'#34495e', '#f1c40f', '#e67e22', '#16a085', '#2980b9',
269+
'#8e44ad', '#c0392b', '#d35400', '#27ae60', '#2c3e50'
270+
];
271+
272+
return colors[Math.floor(Math.random() * colors.length)];
273+
}
274+
275+
// Fetch repositories from PolyExtended GitHub organization
276+
const org = 'polyextender';
277+
fetch(`https://api.github.com/orgs/${org}/repos`)
278+
.then(response => response.json())
279+
.then(repos => {
280+
// Select the container for repository cards
281+
const repoCards = document.getElementById('repo-cards');
282+
repoCards.innerHTML = ''; // Clear loading spinner
283+
284+
// Filter out repositories with specific names
285+
const excludedNames = ['.github', 'polyextended.github.io', 'PolyExtended'];
286+
const filteredRepos = repos.filter(repo => !excludedNames.includes(repo.name));
287+
288+
// If no repos found
289+
if (filteredRepos.length === 0) {
290+
repoCards.innerHTML = `
291+
<div class="col s12 center-align">
292+
<div class="card-panel grey lighten-4">
293+
<span class="grey-text text-darken-2">No repositories found</span>
294+
</div>
295+
</div>
296+
`;
297+
return;
298+
}
299+
300+
// Iterate through the repositories and create cards
301+
filteredRepos.forEach((repo, index) => {
302+
// Create card element
303+
const card = document.createElement('div');
304+
card.classList.add('col', 's12', 'm6', 'l4', 'fade-in');
305+
card.style.animationDelay = `${index * 0.1}s`;
306+
307+
const cardColor = getRandomColor();
308+
const description = repo.description || 'Stream enhancement tool for an immersive viewing experience.';
309+
310+
// Determine an appropriate icon based on repository name or description
311+
let icon = 'extension';
312+
if (repo.name.toLowerCase().includes('chat') || repo.description && repo.description.toLowerCase().includes('chat')) {
313+
icon = 'chat';
314+
} else if (repo.name.toLowerCase().includes('stream') || repo.description && repo.description.toLowerCase().includes('stream')) {
315+
icon = 'play_circle_filled';
316+
} else if (repo.name.toLowerCase().includes('tool') || repo.description && repo.description.toLowerCase().includes('tool')) {
317+
icon = 'build';
318+
}
319+
320+
card.innerHTML = `
321+
<div class="card hoverable">
322+
<div class="card-content white-text" style="background-color: ${cardColor}; min-height: 180px;">
323+
<i class="material-icons right">code</i>
324+
<span class="card-title">${repo.name}</span>
325+
<p>${description}</p>
326+
</div>
327+
<div class="card-action">
328+
<a href="${repo.homepage || repo.html_url}" class="card-link">
329+
<i class="material-icons left tiny">${icon}</i>Explore
330+
</a>
331+
<span class="right grey-text text-darken-1">
332+
<i class="material-icons tiny">star</i> ${repo.stargazers_count || 0}
333+
</span>
334+
</div>
335+
</div>
336+
`;
337+
338+
// Append the card to the container
339+
repoCards.appendChild(card);
340+
});
341+
})
342+
.catch(error => {
343+
console.error('Error fetching repositories:', error);
344+
document.getElementById('repo-cards').innerHTML = `
345+
<div class="col s12 center-align">
346+
<div class="card-panel red lighten-4">
347+
<span class="red-text text-darken-3">Error loading repositories. Please try again later.</span>
348+
</div>
349+
</div>
350+
`;
351+
});
352+
353+
// Smooth scrolling for anchor links
354+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
355+
anchor.addEventListener('click', function(e) {
356+
e.preventDefault();
357+
const target = document.querySelector(this.getAttribute('href'));
358+
if (target) {
359+
window.scrollTo({
360+
top: target.offsetTop - 80,
361+
behavior: 'smooth'
362+
});
363+
}
364+
});
365+
});
366+
</script>
367+
</body>
368+
</html>

0 commit comments

Comments
 (0)