Uzay Analog Saat Arayüzü

ARWENDA · 2 Ara 2025

Yıldız yağmurları,meteor akışları ve uzak galaksi network efektleriyle birleşen 3 katmanlı uzay sahnesi üzerinde çalışan neon ışıklı,tık–tak sesli bir analog saattir.
Saatin üst kısmında her birkaç saniyede bir fade-in / fade-out efektleriyle beliren felsefi sözler görünür.Saate tıklayınca ses açılır.

Kod:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>THT Uzay Temalı Analog Saat</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
*{margin:0;padding:0;box-sizing:border-box;}

body{
    height:100vh;
    overflow:hidden;
    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:Consolas, monospace;
}

/* ÜST SÖZ KUTUSU */
.quote-box{
    position:fixed;
    top:40px;
    width:100%;
    text-align:center;
    z-index:10;
    pointer-events:none;
}

.quote{
    font-size:28px;
    font-weight:800;
    color:#f1f5f9;
    text-shadow:
        0 0 12px rgba(255,255,255,0.8),
        0 0 30px rgba(0,200,255,0.6);
    opacity:0;
    transform:scale(0.8);
    transition:opacity 1s ease, transform 1.2s ease;
}

/* Giriş efekti */
.quote.show{
    opacity:1;
    transform:scale(1);
}

/* Çıkış efekti */
.quote.hide{
    opacity:0;
    transform:scale(1.3);
}

/* UZAY ARKA PLAN */
#starsCanvas{
    position:fixed;
    top:0;left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

/* SAAT GÖVDESİ */
.clock{
    width:340px;
    height:340px;
    background:radial-gradient(circle,#141827,#020308);
    border:8px solid #1f2937;
    border-radius:50%;
    position:relative;
    backdrop-filter:blur(8px);
    box-shadow:
        0 0 25px rgba(0,200,255,0.35),
        inset 0 0 35px rgba(0,0,0,0.8);
}

/* MERKEZ NOKTA */
.center{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 10px #fff;
    z-index:10;
}

/* RAKAMLAR */
.number{
    position:absolute;
    transform:translate(-50%,-50%);
    font-size:32px;
    font-weight:bold;
    color:#e5e7eb;
    text-shadow:0 0 10px rgba(255,255,255,0.4);
}

/* AKREP */
.hour-hand{
    width:8px;
    height:85px;
    background:#ffffff;
    position:absolute;
    top:85px;left:166px;
    transform-origin:bottom;
    border-radius:4px;
    z-index:5;
}

/* YELKOVAN */
.minute-hand{
    width:6px;
    height:115px;
    background:#bbd9ff;
    position:absolute;
    top:50px;left:167px;
    transform-origin:bottom;
    border-radius:4px;
    z-index:4;
}

/* SANİYE İBRE */
.second-hand{
    width:3px;
    height:140px;
    background:#ff1744;
    position:absolute;
    top:30px;left:168px;
    border-radius:2px;
    transform-origin:bottom;
    z-index:6;
    box-shadow:
        0 0 15px #ff1744,
        0 0 30px rgba(255,23,68,0.6);
}

/* SANİYE TRAIL */
.trail{
    position:absolute;
    width:3px;
    height:150px;
    left:168px;
    top:30px;
    background:rgba(255,23,68,0.35);
    border-radius:2px;
    opacity:0;
    z-index:1;
    transform-origin:bottom;
    transition:opacity 0.25s;
}
</style>
</head>

<body>

<!-- ÜST SÖZ -->
<div class="quote-box">
    <div id="quote" class="quote">Hoş geldin.</div>
</div>

<canvas id="starsCanvas"></canvas>

<div class="clock" id="clock">

    <!-- RAKAMLAR -->
    <script>
        const clockEl = document.currentScript.parentElement;
        for(let i=1;i<=12;i++){
            const angle = (i*30)-90;
            const x = 170 + Math.cos(angle*Math.PI/180)*120;
            const y = 170 + Math.sin(angle*Math.PI/180)*120;
            clockEl.innerHTML += `<div class="number" style="top:${y}px;left:${x}px;">${i}</div>`;
        }
    </script>

    <div class="hour-hand" id="hour"></div>
    <div class="minute-hand" id="minute"></div>

    <div class="trail" id="trail"></div>
    <div class="second-hand" id="second"></div>

    <div class="center"></div>
</div>

<!-- TIKTAK SESİ -->
<audio id="tick" src="https://www.soundjay.com/clock/sounds/clock-ticking-1.mp3" preload="auto"></audio>

<script>
/* ==========================
   Felsefi Sözler
   ========================== */

const quotes = [
    "Zaman, düşünmeyen için bir yük; düşünen için bir cevaptır.",
    "Kendini bulmak istiyorsan önce kaybolmayı kabul et.",
    "En derin karanlıklar, en parlak yolları gizler.",
    "İnsan, en çok sessizlikte büyür.",
    "Gerçek huzur, hiçbir şeye sahip olmaktan değil, hiçbir şeye bağlı olmamaktan gelir.",
    "Düşüncen değişirse, kaderin de değişir.",
    "Acıtan şeyler öğretir; öğreten şeyler iyileştirir.",
    "Kendini anlayan, evreni de anlar.",
    "Varlığın özü, farkında olmaktır.",
    "Unutma: Karanlık, ışığın değerini göstermek için vardır."
];

const quoteEl = document.getElementById("quote");

let index = 0;

function changeQuote(){
    quoteEl.classList.remove("show");
    quoteEl.classList.add("hide");

    setTimeout(()=>{
        index = (index + 1) % quotes.length;
        quoteEl.innerText = quotes[index];

        quoteEl.classList.remove("hide");
        quoteEl.classList.add("show");
    }, 1000);
}

setInterval(changeQuote, 6000);
quoteEl.classList.add("show");


/* ==========================
   ANALOG SAAT + TİKTAK
   ========================== */

function updateClock(){
    const now = new Date();

    const h = now.getHours() % 12;
    const m = now.getMinutes();
    const s = now.getSeconds();

    document.getElementById("hour").style.transform   = `rotate(${h*30 + m*0.5}deg)`;
    document.getElementById("minute").style.transform = `rotate(${m*6}deg)`;

    const secondDeg = s*6;
    const sec   = document.getElementById("second");
    const trail = document.getElementById("trail");

    sec.style.transform   = `rotate(${secondDeg}deg)`;
    trail.style.transform = `rotate(${secondDeg}deg)`;
    trail.style.opacity   = 1;

    setTimeout(()=> trail.style.opacity = 0, 150);

    const tick = document.getElementById("tick");
    tick.currentTime = 0;
    tick.play().catch(()=>{});
}

setInterval(updateClock, 1000);
updateClock();


/* ==========================
   3 Katman Uzay Arka Planı
   ========================== */

const canvas = document.getElementById("starsCanvas");
const ctx = canvas.getContext("2d");

let w, h;
function resize(){
    w = canvas.width  = window.innerWidth;
    h = canvas.height = window.innerHeight;
}
resize();
window.addEventListener("resize", resize);

/* --- 1. Katman: Yakın Yıldızlar --- */
const STAR_COUNT = 180;
const stars = [];

function createStars(){
    stars.length = 0;
    for(let i=0;i<STAR_COUNT;i++){
        stars.push({
            x: Math.random()*w,
            y: Math.random()*h,
            radius: Math.random()*1.5 + 0.3,
            speed: Math.random()*0.4 + 0.1,
            alpha: Math.random()*0.7 + 0.3
        });
    }
}
createStars();

/* --- 2. Katman: Hızlı Meteorlar --- */
let meteors = [];

function createMeteors(){
    meteors = [];
    for(let i=0;i<12;i++){
        meteors.push({
            x: Math.random()*w,
            y: Math.random()*h,
            length: Math.random()*40 + 20,
            speed: Math.random()*4 + 2,
            alpha: Math.random()*0.4 + 0.2
        });
    }
}
createMeteors();

/* --- 3. Katman: Uzak Network Çizgileri --- */
let networkLines = [];

function createNetworkLines(){
    networkLines = [];
    for(let i=0;i<50;i++){
        networkLines.push({
            x: Math.random()*w,
            y: Math.random()*h,
            dx: (Math.random()*0.3 + 0.1),
            dy: (Math.random()*0.3 + 0.1),
            alpha: Math.random()*0.15 + 0.05,
            length: Math.random()*80 + 40
        });
    }
}
createNetworkLines();

/* --- Çizim Döngüsü --- */
function drawEverything(){
    ctx.clearRect(0,0,w,h);

    /* Yakın yıldızlar */
    for(const s of stars){
        s.y += s.speed;
        s.x += s.speed*0.1;
        if(s.y > h+10) s.y = -10;
        if(s.x > w+10) s.x = -10;

        ctx.beginPath();
        ctx.arc(s.x, s.y, s.radius, 0, Math.PI*2);
        ctx.fillStyle = `rgba(255,255,255,${s.alpha})`;
        ctx.fill();
    }

    /* Meteorlar */
    for(const m of meteors){
        m.x += m.speed * 2;
        m.y -= m.speed * 1;
        if(m.x > w+50 || m.y < -50){
            m.x = Math.random()*w - 200;
            m.y = h + Math.random()*300;
        }

        ctx.beginPath();
        ctx.moveTo(m.x, m.y);
        ctx.lineTo(m.x - m.length, m.y + m.length * 0.4);
        ctx.strokeStyle = `rgba(255,255,255,${m.alpha})`;
        ctx.lineWidth = 1;
        ctx.stroke();
    }

    /* Uzak network çizgileri */
    for(const n of networkLines){
        n.x += n.dx;
        n.y += n.dy;
        if(n.x > w+120) n.x = -100;
        if(n.y > h+120) n.y = -100;

        ctx.beginPath();
        ctx.moveTo(n.x, n.y);
        ctx.lineTo(n.x - n.length, n.y - n.length * 0.4);
        ctx.strokeStyle = `rgba(0,180,255,${n.alpha})`;
        ctx.lineWidth = 0.6;
        ctx.stroke();
    }

    requestAnimationFrame(drawEverything);
}

drawEverything();
</script>

</body>
</html>

an0un · 2 Ara 2025

Ellerinize sağlık hocam

Uzay Analog Saat Arayüzü

ARWENDA

Katılımcı Üye

an0un

Kıdemli Üye

Sosyal medya sayfalarımız