dijital dahi: Sunucu CPU & Sistem Monitörü (HTML, CSS Kodu & AI Promptu)

CANLI ÇALIŞMA ALANI

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

🌐 HTML KODU ✏️ Düzenlenebilir

<div class="glass-server-widget">
  <div class="server-widget-header">
    <div class="server-title-box">
      <span class="server-icon">⚡</span>
      <h4 class="server-name">Web Düğümü #01</h4>
    </div>
    <span class="status-live-pill">CANLI</span>
  </div>
  <div class="stat-progress-group">
    <div class="stat-label-row">
      <span>CPU Kullanımı</span>
      <span class="stat-val-neon">78%</span>
    </div>
    <div class="stat-bar-track">
      <div class="stat-bar-fill" style="width: 78%; background: #00f0ff;"></div>
    </div>
  </div>
  <div class="stat-progress-group">
    <div class="stat-label-row">
      <span>RAM Bellek</span>
      <span class="stat-val-neon">4.2 / 8 GB</span>
    </div>
    <div class="stat-bar-track">
      <div class="stat-bar-fill" style="width: 52%; background: #a855f7;"></div>
    </div>
  </div>
  <div class="server-footer-grid">
    <div class="server-footer-item">
      <span class="footer-lbl">Gecikme (Ping)</span>
      <span class="footer-val">14 ms</span>
    </div>
    <div class="server-footer-item">
      <span class="footer-lbl">Çalışma (Uptime)</span>
      <span class="footer-val">99.98%</span>
    </div>
  </div>
</div>

🎨 CSS KODU ✏️ Düzenlenebilir

.glass-server-widget {
  width: 100%;                        /* 📏 Genişlik değeri */
  /* 📏 Tam genişlik */
  max-width: 320px;                   /* 📏 Maksimum genişlik sınırı */
  /* 📏 Maksimum genişlik */
  padding: 1.5rem;                    /* ↔️ İç boşluk ayarı (Dikey Yatay) */
  /* ↔️ İç boşluk */
  background: rgba(255, 255, 255, 0.04);  /* 🌌 Arka plan rengi veya gradyan */
  /* 🌌 Buzlu cam zemin */
  backdrop-filter: blur(16px);        /* 🔮 Buzlu cam (Glassmorphism) buğulaması */
  /* 🔮 Cam buğulama */
  -webkit-backdrop-filter: blur(16px);  /* 🔮 Safari için cam buğulama desteği */
  /* 🔮 Safari buğulama */
  border: 1px solid rgba(0, 240, 255, 0.25);  /* 🔲 Kenarlık çizgisi (Kalınlık / Tip / Renk) */
  /* 🔲 Siyan cam kenarlık */
  border-radius: 18px;                /* 🔘 Köşe yumuşatma / yuvarlama */
  /* 🔘 Köşe yuvarlama */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);  /* 💡 Neon parlama ve derinlik gölgesi */
  /* 💡 Zemin gölgesi */
  transition: all 0.3s ease;          /* ⏱️ Yumuşak geçiş süresi ve eğrisi */
  /* ⏱️ Geçiş */
}
.glass-server-widget:hover {
  transform: translateY(-5px);        /* 🚀 Hareket, büyüme veya eksen kaydırma */
  /* 🚀 Kartı kaldır */
  border-color: #00f0ff;              /* 🎨 Kenarlık rengi */
  /* 🎨 Hover kenarlık */
  box-shadow: 0 20px 45px rgba(0, 240, 255, 0.2);  /* 💡 Neon parlama ve derinlik gölgesi */
  /* 💡 Neon parlama */
}
.server-widget-header {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 Başlık ve rozet yan yana */
  justify-content: space-between;     /* ↔️ Yatay eksende hizalama */
  /* ↔️ İki yana yasla */
  align-items: center;                /* ↕️ Dikey eksende hizalama */
  /* ↕️ Dikey ortala */
  margin-bottom: 1.25rem;             /* ⚙️ Stil özelliği */
  /* 📐 Alt boşluk */
}
.server-title-box {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 İkon ve başlık */
  align-items: center;                /* ↕️ Dikey eksende hizalama */
  /* ↕️ Dikey ortala */
  gap: 0.5rem;                        /* 🔲 İç elemanlar arasındaki boşluk */
  /* 🔲 Boşluk */
}
.server-icon {
  font-size: 1.1rem;                  /* 🔤 Metin / Yazı boyutu */
  /* 🔤 İkon boyutu */
}
.server-name {
  font-size: 0.95rem;                 /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Sunucu adı boyutu */
  font-weight: 700;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  /* 🖋️ Kalın başlık */
  color: #ffffff;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Beyaz metin */
  margin: 0;                          /* 📐 Dış kenar boşluğu */
  /* 📐 Sıfır dış boşluk */
}
.status-live-pill {
  font-size: 0.68rem;                 /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Rozet boyutu */
  font-weight: 800;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  /* 🖋️ Kalın rozet */
  color: #10b981;                     /* 🎨 Yazı / Metin rengi */
  /* 🟢 Yeşil renk */
  background: rgba(16, 185, 129, 0.15);  /* 🌌 Arka plan rengi veya gradyan */
  /* 🌌 Şeffaf yeşil zemin */
  border: 1px solid #10b981;          /* 🔲 Kenarlık çizgisi (Kalınlık / Tip / Renk) */
  /* 🔲 Yeşil kenarlık */
  padding: 0.15rem 0.5rem;            /* ↔️ İç boşluk ayarı (Dikey Yatay) */
  /* ↔️ Rozet iç boşluğu */
  border-radius: 12px;                /* 🔘 Köşe yumuşatma / yuvarlama */
  /* 🔘 Tam yuvarlak */
}
.stat-progress-group {
  margin-bottom: 1rem;                /* ⚙️ Stil özelliği */
  /* 📐 Barlar arası boşluk */
}
.stat-label-row {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 Etiket ve yüzde yan yana */
  justify-content: space-between;     /* ↔️ Yatay eksende hizalama */
  /* ↔️ İki yana yasla */
  font-size: 0.78rem;                 /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Yazı boyutu */
  color: #94a3b8;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Gri renk */
  margin-bottom: 0.4rem;              /* ⚙️ Stil özelliği */
  /* 📐 Bardan önceki boşluk */
}
.stat-val-neon {
  font-weight: 700;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  /* 🖋️ Kalın rakam */
  color: #ffffff;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Parlak beyaz */
}
.stat-bar-track {
  width: 100%;                        /* 📏 Genişlik değeri */
  /* 📏 Tam genişlik */
  height: 6px;                        /* 📐 Yükseklik değeri */
  /* 📐 İnce bar yüksekliği */
  background: rgba(255, 255, 255, 0.08);  /* 🌌 Arka plan rengi veya gradyan */
  /* 🌌 Bar zemin rengi */
  border-radius: 3px;                 /* 🔘 Köşe yumuşatma / yuvarlama */
  /* 🔘 Bar yuvarlama */
  overflow: hidden;                   /* ✂️ Dışa taşan ışık veya efektleri gizle */
  /* ✂️ Taşan dolguyu kes */
}
.stat-bar-fill {
  height: 100%;                       /* 📐 Yükseklik değeri */
  /* 📐 Tam yükseklik */
  border-radius: 3px;                 /* 🔘 Köşe yumuşatma / yuvarlama */
  /* 🔘 Dolgu yuvarlama */
  transition: width 0.5s ease;        /* ⏱️ Yumuşak geçiş süresi ve eğrisi */
  /* ⏱️ Genişleme animasyonu */
}
.server-footer-grid {
  display: grid;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 Alt istatistik ızgarası */
  grid-template-columns: 1fr 1fr;     /* ⚙️ Stil özelliği */
  /* 📐 2 Eşit sütun */
  gap: 0.75rem;                       /* 🔲 İç elemanlar arasındaki boşluk */
  /* 🔲 Sütunlar arası boşluk */
  margin-top: 1.25rem;                /* ⚙️ Stil özelliği */
  /* 📐 Üst boşluk */
  padding-top: 0.85rem;               /* ⚙️ Stil özelliği */
  /* ↔️ İç üst boşluk */
  border-top: 1px solid rgba(255, 255, 255, 0.08);  /* ⚙️ Stil özelliği */
  /* 🔲 Ayırıcı çizgi */
}
.server-footer-item {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 Dikey etiket-değer */
  flex-direction: column;             /* ↕️ Esnek kutu yönü (Sütun/Satır) */
  /* ↕️ Sütun dizilimi */
}
.footer-lbl {
  font-size: 0.7rem;                  /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Alt başlık boyutu */
  color: #64748b;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Koyu gri */
}
.footer-val {
  font-size: 0.88rem;                 /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Değer boyutu */
  font-weight: 700;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  /* 🖋️ Kalın yazı */
  color: #38bdf8;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Mavi neon renk */
}

⚡ 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 "Sunucu CPU & Sistem Monitörü" 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.

Sunucu CPU & Sistem Monitörü (HTML, CSS Kodu & AI Promptu)

Web Düğümü #01

Kayıtlı Favorilerim