Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Akıllı Ev Enerji Paneli</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {

--bg-dark: #050b14;

--bg-glow: #0a192f;

--glass-bg: rgba(16, 30, 50, 0.4);

--glass-border: rgba(0, 240, 255, 0.15);

--glass-highlight: rgba(255, 255, 255, 0.1);

--text-main: #ffffff;

--text-muted: #8ba3b8;

--accent-cyan: #00f0ff;

--accent-green: #00ff88;

--accent-orange: #ffaa00;

--font-family: 'Inter', -apple-system, sans-serif;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background-color: var(--bg-dark);

/* Arka plan ızgara (Blueprint) efekti - Kenarların boş kalmasını önler */

background-image:

radial-gradient(circle at 50% 50%, var(--bg-glow) 0%, var(--bg-dark) 80%),

linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),

linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);

background-size: 100% 100%, 40px 40px, 40px 40px;

color: var(--text-main);

font-family: var(--font-family);

min-height: 100vh;

display: flex;

flex-direction: column;

overflow-x: hidden;

}

/* Arka Plan Büyük Yazı */

.bg-watermark {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-size: 15vw;

font-weight: 800;

color: rgba(255, 255, 255, 0.015);

pointer-events: none;

z-index: 0;

white-space: nowrap;

letter-spacing: -2px;

}

/* Glassmorphism Sınıfları */

.glass {

background: var(--glass-bg);

backdrop-filter: blur(16px);

-webkit-backdrop-filter: blur(16px);

border: 1px solid var(--glass-border);

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 var(--glass-highlight);

border-radius: 20px;

transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

position: relative;

overflow: hidden;

}

.glass::before {

content: '';

position: absolute;

top: 0; left: -100%; width: 50%; height: 100%;

background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);

transform: skewX(-20deg);

transition: left 0.7s;

}

.glass:hover::before {

left: 200%;

}

.glass:hover {

border-color: rgba(0, 240, 255, 0.4);

box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 20px rgba(0, 240, 255, 0.1);

transform: translateY(-5px);

}

/* --- ÜST BİLGİ ALANI (HEADER) --- */

header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 25px 5%;

z-index: 10;

flex-wrap: wrap;

gap: 20px;

}

.logo {

display: flex;

align-items: center;

gap: 12px;

font-size: 22px;

font-weight: 700;

letter-spacing: 0.5px;

text-transform: uppercase;

}

.logo svg {

width: 32px;

height: 32px;

fill: var(--accent-cyan);

filter: drop-shadow(0 0 10px var(--accent-cyan));

}

.logo span {

font-weight: 300;

font-size: 14px;

letter-spacing: 3px;

color: var(--text-muted);

}

.top-stats {

display: flex;

gap: 15px;

flex-wrap: wrap;

}

.stat-pill {

display: flex;

align-items: center;

gap: 12px;

padding: 10px 20px;

border-radius: 40px;

background: rgba(10, 20, 35, 0.6);

border: 1px solid rgba(0, 240, 255, 0.15);

backdrop-filter: blur(10px);

transition: transform 0.3s;

}

.stat-pill:hover {

transform: scale(1.05);

border-color: var(--accent-cyan);

}

.stat-pill .icon {

width: 36px;

height: 36px;

border-radius: 50%;

background: rgba(0, 240, 255, 0.1);

display: flex;

justify-content: center;

align-items: center;

}

.stat-pill svg {

width: 18px;

height: 18px;

stroke: var(--accent-cyan);

stroke-width: 2;

fill: none;

stroke-linecap: round;

stroke-linejoin: round;

}

.stat-info {

display: flex;

flex-direction: column;

}

.stat-info .val {

font-size: 15px;

font-weight: 600;

color: #fff;

}

.stat-info .lbl {

font-size: 11px;

color: var(--text-muted);

text-transform: uppercase;

letter-spacing: 0.5px;

}

/* --- ANA EKRAN DÜZENİ (GRID LAYOUT) --- */

main {

flex: 1;

display: grid;

grid-template-columns: 300px 1fr 300px;

gap: 40px;

padding: 20px 5%;

align-items: center;

z-index: 5;

position: relative;

}

.left-panel, .right-panel {

display: flex;

flex-direction: column;

gap: 30px;

z-index: 10;

}

/* --- MERKEZ 3D EV --- */

.center-scene {

display: flex;

justify-content: center;

align-items: center;

width: 100%;

height: 100%;

min-height: 500px;

position: relative;

}

.house-svg-container {

width: 100%;

max-width: 650px;

animation: float 6s ease-in-out infinite;

}

.house-svg-container svg {

width: 100%;

height: auto;

filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.8));

overflow: visible;

}

@keyframes float {

0% { transform: translateY(0px); }

50% { transform: translateY(-20px); }

100% { transform: translateY(0px); }

}

/* --- KART TASARIMLARI --- */

.card {

padding: 25px;

width: 100%;

}

.card-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

font-size: 12px;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 1px;

color: var(--text-muted);

}

.card-header svg {

width: 18px;

height: 18px;

stroke: var(--text-muted);

fill: none;

stroke-width: 2;

}

/* Sıcaklık Göstergesi (Gauge) */

.gauge-container {

position: relative;

width: 100%;

height: 130px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: flex-end;

}

.gauge-svg {

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%);

width: 180px;

height: 90px;

overflow: visible;

}

.gauge-bg {

fill: none;

stroke: rgba(255, 255, 255, 0.05);

stroke-width: 14;

stroke-linecap: round;

}

.gauge-val {

fill: none;

stroke: url(#temp-grad);

stroke-width: 14;

stroke-linecap: round;

stroke-dasharray: 251; /* r=80 yarım daire */

stroke-dashoffset: 251;

transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);

filter: drop-shadow(0 0 10px rgba(255, 170, 0, 0.5));

}

.temp-value {

font-size: 38px;

font-weight: 700;

margin-top: -15px;

background: linear-gradient(to right, #fff, var(--text-muted));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.temp-status {

font-size: 12px;

color: var(--accent-green);

background: rgba(0, 255, 136, 0.1);

padding: 5px 12px;

border-radius: 12px;

margin-top: 15px;

font-weight: 500;

box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);

}

/* Batarya Kartı */

.battery-content {

display: flex;

align-items: center;

gap: 20px;

}

.battery-circle {

width: 80px;

height: 80px;

position: relative;

display: flex;

justify-content: center;

align-items: center;

}

.battery-circle svg.icon {

width: 28px;

height: 28px;

fill: #fff;

z-index: 2;

}

.battery-progress {

position: absolute;

top: 0; left: 0;

width: 100%; height: 100%;

transform: rotate(-90deg);

}

.batt-bg {

fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 6;

}

.batt-val {

fill: none; stroke: var(--accent-cyan); stroke-width: 6;

stroke-linecap: round;

stroke-dasharray: 226; /* 2 * PI * 36 */

stroke-dashoffset: 226;

transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);

filter: drop-shadow(0 0 8px var(--accent-cyan));

}

.battery-info h2 {

font-size: 28px;

font-weight: 700;

line-height: 1;

}

.battery-info h2 span {

font-size: 16px;

font-weight: 400;

color: var(--text-muted);

}

.battery-info p {

font-size: 13px;

color: var(--text-muted);

margin-top: 5px;

}

.battery-info p span {

color: var(--accent-cyan);

font-weight: 600;

}

/* Voltaj Grafik Kartı */

.voltage-status {

font-size: 11px;

color: var(--accent-cyan);

background: rgba(0, 240, 255, 0.1);

padding: 4px 10px;

border-radius: 8px;

display: inline-block;

margin-bottom: 10px;

font-weight: 500;

}

.voltage-value {

font-size: 40px;

font-weight: 700;

margin-bottom: 15px;

text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);

}

.chart-container {

width: 100%;

height: 90px;

position: relative;

border-radius: 10px;

overflow: hidden;

}

canvas {

width: 100%;

height: 100%;

display: block;

}

/* Dekoratif Bağlantı Noktaları (UI Detayı) */

.connection-dot {

width: 8px;

height: 8px;

background: var(--accent-cyan);

border-radius: 50%;

position: absolute;

box-shadow: 0 0 15px var(--accent-cyan);

}

.connection-dot::after {

content: '';

position: absolute;

top: -5px; left: -5px; width: 18px; height: 18px;

border: 1px solid var(--accent-cyan);

border-radius: 50%;

animation: ping 2s infinite;

}

@keyframes ping {

0% { transform: scale(0.5); opacity: 1; }

100% { transform: scale(2); opacity: 0; }

}

/* --- ALT BİLGİ (FOOTER) --- */

footer {

display: flex;

justify-content: space-between;

padding: 20px 5%;

z-index: 10;

font-size: 11px;

font-weight: 700;

letter-spacing: 3px;

color: rgba(255, 255, 255, 0.3);

text-transform: uppercase;

}

/* --- MOBİL VE RESPONSIVE UYUM --- */

@media (max-width: 1024px) {

main {

grid-template-columns: 1fr;

gap: 20px;

}

.center-scene {

order: -1; /* Evi mobil cihazlarda en üste al */

min-height: 400px;

}

.left-panel, .right-panel {

flex-direction: row;

flex-wrap: wrap;

}

.card {

flex: 1 1 300px;

}

@media (max-width: 600px) {

.top-stats {

justify-content: center;

width: 100%;

}

.stat-pill {

flex: 1 1 140px;

justify-content: center;

}

.logo {

width: 100%;

justify-content: center;

}

.center-scene {

min-height: 300px;

}

</style>

</head>

<body>

<div class="bg-watermark">SİSTEM</div>

</svg>

SmartSync <span>YÖNETİCİ</span>

</div>

</div>

<span class="lbl">İç Mekan</span>

</div>

</div>

<span class="lbl">Bulutlu</span>

</div>

</div>

<span class="lbl">Nem Oranı</span>

</div>

</header>

<main>

<span>Sıcaklık Durumu</span>

</div>

<defs>

</linearGradient>

</defs>

</svg>

<div class="temp-status">Güvenli Aralık</div>

</div>

</div>

<defs>

</filter>

</filter>

</linearGradient>

</linearGradient>

</pattern>

</radialGradient>

</defs>

</line>

<text x="30" y="16" fill="#fff" font-family="Inter" font-size="10" font-weight="bold" text-anchor="middle">ONLINE</text>

</g>

<text x="35" y="16" fill="#fff" font-family="Inter" font-size="10" font-weight="bold" text-anchor="middle">SOLAR</text>

</g>

</svg>

</div>

<span>Enerji Depolama</span>

</div>

</svg>

</div>

<p>Batarya (<span>%65</span>)</p>

</div>

<span>Tepe Voltaj (Pik)</span>

</div>

<div class="voltage-status">Risk Yok - Stabil</div>

</div>

</main>

<div>YAPAY ZEKA</div>

<div>MİNİMALİZM</div>

</footer>

document.addEventListener("DOMContentLoaded", () => {

// 1. Dairesel Göstergelerin (SVG) Animasyonu

setTimeout(() => {

const tempPath = document.getElementById('tempPath');

// Toplam uzunluk 251. %70 doluluk için offset'i düşürüyoruz.

tempPath.style.strokeDashoffset = "75";

const battPath = document.getElementById('battPath');

// Toplam uzunluk 226. %65 doluluk.

battPath.style.strokeDashoffset = "79";

}, 500);

// 2. Voltaj Dalga Grafiği (Canvas HTML5)

const canvas = document.getElementById('voltageCanvas');

const ctx = canvas.getContext('2d');

let phase = 0;

function resizeCanvas() {

// Çözünürlüğü netleştirmek için piksel oranını ayarlayalım

const rect = canvas.parentElement.getBoundingClientRect();

canvas.width = rect.width * 2; // Retina ekranlar için 2 kat

canvas.height = rect.height * 2;

ctx.scale(2, 2);

}

resizeCanvas();

window.addEventListener('resize', resizeCanvas);

function drawChart() {

const width = canvas.width / 2;

const height = canvas.height / 2;

ctx.clearRect(0, 0, width, height);

// Arka plan ızgara çizgileri

ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';

ctx.lineWidth = 1;

ctx.beginPath();

ctx.moveTo(0, height * 0.25); ctx.lineTo(width, height * 0.25);

ctx.moveTo(0, height * 0.5); ctx.lineTo(width, height * 0.5);

ctx.moveTo(0, height * 0.75); ctx.lineTo(width, height * 0.75);

ctx.stroke();

// Dalga çizimi başlangıcı

ctx.beginPath();

ctx.moveTo(0, height);

let points = [];

for(let x = 0; x <= width; x += 2) {

let baseLevel = height * 0.6;

// Karmaşık sinüs dalgaları oluşturma

let y = baseLevel

+ Math.sin(x * 0.04 + phase) * 12

+ Math.sin(x * 0.09 - phase * 1.2) * 4;

ctx.lineTo(x, y);

points.push({x, y});

}

ctx.lineTo(width, height);

ctx.lineTo(0, height);

ctx.closePath();

// Degrade Dolgu (Gradient Fill)

let grad = ctx.createLinearGradient(0, 0, 0, height);

grad.addColorStop(0, 'rgba(0, 240, 255, 0.3)');

grad.addColorStop(1, 'rgba(0, 240, 255, 0)');

ctx.fillStyle = grad;

ctx.fill();

// Sınır Çizgisi (Stroke)

ctx.beginPath();

ctx.moveTo(points[0].x, points[0].y);

for(let i = 1; i < points.length; i++) {

ctx.lineTo(points[i].x, points[i].y);

}

ctx.strokeStyle = '#00f0ff';

ctx.lineWidth = 2.5;

ctx.lineJoin = 'round';

ctx.stroke();

// Pik Noktası (Parlayan Beyaz Nokta)

let peakIdx = Math.floor(points.length * 0.8);

if(points[peakIdx]) {

ctx.beginPath();

ctx.arc(points[peakIdx].x, points[peakIdx].y, 4, 0, Math.PI*2);

ctx.fillStyle = '#ffffff';

ctx.shadowColor = '#00f0ff';

ctx.shadowBlur = 12;

ctx.fill();

ctx.shadowBlur = 0; // Sıfırla

}

phase += 0.06;

requestAnimationFrame(drawChart);

}

drawChart();

});

</script>

</body>

</html>

Metehan

Recommended

A Code by Metehan

A Code by Metehan

A Code by Metehan

HTML

CSS

JS

Recommended

A Code by Metehan

A Code by Metehan

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS