File size: 2,189 Bytes
5ff6b98 | 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 | class StudyTimer extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.timer-container {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
border-radius: 12px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.timer-display {
font-family: 'Courier New', monospace;
}
.timer-btn {
transition: all 0.2s ease;
}
.timer-btn:hover {
transform: scale(1.05);
}
</style>
<div class="timer-container text-white p-6">
<h3 class="text-xl font-bold mb-4">Study Timer</h3>
<div class="flex flex-col items-center">
<div class="timer-display text-5xl font-bold mb-6">00:00:00</div>
<div class="flex space-x-4">
<button class="timer-btn bg-white text-indigo-600 px-6 py-2 rounded-full font-medium">
Start
</button>
<button class="timer-btn bg-indigo-800 text-white px-6 py-2 rounded-full font-medium">
Reset
</button>
</div>
</div>
<div class="mt-6">
<label class="block text-sm font-medium mb-2">Set Study Duration</label>
<select class="w-full bg-indigo-700 text-white rounded-lg px-4 py-2">
<option value="30">30 minutes</option>
<option value="45">45 minutes</option>
<option value="60">60 minutes</option>
<option value="90">90 minutes</option>
</select>
</div>
</div>
`;
// Timer functionality would be implemented here
}
}
customElements.define('study-timer', StudyTimer); |