From bd0d137ea12cc9ab975f45fd843a06d4f5063f2d Mon Sep 17 00:00:00 2001
From: Nathan <nathan-h.inf25@ukwms.ac.id>
Date: Mon, 8 Dec 2025 22:13:00 +0700
Subject: [PATCH] combining home

---
 home.html     | 162 +++++++++++++++++++++++++++++++++++++++++++++++++-
 home.js       |   8 ---
 homestyle.css | 148 ---------------------------------------------
 3 files changed, 160 insertions(+), 158 deletions(-)
 delete mode 100644 home.js
 delete mode 100644 homestyle.css

diff --git a/home.html b/home.html
index 0cc82c2..b654c07 100644
--- a/home.html
+++ b/home.html
@@ -4,7 +4,155 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Login Memory Cards</title>
-  <link rel="stylesheet" href="homestyle.css" />
+  <style>
+    /* === BACKGROUND === */
+body {
+    margin: 0;
+    font-family: Poppins, Arial, sans-serif;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    /* Pink → Ungu Gradient */
+    background: linear-gradient(135deg, #ff9ed1, #d784ff);
+}
+
+/* === ANIMATED FLOATING FRUITS === */
+.fruit {
+    position: absolute;
+    width: 95px;
+    opacity: 0.85;
+    animation: float 7s infinite ease-in-out;
+    pointer-events: none; /* supaya tidak ganggu klik */
+    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
+}
+
+/* Posisi lebih seimbang & tidak menutupi teks */
+.f1 { top: 6%; left: 12%; animation-delay: .3s; }
+.f2 { top: 12%; right: 18%; animation-delay: 1.2s; }
+.f3 { top: 48%; right: 8%; animation-delay: .7s; }
+.f4 { top: 72%; left: 20%; animation-delay: 1.6s; }
+.f5 { top: 28%; left: 60%; animation-delay: .5s; }
+.f6 { top: 68%; right: 22%; animation-delay: 1s; }
+.f7 { top: 40%; left: 10%; animation-delay: .9s; }
+.f8 { top: 82%; left: 70%; animation-delay: 1.4s; }
+.f9 { top: 18%; right: 46%; animation-delay: .6s; }
+.f10 { top: 80%; right: 10%; animation-delay: 1.8s; }
+
+/* Smooth floating animation */
+@keyframes float {
+  0%   { transform: translateY(0) rotate(0deg); }
+  50%  { transform: translateY(-18px) rotate(6deg); }
+  100% { transform: translateY(0) rotate(0deg); }
+}
+
+@keyframes drift {
+  0%   { transform: translateX(0); }
+  50%  { transform: translateX(22px); }
+  100% { transform: translateX(0); }
+}
+
+.fruit {
+    width: clamp(70px, 7vw, 105px);
+}
+
+/* === CENTRAL CONTAINER === */
+.container {
+    text-align: center;
+}
+
+/* === TITLE WITH GLOW ANIMATION === */
+.title {
+    font-size: 70px;
+    font-weight: 900;
+    color: #ffffff;
+    line-height: 0.9;
+    text-shadow: 
+        0 0 10px #ab2cff,
+        0 0 25px #ff54de,
+        0 0 35px #a639ff;
+
+    animation: glow 2s infinite alternate;
+}
+
+@keyframes glow {
+    0% {
+        text-shadow: 
+            0 0 10px #ab2cff,
+            0 0 25px #ff54de,
+            0 0 40px #a639ff;
+    }
+    100% {
+        text-shadow: 
+            0 0 20px #ffb3f9,
+            0 0 45px #ff7df3,
+            0 0 60px #bb5bff;
+    }
+}
+
+/* === BUTTONS === */
+.btn {
+    width: 260px;
+    padding: 18px 0;
+    font-size: 22px;
+    font-weight: bold;
+    border: none;
+    border-radius: 40px;
+    cursor: pointer;
+    background: linear-gradient(45deg, purple, hotpink);
+    box-shadow: 0 6px 0 rgb(90, 1, 90);
+    transition: transform .2s ease-in-out;
+    color: white;
+}
+
+/* === BUTTON SHAKE ON HOVER === */
+.btn:hover {
+    animation: shake 0.4s ease-in-out;
+}
+
+@keyframes shake {
+    0% { transform: translateX(0); }
+    25% { transform: translateX(-3px); }
+    50% { transform: translateX(3px); }
+    75% { transform: translateX(-2px); }
+    100% { transform: translateX(0); }
+}
+
+/* === OR LINE === */
+.or-line {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 25px 0;
+}
+
+.line {
+    width: 80px;
+    height: 2px;
+    background: rgba(255,255,255,0.8);
+}
+
+.or-line span {
+    margin: 0 10px;
+    font-weight: bold;
+}
+
+/* === HOW TO PLAY === */
+.how {
+    margin-top: 5px;
+    font-size: 22px;
+    color: #fff;
+    opacity: 0.9;
+    padding: 2px 0;
+    cursor: pointer;
+}
+
+ .hidden { display: none !important;
+}
+
+  </style>
 </head>
 <body>
 
@@ -35,5 +183,15 @@
         <button class="btn how-to-play">❓ Cara bermain</button>
     </div>
 </body>
-<script src="home.js"></script>
+<script>
+
+function goToLoginCard() {
+  document.querySelector(".memory").classList.add("hidden");
+  document.querySelector(".login-wrapper").classList.remove("hidden");
+}
+function goToLoginCard() {
+    window.location.href = "login.html";  // atau page tujuan lain
+}
+
+</script>
 </html>
\ No newline at end of file
diff --git a/home.js b/home.js
deleted file mode 100644
index 485fe5c..0000000
--- a/home.js
+++ /dev/null
@@ -1,8 +0,0 @@
-function goToLoginCard() {
-  document.querySelector(".memory").classList.add("hidden");
-  document.querySelector(".login-wrapper").classList.remove("hidden");
-}
-function goToLoginCard() {
-    window.location.href = "login.html";  // atau page tujuan lain
-}
-
diff --git a/homestyle.css b/homestyle.css
deleted file mode 100644
index 577e5bc..0000000
--- a/homestyle.css
+++ /dev/null
@@ -1,148 +0,0 @@
-/* === BACKGROUND === */
-body {
-    margin: 0;
-    font-family: Poppins, Arial, sans-serif;
-    height: 100vh;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    /* Pink → Ungu Gradient */
-    background: linear-gradient(135deg, #ff9ed1, #d784ff);
-}
-
-/* === ANIMATED FLOATING FRUITS === */
-.fruit {
-    position: absolute;
-    width: 95px;
-    opacity: 0.85;
-    animation: float 7s infinite ease-in-out;
-    pointer-events: none; /* supaya tidak ganggu klik */
-    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
-}
-
-/* Posisi lebih seimbang & tidak menutupi teks */
-.f1 { top: 6%; left: 12%; animation-delay: .3s; }
-.f2 { top: 12%; right: 18%; animation-delay: 1.2s; }
-.f3 { top: 48%; right: 8%; animation-delay: .7s; }
-.f4 { top: 72%; left: 20%; animation-delay: 1.6s; }
-.f5 { top: 28%; left: 60%; animation-delay: .5s; }
-.f6 { top: 68%; right: 22%; animation-delay: 1s; }
-.f7 { top: 40%; left: 10%; animation-delay: .9s; }
-.f8 { top: 82%; left: 70%; animation-delay: 1.4s; }
-.f9 { top: 18%; right: 46%; animation-delay: .6s; }
-.f10 { top: 80%; right: 10%; animation-delay: 1.8s; }
-
-/* Smooth floating animation */
-@keyframes float {
-  0%   { transform: translateY(0) rotate(0deg); }
-  50%  { transform: translateY(-18px) rotate(6deg); }
-  100% { transform: translateY(0) rotate(0deg); }
-}
-
-@keyframes drift {
-  0%   { transform: translateX(0); }
-  50%  { transform: translateX(22px); }
-  100% { transform: translateX(0); }
-}
-
-.fruit {
-    width: clamp(70px, 7vw, 105px);
-}
-
-/* === CENTRAL CONTAINER === */
-.container {
-    text-align: center;
-}
-
-/* === TITLE WITH GLOW ANIMATION === */
-.title {
-    font-size: 70px;
-    font-weight: 900;
-    color: #ffffff;
-    line-height: 0.9;
-    text-shadow: 
-        0 0 10px #ab2cff,
-        0 0 25px #ff54de,
-        0 0 35px #a639ff;
-
-    animation: glow 2s infinite alternate;
-}
-
-@keyframes glow {
-    0% {
-        text-shadow: 
-            0 0 10px #ab2cff,
-            0 0 25px #ff54de,
-            0 0 40px #a639ff;
-    }
-    100% {
-        text-shadow: 
-            0 0 20px #ffb3f9,
-            0 0 45px #ff7df3,
-            0 0 60px #bb5bff;
-    }
-}
-
-/* === BUTTONS === */
-.btn {
-    width: 260px;
-    padding: 18px 0;
-    font-size: 22px;
-    font-weight: bold;
-    border: none;
-    border-radius: 40px;
-    cursor: pointer;
-    background: linear-gradient(45deg, purple, hotpink);
-    box-shadow: 0 6px 0 rgb(90, 1, 90);
-    transition: transform .2s ease-in-out;
-    color: white;
-}
-
-/* === BUTTON SHAKE ON HOVER === */
-.btn:hover {
-    animation: shake 0.4s ease-in-out;
-}
-
-@keyframes shake {
-    0% { transform: translateX(0); }
-    25% { transform: translateX(-3px); }
-    50% { transform: translateX(3px); }
-    75% { transform: translateX(-2px); }
-    100% { transform: translateX(0); }
-}
-
-
-/* === OR LINE === */
-.or-line {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 25px 0;
-}
-
-.line {
-    width: 80px;
-    height: 2px;
-    background: rgba(255,255,255,0.8);
-}
-
-.or-line span {
-    margin: 0 10px;
-    font-weight: bold;
-}
-
-/* === HOW TO PLAY === */
-.how {
-    margin-top: 5px;
-    font-size: 22px;
-    color: #fff;
-    opacity: 0.9;
-    padding: 2px 0;
-    cursor: pointer;
-    
-}
-
- .hidden { display: none !important;
-}