| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>POWER DOMINATION CALCULATOR</title> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Oswald:wght@700&display=swap'); |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| body { |
| font-family: 'Oswald', 'Impact', sans-serif; |
| background: #0a0a0a; |
| background-image: |
| url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1920&q=80'), |
| linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(20,10,5,0.98) 100%); |
| background-blend-mode: overlay; |
| background-size: cover; |
| background-attachment: fixed; |
| background-position: center; |
| color: #e4e4e4; |
| min-height: 100vh; |
| padding: 20px; |
| } |
| body::before { |
| content: ''; |
| position: fixed; |
| top: 0; left: 0; right: 0; bottom: 0; |
| background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(30,15,0,0.85) 100%); |
| pointer-events: none; |
| z-index: -1; |
| } |
| .container { |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| h1 { |
| text-align: center; |
| margin-bottom: 10px; |
| color: #ff6600; |
| font-size: 3rem; |
| font-family: 'Black Ops One', 'Impact', sans-serif; |
| text-transform: uppercase; |
| letter-spacing: 6px; |
| text-shadow: 0 0 30px rgba(255,102,0,0.8), 0 0 60px rgba(255,50,0,0.4), 3px 3px 0 #000; |
| } |
| .subtitle { |
| text-align: center; |
| color: #999; |
| margin-bottom: 30px; |
| text-transform: uppercase; |
| letter-spacing: 4px; |
| font-size: 0.9rem; |
| } |
| .price-toggle { |
| display: flex; |
| justify-content: center; |
| gap: 15px; |
| margin-bottom: 30px; |
| flex-wrap: wrap; |
| } |
| .price-btn { |
| padding: 15px 30px; |
| border: 3px solid #ff6600; |
| background: linear-gradient(180deg, rgba(255,102,0,0.2) 0%, rgba(100,40,0,0.3) 100%); |
| color: #ff9944; |
| border-radius: 0; |
| cursor: pointer; |
| font-size: 1rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| transition: all 0.3s; |
| clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); |
| } |
| .price-btn.active { |
| background: linear-gradient(180deg, #ff6600 0%, #cc4400 100%); |
| color: #000; |
| box-shadow: 0 0 30px rgba(255,102,0,0.6); |
| } |
| .price-btn:hover { |
| background: linear-gradient(180deg, rgba(255,102,0,0.4) 0%, rgba(150,60,0,0.5) 100%); |
| box-shadow: 0 0 20px rgba(255,102,0,0.4); |
| } |
| .current-price { |
| text-align: center; |
| font-size: 1.4rem; |
| margin-bottom: 30px; |
| color: #ff9944; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| } |
| .charts-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); |
| gap: 25px; |
| margin-bottom: 30px; |
| } |
| .chart-card { |
| background: linear-gradient(145deg, rgba(30,20,10,0.95) 0%, rgba(15,10,5,0.98) 100%); |
| border-radius: 0; |
| padding: 25px; |
| border: 3px solid #3a2a1a; |
| box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,150,50,0.1); |
| position: relative; |
| } |
| .chart-card::before { |
| content: ''; |
| position: absolute; |
| top: 8px; left: 8px; |
| width: 12px; height: 12px; |
| background: radial-gradient(circle at 30% 30%, #664422 0%, #332211 100%); |
| border-radius: 50%; |
| box-shadow: calc(100% - 28px) 0 0 0 #332211; |
| } |
| .chart-card h3 { |
| color: #ff9944; |
| margin-bottom: 15px; |
| font-size: 1.2rem; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| font-weight: 700; |
| } |
| .table-container { |
| overflow-x: auto; |
| margin-bottom: 30px; |
| border: 3px solid #3a2a1a; |
| box-shadow: 0 10px 40px rgba(0,0,0,0.6); |
| } |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| background: linear-gradient(180deg, rgba(25,18,10,0.98) 0%, rgba(15,10,5,0.99) 100%); |
| } |
| th, td { |
| padding: 15px; |
| text-align: left; |
| border-bottom: 1px solid #2a1a0a; |
| } |
| th { |
| background: linear-gradient(180deg, #3a2510 0%, #2a1a0a 100%); |
| color: #ff9944; |
| font-weight: 700; |
| white-space: nowrap; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| border-bottom: 2px solid #ff6600; |
| } |
| tr:hover { |
| background: rgba(255,102,0,0.1); |
| } |
| tr:nth-child(even) { |
| background: rgba(0,0,0,0.2); |
| } |
| tr:nth-child(even):hover { |
| background: rgba(255,102,0,0.15); |
| } |
| .appliance-name { |
| font-weight: 700; |
| color: #fff; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| .appliance-details { |
| font-size: 0.8rem; |
| color: #777; |
| margin-top: 4px; |
| font-weight: 400; |
| } |
| .slider-cell { |
| min-width: 200px; |
| } |
| .slider-container { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| input[type="range"] { |
| flex: 1; |
| height: 10px; |
| -webkit-appearance: none; |
| background: linear-gradient(180deg, #1a0a00 0%, #2a1a0a 100%); |
| border-radius: 0; |
| cursor: pointer; |
| border: 2px solid #4a3020; |
| } |
| input[type="range"]::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 24px; |
| height: 24px; |
| background: linear-gradient(145deg, #ff6600 0%, #cc4400 100%); |
| border-radius: 0; |
| cursor: pointer; |
| border: 2px solid #ff9944; |
| box-shadow: 0 0 15px rgba(255,102,0,0.6); |
| } |
| .slider-value { |
| min-width: 55px; |
| text-align: right; |
| font-weight: 900; |
| color: #ff6600; |
| font-size: 1.1rem; |
| } |
| .power-value { |
| color: #ff4444; |
| font-weight: 700; |
| } |
| .kwh-value { |
| color: #ffaa00; |
| font-weight: 700; |
| } |
| .cost-value { |
| color: #66cc66; |
| font-weight: 700; |
| } |
| .summary-row { |
| background: linear-gradient(90deg, rgba(255,102,0,0.2) 0%, rgba(255,50,0,0.1) 100%) !important; |
| font-weight: bold; |
| } |
| .summary-row td { |
| color: #ff6600; |
| font-size: 1.2rem; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| .info-cards { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 25px; |
| margin-bottom: 30px; |
| } |
| .info-card { |
| background: linear-gradient(145deg, rgba(30,20,10,0.95) 0%, rgba(15,10,5,0.98) 100%); |
| border-radius: 0; |
| padding: 25px; |
| border: 3px solid #3a2a1a; |
| text-align: center; |
| position: relative; |
| box-shadow: 0 10px 40px rgba(0,0,0,0.5); |
| } |
| .info-card::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; left: 0; right: 0; |
| height: 4px; |
| background: linear-gradient(90deg, #ff6600 0%, #ff9944 50%, #ff6600 100%); |
| } |
| .info-card h4 { |
| color: #888; |
| font-size: 0.85rem; |
| margin-bottom: 10px; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| } |
| .info-card .value { |
| font-size: 2.5rem; |
| font-weight: 900; |
| text-shadow: 0 0 20px currentColor; |
| } |
| .info-card .unit { |
| color: #666; |
| font-size: 0.9rem; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| footer { |
| text-align: center; |
| color: #555; |
| padding: 30px; |
| font-size: 0.85rem; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| } |
| footer a { |
| color: #ff6600; |
| } |
| @media (max-width: 768px) { |
| .charts-grid { |
| grid-template-columns: 1fr; |
| } |
| th, td { |
| padding: 10px 8px; |
| font-size: 0.9rem; |
| } |
| } |
| |
| .modal-overlay { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.95); |
| z-index: 1000; |
| justify-content: center; |
| align-items: center; |
| } |
| .modal-overlay.active { |
| display: flex; |
| } |
| .modal { |
| background: linear-gradient(145deg, rgba(30,20,10,0.99) 0%, rgba(15,10,5,1) 100%); |
| border-radius: 0; |
| padding: 35px; |
| width: 90%; |
| max-width: 500px; |
| border: 4px solid #ff6600; |
| box-shadow: 0 0 60px rgba(255,102,0,0.4), 0 20px 60px rgba(0,0,0,0.8); |
| } |
| .modal h2 { |
| color: #ff6600; |
| margin-bottom: 25px; |
| font-size: 1.8rem; |
| text-transform: uppercase; |
| letter-spacing: 3px; |
| font-family: 'Black Ops One', 'Impact', sans-serif; |
| } |
| .form-group { |
| margin-bottom: 20px; |
| } |
| .form-group label { |
| display: block; |
| color: #888; |
| margin-bottom: 8px; |
| font-size: 0.85rem; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| font-weight: 600; |
| } |
| .form-group input { |
| width: 100%; |
| padding: 15px; |
| border: 2px solid #4a3020; |
| border-radius: 0; |
| background: linear-gradient(180deg, #1a0a00 0%, #2a1a0a 100%); |
| color: #fff; |
| font-size: 1rem; |
| font-weight: 600; |
| } |
| .form-group input:focus { |
| outline: none; |
| border-color: #ff6600; |
| box-shadow: 0 0 20px rgba(255,102,0,0.3); |
| } |
| .modal-buttons { |
| display: flex; |
| gap: 15px; |
| justify-content: flex-end; |
| margin-top: 30px; |
| } |
| .btn { |
| padding: 15px 30px; |
| border: none; |
| border-radius: 0; |
| cursor: pointer; |
| font-size: 1rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| transition: all 0.3s; |
| } |
| .btn-primary { |
| background: linear-gradient(180deg, #ff6600 0%, #cc4400 100%); |
| color: #000; |
| border: 2px solid #ff9944; |
| } |
| .btn-primary:hover { |
| box-shadow: 0 0 30px rgba(255,102,0,0.6); |
| } |
| .btn-secondary { |
| background: transparent; |
| border: 2px solid #555; |
| color: #888; |
| } |
| .btn-secondary:hover { |
| border-color: #888; |
| color: #fff; |
| } |
| .btn-danger { |
| background: linear-gradient(180deg, #aa2222 0%, #881111 100%); |
| color: #ffaaaa; |
| border: 2px solid #cc4444; |
| } |
| .btn-danger:hover { |
| box-shadow: 0 0 20px rgba(255,50,50,0.5); |
| } |
| .btn-add { |
| background: linear-gradient(180deg, #ff6600 0%, #cc4400 100%); |
| color: #000; |
| margin-bottom: 20px; |
| border: 2px solid #ff9944; |
| font-family: 'Oswald', sans-serif; |
| } |
| .btn-add:hover { |
| box-shadow: 0 0 30px rgba(255,102,0,0.6); |
| } |
| .action-buttons { |
| display: flex; |
| gap: 8px; |
| } |
| .btn-icon { |
| padding: 10px 15px; |
| border: none; |
| border-radius: 0; |
| cursor: pointer; |
| font-size: 0.8rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| transition: all 0.3s; |
| } |
| .btn-edit { |
| background: linear-gradient(180deg, rgba(255,102,0,0.3) 0%, rgba(200,80,0,0.2) 100%); |
| color: #ff9944; |
| border: 1px solid #ff6600; |
| } |
| .btn-edit:hover { |
| background: linear-gradient(180deg, rgba(255,102,0,0.5) 0%, rgba(200,80,0,0.4) 100%); |
| } |
| .btn-delete { |
| background: linear-gradient(180deg, rgba(180,50,50,0.3) 0%, rgba(120,30,30,0.2) 100%); |
| color: #ff6666; |
| border: 1px solid #aa4444; |
| } |
| .btn-delete:hover { |
| background: linear-gradient(180deg, rgba(180,50,50,0.5) 0%, rgba(120,30,30,0.4) 100%); |
| } |
| .table-actions { |
| display: flex; |
| justify-content: flex-end; |
| margin-bottom: 15px; |
| } |
| |
| |
| .hero-banner { |
| text-align: center; |
| margin-bottom: 30px; |
| padding: 40px 20px; |
| position: relative; |
| background: linear-gradient(90deg, transparent 0%, rgba(255,102,0,0.1) 50%, transparent 100%); |
| } |
| .hero-banner::before { |
| content: '//'; |
| position: absolute; |
| left: 20%; |
| top: 50%; |
| transform: translateY(-50%); |
| font-size: 4rem; |
| color: rgba(255,102,0,0.2); |
| font-weight: 900; |
| } |
| .hero-banner::after { |
| content: '//'; |
| position: absolute; |
| right: 20%; |
| top: 50%; |
| transform: translateY(-50%); |
| font-size: 4rem; |
| color: rgba(255,102,0,0.2); |
| font-weight: 900; |
| } |
| |
| |
| |
| |
| @keyframes blink { |
| 0%, 50% { opacity: 1; } |
| 51%, 100% { opacity: 0; } |
| } |
| @keyframes rainbow { |
| 0% { color: #ff0000; } |
| 17% { color: #ff8800; } |
| 33% { color: #ffff00; } |
| 50% { color: #00ff00; } |
| 67% { color: #0088ff; } |
| 83% { color: #ff00ff; } |
| 100% { color: #ff0000; } |
| } |
| @keyframes spin { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
| @keyframes bounce { |
| 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } |
| 50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); } |
| } |
| @keyframes marquee { |
| 0% { transform: translateX(100%); } |
| 100% { transform: translateX(-100%); } |
| } |
| |
| .blink { |
| animation: blink 0.8s infinite; |
| } |
| .rainbow { |
| animation: rainbow 2s linear infinite; |
| font-weight: 900; |
| } |
| |
| |
| .power-gallery { |
| position: relative; |
| min-height: 250px; |
| margin: 40px 0; |
| } |
| .power-image { |
| position: absolute; |
| width: 120px; |
| height: 120px; |
| border: 4px ridge gold; |
| box-shadow: 5px 5px 0 #000; |
| object-fit: cover; |
| transition: all 0.2s; |
| animation: bounce 1s ease-in-out infinite; |
| } |
| .power-image:hover { |
| z-index: 100 !important; |
| transform: scale(1.3) rotate(0deg) !important; |
| box-shadow: 0 0 30px yellow, 10px 10px 0 #000; |
| } |
| |
| |
| .power-image:nth-child(1) { left: 5%; top: 10px; transform: rotate(-15deg); --rot: -15deg; animation-delay: 0s; z-index: 6; } |
| .power-image:nth-child(2) { left: 20%; top: 80px; transform: rotate(8deg); --rot: 8deg; animation-delay: 0.1s; z-index: 5; } |
| .power-image:nth-child(3) { left: 38%; top: 20px; transform: rotate(-5deg); --rot: -5deg; animation-delay: 0.2s; z-index: 4; } |
| .power-image:nth-child(4) { left: 52%; top: 90px; transform: rotate(12deg); --rot: 12deg; animation-delay: 0.3s; z-index: 3; } |
| .power-image:nth-child(5) { left: 68%; top: 5px; transform: rotate(-10deg); --rot: -10deg; animation-delay: 0.4s; z-index: 2; } |
| .power-image:nth-child(6) { left: 82%; top: 70px; transform: rotate(6deg); --rot: 6deg; animation-delay: 0.5s; z-index: 1; } |
| |
| |
| .power-gallery.second .power-image:nth-child(1) { left: 15%; top: 30px; transform: rotate(10deg); --rot: 10deg; } |
| .power-gallery.second .power-image:nth-child(2) { left: 42%; top: 60px; transform: rotate(-8deg); --rot: -8deg; } |
| .power-gallery.second .power-image:nth-child(3) { left: 70%; top: 20px; transform: rotate(15deg); --rot: 15deg; } |
| |
| |
| .marquee-container { |
| overflow: hidden; |
| background: linear-gradient(90deg, #000 0%, #330000 50%, #000 100%); |
| border-top: 3px ridge gold; |
| border-bottom: 3px ridge gold; |
| padding: 10px 0; |
| margin: 30px 0; |
| } |
| .marquee-text { |
| display: inline-block; |
| white-space: nowrap; |
| animation: marquee 10s linear infinite; |
| font-size: 1.5rem; |
| font-weight: 900; |
| text-shadow: 2px 2px #000; |
| } |
| |
| |
| .bullet-divider { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 15px; |
| margin: 30px 0; |
| color: #ff6600; |
| font-size: 1.5rem; |
| font-weight: 900; |
| text-shadow: 2px 2px #000, 0 0 10px #ff6600; |
| } |
| .bullet-divider::before { |
| content: '>>> '; |
| } |
| .bullet-divider::after { |
| content: ' <<<'; |
| } |
| |
| |
| .side-decor { |
| position: fixed; |
| width: 100px; |
| height: auto; |
| opacity: 0.4; |
| pointer-events: none; |
| z-index: 1; |
| border: 3px ridge silver; |
| } |
| .side-decor.left { |
| left: 10px; |
| top: 30%; |
| transform: rotate(-10deg); |
| animation: bounce 2s ease-in-out infinite; |
| } |
| .side-decor.right { |
| right: 10px; |
| top: 60%; |
| transform: rotate(10deg); |
| animation: bounce 2s ease-in-out infinite; |
| animation-delay: 1s; |
| } |
| |
| |
| .under-construction { |
| background: repeating-linear-gradient( |
| 45deg, |
| #000, |
| #000 10px, |
| #ff6600 10px, |
| #ff6600 20px |
| ); |
| padding: 5px; |
| margin: 20px 0; |
| } |
| .under-construction-inner { |
| background: #000; |
| padding: 10px; |
| text-align: center; |
| font-weight: 900; |
| color: yellow; |
| font-size: 1.2rem; |
| } |
| |
| |
| .visitor-counter { |
| text-align: center; |
| margin: 20px 0; |
| font-family: 'Courier New', monospace; |
| } |
| .counter-display { |
| background: #000; |
| border: 2px inset #888; |
| padding: 5px 15px; |
| display: inline-block; |
| color: #0f0; |
| font-size: 1.5rem; |
| font-weight: bold; |
| letter-spacing: 3px; |
| } |
| |
| |
| .spin-icon { |
| display: inline-block; |
| animation: spin 3s linear infinite; |
| font-size: 2rem; |
| } |
| |
| |
| .guestbook-link { |
| text-align: center; |
| margin: 20px 0; |
| } |
| .guestbook-link a { |
| color: #00ffff; |
| font-size: 1.2rem; |
| text-decoration: underline; |
| } |
| .guestbook-link a:hover { |
| color: #ff00ff; |
| } |
| |
| |
| .info-card .power-icon { |
| font-size: 2rem; |
| margin-bottom: 10px; |
| } |
| |
| |
| .comic-sans { |
| font-family: 'Comic Sans MS', cursive, sans-serif !important; |
| } |
| |
| |
| .webring { |
| text-align: center; |
| margin: 30px 0; |
| padding: 15px; |
| border: 2px ridge gold; |
| background: rgba(0,0,0,0.8); |
| } |
| .webring img { |
| vertical-align: middle; |
| margin: 0 10px; |
| } |
| |
| |
| @keyframes pulse-new { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.2); } |
| } |
| .new-badge { |
| display: inline-block; |
| background: #ff0000; |
| color: yellow; |
| font-weight: 900; |
| font-size: 0.7rem; |
| padding: 2px 6px; |
| animation: pulse-new 0.5s infinite, blink 1s infinite; |
| border: 1px solid yellow; |
| margin-left: 5px; |
| vertical-align: super; |
| } |
| |
| |
| .email-link { |
| display: inline-block; |
| margin: 15px 0; |
| padding: 10px 20px; |
| background: linear-gradient(180deg, #0000aa 0%, #000066 100%); |
| border: 2px outset #6666ff; |
| color: #ffff00 !important; |
| text-decoration: none; |
| font-weight: 900; |
| } |
| .email-link:hover { |
| background: linear-gradient(180deg, #0000cc 0%, #000088 100%); |
| } |
| |
| |
| .fire-bar { |
| height: 30px; |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30"><text y="22" font-size="20">🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥</text></svg>') repeat-x; |
| margin: 20px 0; |
| } |
| |
| |
| .stars { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: 0; |
| background: |
| radial-gradient(1px 1px at 20px 30px, white, transparent), |
| radial-gradient(1px 1px at 40px 70px, white, transparent), |
| radial-gradient(1px 1px at 50px 160px, white, transparent), |
| radial-gradient(1px 1px at 90px 40px, white, transparent), |
| radial-gradient(1px 1px at 130px 80px, white, transparent), |
| radial-gradient(1px 1px at 160px 120px, white, transparent), |
| radial-gradient(1px 1px at 200px 50px, rgba(255,255,255,0.5), transparent), |
| radial-gradient(1px 1px at 250px 90px, rgba(255,255,255,0.5), transparent), |
| radial-gradient(1px 1px at 300px 150px, white, transparent); |
| background-size: 350px 200px; |
| animation: twinkle 5s ease-in-out infinite; |
| opacity: 0.3; |
| } |
| @keyframes twinkle { |
| 0%, 100% { opacity: 0.3; } |
| 50% { opacity: 0.5; } |
| } |
| |
| |
| .hit-counter-frame { |
| border: 3px inset #888; |
| background: #000; |
| padding: 8px 15px; |
| display: inline-block; |
| } |
| |
| |
| .award-badge { |
| text-align: center; |
| margin: 20px 0; |
| } |
| .award-badge span { |
| display: inline-block; |
| padding: 10px 20px; |
| border: 3px ridge gold; |
| background: linear-gradient(180deg, #330000 0%, #110000 100%); |
| color: gold; |
| font-weight: 900; |
| font-size: 0.9rem; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="stars"></div> |
|
|
| |
| <img src="https://images.unsplash.com/photo-1507666405895-422eee7d517f?w=300&q=80" alt="" class="side-decor left" title="WOLF"> |
| <img src="https://images.unsplash.com/photo-1530595467537-0b5996c41f2d?w=300&q=80" alt="" class="side-decor right" title="GRIZZLY"> |
|
|
| <div class="container"> |
| |
| <div class="under-construction"> |
| <div class="under-construction-inner"> |
| <span class="spin-icon">***</span> |
| <span class="blink"> WELCOME TO POWER DOMINATION </span> |
| <span class="spin-icon">***</span> |
| </div> |
| </div> |
|
|
| <div class="hero-banner"> |
| <h1 class="rainbow">POWER DOMINATION</h1> |
| <p class="subtitle comic-sans">Conquer your electricity. Control your costs. Dominate your energy.</p> |
| <span class="new-badge">NEW!</span> |
| </div> |
|
|
| |
| <div class="award-badge"> |
| <span>*** ALPHA MALE APPROVED WEBSITE ***</span> |
| </div> |
|
|
| |
| <div class="fire-bar"></div> |
|
|
| |
| <div class="visitor-counter"> |
| <p style="color: #888; margin-bottom: 5px;">YOU ARE VISITOR NUMBER:</p> |
| <div class="hit-counter-frame"> |
| <span class="counter-display">001337</span> |
| </div> |
| </div> |
|
|
| |
| <div class="power-gallery"> |
| <img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=300&q=80" alt="Heavy weights" class="power-image" title="IRON"> |
| <img src="https://images.unsplash.com/photo-1564415315949-7a0c4c73aab4?w=300&q=80" alt="Gorilla" class="power-image" title="PRIMAL"> |
| <img src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=300&q=80" alt="Explosion fire" class="power-image" title="DESTRUCTION"> |
| <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300&q=80" alt="Shark" class="power-image" title="APEX PREDATOR"> |
| <img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?w=300&q=80" alt="Extreme sports" class="power-image" title="NO FEAR"> |
| <img src="https://images.unsplash.com/photo-1605296867424-35fc25c9212a?w=300&q=80" alt="Skull" class="power-image" title="DEATH"> |
| </div> |
|
|
| |
| <div class="marquee-container"> |
| <span class="marquee-text rainbow">*** CALCULATE YOUR POWER *** DOMINATE YOUR ENERGY *** CRUSH YOUR ELECTRICITY BILLS *** BECOME THE ALPHA OF WATTS ***</span> |
| </div> |
|
|
| <div class="bullet-divider"><span class="blink">DOMINATE YOUR WATTS</span></div> |
|
|
| <div class="price-toggle"> |
| <button class="price-btn active" onclick="setPricing('norgespris')">NORGESPRIS (0.50 KR/KWH)</button> |
| <button class="price-btn" onclick="setPricing('spot')">OSLO SPOT (~1.30 KR/KWH)</button> |
| </div> |
| <div class="current-price">CURRENT RATE: <span id="currentRate">0.50</span> KR/KWH</div> |
|
|
| <div class="table-actions"> |
| <button class="btn btn-add" onclick="openModal()">+ ADD WEAPON</button> |
| </div> |
| <div class="table-container"> |
| <table> |
| <thead> |
| <tr> |
| <th>Appliance</th> |
| <th>Power (W)</th> |
| <th class="slider-cell">Usage Time</th> |
| <th>Hours/Day</th> |
| <th>Hours/Month</th> |
| <th>kWh/Month</th> |
| <th>Cost/Month</th> |
| <th>Actions</th> |
| </tr> |
| </thead> |
| <tbody id="applianceTable"> |
| </tbody> |
| </table> |
| </div> |
|
|
| <div class="info-cards"> |
| <div class="info-card"> |
| <h4>Total Monthly Consumption</h4> |
| <div class="value kwh-value" id="totalKwh">0</div> |
| <div class="unit">kWh/month</div> |
| </div> |
| <div class="info-card"> |
| <h4>Monthly Cost</h4> |
| <div class="value cost-value" id="totalCost">0</div> |
| <div class="unit">kr/month</div> |
| </div> |
| <div class="info-card"> |
| <h4>Daily Average</h4> |
| <div class="value" id="avgDaily" style="color: #ff6600;">0</div> |
| <div class="unit">kWh/day</div> |
| </div> |
| <div class="info-card"> |
| <h4>Peak Power</h4> |
| <div class="value power-value" id="peakPower">0</div> |
| <div class="unit">Watts</div> |
| </div> |
| </div> |
|
|
| <div class="bullet-divider"><span class="rainbow">ANALYZE YOUR POWER</span></div> |
|
|
| |
| <div class="guestbook-link"> |
| <p class="blink" style="color: yellow;">SIGN MY GUESTBOOK!!!</p> |
| <a href="#" onclick="alert('GUESTBOOK COMING SOON! STAY ALPHA!'); return false;">>>> CLICK HERE TO SIGN <<<</a> |
| </div> |
|
|
| |
| <div style="text-align: center;"> |
| <a href="mailto:power@domination.com" class="email-link" onclick="alert('EMAIL SERVER IS UNDER CONSTRUCTION!'); return false;"> |
| EMAIL THE WEBMASTER |
| </a> |
| </div> |
|
|
| |
| <div class="fire-bar"></div> |
|
|
| |
| <div class="power-gallery second" style="min-height: 180px;"> |
| <img src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=300&q=80" alt="Lightning storm" class="power-image" title="RAW POWER"> |
| <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?w=300&q=80" alt="MMA Fighter" class="power-image" title="WARRIOR"> |
| <img src="https://images.unsplash.com/photo-1493804714600-6edb1cd93080?w=300&q=80" alt="Muscle car" class="power-image" title="HORSEPOWER"> |
| </div> |
|
|
| <div class="charts-grid"> |
| <div class="chart-card"> |
| <h3>Power Rating Comparison (Watts)</h3> |
| <canvas id="powerChart"></canvas> |
| </div> |
| <div class="chart-card"> |
| <h3>Usage Time (%)</h3> |
| <canvas id="usagePercentChart"></canvas> |
| </div> |
| <div class="chart-card"> |
| <h3>Monthly Usage (kWh)</h3> |
| <canvas id="usageChart"></canvas> |
| </div> |
| <div class="chart-card"> |
| <h3>Monthly Cost (kr)</h3> |
| <canvas id="costChart"></canvas> |
| </div> |
| </div> |
|
|
| <div class="chart-card" style="margin-bottom: 30px;"> |
| <h3>Cost Waterfall - Cumulative Monthly Cost (kr)</h3> |
| <canvas id="waterfallChart"></canvas> |
| </div> |
|
|
| |
| <div class="modal-overlay" id="modalOverlay" onclick="closeModalOnOverlay(event)"> |
| <div class="modal"> |
| <h2 id="modalTitle">Add Appliance</h2> |
| <form onsubmit="saveAppliance(event)"> |
| <input type="hidden" id="editIndex" value="-1"> |
| <div class="form-group"> |
| <label for="applianceName">Appliance Name</label> |
| <input type="text" id="applianceName" placeholder="e.g., Gaming PC + Monitor" required> |
| </div> |
| <div class="form-group"> |
| <label for="applianceDetails">Description/Details</label> |
| <input type="text" id="applianceDetails" placeholder="e.g., RTX 4090 build with 32GB RAM"> |
| </div> |
| <div class="form-group"> |
| <label for="appliancePower">Power Rating (Watts)</label> |
| <input type="number" id="appliancePower" placeholder="e.g., 800" min="1" max="50000" required> |
| </div> |
| <div class="form-group"> |
| <label for="applianceUsage">Default Usage (%)</label> |
| <input type="number" id="applianceUsage" placeholder="e.g., 25" min="0" max="100" value="10"> |
| </div> |
| <div class="modal-buttons"> |
| <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button> |
| <button type="button" class="btn btn-danger" id="deleteBtn" onclick="deleteAppliance()" style="display: none;">Delete</button> |
| <button type="submit" class="btn btn-primary">Save</button> |
| </div> |
| </form> |
| </div> |
| </div> |
|
|
| |
| <div class="webring"> |
| <p style="color: yellow; font-size: 0.9rem; margin-bottom: 10px;">*** POWER DOMINATION WEBRING ***</p> |
| <span style="color: #00ffff;">[</span> |
| <a href="#" onclick="alert('PREVIOUS SITE IS OFFLINE!'); return false;" style="color: #00ff00;"><<< PREV</a> |
| <span style="color: #00ffff;">|</span> |
| <a href="#" onclick="alert('RANDOM POWERSITE COMING SOON!'); return false;" style="color: #ff00ff;">RANDOM</a> |
| <span style="color: #00ffff;">|</span> |
| <a href="#" onclick="alert('NEXT SITE IS UNDER CONSTRUCTION!'); return false;" style="color: #00ff00;">NEXT >>></a> |
| <span style="color: #00ffff;">]</span> |
| <p style="margin-top: 15px; font-size: 0.7rem; color: #888;">This site is best viewed in Netscape Navigator 4.0 at 800x600</p> |
| </div> |
|
|
| <footer> |
| <p class="blink" style="color: #ff6600;">*** POWER DOMINATION ***</p> |
| <p style="color: #888;">Electricity prices for Oslo, Norway (January 2026)</p> |
| <p>Sources: <a href="https://www.hvakosterstrommen.no/i/oslo" target="_blank">hvakosterstrommen.no</a> | |
| <a href="https://www.hvakosterstrommen.no/artikler/slik-fungerer-stromstotten" target="_blank">Norgespris info</a></p> |
| <p style="margin-top: 10px; color: #666;">Calculations assume 30 days per month (720 hours)</p> |
| <p style="margin-top: 20px; color: #444; font-family: 'Comic Sans MS', cursive;"> |
| <span class="spin-icon" style="font-size: 1rem;">@</span> |
| Last updated: January 2026 |
| <span class="spin-icon" style="font-size: 1rem;">@</span> |
| </p> |
| <p style="margin-top: 10px;"> |
| <img src="https://web.archive.org/web/20091027100759/http://geocities.com/js_source/images/gc_icon.gif" alt="GeoCities" style="vertical-align: middle; height: 31px;" onerror="this.style.display='none'"> |
| <span style="color: #888; font-size: 0.7rem;">Made with RAW POWER</span> |
| </p> |
| </footer> |
| </div> |
|
|
| <script> |
| const appliances = [ |
| { |
| id: 'fridge', |
| name: 'Refrigerator', |
| details: 'Standard fridge/freezer combo, runs continuously', |
| power: 150, |
| usage: 100 |
| }, |
| { |
| id: 'washing-machine', |
| name: 'Washing Machine', |
| details: 'Front-loader, ~5 loads per week', |
| power: 500, |
| usage: 3 |
| }, |
| { |
| id: 'dishwasher', |
| name: 'Dishwasher', |
| details: 'Standard dishwasher, daily use', |
| power: 1800, |
| usage: 4 |
| }, |
| { |
| id: 'tv', |
| name: 'TV + Streaming Box', |
| details: '55" LED TV with Apple TV/Chromecast', |
| power: 120, |
| usage: 20 |
| }, |
| { |
| id: 'laptop', |
| name: 'Laptop + Charger', |
| details: 'Standard laptop charging', |
| power: 65, |
| usage: 30 |
| }, |
| { |
| id: 'lights', |
| name: 'LED Lighting', |
| details: 'Whole house LED bulbs (~10 bulbs)', |
| power: 100, |
| usage: 25 |
| }, |
| { |
| id: 'water-heater', |
| name: 'Water Heater', |
| details: 'Electric water heater tank', |
| power: 2000, |
| usage: 15 |
| }, |
| { |
| id: 'electric-oven', |
| name: 'Electric Oven', |
| details: 'Cooking ~1 hour per day', |
| power: 2500, |
| usage: 4 |
| } |
| ]; |
| |
| let currentPricing = 'norgespris'; |
| const prices = { |
| norgespris: 0.50, |
| spot: 1.30 |
| }; |
| |
| const HOURS_PER_MONTH = 720; |
| |
| |
| let powerChart, usageChart, costChart, usagePercentChart, waterfallChart; |
| |
| function initCharts() { |
| const chartOptions = { |
| responsive: true, |
| maintainAspectRatio: true, |
| plugins: { |
| legend: { display: false } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { color: 'rgba(255,255,255,0.1)' }, |
| ticks: { color: '#888' } |
| }, |
| x: { |
| grid: { display: false }, |
| ticks: { color: '#888', maxRotation: 45 } |
| } |
| } |
| }; |
| |
| const labels = appliances.map(a => a.name.split(' + ')[0]); |
| |
| powerChart = new Chart(document.getElementById('powerChart'), { |
| type: 'bar', |
| data: { |
| labels: labels, |
| datasets: [{ |
| data: appliances.map(a => a.power), |
| backgroundColor: ['#ff6600', '#cc4400', '#aa3300', '#ff8844', '#dd5522', '#bb4411', '#ff9955', '#cc6633'], |
| borderRadius: 0 |
| }] |
| }, |
| options: chartOptions |
| }); |
| |
| usageChart = new Chart(document.getElementById('usageChart'), { |
| type: 'bar', |
| data: { |
| labels: labels, |
| datasets: [{ |
| data: [], |
| backgroundColor: ['#ff6600', '#cc4400', '#aa3300', '#ff8844', '#dd5522', '#bb4411', '#ff9955', '#cc6633'], |
| borderRadius: 0 |
| }] |
| }, |
| options: chartOptions |
| }); |
| |
| costChart = new Chart(document.getElementById('costChart'), { |
| type: 'bar', |
| data: { |
| labels: labels, |
| datasets: [{ |
| data: [], |
| backgroundColor: ['#66aa44', '#558833', '#447722', '#77bb55', '#669944', '#558833', '#77bb55', '#669944'], |
| borderRadius: 0 |
| }] |
| }, |
| options: chartOptions |
| }); |
| |
| |
| usagePercentChart = new Chart(document.getElementById('usagePercentChart'), { |
| type: 'bar', |
| data: { |
| labels: labels, |
| datasets: [{ |
| data: appliances.map(a => a.usage), |
| backgroundColor: appliances.map(a => { |
| if (a.usage >= 50) return '#cc3333'; |
| if (a.usage >= 25) return '#ff6600'; |
| return '#66aa44'; |
| }), |
| borderRadius: 0 |
| }] |
| }, |
| options: { |
| ...chartOptions, |
| scales: { |
| ...chartOptions.scales, |
| y: { |
| ...chartOptions.scales.y, |
| max: 100, |
| ticks: { |
| color: '#888', |
| callback: (value) => value + '%' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| initWaterfallChart(); |
| } |
| |
| function initWaterfallChart() { |
| const labels = [...appliances.map(a => a.name.split(' + ')[0]), 'Total']; |
| const costData = appliances.map(a => { |
| const hoursPerMonth = (a.usage / 100) * HOURS_PER_MONTH; |
| return (a.power * hoursPerMonth / 1000) * prices[currentPricing]; |
| }); |
| |
| |
| let cumulative = 0; |
| const waterfallData = costData.map(cost => { |
| const start = cumulative; |
| cumulative += cost; |
| return [start, cumulative]; |
| }); |
| |
| waterfallData.push([0, cumulative]); |
| |
| |
| const colors = appliances.map((_, i) => { |
| |
| const fireColors = ['#ff6600', '#cc4400', '#ff8844', '#aa3300', '#dd5522', '#ff9955', '#bb4411', '#cc6633']; |
| return fireColors[i % fireColors.length]; |
| }); |
| colors.push('#ff6600'); |
| |
| waterfallChart = new Chart(document.getElementById('waterfallChart'), { |
| type: 'bar', |
| data: { |
| labels: labels, |
| datasets: [{ |
| label: 'Cost (kr)', |
| data: waterfallData, |
| backgroundColor: colors, |
| borderRadius: 6 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: true, |
| plugins: { |
| legend: { display: false }, |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| const data = context.raw; |
| if (Array.isArray(data)) { |
| const value = data[1] - data[0]; |
| const cumulative = data[1]; |
| if (context.dataIndex === appliances.length) { |
| return `Total: ${cumulative.toFixed(0)} kr`; |
| } |
| return `+${value.toFixed(0)} kr (Cumulative: ${cumulative.toFixed(0)} kr)`; |
| } |
| return data + ' kr'; |
| } |
| } |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { color: 'rgba(255,255,255,0.1)' }, |
| ticks: { |
| color: '#888', |
| callback: (value) => value + ' kr' |
| } |
| }, |
| x: { |
| grid: { display: false }, |
| ticks: { color: '#888', maxRotation: 45 } |
| } |
| } |
| } |
| }); |
| } |
| |
| function renderTable() { |
| const tbody = document.getElementById('applianceTable'); |
| tbody.innerHTML = ''; |
| |
| appliances.forEach((appliance, index) => { |
| const hoursPerDay = (appliance.usage / 100) * 24; |
| const hoursPerMonth = (appliance.usage / 100) * HOURS_PER_MONTH; |
| const kwhPerMonth = (appliance.power * hoursPerMonth) / 1000; |
| const costPerMonth = kwhPerMonth * prices[currentPricing]; |
| |
| const row = document.createElement('tr'); |
| row.innerHTML = ` |
| <td> |
| <div class="appliance-name">${appliance.name}</div> |
| <div class="appliance-details">${appliance.details}</div> |
| </td> |
| <td class="power-value">${appliance.power.toLocaleString()}</td> |
| <td class="slider-cell"> |
| <div class="slider-container"> |
| <input type="range" min="0" max="100" value="${appliance.usage}" |
| onchange="updateUsage(${index}, this.value)" |
| oninput="updateUsage(${index}, this.value)"> |
| <span class="slider-value">${appliance.usage}%</span> |
| </div> |
| </td> |
| <td>${hoursPerDay.toFixed(1)}</td> |
| <td>${hoursPerMonth.toFixed(0)}</td> |
| <td class="kwh-value">${kwhPerMonth.toFixed(1)}</td> |
| <td class="cost-value">${costPerMonth.toFixed(0)} kr</td> |
| <td> |
| <div class="action-buttons"> |
| <button class="btn-icon btn-edit" onclick="openModal(${index})">Edit</button> |
| <button class="btn-icon btn-delete" onclick="deleteAppliance(${index})">Delete</button> |
| </div> |
| </td> |
| `; |
| tbody.appendChild(row); |
| }); |
| |
| |
| const totals = calculateTotals(); |
| const summaryRow = document.createElement('tr'); |
| summaryRow.className = 'summary-row'; |
| summaryRow.innerHTML = ` |
| <td colspan="6" style="text-align: right;">TOTAL</td> |
| <td class="kwh-value">${totals.kwh.toFixed(1)} kWh</td> |
| <td class="cost-value">${totals.cost.toFixed(0)} kr</td> |
| `; |
| tbody.appendChild(summaryRow); |
| } |
| |
| function calculateTotals() { |
| let totalKwh = 0; |
| let totalPeakPower = 0; |
| |
| appliances.forEach(appliance => { |
| const hoursPerMonth = (appliance.usage / 100) * HOURS_PER_MONTH; |
| const kwhPerMonth = (appliance.power * hoursPerMonth) / 1000; |
| totalKwh += kwhPerMonth; |
| if (appliance.usage > 0) { |
| totalPeakPower += appliance.power; |
| } |
| }); |
| |
| return { |
| kwh: totalKwh, |
| cost: totalKwh * prices[currentPricing], |
| peakPower: totalPeakPower, |
| dailyKwh: totalKwh / 30 |
| }; |
| } |
| |
| function updateUsage(index, value) { |
| appliances[index].usage = parseInt(value); |
| renderTable(); |
| updateCharts(); |
| updateSummaryCards(); |
| } |
| |
| function updateCharts() { |
| const usageData = appliances.map(a => { |
| const hoursPerMonth = (a.usage / 100) * HOURS_PER_MONTH; |
| return (a.power * hoursPerMonth) / 1000; |
| }); |
| |
| const costData = usageData.map(kwh => kwh * prices[currentPricing]); |
| |
| usageChart.data.datasets[0].data = usageData; |
| costChart.data.datasets[0].data = costData; |
| |
| |
| usagePercentChart.data.datasets[0].data = appliances.map(a => a.usage); |
| usagePercentChart.data.datasets[0].backgroundColor = appliances.map(a => { |
| if (a.usage >= 50) return '#cc3333'; |
| if (a.usage >= 25) return '#ff6600'; |
| return '#66aa44'; |
| }); |
| |
| usageChart.update(); |
| costChart.update(); |
| usagePercentChart.update(); |
| |
| |
| updateWaterfallChart(); |
| } |
| |
| function updateWaterfallChart() { |
| const labels = [...appliances.map(a => a.name.split(' + ')[0]), 'Total']; |
| const costData = appliances.map(a => { |
| const hoursPerMonth = (a.usage / 100) * HOURS_PER_MONTH; |
| return (a.power * hoursPerMonth / 1000) * prices[currentPricing]; |
| }); |
| |
| let cumulative = 0; |
| const waterfallData = costData.map(cost => { |
| const start = cumulative; |
| cumulative += cost; |
| return [start, cumulative]; |
| }); |
| waterfallData.push([0, cumulative]); |
| |
| const colors = appliances.map((_, i) => { |
| const fireColors = ['#ff6600', '#cc4400', '#ff8844', '#aa3300', '#dd5522', '#ff9955', '#bb4411', '#cc6633']; |
| return fireColors[i % fireColors.length]; |
| }); |
| colors.push('#ff6600'); |
| |
| waterfallChart.data.labels = labels; |
| waterfallChart.data.datasets[0].data = waterfallData; |
| waterfallChart.data.datasets[0].backgroundColor = colors; |
| waterfallChart.update(); |
| } |
| |
| function updateSummaryCards() { |
| const totals = calculateTotals(); |
| document.getElementById('totalKwh').textContent = totals.kwh.toFixed(1); |
| document.getElementById('totalCost').textContent = totals.cost.toFixed(0); |
| document.getElementById('avgDaily').textContent = totals.dailyKwh.toFixed(1); |
| document.getElementById('peakPower').textContent = totals.peakPower.toLocaleString(); |
| } |
| |
| function setPricing(type) { |
| currentPricing = type; |
| document.querySelectorAll('.price-btn').forEach(btn => { |
| btn.classList.remove('active'); |
| }); |
| event.target.classList.add('active'); |
| document.getElementById('currentRate').textContent = prices[type].toFixed(2); |
| renderTable(); |
| updateCharts(); |
| updateSummaryCards(); |
| } |
| |
| |
| function openModal(index = -1) { |
| const modal = document.getElementById('modalOverlay'); |
| const title = document.getElementById('modalTitle'); |
| const editIndex = document.getElementById('editIndex'); |
| const deleteBtn = document.getElementById('deleteBtn'); |
| |
| editIndex.value = index; |
| |
| if (index >= 0) { |
| |
| const appliance = appliances[index]; |
| title.textContent = 'Edit Appliance'; |
| document.getElementById('applianceName').value = appliance.name; |
| document.getElementById('applianceDetails').value = appliance.details; |
| document.getElementById('appliancePower').value = appliance.power; |
| document.getElementById('applianceUsage').value = appliance.usage; |
| deleteBtn.style.display = 'block'; |
| } else { |
| |
| title.textContent = 'Add Appliance'; |
| document.getElementById('applianceName').value = ''; |
| document.getElementById('applianceDetails').value = ''; |
| document.getElementById('appliancePower').value = ''; |
| document.getElementById('applianceUsage').value = '10'; |
| deleteBtn.style.display = 'none'; |
| } |
| |
| modal.classList.add('active'); |
| } |
| |
| function closeModal() { |
| document.getElementById('modalOverlay').classList.remove('active'); |
| } |
| |
| function closeModalOnOverlay(event) { |
| if (event.target === document.getElementById('modalOverlay')) { |
| closeModal(); |
| } |
| } |
| |
| function saveAppliance(event) { |
| event.preventDefault(); |
| |
| const index = parseInt(document.getElementById('editIndex').value); |
| const name = document.getElementById('applianceName').value.trim(); |
| const details = document.getElementById('applianceDetails').value.trim(); |
| const power = parseInt(document.getElementById('appliancePower').value); |
| const usage = parseInt(document.getElementById('applianceUsage').value); |
| |
| const appliance = { |
| id: index >= 0 ? appliances[index].id : 'custom-' + Date.now(), |
| name: name, |
| details: details, |
| power: power, |
| usage: usage |
| }; |
| |
| if (index >= 0) { |
| |
| appliances[index] = appliance; |
| } else { |
| |
| appliances.push(appliance); |
| } |
| |
| closeModal(); |
| refreshAll(); |
| } |
| |
| function deleteAppliance(index) { |
| if (index === undefined) { |
| index = parseInt(document.getElementById('editIndex').value); |
| } |
| |
| if (index >= 0 && confirm('Delete this appliance?')) { |
| appliances.splice(index, 1); |
| closeModal(); |
| refreshAll(); |
| } |
| } |
| |
| function refreshAll() { |
| |
| powerChart.destroy(); |
| usageChart.destroy(); |
| costChart.destroy(); |
| usagePercentChart.destroy(); |
| waterfallChart.destroy(); |
| initCharts(); |
| renderTable(); |
| updateCharts(); |
| updateSummaryCards(); |
| } |
| |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.key === 'Escape') closeModal(); |
| }); |
| |
| |
| initCharts(); |
| renderTable(); |
| updateCharts(); |
| updateSummaryCards(); |
| </script> |
| </body> |
| </html> |
|
|
