├── img
    ├── b1.jpg
    ├── b2.jpg
    ├── b3.jpg
    ├── car.jpg
    ├── jcb.jpg
    ├── bike.jpg
    ├── buggy.jpg
    ├── doll.jpg
    ├── drone.jpg
    ├── lamba.jpg
    ├── phone.jpg
    ├── robo.jpg
    ├── rover.jpg
    ├── teddy.jpg
    ├── truck.jpg
    ├── babytoy.jpg
    ├── cycyle.jpg
    ├── dinosers.jpg
    ├── elephant.jpg
    ├── monster.jpg
    ├── tractor.jpg
    ├── blank-avatar.jpg
    ├── favicon-16x16.png
    ├── screenshot-1.png
    ├── screenshot-2.png
    ├── screenshot-3.png
    ├── screenshot-4.png
    ├── screenshot-5.png
    ├── screenshot-6.png
    ├── localhost_Nithin_index.php and 2 more pages - Personal 2 - Microsoft​ Edge Beta 5_15_2024 6_40_05 PM.png
    ├── localhost_Nithin_index.php and 2 more pages - Personal 2 - Microsoft​ Edge Beta 5_15_2024 6_41_13 PM.png
    └── localhost_Nithin_index.php and 2 more pages - Personal 2 - Microsoft​ Edge Beta 5_15_2024 6_41_20 PM.png
├── logout.php
├── css
    └── main.css
├── config.php
├── js
    └── script.js
├── README.md
├── registered.sql
├── womens.html
├── mens.html
├── login.php
├── index.php
└── register.php


/img/b1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/b1.jpg


--------------------------------------------------------------------------------
/img/b2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/b2.jpg


--------------------------------------------------------------------------------
/img/b3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/b3.jpg


--------------------------------------------------------------------------------
/img/car.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/car.jpg


--------------------------------------------------------------------------------
/img/jcb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/jcb.jpg


--------------------------------------------------------------------------------
/img/bike.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/bike.jpg


--------------------------------------------------------------------------------
/img/buggy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/buggy.jpg


--------------------------------------------------------------------------------
/img/doll.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/doll.jpg


--------------------------------------------------------------------------------
/img/drone.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/drone.jpg


--------------------------------------------------------------------------------
/img/lamba.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/lamba.jpg


--------------------------------------------------------------------------------
/img/phone.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/phone.jpg


--------------------------------------------------------------------------------
/img/robo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/robo.jpg


--------------------------------------------------------------------------------
/img/rover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/rover.jpg


--------------------------------------------------------------------------------
/img/teddy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/teddy.jpg


--------------------------------------------------------------------------------
/img/truck.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/truck.jpg


--------------------------------------------------------------------------------
/img/babytoy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/babytoy.jpg


--------------------------------------------------------------------------------
/img/cycyle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/cycyle.jpg


--------------------------------------------------------------------------------
/img/dinosers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/dinosers.jpg


--------------------------------------------------------------------------------
/img/elephant.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/elephant.jpg


--------------------------------------------------------------------------------
/img/monster.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/monster.jpg


--------------------------------------------------------------------------------
/img/tractor.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/tractor.jpg


--------------------------------------------------------------------------------
/img/blank-avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/blank-avatar.jpg


--------------------------------------------------------------------------------
/img/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/favicon-16x16.png


--------------------------------------------------------------------------------
/img/screenshot-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/screenshot-1.png


--------------------------------------------------------------------------------
/img/screenshot-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/screenshot-2.png


--------------------------------------------------------------------------------
/img/screenshot-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/screenshot-3.png


--------------------------------------------------------------------------------
/img/screenshot-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/screenshot-4.png


--------------------------------------------------------------------------------
/img/screenshot-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/screenshot-5.png


--------------------------------------------------------------------------------
/img/screenshot-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/screenshot-6.png


--------------------------------------------------------------------------------
/img/localhost_Nithin_index.php and 2 more pages - Personal 2 - Microsoft​ Edge Beta 5_15_2024 6_40_05 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/localhost_Nithin_index.php and 2 more pages - Personal 2 - Microsoft​ Edge Beta 5_15_2024 6_40_05 PM.png


--------------------------------------------------------------------------------
/img/localhost_Nithin_index.php and 2 more pages - Personal 2 - Microsoft​ Edge Beta 5_15_2024 6_41_13 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/localhost_Nithin_index.php and 2 more pages - Personal 2 - Microsoft​ Edge Beta 5_15_2024 6_41_13 PM.png


--------------------------------------------------------------------------------
/img/localhost_Nithin_index.php and 2 more pages - Personal 2 - Microsoft​ Edge Beta 5_15_2024 6_41_20 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Muthukumarshub/Toys_store_with-data_base/HEAD/img/localhost_Nithin_index.php and 2 more pages - Personal 2 - Microsoft​ Edge Beta 5_15_2024 6_41_20 PM.png


--------------------------------------------------------------------------------
/logout.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | # Initialize the session
 3 | session_start();
 4 | 
 5 | # Unset all session variables
 6 | $_SESSION = array();
 7 | 
 8 | # Destroy the session
 9 | session_destroy();
10 | 
11 | # Redirect to login page
12 | echo "<script>" . "window.location.href='./login.php';" . "</script>";
13 | exit;
14 | 


--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700&display=swap");
 2 | 
 3 | body {
 4 |   font-family: "Barlow Semi Condensed", sans-serif;
 5 | }
 6 | 
 7 | .alert {
 8 |   padding: 0.5rem;
 9 | }
10 | 
11 | .form-wrap h1,
12 | .form-wrap .form-label {
13 |   font-weight: 600;
14 | }
15 | 


--------------------------------------------------------------------------------
/config.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | define("DB_SERVER", "localhost");
 3 | define("DB_USERNAME", "root");
 4 | define("DB_PASSWORD", "");
 5 | define("DB_NAME", "registereed");
 6 | 
 7 | # Connection
 8 | $link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
 9 | 
10 | # Check connection
11 | if (!$link) {
12 |   die("Connection failed: " . mysqli_connect_error());
13 | }
14 | 


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
 1 | // Toggle password visibility
 2 | const userPasswordEl = document.querySelector("#password");
 3 | const togglePasswordEl = document.querySelector("#togglePassword");
 4 | 
 5 | togglePasswordEl.addEventListener("click", function () {
 6 |   if (this.checked === true) {
 7 |     userPasswordEl.setAttribute("type", "text");
 8 |   } else {
 9 |     userPasswordEl.setAttribute("type", "password");
10 |   }
11 | });
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # PHP-MySQL-Login-System
 2 | User login and registration system built using PHP and MySQL .
 3 | 
 4 | **Live Project URL -** [PHP-MySQL-Login-System](https://live-demo97.000webhostapp.com/)
 5 | 
 6 | ![screenshot](./img/screenshot-1.png)
 7 | ![screenshot](./img/screenshot-2.png)
 8 | ![screenshot](./img/screenshot-3.png)
 9 | ![screenshot](./img/[screenshot-4.png](https://github.com/Muthukumarshub/Toys_store_with-data_base/blob/main/img/localhost_Nithin_index.php%20and%202%20more%20pages%20-%20Personal%202%20-%20Microsoft%E2%80%8B%20Edge%20Beta%205_15_2024%206_40_05%20PM.png))
10 | 
11 | 


--------------------------------------------------------------------------------
/registered.sql:
--------------------------------------------------------------------------------
 1 | -- phpMyAdmin SQL Dump
 2 | -- version 5.1.1
 3 | -- https://www.phpmyadmin.net/
 4 | --
 5 | -- Host: 127.0.0.1
 6 | -- Generation Time: Jul 26, 2022 at 03:25 PM
 7 | -- Server version: 10.4.22-MariaDB
 8 | -- PHP Version: 8.1.2
 9 | 
10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
11 | START TRANSACTION;
12 | SET time_zone = "+00:00";
13 | 
14 | 
15 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
16 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
17 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
18 | /*!40101 SET NAMES utf8mb4 */;
19 | 
20 | --
21 | -- Database: `registered`
22 | --
23 | 
24 | -- --------------------------------------------------------
25 | 
26 | --
27 | -- Table structure for table `users`
28 | --
29 | 
30 | CREATE TABLE `users` (
31 |   `id` int(11) NOT NULL,
32 |   `username` varchar(30) NOT NULL,
33 |   `email` varchar(50) NOT NULL,
34 |   `password` varchar(255) NOT NULL,
35 |   `reg_date` datetime NOT NULL DEFAULT current_timestamp()
36 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
37 | 
38 | --
39 | -- Indexes for dumped tables
40 | --
41 | 
42 | --
43 | -- Indexes for table `users`
44 | --
45 | ALTER TABLE `users`
46 |   ADD PRIMARY KEY (`id`);
47 | 
48 | --
49 | -- AUTO_INCREMENT for dumped tables
50 | --
51 | 
52 | --
53 | -- AUTO_INCREMENT for table `users`
54 | --
55 | ALTER TABLE `users`
56 |   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
57 | COMMIT;
58 | 
59 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
60 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
61 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
62 | 


--------------------------------------------------------------------------------
/womens.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <meta charset="UTF-8">
  5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 | <title>Men's Wear</title>
  7 | <style>
  8 |    
  9 |   body {
 10 |     font-family: Arial, sans-serif;
 11 |     margin-top: 300px;
 12 |     padding: 0;
 13 | 
 14 |     background-color: #f4f4f4;
 15 |     background-image: url('img/faso.jpg');
 16 |   min-height: 100%;
 17 |   background-position: center;
 18 |   background-size: cover;
 19 |   background: linear-gradient(65deg,rgb(91, 255, 187),rgb(255, 151, 253));
 20 |   }
 21 | 
 22 |   .container {
 23 |     display: flex;
 24 |     flex-wrap: wrap;
 25 |     justify-content: space-around;
 26 |     padding: 20px;
 27 |   }
 28 | 
 29 |   .column {
 30 |     width: 30%;
 31 |     background-color: #fff;
 32 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 33 |     margin-bottom: 20px;
 34 |     padding: 15px;
 35 |     box-sizing: border-box;
 36 |     border-radius: 30px;
 37 | 
 38 |   }
 39 | 
 40 |   img {
 41 |     max-width: 100%;
 42 |     height: auto;
 43 |   }
 44 | 
 45 |   h3 {
 46 |     margin-top: 10px;
 47 |     margin-bottom: 5px;
 48 |   }
 49 | 
 50 |   p {
 51 |     margin: 0;
 52 |     color: #333;
 53 |   }
 54 |   body {
 55 |   margin: 0;
 56 |   font-family: Arial, Helvetica, sans-serif;
 57 | }
 58 | 
 59 | .topnav {
 60 |   overflow: hidden;
 61 |   background: linear-gradient(65deg,rgb(143, 244, 255),white,rgb(151, 234, 255));
 62 | 
 63 | }
 64 | 
 65 | .topnav a {
 66 |   float: left;
 67 |   display: block;
 68 |   color: #080134;
 69 |   text-align: center;
 70 |   padding: 14px 16px;
 71 |   text-decoration: none;
 72 |   font-size: 17px;
 73 | }
 74 | 
 75 | .topnav a:hover {
 76 |   background-color: #ddd;
 77 |   color: black;
 78 | }
 79 | 
 80 | .topnav a.active {
 81 |   background-color: #04AA6D;
 82 |   color: white;
 83 | }
 84 | 
 85 | .topnav .icon {
 86 |   display: none;
 87 | }
 88 | 
 89 | @media screen and (max-width: 600px) {
 90 |   .topnav a:not(:first-child) {display: none;}
 91 |   .topnav a.icon {
 92 |     float: right;
 93 |     display: block;
 94 |   }
 95 | }
 96 | 
 97 | @media screen and (max-width: 600px) {
 98 |   .topnav.responsive {position: relative;}
 99 |   .topnav.responsive .icon {
100 |     position: absolute;
101 |     right: 0;
102 |     top: 0;
103 |   }
104 |   .topnav.responsive a {
105 |     float: none;
106 |     display: block;
107 |     text-align: left;
108 |   }
109 | }
110 | #nam{
111 |     font-size: 50px;
112 |     color: #ff24a7;
113 |     text-shadow: #ddd;
114 |     margin: 5% 40% auto;
115 |     width: 500px;
116 |     text-shadow: 4px 10px 5px#333;
117 |     font-weight: 600;
118 | }
119 | .buy{
120 |   margin:5% 50% auto;
121 |  width: 100px;
122 |   color: rgb(0, 0, 0);
123 |   font-size: 20px;
124 |   background:linear-gradient(65deg,rgb(144, 200, 255),rgb(253, 150, 255));
125 |   border-radius: 5px;
126 |   height: 40px;
127 | }
128 | </style>
129 | </head>
130 | <body>
131 |     <div class="topnav" id="myTopnav">
132 |         <a href="index.php" class="active">Home</a>
133 |         <a href="mens.html">Kids</a>
134 |         <a href="womens.html">Adults</a>
135 |         <a href="javascript:void(0);" class="icon" onclick="myFunction()">
136 |           <i class="fa fa-bars"></i>
137 |         </a>
138 |       </div>
139 |       <p id="nam">Adults collections</p>
140 | <div class="container">
141 | <div class="column">
142 | <img src="img/buggy.jpg" alt="Item 1">
143 | <h3>Buggy</h3>
144 | <p>Price: $9</p>
145 | <p>Discount: 10%</p>
146 | <Button class="buy">Buy now</Button>
147 | 
148 | </div>
149 | <div class="column">
150 |     <img src="img/car.jpg" alt="Item 1">
151 |     <h3>Car</h3>
152 |     <p>Price: $10</p>
153 |     <p>Discount: 11%</p>
154 |     <Button class="buy">Buy now</Button>
155 | 
156 |     </div>
157 |     <div class="column">
158 |         <img src="img/drone.jpg" alt="Item 1">
159 |         <h3>Drone</h3>
160 |         <p>Price: $13</p>
161 |         <p>Discount: 10%</p>
162 |         <Button class="buy">Buy now</Button>
163 | 
164 |         </div>
165 |         <div class="column">
166 |             <img src="img/jcb.jpg" alt="Item 1">
167 |             <h3>JCB</h3>
168 |             <p>Price: $10</p>
169 |             <p>Discount: 9%</p>
170 |             <Button class="buy">Buy now</Button>
171 | 
172 |             </div>
173 |             <div class="column">
174 |                 <img src="img/tractor.jpg" alt="Item 1">
175 |                 <h3>Tractor</h3>
176 |                 <p>Price: $13</p>
177 |                 <p>Discount: 13%</p>
178 |                 <Button class="buy">Buy now</Button>
179 | 
180 |                 </div>
181 |                 <div class="column">
182 |                     <img src="img/bike.jpg" alt="Item 1">
183 |                     <h3>Bike</h3>
184 |                     <p>Price: $16</p>
185 |                     <p>Discount: 40%</p>
186 |                     <Button class="buy">Buy now</Button>
187 | 
188 |                     </div>
189 |                     <div class="column">
190 |                         <img src="img/teddy.jpg" alt="Item 1">
191 |                         <h3>Teddy bear</h3>
192 |                         <p>Price: $17</p>
193 |                         <p>Discount: 30%</p>
194 |                         <Button class="buy">Buy now</Button>
195 | 
196 |                         </div>
197 | <div class="column">
198 | <img src="img/cycyle.jpg" alt="Item 2">
199 | <h3>Toy cycle</h3>
200 | <p>Price: $14</p>
201 | <p>Discount: 20%</p>
202 | <Button class="buy">Buy now</Button>
203 | </div>
204 | <div class="column">
205 | <img src="img/truck.jpg" alt="Item 3">
206 | <h3>Truck</h3>
207 | <p>Price: $8</p>
208 | <p>Discount: 15%</p>
209 | <Button class="buy">Buy now</Button>
210 | 
211 | </div>
212 | </div>
213 | </body>
214 | </html>
215 | 


--------------------------------------------------------------------------------
/mens.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <meta charset="UTF-8">
  5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 | <title>Men's Wear</title>
  7 | <style>
  8 |    
  9 |   body {
 10 |     font-family: Arial, sans-serif;
 11 |     margin-top: 300px;
 12 |     padding: 0;
 13 |     background-color: #f4f4f4;
 14 |     background-image: url('img/faso.jpg');
 15 |   min-height: 100%;
 16 |   background-position: center;
 17 |   background-size: cover;
 18 |   background: linear-gradient(65deg,rgb(240, 255, 164),rgb(186, 255, 186));
 19 |   }
 20 | 
 21 |   .container {
 22 |     display: flex;
 23 |     flex-wrap: wrap;
 24 |     justify-content: space-around;
 25 |     padding: 20px;
 26 |   }
 27 | 
 28 |   .column {
 29 |     width: 30%;
 30 |     background-color: #fff;
 31 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 32 |     margin-bottom: 20px;
 33 |     padding: 15px;
 34 |     box-sizing: border-box;
 35 |     border-radius: 30px;
 36 | 
 37 |   }
 38 | 
 39 |   img {
 40 |     max-width: 100%;
 41 |     height: auto;
 42 |   }
 43 | 
 44 |   h3 {
 45 |     margin-top: 10px;
 46 |     margin-bottom: 5px;
 47 |   }
 48 | 
 49 |   p {
 50 |     margin: 0;
 51 |     color: #333;
 52 |   }
 53 |   body {
 54 |   margin: 0;
 55 |   font-family: Arial, Helvetica, sans-serif;
 56 | }
 57 | 
 58 | .topnav {
 59 |   overflow: hidden;
 60 |   background: linear-gradient(65deg,rgb(143, 244, 255),white,rgb(151, 234, 255));
 61 | }
 62 | 
 63 | .topnav a {
 64 |   float: left;
 65 |   display: block;
 66 |   color: #020230;
 67 |   text-align: center;
 68 |   padding: 14px 16px;
 69 |   text-decoration: none;
 70 |   font-size: 17px;
 71 | }
 72 | 
 73 | .topnav a:hover {
 74 |   background-color: #ddd;
 75 |   color: black;
 76 | }
 77 | 
 78 | .topnav a.active {
 79 |   background-color: #04AA6D;
 80 |   color: white;
 81 | }
 82 | 
 83 | .topnav .icon {
 84 |   display: none;
 85 | }
 86 | 
 87 | @media screen and (max-width: 600px) {
 88 |   .topnav a:not(:first-child) {display: none;}
 89 |   .topnav a.icon {
 90 |     float: right;
 91 |     display: block;
 92 |   }
 93 | }
 94 | 
 95 | @media screen and (max-width: 600px) {
 96 |   .topnav.responsive {position: relative;}
 97 |   .topnav.responsive .icon {
 98 |     position: absolute;
 99 |     right: 0;
100 |     top: 0;
101 |   }
102 |   .topnav.responsive a {
103 |     float: none;
104 |     display: block;
105 |     text-align: left;
106 |   }
107 | }
108 | #nam{
109 |     font-size: 50px;
110 |     color: #ff24a7;
111 |     text-shadow: #ddd;
112 |     margin: 5% 40% auto;
113 |     width: 500px;
114 |     text-shadow: 4px 10px 5px#333;
115 |     font-weight: 600;
116 | }
117 | .buy{
118 |   margin:5% 50% auto;
119 |  width: 100px;
120 |   color: rgb(0, 0, 0);
121 |   font-size: 20px;
122 |   background:linear-gradient(65deg,rgb(144, 200, 255),rgb(253, 150, 255));
123 |   border-radius: 5px;
124 |   height: 40px;
125 | }
126 | </style>
127 | </head>
128 | <body>
129 |     <div class="topnav" id="myTopnav">
130 |         <a href="index.php" class="active">Home</a>
131 |         <a href="mens.html">Kids</a>
132 |         <a href="womens.html">Adults</a>
133 |         <a href="javascript:void(0);" class="icon" onclick="myFunction()">
134 |           <i class="fa fa-bars"></i>
135 |         </a>
136 |       </div>
137 |       <p id="nam">Kids collections</p>
138 | <div class="container">
139 | <div class="column">
140 | <img src="img/babytoy.jpg" alt="Item 1">
141 | <h3>Baby makeup set</h3>
142 | <p>Price: $9</p>
143 | <p>Discount: 10%</p>
144 | <Button class="buy">Buy now</Button>
145 | 
146 | </div>
147 | <div class="column">
148 |     <img src="img/doll.jpg" alt="Item 1">
149 |     <h3>Baby doll</h3>
150 |     <p>Price: $10</p>
151 |     <p>Discount: 11%</p>
152 |     <Button class="buy">Buy now</Button>
153 | 
154 |     </div>
155 |     <div class="column">
156 |         <img src="img/dinosers.jpg" alt="Item 1">
157 |         <h3>Dino</h3>
158 |         <p>Price: $13</p>
159 |         <p>Discount: 10%</p>
160 |         <Button class="buy">Buy now</Button>
161 | 
162 |         </div>
163 |         <div class="column">
164 |             <img src="img/cycyle.jpg" alt="Item 1">
165 |             <h3>Toy Cycle</h3>
166 |             <p>Price: $10</p>
167 |             <p>Discount: 9%</p>
168 |             <Button class="buy">Buy now</Button>
169 | 
170 |             </div>
171 |             <div class="column">
172 |                 <img src="img/elephant.jpg" alt="Item 1">
173 |                 <h3>Elephant</h3>
174 |                 <p>Price: $13</p>
175 |                 <p>Discount: 13%</p>
176 |                 <Button class="buy">Buy now</Button>
177 | 
178 |                 </div>
179 |                 <div class="column">
180 |                     <img src="img/phone.jpg" alt="Item 1">
181 |                     <h3>Toy phone</h3>
182 |                     <p>Price: $16</p>
183 |                     <p>Discount: 40%</p>
184 |                     <Button class="buy">Buy now</Button>
185 | 
186 |                     </div>
187 |                     <div class="column">
188 |                         <img src="img/teddy.jpg" alt="Item 1">
189 |                         <h3>Teddy bear</h3>
190 |                         <p>Price: $17</p>
191 |                         <p>Discount: 30%</p>
192 |                         <Button class="buy">Buy now</Button>
193 | 
194 |                         </div>
195 | <div class="column">
196 | <img src="img/cycyle.jpg" alt="Item 2">
197 | <h3>Toy cycle</h3>
198 | <p>Price: $14</p>
199 | <p>Discount: 20%</p>
200 | <Button class="buy">Buy now</Button>
201 | </div>
202 | <div class="column">
203 | <img src="img/bike.jpg" alt="Item 3">
204 | <h3>Bike toy</h3>
205 | <p>Price: $8</p>
206 | <p>Discount: 15%</p>
207 | <Button class="buy">Buy now</Button>
208 | 
209 | </div>
210 | </div>
211 | </body>
212 | </html>
213 | 


--------------------------------------------------------------------------------
/login.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | # Initialize session
  3 | session_start();
  4 | 
  5 | # Check if user is already logged in, If yes then redirect him to index page
  6 | if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] == TRUE) {
  7 |   echo "<script>" . "window.location.href='./'" . "</script>";
  8 |   exit;
  9 | }
 10 | 
 11 | # Include connection
 12 | require_once "./config.php";
 13 | 
 14 | # Define variables and initialize with empty values
 15 | $user_login_err = $user_password_err = $login_err = "";
 16 | $user_login = $user_password = "";
 17 | 
 18 | # Processing form data when form is submitted
 19 | if ($_SERVER["REQUEST_METHOD"] == "POST") {
 20 |   if (empty(trim($_POST["user_login"]))) {
 21 |     $user_login_err = "Please enter your username or an email id.";
 22 |   } else {
 23 |     $user_login = trim($_POST["user_login"]);
 24 |   }
 25 | 
 26 |   if (empty(trim($_POST["user_password"]))) {
 27 |     $user_password_err = "Please enter your password.";
 28 |   } else {
 29 |     $user_password = trim($_POST["user_password"]);
 30 |   }
 31 | 
 32 |   # Validate credentials 
 33 |   if (empty($user_login_err) && empty($user_password_err)) {
 34 |     # Prepare a select statement
 35 |     $sql = "SELECT id, username, password FROM users WHERE username = ? OR email = ?";
 36 | 
 37 |     if ($stmt = mysqli_prepare($link, $sql)) {
 38 |       # Bind variables to the statement as parameters
 39 |       mysqli_stmt_bind_param($stmt, "ss", $param_user_login, $param_user_login);
 40 | 
 41 |       # Set parameters
 42 |       $param_user_login = $user_login;
 43 | 
 44 |       # Execute the statement
 45 |       if (mysqli_stmt_execute($stmt)) {
 46 |         # Store result
 47 |         mysqli_stmt_store_result($stmt);
 48 | 
 49 |         # Check if user exists, If yes then verify password
 50 |         if (mysqli_stmt_num_rows($stmt) == 1) {
 51 |           # Bind values in result to variables
 52 |           mysqli_stmt_bind_result($stmt, $id, $username, $hashed_password);
 53 | 
 54 |           if (mysqli_stmt_fetch($stmt)) {
 55 |             # Check if password is correct
 56 |             if (password_verify($user_password, $hashed_password)) {
 57 | 
 58 |               # Store data in session variables
 59 |               $_SESSION["id"] = $id;
 60 |               $_SESSION["username"] = $username;
 61 |               $_SESSION["loggedin"] = TRUE;
 62 | 
 63 |               # Redirect user to index page
 64 |               echo "<script>" . "window.location.href='./'" . "</script>";
 65 |               exit;
 66 |             } else {
 67 |               # If password is incorrect show an error message
 68 |               $login_err = "The email or password you entered is incorrect.";
 69 |             }
 70 |           }
 71 |         } else {
 72 |           # If user doesn't exists show an error message
 73 |           $login_err = "Invalid username or password.";
 74 |         }
 75 |       } else {
 76 |         echo "<script>" . "alert('Oops! Something went wrong. Please try again later.');" . "</script>";
 77 |         echo "<script>" . "window.location.href='./login.php'" . "</script>";
 78 |         exit;
 79 |       }
 80 | 
 81 |       # Close statement
 82 |       mysqli_stmt_close($stmt);
 83 |     }
 84 |   }
 85 | 
 86 |   # Close connection
 87 |   mysqli_close($link);
 88 | }
 89 | ?>
 90 | 
 91 | <!DOCTYPE html>
 92 | <html lang="en">
 93 | 
 94 | <head>
 95 |   <meta charset="UTF-8">
 96 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 97 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 98 |   <title>User login system</title>
 99 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
100 |   <link rel="stylesheet" href="./css/main.css">
101 |   <link rel="shortcut icon" href="./img/favicon-16x16.png" type="image/x-icon">
102 |   <script defer src="./js/script.js"></script>
103 | </head>
104 | 
105 | <body>
106 |   <div class="container">
107 |     <div class="row min-vh-100 justify-content-center align-items-center">
108 |       <div class="col-lg-5">
109 |         <?php
110 |         if (!empty($login_err)) {
111 |           echo "<div class='alert alert-danger'>" . $login_err . "</div>";
112 |         }
113 |         ?>
114 |         <div class="form-wrap border rounded p-4">
115 |           <h1>Log In</h1>
116 |           <p>Please login to continue</p>
117 |           <!-- form starts here -->
118 |           <form action="<?= htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" novalidate>
119 |             <div class="mb-3">
120 |               <label for="user_login" class="form-label">Email or username</label>
121 |               <input type="text" class="form-control" name="user_login" id="user_login" value="<?= $user_login; ?>">
122 |               <small class="text-danger"><?= $user_login_err; ?></small>
123 |             </div>
124 |             <div class="mb-2">
125 |               <label for="password" class="form-label">Password</label>
126 |               <input type="password" class="form-control" name="user_password" id="password">
127 |               <small class="text-danger"><?= $user_password_err; ?></small>
128 |             </div>
129 |             <div class="mb-3 form-check">
130 |               <input type="checkbox" class="form-check-input" id="togglePassword">
131 |               <label for="togglePassword" class="form-check-label">Show Password</label>
132 |             </div>
133 |             <div class="mb-3">
134 |               <input type="submit" class="btn btn-primary form-control" name="submit" value="Log In">
135 |             </div>
136 |             <p class="mb-0">Don't have an account ? <a href="./register.php">Sign Up</a></p>
137 |           </form>
138 |           <!-- form ends here -->
139 |         </div>
140 |       </div>
141 |     </div>
142 |   </div>
143 | </body>
144 | 
145 | </html>


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <meta name="viewport" content="width=device-width, initial-scale=1">
  5 | <style>
  6 | * {box-sizing: border-box}
  7 | body {font-family: Verdana, sans-serif; margin:0}
  8 | .mySlides {display: none}
  9 | img {vertical-align: middle;}
 10 | 
 11 | /* Slideshow container */
 12 | .slideshow-container {
 13 |   max-width: 1000px;
 14 |   position: relative;
 15 |   margin-top: 50px;
 16 |   margin-left: auto;
 17 |   margin-bottom: auto;
 18 |   margin-right: auto;
 19 | }
 20 | 
 21 | /* Next & previous buttons */
 22 | .prev, .next {
 23 |   cursor: pointer;
 24 |   position: absolute;
 25 |   top: 50%;
 26 |   width: auto;
 27 |   padding: 16px;
 28 |   margin-top: -22px;
 29 |   color: white;
 30 |   font-weight: bold;
 31 |   font-size: 18px;
 32 |   transition: 0.6s ease;
 33 |   border-radius: 0 3px 3px 0;
 34 |   user-select: none;
 35 | }
 36 | 
 37 | /* Position the "next button" to the right */
 38 | .next {
 39 |   right: 0;
 40 |   border-radius: 3px 0 0 3px;
 41 | }
 42 | 
 43 | /* On hover, add a black background color with a little bit see-through */
 44 | .prev:hover, .next:hover {
 45 |   background-color: rgba(0,0,0,0.8);
 46 | }
 47 | 
 48 | /* Caption text */
 49 | .text {
 50 |   color: #f2f2f2;
 51 |   font-size: 15px;
 52 |   padding: 8px 12px;
 53 |   position: absolute;
 54 |   bottom: 8px;
 55 |   width: 100%;
 56 |   text-align: center;
 57 | }
 58 | 
 59 | /* Number text (1/3 etc) */
 60 | .numbertext {
 61 |   color: #f2f2f2;
 62 |   font-size: 12px;
 63 |   padding: 8px 12px;
 64 |   position: absolute;
 65 |   top: 0;
 66 | }
 67 | 
 68 | /* The dots/bullets/indicators */
 69 | .dot {
 70 |   cursor: pointer;
 71 |   height: 15px;
 72 |   width: 15px;
 73 |   margin: 0 2px;
 74 |   background-color: #bbb;
 75 |   border-radius: 50%;
 76 |   display: inline-block;
 77 |   transition: background-color 0.6s ease;
 78 | }
 79 | 
 80 | .active, .dot:hover {
 81 |   background-color: #717171;
 82 | }
 83 | 
 84 | /* Fading animation */
 85 | .fade {
 86 |   animation-name: fade;
 87 |   animation-duration: 1.5s;
 88 | }
 89 | 
 90 | @keyframes fade {
 91 |   from {opacity: .4} 
 92 |   to {opacity: 1}
 93 | }
 94 | 
 95 | /* On smaller screens, decrease text size */
 96 | @media only screen and (max-width: 300px) {
 97 |   .prev, .next,.text {font-size: 11px}
 98 | }
 99 | body {
100 |   margin: 0;
101 |   font-family: Arial, Helvetica, sans-serif;
102 |   background: linear-gradient(65deg,rgb(244, 163, 255),white,rgb(255, 76, 136));
103 | }
104 | 
105 | .topnav {
106 |   overflow: hidden;
107 |   height: 50px;
108 |   background: linear-gradient(65deg,rgb(143, 244, 255),white,rgb(151, 234, 255));
109 | }
110 | 
111 | .topnav a {
112 |   float: left;
113 |   display: block;
114 |   color: #0c004c;
115 |   text-align: center;
116 |   padding: 14px 16px;
117 |   text-decoration: none;
118 |   font-size: 17px;
119 | }
120 | 
121 | .topnav a:hover {
122 |   background-color: #ddddddd2;
123 |   color: black;
124 | }
125 | 
126 | .topnav a.active {
127 |   background-color: #046aaa;
128 |   color: white;
129 | }
130 | 
131 | .topnav .icon {
132 |   display: none;
133 | }
134 | 
135 | @media screen and (max-width: 600px) {
136 |   .topnav a:not(:first-child) {display: none;}
137 |   .topnav a.icon {
138 |     float: right;
139 |     display: block;
140 |   }
141 | }
142 | 
143 | @media screen and (max-width: 600px) {
144 |   .topnav.responsive {position: relative;}
145 |   .topnav.responsive .icon {
146 |     position: absolute;
147 |     right: 0;
148 |     top: 0;
149 |   }
150 |   .topnav.responsive a {
151 |     float: none;
152 |     display: block;
153 |     text-align: left;
154 |   }
155 | }
156 | #name{
157 |     text-align: center;
158 |     font-size: 70px;
159 |     margin-top: 50px;
160 |     font-weight: 600;
161 |     margin-bottom: auto;
162 |     font-style: oblique;
163 |     text-shadow: #717171;
164 |     counter-reset: black;
165 | }
166 | </style>
167 | </head>
168 | <body>
169 |     <div class="topnav" id="myTopnav">
170 |         <a href="#home" class="active">Home</a>
171 |         <a href="mens.html">Kids</a>
172 |         <a href="womens.html">Adults</a>
173 |         <a href="javascript:void(0);" class="icon" onclick="myFunction()">
174 |           <i class="fa fa-bars"></i>
175 |         </a>
176 |       </div>
177 | <p id="name">Muthu's toys store</p>
178 | <div class="slideshow-container">
179 | 
180 | <div class="mySlides fade">
181 |   <div class="numbertext">1 / 3</div>
182 |   <img src="img/b1.jpg" style="width:100%">
183 |   <div class="text">Home</div>
184 | </div>
185 | 
186 | <div class="mySlides fade">
187 |   <div class="numbertext">2 / 3</div>
188 |   <img src="img/b2.jpg" style="width:100%">
189 |   <div class="text">Kids</div>
190 | </div>
191 | 
192 | <div class="mySlides fade">
193 |   <div class="numbertext">3 / 3</div>
194 |   <img src="img/b3.jpg" style="width:100%">
195 |   <div class="text">Adults</div>
196 | </div>
197 | 
198 | <a class="prev" onclick="plusSlides(-1)">❮</a>
199 | <a class="next" onclick="plusSlides(1)">❯</a>
200 | 
201 | </div>
202 | <br>
203 | 
204 | <div style="text-align:center">
205 |   <span class="dot" onclick="currentSlide(1)"></span> 
206 |   <span class="dot" onclick="currentSlide(2)"></span> 
207 |   <span class="dot" onclick="currentSlide(3)"></span> 
208 | </div>
209 | 
210 | <script>
211 | let slideIndex = 1;
212 | showSlides(slideIndex);
213 | 
214 | function plusSlides(n) {
215 |   showSlides(slideIndex += n);
216 | }
217 | 
218 | function currentSlide(n) {
219 |   showSlides(slideIndex = n);
220 | }
221 | 
222 | function showSlides(n) {
223 |   let i;
224 |   let slides = document.getElementsByClassName("mySlides");
225 |   let dots = document.getElementsByClassName("dot");
226 |   if (n > slides.length) {slideIndex = 1}    
227 |   if (n < 1) {slideIndex = slides.length}
228 |   for (i = 0; i < slides.length; i++) {
229 |     slides[i].style.display = "none";  
230 |   }
231 |   for (i = 0; i < dots.length; i++) {
232 |     dots[i].className = dots[i].className.replace(" active", "");
233 |   }
234 |   slides[slideIndex-1].style.display = "block";  
235 |   dots[slideIndex-1].className += " active";
236 | }
237 | </script>
238 | 
239 | </body>
240 | </html> 
241 | 


--------------------------------------------------------------------------------
/register.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | # Include connection
  3 | require_once "./config.php";
  4 | 
  5 | # Define variables and initialize with empty values
  6 | $username_err = $email_err = $password_err = "";
  7 | $username = $email = $password = "";
  8 | 
  9 | # Processing form data when form is submitted
 10 | if ($_SERVER["REQUEST_METHOD"] == "POST") {
 11 |   # Validate username
 12 |   if (empty(trim($_POST["username"]))) {
 13 |     $username_err = "Please enter a username.";
 14 |   } else {
 15 |     $username = trim($_POST["username"]);
 16 |     if (!ctype_alnum(str_replace(array("@", "-", "_"), "", $username))) {
 17 |       $username_err = "Username can only contain letters, numbers and symbols like '@', '_', or '-'.";
 18 |     } else {
 19 |       # Prepare a select statement
 20 |       $sql = "SELECT id FROM users WHERE username = ?";
 21 | 
 22 |       if ($stmt = mysqli_prepare($link, $sql)) {
 23 |         # Bind variables to the statement as parameters
 24 |         mysqli_stmt_bind_param($stmt, "s", $param_username);
 25 | 
 26 |         # Set parameters
 27 |         $param_username = $username;
 28 | 
 29 |         # Execute the prepared statement 
 30 |         if (mysqli_stmt_execute($stmt)) {
 31 |           # Store result
 32 |           mysqli_stmt_store_result($stmt);
 33 | 
 34 |           # Check if username is already registered
 35 |           if (mysqli_stmt_num_rows($stmt) == 1) {
 36 |             $username_err = "This username is already registered.";
 37 |           }
 38 |         } else {
 39 |           echo "<script>" . "alert('Oops! Something went wrong. Please try again later.')" . "</script>";
 40 |         }
 41 | 
 42 |         # Close statement 
 43 |         mysqli_stmt_close($stmt);
 44 |       }
 45 |     }
 46 |   }
 47 | 
 48 |   # Validate email 
 49 |   if (empty(trim($_POST["email"]))) {
 50 |     $email_err = "Please enter an email address";
 51 |   } else {
 52 |     $email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
 53 |     if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
 54 |       $email_err = "Please enter a valid email address.";
 55 |     } else {
 56 |       # Prepare a select statement
 57 |       $sql = "SELECT id FROM users WHERE email = ?";
 58 | 
 59 |       if ($stmt = mysqli_prepare($link, $sql)) {
 60 |         # Bind variables to the statement as parameters
 61 |         mysqli_stmt_bind_param($stmt, "s", $param_email);
 62 | 
 63 |         # Set parameters
 64 |         $param_email = $email;
 65 | 
 66 |         # Execute the prepared statement 
 67 |         if (mysqli_stmt_execute($stmt)) {
 68 |           # Store result
 69 |           mysqli_stmt_store_result($stmt);
 70 | 
 71 |           # Check if email is already registered
 72 |           if (mysqli_stmt_num_rows($stmt) == 1) {
 73 |             $email_err = "This email is already registered.";
 74 |           }
 75 |         } else {
 76 |           echo "<script>" . "alert('Oops! Something went wrong. Please try again later.');" . "</script>";
 77 |         }
 78 | 
 79 |         # Close statement
 80 |         mysqli_stmt_close($stmt);
 81 |       }
 82 |     }
 83 |   }
 84 | 
 85 |   # Validate password
 86 |   if (empty(trim($_POST["password"]))) {
 87 |     $password_err = "Please enter a password.";
 88 |   } else {
 89 |     $password = trim($_POST["password"]);
 90 |     if (strlen($password) < 8) {
 91 |       $password_err = "Password must contain at least 8 or more characters.";
 92 |     }
 93 |   }
 94 | 
 95 |   # Check input errors before inserting data into database
 96 |   if (empty($username_err) && empty($email_err) && empty($password_err)) {
 97 |     # Prepare an insert statement
 98 |     $sql = "INSERT INTO users(username, email, password) VALUES (?, ?, ?)";
 99 | 
100 |     if ($stmt = mysqli_prepare($link, $sql)) {
101 |       # Bind varibales to the prepared statement as parameters
102 |       mysqli_stmt_bind_param($stmt, "sss", $param_username, $param_email, $param_password);
103 | 
104 |       # Set parameters
105 |       $param_username = $username;
106 |       $param_email = $email;
107 |       $param_password = password_hash($password, PASSWORD_DEFAULT);
108 | 
109 |       # Execute the prepared statement
110 |       if (mysqli_stmt_execute($stmt)) {
111 |         echo "<script>" . "alert('Registeration completed successfully. Login to continue.');" . "</script>";
112 |         echo "<script>" . "window.location.href='./login.php';" . "</script>";
113 |         exit;
114 |       } else {
115 |         echo "<script>" . "alert('Oops! Something went wrong. Please try again later.');" . "</script>";
116 |       }
117 | 
118 |       # Close statement
119 |       mysqli_stmt_close($stmt);
120 |     }
121 |   }
122 | 
123 |   # Close connection
124 |   mysqli_close($link);
125 | }
126 | ?>
127 | 
128 | <!DOCTYPE html>
129 | <html lang="en">
130 | 
131 | <head>
132 |   <meta charset="UTF-8">
133 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
134 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
135 |   <title>User login system</title>
136 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
137 |   <link rel="stylesheet" href="./css/main.css">
138 |   <link rel="shortcut icon" href="./img/favicon-16x16.png" type="image/x-icon">
139 |   <script defer src="./js/script.js"></script>
140 | </head>
141 | 
142 | <body>
143 |   <div class="container">
144 |     <div class="row min-vh-100 justify-content-center align-items-center">
145 |       <div class="col-lg-5">
146 |         <div class="form-wrap border rounded p-4">
147 |           <h1>Sign up</h1>
148 |           <p>Please fill this form to register</p>
149 |           <!-- form starts here -->
150 |           <form action="<?= htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" novalidate>
151 |             <div class="mb-3">
152 |               <label for="username" class="form-label">Username</label>
153 |               <input type="text" class="form-control" name="username" id="username" value="<?= $username; ?>">
154 |               <small class="text-danger"><?= $username_err; ?></small>
155 |             </div>
156 |             <div class="mb-3">
157 |               <label for="email" class="form-label">Email Address</label>
158 |               <input type="email" class="form-control" name="email" id="email" value="<?= $email; ?>">
159 |               <small class="text-danger"><?= $email_err; ?></small>
160 |             </div>
161 |             <div class="mb-2">
162 |               <label for="password" class="form-label">Password</label>
163 |               <input type="password" class="form-control" name="password" id="password" value="<?= $password; ?>">
164 |               <small class="text-danger"><?= $password_err; ?></small>
165 |             </div>
166 |             <div class="mb-3 form-check">
167 |               <input type="checkbox" class="form-check-input" id="togglePassword">
168 |               <label for="togglePassword" class="form-check-label">Show Password</label>
169 |             </div>
170 |             <div class="mb-3">
171 |               <input type="submit" class="btn btn-primary form-control" name="submit" value="Sign Up">
172 |             </div>
173 |             <p class="mb-0">Already have an account ? <a href="./login.php">Log In</a></p>
174 |           </form>
175 |           <!-- form ends here -->
176 |         </div>
177 |       </div>
178 |     </div>
179 |   </div>
180 | </body>
181 | 
182 | </html>


--------------------------------------------------------------------------------