WATCH FACE COLLECTION

---

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #1a1a1a; display: flex; justify-content: center; align-items: center; height: 100vh; } .watch-frame { width: 198px; height: 242px; border-radius: 60px; overflow: hidden; background: #FF0000; box-shadow: 0 0 0 4px #888, 0 0 0 7px #555, 0 20px 60px rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; } </style> </head> <body> <div class="watch-frame"> <canvas id="clock" width="188" height="232"></canvas> </div> <script> const canvas = document.getElementById('clock'); const ctx = canvas.getContext('2d'); const cx = 94, cy = 118, r = 78; // Simüle edilmiş değerler (gerçek cihazda API'den gelir) const battery = 72; // % const temperature = 18; // °C const weather = '⛅'; // hava durumu ikonu const weatherDesc = 'Parçalı Bulutlu'; function roundRect(ctx, x, y, w, h, rad) { ctx.beginPath(); ctx.moveTo(x + rad, y); ctx.lineTo(x + w - rad, y); ctx.arcTo(x + w, y, x + w, y + rad, rad); ctx.lineTo(x + w, y + h - rad); ctx.arcTo(x + w, y + h, x + w - rad, y + h, rad); ctx.lineTo(x + rad, y + h); ctx.arcTo(x, y + h, x, y + h - rad, rad); ctx.lineTo(x, y + rad); ctx.arcTo(x, y, x + rad, y, rad); ctx.closePath(); } function drawHand(angle, length, width, color) { ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(cx + Math.cos(angle) * length, cy + Math.sin(angle) * length); ctx.strokeStyle = color; ctx.lineWidth = width; ctx.lineCap = 'round'; ctx.stroke(); } function drawBattery(x, y) { const w = 32, h = 14; // Çerçeve ctx.strokeStyle = 'white'; ctx.lineWidth = 1.5; roundRect(ctx, x, y, w, h, 3); ctx.stroke(); // Kutup ucu ctx.fillStyle = 'white'; ctx.fillRect(x + w + 1.5, y + 4, 3, 6); // Doluluk rengi const fillW = Math.max(2, (battery / 100) * (w - 4)); const fillColor = battery > 20 ? '#4CD964' : '#FF3B30'; ctx.fillStyle = fillColor; roundRect(ctx, x + 2, y + 2, fillW, h - 4, 2); ctx.fill(); // Yüzde yazısı ctx.fillStyle = 'white'; ctx.font = 'bold 8px -apple-system, sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(battery + '%', x + w / 2, y + h / 2); } function drawWeather(x, y) { // Hava ikon ctx.font = '18px serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(weather, x, y); // Açıklama ctx.fillStyle = 'rgba(255,255,255,0.85)'; ctx.font = '7px -apple-system, sans-serif'; ctx.fillText(weatherDesc, x, y + 14); } function drawTemperature(x, y) { // Termometre simgesi ctx.fillStyle = 'white'; ctx.font = 'bold 11px -apple-system, sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('🌡️', x, y - 7); ctx.font = 'bold 12px -apple-system, sans-serif'; ctx.fillText(temperature + '°C', x, y + 6); } function drawClock() { const now = new Date(); const h = now.getHours() % 12; const m = now.getMinutes(); const s = now.getSeconds(); // Arka plan ctx.fillStyle = '#FF0000'; roundRect(ctx, 0, 0, 188, 232, 55); ctx.fill(); // Kadran çemberi ctx.beginPath(); ctx.arc(cx, cy, r, 0, 2 * Math.PI); ctx.strokeStyle = 'rgba(255,255,255,0.25)'; ctx.lineWidth = 1.5; ctx.stroke(); // Saat işaretleri for (let i = 0; i < 60; i++) { const angle = (i / 60) * 2 * Math.PI - Math.PI / 2; const isMajor = i % 5 === 0; ctx.beginPath(); ctx.moveTo(cx + Math.cos(angle) * (r - 2), cy + Math.sin(angle) * (r - 2)); ctx.lineTo(cx + Math.cos(angle) * (isMajor ? r - 13 : r - 7), cy + Math.sin(angle) * (isMajor ? r - 13 : r - 7)); ctx.strokeStyle = isMajor ? 'white' : 'rgba(255,255,255,0.4)'; ctx.lineWidth = isMajor ? 2.5 : 1; ctx.stroke(); } // Saat rakamları ctx.fillStyle = 'white'; ctx.font = 'bold 12px -apple-system, sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; const nums = { 12: [cx, cy - r + 20], 3: [cx + r - 20, cy], 6: [cx, cy + r - 20], 9: [cx - r + 20, cy] }; for (const [num, pos] of Object.entries(nums)) { ctx.fillText(num, pos[0], pos[1]); } // --- KOMPLİKASYONLAR --- // Üst: Hava durumu (12'nin üstünde, kadran dışı) drawWeather(cx, 22); // Sol: Sıcaklık (9'un solunda, kadran içi küçük alan) drawTemperature(cx - r + 10, cy); // Sağ alt: Pil göstergesi drawBattery(cx + 22, cy + r - 8); // Tarih (3'ün yanı) const day = now.getDate(); ctx.fillStyle = 'rgba(255,255,255,0.15)'; roundRect(ctx, cx + r - 28, cy - 10, 22, 18, 4); ctx.fill(); ctx.fillStyle = 'white'; ctx.font = 'bold 10px -apple-system, sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(day, cx + r - 17, cy); // Saat kolu const hAngle = ((h + m / 60) / 12) * 2 * Math.PI - Math.PI / 2; drawHand(hAngle, 42, 5.5, 'white'); // Dakika kolu const mAngle = ((m + s / 60) / 60) * 2 * Math.PI - Math.PI / 2; drawHand(mAngle, 62, 3.5, 'white'); // Saniye kolu const sAngle = (s / 60) * 2 * Math.PI - Math.PI / 2; ctx.beginPath(); ctx.moveTo(cx - Math.cos(sAngle) * 14, cy - Math.sin(sAngle) * 14); ctx.lineTo(cx + Math.cos(sAngle) * 68, cy + Math.sin(sAngle) * 68); ctx.strokeStyle = '#FFD700'; ctx.lineWidth = 1.5; ctx.lineCap = 'round'; ctx.stroke(); // Merkez nokta ctx.beginPath(); ctx.arc(cx, cy, 5, 0, 2 * Math.PI); ctx.fillStyle = '#FFD700'; ctx.fill(); } setInterval(drawClock, 1000); drawClock(); </script> </body> </html>