mirror of
https://github.com/System-End/YSWS-Catalog.git
synced 2026-04-19 21:05:07 +00:00
293 lines
13 KiB
HTML
293 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="alternate" type="application/rss+xml" title="Hack Club YSWS Programs" href="/feed.xml" />
|
|
<script>
|
|
const favicons = [
|
|
"logos/(ch)airtable.png",
|
|
"logos/3d print finished ig change it if you have a feedback.png",
|
|
"logos/Ad Astra.png",
|
|
"logos/Anchor.png",
|
|
"logos/arcade 2.png",
|
|
"logos/ascend (DoS).png",
|
|
"logos/assemble.png",
|
|
"logos/athena.png",
|
|
"logos/Bakebuild.png",
|
|
"logos/balatro.png",
|
|
"logos/black box.png",
|
|
"logos/blot.png",
|
|
"logos/blueprint.png",
|
|
"logos/boba.png",
|
|
"logos/cadence.png",
|
|
"logos/cartoon.png",
|
|
"logos/cascade.png",
|
|
"logos/cat club.png",
|
|
"logos/caution!-3.png",
|
|
"logos/Cider.png",
|
|
"logos/coolify.png",
|
|
"logos/Counterspell.png",
|
|
"logos/Create Mod-1.png",
|
|
"logos/deno-1.png",
|
|
"logos/Department of Hacker Culture.png",
|
|
"logos/epoch.png",
|
|
"logos/figma.png",
|
|
"logos/FIRST.png",
|
|
"logos/fun artsy.png",
|
|
"logos/fun doodle.png",
|
|
"logos/Furry Tail + blåhaj + socks (feel free to remove if controversy happens again _3).png",
|
|
"logos/glow.png",
|
|
"logos/google.png",
|
|
"logos/h.com, the everything app.png",
|
|
"logos/h++.png",
|
|
"logos/hackapet.png",
|
|
"logos/Hackbrew.png",
|
|
"logos/hackclub_.png",
|
|
"logos/hackcraft.png",
|
|
"logos/hack-life 2.png",
|
|
"logos/HackMii.png",
|
|
"logos/hackpad (alt).png",
|
|
"logos/hackpad.png",
|
|
"logos/harc.png",
|
|
"logos/HCB.png",
|
|
"logos/high seas.png",
|
|
"logos/image 1.png",
|
|
"logos/Incident.io.png",
|
|
"logos/intellij.png",
|
|
"logos/js.png",
|
|
"logos/lighting.png",
|
|
"logos/m_a_s_h.png",
|
|
"logos/mask-1.png",
|
|
"logos/microsoft teams.png",
|
|
"logos/microsoft word.png",
|
|
"logos/miiverse.png",
|
|
"logos/minus twelve.png",
|
|
"logos/Modrinth.png",
|
|
"logos/neon sign.png",
|
|
"logos/neon.png",
|
|
"logos/new reimbursements.png",
|
|
"logos/NixOS.png",
|
|
"logos/offical logo progress.png",
|
|
"logos/onboard.png",
|
|
"logos/Outernet.png",
|
|
"logos/pedropedropedro.png",
|
|
"logos/Pokemon.png",
|
|
"logos/Portal.png",
|
|
"logos/puppy club - without spots.png",
|
|
"logos/raspberry_pi.png",
|
|
"logos/raycast.png",
|
|
"logos/Retrospect-1.png",
|
|
"logos/ruby.png",
|
|
"logos/rust 2.png",
|
|
"logos/rust.png",
|
|
"logos/say cheese-1.png",
|
|
"logos/scrapyard.png",
|
|
"logos/Scratch.png",
|
|
"logos/Shopify.png",
|
|
"logos/Splitflap.png",
|
|
"logos/sprig.png",
|
|
"logos/template.png",
|
|
"logos/Terminal-1.png",
|
|
"logos/Testflight.png",
|
|
"logos/the bin.png",
|
|
"logos/tiktok.png",
|
|
"logos/ts.png",
|
|
"logos/tv.png",
|
|
"logos/Ubiquiti.png",
|
|
"logos/Ubuntu - Hack Club.png",
|
|
"logos/uiua.png",
|
|
"logos/unixclub.png",
|
|
"logos/unreal_engine.png",
|
|
"logos/yubico.png",
|
|
"logos/zach latta .png"
|
|
];
|
|
|
|
const randomFavicon = favicons[Math.floor(Math.random() * favicons.length)];
|
|
|
|
const link = document.createElement('link');
|
|
link.rel = 'icon';
|
|
link.href = randomFavicon;
|
|
|
|
document.head.appendChild(link);
|
|
</script>
|
|
<title>Hack Club YSWS Programs</title>
|
|
<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=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.js"></script>
|
|
</head>
|
|
<body class="noise parallax-wrapper">
|
|
<div class="gradient-bg">
|
|
<div class="gradient-blob gradient-1"></div>
|
|
<div class="gradient-blob gradient-2"></div>
|
|
<div class="gradient-blob gradient-3"></div>
|
|
</div>
|
|
|
|
<div class="circuit-bg"></div>
|
|
<div class="grid-overlay"></div>
|
|
|
|
<header class="site-header">
|
|
<div class="logo-container">
|
|
<a href="https://hackclub.com" target="_blank" rel="noopener noreferrer">
|
|
<img src="https://assets.hackclub.com/flag-orpheus-top.svg" alt="Hack Club" class="logo">
|
|
</a>
|
|
</div>
|
|
<nav class="main-nav">
|
|
<a href="https://hackclub.com/slack" target="_blank" rel="noopener noreferrer" class="nav-link">Join Slack</a>
|
|
<a href="/feed.xml" target="_blank" rel="noopener noreferrer" class="nav-link rss-link">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
|
|
RSS Feed
|
|
</a>
|
|
<a href="https://github.com/hackclub/YSWS-Catalog" target="_blank" rel="noopener noreferrer" class="nav-link">GitHub</a>
|
|
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">🌙</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<section class="hero-section">
|
|
<div class="hero-content">
|
|
<div class="hero-animated-text">
|
|
<span class="hero-text-shadow">You Ship,</span>
|
|
<span class="animated-element">We Ship.</span>
|
|
</div>
|
|
<h1 class="hero-title">YSWS <span class="accent">Programs</span></h1>
|
|
<p class="hero-description">Build something amazing, and Hack Club will ship you something epic in return.</p>
|
|
<div class="hero-cards">
|
|
<div class="hero-card">
|
|
<div class="hero-card-inner">
|
|
<div class="hero-card-front">
|
|
<div class="hero-card-icon">🚀</div>
|
|
<h3>Ship Your Project</h3>
|
|
<p>Create something awesome</p>
|
|
</div>
|
|
<div class="hero-card-back">
|
|
<p>Design a PCB, build a game, create an API, or make something amazing!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-card">
|
|
<div class="hero-card-inner">
|
|
<div class="hero-card-front">
|
|
<div class="hero-card-icon">🎁</div>
|
|
<h3>Get Rewarded</h3>
|
|
<p>Receive awesome gear</p>
|
|
</div>
|
|
<div class="hero-card-back">
|
|
<p>From hardware to subscriptions, get the tools you need to keep building cool things!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="#programs-list" class="cta-button">Explore Programs<span class="button-arrow">→</span></a>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container glassmorphic programs-container" id="programs-list">
|
|
<div class="programs-header">
|
|
<div class="programs-title-container">
|
|
<h2 class="section-title">YSWS <span class="accent">Programs</span></h2>
|
|
<div class="programs-subtitle">
|
|
<p class="lead">Find your next project opportunity and the rewards that come with it.</p>
|
|
</div>
|
|
</div>
|
|
<div class="programs-stats">
|
|
<div class="stat">
|
|
<div class="stat-number" id="active-count">0</div>
|
|
<div class="stat-label">Active Programs</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-container">
|
|
<div class="search-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="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
</div>
|
|
<input type="search" id="program-search" placeholder="Search for programs..." class="search-input">
|
|
</div>
|
|
|
|
<div class="controls-wrapper">
|
|
<div class="filter-container">
|
|
<button class="filter-btn active" data-category="all">All</button>
|
|
<button class="filter-btn" data-category="active">Active</button>
|
|
<button class="filter-btn" data-category="ending-soon">Ending Soon</button>
|
|
<button class="filter-btn" data-category="draft">Draft</button>
|
|
<button class="filter-btn" data-category="ended">Ended</button>
|
|
<button class="filter-btn user-filter" data-category="user-completed">Completed</button>
|
|
<button class="filter-btn user-filter" data-category="user-not-completed">Not Completed</button>
|
|
</div>
|
|
|
|
<div class="sort-container">
|
|
<button class="sort-btn active" data-sort="default">By Category</button>
|
|
<button class="sort-btn" data-sort="alphabetical">A-Z</button>
|
|
<button class="sort-btn" data-sort="deadline">By Deadline</button>
|
|
<button class="sort-btn" data-sort="status">By Status</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="programs-container" class="fade-in"></div>
|
|
|
|
<div class="no-results-message" id="user-completed-empty">
|
|
<h3>You haven't completed any programs yet</h3>
|
|
<p>Click the circle button on a program card when you've completed it to track your progress.</p>
|
|
<button class="filter-btn" data-category="all">View all programs</button>
|
|
</div>
|
|
|
|
<div class="no-results-message" id="user-not-completed-empty">
|
|
<div class="no-results-icon">🎉</div>
|
|
<h3>Congratulations!</h3>
|
|
<p>You've completed all the programs available! Check back later for new opportunities.</p>
|
|
<button class="filter-btn" data-category="all">View all programs</button>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="site-footer">
|
|
<div class="footer-content">
|
|
<div class="footer-column">
|
|
<a href="https://hackclub.com" target="_blank" class="footer-logo">
|
|
<img src="https://assets.hackclub.com/icon-rounded.png" alt="Hack Club" width="36">
|
|
</a>
|
|
<p>Built with ❤️ by the Hack Club community</p>
|
|
</div>
|
|
<div class="footer-column">
|
|
<p class="caption">Want to update or add something? Submit a PR on <a href="https://github.com/hackclub/YSWS-Catalog" target="_blank">GitHub</a>!</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<div id="program-modal" class="modal">
|
|
<div class="program-position"><span class="current-position"></span></div>
|
|
<button class="modal-nav modal-prev" aria-label="Previous program">←</button>
|
|
<button class="modal-nav modal-next" aria-label="Next program">→</button>
|
|
<div class="modal-content card">
|
|
<button class="modal-close" aria-label="Close modal">×</button>
|
|
<div class="modal-header">
|
|
<h2 class="title" id="modal-title"></h2>
|
|
<span class="program-status"></span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<span class="modal-completion-badge">
|
|
<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="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
You've completed this program
|
|
</span>
|
|
<p class="program-description"></p>
|
|
<div class="program-deadline"></div>
|
|
<div class="program-details">
|
|
<h3>How to Participate</h3>
|
|
<div class="participation-steps"></div>
|
|
<div class="more-details"></div>
|
|
<div class="program-links"></div>
|
|
</div>
|
|
<div class="modal-completion-container">
|
|
<button class="modal-completion-toggle">
|
|
<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"><circle cx="12" cy="12" r="10"/></svg>
|
|
Mark as completed
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|