Spaces:
Running
Running
File size: 6,451 Bytes
bbf5330 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 |
class CustomGamification extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
margin-bottom: 4rem;
}
.gamification-section {
background-color: white;
border-radius: 0.5rem;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.section-header {
text-align: center;
margin-bottom: 2rem;
}
.section-title {
font-size: 2rem;
font-weight: 700;
color: #1e3a8a;
margin-bottom: 1rem;
}
.section-description {
font-size: 1.1rem;
color: #4b5563;
max-width: 700px;
margin: 0 auto;
}
.rewards-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.reward-card {
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}
.reward-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.reward-image {
height: 160px;
background-size: cover;
background-position: center;
}
.reward-content {
padding: 1.5rem;
}
.reward-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #1e40af;
}
.reward-description {
color: #6b7280;
margin-bottom: 1rem;
}
.reward-points {
display: inline-block;
padding: 0.25rem 0.5rem;
background-color: #dbeafe;
color: #1d4ed8;
border-radius: 99px;
font-weight: 600;
font-size: 0.875rem;
margin-bottom: 1rem;
}
.reward-button {
display: inline-block;
padding: 0.5rem 1rem;
background-color: #3b82f6;
color: white;
border-radius: 0.25rem;
font-weight: 500;
transition: background-color 0.2s;
}
.reward-button:hover {
background-color: #2563eb;
}
.reward-badge {
position: absolute;
top: 1rem;
right: 1rem;
background-color: #f59e0b;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 99px;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
}
.payment-system {
margin-top: 3rem;
background-color: #f9fafb;
border-radius: 0.5rem;
padding: 2rem;
text-align: center;
}
.payment-title {
font-size: 1.5rem;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 1rem;
}
.payment-description {
color: #6b7280;
margin-bottom: 1.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.payment-button {
padding: 0.75rem 1.5rem;
background-color: #10b981;
color: white;
border-radius: 0.5rem;
font-weight: 600;
transition: background-color 0.2s;
display: inline-block;
}
.payment-button:hover {
background-color: #059669;
}
</style>
<section id="gamification" class="gamification-section">
<div class="section-header">
<h2 class="section-title">Earn Rewards & Micro-Payments</h2>
<p class="section-description">
Complete tasks, learn skills, and navigate government systems to earn points redeemable for cash or services
</p>
</div>
<div class="rewards-container">
<div class="reward-card pulse">
<div class="reward-image" style="background-image: url('http://static.photos/retail/640x360/5')">
<span class="reward-badge">Featured</span>
</div>
<div class="reward-content">
<h3 class="reward-title">Complete Immigration Forms</h3>
<p class="reward-description">
Earn $5 for completing each required government form with our guidance system.
</p>
<div class="reward-points">500 pts</div>
<a href="#" class="reward-button">Learn More</a>
</div>
</div>
<div class="reward-card">
<div class="reward-image" style="background-image: url('http://static.photos/education/640x360/6')"></div>
<div class="reward-content">
<h3 class="reward-title">Attend English Class</h3>
<p class="reward-description">
Get $3 per completed English lesson and track your learning progress.
</p>
<div class="reward-points">300 pts</div>
<a href="#" class="reward-button">Start Learning</a>
</div>
</div>
<div class="reward-card">
<div class="reward-image" style="background-image: url('http://static.photos/office/640x360/7')"></div>
<div class="reward-content">
<h3 class="reward-title">Job Application Success</h3>
<p class="reward-description">
Earn $10 when you successfully apply for a job using our career resources.
</p>
<div class="reward-points">1000 pts</div>
<a href="#" class="reward-button">Find Jobs</a>
</div>
</div>
</div>
<div class="payment-system">
<h3 class="payment-title">Micro-Payment Withdrawal System</h3>
<p class="payment-description">
Convert your earned points into real money sent directly to your bank account, mobile wallet, or prepaid card.
Withdraw anytime with no fees when you reach the minimum threshold.
</p>
<a href="#" class="payment-button">Set Up Payment Method</a>
</div>
</section>
`;
}
}
customElements.define('custom-gamification', CustomGamification); |