dijital dahi: #12 Hava Durumu Cam Paneli (HTML, CSS Kodu & AI Promptu)

CANLI ÇALIŞMA ALANI

💡 Sağdaki HTML/CSS kodlarını düzenleyerek anında test edebilirsiniz.

💡 Bileşen Analizi & Kullanım Alanları

Bu meteoroloji bileşeni (Hava Durumu Cam Paneli), sıcaklık, nem, rüzgar hızı ve hava durumu ikonlarını modern cam efekti katmanlarıyla sunan interaktif bir hava widget'ıdır.

🚀 Nerelerde ve Nasıl Kullanılır?

Web Sitesi Üst Başlığı (Header): Ziyaretçilere sitenizin en üst köşesinde anlık yerel hava durumunu gösteren kompakt bir widget olarak yerleştirebilirsiniz.
Kişisel Dashboard & Seyahat Portalları: Turizm, seyahat veya etkinlik rezervasyon sayfalarında destinasyonun hava durumunu sergilemek için kullanabilirsiniz.
Akıllı Şehir & Haber Siteleri: Haber ve portal sitelerinde şehir bazlı dinamik hava durumu kartları olarak konumlandırabilirsiniz.

🎨 Özelleştirme & Geliştirici İpuçları:

Canlı API Entegrasyonu: JavaScript tarafına OpenWeatherMap veya WeatherAPI bağlayarak kullanıcının gerçek konumuna göre otomatik veri çekebilirsiniz.
Hava Durumuna Göre Arka Plan: Yağmurlu, karlı veya güneşli durumlara göre kartın arka plan gradyanını dinamik değiştirebilirsiniz.

🌐 HTML KODU ✏️ Düzenlenebilir

🎨 CSS KODU ✏️ Düzenlenebilir

.glass-weather-widget {
  width: 100%;                        /* 📏 Genişlik değeri */
  max-width: 320px;                   /* 📏 Maksimum genişlik sınırı */
  padding: 1.5rem;                    /* ↔️ İç boşluk ayarı (Dikey Yatay) */
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(6, 182, 212, 0.04));  /* 🌌 Arka plan rengi veya gradyan */
  backdrop-filter: blur(18px);        /* 🔮 Buzlu cam (Glassmorphism) buğulaması */
  border: 1px solid rgba(251, 191, 36, 0.3);  /* 🔲 Kenarlık çizgisi (Kalınlık / Tip / Renk) */
  border-radius: 20px;                /* 🔘 Köşe yumuşatma / yuvarlama */
  box-shadow: 0 15px 35px rgba(0,0,0,0.4);  /* 💡 Neon parlama ve derinlik gölgesi */
  transition: all 0.3s ease;          /* ⏱️ Yumuşak geçiş süresi ve eğrisi */
}
.glass-weather-widget:hover {
  transform: translateY(-5px);        /* 🚀 Hareket, büyüme veya eksen kaydırma */
  border-color: #fbbf24;              /* 🎨 Kenarlık rengi */
  box-shadow: 0 20px 45px rgba(251, 191, 36, 0.25);  /* 💡 Neon parlama ve derinlik gölgesi */
}
.weather-top-row {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  justify-content: space-between;     /* ↔️ Yatay eksende hizalama */
  align-items: center;                /* ↕️ Dikey eksende hizalama */
  margin-bottom: 0.5rem;              /* ⚙️ Stil özelliği */
}
.loc-name {
  font-size: 1.05rem;                 /* 🔤 Metin / Yazı boyutu */
  font-weight: 800;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  color: #ffffff;                     /* 🎨 Yazı / Metin rengi */
  margin: 0;                          /* 📐 Dış kenar boşluğu */
}
.loc-sub {
  font-size: 0.75rem;                 /* 🔤 Metin / Yazı boyutu */
  color: #fbbf24;                     /* 🎨 Yazı / Metin rengi */
}
.weather-big-icon {
  font-size: 2.5rem;                  /* 🔤 Metin / Yazı boyutu */
}
.weather-temp-row {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  align-items: baseline;              /* ↕️ Dikey eksende hizalama */
  gap: 0.2rem;                        /* 🔲 İç elemanlar arasındaki boşluk */
  margin-bottom: 1.25rem;             /* ⚙️ Stil özelliği */
}
.temp-degree {
  font-size: 2.8rem;                  /* 🔤 Metin / Yazı boyutu */
  font-weight: 900;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  color: #ffffff;                     /* 🎨 Yazı / Metin rengi */
  line-height: 1;                     /* ↕️ Satır aralığı / yüksekliği */
}
.temp-unit {
  font-size: 1.2rem;                  /* 🔤 Metin / Yazı boyutu */
  color: #94a3b8;                     /* 🎨 Yazı / Metin rengi */
  font-weight: 600;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
}
.weather-info-grid {
  display: grid;                      /* 📐 Düzen ve dizilim yapısı */
  grid-template-columns: repeat(3, 1fr);  /* ⚙️ Stil özelliği */
  gap: 0.5rem;                        /* 🔲 İç elemanlar arasındaki boşluk */
  border-top: 1px solid rgba(255,255,255,0.1);  /* ⚙️ Stil özelliği */
  padding-top: 0.85rem;               /* ⚙️ Stil özelliği */
}
.weather-grid-item {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  flex-direction: column;             /* ↕️ Esnek kutu yönü (Sütun/Satır) */
  font-size: 0.7rem;                  /* 🔤 Metin / Yazı boyutu */
  color: #94a3b8;                     /* 🎨 Yazı / Metin rengi */
}
.weather-grid-item strong {
  font-size: 0.82rem;                 /* 🔤 Metin / Yazı boyutu */
  color: #ffffff;                     /* 🎨 Yazı / Metin rengi */
  margin-top: 0.2rem;                 /* ⚙️ Stil özelliği */
}

⚡ JAVASCRIPT KODU ✏️ Düzenlenebilir

🤖 YAPAY ZEKA (AI) PROMPTU ChatGPT / Claude / v0

Bu cam efekti yapay zekaya (ChatGPT, Claude, Cursor veya Gemini) sıfırdan yeniden yazdırmak veya projelerinize özel React/Tailwind bileşenine dönüştürmek için hazır prompt:

Bana modern web standartlarına (HTML5, CSS3) tam uyumlu, şık bir "#12 Hava Durumu Cam Paneli" Glassmorphism (Buzlu Cam) bileşeni oluştur.

Gereksinimler:
1. Görsel Tasarım: Koyu arka plan üzerinde cam efekti (backdrop-filter: blur(16px)), yarı saydam renkler (rgba(255, 255, 255, 0.08)), ince cam kenarlığı (border: 1px solid rgba(255, 255, 255, 0.15)) ve yumuşak neon gölgeler.
2. İnteraktif Özellikler: Hover anında cam parlaklığı (glass-glow) ve hafif yukarı süzülme animasyonu.
3. Kod Yapısı: Saf HTML ve CSS formatında, harici kütüphane gerektirmeyen temiz kod.

💡 İpucu: ChatGPT ve Claude içine yapıştırarak doğrudan çalıştırabilirsiniz.

#12 Hava Durumu Cam Paneli (HTML, CSS Kodu & AI Promptu)

İstanbul, TR

Kayıtlı Favorilerim