Переглянути джерело

Create the base of the register page

Lee Morgan 4 тижнів тому
батько
коміт
ae5999862e
2 змінених файлів з 64 додано та 10 видалено
  1. 29 10
      src/lib/global.css
  2. 35 0
      src/routes/register/+page.svelte

+ 29 - 10
src/lib/global.css

@@ -79,33 +79,52 @@
     color: #e05555;
 }
 
-.standardForm button[type="submit"] {
+.standardForm button {
     width: 100%;
     padding: 0.7rem 1rem;
-    background: #5a5aff;
-    color: #fff;
+    background: #2e2e4a;
+    color: #b0b0c8;
     font-size: 1rem;
     font-weight: 600;
-    border: none;
+    border: 1px solid #3e3e60;
     border-radius: 8px;
     cursor: pointer;
-    transition: background 0.15s, transform 0.1s;
+    transition: background 0.15s, color 0.15s, transform 0.1s;
     margin-top: 0.25rem;
 }
 
-.standardForm button[type="submit"]:hover {
-    background: #4646e0;
+.standardForm button:hover {
+    background: #3a3a5e;
+    color: #e8e8f0;
 }
 
-.standardForm button[type="submit"]:active {
+.standardForm button:active {
     transform: scale(0.98);
 }
 
+.standardForm button:disabled {
+    background: #1e1e34;
+    color: #444466;
+    border-color: #2a2a44;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.standardForm button[type="submit"] {
+    background: #5a5aff;
+    color: #fff;
+    border-color: transparent;
+}
+
+.standardForm button[type="submit"]:hover {
+    background: #4646e0;
+    color: #fff;
+}
+
 .standardForm button[type="submit"]:disabled {
     background: #3a3a66;
     color: #666688;
-    cursor: not-allowed;
-    transform: none;
+    border-color: transparent;
 }
 
 .standardForm a {

+ 35 - 0
src/routes/register/+page.svelte

@@ -0,0 +1,35 @@
+<script>
+    import "$lib/global.css";
+
+    let name = $state("");
+    let email = $state("");
+    let password = $state("");
+    let confirmPassword = $state("");
+    let url = $state("");
+
+    const submit = ()=>{
+        console.log("submitting");
+    }
+</script>
+
+<div id="register" class="standardForm" onsubmit={submit}>
+    <label>Name:
+        <input bind:value={name} type="text" required>
+    </label>
+
+    <label>Email:
+        <input bind:value={email} type="email" required>
+    </label>
+
+    <label>Password:
+        <input bind:value={password} type="password" required>
+    </label>
+
+    <label>Confirm Password:
+        <input bind:value={confirmPassword} type="password" required>
+    </label>
+
+    <input bind:value={url} type="hidden" required>
+
+    <button>Register</button>
+</div>