diff --git a/Register.css b/Register.css
index 8c5504f..853c38d 100644
--- a/Register.css
+++ b/Register.css
@@ -1,87 +1,4 @@
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Arial', sans-serif;
- background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%);
- min-height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- overflow: hidden;
- position: relative;
-}
-
-/* Neon Particles */
-#particles {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 1;
-}
-
-.particle {
- position: absolute;
- width: 5px;
- height: 5px;
- border-radius: 50%;
- background: radial-gradient(circle, #00ffff, #0099ff);
- box-shadow: 0 0 10px #00eaff, 0 0 25px #0088ff;
- pointer-events: none;
-}
-
-.container {
- position: relative;
- z-index: 2;
- background: rgba(20, 0, 40, 0.65);
- border-radius: 20px;
- padding: 50px 40px;
- width: 90%;
- max-width: 420px;
-
- border: 2px solid rgba(0, 255, 255, 0.4);
- box-shadow:
- 0 0 25px rgba(0, 255, 255, 0.4),
- 0 0 60px rgba(255, 0, 255, 0.25),
- inset 0 0 40px rgba(0, 255, 255, 0.2);
- animation: scanGlow 4s ease-in-out infinite alternate;
-}
-
-@keyframes scanGlow {
- 0% {
- border-color: #00eaff;
- box-shadow:
- 0 0 20px rgba(0, 255, 255, 0.3),
- 0 0 40px rgba(0, 255, 255, 0.2),
- inset 0 0 25px rgba(0, 255, 255, 0.1);
- }
- 100% {
- border-color: #ff00ff;
- box-shadow:
- 0 0 30px rgba(255, 0, 255, 0.4),
- 0 0 70px rgba(255, 0, 255, 0.3),
- inset 0 0 35px rgba(255, 0, 255, 0.2);
- }
-}
-
-h1 {
- text-align: center;
- font-size: 2rem;
- margin-bottom: 40px;
- background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- text-transform: uppercase;
- letter-spacing: 3px;
- font-weight: bold;
-}
-
+/* register-form.css */
.input-group {
margin-bottom: 25px;
}
@@ -156,220 +73,4 @@ input::placeholder {
.register-link a:hover {
color: #ff00ff;
text-shadow: 0 0 10px #00ddff;
-}
-
-/* Modal - CENTERED VERSION */
-.modal {
- display: none;
- position: fixed;
- z-index: 1000;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.7);
- backdrop-filter: blur(5px);
- animation: fadeIn 0.3s ease;
-}
-
-.modal.show {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.modal-content {
- background: linear-gradient(135deg, rgba(30, 0, 50, 0.95) 0%, rgba(50, 0, 80, 0.95) 100%);
- border: 2px solid rgba(0, 217, 255, 0.3);
- border-radius: 20px;
- padding: 40px 30px;
- text-align: center;
- max-width: 400px;
- width: 90%;
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
- 0 0 40px rgba(0, 217, 255, 0.3),
- inset 0 0 30px rgba(0, 217, 255, 0.1);
- animation: slideIn 0.3s ease, glowBorder 3s ease-in-out infinite;
-}
-
-@keyframes glowBorder {
- 0%, 100% {
- border-color: rgba(0, 217, 255, 0.4);
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
- 0 0 40px rgba(0, 217, 255, 0.3),
- inset 0 0 30px rgba(0, 217, 255, 0.1);
- }
- 50% {
- border-color: rgba(255, 0, 255, 0.5);
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
- 0 0 50px rgba(255, 0, 255, 0.4),
- inset 0 0 40px rgba(255, 0, 255, 0.15);
- }
-}
-
-.modal-icon {
- width: 80px;
- height: 80px;
- margin: 0 auto 20px;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 40px;
-}
-
-.modal-icon.success {
- background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
- box-shadow: 0 0 30px rgba(0, 217, 255, 0.6);
-}
-
-.modal-icon.success::before {
- content: "✓";
- color: #fff;
-}
-
-.modal-icon.error {
- background: linear-gradient(135deg, #ff0080 0%, #ff00ff 100%);
- box-shadow: 0 0 30px rgba(255, 0, 128, 0.6);
-}
-
-.modal-icon.error::before {
- content: "✕";
- color: #fff;
-}
-
-.modal-content h2 {
- color: #fff;
- font-size: 1.8rem;
- margin-bottom: 15px;
- background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-}
-
-.modal-content p {
- color: rgba(255, 255, 255, 0.8);
- font-size: 1rem;
- margin-bottom: 30px;
- line-height: 1.5;
-}
-
-.modal-btn {
- padding: 12px 50px;
- background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
- border: none;
- border-radius: 10px;
- color: #fff;
- font-size: 16px;
- font-weight: bold;
- text-transform: uppercase;
- letter-spacing: 2px;
- cursor: pointer;
- transition: all 0.3s ease;
- box-shadow: 0 5px 25px rgba(0, 217, 255, 0.4);
-}
-
-.modal-btn:hover {
- transform: translateY(-2px);
- box-shadow: 0 8px 35px rgba(0, 217, 255, 0.6);
-}
-
-.modal-btn:active {
- transform: translateY(0);
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@keyframes slideIn {
- from {
- transform: translateY(-50px);
- opacity: 0;
- }
- to {
- transform: translateY(0);
- opacity: 1;
- }
-}
-
-/* Autocomplete/Datalist Styling */
-input::-webkit-calendar-picker-indicator {
- filter: invert(1);
-}
-
-/* Browser autocomplete styling */
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus {
- -webkit-text-fill-color: #fff;
- -webkit-box-shadow: 0 0 0px 1000px rgba(50, 50, 70, 0.5) inset;
- transition: background-color 5000s ease-in-out 0s;
- border: 2px solid rgba(100, 100, 120, 0.3);
-}
-
-input:-webkit-autofill:focus {
- border-color: #00d9ff;
-}
-
-/* Datalist dropdown styling - limited due to browser restrictions */
-datalist {
- background-color: rgba(30, 0, 50, 0.95);
-}
-
-option {
- background-color: rgba(30, 0, 50, 0.95);
- color: #fff;
- padding: 10px;
-}
-
-/* For Firefox */
-input::-moz-list-thumbnail {
- background-color: rgba(30, 0, 50, 0.95);
-}
-
-/* Custom styling for dropdown suggestion */
-input[list]::-webkit-list-button {
- color: #00d9ff;
-}
-
-/* Responsive */
-@media (max-width: 480px) {
- .container {
- padding: 30px 25px;
- }
-
- h1 {
- font-size: 1.8rem;
- }
-
- input {
- padding: 13px 15px;
- font-size: 15px;
- }
-
- .btn {
- padding: 13px;
- font-size: 16px;
- }
-
- .modal-icon {
- width: 60px;
- height: 60px;
- font-size: 30px;
- }
-
- .modal-content h2 {
- font-size: 1.3rem;
- }
-
- .modal-content p {
- font-size: 0.9rem;
- }
}
\ No newline at end of file
diff --git a/Register.html b/Register.html
index dca1da9..b052177 100644
--- a/Register.html
+++ b/Register.html
@@ -4,7 +4,12 @@
Register
-
+
+
+
+
+
+
diff --git a/Register_Autofill.css b/Register_Autofill.css
new file mode 100644
index 0000000..f90387c
--- /dev/null
+++ b/Register_Autofill.css
@@ -0,0 +1,40 @@
+/* register-autofill.css */
+/* Autocomplete/Datalist Styling */
+input::-webkit-calendar-picker-indicator {
+ filter: invert(1);
+}
+
+/* Browser autocomplete styling */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+ -webkit-text-fill-color: #fff;
+ -webkit-box-shadow: 0 0 0px 1000px rgba(50, 50, 70, 0.5) inset;
+ transition: background-color 5000s ease-in-out 0s;
+ border: 2px solid rgba(100, 100, 120, 0.3);
+}
+
+input:-webkit-autofill:focus {
+ border-color: #00d9ff;
+}
+
+/* Datalist dropdown styling - limited due to browser restrictions */
+datalist {
+ background-color: rgba(30, 0, 50, 0.95);
+}
+
+option {
+ background-color: rgba(30, 0, 50, 0.95);
+ color: #fff;
+ padding: 10px;
+}
+
+/* For Firefox */
+input::-moz-list-thumbnail {
+ background-color: rgba(30, 0, 50, 0.95);
+}
+
+/* Custom styling for dropdown suggestion */
+input[list]::-webkit-list-button {
+ color: #00d9ff;
+}
\ No newline at end of file
diff --git a/Register_Base.css b/Register_Base.css
new file mode 100644
index 0000000..5b8e2e2
--- /dev/null
+++ b/Register_Base.css
@@ -0,0 +1,37 @@
+/* register-base.css */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Arial', sans-serif;
+ background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%);
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+ position: relative;
+}
+
+/* Neon Particles */
+#particles {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+}
+
+.particle {
+ position: absolute;
+ width: 5px;
+ height: 5px;
+ border-radius: 50%;
+ background: radial-gradient(circle, #00ffff, #0099ff);
+ box-shadow: 0 0 10px #00eaff, 0 0 25px #0088ff;
+ pointer-events: none;
+}
\ No newline at end of file
diff --git a/Register_Container.css b/Register_Container.css
new file mode 100644
index 0000000..12fd3af
--- /dev/null
+++ b/Register_Container.css
@@ -0,0 +1,47 @@
+/* register-container.css */
+.container {
+ position: relative;
+ z-index: 2;
+ background: rgba(20, 0, 40, 0.65);
+ border-radius: 20px;
+ padding: 50px 40px;
+ width: 90%;
+ max-width: 420px;
+
+ border: 2px solid rgba(0, 255, 255, 0.4);
+ box-shadow:
+ 0 0 25px rgba(0, 255, 255, 0.4),
+ 0 0 60px rgba(255, 0, 255, 0.25),
+ inset 0 0 40px rgba(0, 255, 255, 0.2);
+ animation: scanGlow 4s ease-in-out infinite alternate;
+}
+
+h1 {
+ text-align: center;
+ font-size: 2rem;
+ margin-bottom: 40px;
+ background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ font-weight: bold;
+}
+
+@keyframes scanGlow {
+ 0% {
+ border-color: #00eaff;
+ box-shadow:
+ 0 0 20px rgba(0, 255, 255, 0.3),
+ 0 0 40px rgba(0, 255, 255, 0.2),
+ inset 0 0 25px rgba(0, 255, 255, 0.1);
+ }
+ 100% {
+ border-color: #ff00ff;
+ box-shadow:
+ 0 0 30px rgba(255, 0, 255, 0.4),
+ 0 0 70px rgba(255, 0, 255, 0.3),
+ inset 0 0 35px rgba(255, 0, 255, 0.2);
+ }
+}
\ No newline at end of file
diff --git a/Register_Modal.css b/Register_Modal.css
new file mode 100644
index 0000000..d0b2bc4
--- /dev/null
+++ b/Register_Modal.css
@@ -0,0 +1,130 @@
+/* register-modal.css */
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 1000;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.7);
+ backdrop-filter: blur(5px);
+ animation: fadeIn 0.3s ease;
+}
+
+.modal.show {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.modal-content {
+ background: linear-gradient(135deg, rgba(30, 0, 50, 0.95) 0%, rgba(50, 0, 80, 0.95) 100%);
+ border: 2px solid rgba(0, 217, 255, 0.3);
+ border-radius: 20px;
+ padding: 40px 30px;
+ text-align: center;
+ max-width: 400px;
+ width: 90%;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
+ 0 0 40px rgba(0, 217, 255, 0.3),
+ inset 0 0 30px rgba(0, 217, 255, 0.1);
+ animation: slideIn 0.3s ease, glowBorder 3s ease-in-out infinite;
+}
+
+.modal-icon {
+ width: 80px;
+ height: 80px;
+ margin: 0 auto 20px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 40px;
+}
+
+.modal-icon.success {
+ background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
+ box-shadow: 0 0 30px rgba(0, 217, 255, 0.6);
+}
+
+.modal-icon.success::before {
+ content: "✓";
+ color: #fff;
+}
+
+.modal-icon.error {
+ background: linear-gradient(135deg, #ff0080 0%, #ff00ff 100%);
+ box-shadow: 0 0 30px rgba(255, 0, 128, 0.6);
+}
+
+.modal-icon.error::before {
+ content: "✕";
+ color: #fff;
+}
+
+.modal-content h2 {
+ color: #fff;
+ font-size: 1.8rem;
+ margin-bottom: 15px;
+ background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.modal-content p {
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 1rem;
+ margin-bottom: 30px;
+ line-height: 1.5;
+}
+
+.modal-btn {
+ padding: 12px 50px;
+ background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
+ border: none;
+ border-radius: 10px;
+ color: #fff;
+ font-size: 16px;
+ font-weight: bold;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 5px 25px rgba(0, 217, 255, 0.4);
+}
+
+.modal-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 35px rgba(0, 217, 255, 0.6);
+}
+
+.modal-btn:active {
+ transform: translateY(0);
+}
+
+@keyframes glowBorder {
+ 0%, 100% {
+ border-color: rgba(0, 217, 255, 0.4);
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
+ 0 0 40px rgba(0, 217, 255, 0.3),
+ inset 0 0 30px rgba(0, 217, 255, 0.1);
+ }
+ 50% {
+ border-color: rgba(255, 0, 255, 0.5);
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
+ 0 0 50px rgba(255, 0, 255, 0.4),
+ inset 0 0 40px rgba(255, 0, 255, 0.15);
+ }
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes slideIn {
+ from { transform: translateY(-50px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+}
\ No newline at end of file
diff --git a/Register_Responsive.css b/Register_Responsive.css
new file mode 100644
index 0000000..9043052
--- /dev/null
+++ b/Register_Responsive.css
@@ -0,0 +1,34 @@
+/* register-responsive.css */
+@media (max-width: 480px) {
+ .container {
+ padding: 30px 25px;
+ }
+
+ h1 {
+ font-size: 1.8rem;
+ }
+
+ input {
+ padding: 13px 15px;
+ font-size: 15px;
+ }
+
+ .btn {
+ padding: 13px;
+ font-size: 16px;
+ }
+
+ .modal-icon {
+ width: 60px;
+ height: 60px;
+ font-size: 30px;
+ }
+
+ .modal-content h2 {
+ font-size: 1.3rem;
+ }
+
+ .modal-content p {
+ font-size: 0.9rem;
+ }
+}
\ No newline at end of file