emmanuel.rizky/demo-mayagen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add login page with email/phone toggle and form validation

Browse Source 
- Created login page with email/number toggle functionality
- Added input validation and phone number formatting
- Implemented background animation and responsive design
- Set up webhook integration for form submissions
This commit is contained in:
emmanuel.rizky
2025-07-12 09:49:12 +07:00
parent 5ae81e4ecc
commit 28b4d09993
3 changed files with 494 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
login-page/index.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Masuk</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<div class="logo-placeholder"><!-- Logo akan ditempatkan di sini --></div>
<div class="form-toggle">
<button class="toggle-btn active" data-type="email">Email</button>
<button class="toggle-btn" data-type="phone">Nomor HP</button>
</div>
<form id="loginForm">
<div class="input-group">
<div class="identifier-input">
<input type="text" id="email" placeholder="Email" required>
<div id="phoneInputWrapper" class="phone-input-wrapper" style="display: none;">
<span class="phone-prefix-display">+62</span>
<input type="tel" id="phone" class="phone-input" placeholder="8xxxxxxxxxx" required>
</div>
</div>
<input type="password" id="password" placeholder="Kata Sandi" required>
</div>
<button type="submit" class="login-btn">Masuk</button>
</form>
<div class="links">
<a href="#">Daftar Akun</a>
<a href="#">Lupa Kata Sandi</a>
</div>
</div>
<div class="background-animation">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
<script src="script.js"></script>
</body>
</html>