Update mode.html

DomathID · Oct 9, 2024 · 68084b2 · 68084b2
1 parent 1dafc52
commit 68084b2
Showing 1 changed file with 95 additions and 12 deletions.
diff --git a/mode.html b/mode.html
@@ -25,7 +25,86 @@
       background-color: #f0f0f0;
       position: relative;
     }
-
+    body{
+  background: #3399ff;
+}
+
+
+.circle{
+  position: absolute;
+  border-radius: 50%;
+  background: white;
+  animation: ripple 15s infinite;
+  box-shadow: 0px 0px 1px 0px #508fb9;
+}
+
+.small{
+  width: 200px;
+  height: 200px;
+  left: -100px;
+  bottom: -100px;
+}
+
+.medium{
+  width: 400px;
+  height: 400px;
+  left: -200px;
+  bottom: -200px;
+}
+
+.large{
+  width: 600px;
+  height: 600px;
+  left: -300px;
+  bottom: -300px;
+}
+
+.xlarge{
+  width: 800px;
+  height: 800px;
+  left: -400px;
+  bottom: -400px;
+}
+
+.xxlarge{
+  width: 1000px;
+  height: 1000px;
+  left: -500px;
+  bottom: -500px;
+}
+
+.shade1{
+  opacity: 0.2;
+}
+.shade2{
+  opacity: 0.5;
+}
+
+.shade3{
+  opacity: 0.7;
+}
+
+.shade4{
+  opacity: 0.8;
+}
+
+.shade5{
+  opacity: 0.9;
+}
+
+@keyframes ripple{
+  0%{
+    transform: scale(0.8);
+  }
+
+  50%{
+    transform: scale(1.2);
+  }
+
+  100%{
+    transform: scale(0.8);
+  }
+}
     #canvas {
       position: absolute;
       top: 0;
@@ -60,7 +139,14 @@
   </style>
 </head>
 <body>
-
+  <div class='ripple-background'>
+    <div class='circle xxlarge shade1'></div>
+    <div class='circle xlarge shade2'></div>
+    <div class='circle large shade3'></div>
+    <div class='circle mediun shade4'></div>
+    <div class='circle small shade5'></div>
+  </div>
+
   <!-- Live2D Canvas -->
   <canvas id="canvas"></canvas>
 
@@ -70,11 +156,10 @@ <h1>Welcome to My Live2D Page</h1>
     <p>Enjoy the animated background!</p>
 
   </div>
-
   <!-- Live2D Script -->
 <script>
 const cubism2Model =
-  "https://live2d.nekochan.eu.org/pachan/pachirisu%20anime%20girl%20-%20top%20half.model3.json";
+  "https://live2d.nekochan.eu.org/Hotaru/hotaru_keyvisual.model3.json";
 
 const live2d = PIXI.live2d;
 
@@ -90,35 +175,33 @@ <h1>Welcome to My Live2D Page</h1>
 
   app.stage.addChild(model);
 
-  // Fungsi untuk menyesuaikan ukuran model sesuai dengan lebar layar
+
   function resizeModel() {
     const screenWidth = window.innerWidth;
 
     if (screenWidth > 1024) {
-      // Desktop: perbesar model
+
       const scaleX = (innerWidth * 0.6) / model.width;
       const scaleY = (innerHeight * 1.2) / model.height;
       model.scale.set(Math.min(scaleX, scaleY));
       model.y = innerHeight * 0.1; // Posisi vertikal di desktop
     } else if (screenWidth > 768 && screenWidth <= 1024) {
-      // Tablet: sesuaikan skala model
+
       const scaleX = (innerWidth * 0.8) / model.width;
       const scaleY = (innerHeight * 1.0) / model.height;
       model.scale.set(Math.min(scaleX, scaleY));
       model.y = innerHeight * 0.1; // Posisi vertikal di tablet
     } else {
-      // Mobile: perkecil model agar sesuai layar
+
       const scaleX = (innerWidth * 0.9) / model.width;
       const scaleY = (innerHeight * 1.9) / model.height;
       model.scale.set(Math.min(scaleX, scaleY));
-      model.y = innerHeight * 0.5; // Posisi vertikal di ponsel
+      model.y = innerHeight * 0.5; 
     }
   }
 
-  // Panggil fungsi resize saat aplikasi dimulai
-  resizeModel();
 
-  // Menyesuaikan model setiap kali ukuran jendela diubah
+  resizeModel();
   window.addEventListener("resize", resizeModel);
 })();
 </script>