bskp-layout/changenamecinema.html at main · Webdev1121/bskp-layout · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

<link href="https://countdown.bskp.fbp.my.id/daisyui.css" rel="stylesheet" type="text/css" />
<script src="https://countdown.bskp.fbp.my.id/tailwindcss.js"></script>
<style>
        /* Add the following styles to make the text centered and responsive */
        #output_text {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }
    </style>
<div class="navbar bg-base-100">

  <div class="flex-1">
    <a class="btn btn-ghost text-3xl font-bold">Ganti Nama Bioskop</a>
      <button class="btn btn-accent -mx-3 my-8 h-10 text-xl font-mono ml-1"><a href="https://github.com/Webdev1121/bskp-layout" target="_blank">Coded by 1121Kbps</a></button>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a class="btn btn-ghost bg-primary text-white text-xl mr-3 ">🫅  5</a></li>
      <li><a class="btn btn-ghost bg-error text-white text-xl mr-3">💵 10000</a></li>
      <li><a class="btn btn-ghost bg-accent text-white text-xl">🔮 20</a></li>
      <label class="swap swap-rotate ml-3 btn btn-circle">
      <input type="checkbox" class="theme-controller" value="retro" />

  <!-- sun icon -->
  <svg class="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>

  <!-- moon icon -->
  <svg class="swap-off fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/></svg>
    </ul>
  </div>
</div>
<div role="alert" class="alert alert-info rounded-none">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
  <span>Text Preview ga tengah ga ngaruh, kan?</span>
</div>
<div class="grid bg-base-200 w-screen h-screen">
<div class="grid bg-base-200 w-screen h-screen ml-20" style="position:absolute;z-index:100%" >
  <h1 class="ml-6 font-black text-4xl my-36">Ganti Nama</h1>
  <label class="textarea textarea-primary w-96 h-14 ml-6 -mt-48"  for="textbox">Ketik nama Bioskop mu! contoh: Bioskop Melif
     <input type="text" id="textbox" class="rounded-md bg-base-300">
     <button onclick="saveToLocalStorage()" class="bg-success text-black rounded-xl w-14 h-9">Simpan</button>
  </label>
      <h1 class="ml-6 font-black text-4xl -mt-44">Preview</h1>
      <label class="textarea textarea-primary w-96 h-48 my-1 ml-6 -mt-44" ><img src="https://media.discordapp.net/attachments/1158724028350091344/1187397898040782878/Screenshot_2023_1221_221459.jpg?ex=6596bd77&is=65844877&hm=dfbadec936c479743a574301faca8cb0bf9f901797a26a01aeb53db72ebe2462&=&format=webp" class="card">
      <div style="position:absolute;z-index:100%" class="grid"><h1 class=" -mt-48 ml-8 content-center text-2xl font-black" id="output_text">Cinema</h1></div>
            <h1 class="ml-[400px] font-black text-4xl -mt-64">Pewarnaan</h1><button onclick="rainbowText()" class="btn btn-success ml-[460px]" style="position:absolute;z-index:100%">RGB</button>

<button onclick="stopRainbowText()" class="btn btn-error ml-[530px]" style="position:absolute;z-index:100%">Clear RGB</button>
        <input type="color" style="position:absolute;z-index:100%" id="colorPicker" class="ml-[400px] mt-3" onchange="changeColor()">
        <button class="btn btn-secondary ml-[401px] mt-14 w-56">Pasang 💵Lp100</button>
    <script>
        // Function to save textbox value to localStorage
        function saveToLocalStorage() {
            // Get the textbox value
            var textboxValue = document.getElementById("textbox").value;

            // Check if the value is not empty
            if (textboxValue.trim() !== "") {
                // Save the value to localStorage
                localStorage.setItem("savedText", textboxValue);
                alert("Text saved to localStorage!");
            } else {
                alert("Please enter text before saving.");
            }
        }

        // On page load, check if there is a saved text in localStorage and populate the textbox
        window.onload = function() {
            var savedText = localStorage.getItem("savedText");
            if (savedText) {
                document.getElementById("textbox").value = savedText;
            }
        };
        setInterval(function () {
        document.getElementById("output_text").innerHTML = localStorage.getItem("savedText");
        }, 500);
    </script>
    <script>
    function changeColor() {
        var colorPicker = document.getElementById('colorPicker');
        var outputText = document.getElementById('output_text');
        var selectedColor = colorPicker.value;

        outputText.style.color = selectedColor;
    }

    function rainbowText() {
        var outputText = document.getElementById('output_text');
        var colors = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3'];
        var colorIndex = 0;

        rainbowInterval = setInterval(function () {
            outputText.style.color = colors[colorIndex];
            colorIndex = (colorIndex + 1) % colors.length;
        }, 500);
    }

    function stopRainbowText() {
        clearInterval(rainbowInterval);  // Clear the interval using the stored ID
    }
</script>