Retail-Inventory-and-Rental-Tracker/Signup.html at main · prisha-11/Retail-Inventory-and-Rental-Tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign up Page</title>

    <!-- Load Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Load Inter Font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

    <script>
        // Configure Tailwind to use the new Inter font and define custom colors
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'purple-dark': '#1F0038',   /* Deep Violet Background */
                        'purple-mid': '#5B21B6',    /* Card Background */
                        'purple-accent': '#F0ABFC', /* Neon Pink/Accent */
                        'button-base': '#9333EA',   /* Button Base */
                        'button-hover': '#A855F7',  /* Button Hover */
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style>
        /* CSS variables are maintained for cleaner use in the style block */
        :root {
            --purple-dark: #1F0038;
            --purple-mid: #5B21B6;
            --purple-accent: #F0ABFC;
            --button-base: #9333EA;
            --button-hover: #A855F7;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--purple-dark);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            color: white; /* Ensure base text is readable */
        }

        /* Standard Card Styling */
        .standard-card {
            background-color: var(--purple-mid);
            border-radius: 0.75rem; /* Rounded corners */
            /* Modern, subtle shadow for depth */
            box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.4);
            transition: transform 0.2s;
        }

        /* Standard Input Styling */
        .standard-input {
            background-color: #3f007a; /* Slightly lighter dark purple for input contrast */
            color: white;
            border: 1px solid var(--purple-accent);
            padding: 10px 15px;
            border-radius: 0.5rem;
            transition: border-color 0.2s, background-color 0.2s;
            font-size: 1rem;
        }
        .standard-input:focus {
            outline: none;
            border-color: #F0ABFC; /* Neon accent on focus */
            /* Glowing effect on focus */
            box-shadow: 0 0 0 3px rgba(240, 171, 252, 0.5);
        }
        .standard-input::placeholder {
            color: #d8b4fe;
            opacity: 0.7;
        }

        /* Standard Button Styling */
        .standard-button {
            background-color: var(--button-base);
            color: white;
            padding: 12px 24px;
            border-radius: 0.5rem;
            transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
            font-weight: 600;
            letter-spacing: 0.05em;
        }
        .standard-button:hover {
            background-color: var(--button-hover);
            transform: translateY(-2px); /* Slight lift on hover */
            box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body class="antialiased">

    <!-- Sign Up Container -->
    <div class="w-full max-w-md">

        <!-- Header Text -->
        <div class="text-center mb-10">
            <h1 class="text-4xl sm:text-5xl font-bold text-white mb-2">
                Welcome to <span class="text-purple-accent">ThreadList</span>
            </h1>
            <p class="text-violet-300 text-lg font-medium">Sign Up</p>
        </div>

        <!-- Standard Signup Card -->
        <div class="standard-card p-8 sm:p-12 w-full mx-auto">

            <form id="signUpForm" class="space-y-6">

                <!-- Title & Prompt -->
                <div class="text-center mb-6">
                    <h2 class="text-3xl font-semibold text-white">Sign Up</h2>
                </div>

                <!-- Username Input -->
                <div>
                    <label for="username" class="block mb-2 text-sm font-medium text-violet-300">Username</label>
                    <input type="text" id="username" name="username" placeholder="Enter your username" required
                           class="standard-input w-full">
                </div>

                <!-- Password Input -->
                <div>
                    <label for="password" class="block mb-2 text-sm font-medium text-violet-300">Password</label>
                    <input type="password" id="password" name="password" placeholder="Enter your password" required
                           class="standard-input w-full">
                </div>

                <!-- Message Box for error/success -->
                <div id="messageBox" class="hidden text-center p-3 mt-4 text-base font-medium rounded-lg bg-red-800 text-red-300 border border-red-300">
                    <!-- Message goes here -->
                </div>

                <!-- Sign up Button -->
                <div class="pt-4">
                    <button type="submit" class="standard-button w-full">
                        Sign Up
                    </button>
                </div>

                <!-- Footer Links -->

                <div class="text-center mt-4">
                    <a href="login.html" class="text-sm text-violet-300 hover:text-white transition-colors duration-100 font-medium underline underline-offset-4">
                        Login Here
                    </a>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Simple client-side validation logic

    </script>
</body>
</html>