358 lines
21 KiB
HTML
358 lines
21 KiB
HTML
SafeValue must use [property]=binding:
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Leaderboard</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">EcoPact</div><ul class="nav-1-nav-links"><li><a href="home.html">Your Eco-Journey</a></li><li><a href="about.html">About EcoPact</a></li><li><a href="contact.html">Contact & Support</a></li><li><a href="services.html">Features & Benefits</a></li><li><a href="faq.html">Help & FAQs</a></li><li class="nav-1-dropdown"><a href="#">Explore More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join for Free</button><button class="nav-1-btn nav-1-solid">Log Your Impact</button></div></nav></div>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Top Contributors List</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<section class="top-contributors-section">
|
|
<div class="container">
|
|
<h2>Our Top Eco-Heroes</h2>
|
|
<p>Celebrate the incredible individuals and companies leading the charge in environmental sustainability. Their collective actions are making a significant difference!</p>
|
|
|
|
<div class="contributors-grid">
|
|
|
|
<article class="contributor-card">
|
|
<div class="rank gold">1</div>
|
|
<div class="avatar" aria-label="Avatar for Alice Green">A</div>
|
|
<h3>Alice Green</h3>
|
|
<div class="badges">
|
|
<span class="badge-icon" title="Tree Planter Badge">🌱</span>
|
|
<span class="badge-icon" title="Recycling Champion Badge">♻️</span>
|
|
<span class="badge-icon" title="Water Saver Badge">💧</span>
|
|
</div>
|
|
<p class="impact-points">Total Impact Points: <strong>12,500</strong></p>
|
|
<small>Last Activity: Recycled 50kg plastics</small>
|
|
</article>
|
|
|
|
<article class="contributor-card">
|
|
<div class="rank silver">2</div>
|
|
<div class="avatar" aria-label="Avatar for Bob Eco">B</div>
|
|
<h3>Bob Eco</h3>
|
|
<div class="badges">
|
|
<span class="badge-icon" title="Energy Saver Badge">💡</span>
|
|
<span class="badge-icon" title="Composter Badge">🍂</span>
|
|
<span class="badge-icon" title="Community Organizer Badge">🤝</span>
|
|
</div>
|
|
<p class="impact-points">Total Impact Points: <strong>10,200</strong></p>
|
|
<small>Last Activity: Hosted a local cleanup</small>
|
|
</article>
|
|
|
|
<article class="contributor-card">
|
|
<div class="rank bronze">3</div>
|
|
<div class="avatar" aria-label="Avatar for EcoCorp Solutions">E</div>
|
|
<h3>EcoCorp Solutions</h3>
|
|
<div class="badges">
|
|
<span class="badge-icon" title="Corporate Sustainability Badge">🏢</span>
|
|
<span class="badge-icon" title="Large Scale Recycling Badge">♻️</span>
|
|
<span class="badge-icon" title="Carbon Neutral Badge">🌬️</span>
|
|
</div>
|
|
<p class="impact-points">Total Impact Points: <strong>9,800</strong></p>
|
|
<small>Last Activity: Implemented new solar panels</small>
|
|
</article>
|
|
|
|
<article class="contributor-card">
|
|
<div class="rank">4</div>
|
|
<div class="avatar" aria-label="Avatar for Carol Planet">C</div>
|
|
<h3>Carol Planet</h3>
|
|
<div class="badges">
|
|
<span class="badge-icon" title="Public Transport User Badge">🚌</span>
|
|
<span class="badge-icon" title="Plant-Based Diet Badge">🥕</span>
|
|
</div>
|
|
<p class="impact-points">Total Impact Points: <strong>8,100</strong></p>
|
|
<small>Last Activity: Logged car-free commute</small>
|
|
</article>
|
|
|
|
<article class="contributor-card">
|
|
<div class="rank">5</div>
|
|
<div class="avatar" aria-label="Avatar for David Bloom">D</div>
|
|
<h3>David Bloom</h3>
|
|
<div class="badges">
|
|
<span class="badge-icon" title="Garden Enthusiast Badge">🌷</span>
|
|
<span class="badge-icon" title="Water Conservation Badge">💦</span>
|
|
</div>
|
|
<p class="impact-points">Total Impact Points: <strong>7,900</strong></p>
|
|
<small>Last Activity: Started composting bin</small>
|
|
</article>
|
|
|
|
<article class="contributor-card">
|
|
<div class="rank">6</div>
|
|
<div class="avatar" aria-label="Avatar for Flora Nature">F</div>
|
|
<h3>Flora Nature</h3>
|
|
<div class="badges">
|
|
<span class="badge-icon" title="Upcycling Innovator Badge">🎨</span>
|
|
<span class="badge-icon" title="Reusable Products User Badge">🛍️</span>
|
|
</div>
|
|
<p class="impact-points">Total Impact Points: <strong>7,500</strong></p>
|
|
<small>Last Activity: Shared upcycled craft</small>
|
|
</article>
|
|
|
|
</div>
|
|
|
|
<div class="call-to-action">
|
|
<h3>Want to see your name on the leaderboard?</h3>
|
|
<p>Start logging your eco-friendly activities today and earn badges for your contributions!</p>
|
|
<a href="#register" class="btn">Join the Movement</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Leaderboard Filters</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<section class="leaderboard-filters-section" aria-labelledby="leaderboard-filters-title">
|
|
<h2 id="leaderboard-filters-title">Filter Leaderboard</h2>
|
|
|
|
<form class="filter-controls" aria-label="Leaderboard filter options">
|
|
<div class="filter-group">
|
|
<label for="filter-scope">Scope</label>
|
|
<select id="filter-scope" name="scope">
|
|
<option value="global">Global</option>
|
|
<option value="company">My Company</option>
|
|
<option value="department">My Department</option>
|
|
<option value="team">My Team</option>
|
|
<option value="friends">Friends</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="filter-timeframe">Timeframe</label>
|
|
<select id="filter-timeframe" name="timeframe">
|
|
<option value="all-time">All Time</option>
|
|
<option value="this-month">This Month</option>
|
|
<option value="this-quarter">This Quarter</option>
|
|
<option value="this-year">This Year</option>
|
|
<option value="last-month">Last Month</option>
|
|
<option value="custom">Custom Range</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="filter-startDate">Start Date</label>
|
|
<input type="date" id="filter-startDate" name="startDate" disabled="">
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="filter-endDate">End Date</label>
|
|
<input type="date" id="filter-endDate" name="endDate" disabled="">
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="filter-category">Activity Category</label>
|
|
<select id="filter-category" name="category">
|
|
<option value="all">All Categories</option>
|
|
<option value="recycling">Recycling</option>
|
|
<option value="tree-planting">Tree Planting</option>
|
|
<option value="energy-saving">Energy Saving</option>
|
|
<option value="water-conservation">Water Conservation</option>
|
|
<option value="community-cleanups">Community Cleanups</option>
|
|
<option value="sustainable-transport">Sustainable Transport</option>
|
|
<option value="eco-education">Eco-Education</option>
|
|
<option value="waste-reduction">Waste Reduction</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="filter-impact-type">Impact Type</label>
|
|
<select id="filter-impact-type" name="impactType">
|
|
<option value="total-points">Total Points</option>
|
|
<option value="activities-logged">Activities Logged</option>
|
|
<option value="badges-earned">Badges Earned</option>
|
|
<option value="trees-planted">Trees Planted</option>
|
|
<option value="co2-saved">CO2 Saved (Est.)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group checkbox-group" role="group" aria-labelledby="activity-type-heading">
|
|
<span id="activity-type-heading" style="display: none;">Activity Type (Filter by specific activity types)</span>
|
|
<label>Activity Type</label>
|
|
<label for="checkbox-recycling">
|
|
<input type="checkbox" id="checkbox-recycling" name="activityType" value="recycling"> Recycling
|
|
</label>
|
|
<label for="checkbox-treeplanting">
|
|
<input type="checkbox" id="checkbox-treeplanting" name="activityType" value="tree-planting"> Tree Planting
|
|
</label>
|
|
<label for="checkbox-energy">
|
|
<input type="checkbox" id="checkbox-energy" name="activityType" value="energy-saving"> Energy Saving
|
|
</label>
|
|
<label for="checkbox-water">
|
|
<input type="checkbox" id="checkbox-water" name="activityType" value="water-conservation"> Water Conservation
|
|
</label>
|
|
<label for="checkbox-other">
|
|
<input type="checkbox" id="checkbox-other" name="activityType" value="other"> Other
|
|
</label>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="filter-location">Location (City/Region)</label>
|
|
<input type="text" id="filter-location" name="location" placeholder="e.g., New York, Earth">
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<div class="filter-actions">
|
|
<button type="submit" class="apply-btn">Apply Filters</button>
|
|
<button type="reset" class="reset-btn">Reset Filters</button>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
// JavaScript for enabling/disabling date inputs based on Timeframe selection
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const timeframeSelect = document.getElementById('filter-timeframe');
|
|
const startDateInput = document.getElementById('filter-startDate');
|
|
const endDateInput = document.getElementById('filter-endDate');
|
|
|
|
function toggleDateInputs() {
|
|
const isCustom = timeframeSelect.value === 'custom';
|
|
startDateInput.disabled = !isCustom;
|
|
endDateInput.disabled = !isCustom;
|
|
if (!isCustom) {
|
|
startDateInput.value = '';
|
|
endDateInput.value = '';
|
|
}
|
|
}
|
|
|
|
// Initial call to set state correctly on page load
|
|
toggleDateInputs();
|
|
|
|
// Add event listener for changes
|
|
timeframeSelect.addEventListener('change', toggleDateInputs);
|
|
|
|
// Reset button functionality
|
|
const resetButton = document.querySelector('.reset-btn');
|
|
resetButton.addEventListener('click', function() {
|
|
document.querySelector('.filter-controls').reset();
|
|
toggleDateInputs(); // Ensure date inputs are disabled after reset
|
|
});
|
|
});
|
|
</script>
|
|
<section id="ranking-criteria" class="py-16 bg-gray-50">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="text-4xl font-bold text-center mb-12">How We Rank Eco-Champions</h2>
|
|
|
|
<p class="text-lg text-center max-w-3xl mx-auto mb-16 text-gray-700">
|
|
Our leaderboards are designed to celebrate consistent effort and tangible environmental impact. Here's how we measure success and determine your rank among individuals and organizations.
|
|
</p>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
|
|
<div class="bg-white p-8 rounded-lg shadow-md">
|
|
<h3 class="text-2xl font-semibold mb-4 text-green-700">1. Activity Impact Score</h3>
|
|
<p class="mb-4 text-gray-600">
|
|
Points are awarded based on the environmental significance of each logged activity. Higher impact actions contribute more to your overall score.
|
|
</p>
|
|
<ul class="list-disc pl-5 text-gray-600 space-y-2">
|
|
<li>Placeholder: Weighting for specific activity types (e.g., Tree Planting vs. Recycling).</li>
|
|
<li>Placeholder: Bonus for quantifiable impact (e.g., kg recycled, trees planted).</li>
|
|
<li>Placeholder: Regular review and update of activity values.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow-md">
|
|
<h3 class="text-2xl font-semibold mb-4 text-green-700">2. Consistency & Frequency</h3>
|
|
<p class="mb-4 text-gray-600">
|
|
Sustained effort is key. Users who consistently log activities over time will see their rank improve.
|
|
</p>
|
|
<ul class="list-disc pl-5 text-gray-600 space-y-2">
|
|
<li>Placeholder: Daily/Weekly logging streaks.</li>
|
|
<li>Placeholder: Minimum number of activities per period.</li>
|
|
<li>Placeholder: Recency of last logged activity.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow-md">
|
|
<h3 class="text-2xl font-semibold mb-4 text-green-700">3. Badge Achievement</h3>
|
|
<p class="mb-4 text-gray-600">
|
|
Earning various badges demonstrates a breadth of eco-friendly engagement and contributes to your standing.
|
|
</p>
|
|
<ul class="list-disc pl-5 text-gray-600 space-y-2">
|
|
<li>Placeholder: Points awarded for each badge level achieved.</li>
|
|
<li>Placeholder: Special bonuses for completing badge sets.</li>
|
|
<li>Placeholder: Encouraging diverse activity types.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow-md">
|
|
<h3 class="text-2xl font-semibold mb-4 text-green-700">4. Community Engagement (Optional Placeholder)</h3>
|
|
<p class="mb-4 text-gray-600">
|
|
(This section could be used if community interaction like inviting friends, sharing impact, or participating in challenges also contributes to ranking).
|
|
</p>
|
|
<ul class="list-disc pl-5 text-gray-600 space-y-2">
|
|
<li>Placeholder: Referring new users.</li>
|
|
<li>Placeholder: Participating in team challenges.</li>
|
|
<li>Placeholder: Sharing personal impact on social media.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-16 bg-white p-8 rounded-lg shadow-md max-w-4xl mx-auto">
|
|
<h3 class="text-2xl font-semibold mb-4 text-green-700">Important Notes & Transparency</h3>
|
|
<ul class="list-disc pl-5 text-gray-600 space-y-2">
|
|
<li>Placeholder: Ranking calculations are updated hourly/daily.</li>
|
|
<li>Placeholder: Criteria may be refined over time for fairness and effectiveness.</li>
|
|
<li>Placeholder: Anti-fraud measures are in place to ensure data integrity.</li>
|
|
<li>Placeholder: Separate leaderboards exist for individuals and companies.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pricing-3-wrapper"><section class="pricing-3-section"><p class="pricing-3-tagline">Amplify Your Impact</p><h2 class="pricing-3-heading">Collective Catalyst Plan</h2><p class="pricing-3-subheading">Empower your team or organization to track, visualize, and celebrate your combined eco-friendly contributions with advanced tools and reporting.</p><div class="pricing-3-grid"><div class="pricing-3-card"><i class="fas fa-users pricing-3-icon"></i><h3 class="pricing-3-plan-title">EcoVerse Team Pro</h3><p class="pricing-3-plan-subtitle">Seamlessly connect your members. Each gains full access to track and log green activities.</p><p class="pricing-3-price">$12/user/month (min. 10 users)</p><hr class="pricing-3-divider"><p class="pricing-3-includes">Includes:</p><ul class="pricing-3-feature-list"><li>✓ Everything in Pro Individual +</li><li>✓ Centralized team dashboard & analytics</li><li>✓ Customizable team challenges & badges</li><li>✓ Organizational impact reports & insights</li></ul><button class="pricing-3-cta">Request a Custom Demo</button><p class="pricing-3-footer-note">Designed for businesses, NGOs, and educational bodies eager to foster a culture of sustainability and track their collective environmental footprint.</p></div></div></section></div>
|
|
<section class="my-ranking-highlight-section">
|
|
<h2 class="section-title">My Ranking Highlight</h2>
|
|
<div class="ranking-highlight-card">
|
|
<div class="ranking-summary">
|
|
<div class="metric-block">
|
|
<span class="metric-label">Overall Rank</span>
|
|
<span class="metric-value">#123</span>
|
|
</div>
|
|
<div class="metric-block">
|
|
<span class="metric-label">Points Earned</span>
|
|
<span class="metric-value">5,432</span>
|
|
</div>
|
|
<div class="metric-block">
|
|
<span class="metric-label">Collective Impact Contribution</span>
|
|
<span class="metric-value">~2.5 kg CO2 Offset</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="top-achievement">
|
|
<h3 class="achievement-title">Your Top Badge</h3>
|
|
<div class="badge-display">
|
|
<img src="https://via.placeholder.com/80/007bff/ffffff?text=Badge" alt="Eco Champion Badge" width="80" height="80" class="badge-icon">
|
|
<div class="badge-details">
|
|
<p class="badge-name">Eco Champion</p>
|
|
<p class="badge-level">Level III</p>
|
|
</div>
|
|
</div>
|
|
<p class="achievement-description">Achieved for logging 50+ tree planting activities.</p>
|
|
</div>
|
|
|
|
<div class="ranking-message">
|
|
<p>You are currently in the top <strong>5%</strong> of users globally this month!</p>
|
|
<p>Keep up the fantastic work!</p>
|
|
</div>
|
|
|
|
<div class="ranking-actions">
|
|
<a href="#leaderboard" class="button-link">View Full Leaderboard</a>
|
|
<a href="#my-badges" class="button-link">Explore My Badges</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">EcoImpact</h3><p><strong>Address:</strong><br><br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br><br><span>1800 123 4567</span><br><br><a href="mailto:info@relume.io">hello@ecoimpact.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">About Us</a></li><li><a href="#">How It Works</a></li><li><a href="#">Features</a></li><li><a href="#">Badges & Rewards</a></li><li><a href="#">Join Today</a></li></ul><ul><li><a href="#">Community</a></li><li><a href="#">Blog</a></li><li><a href="#">Support</a></li><li><a href="#">Partnerships</a></li><li><a href="#">Contact Us</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 EcoImpact. All rights reserved.</p><ul class="footer-2-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> (see https://g.co/ng/security#xss) |