Assignment

✨ NekoRabu sama

<hmtl>
  <head>
    <title> Assignment CSS Var and CalC</title>
    <style>
      body{
        --hue1: rgb(255, 236, 214);
        --hue2: rgb(240, 240, 240);
        --hue3: rgb(140, 158, 189);
        --hue4: rgb(197, 144, 129);
        --hue5: rgb(255, 132, 124);
        --hue6: rgb(255, 179, 174);
        --hue7: rgb(255, 216, 175);
        --height: 30px;
        --linear1: linear-gradient(180deg, rgba(0, 0, 0, 1) 5%, rgba(8, 18, 27, 1) 27%, rgba(22, 46, 71, 1) 50%, rgba(34, 72, 111, 1) 68%, rgba(44, 94, 145, 1) 84%, rgba(52, 110, 170, 1) 99%);
        --linear2: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(20, 6, 7, 1) 18%, rgba(46, 14, 16, 1) 35%, rgba(85, 26, 29, 1) 54%, rgba(120, 37, 41, 1) 69%, rgba(185, 58, 62, 1) 100%);
      }
      #all{
        max-width: 500px;
        margin: auto;
        display: flex;
        justify-content: center;
      }
      #sky{
        background-image: var(--linear1);
        width: 600px;
        height: 600px;
        border-radius: 50%;
        position: absolute;
        display: flex;
        overflow:hidden;
        box-shadow:0px 5px 10px 1px hsl(280,0%,50%);
      }
      #moon{
        background-color: var(--hue7);
        width: 200px;
        height: 200px;
        box-shadow: 2px 2px 16px 6px rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        position:absolute;
        margin-left: 200px;
        margin-top: 150px;
        overflow:hidden;
      }
      .in-moon1{
        background-color: var(--hue1);
        width: 65px;
        height: 65px;
        border-radius: 50%;
        position:absolute;
        margin-left: 90px;
        margin-top: 30px;
      }
      .in-moon2{
        background-color: var(--hue1);
        width: 45px;
        height: 45px;
        border-radius: 50%;
        position:absolute;
        margin-left: 60px;
        margin-top: 100px;
      }
      .in-moon3{
        background-color: var(--hue1);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position:absolute;
        margin-left: 130px;
        margin-top: 105px;
      }
  
      .cloud-shadow1{
        background-color: var(--hue3);
        width: 105px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 480px;
        margin-top: 100px;
      }
      .cloud-shadow2{
        background-color: var(--hue3);
        width: 150px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 430px;
        margin-top: 125px;
      }
      .cloud-shadow3{
        background-color: var(--hue3);
        width: 190px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 425px;
        margin-top: 325px;
      }
      .cloud-shadow4{
        background-color: var(--hue3);
        width: 190px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 425px;
        margin-top: 440px;
      }
      .cloud-shadow5{
        background-color: var(--hue3);
        width: 250px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 320px;
        margin-top: 480px;
      }
      .cloud-shadow6{
        background-color: var(--hue3);
        width: 250px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 220px;
        margin-top: 500px;
      }
      .cloud-shadow7{
        background-color: var(--hue3);
        width: 180px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 20px;
        margin-top: 520px;
      }
      .cloud-shadow8{
        background-color: var(--hue3);
        width: 160px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-top: 350px;
      }
      .cloud-shadow9{
        background-color: var(--hue3);
        width: 200px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-top: 375px;
      }
      .cloud-shadow10{
        background-color: var(--hue3);
        width: 130px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-top: 170px;
      }
      .cloud-shadow11{
        background-color: var(--hue3);
        width: 70px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-top: 185px;
      }
      .cloud-white1{
        background-color: var(--hue2);
        width: 90px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 370px;
        margin-top: 240px;
      }
      .cloud-white2{
        background-color: var(--hue2);
        width: 180px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 440px;
        margin-top: 285px;
      }
      .cloud-white3{
        background-color: var(--hue2);
        width: 180px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 500px;
        margin-top: 310px;
      }
      .cloud-white4{
        background-color: var(--hue2);
        width: 230px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 340px;
        margin-top: 420px;
      }
      .cloud-white5{
        background-color: var(--hue2);
        width: 260px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 230px;
        margin-top: 440px;
      }
      .cloud-white6{
        background-color: var(--hue2);
        width: 260px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-left: 380px;
        margin-top: 460px;
      }
      .cloud-white7{
        background-color: var(--hue2);
        width: 135px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        margin-top: 460px;
      }
      .cloud-white8{
        background-color: var(--hue2);
        width: 200px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        right: 460px;
        margin-top: 330px;
      }
      .cloud-white9{
        background-color: var(--hue2);
        width: 190px;
        height: var(--height);
        position:absolute;
        border-radius: 50px;
        right: 355px;
        margin-top: 360px;
      }
      .star1{
        background:#fff;
        height:5px;
        width:5px;
        border-radius:50%;
        position:absolute;
        margin-top: 120px;
        margin-left: 160px;
        box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
        animation: twinkle 3.5s infinite alternate;
      }
      .star2{
        background:#fff;
        height:5px;
        width:5px;
        transform: rotatez(45deg);
        position:absolute;
        margin-top: 50px;
        margin-left: 250px;
        box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
        animation: twinkle 2.5s infinite alternate;
      }
      .star3{
        background:#fff;
        height:5px;
        width:5px;
        transform: rotatez(45deg);
        position:absolute;
        margin-top: 100px;
        margin-left: 360px;
        box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
        animation: twinkle 4.5s infinite alternate;
      }
      .star4{
        background:#fff;
        height:5px;
        width:5px;
        border-radius:50%;
        position:absolute;
        margin-top: 60px;
        margin-left: 400px;
        box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
        animation: twinkle 5.5s infinite alternate;
      }
      .star5{
        background:#fff;
        height:5px;
        width:5px;
        transform: rotatez(45deg);
        position:absolute;
        margin-top: 230px;
        margin-left: 150px;
        box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
        animation: twinkle 5s infinite alternate;
      }
      .star6{
        background:#fff;
        height:5px;
        width:5px;
        transform: rotatez(45deg);
        position:absolute;
        margin-top: 190px;
        margin-left: 500px;
        box-shadow:0px 0px 10px 1px hsl(280,0%,100%);
        animation: twinkle 6s infinite alternate;
      }
      #play {
        background-color: rgb(25, 25, 25);
        border-radius: 50px;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        margin-top: 550px;
        margin-left: 550px;
        position: absolute;
        box-shadow:0px 5px 10px 1px hsl(280,0%,50%);
      }
      @keyframes twinkle{
      from{
			opacity:1;
      }
      to{
			opacity:0;
        }
      }
    </style>
  </head>
  <body>
    <div id="all">
      <div id = "sky">
        <div id="moon">
          <div id="in1" class="in-moon1"></div>
          <div id="in2" class="in-moon2"></div>
          <div id="in3" class="in-moon3"></div>
        </div>
        <div id="cloud1"class="cloud-shadow1"></div>
        <div id="cloud2"class="cloud-shadow2"></div>
        <div id="cloud3"class="cloud-shadow3"></div>
        <div id="cloud4"class="cloud-shadow4"></div>
        <div id="cloud5"class="cloud-shadow5"></div>
        <div id="cloud6"class="cloud-shadow6"></div>
        <div id="cloud7"class="cloud-shadow7"></div>
        <div id="cloud8"class="cloud-shadow8"></div>
        <div id="cloud9"class="cloud-shadow9"></div>
        <div id="cloud10"class="cloud-shadow10"></div>
        <div id="cloud11"class="cloud-shadow11"></div>
        <div class="cloud-white1"></div>
        <div class="cloud-white2"></div>
        <div class="cloud-white3"></div>
        <div class="cloud-white4"></div>
        <div class="cloud-white5"></div>
        <div class="cloud-white6"></div>
        <div class="cloud-white7"></div>
        <div class="cloud-white8"></div>
        <div class="cloud-white9"></div>
        <div class="star1"></div>
        <div class="star2"></div>
        <div class="star3"></div>
        <div class="star4"></div>
        <div class="star5"></div>
        <div class="star6"></div>
    	</div>
      <button id="Play" onclick="playNotes(melody, 1/4)">
        Click
      </button>
      <script>
        let [C4,D4b,D4,E4b,E4,F4,G4b,G4,A4b,A4,B4b,B4] =[3,4,5,6,7,8,9,10,11,12,13,14];
        let [C5,D5b,D5,E5b,E5,F5,G5b,G5,A5b,A5,B5b,B5] = [15,16,17,18,19,20,21,22,23,24,25,26];
        let [C6,D6b,D6,E6b,E6,F6,G6b,G6,A6b,A6,B6b,B6] = [27,28,29,30,31,32,33,34,35,36,37,38];
        let melody = [-1,-1,G4,-1,G4,-1,D5,-1,D5,-1,E5,-1,E5,-1,D5,-1,-1,-1,C5,-1,C5,-1,B4,-1,A4,-1,A4,-1,G4]
        let playTone = (frequency, timeToPlay) => {
        		let audioContext = new (window.AudioContext || window.webkitAudioContext)()
        		let startTime = audioContext.currentTime
        		let oscillator = audioContext.create0scillator()
        		let gain = audioContext.createGain()
        		let noteLength = .5
        		oscillator.frequency.value = frequency
        		oscillator.type = 'sine'
        		oscillator.connect(gain)
        		gain.connect(audioContext.destination)
        		gain.gain.setValueAtTime(0.5, startTime + timeToPlay)
          	gain.gain.linearRampToValueAtTime(0, startTime + timeToPlay + noteLength)
        		oscillator.start(startTime + timeToPlay)
        		oscillator.stop(startTime + timeToPlay + noteLength
      	}
      	const playNotes = (notes, secondsPerBeat) => {
        
        		notes.forEach((noteNumber, index) => {
          		if (noteNumber !== -1) {
            		let frequency = 220 * 2 ** (noteNumber / 12)
            		let beatToPlay = index + (index % 2) / 6
            		let timeToPlay = beatToPlay * secondsPerBeat
            		playTone(frequency, timeToPlay)
         		 }
           	})
      	}
      </script>
    </div>
  </body>
</hmtl>