Initial Commit

This commit is contained in:
2026-03-06 04:54:20 -04:00
commit 63677bfcf5
9332 changed files with 1507319 additions and 0 deletions

1
dist/assets/index-Cpged3wR.css vendored Normal file

File diff suppressed because one or more lines are too long

67
dist/assets/index-DWzoJss_.js vendored Normal file

File diff suppressed because one or more lines are too long

4
dist/images/favicon.svg vendored Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
<path d="M16 1 L29 6 L29 18 C29 25 23 30 16 31 C9 30 3 25 3 18 L3 6 Z" fill="#1a1a6e"/>
<text x="16" y="20" font-family="Georgia, serif" font-size="12" font-weight="bold" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">W</text>
</svg>

After

Width:  |  Height:  |  Size: 338 B

20
dist/images/whs-logo.svg vendored Normal file
View File

@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<defs>
<linearGradient id="shieldGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#2d2d9e"/>
<stop offset="100%" style="stop-color:#1a1a6e"/>
</linearGradient>
</defs>
<!-- Shield shape -->
<path d="M100 10 L180 40 L180 110 C180 155 145 185 100 195 C55 185 20 155 20 110 L20 40 Z" fill="url(#shieldGrad)" stroke="#c8a951" stroke-width="3"/>
<!-- Inner border -->
<path d="M100 22 L170 48 L170 108 C170 148 140 175 100 184 C60 175 30 148 30 108 L30 48 Z" fill="none" stroke="#c8a951" stroke-width="1.5" opacity="0.6"/>
<!-- WHS Text -->
<text x="100" y="90" font-family="Georgia, serif" font-size="52" font-weight="bold" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">WHS</text>
<!-- Divider line -->
<line x1="55" y1="110" x2="145" y2="110" stroke="#c8a951" stroke-width="2"/>
<!-- Est 1925 -->
<text x="100" y="132" font-family="Georgia, serif" font-size="14" fill="#c8a951" text-anchor="middle">EST. 1925</text>
<!-- 100 Years -->
<text x="100" y="155" font-family="Georgia, serif" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">100 YEARS</text>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

268
dist/index.html vendored Normal file
View File

@@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wesley High School - 100th Anniversary Fundraiser</title>
<meta name="description" content="Support Wesley High School's 100th Anniversary Celebrations. Make a donation and help us celebrate a century of excellence in education." />
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<script type="module" crossorigin src="/assets/index-DWzoJss_.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Cpged3wR.css">
</head>
<body>
<!-- Top Header Bar -->
<header class="top-bar">
<div class="top-bar-inner">
<div class="top-bar-left">
<img src="/images/whs-logo.svg" alt="Wesley High School" class="top-bar-logo" />
</div>
<div class="top-bar-right">
<div class="social-icons">
<a href="#" aria-label="Facebook" class="social-icon">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<a href="#" aria-label="Twitter" class="social-icon">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="#" aria-label="Instagram" class="social-icon">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
</a>
</div>
<a href="https://pay.shopdm.store/dominica-methodist-circuit" target="_blank" rel="noopener" class="btn btn-donate-header">Donate</a>
</div>
</div>
</header>
<!-- Hero Section -->
<main>
<section class="hero">
<div class="hero-inner">
<div class="hero-left">
<!-- Image Carousel -->
<div class="carousel" id="carousel">
<div class="carousel-track" id="carouselTrack">
<div class="carousel-slide active">
<div class="carousel-placeholder" id="slide1">
<div class="placeholder-content">
<h2>Wesley High School</h2>
<p>100th Anniversary</p>
<p class="year-range">1925 - 2025</p>
<p>Celebrating a Century of Excellence</p>
</div>
</div>
</div>
<div class="carousel-slide">
<div class="carousel-placeholder" id="slide2">
<div class="placeholder-content">
<h2>Support Our Legacy</h2>
<p>Help us continue building</p>
<p>the next 100 years</p>
</div>
</div>
</div>
<div class="carousel-slide">
<div class="carousel-placeholder" id="slide3">
<div class="placeholder-content">
<h2>Class Challenge</h2>
<p>Click below to make</p>
<p>your gift today!</p>
</div>
</div>
</div>
</div>
<button class="carousel-btn carousel-prev" id="carouselPrev" aria-label="Previous slide">&#10094;</button>
<button class="carousel-btn carousel-next" id="carouselNext" aria-label="Next slide">&#10095;</button>
<div class="carousel-dots" id="carouselDots">
<button class="dot active" data-index="0" aria-label="Slide 1"></button>
<button class="dot" data-index="1" aria-label="Slide 2"></button>
<button class="dot" data-index="2" aria-label="Slide 3"></button>
</div>
</div>
</div>
<div class="hero-right">
<div class="total-raised">
<span class="amount" id="totalRaised">$0</span>
<span class="label">Total Raised</span>
</div>
<a href="https://pay.shopdm.store/dominica-methodist-circuit" target="_blank" rel="noopener" class="btn btn-primary btn-large">Make a Donation</a>
<button class="btn btn-outline btn-large" id="becomeFundraiserBtn">Become a Fundraiser</button>
</div>
</div>
</section>
<!-- Tab Navigation -->
<section class="tabs-section">
<div class="tabs-container">
<nav class="tab-nav" id="tabNav">
<button class="tab-btn active" data-tab="about">About</button>
<button class="tab-btn" data-tab="classyears">Class Years</button>
<button class="tab-btn" data-tab="fundraisers">Fundraisers</button>
<button class="tab-btn" data-tab="donors">Donors</button>
<button class="tab-btn" data-tab="comments">Comments</button>
</nav>
<!-- Tab Content -->
<div class="tab-panels">
<!-- About Tab -->
<div class="tab-panel active" id="tab-about">
<h2>Join us for our 100th Anniversary Celebration!</h2>
<p>Please consider a donation in honor of your graduating class and help us raise funds for our Alma Mater, Wesley High School!</p>
<p>Wesley High School has been a cornerstone of education in Dominica since 1925. As we celebrate our centennial, we invite all alumni, students, and supporters to contribute to our legacy.</p>
<p>Our goal is to raise funds that will support scholarships, campus improvements, and programs that will benefit students for the next century.</p>
<div class="about-cta">
<a href="https://pay.shopdm.store/dominica-methodist-circuit" target="_blank" rel="noopener" class="btn btn-primary">Donate Now</a>
</div>
<!-- Share Section -->
<div class="share-section">
<h3>Share this campaign</h3>
<div class="share-buttons">
<button class="share-btn share-facebook" id="shareFacebook">
<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
Facebook
</button>
<button class="share-btn share-twitter" id="shareTwitter">
<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
Twitter/X
</button>
<button class="share-btn share-email" id="shareEmail">
<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
Email
</button>
</div>
</div>
</div>
<!-- Class Years Tab -->
<div class="tab-panel" id="tab-classyears">
<h2>Class Years</h2>
<p>Search for students by name to find alumni across all graduating classes.</p>
<div class="student-search">
<div class="search-input-wrap">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" id="studentSearch" placeholder="Search by student name..." autocomplete="off" />
</div>
<div class="student-results" id="studentResults">
<div class="empty-state" id="studentSearchEmpty">
<p>Enter a name above to search for students.</p>
</div>
</div>
</div>
</div>
<!-- Fundraisers Tab -->
<div class="tab-panel" id="tab-fundraisers">
<h2>Fundraisers</h2>
<p>These dedicated alumni and supporters are helping us reach our goal.</p>
<div class="fundraisers-list" id="fundraisersList">
<div class="empty-state">
<p>Be the first to start a fundraiser!</p>
<button class="btn btn-primary" id="startFundraiserBtn">Start Fundraising</button>
</div>
</div>
</div>
<!-- Donors Tab -->
<div class="tab-panel" id="tab-donors">
<h2>Our Generous Donors</h2>
<div class="donors-controls">
<select id="donorSort" class="sort-select">
<option value="recent">Most Recent</option>
<option value="amount">Highest Amount</option>
</select>
</div>
<div class="donors-list" id="donorsList">
<div class="empty-state" id="donorsEmpty">
<p>No donations yet. Be the first to donate!</p>
<a href="https://pay.shopdm.store/dominica-methodist-circuit" target="_blank" rel="noopener" class="btn btn-primary">Make a Donation</a>
</div>
</div>
</div>
<!-- Comments Tab -->
<div class="tab-panel" id="tab-comments">
<h2>Comments</h2>
<!-- Auth / Comment Form -->
<div class="comment-form-area" id="commentFormArea">
<div class="auth-prompt" id="authPrompt">
<p>Sign in to leave a comment</p>
<div class="auth-buttons">
<button class="btn btn-auth btn-google" id="loginGoogle">
<svg viewBox="0 0 24 24" width="18" height="18"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
Sign in with Google
</button>
<button class="btn btn-auth btn-facebook" id="loginFacebook">
<svg viewBox="0 0 24 24" fill="#fff" width="18" height="18"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
Sign in with Facebook
</button>
<button class="btn btn-auth btn-twitter" id="loginTwitter">
<svg viewBox="0 0 24 24" fill="#fff" width="18" height="18"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
Sign in with X
</button>
</div>
</div>
<div class="comment-form hidden" id="commentForm">
<div class="comment-user" id="commentUser">
<img src="" alt="" class="user-avatar" id="userAvatar" />
<span class="user-name" id="userName"></span>
<button class="btn-signout" id="logoutBtn">Sign Out</button>
</div>
<textarea id="commentText" placeholder="Write your comment..." rows="3" maxlength="500"></textarea>
<div class="comment-form-actions">
<span class="char-count" id="charCount">0/500</span>
<button class="btn btn-primary" id="postCommentBtn">Post Comment</button>
</div>
</div>
</div>
<div class="comments-list" id="commentsList">
<div class="empty-state" id="commentsEmpty">
<p>No comments yet. Be the first to share your thoughts!</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="site-footer">
<div class="footer-inner">
<div class="footer-left">
<img src="/images/whs-logo.svg" alt="Wesley High School" class="footer-logo" />
</div>
<div class="footer-center">
<h3>Sign up for updates from Wesley High School</h3>
<form class="newsletter-form" id="newsletterForm">
<input type="email" placeholder="Enter your email address" id="newsletterEmail" required />
<button type="submit" class="btn btn-primary">Join</button>
</form>
<p class="newsletter-note">By joining, I agree to receive updates from Wesley High School.</p>
</div>
<div class="footer-right">
<div class="social-icons">
<a href="#" aria-label="Facebook" class="social-icon"><svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg></a>
<a href="#" aria-label="Twitter" class="social-icon"><svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
<a href="#" aria-label="Instagram" class="social-icon"><svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>Privacy Policy &nbsp;|&nbsp; Terms and Conditions</p>
<p>Copyright &copy; 2025 Wesley High School. All rights reserved.</p>
</div>
</footer>
<!-- Login Modal (for showing auth errors) -->
<div class="modal-overlay hidden" id="modalOverlay">
<div class="modal" id="modal">
<button class="modal-close" id="modalClose">&times;</button>
<div class="modal-content" id="modalContent"></div>
</div>
</div>
</body>
</html>