414 lines
28 KiB
HTML
414 lines
28 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>My Badges</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>Earned Badges Gallery</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
<section id="earned-badges" class="badges-gallery-section">
|
||
|
|
<header>
|
||
|
|
<h2>Your Earned Badges</h2>
|
||
|
|
<p class="section-description">Celebrate your commitment to a sustainable future! Each badge represents a significant step you've taken to make a positive impact.</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="badges-grid">
|
||
|
|
<article class="badge-card">
|
||
|
|
<div class="badge-icon" aria-hidden="true">
|
||
|
|
<span>♻️</span>
|
||
|
|
<!-- Alternative: <img src="placeholder-recycle-badge.png" alt="Recycling Champion Badge Icon"> -->
|
||
|
|
</div>
|
||
|
|
<h3>Recycling Champion</h3>
|
||
|
|
<p>Awarded for consistent and significant contributions to recycling initiatives.</p>
|
||
|
|
<div class="badge-progress">
|
||
|
|
<span>Achieved:</span> January 15, 2023
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card">
|
||
|
|
<div class="badge-icon" aria-hidden="true">
|
||
|
|
<span>🌳</span>
|
||
|
|
<!-- Alternative: <img src="placeholder-tree-planting-badge.png" alt="Forest Planter Badge Icon"> -->
|
||
|
|
</div>
|
||
|
|
<h3>Forest Planter</h3>
|
||
|
|
<p>Recognizes participation in tree planting events and afforestation efforts.</p>
|
||
|
|
<div class="badge-progress">
|
||
|
|
<span>Achieved:</span> March 22, 2023
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card">
|
||
|
|
<div class="badge-icon" aria-hidden="true">
|
||
|
|
<span>💧</span>
|
||
|
|
<!-- Alternative: <img src="placeholder-water-saver-badge.png" alt="Water Steward Badge Icon"> -->
|
||
|
|
</div>
|
||
|
|
<h3>Water Steward</h3>
|
||
|
|
<p>For diligently conserving water through daily habits and reporting leaks.</p>
|
||
|
|
<div class="badge-progress">
|
||
|
|
<span>Achieved:</span> June 01, 2023
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card">
|
||
|
|
<div class="badge-icon" aria-hidden="true">
|
||
|
|
<span>⚡</span>
|
||
|
|
<!-- Alternative: <img src="placeholder-energy-saver-badge.png" alt="Energy Saver Badge Icon"> -->
|
||
|
|
</div>
|
||
|
|
<h3>Energy Saver</h3>
|
||
|
|
<p>Awarded for reducing energy consumption and promoting energy-efficient practices.</p>
|
||
|
|
<div class="badge-progress">
|
||
|
|
<span>Achieved:</span> August 10, 2023
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card">
|
||
|
|
<div class="badge-icon" aria-hidden="true">
|
||
|
|
<span>🚶♀️</span>
|
||
|
|
<!-- Alternative: <img src="placeholder-commute-badge.png" alt="Green Commuter Badge Icon"> -->
|
||
|
|
</div>
|
||
|
|
<h3>Green Commuter</h3>
|
||
|
|
<p>For choosing eco-friendly transportation methods like cycling or walking.</p>
|
||
|
|
<div class="badge-progress">
|
||
|
|
<span>Achieved:</span> September 05, 2023
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card">
|
||
|
|
<div class="badge-icon" aria-hidden="true">
|
||
|
|
<span>🍎</span>
|
||
|
|
<!-- Alternative: <img src="placeholder-compost-badge.png" alt="Compost Master Badge Icon"> -->
|
||
|
|
</div>
|
||
|
|
<h3>Compost Master</h3>
|
||
|
|
<p>For effectively managing organic waste through composting initiatives.</p>
|
||
|
|
<div class="badge-progress">
|
||
|
|
<span>Achieved:</span> October 18, 2023
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card">
|
||
|
|
<div class="badge-icon" aria-hidden="true">
|
||
|
|
<span>🌱</span>
|
||
|
|
<!-- Alternative: <img src="placeholder-garden-badge.png" alt="Urban Gardener Badge Icon"> -->
|
||
|
|
</div>
|
||
|
|
<h3>Urban Gardener</h3>
|
||
|
|
<p>Recognizes efforts in maintaining and promoting urban green spaces.</p>
|
||
|
|
<div class="badge-progress">
|
||
|
|
<span>Achieved:</span> November 29, 2023
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card">
|
||
|
|
<div class="badge-icon" aria-hidden="true">
|
||
|
|
<span>💡</span>
|
||
|
|
<!-- Alternative: <img src="placeholder-innovator-badge.png" alt="Eco Innovator Badge Icon"> -->
|
||
|
|
</div>
|
||
|
|
<h3>Eco Innovator</h3>
|
||
|
|
<p>For suggesting and implementing creative solutions for environmental challenges.</p>
|
||
|
|
<div class="badge-progress">
|
||
|
|
<span>Achieved:</span> December 12, 2023
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer class="call-to-action">
|
||
|
|
<p>Ready to earn more badges and expand your impact?</p>
|
||
|
|
<a href="#log-activity" class="btn">Log New Activity</a>
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
<section id="badge-details-section" style="padding: 2rem; max-width: 960px; margin: 2rem auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #ffffff; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); overflow: hidden;">
|
||
|
|
<div style="display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.8rem;">
|
||
|
|
<h2 style="font-size: 2.8rem; color: #2e7d32; margin-bottom: 0.5rem; font-weight: 700;">Badge Details</h2>
|
||
|
|
<p style="font-size: 1.1rem; color: #666; margin-top: 0;">Explore the criteria and impact of this prestigious badge.</p>
|
||
|
|
|
||
|
|
<div class="badge-header" style="display: flex; flex-direction: column; align-items: center; gap: 1rem; background-color: #e8f5e9; padding: 1.5rem 2rem; border-radius: 10px; width: calc(100% - 4rem);">
|
||
|
|
<img src="https://via.placeholder.com/180/8bc34a/ffffff?text=Eco+Hero" alt="Badge Icon - Eco Hero" style="width: 180px; height: 180px; border-radius: 50%; border: 6px solid #a5d6a7; box-shadow: 0 4px 10px rgba(0,0,0,0.15);">
|
||
|
|
<h3 style="font-size: 2.2rem; color: #388e3c; margin: 0; font-weight: 600;">The Eco Hero Badge</h3>
|
||
|
|
<p style="font-style: italic; color: #757575; margin: 0; font-size: 1.1rem;">Awarded for significant, consistent contributions to ecological well-being.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="badge-description" style="width: 100%; text-align: left;">
|
||
|
|
<h4 style="font-size: 1.6rem; color: #424242; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.8rem; margin-bottom: 1.2rem; font-weight: 600;">About This Badge</h4>
|
||
|
|
<p style="line-height: 1.7; color: #555; font-size: 1rem;">This badge signifies a deep and ongoing commitment to environmental stewardship. It's designed for users who consistently go above and beyond in logging eco-friendly activities across multiple categories, inspiring others and making a tangible difference.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="badge-criteria" style="width: 100%; text-align: left;">
|
||
|
|
<h4 style="font-size: 1.6rem; color: #424242; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.8rem; margin-bottom: 1.2rem; font-weight: 600;">How to Earn It</h4>
|
||
|
|
<ul style="list-style-type: none; padding: 0; margin: 0;">
|
||
|
|
<li style="margin-bottom: 1rem; padding-left: 30px; position: relative; color: #555; font-size: 1rem;">
|
||
|
|
<span style="position: absolute; left: 0; color: #66bb6a; font-weight: bold; font-size: 1.3rem;">✓</span> Log 75+ recycling activities.
|
||
|
|
</li>
|
||
|
|
<li style="margin-bottom: 1rem; padding-left: 30px; position: relative; color: #555; font-size: 1rem;">
|
||
|
|
<span style="position: absolute; left: 0; color: #66bb6a; font-weight: bold; font-size: 1.3rem;">✓</span> Participate in 15+ tree planting or re-forestation initiatives.
|
||
|
|
</li>
|
||
|
|
<li style="margin-bottom: 1rem; padding-left: 30px; position: relative; color: #555; font-size: 1rem;">
|
||
|
|
<span style="position: absolute; left: 0; color: #66bb6a; font-weight: bold; font-size: 1.3rem;">✓</span> Complete 30+ energy conservation activities (e.g., reduce electricity, water).
|
||
|
|
</li>
|
||
|
|
<li style="margin-bottom: 1rem; padding-left: 30px; position: relative; color: #666; font-size: 1rem;">
|
||
|
|
<span style="position: absolute; left: 0; color: #bdbdbd; font-weight: bold; font-size: 1.3rem;">○</span> Lead or organize 5 community clean-up events (Current: 3/5).
|
||
|
|
</li>
|
||
|
|
<li style="margin-bottom: 0; padding-left: 30px; position: relative; color: #666; font-size: 1rem;">
|
||
|
|
<span style="position: absolute; left: 0; color: #bdbdbd; font-weight: bold; font-size: 1.3rem;">○</span> Achieve "Carbon Footprint Reducer" badge (Not yet achieved).
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="badge-progress-earned" style="width: 100%; text-align: left;">
|
||
|
|
<h4 style="font-size: 1.6rem; color: #424242; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.8rem; margin-bottom: 1.2rem; font-weight: 600;">Your Progress</h4>
|
||
|
|
<p style="color: #555; font-size: 1rem; margin-bottom: 0.5rem;"><strong>Status:</strong> <span style="color: #ef6c00; font-weight: bold;">In Progress</span></p>
|
||
|
|
<p style="color: #555; font-size: 1rem; margin-bottom: 0.8rem;"><strong>Overall Completion:</strong> 65%</p>
|
||
|
|
<div style="background-color: #e0e0e0; border-radius: 8px; height: 20px; overflow: hidden; margin-bottom: 0.8rem;">
|
||
|
|
<div style="width: 65%; background-color: #81c784; height: 100%; border-radius: 8px; transition: width 0.5s ease-in-out;"></div>
|
||
|
|
</div>
|
||
|
|
<p style="color: #555; font-size: 1rem;"><strong>Date Earned:</strong> Not yet earned. Keep up the great work!</p>
|
||
|
|
<!-- Example if earned: <p style="color: #555; font-size: 1rem;"><strong>Date Earned:</strong> November 15, 2023</p> -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="badge-impact" style="width: 100%; text-align: left;">
|
||
|
|
<h4 style="font-size: 1.6rem; color: #424242; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.8rem; margin-bottom: 1.2rem; font-weight: 600;">Collective Impact of Eco Heroes</h4>
|
||
|
|
<p style="color: #555; font-size: 1rem; margin-bottom: 0.8rem;">Users who have earned this badge have collectively achieved remarkable impact:</p>
|
||
|
|
<ul style="list-style-type: none; padding: 0; margin: 0;">
|
||
|
|
<li style="margin-bottom: 0.8rem; padding-left: 25px; position: relative; color: #555; font-size: 1rem;">
|
||
|
|
<span style="position: absolute; left: 0; color: #4CAF50; font-weight: bold; font-size: 1.1rem;">•</span> Diverted over 150,000 kg of waste from landfills.
|
||
|
|
</li>
|
||
|
|
<li style="margin-bottom: 0.8rem; padding-left: 25px; position: relative; color: #555; font-size: 1rem;">
|
||
|
|
<span style="position: absolute; left: 0; color: #4CAF50; font-weight: bold; font-size: 1.1rem;">•</span> Contributed to the planting of 25,000+ trees.
|
||
|
|
</li>
|
||
|
|
<li style="margin-bottom: 0; padding-left: 25px; position: relative; color: #555; font-size: 1rem;">
|
||
|
|
<span style="position: absolute; left: 0; color: #4CAF50; font-weight: bold; font-size: 1.1rem;">•</span> Saved an estimated 75,000 kWh of energy.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="actions" style="margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; width: 100%;">
|
||
|
|
<a href="#" style="display: inline-block; padding: 14px 30px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; transition: background-color 0.3s ease, transform 0.2s ease; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);">View My Activities</a>
|
||
|
|
<button style="padding: 14px 30px; background-color: #607d8b; color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 8px rgba(96, 125, 139, 0.3);">Share This Badge</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Upcoming Badges Preview</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
<section class="badges-preview-section" aria-labelledby="upcomingBadgesHeading">
|
||
|
|
<header>
|
||
|
|
<h2 id="upcomingBadgesHeading">Upcoming Badges Preview</h2>
|
||
|
|
<p class="section-description">
|
||
|
|
Discover the next achievements waiting for you! Track your progress towards these eco-friendly milestones and see how close you are to earning new recognition for your positive impact.
|
||
|
|
</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="badges-grid">
|
||
|
|
<article class="badge-card">
|
||
|
|
<div class="badge-icon-container" aria-hidden="true">🌳</div>
|
||
|
|
<h3>Forest Guardian</h3>
|
||
|
|
<p class="badge-description">Log 10 tree planting activities to earn this badge. Help reforest our planet!</p>
|
||
|
|
<div class="badge-progress-text">Progress: 5/10 activities</div>
|
||
|
|
<div class="badge-progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Progress towards Forest Guardian badge">
|
||
|
|
<div class="badge-progress-fill" style="width: 50%;"></div>
|
||
|
|
</div>
|
||
|
|
<p class="badge-threshold">Threshold: 10 Tree Planted</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card">
|
||
|
|
<div class="badge-icon-container" aria-hidden="true">♻️</div>
|
||
|
|
<h3>Recycling Champion</h3>
|
||
|
|
<p class="badge-description">Reach 50kg of recycled materials logged. Every gram counts!</p>
|
||
|
|
<div class="badge-progress-text">Progress: 25kg/50kg</div>
|
||
|
|
<div class="badge-progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Progress towards Recycling Champion badge">
|
||
|
|
<div class="badge-progress-fill" style="width: 50%;"></div>
|
||
|
|
</div>
|
||
|
|
<p class="badge-threshold">Threshold: 50kg Recycled</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card locked">
|
||
|
|
<div class="badge-icon-container" aria-hidden="true">💡</div>
|
||
|
|
<h3>Energy Saver</h3>
|
||
|
|
<p class="badge-description">Log 20 energy-saving actions (e.g., unplugging devices, using LED lights).</p>
|
||
|
|
<div class="badge-progress-text">Progress: 8/20 actions</div>
|
||
|
|
<div class="badge-progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" aria-label="Progress towards Energy Saver badge">
|
||
|
|
<div class="badge-progress-fill" style="width: 40%;"></div>
|
||
|
|
</div>
|
||
|
|
<p class="badge-threshold">Threshold: 20 Energy Actions</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card locked">
|
||
|
|
<div class="badge-icon-container" aria-hidden="true">💧</div>
|
||
|
|
<h3>Water Wise</h3>
|
||
|
|
<p class="badge-description">Record 15 water conservation activities (e.g., shorter showers, fixing leaks).</p>
|
||
|
|
<div class="badge-progress-text">Progress: 3/15 activities</div>
|
||
|
|
<div class="badge-progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" aria-label="Progress towards Water Wise badge">
|
||
|
|
<div class="badge-progress-fill" style="width: 20%;"></div>
|
||
|
|
</div>
|
||
|
|
<p class="badge-threshold">Threshold: 15 Water Actions</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card locked">
|
||
|
|
<div class="badge-icon-container" aria-hidden="true">🚴</div>
|
||
|
|
<h3>Green Commuter</h3>
|
||
|
|
<p class="badge-description">Log 100km of eco-friendly travel (biking, walking, public transport).</p>
|
||
|
|
<div class="badge-progress-text">Progress: 10km/100km</div>
|
||
|
|
<div class="badge-progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" aria-label="Progress towards Green Commuter badge">
|
||
|
|
<div class="badge-progress-fill" style="width: 10%;"></div>
|
||
|
|
</div>
|
||
|
|
<p class="badge-threshold">Threshold: 100km Green Travel</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card locked">
|
||
|
|
<div class="badge-icon-container" aria-hidden="true">🤝</div>
|
||
|
|
<h3>Community Impact</h3>
|
||
|
|
<p class="badge-description">Participate in 5 community cleanup events or eco-volunteering initiatives.</p>
|
||
|
|
<div class="badge-progress-text">Progress: 0/5 events</div>
|
||
|
|
<div class="badge-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Progress towards Community Impact badge">
|
||
|
|
<div class="badge-progress-fill" style="width: 0%;"></div>
|
||
|
|
</div>
|
||
|
|
<p class="badge-threshold">Threshold: 5 Community Events</p>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Badge Collection Summary</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
<section class="section-badge-summary" aria-labelledby="badgeSummaryHeading">
|
||
|
|
<h2 id="badgeSummaryHeading">Your Badge Collection Summary</h2>
|
||
|
|
|
||
|
|
<div class="badge-grid">
|
||
|
|
<article class="badge-card" aria-labelledby="recyclerBadgeTitle">
|
||
|
|
<div class="badge-card__icon" aria-hidden="true">♻️</div>
|
||
|
|
<h3 id="recyclerBadgeTitle" class="badge-card__title">Recycler Pro</h3>
|
||
|
|
<p class="badge-card__description">Awarded for consistent household recycling efforts.</p>
|
||
|
|
<span class="badge-card__count">x 5</span>
|
||
|
|
<div class="badge-card__progress-bar">
|
||
|
|
<div class="badge-card__progress-fill" style="width: 75%;"></div>
|
||
|
|
</div>
|
||
|
|
<small class="badge-card__status">75% to next level</small>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card" aria-labelledby="treePlanterBadgeTitle">
|
||
|
|
<div class="badge-card__icon" aria-hidden="true">🌳</div>
|
||
|
|
<h3 id="treePlanterBadgeTitle" class="badge-card__title">Forest Builder</h3>
|
||
|
|
<p class="badge-card__description">Earned for participating in tree planting initiatives.</p>
|
||
|
|
<span class="badge-card__count">x 2</span>
|
||
|
|
<div class="badge-card__progress-bar">
|
||
|
|
<div class="badge-card__progress-fill" style="width: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
<small class="badge-card__status">Level complete! New challenge awaits.</small>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card" aria-labelledby="waterSaverBadgeTitle">
|
||
|
|
<div class="badge-card__icon" aria-hidden="true">💧</div>
|
||
|
|
<h3 id="waterSaverBadgeTitle" class="badge-card__title">Water Steward</h3>
|
||
|
|
<p class="badge-card__description">Recognizes efforts in conserving water at home or work.</p>
|
||
|
|
<span class="badge-card__count">x 1</span>
|
||
|
|
<div class="badge-card__progress-bar">
|
||
|
|
<div class="badge-card__progress-fill" style="width: 20%;"></div>
|
||
|
|
</div>
|
||
|
|
<small class="badge-card__status">20% to next level</small>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card" aria-labelledby="energySaverBadgeTitle">
|
||
|
|
<div class="badge-card__icon" aria-hidden="true">⚡</div>
|
||
|
|
<h3 id="energySaverBadgeTitle" class="badge-card__title">Energy Guardian</h3>
|
||
|
|
<p class="badge-card__description">For reducing energy consumption and carbon footprint.</p>
|
||
|
|
<span class="badge-card__count">x 3</span>
|
||
|
|
<div class="badge-card__progress-bar">
|
||
|
|
<div class="badge-card__progress-fill" style="width: 50%;"></div>
|
||
|
|
</div>
|
||
|
|
<small class="badge-card__status">50% to next level</small>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card" aria-labelledby="communityHeroBadgeTitle">
|
||
|
|
<div class="badge-card__icon" aria-hidden="true">🤝</div>
|
||
|
|
<h3 id="communityHeroBadgeTitle" class="badge-card__title">Community Hero</h3>
|
||
|
|
<p class="badge-card__description">Awarded for organizing or participating in local cleanups.</p>
|
||
|
|
<span class="badge-card__count">x 1</span>
|
||
|
|
<div class="badge-card__progress-bar">
|
||
|
|
<div class="badge-card__progress-fill" style="width: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
<small class="badge-card__status">Level complete! New challenge awaits.</small>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="badge-card" aria-labelledby="zeroWasteBadgeTitle">
|
||
|
|
<div class="badge-card__icon" aria-hidden="true">🗑️</div>
|
||
|
|
<h3 id="zeroWasteBadgeTitle" class="badge-card__title">Zero Waste Champion</h3>
|
||
|
|
<p class="badge-card__description">For minimal waste production and conscious consumption.</p>
|
||
|
|
<span class="badge-card__count">x 0</span>
|
||
|
|
<div class="badge-card__progress-bar">
|
||
|
|
<div class="badge-card__progress-fill" style="width: 0%;"></div>
|
||
|
|
</div>
|
||
|
|
<small class="badge-card__status">Start earning this badge!</small>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="summary-stats">
|
||
|
|
<div class="summary-stat-item highlight">
|
||
|
|
<span class="summary-stat-item__value">12</span>
|
||
|
|
<p class="summary-stat-item__label">Total Badges Earned</p>
|
||
|
|
</div>
|
||
|
|
<div class="summary-stat-item">
|
||
|
|
<span class="summary-stat-item__value">6</span>
|
||
|
|
<p class="summary-stat-item__label">Unique Badges Collected</p>
|
||
|
|
</div>
|
||
|
|
<div class="summary-stat-item">
|
||
|
|
<span class="summary-stat-item__value">4</span>
|
||
|
|
<p class="summary-stat-item__label">Badges Levelled Up</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="share-badge-prompt">
|
||
|
|
<div class="share-badge-container">
|
||
|
|
<header class="share-badge-header">
|
||
|
|
<h2 class="share-badge-title">Congratulations! You've Earned a New Badge!</h2>
|
||
|
|
<p class="share-badge-subtitle">Your efforts are making a real difference. Share your achievement!</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="badge-display-area">
|
||
|
|
<div class="badge-icon-wrapper">
|
||
|
|
<img src="placeholder-badge-icon.png" alt="Eco-Warrior Badge Icon" class="badge-icon">
|
||
|
|
</div>
|
||
|
|
<h3 class="badge-name">Eco-Warrior Badge</h3>
|
||
|
|
<p class="badge-description">Awarded for consistently tracking 50+ eco-friendly activities. You're a true champion for the planet!</p>
|
||
|
|
<p class="badge-level">Level: Elite</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="share-actions">
|
||
|
|
<h4 class="share-actions-heading">Spread the Word!</h4>
|
||
|
|
<div class="share-buttons-grid">
|
||
|
|
<a href="#" class="share-button share-facebook" aria-label="Share your badge on Facebook">
|
||
|
|
<span class="share-icon-placeholder"></span> Share on Facebook
|
||
|
|
</a>
|
||
|
|
<a href="#" class="share-button share-twitter" aria-label="Share your badge on X (formerly Twitter)">
|
||
|
|
<span class="share-icon-placeholder"></span> Share on X
|
||
|
|
</a>
|
||
|
|
<a href="#" class="share-button share-linkedin" aria-label="Share your badge on LinkedIn">
|
||
|
|
<span class="share-icon-placeholder"></span> Share on LinkedIn
|
||
|
|
</a>
|
||
|
|
<a href="#" class="share-button share-email" aria-label="Share your badge via Email">
|
||
|
|
<span class="share-icon-placeholder"></span> Email
|
||
|
|
</a>
|
||
|
|
<button class="share-button share-copy-link" aria-label="Copy link to your badge">
|
||
|
|
<span class="share-icon-placeholder"></span> Copy Link
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<p class="share-encouragement">Inspire others to join the movement and make a positive impact!</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">EcoTrack</h3><p class="footer-1-newsletter-text">Join our newsletter to get the latest updates on environmental initiatives and community achievements.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Enter your email"><button class="footer-1-subscribe-btn">Stay Informed</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive impactful updates and eco-tips from our community.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Quick Links</h4><ul><li><a href="#">About EcoTrack</a></li><li><a href="#">How It Works</a></li><li><a href="#">Impact Map</a></li><li><a href="#">Badges & Rewards</a></li><li><a href="#">Community Forum</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="#">Help Center</a></li><li><a href="#">FAQs</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Blog</a></li><li><a href="#">Partnerships</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X (Twitter)</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2023 EcoTrack. All rights reserved. Empowering a greener future.</p><ul class="footer-1-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)
|