Metehan

Ouvrir dans l'éditeur Publiez votre code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Home Energy Dashboard</title>
    <style>
        :root {
            --bg-color: #060d13;
            --bg-gradient: radial-gradient(circle at 50% 40%, #152c3d 0%, #060d13 80%);
            --glass-bg: rgba(20, 35, 50, 0.25);
            --glass-border: rgba(255, 255, 255, 0.08);
            --glass-highlight: rgba(255, 255, 255, 0.15);
            --text-main: #ffffff;
            --text-muted: #8ba3b8;
            --accent-cyan: #00f0ff;
            --accent-green: #00ff88;
            --accent-orange: #ffaa00;
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        }

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

body {
            background: var(--bg-color);
            background-image: var(--bg-gradient);
            color: var(--text-main);
            font-family: var(--font-family);
            min-height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

/* Background Typography */
        .bg-watermark {
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 18vw;
            font-weight: 800;
            color: rgba(255, 255, 255, 0.02);
            pointer-events: none;
            z-index: 0;
            white-space: nowrap;
            letter-spacing: -2px;
        }

/* Glassmorphism Utilities */
        .glass {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 var(--glass-highlight);
            border-radius: 24px;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }

.glass:hover {
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

/* Header */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 50px;
            position: relative;
            z-index: 10;
        }

.logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

.logo svg {
            width: 28px;
            height: 28px;
            fill: #fff;
        }

.logo span {
            font-weight: 300;
            font-size: 14px;
            letter-spacing: 2px;
            color: var(--text-muted);
            margin-top: 2px;
        }

.top-stats {
            display: flex;
            gap: 20px;
        }

.stat-pill {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 12px 24px;
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
        }

.stat-pill .icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

.stat-pill svg {
            width: 20px;
            height: 20px;
            stroke: #fff;
            stroke-width: 1.5;
            fill: none;
        }

.stat-info {
            display: flex;
            flex-direction: column;
        }

.stat-info .val {
            font-size: 16px;
            font-weight: 600;
        }

.stat-info .lbl {
            font-size: 12px;
            color: var(--text-muted);
        }

/* Main Stage */
        main {
            flex: 1;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            z-index: 5;
        }

.scene-container {
            position: relative;
            width: 800px;
            height: 600px;
            animation: float 6s ease-in-out infinite;
            perspective: 1000px;
        }

.house-svg {
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.7));
        }

/* Connecting Lines */
        .connector {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
            z-index: 2;
        }

/* Dashboard Cards */
        .card {
            position: absolute;
            z-index: 10;
        }

/* Temperature Card */
        .card-temp {
            left: 5%;
            top: 55%;
            transform: translateY(-50%);
            width: 240px;
            padding: 24px;
        }

.card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-muted);
        }

.card-header svg {
            width: 16px; height: 16px;
            stroke: var(--text-muted);
        }

.gauge-container {
            position: relative;
            width: 100%;
            height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
        }

.gauge-svg {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 160px;
            height: 80px;
            overflow: visible;
        }

.gauge-bg {
            fill: none;
            stroke: rgba(255, 255, 255, 0.05);
            stroke-width: 12;
            stroke-linecap: round;
        }

.gauge-val {
            fill: none;
            stroke: url(#temp-gradient);
            stroke-width: 12;
            stroke-linecap: round;
            stroke-dasharray: 220; /* Approx length of semi-circle r=70 */
            stroke-dashoffset: 220;
            transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

.temp-value {
            font-size: 32px;
            font-weight: 700;
            margin-top: -10px;
            background: linear-gradient(to bottom right, #fff, #aaa);
            -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: 4px 10px;
            border-radius: 10px;
            margin-top: 10px;
            display: inline-block;
        }

/* Battery Card */
        .card-battery {
            right: 15%;
            top: 35%;
            display: flex;
            align-items: center;
            background: rgba(10, 20, 30, 0.4);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            padding: 8px 30px 8px 8px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.5);
        }

.battery-circle {
            width: 64px;
            height: 64px;
            background: #ffffff;
            border-radius: 50%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
            margin-right: 20px;
        }

.battery-circle svg.icon {
            width: 24px;
            height: 24px;
            fill: #000;
            z-index: 2;
        }

.battery-progress {
            position: absolute;
            top: -4px; left: -4px;
            width: 72px; height: 72px;
            transform: rotate(-90deg);
        }

.batt-bg {
            fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 3;
        }

.batt-val {
            fill: none; stroke: var(--accent-cyan); stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 213; /* 2 * PI * 34 */
            stroke-dashoffset: 213;
            transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
            filter: drop-shadow(0 0 8px var(--accent-cyan));
        }

.battery-info h2 {
            font-size: 24px;
            font-weight: 600;
        }

.battery-info p {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 2px;
        }

.battery-info span {
            color: var(--accent-cyan);
            font-weight: 500;
        }

/* Voltage Card */
        .card-voltage {
            right: 10%;
            bottom: 15%;
            width: 260px;
            padding: 24px;
        }

.voltage-status {
            font-size: 11px;
            color: var(--accent-cyan);
            background: rgba(0, 240, 255, 0.1);
            padding: 4px 8px;
            border-radius: 6px;
            margin-top: -5px;
            display: inline-block;
        }

.voltage-value {
            font-size: 36px;
            font-weight: 700;
            margin: 10px 0 20px 0;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
        }

.chart-container {
            width: 100%;
            height: 80px;
            position: relative;
        }

canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

/* Footer */
        footer {
            display: flex;
            justify-content: space-between;
            padding: 30px 50px;
            position: relative;
            z-index: 10;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, 0.4);
            text-transform: uppercase;
        }

/* Animations */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }

@keyframes pulseGlow {
            0% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(2); opacity: 0; }
            100% { transform: scale(1); opacity: 0; }
        }

.dot-pulse {
            position: absolute;
            border-radius: 50%;
            background: #fff;
            width: 8px; height: 8px;
        }

.dot-pulse::after {
            content: '';
            position: absolute;
            top: -50%; left: -50%;
            width: 200%; height: 200%;
            background: rgba(255,255,255,0.8);
            border-radius: 50%;
            animation: pulseGlow 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
        }

</style>
</head>
<body>

<div class="bg-watermark">GrindSync</div>

<header>
        <div class="logo">
            <svg viewBox="0 0 24 24">
                <path d="M4 14l8-10 8 10-2.5 0 0 6-11 0 0-6zM12 7l-4 5h3v4h2v-4h3z" />
            </svg>
            GrindSync <span>MANAGER</span>
        </div>
        <div class="top-stats">
            <div class="stat-pill glass">
                <div class="icon">
                    <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                </div>
                <div class="stat-info">
                    <span class="val">27°C</span>
                    <span class="lbl">Indoor</span>
                </div>
            </div>
            <div class="stat-pill glass">
                <div class="icon">
                    <svg viewBox="0 0 24 24"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
                </div>
                <div class="stat-info">
                    <span class="val">23°C</span>
                    <span class="lbl">Cloudy</span>
                </div>
            </div>
            <div class="stat-pill glass">
                <div class="icon">
                    <svg viewBox="0 0 24 24"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path></svg>
                </div>
                <div class="stat-info">
                    <span class="val">70%</span>
                    <span class="lbl">Humidity</span>
                </div>
            </div>
        </div>
    </header>

<polygon points="400,550 150,425 400,300 650,425" fill="url(#baseGrad)" stroke="rgba(255,255,255,0.03)" stroke-width="1"/>
                
                <polygon points="150,425 400,550 400,570 150,445" fill="#03060a"/>
                <polygon points="650,425 400,550 400,570 650,445" fill="#081018"/>

<polygon points="475,462.5 575,412.5 575,352.5 475,402.5" fill="url(#wallRight)"/>
                <polygon points="475,402.5 575,352.5 475,302.5 375,352.5" fill="url(#roofDark)"/>
                
                <polygon points="495,452 555,422 555,382 495,412" fill="#0b121c"/>
                <path d="M 495 405 L 555 375" stroke="#fff" stroke-width="1.5" opacity="0.3"/>
                <path d="M 495 395 L 555 365" stroke="#fff" stroke-width="1.5" opacity="0.3"/>

<polygon points="425,487.5 275,412.5 275,312.5 425,387.5" fill="url(#wallLeft)"/>
                
                <polygon points="425,487.5 525,437.5 525,337.5 425,387.5" fill="url(#wallRight)"/>
                
                
                <polygon points="400,475 350,450 350,390 400,415" fill="#09131e"/>
                
                <polygon points="360,450 390,465 390,415 360,400" fill="url(#windowGlow)" opacity="0.7" filter="url(#glow)"/>

<polygon points="330,420 290,400 290,360 330,380" fill="#050a10"/>
                <polygon points="325,414 295,399 295,364 325,379" fill="url(#windowGlow)" filter="url(#glow)"/>

<polygon points="375,362.5 225,287.5 225,207.5 375,282.5" fill="url(#wallLeft)"/>
                
                <polygon points="375,362.5 475,312.5 475,232.5 375,282.5" fill="url(#wallRight)"/>
                
                <polygon points="375,282.5 225,207.5 325,157.5 475,232.5" fill="url(#roofDark)"/>

<line x1="250" y1="215" x2="350" y2="165" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
                <line x1="280" y1="230" x2="380" y2="180" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
                <line x1="310" y1="245" x2="410" y2="195" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
                <line x1="340" y1="260" x2="440" y2="210" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
                
                
                <line x1="260" y1="190" x2="410" y2="265" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
                <line x1="300" y1="170" x2="450" y2="245" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>

<polygon points="360,320 260,270 260,230 360,280" fill="#040810"/>
                <polygon points="355,314 265,269 265,235 355,280" fill="url(#windowGlow)" opacity="0.6" filter="url(#glow)"/>

<polygon points="425,387.5 275,312.5 265,317.5 415,392.5" fill="#fff" opacity="0.8"/>
                <polygon points="425,387.5 525,337.5 535,342.5 435,392.5" fill="#e2e8f0" opacity="0.8"/>
                
            </svg>

<div class="dot-pulse" style="top: 36%; left: 44.5%;"></div> 
            <div class="dot-pulse" style="top: 72%; left: 41%;"></div> 
            <div class="dot-pulse" style="top: 54%; left: 35%;"></div>

<svg class="connector">
                
                <path d="M 280 325 L -50 325 L -50 330" stroke="rgba(255,255,255,0.2)" stroke-width="1.5" fill="none" />
                
                <path d="M 360 220 L 580 220" stroke="rgba(255,255,255,0.2)" stroke-width="1.5" fill="none" />
                
                <path d="M 330 435 L 580 435 L 580 480" stroke="rgba(255,255,255,0.2)" stroke-width="1.5" fill="none" />
            </svg>
        </div>

<div class="card glass card-temp parallax-layer">
            <div class="card-header">
                <span>Temperature</span>
                <svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
            </div>
            <div class="gauge-container">
                <svg class="gauge-svg" viewBox="0 0 160 80">
                    <path class="gauge-bg" d="M 10 75 A 70 70 0 0 1 150 75" />
                    <path class="gauge-val" id="tempPath" d="M 10 75 A 70 70 0 0 1 150 75" />
                </svg>
                <div class="temp-value">40.5°C</div>
                <div class="temp-status">Safe range</div>
            </div>
        </div>

<div class="card card-battery parallax-layer">
            <div class="battery-circle">
                <svg class="icon" viewBox="0 0 24 24"><path d="M16 7h-2v-2h-4v2h-2v12h8v-12zm-3 8h-2v-4h2v4z"/></svg>
                <svg class="battery-progress" viewBox="0 0 72 72">
                    <circle class="batt-bg" cx="36" cy="36" r="34" />
                    <circle class="batt-val" id="battPath" cx="36" cy="36" r="34" />
                </svg>
            </div>
            <div class="battery-info">
                <h2>6.46 <span>kWh</span></h2>
                <p>Battery (<span>65%</span>)</p>
            </div>
        </div>

<div class="card glass card-voltage parallax-layer">
            <div class="card-header" style="margin-bottom: 5px;">
                <span>Peak voltage</span>
                <svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
            </div>
            <div class="voltage-status">No major risk</div>
            <div class="voltage-value">276 V</div>
            <div class="chart-container">
                <canvas id="voltageCanvas"></canvas>
            </div>
        </div>

</main>

<footer>
        <div>ARTIFICIAL INTELLIGENCE</div>
        <div>MINIMALISM</div>
    </footer>

const battPath = document.getElementById('battPath');
                // 213 length * 35% empty offset = 74.5
                battPath.style.strokeDashoffset = "74.5";
            }, 500);

// Canvas Line Chart Animation
            const canvas = document.getElementById('voltageCanvas');
            const ctx = canvas.getContext('2d');
            let phase = 0;

function resizeCanvas() {
                canvas.width = canvas.parentElement.clientWidth;
                canvas.height = canvas.parentElement.clientHeight;
            }
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);

function drawChart() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw Grid
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
                ctx.lineWidth = 1;
                ctx.beginPath();
                ctx.moveTo(0, canvas.height * 0.25); ctx.lineTo(canvas.width, canvas.height * 0.25);
                ctx.moveTo(0, canvas.height * 0.5); ctx.lineTo(canvas.width, canvas.height * 0.5);
                ctx.moveTo(0, canvas.height * 0.75); ctx.lineTo(canvas.width, canvas.height * 0.75);
                ctx.stroke();

// Draw Wave Line
                ctx.beginPath();
                ctx.moveTo(0, canvas.height);
                
                let points = [];
                for(let x = 0; x <= canvas.width; x += 3) {
                    // Sine waves overlapping to create "data" look
                    let baseLevel = canvas.height * 0.6;
                    let y = baseLevel 
                          + Math.sin(x * 0.03 + phase) * 15 
                          + Math.sin(x * 0.08 - phase * 1.5) * 5;
                    
                    ctx.lineTo(x, y);
                    points.push({x, y});
                }
                
                ctx.lineTo(canvas.width, canvas.height);
                ctx.lineTo(0, canvas.height);
                ctx.closePath();

// Fill gradient
                let grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
                grad.addColorStop(0, 'rgba(0, 240, 255, 0.3)');
                grad.addColorStop(1, 'rgba(0, 240, 255, 0)');
                ctx.fillStyle = grad;
                ctx.fill();

// Draw actual line 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;
                ctx.stroke();

// Peak Dot Marker
                let peakIdx = Math.floor(points.length * 0.75);
                if(points[peakIdx]) {
                    ctx.beginPath();
                    ctx.arc(points[peakIdx].x, points[peakIdx].y, 3, 0, Math.PI*2);
                    ctx.fillStyle = '#fff';
                    ctx.shadowColor = '#00f0ff';
                    ctx.shadowBlur = 10;
                    ctx.fill();
                    ctx.shadowBlur = 0; // reset
                }

phase += 0.04;
                requestAnimationFrame(drawChart);
            }
            drawChart();

// Interactive Parallax Mouse Hover
            const layers = document.querySelectorAll('.parallax-layer');
            const house = document.getElementById('main-house');

document.addEventListener('mousemove', (e) => {
                const x = (e.clientX / window.innerWidth - 0.5) * 2;
                const y = (e.clientY / window.innerHeight - 0.5) * 2;

// Move house subtle opposite
                house.style.transform = `translate(${x * -10}px, ${y * -10}px)`;

// Move cards at different depths
                layers.forEach((layer, idx) => {
                    const depth = (idx + 1) * 15;
                    layer.style.transform = layer.classList.contains('card-temp') ? 
                        `translate(calc(-50% + ${x * depth}px), ${y * depth}px)` : 
                        `translate(${x * depth}px, ${y * depth}px)`;
                });
            });
        });
    </script>
</body>
</html>

Metehan

HTML

CSS

JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS