diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..5c2d388 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,14 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Open login.html", + "file": "d:\\SR GIASHINTA\\GAME UAS KEL 2\\Kelompok02-Memory-Card\\login.html" + } + ] +} \ No newline at end of file diff --git a/register.css b/register.css new file mode 100644 index 0000000..4525b5d --- /dev/null +++ b/register.css @@ -0,0 +1,163 @@ +body { + margin: 0; + font-family: Arial, sans-serif; + background: #f7f7ff; +} + +.page { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + position: relative; +} + +/* Background Animasi */ +.bg-1, .bg-2, .bg-3 { + position: absolute; + border-radius: 50%; + filter: blur(70px); + opacity: 0.4; +} + +.bg-1 { + width: 300px; height: 300px; + background: rgba(255,255,255,0.3); + top: 10%; left: 10%; + animation: glow 4s infinite alternate; +} + +.bg-2 { + width: 400px; height: 400px; + background: rgba(255,120,200,0.3); + bottom: 10%; right: 10%; + animation: float 6s infinite; +} + +.bg-3 { + width: 250px; height: 250px; + background: rgba(200,100,255,0.3); + top: 50%; left: 50%; + transform: translate(-50%, -50%); + animation: glow 5s infinite alternate; +} + +@keyframes glow { + 0% { opacity: 0.2; } + 100% { opacity: 0.55; } +} + +@keyframes float { + 0% { transform: translateY(0); } + 50% { transform: translateY(-20px); } + 100% { transform: translateY(0); } +} + +/* Container */ +.container { + background: rgba(255,255,255,0.7); + backdrop-filter: blur(10px); + padding: 40px; + border-radius: 25px; + width: 350px; + z-index: 10; + box-shadow: 0 10px 28px rgba(0,0,0,0.2); +} + +/* Icon */ +.icon-wrapper { + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +.icon-bg { + width: 90px; height: 90px; + background: linear-gradient(45deg, purple, hotpink); + border-radius: 50%; + filter: blur(12px); + position: absolute; + animation: glow 3s infinite alternate; +} + +.icon { + background: linear-gradient(45deg, purple, hotpink); + border-radius: 50%; + width: 70px; height: 70px; + display: flex; + justify-content: center; + align-items: center; + position: relative; +} + +/* Text */ +.title { + text-align: center; + font-size: 22px; + margin-bottom: 10px; + background: linear-gradient(45deg, purple, hotpink); + color: transparent; +} + +.subtitle { + text-align: center; + color: gray; + margin-bottom: 20px; +} + +/* Form */ +label { + font-size: 14px; + color: #444; +} + +input { + width: 100%; + padding: 12px; + border-radius: 12px; + border: 2px solid #ccc; + background: #fafafa; + margin-bottom: 15px; +} + +input:focus { + outline: none; + border-color: purple; +} + +#errorBox { + color: red; + background: #ffe5e5; + padding: 10px; + border-radius: 10px; + margin-bottom: 10px; + display: none; +} + +/* Button */ +.btn { + width: 100%; + background: linear-gradient(45deg, purple, hotpink); + color: white; + padding: 14px; + border: none; + border-radius: 15px; + font-size: 16px; + cursor: pointer; + transition: 0.2s; +} + +.btn:hover { + transform: scale(1.02); + box-shadow: 0 4px 15px rgba(0,0,0,0.3); +} + +.login-link { + text-align: center; + margin-top: 15px; +} + +.login-link a { + color: purple; + text-decoration: underline; +} diff --git a/register.html b/register.html new file mode 100644 index 0000000..cd3e754 --- /dev/null +++ b/register.html @@ -0,0 +1,54 @@ + + + + + + Register Akun + + + + +
+ +
+
+
+ +
+
+
+
+ +
+
+ +

Buat Akun Baru ✨

+

Daftar untuk bermain Memory Card Game

+ +
+ + + + + + + + + + + + +
+ + +
+ + +
+
+ + + +