<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Luas Permukaan Balok</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
        }

        h1 {
            font-size: 3rem;
            margin-bottom: 15px;
            color: #ffdd00;
            text-shadow: 0 0 15px rgba(255, 221, 0, 0.5);
        }

        .subtitle {
            font-size: 1.3rem;
            color: #e0e0e0;
            margin-bottom: 10px;
        }

        .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: start;
        }

        .calculator-section {
            background: rgba(255, 255, 255, 0.05);
            padding: 30px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .formula-box {
            background: rgba(0, 0, 0, 0.3);
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 25px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .formula {
            font-size: 1.8rem;
            font-weight: bold;
            color: #4ecdc4;
            text-align: center;
            line-height: 1.4;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 10px;
            color: #e0e0e0;
            font-size: 1.1rem;
            font-weight: 500;
        }

        .input-group input {
            width: 100%;
            padding: 15px;
            border-radius: 10px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            background: rgba(0, 0, 0, 0.3);
            color: white;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

        .input-group input:focus {
            outline: none;
            border-color: #4ecdc4;
            box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.3);
        }

        .calculate-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #4ecdc4, #45b7d1);
            border: none;
            border-radius: 10px;
            color: white;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

        .calculate-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(78, 205, 196, 0.4);
        }

        .result {
            margin-top: 25px;
            padding: 20px;
            background: rgba(78, 205, 196, 0.15);
            border-radius: 10px;
            border-left: 5px solid #4ecdc4;
            font-size: 1.3rem;
            display: none;
            animation: fadeIn 0.5s ease;
        }

        .visualization {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .cube-container {
            width: 300px;
            height: 300px;
            perspective: 1000px;
            margin: 20px 0;
        }

        .cube {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 1s ease;
            transform: rotateX(-20deg) rotateY(-20deg);
        }

        .face {
            position: absolute;
            width: 200px;
            height: 120px;
            background: linear-gradient(135deg, #4ecdc4, #45b7d1);
            border: 2px solid white;
            opacity: 0.9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: bold;
            color: white;
        }

        .face-front {
            transform: translateZ(60px);
            background: linear-gradient(135deg, #4ecdc4, #45b7d1);
        }

        .face-back {
            transform: translateZ(-60px) rotateY(180deg);
            background: linear-gradient(135deg, #45b7d1, #4ecdc4);
        }

        .face-right {
            transform: rotateY(90deg) translateZ(100px);
            width: 120px;
            background: linear-gradient(135deg, #36b1a0, #2d9585);
        }

        .face-left {
            transform: rotateY(-90deg) translateZ(100px);
            width: 120px;
            background: linear-gradient(135deg, #2d9585, #36b1a0);
        }

        .face-top {
            transform: rotateX(90deg) translateZ(60px);
            height: 120px;
            background: linear-gradient(135deg, #2a7a6d, #23655a);
        }

        .face-bottom {
            transform: rotateX(-90deg) translateZ(60px);
            height: 120px;
            background: linear-gradient(135deg, #23655a, #2a7a6d);
        }

        .dimension-label {
            position: absolute;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.9rem;
            font-weight: bold;
            pointer-events: none;
        }

        .controls {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .control-btn {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .control-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        .explanation {
            margin-top: 30px;
            padding: 25px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .explanation h3 {
            color: #ffdd00;
            margin-bottom: 15px;
            font-size: 1.5rem;
        }

        .explanation p {
            line-height: 1.6;
            color: #e0e0e0;
            margin-bottom: 10px;
        }

        .surface-breakdown {
            margin-top: 20px;
        }

        .surface-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            margin-bottom: 8px;
        }

        .examples {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        .example-card {
            background: rgba(255, 255, 255, 0.05);
            padding: 15px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        .example-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.1);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes rotate {
            from { transform: rotateX(-20deg) rotateY(0deg); }
            to { transform: rotateX(-20deg) rotateY(360deg); }
        }

        @media (max-width: 968px) {
            .content {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .cube-container {
                width: 250px;
                height: 250px;
            }
            
            .face {
                width: 160px;
                height: 100px;
            }
            
            .face-right, .face-left {
                width: 100px;
                transform: rotateY(90deg) translateZ(80px);
            }
            
            .face-left {
                transform: rotateY(-90deg) translateZ(80px);
            }
            
            .face-top, .face-bottom {
                height: 100px;
                transform: rotateX(90deg) translateZ(50px);
            }
            
            .face-bottom {
                transform: rotateX(-90deg) translateZ(50px);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-cube"></i> Kalkulator Luas Permukaan Balok</h1>
            <p class="subtitle">Hitung luas permukaan balok dengan visualisasi 3D interaktif</p>
        </header>

        <div class="content">
            <div class="calculator-section">
                <div class="formula-box">
                    <div class="formula">L = 2 × (p×l + p×t + l×t)</div>
                    <p style="margin-top: 10px; color: #ccc; text-align: center;">
                        Luas = 2 × (panjang×lebar + panjang×tinggi + lebar×tinggi)
                    </p>
                </div>
                
                <div class="input-group">
                    <label for="balok-panjang"><i class="fas fa-ruler-vertical"></i> Panjang (p):</label>
                    <input type="number" id="balok-panjang" placeholder="Masukkan panjang" step="any" min="0">
                </div>
                
                <div class="input-group">
                    <label for="balok-lebar"><i class="fas fa-ruler-horizontal"></i> Lebar (l):</label>
                    <input type="number" id="balok-lebar" placeholder="Masukkan lebar" step="any" min="0">
                </div>
                
                <div class="input-group">
                    <label for="balok-tinggi"><i class="fas fa-arrows-alt-v"></i> Tinggi (t):</label>
                    <input type="number" id="balok-tinggi" placeholder="Masukkan tinggi" step="any" min="0">
                </div>
                
                <button class="calculate-btn" onclick="calculateSurfaceArea()">
                    <i class="fas fa-calculator"></i> Hitung Luas Permukaan
                </button>
                
                <div class="result" id="balok-result">
                    <i class="fas fa-check-circle"></i> <span id="result-text"></span>
                </div>

                <div class="surface-breakdown" id="surface-breakdown" style="display: none;">
                    <h4 style="color: #ffdd00; margin-bottom: 15px;">Rincian Perhitungan:</h4>
                    <div class="surface-item">
                        <span>2 × (p×l)</span>
                        <span id="pl-calculation">0</span>
                    </div>
                    <div class="surface-item">
                        <span>2 × (p×t)</span>
                        <span id="pt-calculation">0</span>
                    </div>
                    <div class="surface-item">
                        <span>2 × (l×t)</span>
                        <span id="lt-calculation">0</span>
                    </div>
                    <div class="surface-item" style="background: rgba(78, 205, 196, 0.2); font-weight: bold;">
                        <span>Total Luas Permukaan</span>
                        <span id="total-calculation">0</span>
                    </div>
                </div>
            </div>

            <div class="visualization">
                <h3 style="margin-bottom: 20px; color: #ffdd00;">Visualisasi 3D Balok</h3>
                <div class="cube-container">
                    <div class="cube" id="animated-cube">
                        <div class="face face-front">Depan</div>
                        <div class="face face-back">Belakang</div>
                        <div class="face face-right">Kanan</div>
                        <div class="face face-left">Kiri</div>
                        <div class="face face-top">Atas</div>
                        <div class="face face-bottom">Bawah</div>
                    </div>
                </div>
                
                <div class="controls">
                    <button class="control-btn" onclick="rotateCube()">
                        <i class="fas fa-sync-alt"></i> Putar
                    </button>
                    <button class="control-btn" onclick="resetView()">
                        <i class="fas fa-redo"></i> Reset
                    </button>
                    <button class="control-btn" onclick="toggleAnimation()">
                        <i class="fas fa-play"></i> Auto Rotate
                    </button>
                </div>
                
                <p style="text-align: center; color: #e0e0e0; margin-top: 20px; max-width: 400px;">
                    Balok memiliki 6 sisi dengan 3 pasang sisi yang berhadapan sama besar
                </p>
            </div>
        </div>

        <div class="explanation">
            <h3><i class="fas fa-lightbulb"></i> Penjelasan Luas Permukaan Balok</h3>
            <p>Balok adalah bangun ruang tiga dimensi yang memiliki enam sisi berbentuk persegi panjang. Setiap pasang sisi yang berhadapan memiliki ukuran yang sama.</p>
            
            <p><strong>Rumus Luas Permukaan Balok:</strong> L = 2 × (p×l + p×t + l×t)</p>
            
            <p><strong>Penjelasan Komponen:</strong></p>
            <ul style="color: #e0e0e0; margin-left: 20px; line-height: 1.6;">
                <li><strong>2 × (p×l)</strong> : Luas sisi depan + belakang</li>
                <li><strong>2 × (p×t)</strong> : Luas sisi kanan + kiri</li>
                <li><strong>2 × (l×t)</strong> : Luas sisi atas + bawah</li>
            </ul>

            <div class="examples">
                <div class="example-card" onclick="setExample(8, 5, 4)">
                    <strong>Contoh 1</strong>
                    <p>p = 8 cm, l = 5 cm, t = 4 cm</p>
                    <p>L = 2×(8×5 + 8×4 + 5×4) = 184 cm²</p>
                </div>
                <div class="example-card" onclick="setExample(10, 6, 3)">
                    <strong>Contoh 2</strong>
                    <p>p = 10 m, l = 6 m, t = 3 m</p>
                    <p>L = 2×(10×6 + 10×3 + 6×3) = 216 m²</p>
                </div>
                <div class="example-card" onclick="setExample(12, 8, 5)">
                    <strong>Contoh 3</strong>
                    <p>p = 12 cm, l = 8 cm, t = 5 cm</p>
                    <p>L = 2×(12×8 + 12×5 + 8×5) = 392 cm²</p>
                </div>
                <div class="example-card" onclick="setExample(15, 10, 7)">
                    <strong>Contoh 4</strong>
                    <p>p = 15 cm, l = 10 cm, t = 7 cm</p>
                    <p>L = 2×(15×10 + 15×7 + 10×7) = 650 cm²</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        let isRotating = false;
        let rotationInterval;

        // Fungsi untuk menghitung luas permukaan balok
        function calculateSurfaceArea() {
            const panjang = parseFloat(document.getElementById('balok-panjang').value);
            const lebar = parseFloat(document.getElementById('balok-lebar').value);
            const tinggi = parseFloat(document.getElementById('balok-tinggi').value);
            const resultElement = document.getElementById('balok-result');
            const resultText = document.getElementById('result-text');
            const breakdown = document.getElementById('surface-breakdown');
            
            if (isNaN(panjang) || isNaN(lebar) || isNaN(tinggi) || 
                panjang <= 0 || lebar <= 0 || tinggi <= 0) {
                resultText.innerHTML = "Masukkan panjang, lebar, dan tinggi yang valid!";
                resultElement.style.display = 'block';
                resultElement.style.background = 'rgba(255, 100, 100, 0.15)';
                resultElement.style.borderLeftColor = '#ff6b6b';
                breakdown.style.display = 'none';
                return;
            }
            
            // Hitung komponen
            const pl = panjang * lebar;
            const pt = panjang * tinggi;
            const lt = lebar * tinggi;
            const total = 2 * (pl + pt + lt);
            
            // Update hasil
            resultText.innerHTML = `Luas Permukaan Balok = <strong>${total.toFixed(2)}</strong> satuan²`;
            resultElement.style.display = 'block';
            resultElement.style.background = 'rgba(78, 205, 196, 0.15)';
            resultElement.style.borderLeftColor = '#4ecdc4';
            
            // Update rincian
            document.getElementById('pl-calculation').textContent = `2 × ${pl} = ${2 * pl}`;
            document.getElementById('pt-calculation').textContent = `2 × ${pt} = ${2 * pt}`;
            document.getElementById('lt-calculation').textContent = `2 × ${lt} = ${2 * lt}`;
            document.getElementById('total-calculation').textContent = total.toFixed(2);
            breakdown.style.display = 'block';
            
            // Update visualisasi
            updateCubeSize(panjang, lebar, tinggi);
        }
        
        // Fungsi untuk memperbarui ukuran kubus
        function updateCubeSize(p, l, t) {
            const cube = document.getElementById('animated-cube');
            const scale = Math.min(150 / Math.max(p, l, t), 1.5); // Skala maksimal 1.5
            
            // Normalisasi ukuran untuk visualisasi
            const normP = p * scale;
            const normL = l * scale;
            const normT = t * scale;
            
            const faces = cube.getElementsByClassName('face');
            
            // Update ukuran dan posisi setiap sisi
            faces[0].style.width = `${normP}px`; // depan
            faces[0].style.height = `${normT}px`;
            faces[0].style.transform = `translateZ(${normL/2}px)`;
            
            faces[1].style.width = `${normP}px`; // belakang
            faces[1].style.height = `${normT}px`;
            faces[1].style.transform = `translateZ(-${normL/2}px) rotateY(180deg)`;
            
            faces[2].style.width = `${normL}px`; // kanan
            faces[2].style.height = `${normT}px`;
            faces[2].style.transform = `rotateY(90deg) translateZ(${normP/2}px)`;
            
            faces[3].style.width = `${normL}px`; // kiri
            faces[3].style.height = `${normT}px`;
            faces[3].style.transform = `rotateY(-90deg) translateZ(${normP/2}px)`;
            
            faces[4].style.width = `${normP}px`; // atas
            faces[4].style.height = `${normL}px`;
            faces[4].style.transform = `rotateX(90deg) translateZ(${normT/2}px)`;
            
            faces[5].style.width = `${normP}px`; // bawah
            faces[5].style.height = `${normL}px`;
            faces[5].style.transform = `rotateX(-90deg) translateZ(${normT/2}px)`;
        }
        
        // Fungsi untuk memutar kubus
        function rotateCube() {
            const cube = document.getElementById('animated-cube');
            const currentRotation = cube.style.transform || 'rotateX(-20deg) rotateY(-20deg)';
            cube.style.transition = 'transform 1s ease';
            cube.style.transform = currentRotation.replace(/rotateY\([^)]*\)/, 'rotateY(340deg)');
            
            setTimeout(() => {
                cube.style.transition = 'none';
                cube.style.transform = currentRotation.replace(/rotateY\([^)]*\)/, 'rotateY(-20deg)');
            }, 1000);
        }
        
        // Fungsi untuk reset view
        function resetView() {
            const cube = document.getElementById('animated-cube');
            cube.style.transition = 'transform 1s ease';
            cube.style.transform = 'rotateX(-20deg) rotateY(-20deg)';
        }
        
        // Fungsi untuk toggle animasi rotasi
        function toggleAnimation() {
            const cube = document.getElementById('animated-cube');
            const button = event.target.closest('button');
            
            if (!isRotating) {
                cube.style.animation = 'rotate 10s linear infinite';
                button.innerHTML = '<i class="fas fa-pause"></i> Stop';
                isRotating = true;
            } else {
                cube.style.animation = 'none';
                button.innerHTML = '<i class="fas fa-play"></i> Auto Rotate';
                isRotating = false;
            }
        }
        
        // Fungsi untuk mengisi contoh
        function setExample(p, l, t) {
            document.getElementById('balok-panjang').value = p;
            document.getElementById('balok-lebar').value = l;
            document.getElementById('balok-tinggi').value = t;
            calculateSurfaceArea();
        }
        
        // Event listener untuk input agar bisa menggunakan Enter
        document.getElementById('balok-panjang').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') calculateSurfaceArea();
        });
        
        document.getElementById('balok-lebar').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') calculateSurfaceArea();
        });
        
        document.getElementById('balok-tinggi').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') calculateSurfaceArea();
        });
        
        // Inisialisasi
        document.addEventListener('DOMContentLoaded', function() {
            // Set contoh default
            setExample(8, 5, 4);
        });
    </script>
</body>
</html>
