CODING IS EZZZZ BRUHHH

avatar
unknown
plain_text
3 years ago
3.3 kB
12
Indexable
<!doctype html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SORAI BERLAMPU</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.3/flowbite.min.css" rel="stylesheet" />



</head>

<body>
    <div class="flex row justify-center items-center min-h-screen w-full bg-gray-800 gap-4" >
        <!-- lampu1 -->
        <div class="flex flex-col gap-2">
            <img src="asset/image/off.gif" alt="" id="lampu1" />
            
            <label for="default-toggle" class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" id="default-toggle" class="sr-only peer">
            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
            <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Nyalakan Aku</span>
            </label>
  
            <button onclick="saklar('on', 1)" class="bg-white p-4 text-black">NYALAKAN LAMPU 1</button>
            <button onclick="saklar('off', 1)" class="bg-white p-4 text-black">MATIKAN LAMPU 1</button>         
        </div>

        <!-- lampu2 -->
        <div class="flex flex-col gap-2">
            <img src="asset/image/off.gif" alt="" id="lampu2" />

                
            <button onclick="saklar('on', 2)" class="bg-white p-4 text-black">NYALAKAN LAMPU 2</button>
            <button onclick="saklar('off', 2)" class="bg-white p-4 text-black">MATIKAN LAMPU 2</button>         
        </div>

         <!-- lampu3 -->
        <div class="flex flex-col gap-2">
            <img src="asset/image/off.gif" alt="" id="lampu3" />
          
            <button onclick="saklar('on', 3)" class="bg-white p-4 text-black">NYALAKAN LAMPU 3</button>
            <button onclick="saklar('off', 3)" class="bg-white p-4 text-black">MATIKAN LAMPU 3</button>         
        </div>
    </div>
    
 <!-- ini script js -->

    <script src="https://unpkg.com/flowbite@1.5.1/dist/flowbite.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
    <script>

    $(document).ready(function(){
        
        $(document).on('click', '#default-toggle', function(){
            if($(this).is(':checked')){
                prompt("I LOVEE U NINGSSSS", "NYALAAA KANN");
            }else{
                prompt("I MISS U NINGSSSS", "ADUH JANGAN DI MATIKAN GELAPP");
            }
        })

    })
    </script>
   


</body>
</html>
Editor is loading...