{"product_id":"neon-planet-light","title":"Neon Planet Light","description":"\u003cbody\u003e\n\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eNeon Planet Light - Interactive Showcase\u003c\/title\u003e\n    \u003cstyle\u003e\n        :root {\n            --bg-color: #0b0c10;\n            --card-bg: #1f2833;\n            --text-main: #ffffff;\n            --text-muted: #c5a1ff;\n            --neon-pink: #ff007f;\n            --neon-blue: #00f0ff;\n            --neon-purple: #9d00ff;\n        }\n\n        * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n        }\n\n        body {\n            background-color: var(--bg-color);\n            color: var(--text-main);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 100vh;\n            padding: 20px;\n            overflow-x: hidden;\n        }\n\n        .container {\n            background: var(--card-bg);\n            border-radius: 20px;\n            box-shadow: 0 0 30px rgba(157, 0, 255, 0.2);\n            width: 100%;\n            max-width: 900px;\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            overflow: hidden;\n            border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        \/* Preview Panel *\/\n        .preview-panel {\n            background: #050508;\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            padding: 40px;\n            min-height: 400px;\n            transition: background 0.5s ease;\n        }\n\n        .preview-panel.party-mode {\n            background: linear-gradient(135deg, #050508 0%, #120024 100%);\n        }\n\n        \/* Interactive Neon Planet SVG *\/\n        .planet-svg {\n            width: 80%;\n            max-width: 250px;\n            height: auto;\n            filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));\n            transition: transform 0.3s ease;\n        }\n\n        .planet-svg:hover {\n            transform: scale(1.05) rotate(2deg);\n        }\n\n        \/* Neon Glow Classes managed by JS *\/\n        .neon-ring {\n            stroke: var(--neon-pink);\n            transition: stroke 0.5s ease, filter 0.5s ease;\n            filter: drop-shadow(0 0 8px var(--neon-pink));\n        }\n\n        .neon-body {\n            stroke: var(--neon-blue);\n            transition: stroke 0.5s ease, filter 0.5s ease;\n            filter: drop-shadow(0 0 8px var(--neon-blue));\n        }\n\n        .neon-off .neon-ring, .neon-off .neon-body {\n            stroke: #444444 !important;\n            filter: none !important;\n        }\n\n        \/* Control Info Panel *\/\n        .product-info {\n            padding: 40px;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n        }\n\n        h1 {\n            font-size: 2rem;\n            margin-bottom: 10px;\n            background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink));\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n        }\n\n        .tagline {\n            color: var(--text-muted);\n            font-size: 0.95rem;\n            margin-bottom: 20px;\n            line-height: 1.4;\n        }\n\n        .features-list {\n            list-style: none;\n            margin-bottom: 25px;\n        }\n\n        .features-list li {\n            margin-bottom: 8px;\n            font-size: 0.9rem;\n            display: flex;\n            align-items: center;\n        }\n\n        .features-list li::before {\n            content: \"✦\";\n            color: var(--neon-blue);\n            margin-right: 8px;\n            font-weight: bold;\n        }\n\n        .section-title {\n            font-size: 0.85rem;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            color: #888;\n            margin-bottom: 10px;\n        }\n\n        .controls-group {\n            margin-bottom: 20px;\n        }\n\n        .btn-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 10px;\n        }\n\n        button {\n            background: #2a3545;\n            color: white;\n            border: 2px solid transparent;\n            padding: 12px;\n            border-radius: 8px;\n            cursor: pointer;\n            font-weight: 600;\n            transition: all 0.3s ease;\n        }\n\n        button:hover {\n            background: #344256;\n        }\n\n        button.active {\n            background: #1f2833;\n            border-color: var(--neon-blue);\n            box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);\n        }\n\n        button#powerBtn {\n            width: 100%;\n            background: #ff0055;\n            margin-top: 10px;\n        }\n\n        button#powerBtn.off {\n            background: #444;\n        }\n\n        .status-pill {\n            position: absolute;\n            top: 20px;\n            left: 20px;\n            background: rgba(255, 255, 255, 0.1);\n            padding: 5px 12px;\n            border-radius: 20px;\n            font-size: 0.8rem;\n            backdrop-filter: blur(5px);\n            border: 1px solid rgba(255, 255, 255, 0.2);\n        }\n\n        @media (max-width: 768px) {\n            .container {\n                grid-template-columns: 1fr;\n            }\n            .preview-panel {\n                min-height: 300px;\n            }\n        }\n    \u003c\/style\u003e\n\n\n\n\u003cdiv class=\"container\"\u003e\n    \u003c!-- Interactive Visual Section --\u003e\n    \u003cdiv class=\"preview-panel\" id=\"previewPanel\"\u003e\n        \u003cdiv class=\"status-pill\" id=\"powerStatus\"\u003e⚡ Powered via: USB Cable\u003c\/div\u003e\n        \n        \u003c!-- Planet SVG with distinct styling layers --\u003e\n        \u003csvg class=\"planet-svg\" id=\"planetIcon\" viewbox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/w3.org\"\u003e\n            \u003c!-- Planet Core Body --\u003e\n            \u003ccircle class=\"neon-body\" cx=\"50\" cy=\"50\" r=\"28\" stroke-width=\"4\" stroke-linecap=\"round\"\u003e\u003c\/circle\u003e\n            \u003c!-- Decorative inner dynamic striping --\u003e\n            \u003cpath class=\"neon-body\" d=\"M32 42C38 46 45 44 52 40C59 36 65 38 68 40\" stroke-width=\"2\" stroke-linecap=\"round\"\u003e\u003c\/path\u003e\n            \u003c!-- Planet Outer Rings --\u003e\n            \u003cpath class=\"neon-ring\" d=\"M15 60C10 52 25 42 50 35C75 28 92 28 85 40C81 46 65 52 45 56\" stroke-width=\"4\" stroke-linecap=\"round\"\u003e\u003c\/path\u003e\n        \u003c\/svg\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- Configuration \u0026 Sales Text Section --\u003e\n    \u003cdiv class=\"product-info\"\u003e\n        \u003cdiv\u003e\n            \u003ch1\u003eNeon Planet Light\u003c\/h1\u003e\n            \u003cp class=\"tagline\"\u003eMulti-colour LED decorative lamp featuring a safe, flexible acrylic design. Perfect vibe creator with zero risk of glass breakage.\u003c\/p\u003e\n            \n            \u003cul class=\"features-list\"\u003e\n                \u003cli\u003eFlexible, durable acrylic casing\u003c\/li\u003e\n                \u003cli\u003eDual power options (USB or Battery)\u003c\/li\u003e\n                \u003cli\u003eChild-safe, low voltage design\u003c\/li\u003e\n                \u003cli\u003eEasy wall-hanging mounting slot\u003c\/li\u003e\n            \u003c\/ul\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv\u003e\n            \u003c!-- Interactive Vibe Selection --\u003e\n            \u003cdiv class=\"controls-group\"\u003e\n                \u003cdiv class=\"section-title\"\u003eSelect Room Ambiance\u003c\/div\u003e\n                \u003cdiv class=\"btn-grid\"\u003e\n                    \u003cbutton class=\"active\" onclick=\"setAmbiance('bedroom', this)\"\u003e🛏️ Bedroom\u003c\/button\u003e\n                    \u003cbutton onclick=\"setAmbiance('party', this)\"\u003e🎉 Space Party\u003c\/button\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003c!-- Interactive Power Source Selection --\u003e\n            \u003cdiv class=\"controls-group\"\u003e\n                \u003cdiv class=\"section-title\"\u003ePower Source\u003c\/div\u003e\n                \u003cdiv class=\"btn-grid\"\u003e\n                    \u003cbutton class=\"active\" onclick=\"setPower('usb', this)\"\u003e🔌 USB Connection\u003c\/button\u003e\n                    \u003cbutton onclick=\"setPower('battery', this)\"\u003e🔋 AA Batteries\u003c\/button\u003e\n                \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003c!-- Global Power On\/Off Toggle --\u003e\n            \u003cbutton id=\"powerBtn\" onclick=\"togglePower()\"\u003eSwitch Off Lamp\u003c\/button\u003e\n        \u003c\/div\u003e\n    \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n    let isPowerOn = true;\n    let currentPowerSource = 'USB Cable';\n    const root = document.documentElement;\n\n    \/\/ Toggle lighting power completely on\/off\n    function togglePower() {\n        const planet = document.getElementById('planetIcon');\n        const powerBtn = document.getElementById('powerBtn');\n        const statusPill = document.getElementById('powerStatus');\n\n        isPowerOn = !isPowerOn;\n\n        if (isPowerOn) {\n            planet.classList.remove('neon-off');\n            powerBtn.textContent = 'Switch Off Lamp';\n            powerBtn.classList.remove('off');\n            statusPill.textContent = `⚡ Powered via: ${currentPowerSource}`;\n        } else {\n            planet.classList.add('neon-off');\n            powerBtn.textContent = 'Switch On Lamp';\n            powerBtn.classList.add('off');\n            statusPill.textContent = '⚫ Device Off';\n        }\n    }\n\n    \/\/ Toggle power mode display text\n    function setPower(type, element) {\n        \/\/ Handle button classes\n        setActiveInGroup(element);\n        \n        currentPowerSource = type === 'usb' ? 'USB Cable' : '3x AA Batteries';\n        if (isPowerOn) {\n            document.getElementById('powerStatus').textContent = `⚡ Powered via: ${currentPowerSource}`;\n        }\n    }\n\n    \/\/ Change scene ambiance background and light color spectrums\n    function setAmbiance(vibe, element) {\n        setActiveInGroup(element);\n        const panel = document.getElementById('previewPanel');\n\n        if (vibe === 'party') {\n            panel.classList.add('party-mode');\n            \/\/ Change colors dynamically via CSS variables to simulate RGB mode\n            root.style.setProperty('--neon-pink', '#ff00ff');\n            root.style.setProperty('--neon-blue', '#00ff66');\n        } else {\n            panel.classList.remove('party-mode');\n            \/\/ Reset to default cozy colorway\n\u003c\/script\u003e\n\u003c\/body\u003e","brand":"Amariana Solutions","offers":[{"title":"Default Title","offer_id":44664875548775,"sku":null,"price":560.0,"currency_code":"ZAR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0691\/3615\/4727\/files\/c89ec0e3-5c7a-4d09-ba1f-41e428c693c3.avif?v=1789874136","url":"https:\/\/amarianasolutions.co.za\/products\/neon-planet-light","provider":"Amariana Solutions","version":"1.0","type":"link"}