Prompt:
Apple Inc.'de bir kullanıcı arayüzü tasarımcısısınız ve iOS 18 tasarım stiline dayalı animasyonlu bir hava durumu kartı oluşturmakla görevlendirildiniz. Gereksinimler: Dört hava durumu kartı (Güneşli, Rüzgarlı, Şiddetli Yağmur ve Kar Fırtınası) içeren yatay bir hava durumu sayfası kullanarak HTML, CSS ve temel JavaScript kullanın. Sayfa estetik açıdan hoş ve etkileşimli olmalıdır.
<!doctype html> <html lang="tr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <title>iOS 18 Tarzı Hava Kartları (Tek Ekrana Sığdırılmış)</title> <style> :root{ --bg: #0b1220; --txt:#e7ebf3; --muted:#9aa7bf; --card-bg: rgba(255,255,255,.06); --card-br: rgba(255,255,255,.14); --shadow: 0 20px 60px rgba(0,0,0,.45); --ring: rgba(255,255,255,.2); --gap: 12px; --radius: 18px; --accent: #7c3aed; --hdr-h: 54px; --fs: clamp(12px, 1.15vw + 0.35vh, 16px); } *{box-sizing:border-box} html,body{margin:0} body{ font: 500 var(--fs)/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text","SF Pro Display","Helvetica Neue", Arial, system-ui, sans-serif; color: var(--txt); background: radial-gradient(1000px 700px at 90% -10%, rgba(124,58,237,.16), transparent 55%), radial-gradient(1200px 800px at -10% 120%, rgba(34,197,94,.14), transparent 60%), linear-gradient(180deg, #0b1220, #0b1220 50%, #0a0f1b); min-height: 100dvh; } .app{ min-height: 100dvh; display:grid; grid-template-rows: auto 1fr; gap: var(--gap); padding: env(safe-area-inset-top) var(--gap) var(--gap); } header{ height: var(--hdr-h); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 4px; } .title{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--card-br); border-radius: 14px; padding:8px 12px; backdrop-filter: blur(14px); box-shadow: var(--shadow); } .seg{ display:inline-flex; gap:4px; padding:4px; border-radius:12px; background: var(--card-bg); border:1px solid var(--card-br); backdrop-filter: blur(14px); box-shadow: var(--shadow); } .seg button{ border:0; background:transparent; color:var(--txt); padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700; } .seg button[aria-pressed="true"]{ background: rgba(255,255,255,.14) } /* GRID: 2x2 tek ekranda */ .grid{ height: calc(100dvh - var(--hdr-h) - var(--gap) - env(safe-area-inset-top)); display:grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: var(--gap); } .card{ position:relative; width:100%; height:100%; display:grid; grid-template-rows: auto 1fr auto; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border: 1px solid var(--card-br); border-radius: var(--radius); overflow:hidden; backdrop-filter: blur(18px) saturate(120%); box-shadow: var(--shadow); transform-style: preserve-3d; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; container-type: inline-size; /* container queries */ } .card:hover{ box-shadow: 0 30px 90px rgba(0,0,0,.55) } .card:after{ content:""; position:absolute; inset:0; border-radius:var(--radius); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent); opacity:.85; pointer-events:none; } .ring{ position:absolute; inset:-45% -30% auto -30%; height: 70%; border-radius:50%; background: radial-gradient(closest-side, var(--ring), transparent 60%); filter: blur(28px); pointer-events:none; transform: translateZ(0); } .card-head{ position:relative; z-index:2; padding:10px 12px 0; display:flex; align-items:center; justify-content:space-between; gap:8px; } .meta{ color: var(--muted); font-size: 0.88em } .big-temp{ font-size: 2.1em; font-weight:800; letter-spacing:-.5px } .cond{ font-weight:700 } .city{ font-weight:800 } .badge{ display:inline-flex; align-items:center; gap:6px; font-size:.85em; color:var(--muted) } .badge .dot{ width:8px; height:8px; border-radius:999px; background:var(--accent) } .visual{ position:absolute; left:0; right:0; top:54px; bottom:62px; display:grid; place-items:center; z-index:1 } .stats{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.16) 40%, rgba(0,0,0,.22)); } .pill{ display:flex; gap:8px; align-items:center; background: var(--card-bg); border:1px solid var(--card-br); padding:6px 8px; border-radius:12px; backdrop-filter: blur(12px); font-size:.85em; color: var(--muted) } .pill strong{ color: var(--txt) } /* Shared scene pieces */ .cloud{ position:relative; width: 140px; height: 54px; background: rgba(255,255,255,.9); border-radius: 40px; filter: blur(.2px); box-shadow: 0 10px 40px rgba(0,0,0,.25) inset; } .cloud:before, .cloud:after{ content:""; position:absolute; background: rgba(255,255,255,.95); border-radius:50%; box-shadow: 0 10px 30px rgba(0,0,0,.2) inset; } .cloud:before{ width:64px; height:64px; left:18px; top:-26px } .cloud:after { width:88px; height:88px; left:70px; top:-38px } /* SUNNY */ .card.sunny{ --accent: #ffd60a } .sun{ position:relative; width: 110px; height:110px; border-radius:50%; background: radial-gradient(circle at 40% 40%, #fff7b2, #ffd60a 40%, #ff9f0a 70%); box-shadow: 0 0 50px 18px rgba(255,214,10,.35), 0 0 120px 60px rgba(255,184,0,.12); animation: float 6s ease-in-out infinite; } .rays{ position:absolute; inset:-16px; border-radius:50%; background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255,214,10,.85) 8deg 12deg, transparent 12deg 20deg); -webkit-mask: radial-gradient(circle, transparent 42px, #000 43px); mask: radial-gradient(circle, transparent 42px, #000 43px); animation: spin 20s linear infinite; filter: blur(.2px); } .glint{ position:absolute; width:180px; height:180px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 40%); filter: blur(18px); transform: translate(16px,-16px); animation: breathe 5s ease-in-out infinite; } /* WINDY */ .card.windy{ --accent:#60a5fa } .gusts{ position:relative; width: 180px; height: 110px; } .gust{ position:absolute; left:-20%; width: 140%; height: 6px; border-radius:999px; background: radial-gradient(10px 10px at 0 50%, rgba(255,255,255,.7), transparent 70%), linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.1)); filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); animation: blow 3.6s cubic-bezier(.33,.01,.33,1) infinite; } .gust:nth-child(1){ top:18px; animation-delay: 0s } .gust:nth-child(2){ top:46px; animation-delay: .6s } .gust:nth-child(3){ top:74px; animation-delay: 1.2s } .leaf{ position:absolute; top: -8px; left:-20%; width:14px; height:10px; background: #a7f3d0; border-radius: 10px 10px 10px 2px; transform: rotate(-30deg); box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset; animation: leaf-run 3.6s ease-in-out infinite .4s; } /* HEAVY RAIN */ .card.rain{ --accent:#38bdf8 } .storm{ position:relative; width:200px; height:120px; } .drops i{ position:absolute; top:-20%; width:2px; height:16px; border-radius:2px; background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.8)); filter: blur(.2px); animation: fall linear infinite; opacity:.9; } .bolt{ position:absolute; left: 58%; top: -8px; width: 0; height: 0; filter: drop-shadow(0 0 20px rgba(255,255,255,.8)); animation: flash 6s infinite; } .bolt:before{ content:""; position:absolute; width: 12px; height: 34px; background: #fff; clip-path: polygon(30% 0, 60% 0, 45% 40%, 75% 40%, 35% 100%, 45% 58%, 15% 58%); transform: skewX(-10deg); } /* SNOWSTORM */ .card.snow{ --accent:#a5b4fc } .blizzard{ position:relative; width:220px; height:120px } .flake{ position:absolute; top:-10%; width: 8px; height: 8px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fff, #e5e7eb 60%, #cbd5e1 100%); filter: drop-shadow(0 0 10px rgba(255,255,255,.45)); animation: snow linear infinite, sway ease-in-out infinite; opacity:.95; } /* Tilt (hafif) */ @media (hover:hover){ .card.tilt:hover{ transform: perspective(900px) rotateX(2.5deg) rotateY(-2.5deg) } } /* Animations */ @keyframes spin{ to{ transform: rotate(360deg) } } @keyframes breathe{ 0%,100%{ transform: translate(16px,-16px) scale(1) } 50%{ transform: translate(14px,-18px) scale(1.06) } } @keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } } @keyframes blow{ 0%{ transform: translateX(0) } 100%{ transform: translateX(100%) } } @keyframes leaf-run{ 0%{ transform: translateX(0) translateY(0) rotate(-30deg) } 50%{ transform: translateX(80%) translateY(8px) rotate(10deg) } 100%{ transform: translateX(160%) translateY(0) rotate(-20deg) } } @keyframes fall{ 0%{ transform: translateY(0) } 100%{ transform: translateY(180px) } } @keyframes flash{ 0%, 75%, 100%{ opacity: 0 } 76%{ opacity: .9 } 78%{ opacity: 0 } 80%{ opacity: .8 } 82%{ opacity: 0 } } @keyframes snow{ 0%{ transform: translateY(0) } 100%{ transform: translateY(180px) } } @keyframes sway{ 0%,100%{ margin-left: 0 } 50%{ margin-left: 16px } } /* Container queries: kart daraldıkça sahneleri küçült */ @container (max-width: 240px){ .sun{ width: 96px; height:96px } .rays{-webkit-mask: radial-gradient(circle, transparent 36px, #000 37px); mask: radial-gradient(circle, transparent 36px, #000 37px); inset:-14px } .cloud{ width: 120px; height: 46px } .cloud:before{ width:56px; height:56px; top:-22px; left:16px } .cloud:after{ width:78px; height:78px; top:-32px; left:60px } .gusts{ width: 160px; height: 100px } .storm{ width: 170px; height: 110px } .blizzard{ width: 190px; height: 110px } } @container (max-width: 180px){ .sun{ width: 82px; height:82px } .rays{-webkit-mask: radial-gradient(circle, transparent 30px, #000 31px); mask: radial-gradient(circle, transparent 30px, #000 31px); inset:-12px } .cloud{ width: 100px; height: 40px } .cloud:before{ width:48px; height:48px; top:-20px; left:12px } .cloud:after{ width:64px; height:64px; top:-28px; left:50px } .gusts{ width: 140px; height: 92px } .storm{ width: 150px; height: 100px } .blizzard{ width: 170px; height: 100px } } @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important } } </style> </head> <body> <div class="app"> <header> <div class="title">⛅️ Hava iOS 18 tarzı (tek ekranda)</div> <div class="seg" role="group" aria-label="Birim"> <button id="cBtn" aria-pressed="true">°C</button> <button id="fBtn" aria-pressed="false">°F</button> </div> </header> <main class="grid" aria-label="Hava durumu kartları"> <!-- GÜNEŞLİ --> <section class="card sunny tilt" data-temp-c="29" data-city="Cupertino"> <div class="ring"></div> <div class="card-head"> <div> <div class="badge"><span class="dot"></span> <span class="cond">Güneşli</span></div> <div class="meta"><span class="city">Cupertino</span> <span class="time"></span></div> </div> <div class="big-temp"><span class="temp">29</span>°</div> </div> <div class="visual"> <div class="sun"> <div class="rays"></div> <div class="glint"></div> </div> </div> <div class="stats"> <div class="pill">Rüzgar <strong>6 km/sa</strong></div> <div class="pill">Nem <strong>24%</strong></div> <div class="pill">UV <strong>7</strong></div> </div> </section> <!-- RÜZGARLI --> <section class="card windy tilt" data-temp-c="18" data-city="San Francisco"> <div class="ring"></div> <div class="card-head"> <div> <div class="badge"><span class="dot"></span> <span class="cond">Rüzgarlı</span></div> <div class="meta"><span class="city">San Francisco</span> <span class="time"></span></div> </div> <div class="big-temp"><span class="temp">18</span>°</div> </div> <div class="visual"> <div class="gusts"> <span class="gust"></span> <span class="gust"></span> <span class="gust"></span> <span class="leaf"></span> </div> </div> <div class="stats"> <div class="pill">Rüzgar <strong>42 km/sa</strong></div> <div class="pill">Nem <strong>38%</strong></div> <div class="pill">Hissedilen <strong>16°</strong></div> </div> </section> <!-- ŞİDDETLİ YAĞMUR --> <section class="card rain tilt" data-temp-c="12" data-city="Seattle"> <div class="ring"></div> <div class="card-head"> <div> <div class="badge"><span class="dot"></span> <span class="cond">Şiddetli Yağmur</span></div> <div class="meta"><span class="city">Seattle</span> <span class="time"></span></div> </div> <div class="big-temp"><span class="temp">12</span>°</div> </div> <div class="visual"> <div class="storm"> <div class="cloud"></div> <div class="drops"></div> <div class="bolt"></div> </div> </div> <div class="stats"> <div class="pill">Rüzgar <strong>24 km/sa</strong></div> <div class="pill">Nem <strong>92%</strong></div> <div class="pill">Yağış <strong>18 mm</strong></div> </div> </section> <!-- KAR FIRTINASI --> <section class="card snow tilt" data-temp-c="-5" data-city="Reykjavík"> <div class="ring"></div> <div class="card-head"> <div> <div class="badge"><span class="dot"></span> <span class="cond">Kar Fırtınası</span></div> <div class="meta"><span class="city">Reykjavík</span> <span class="time"></span></div> </div> <div class="big-temp"><span class="temp">-5</span>°</div> </div> <div class="visual"> <div class="blizzard"> <div class="cloud" style="opacity:.92; transform: translateY(-4px)"></div> </div> </div> <div class="stats"> <div class="pill">Rüzgar <strong>55 km/sa</strong></div> <div class="pill">Görüş <strong>200 m</strong></div> <div class="pill">Hissedilen <strong>-12°</strong></div> </div> </section> </main> </div> <script> (function(){ const $ = s => document.querySelector(s); const $$ = s => Array.from(document.querySelectorAll(s)); // Zaman $$(".card .time").forEach(el=>{ const d = new Date(); el.textContent = d.toLocaleTimeString('tr-TR',{hour:'2-digit', minute:'2-digit'}); }); // °C / °F geçişi const cBtn = $("#cBtn"), fBtn = $("#fBtn"); let unit = "C"; const toF = c => Math.round(c * 9/5 + 32); function renderTemps(){ $$(".card").forEach(card=>{ const c = Number(card.dataset.tempC); card.querySelector(".temp").textContent = unit==="C" ? Math.round(c) : toF(c); }); cBtn.setAttribute("aria-pressed", unit==="C"); fBtn.setAttribute("aria-pressed", unit==="F"); } cBtn.addEventListener("click", ()=>{ unit="C"; renderTemps(); }); fBtn.addEventListener("click", ()=>{ unit="F"; renderTemps(); }); renderTemps(); // Yağmur damlaları const dropsWrap = document.querySelector(".rain .drops"); if(dropsWrap){ const count = 36; for(let i=0;i<count;i++){ const d = document.createElement("i"); d.style.left = (Math.random()*100)+"%"; d.style.animationDuration = (1.1 + Math.random()*0.8)+"s"; d.style.animationDelay = (Math.random()*1.2)+"s"; d.style.transform = `scale(${0.7 + Math.random()*0.6}) translateY(0)`; dropsWrap.appendChild(d); } } // Kar taneleri const blizzard = document.querySelector(".snow .blizzard"); if(blizzard){ const count = 28; for(let i=0;i<count;i++){ const f = document.createElement("span"); f.className = "flake"; f.style.left = (Math.random()*100)+"%"; f.style.animationDuration = `${3 + Math.random()*2}s, ${2 + Math.random()*1.5}s`; f.style.animationDelay = `${Math.random()*1.8}s, ${Math.random()}s`; blizzard.appendChild(f); } } })(); </script> </body> </html> 
