337 lines
20 KiB
HTML
337 lines
20 KiB
HTML
<!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" />
|
|
<link rel="stylesheet" href="/src/style.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Top Header Bar -->
|
|
<header class="top-bar">
|
|
<div class="top-bar-inner">
|
|
<div class="top-bar-left">
|
|
<img src="/images/logo-white.png" alt="Wesley High School" class="top-bar-logo" />
|
|
</div>
|
|
<div class="top-bar-right">
|
|
<div class="social-icons">
|
|
<a href="https://www.facebook.com/WesleyHighSchoolDominica" target="_blank" rel="noopener" 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>
|
|
<button class="btn btn-donate-header open-donation-modal">Donate</button>
|
|
</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-slide-bg">
|
|
<img src="/images/image-1.jpeg" alt="" />
|
|
</div>
|
|
<div class="carousel-overlay"></div>
|
|
<div class="placeholder-content">
|
|
<h2>Wesley High School</h2>
|
|
<p>100th Anniversary</p>
|
|
<p class="year-range">1926 - 2026</p>
|
|
<p>Celebrating a Century of Excellence</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-slide">
|
|
<div class="carousel-slide-bg">
|
|
<img src="/images/image-9.jpeg" alt="" />
|
|
</div>
|
|
<div class="carousel-overlay"></div>
|
|
<div class="placeholder-content">
|
|
<h2>Support Our Legacy</h2>
|
|
<p>Help us continue building</p>
|
|
<p>the next 100 years</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-slide">
|
|
<div class="carousel-slide-bg">
|
|
<img src="/images/image-6.jpeg" alt="" />
|
|
</div>
|
|
<div class="carousel-overlay"></div>
|
|
<div class="placeholder-content">
|
|
<h2>Class Challenge</h2>
|
|
<p>Click below to make</p>
|
|
<p>your gift today!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-btn carousel-prev" id="carouselPrev" aria-label="Previous slide">❮</button>
|
|
<button class="carousel-btn carousel-next" id="carouselNext" aria-label="Next slide">❯</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>
|
|
<button class="btn btn-primary btn-large open-donation-modal">Make a Donation</button>
|
|
<button class="btn btn-outline btn-large" id="becomeFundraiserBtn">Become a Fundraiser</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Photo Filmstrip -->
|
|
<section class="filmstrip-section">
|
|
<h2 class="filmstrip-title">Through the Years</h2>
|
|
<div class="filmstrip-track">
|
|
<div class="filmstrip-scroll">
|
|
<div class="filmstrip-frame"><img src="/images/image-1.jpeg" alt="Historic school gathering" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-11.jpeg" alt="Class photo — students in uniform" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-4.jpeg" alt="Students outside Wesley High School" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-9.jpeg" alt="The original school building" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-6.jpeg" alt="Students at a church celebration" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-3.jpeg" alt="Early faculty and students" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-8.jpeg" alt="The modern school building" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-7.jpeg" alt="School assembly — panoramic view" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-2.jpeg" alt="Vintage student photograph" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-5.jpeg" alt="Alumni group photo" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-10.jpeg" alt="Early class photograph" /></div>
|
|
</div>
|
|
<!-- Duplicate for seamless infinite loop -->
|
|
<div class="filmstrip-scroll">
|
|
<div class="filmstrip-frame"><img src="/images/image-1.jpeg" alt="" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-11.jpeg" alt="" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-4.jpeg" alt="" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-9.jpeg" alt="" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-6.jpeg" alt="" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-3.jpeg" alt="" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-8.jpeg" alt="" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-7.jpeg" alt="" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-2.jpeg" alt="" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-5.jpeg" alt="" /></div>
|
|
<div class="filmstrip-frame"><img src="/images/image-10.jpeg" alt="" /></div>
|
|
</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 1926. 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, and a science lab for our students.</p>
|
|
<div class="about-cta">
|
|
<button class="btn btn-primary open-donation-modal">Donate Now</button>
|
|
</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>
|
|
<button class="btn btn-primary open-donation-modal">Make a Donation</button>
|
|
</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>
|
|
</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/logo-white.png" 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="https://www.facebook.com/WesleyHighSchoolDominica" target="_blank" rel="noopener" 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 | Terms and Conditions</p>
|
|
<p>Copyright © 2026 Wesley High School. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Donation Modal -->
|
|
<div class="modal-overlay hidden" id="donationModalOverlay">
|
|
<div class="modal" id="donationModal">
|
|
<button class="modal-close" id="donationModalClose">×</button>
|
|
<div class="modal-content">
|
|
<h2>Make a Donation</h2>
|
|
<p style="margin-top:8px;color:#4b5563">Your information will appear on our donors wall after payment.</p>
|
|
<form id="donationForm" class="donation-form">
|
|
<div class="form-group">
|
|
<label for="donorName">Name <span class="required">*</span></label>
|
|
<input type="text" id="donorName" placeholder="Your full name" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="donorAmount">Amount (XCD) <span class="required">*</span></label>
|
|
<input type="number" id="donorAmount" placeholder="e.g. 100" min="1" step="0.01" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="donorClassYear">Class Year <span class="optional">(optional)</span></label>
|
|
<input type="text" id="donorClassYear" placeholder="e.g. 1995" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="donorMessage">Message <span class="optional">(optional)</span></label>
|
|
<textarea id="donorMessage" placeholder="Leave a message of support..." rows="3" maxlength="255"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="donorAnonymous" />
|
|
Make my donation anonymous
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-large" id="donationSubmitBtn">Proceed to Payment</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Login Modal (for showing auth errors) -->
|
|
<div class="modal-overlay hidden" id="modalOverlay">
|
|
<div class="modal" id="modal">
|
|
<button class="modal-close" id="modalClose">×</button>
|
|
<div class="modal-content" id="modalContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|