| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html xmlns:th="http://www.thymeleaf.org">
|
|---|
| 3 | <head>
|
|---|
| 4 | <title>Register - Golden Bank</title>
|
|---|
| 5 | <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
|---|
| 6 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|---|
| 7 | <style>
|
|---|
| 8 | body {
|
|---|
| 9 | font-family: 'Arial', sans-serif;
|
|---|
| 10 | background: #07aa70;
|
|---|
| 11 | color: #ffffff;
|
|---|
| 12 | margin: 0;
|
|---|
| 13 | padding: 0;
|
|---|
| 14 | height: 100vh;
|
|---|
| 15 | display: flex;
|
|---|
| 16 | justify-content: center;
|
|---|
| 17 | align-items: center;
|
|---|
| 18 | }
|
|---|
| 19 |
|
|---|
| 20 | .navbar-custom {
|
|---|
| 21 | background-color: rgba(0, 0, 0, 0.7);
|
|---|
| 22 | position: fixed;
|
|---|
| 23 | top: 0;
|
|---|
| 24 | width: 100%;
|
|---|
| 25 | z-index: 1000;
|
|---|
| 26 | }
|
|---|
| 27 |
|
|---|
| 28 | .navbar-custom a {
|
|---|
| 29 | color: #ffffff !important;
|
|---|
| 30 | }
|
|---|
| 31 |
|
|---|
| 32 | .navbar-custom .navbar-brand {
|
|---|
| 33 | font-weight: bold;
|
|---|
| 34 | }
|
|---|
| 35 |
|
|---|
| 36 | .navbar-custom .social-icons a {
|
|---|
| 37 | color: #ffffff;
|
|---|
| 38 | margin-left: 15px;
|
|---|
| 39 | font-size: 1.2rem;
|
|---|
| 40 | transition: color 0.3s ease;
|
|---|
| 41 | }
|
|---|
| 42 |
|
|---|
| 43 | .navbar-custom .social-icons a:hover {
|
|---|
| 44 | color: #ffd700;
|
|---|
| 45 | }
|
|---|
| 46 |
|
|---|
| 47 | .container {
|
|---|
| 48 | max-width: 450px;
|
|---|
| 49 | padding: 30px;
|
|---|
| 50 | background-color: rgba(255, 255, 255, 0.1);
|
|---|
| 51 | border-radius: 10px;
|
|---|
| 52 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
|---|
| 53 | position: relative;
|
|---|
| 54 | text-align: center;
|
|---|
| 55 | }
|
|---|
| 56 |
|
|---|
| 57 | .container h2 {
|
|---|
| 58 | color: #ffffff;
|
|---|
| 59 | margin-bottom: 20px;
|
|---|
| 60 | }
|
|---|
| 61 |
|
|---|
| 62 | .form-group label {
|
|---|
| 63 | color: #dddddd;
|
|---|
| 64 | text-align: left;
|
|---|
| 65 | display: block;
|
|---|
| 66 | }
|
|---|
| 67 |
|
|---|
| 68 | .form-group input {
|
|---|
| 69 | border: 1px solid #ffd700;
|
|---|
| 70 | background-color: #333;
|
|---|
| 71 | color: #ffffff;
|
|---|
| 72 | }
|
|---|
| 73 |
|
|---|
| 74 | .btn {
|
|---|
| 75 | background-color: #ffd700;
|
|---|
| 76 | border: none;
|
|---|
| 77 | color: black;
|
|---|
| 78 | transition: background-color 0.3s ease;
|
|---|
| 79 | }
|
|---|
| 80 |
|
|---|
| 81 | .btn:hover {
|
|---|
| 82 | background-color: #ffc700;
|
|---|
| 83 | }
|
|---|
| 84 |
|
|---|
| 85 | .custom-link {
|
|---|
| 86 | color: #ffd700;
|
|---|
| 87 | text-decoration: none;
|
|---|
| 88 | font-weight: bold;
|
|---|
| 89 | }
|
|---|
| 90 |
|
|---|
| 91 | .custom-link:hover {
|
|---|
| 92 | color: #ffecb3;
|
|---|
| 93 | text-decoration: underline;
|
|---|
| 94 | }
|
|---|
| 95 |
|
|---|
| 96 | .footer {
|
|---|
| 97 | background-color: rgba(0, 0, 0, 0.7);
|
|---|
| 98 | color: white;
|
|---|
| 99 | padding: 15px 0;
|
|---|
| 100 | font-size: 14px;
|
|---|
| 101 | position: fixed;
|
|---|
| 102 | bottom: 0;
|
|---|
| 103 | width: 100%;
|
|---|
| 104 | text-align: center;
|
|---|
| 105 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|---|
| 106 | }
|
|---|
| 107 |
|
|---|
| 108 | @keyframes shake {
|
|---|
| 109 | 0% { transform: translateX(0); }
|
|---|
| 110 | 25% { transform: translateX(-5px); }
|
|---|
| 111 | 50% { transform: translateX(5px); }
|
|---|
| 112 | 75% { transform: translateX(-5px); }
|
|---|
| 113 | 100% { transform: translateX(0); }
|
|---|
| 114 | }
|
|---|
| 115 | </style>
|
|---|
| 116 | </head>
|
|---|
| 117 | <body>
|
|---|
| 118 | <nav class="navbar navbar-expand-lg navbar-custom">
|
|---|
| 119 | <a class="navbar-brand" href="#">Golden Bank</a>
|
|---|
| 120 | <div class="ml-auto social-icons">
|
|---|
| 121 | <a href="https://www.youtube.com" target="_blank" title="YouTube">
|
|---|
| 122 | <i class="fab fa-youtube"></i>
|
|---|
| 123 | </a>
|
|---|
| 124 | <a href="https://linkedin.com" target="_blank" title="LinkedIn">
|
|---|
| 125 | <i class="fab fa-linkedin"></i>
|
|---|
| 126 | </a>
|
|---|
| 127 | </div>
|
|---|
| 128 | </nav>
|
|---|
| 129 |
|
|---|
| 130 | <div class="container">
|
|---|
| 131 | <h2 class="text-center">Register a New Account</h2>
|
|---|
| 132 | <form method="post" action="/register">
|
|---|
| 133 | <div class="form-group">
|
|---|
| 134 | <label>Username:</label>
|
|---|
| 135 | <input type="text" class="form-control" name="username" required />
|
|---|
| 136 | </div>
|
|---|
| 137 | <div class="form-group">
|
|---|
| 138 | <label>E-mail:</label>
|
|---|
| 139 | <input type="text" class="form-control" name="email" required />
|
|---|
| 140 | </div>
|
|---|
| 141 | <div class="form-group">
|
|---|
| 142 | <label>Password:</label>
|
|---|
| 143 | <input type="password" class="form-control" name="password" required />
|
|---|
| 144 | </div>
|
|---|
| 145 | <button type="submit" class="btn btn-block">Register</button>
|
|---|
| 146 | </form>
|
|---|
| 147 | <p class="text-center mt-3">Already have an account? <a href="/login" class="custom-link">Login here</a></p>
|
|---|
| 148 |
|
|---|
| 149 | <div th:if="${error}" class="alert alert-danger mt-3 text-center">
|
|---|
| 150 | User already present.
|
|---|
| 151 | </div>
|
|---|
| 152 | </div>
|
|---|
| 153 |
|
|---|
| 154 | <!-- Footer -->
|
|---|
| 155 | <footer class="footer">
|
|---|
| 156 | <p>© 2025 Code With NedevIT&AI. All rights reserved. | <a href="#" class="custom-link">Privacy Policy</a> | <a href="#" class="custom-link">Terms of Service</a></p>
|
|---|
| 157 | </footer>
|
|---|
| 158 |
|
|---|
| 159 | </body>
|
|---|
| 160 | </html>
|
|---|
