<!DOCTYPE html>
<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Malcolm's site</title>
  <link rel="stylesheet" href="./index/3/normalize-5.0.0.min.css">
  <link rel="stylesheet" href="./index/3/style.css">
</head>
<body>
<form>
	<input type="radio" id="on" name="status" value="on">
	<label for="on">On</label>
	<input type="radio" id="off" name="status" value="off">
	<label for="off">Off</label>
  <svg class="lamp" viewBox="0 0 333 484" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g class="lamp__shade shade">
      <ellipse class="shade__opening" cx="165" cy="220" rx="130" ry="20"/>
      <ellipse class="shade__opening-shade" cx="165" cy="220" rx="130" ry="20" fill="url(#opening-shade)"/>
    </g>
    <g class="lamp__base base">
      <path class="base__side" d="M165 464c44.183 0 80-8.954 80-20v-14h-22.869c-14.519-3.703-34.752-6-57.131-6-22.379 0-42.612 2.297-57.131 6H85v14c0 11.046 35.817 20 80 20z" />
      <path d="M165 464c44.183 0 80-8.954 80-20v-14h-22.869c-14.519-3.703-34.752-6-57.131-6-22.379 0-42.612 2.297-57.131 6H85v14c0 11.046 35.817 20 80 20z" fill="url(#side-shading)"/>
      <ellipse class="base__top" cx="165" cy="430" rx="80" ry="20"/>
      <ellipse cx="165" cy="430" rx="80" ry="20" fill="url(#base-shading)"/>
    </g>
    <g class="lamp__post post">
      <path class="post__body" d="M180 142h-30v286c0 3.866 6.716 7 15 7 8.284 0 15-3.134 15-7V142z" />
      <path d="M180 142h-30v286c0 3.866 6.716 7 15 7 8.284 0 15-3.134 15-7V142z" fill="url(#post-shading)"/>
    </g>
    <g class="lamp__cords cords">
      <path class="cord cord--rig" d="M124 187.033V347" stroke-width="6" stroke-linecap="round" />
      <path class="cord cord--rig" d="M124 187.023s17.007 21.921 17.007 34.846c0 12.925-11.338 23.231-17.007 34.846-5.669 11.615-17.007 21.921-17.007 34.846 0 12.925 17.007 34.846 17.007 34.846" stroke-width="6" stroke-linecap="round" />
      <path class="cord cord--rig" d="M124 187.017s-21.259 17.932-21.259 30.26c0 12.327 14.173 20.173 21.259 30.26 7.086 10.086 21.259 17.933 21.259 30.26 0 12.327-21.259 30.26-21.259 30.26" stroke-width="6" stroke-linecap="round" />
      <path class="cord cord--rig" d="M124 187s29.763 8.644 29.763 20.735-19.842 13.823-29.763 20.734c-9.921 6.912-29.763 8.644-29.763 20.735S124 269.939 124 269.939" stroke-width="6" stroke-linecap="round" />
      <path class="cord cord--rig" d="M124 187.029s-10.63 26.199-10.63 39.992c0 13.794 7.087 26.661 10.63 39.992 3.543 13.331 10.63 26.198 10.63 39.992 0 13.793-10.63 39.992-10.63 39.992" stroke-width="6" stroke-linecap="round" />
      <path class="cord cord--rig" d="M124 187.033V347" stroke-width="6" stroke-linecap="round" />
      <line class="cord cord--dummy" x1="124" y2="348" x2="124" y1="190" stroke-width="6"  stroke-linecap="round"/>
    </g>
    <path class="lamp__light" d="M290.5 193H39L0 463.5c0 11.046 75.478 20 165.5 20s167-11.954 167-23l-42-267.5z" fill="url(#light)"/>
    <g class="lamp__top top">
      <path class="top__body" fill-rule="evenodd" clip-rule="evenodd" d="M164.859 0c55.229 0 100 8.954 100 20l29.859 199.06C291.529 208.451 234.609 200 164.859 200S38.189 208.451 35 219.06L64.859 20c0-11.046 44.772-20 100-20z" />
      <path class="top__shading" fill-rule="evenodd" clip-rule="evenodd" d="M164.859 0c55.229 0 100 8.954 100 20l29.859 199.06C291.529 208.451 234.609 200 164.859 200S38.189 208.451 35 219.06L64.859 20c0-11.046 44.772-20 100-20z" fill="url(#top-shading)"/>
    </g>
    <g class="lamp__face face">
      <g class="lamp__mouth">
        <path d="M165 178c19.882 0 36-16.118 36-36h-72c0 19.882 16.118 36 36 36z" fill="#141414"/>
        <clipPath class="lamp__feature" id="mouth" x="129" y="142" width="72" height="36">
          <path d="M165 178c19.882 0 36-16.118 36-36h-72c0 19.882 16.118 36 36 36z" fill="#141414"/>
        </clipPath>
        <g clip-path="url(#mouth)">
          <circle class="lamp__tongue" cx="179.4" cy="172.6" r="18"/>
        </g>
      </g>
      <g class="lamp__eyes">
        <path class="lamp__eye lamp__stroke" d="M115 135c0-5.523-5.82-10-13-10s-13 4.477-13 10" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <path class="lamp__eye lamp__stroke" d="M241 135c0-5.523-5.82-10-13-10s-13 4.477-13 10" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
      </g>
    </g>
    <defs>
      <linearGradient id="opening-shade" x1="35" y1="220" x2="295" y2="220" gradientUnits="userSpaceOnUse">
        <stop/>
        <stop offset="1" stop-color="var(--shade)" stop-opacity="0"/>
      </linearGradient>
      <linearGradient id="base-shading" x1="85" y1="444" x2="245" y2="444" gradientUnits="userSpaceOnUse">
        <stop stop-color="var(--b-1)"/>
        <stop offset="0.8" stop-color="var(--b-2)" stop-opacity="0"/>
      </linearGradient>
      <linearGradient id="side-shading" x1="119" y1="430" x2="245" y2="430" gradientUnits="userSpaceOnUse">
        <stop stop-color="var(--b-3)"/>
        <stop offset="1" stop-color="var(--b-4)" stop-opacity="0"/>
      </linearGradient>
      <linearGradient id="post-shading" x1="150" y1="288" x2="180" y2="288" gradientUnits="userSpaceOnUse">
        <stop stop-color="var(--b-1)"/>
        <stop offset="1" stop-color="var(--b-2)" stop-opacity="0"/>
      </linearGradient>
      <linearGradient id="light" x1="165.5" y1="218.5" x2="165.5" y2="483.5" gradientUnits="userSpaceOnUse">
        <stop stop-color="var(--l-1)" stop-opacity=".2"/>
        <stop offset="1" stop-color="var(--l-2)" stop-opacity="0"/>
      </linearGradient>
      <linearGradient id="top-shading" x1="56" y1="110" x2="295" y2="110" gradientUnits="userSpaceOnUse">
        <stop stop-color="var(--t-1)" stop-opacity=".8"/>
        <stop offset="1" stop-color="var(--t-2)" stop-opacity="0"/>
      </linearGradient>
    </defs>
    <circle class="lamp__hit" cx="124" cy="347" r="66" fill="#C4C4C4" fill-opacity=".1"/>
  </svg>
</form>

<script src='./index/3/gsap.min.js'></script>
<script src='./index/3/Draggable.min.js'></script>
<script src='./index/3/MorphSVGPlugin3.min.js'></script>
<script src="./index/3/script.js"></script>

<script>
var sound = true;
var musicPlaying = false;
var audio = null;

// Функция для наблюдения за изменением CSS переменной --on
function observeLampState() {
    const root = document.documentElement;
    
    // Получаем текущее значение --on
    const getOnState = () => {
        return parseInt(getComputedStyle(root).getPropertyValue('--on').trim()) || 0;
    };
    
    let currentState = getOnState();
    
    // Проверяем состояние каждые 100ms
    setInterval(() => {
        const newState = getOnState();
        if (newState !== currentState) {
            currentState = newState;
            handleLampStateChange(currentState);
        }
    }, 100);
}

function handleLampStateChange(state) {
    if (state === 1 && !musicPlaying) {
        // Включаем музыку
        playSound();
    } else if (state === 0 && musicPlaying) {
        // Выключаем музыку
        stopSound();
    }
}

function playSound(){
    if (sound && !musicPlaying){
        audio = document.createElement('audio');
        audio.setAttribute("autoplay", "true");
        audio.volume = 0.2;
        audio.loop = true;
        audio.innerHTML = `<source src="index/3/music.mp3" type="audio/mpeg">`;
        document.body.appendChild(audio);
        musicPlaying = true;
        console.log('Music started');
    }
}

function stopSound(){
    if (audio && musicPlaying) {
        audio.pause();
        audio.currentTime = 0;
        musicPlaying = false;
        console.log('Music stopped');
    }
}

// Запускаем наблюдение при загрузке страницы
document.addEventListener('DOMContentLoaded', observeLampState);

// Также запускаем сразу на случай если DOM уже загружен
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', observeLampState);
} else {
    observeLampState();
}
</script>

</body>
</html>