├── public
    ├── images
    │   ├── qr.jpg
    │   ├── bck1.jpeg
    │   ├── logo.png
    │   ├── main.jpg
    │   ├── developer1.jpg
    │   ├── developer2.jpg
    │   └── developer3.jpg
    └── js
    │   ├── index.js
    │   └── script.js
├── scratch
    └── users
├── models
    ├── RegisterModel.js
    ├── Registration.js
    └── events.js
├── package.json
├── views
    ├── adminViewRegistrations.ejs
    ├── updateEvent.ejs
    ├── adminViewEvents.ejs
    ├── signup.ejs
    ├── login.ejs
    ├── details.ejs
    ├── events.ejs
    ├── contact.ejs
    ├── about.ejs
    └── index.ejs
├── .gitignore
├── README.md
├── newevent.html
├── adminDashboard.html
└── index.js


/public/images/qr.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harinadh76/Khel-Sethu/HEAD/public/images/qr.jpg


--------------------------------------------------------------------------------
/public/images/bck1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harinadh76/Khel-Sethu/HEAD/public/images/bck1.jpeg


--------------------------------------------------------------------------------
/public/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harinadh76/Khel-Sethu/HEAD/public/images/logo.png


--------------------------------------------------------------------------------
/public/images/main.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harinadh76/Khel-Sethu/HEAD/public/images/main.jpg


--------------------------------------------------------------------------------
/public/images/developer1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harinadh76/Khel-Sethu/HEAD/public/images/developer1.jpg


--------------------------------------------------------------------------------
/public/images/developer2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harinadh76/Khel-Sethu/HEAD/public/images/developer2.jpg


--------------------------------------------------------------------------------
/public/images/developer3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harinadh76/Khel-Sethu/HEAD/public/images/developer3.jpg


--------------------------------------------------------------------------------
/scratch/users:
--------------------------------------------------------------------------------
1 | {"_id":"641d08058a5bf37ccca211ad","username":"tester","email":"tester@gmail.com","password":"qawsedrf","__v":0}


--------------------------------------------------------------------------------
/models/RegisterModel.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose');
 2 | const Schema = mongoose.Schema;
 3 | 
 4 | const RegisterSchema = new Schema({
 5 |     username:{
 6 |         type:String,
 7 |         required:true
 8 |     },
 9 |     email:{
10 |         type: String,
11 |         required: true
12 |     },
13 |     password:{
14 |         type: String,
15 |         required: true
16 |     }
17 | });
18 | 
19 | module.exports = mongoose.model('RegisterModel', RegisterSchema);


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "neweventmanagement",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "body-parser": "^1.20.2",
14 |     "dotenv": "^16.0.3",
15 |     "ejs": "^3.1.9",
16 |     "express": "^4.18.2",
17 |     "mongoose": "^6.0.2",
18 |     "node-localstorage": "^2.2.1"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/public/js/index.js:
--------------------------------------------------------------------------------
 1 | let menu=document.querySelector('.menu-icon');
 2 | let navbar=document.querySelector('.navbar');
 3 | 
 4 | menu.onclick =() =>
 5 | {
 6 |     navbar.classList.toggle("open-menu")
 7 |     menu.classList.toggle("move")
 8 | }
 9 | window.onscroll=()=>
10 | {
11 |     navbar.classList.remove("open-menu");
12 |     menu.classList.toggle("move");
13 | }
14 | 
15 | let header=document.querySelector("header")
16 | 
17 | window.addEventListener("scroll",()=>
18 | {
19 |     header.classList.toggle("header-active",window.scrollY>0)
20 | });
21 | 
22 | let scrolltop=document.querySelector(".scroll-top")
23 | 
24 | window.addEventListener("scroll",()=>
25 | {
26 |     scrolltop.classList.toggle("scroll-active",window.scrollY>=500)
27 | });
28 | 
29 | 


--------------------------------------------------------------------------------
/models/Registration.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose')
 2 | 
 3 | const eventRegistration = new mongoose.Schema({
 4 |     name:{
 5 |         type:String,
 6 |         required:true
 7 |     },
 8 |     email:{
 9 |         type:String,
10 |         required:true 
11 |     },
12 |     phnumber:{
13 |         type:Number,
14 |         required:true 
15 |     },
16 |     year:{
17 |         type:String,
18 |         required:true
19 |     },
20 |     event:{
21 |         type:String,
22 |         required:true
23 |     },
24 |     amount:{
25 |         type:Number,
26 |         required:true
27 |     },
28 |     transactionid:{
29 |         type:String,
30 |         required:true
31 |     }
32 | })
33 | 
34 | module.exports = mongoose.model('eventRegistration', eventRegistration);


--------------------------------------------------------------------------------
/models/events.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose');
 2 | const Schema = mongoose.Schema;
 3 | 
 4 | const eventSchema = new Schema({
 5 |     name:{
 6 |         type: String,
 7 |         required: true
 8 |     },
 9 |     description:{
10 |         type: String,
11 |         required: true
12 |     },
13 |     photo:{
14 |         type: String,
15 |         required: true
16 |     },
17 |     time:{
18 |         type: String,
19 |         required: true
20 |     },
21 |     mode:{
22 |         type: String,
23 |         required: true
24 |     },
25 |     dateStart:{
26 |         type: Date,
27 |         required: true
28 |     },
29 |     dateEnd:{
30 |         type: Date,
31 |         required: true
32 |     },
33 |     venue:{
34 |         type: String,
35 |         required: true
36 |     },
37 |     category:{
38 |         type: String,
39 |         required: true
40 |     },
41 |     registerationFee:{
42 |         type: String,
43 |         required: true
44 |     },
45 |     cashPrice:{
46 |         type: Number,
47 |         required: true
48 |     },
49 |     contact:{
50 |         type: String,
51 |         required: true
52 |     }
53 | 
54 | });
55 | 
56 | module.exports = mongoose.model('Event', eventSchema);


--------------------------------------------------------------------------------
/public/js/script.js:
--------------------------------------------------------------------------------
 1 | function validate()
 2 | {
 3 |     let name=document.querySelector(".name");
 4 |     let email=document.querySelector(".email");
 5 |     let message=document.querySelector(".message");
 6 |     let sendbtn=document.querySelector(".send-btn");
 7 | 
 8 |     sendbtn.addEventListener("click",(e)=>
 9 |     {
10 |         e.preventDefault();
11 |         if (name.value == "" || email.value == "" || message.value == "")
12 |         {
13 |             emptyerror();
14 |         }
15 |         else
16 |         {
17 |             sendmail (name.value,email.value,message.value);
18 |             success();
19 |             document.querySelector(".contact-form").reset();
20 |         }
21 |     });
22 | }
23 | validate();
24 | 
25 | function sendmail(name,email,message)
26 | {
27 |     emailjs.send("service_x7jrshc","template_5kttzqp",{
28 |         from_name: name,
29 |         email_id: email,
30 |         message: message,
31 |         });
32 | }
33 | 
34 | function emptyerror()
35 | {
36 |     swal({
37 |         title: "oh no....",
38 |         text: "Fields cannot be empty",
39 |         icon: "error",
40 |       });
41 | }
42 | 
43 | function success()
44 | {
45 |     swal({
46 |         title: "Email sent successfully",
47 |         text: "We try to reply in 24 hours",
48 |         icon: "success",
49 |     });
50 | }


--------------------------------------------------------------------------------
/views/adminViewRegistrations.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 | 
 9 |     <style>
10 |         table {
11 |           font-family: arial, sans-serif;
12 |           border-collapse: collapse;
13 |           width: 100%;
14 |         }
15 |         
16 |         td, th {
17 |           border: 1px solid #dddddd;
18 |           text-align: left;
19 |           padding: 8px;
20 |         }
21 |         
22 |         tr:nth-child(even) {
23 |           background-color: #dddddd;
24 |         }
25 | 
26 |         .container{
27 |             width: 1000px;
28 |             margin: auto;
29 |             margin-top: 150px;
30 |         }
31 |         </style>
32 | 
33 | </head>
34 | <body>
35 |     
36 |   <div class="container">
37 | 
38 |       
39 |       <table>
40 |           <tr>
41 |               <th>Name</th>
42 |               <th>Email</th>
43 |               <th>Phone Number</th>
44 |               <th>Year</th>
45 |               <th>Event</th>
46 |               <th>Amount</th>
47 |               <th>Transaction ID</th>
48 |             </tr>
49 |             <% for(var i=0;i<event.length;i++) { %>
50 |                 <tr>
51 |                     <td><%= event[i].name%></td>
52 |                     <td><%= event[i].email%></td>
53 |                     <td><%= event[i].phnumber%></td>
54 |                     <td><%= event[i].year%></td>
55 |                     <td><%= event[i].event%></td>
56 |                     <td><%= event[i].amount%></td>
57 |                     <td><%= event[i].transactionid%></td>
58 |                 </tr>
59 |             <% } %>
60 |             
61 |         </table>
62 |     </div>
63 |         
64 |     </body>
65 |     </html>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | .pnpm-debug.log*
  9 | 
 10 | # Diagnostic reports (https://nodejs.org/api/report.html)
 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 12 | 
 13 | # Runtime data
 14 | pids
 15 | *.pid
 16 | *.seed
 17 | *.pid.lock
 18 | 
 19 | # Directory for instrumented libs generated by jscoverage/JSCover
 20 | lib-cov
 21 | 
 22 | # Coverage directory used by tools like istanbul
 23 | coverage
 24 | *.lcov
 25 | 
 26 | # nyc test coverage
 27 | .nyc_output
 28 | 
 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 30 | .grunt
 31 | 
 32 | # Bower dependency directory (https://bower.io/)
 33 | bower_components
 34 | 
 35 | # node-waf configuration
 36 | .lock-wscript
 37 | 
 38 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 39 | build/Release
 40 | 
 41 | # Dependency directories
 42 | node_modules/
 43 | jspm_packages/
 44 | 
 45 | # Snowpack dependency directory (https://snowpack.dev/)
 46 | web_modules/
 47 | 
 48 | # TypeScript cache
 49 | *.tsbuildinfo
 50 | 
 51 | # Optional npm cache directory
 52 | .npm
 53 | 
 54 | # Optional eslint cache
 55 | .eslintcache
 56 | 
 57 | # Optional stylelint cache
 58 | .stylelintcache
 59 | 
 60 | # Microbundle cache
 61 | .rpt2_cache/
 62 | .rts2_cache_cjs/
 63 | .rts2_cache_es/
 64 | .rts2_cache_umd/
 65 | 
 66 | # Optional REPL history
 67 | .node_repl_history
 68 | 
 69 | # Output of 'npm pack'
 70 | *.tgz
 71 | 
 72 | # Yarn Integrity file
 73 | .yarn-integrity
 74 | 
 75 | # dotenv environment variable files
 76 | .env
 77 | .env.development.local
 78 | .env.test.local
 79 | .env.production.local
 80 | .env.local
 81 | 
 82 | # parcel-bundler cache (https://parceljs.org/)
 83 | .cache
 84 | .parcel-cache
 85 | 
 86 | # Next.js build output
 87 | .next
 88 | out
 89 | 
 90 | # Nuxt.js build / generate output
 91 | .nuxt
 92 | dist
 93 | 
 94 | # Gatsby files
 95 | .cache/
 96 | # Comment in the public line in if your project uses Gatsby and not Next.js
 97 | # https://nextjs.org/blog/next-9-1#public-directory-support
 98 | # public
 99 | 
100 | # vuepress build output
101 | .vuepress/dist
102 | 
103 | # vuepress v2.x temp and cache directory
104 | .temp
105 | .cache
106 | 
107 | # Docusaurus cache and generated files
108 | .docusaurus
109 | 
110 | # Serverless directories
111 | .serverless/
112 | 
113 | # FuseBox cache
114 | .fusebox/
115 | 
116 | # DynamoDB Local files
117 | .dynamodb/
118 | 
119 | # TernJS port file
120 | .tern-port
121 | 
122 | # Stores VSCode versions used for testing VSCode extensions
123 | .vscode-test
124 | 
125 | # yarn v2
126 | .yarn/cache
127 | .yarn/unplugged
128 | .yarn/build-state.yml
129 | .yarn/install-state.gz
130 | .pnp.*


--------------------------------------------------------------------------------
/views/updateEvent.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <script
 9 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
10 |       integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
11 |       crossorigin="anonymous"
12 |     ></script>
13 |     <link
14 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
15 |       rel="stylesheet"
16 |       integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
17 |       crossorigin="anonymous"
18 |     />
19 |     <link rel="icon" href="images/logo.png" type="image/icon type" />
20 |     <style>
21 |         body{
22 |             background-image: linear-gradient(to right,#7F8C8D,#000000);
23 |         }
24 |       input{
25 |         margin: 10px;
26 |     display: grid;
27 |     width: -webkit-fill-available;
28 |     justify-content: center;
29 |     position: relative;
30 |     left: 0%;
31 |     padding: 6px;
32 |     border-radius: 10px;
33 | }
34 |     button{
35 |         width: -webkit-fill-available;
36 |     justify-content: center;
37 |     position: relative;
38 |     left: 0%;
39 |     padding: 6px;
40 |     border-radius: 10px;
41 |     background-color: #555555;
42 |     color: #fff;
43 |     }
44 |     button:hover{
45 |         background-color: #7F8C8D;
46 |     }
47 |      
48 |     </style>
49 | </head>
50 | <body>
51 |     <div class="mask d-flex align-items-center h-100 gradient-custom-3">
52 |         <div class="container h-100">
53 |           <div class="row d-flex justify-content-center align-items-center h-100">
54 |             <div class="col-12 col-md-9 col-lg-7 col-xl-6">
55 |               <div class="card" style="border-radius: 15px;margin: 10px; background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));">
56 |                 <div class="card-body p-5">
57 |     <h1>Update Events</h1>
58 |    
59 |    
60 |     
61 |        
62 |             <!-- <h1>excecutingggg</h1> -->
63 |             <form action="/events/<%= data.id%>" method="post">
64 |                 <!-- <input type="text"> -->
65 | 
66 |                 <!-- <input type="text" name="id" value="<%= data.id%>" > -->
67 |                 <input type="text" name="name" value="<%= data.name%>" ><br>
68 |                 <input type="text" name="description" value="<%= data.description%>" ><br>
69 |                 <input type="text" name="photo" value="<%= data.photo%>" ><br>
70 |                 <input type="text" name="time" value="<%= data.time%>" ><br>
71 |                 <input type="text" name="mode" value="<%= data.mode%>" ><br>
72 |                 <input type="date" name="dateStart" value="<%= data.dateStart%>" ><br>
73 |                 <input type="date" name="dateEnd" value="<%= data.dateEnd%>" ><br>
74 |                 <input type="text" name="venue" value="<%= data.venue%>" ><br>
75 |                 <input type="text" name="registerationFee" value="<%= data.registerationFee%>" ><br>
76 |                 <input type="text" name="cashPrice" value="<%= data.cashPrice%>" ><br>
77 |                 <input type="text" name="contact" value="<%= data.contact%>" ><br>
78 | 
79 |                 <button>Update</button> 
80 |             </form>
81 |         </div>
82 |             </div>
83 |           </div>
84 |         </div>
85 |       </div>
86 |     </div>
87 |            
88 | 
89 |     
90 |     
91 | </body>
92 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # KHEL SETHU
  3 | 
  4 | Khel Sethu project is  designed to help organize and manage sports events smoothly. It provides a platform for event organizers to handle various tasks involved in planning and executing a sports event.
  5 | 
  6 | With this project, event organizers can easily create event schedules, manage participant registrations and payment processes. The application allows them to keep track of all the important information related to the event, such as venue details, event rules, and participant data.
  7 | 
  8 | Participants and spectators can also benefit from the project. Participants can register for the event online,and receive updates about the event.
  9 | 
 10 | The project simplifies the management of sports events by providing a centralized platform where all the necessary information and operations can be handled. It reduces manual work, streamlines processes, and improves efficiency. Whether it's a small local tournament or a large-scale sporting event, the sports event management project aims to make the entire experience smoother and more enjoyable for everyone involved.
 11 | 
 12 | 
 13 | ## Deployment Link
 14 | 
 15 | [View Deployment](https://khelsethu1.onrender.com)
 16 | 
 17 | 
 18 | 
 19 | 
 20 | 
 21 | 
 22 | ## Installation
 23 | 
 24 | Run Project
 25 | 
 26 | ```bash
 27 |   git clone https://github.com/harinadh76/Khel-Sethu.git
 28 | ```
 29 | ```bash
 30 |   npm install
 31 | ```
 32 | ```bash
 33 |   nodemon index
 34 | ```
 35 |     
 36 | ## Our Team
 37 | 
 38 | - [Harinadh](https://www.github.com/harinadh76)
 39 | - [Prem Kumar](https://github.com/Prempk29)
 40 | - [Vani](https://github.com/R-Sree-Vani)
 41 | 
 42 | 
 43 | ## Project Images
 44 | 
 45 | Home Page
 46 | 
 47 | ![Home](https://github.com/harinadh76/Khel-Sethu/assets/92932442/674959aa-a7a2-4516-8606-dac5aef27665)
 48 | 
 49 | Events Dashboard
 50 | 
 51 | ![events](https://github.com/harinadh76/Khel-Sethu/assets/92932442/0c722e6b-66a8-4f0a-b7c4-813164bc6ee8)
 52 | 
 53 | User Registering for an Event
 54 | 
 55 | ![registerEvent](https://github.com/harinadh76/Khel-Sethu/assets/92932442/701d4b90-ab8e-4bf7-b36d-b80f8689e918)
 56 | 
 57 | Admin Panel (All CRUD Operations)
 58 | ![admin](https://github.com/harinadh76/Khel-Sethu/assets/92932442/3c1c5d11-ba7e-4127-82bb-78bccdbeb3d0)
 59 | 
 60 | 
 61 | 
 62 | 
 63 | ## To Access Admin Panel
 64 | 
 65 | - Admin Mail Id
 66 | ```bash
 67 |     admin@gmail.com
 68 | ```
 69 | - Admin Password
 70 | ```bash
 71 |     admin
 72 | ```
 73 | 
 74 | 
 75 | 
 76 | ## 💻 Tech Stack:
 77 | ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) ![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white) ![Bootstrap](https://img.shields.io/badge/bootstrap-%23563D7C.svg?style=for-the-badge&logo=bootstrap&logoColor=white)
 78 | 
 79 | ## 🔗 Our Profiles
 80 | 
 81 | Harinadh
 82 | 
 83 | [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/harinadh-tanna-45b392211/)
 84 | 
 85 | Prem Kumar
 86 | 
 87 | [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/prem-kumar-naidu-tadi-b47179237)
 88 | 
 89 | Vani
 90 | 
 91 | [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/sree-vani-ramisetti-7b0579208)
 92 | 
 93 | ## License
 94 | 
 95 | [MIT](https://choosealicense.com/licenses/mit/)
 96 | 
 97 | 
 98 | ## Contributing
 99 | 
100 | Contributions are always welcome!
101 | 
102 | See `contributing.md` for ways to get started.
103 | 
104 | Please adhere to this project's `code of conduct`.
105 | 
106 | 


--------------------------------------------------------------------------------
/views/adminViewEvents.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Updated events</title>
  9 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
 10 |         integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
 11 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
 12 |         integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
 13 |         crossorigin="anonymous"></script>
 14 |         <link rel="icon" href="images/logo.png" type="image/icon type" />
 15 |     <style>
 16 |       
 17 |         #events {
 18 |             padding: 8vw 8vw 0 8vw;
 19 |             text-align: center;
 20 |         }
 21 | 
 22 |         #events .events-box {
 23 |             display: grid;
 24 |             grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 25 |             grid-gap: 1rem;
 26 |             margin-top: 50px;
 27 |         }
 28 | 
 29 |         #events .events {
 30 |             text-align: start;
 31 |             background-color: #f9f9ff;
 32 |             height: fit-content;
 33 |             position: relative;
 34 |         }
 35 | 
 36 |         #events .events img {
 37 |             width: 100%;
 38 |             height: 60%;
 39 |             background-size: cover;
 40 |             background-position: center;
 41 |         }
 42 | 
 43 |         #events .events .details {
 44 |             padding: 15px 15px 0 15px;
 45 |             /* margin-bottom: 80px; */
 46 |         }
 47 | 
 48 |         #events .events .cost {
 49 |             /* background-color: rgb(74,74,136); */
 50 |             background-color: rgb(63, 2, 63);
 51 |             color: #fff;
 52 |             line-height: 70px;
 53 |             width: 70px;
 54 |             height: 70px;
 55 |             text-align: center;
 56 |             border-radius: 50%;
 57 |             position: absolute;
 58 |             right: 15px;
 59 |             bottom: 125px;
 60 |         }
 61 | 
 62 |         .regbtn {
 63 |             border-radius: 7px;
 64 |             background-color: rgb(63, 2, 63);
 65 |             color: #fff;
 66 |             margin-top: 30px;
 67 |             height: 45px;
 68 |             width: 130px;
 69 |             margin: 20px;
 70 |         }
 71 | 
 72 |         
 73 | 
 74 |         .regbtn:hover
 75 |          {
 76 |             background-color: purple;
 77 |         }
 78 |         .formact{
 79 |           display: flex;
 80 |           
 81 |         }
 82 |         /* .formact input{
 83 |           background-color:rgb(63, 2, 63);
 84 |           border: none;
 85 |           color: #fff;
 86 |           font-size: 20px;
 87 |           
 88 |         } */
 89 |         h4{
 90 |           font-size: 20px;
 91 |         }
 92 | 
 93 | 
 94 |         
 95 |     </style>
 96 | </head>
 97 | 
 98 | <body>
 99 |     <section id="events">
100 |       
101 |         <div class="events-box">
102 |           <% for(var i=0;i<event.length;i++) { %>
103 |             <div class="events">
104 |                 <img src="<%= event[i].photo%>" />
105 |                 <div class="details" style="line-height: 2;">
106 |                     
107 |                     <h4 style="margin-bottom: 13px;">Name:<%= event[i].name %></h4>
108 |                     <h4 style="margin-bottom: 13px;">Description:<%= event[i].description %></h4>
109 |                     <h4 style="margin-bottom: 13px;">Time:<%= event[i].time %></h4>
110 |                     <h4 style="margin-bottom: 13px;">Mode:<%= event[i].mode %></h4>
111 |                     <h4 style="margin-bottom: 13px;">DateStarted:<%= event[i].dateStart %></h4>
112 |                     <h4 style="margin-bottom: 13px;">DateEnd:<%= event[i].dateEnd %></h4>
113 |                     <h4 style="margin-bottom: 13px;">Category:<%= event[i].category %></h4>
114 |                     <h4 style="margin-bottom: 13px;">RegisterationFee:<%= event[i].registerationFee %></h4>
115 |                     <h4 style="margin-bottom: 13px;">Cashprize:<%= event[i].cashPrice %></h4>
116 |                     <h4 style="margin-bottom: 13px;">Contact No:<%= event[i].contact %></h4>
117 | 
118 | 
119 |                     <center>
120 |                        <div class="formact">
121 |                         <form action='/updateEvent/<%=event[i]._id%>' method="POST" >
122 |                            <input type="submit" value="Update" class="regbtn">
123 |                         </form>
124 |                         <form action='/deleteEvents/<%=event[i]._id%>' method="POST" >
125 |                           <input type="submit" value="Delete" class="regbtn">
126 |                         </form> 
127 |                         </div>
128 |                     </center>
129 | 
130 |                     
131 |                 </div>
132 |                 
133 |             </div>
134 |             <% } %>
135 |             </div>
136 | 
137 | 
138 | 
139 |             
140 | 
141 | 
142 |             
143 |     </section>
144 | </body>
145 | 
146 | </html>


--------------------------------------------------------------------------------
/newevent.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 |   <title>Create-Event</title>
  8 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
  9 |     integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
 10 |     crossorigin="anonymous"></script>
 11 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
 12 |     integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
 13 |     <link rel="icon" href="images/logo.png" type="image/icon type" />
 14 |   <style>
 15 | 
 16 |     body {
 17 |       background-image: linear-gradient(to right, #7F8C8D, #000000);
 18 |     }
 19 | 
 20 |     .subbtn {
 21 |       width: -webkit-fill-available;
 22 |       justify-content: center;
 23 |       position: relative;
 24 |       left: 0%;
 25 |       padding: 6px;
 26 |       border-radius: 10px;
 27 |       background-color: #555555;
 28 |       color: #fff;
 29 |     }
 30 | 
 31 |     .subbtn:hover {
 32 |       background-color: #7F8C8D;
 33 |     }
 34 |   </style>
 35 | </head>
 36 | 
 37 | <body>
 38 |   <div class="mask d-flex align-items-center h-100 gradient-custom-3">
 39 |     <div class="container h-100">
 40 |       <div class="row d-flex justify-content-center align-items-center h-100">
 41 |         <div class="col-12 col-md-9 col-lg-7 col-xl-6">
 42 |           <div class="card"
 43 |             style="border-radius: 15px;margin: 10px; background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));">
 44 |             <div class="card-body p-5">
 45 |               <h2 class="text-uppercase text-center mb-5">ADD AN EVENT</h2>
 46 | 
 47 |               <form action="/create" method="post">
 48 |                 <div class="form-outline mb-4">
 49 |                   <label class="form-label" for="form3Example1cg">Event Name</label>
 50 |                   <input type="text" id="form3Example1cg" class="form-control form-control-lg" name="name" />
 51 |                 </div>
 52 | 
 53 |                 <div class="form-outline mb-4">
 54 |                   <label class="form-label" for="form3Example3cg">
 55 |                     Description</label>
 56 |                   <input type="text" id="form3Example3cg" class="form-control form-control-lg" name="description" />
 57 |                 </div>
 58 | 
 59 |                 <div class="form-outline mb-4">
 60 |                   <label class="form-label" for="form3Example4cdg">Time</label>
 61 |                   <input type="text" id="form3Example4cdg" class="form-control form-control-lg" name="time" />
 62 |                 </div>
 63 | 
 64 |                 <div class="form-outline mb-4">
 65 |                   <label class="form-label" for="form3Example4cg">Start Date</label>
 66 |                   <input type="date" id="form3Example4cg" class="form-control form-control-lg" name="dateStart" />
 67 |                 </div>
 68 | 
 69 |                 <div class="form-outline mb-4">
 70 |                   <label class="form-label" for="form3Example4cdg">End Date</label>
 71 |                   <input type="date" id="form3Example4cdg" class="form-control form-control-lg" name="dateEnd" />
 72 |                 </div>
 73 | 
 74 |                 <div class="form-outline mb-4">
 75 |                   <label class="form-label" for="form3Example4cdg">Registration Fee</label>
 76 |                   <input type="text" id="form3Example4cdg" class="form-control form-control-lg"
 77 |                     name="registerationFee" />
 78 |                 </div>
 79 | 
 80 |                 <div class="form-outline mb-4">
 81 |                   <label class="form-label" for="form3Example4cdg">Cash Prize</label>
 82 |                   <input type="text" id="form3Example4cdg" class="form-control form-control-lg" name="cashPrice" />
 83 |                 </div>
 84 | 
 85 |                 <div class="form-outline mb-4">
 86 |                   <label class="form-label" for="form3Example4cdg">Upload Photo</label>
 87 |                   <input type="text" id="form3Example4cdg" class="form-control form-control-lg" name="photo" />
 88 |                 </div>
 89 | 
 90 |                 <div class="form-outline mb-4">
 91 |                   <label class="form-label" for="form3Example4cdg">Venue</label>
 92 |                   <input type="text" id="form3Example4cdg" class="form-control form-control-lg" name="venue" />
 93 |                 </div>
 94 | 
 95 |                 <div class="form-outline mb-4">
 96 |                   <label class="form-label" for="form3Example4cdg">Contact No</label>
 97 |                   <input type="text" id="form3Example4cdg" class="form-control form-control-lg" name="contact" />
 98 |                 </div>
 99 | 
100 | 
101 | 
102 |                 <div class="form-outline mb-4">
103 |                   <label for="mode">Choose a Mode</label>
104 | 
105 |                   <select name="mode" id="mode">
106 |                     <option value="online">Online</option>
107 |                     <option value="offline">Offline</option>
108 |                   </select>
109 |                 </div>
110 | 
111 |                 <div class="form-outline mb-4">
112 |                   <label for="category">Choose a Mode</label>
113 | 
114 |                   <select name="category" id="category">
115 |                     <option value="Indoor">Indoor</option>
116 |                     <option value="Outdoor">Outdoor</option>
117 |                   </select>
118 |                 </div>
119 | 
120 |                 <div class="d-flex justify-content-center">
121 |                  
122 | 
123 |                   <input type="submit" value="ADD" class="subbtn" />
124 |                 </div>
125 |               </form>
126 |             </div>
127 |           </div>
128 |         </div>
129 |       </div>
130 |     </div>
131 |   </div>
132 | </body>
133 | 
134 | </html>


--------------------------------------------------------------------------------
/adminDashboard.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <link rel="icon" href="tsp.jpg">
  9 |     <title>AdminBoard</title>
 10 |     <style>
 11 |         @import url('https://fonts.googleapis.com/css2?family=Sacramento&family=Ubuntu:wght@300&display=swap');
 12 | 
 13 |         body {
 14 |             margin: 0;
 15 |             padding: 0;
 16 |             box-sizing: border-box;
 17 |             display: flex;
 18 |             justify-content: center;
 19 |             background-image: linear-gradient(to right,#7F8C8D,#000000);
 20 |             place-items: center;
 21 |             min-height: 100vh;
 22 |             background-color: black;
 23 |             font-family: 'Sacramento', cursive;
 24 |             font-family: 'Ubuntu', sans-serif;
 25 |         }
 26 | 
 27 |         textarea {
 28 |             margin-top: -23px;
 29 |             font-family: 'Sacramento', cursive;
 30 |             font-family: 'Ubuntu', sans-serif;
 31 |             font-weight: 900;
 32 |             background-color: #bababa;
 33 |             background-image: -moz-linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 34 |             background-image: -webkit-linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 35 |             background-image: -o-linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 36 |             background-image: -ms-linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 37 |             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fbfc', endColorstr='#f9fbfc', GradientType=0);
 38 |             background-image: linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 39 |             -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 40 |             -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 41 |             box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 42 |         }
 43 | 
 44 |         select.values {
 45 |             margin-left: -1px;
 46 |             height: 33px;
 47 |             margin-top: -19px;
 48 |             width: 485px;
 49 |             border-radius: 10px;
 50 |             background-color: #bababa;
 51 |             background-image: -moz-linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 52 |             background-image: -webkit-linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 53 |             background-image: -o-linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 54 |             background-image: -ms-linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 55 |             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fbfc', endColorstr='#f9fbfc', GradientType=0);
 56 |             background-image: linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 57 |             -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 58 |             -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 59 |             box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 60 |         }
 61 | 
 62 |         button {
 63 |             text-decoration: none;
 64 |             width: 485px;
 65 |             text-align: center;
 66 |             padding: 11px 32px;
 67 |             border: solid 1px #004F72;
 68 |             -webkit-border-radius: 4px;
 69 |             -moz-border-radius: 4px;
 70 |             border-radius: 10px;
 71 |             font: 17px Georgia, "Times New Roman", Times, serif;
 72 |             font-weight: bold;
 73 |             color: #010d0d;
 74 |             background-color: #bababa;
 75 |             background-image: -moz-linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 76 |             background-image: -webkit-linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 77 |             background-image: -o-linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 78 |             background-image: -ms-linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 79 |             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fbfc', endColorstr='#f9fbfc', GradientType=0);
 80 |             background-image: linear-gradient(top, #bababa 0%, #f9fbfc 100%);
 81 |             -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 82 |             -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 83 |             box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 84 | 
 85 |         }
 86 | 
 87 |         h1 {
 88 |             text-align: center;
 89 |         }
 90 | 
 91 |         h2 {
 92 |             margin-top: 10px;
 93 |             text-align: left;
 94 |             margin-left: 27px;
 95 |         }
 96 | 
 97 |         .container {
 98 |             height: 235px;
 99 |             width: 525px;
100 |             border-radius: 10px;
101 |             background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
102 |             text-align: center;
103 |         }
104 | 
105 |         .one {
106 |             display: flex;
107 |             flex-direction: column;
108 |             padding-left: 2px;
109 |         }
110 | 
111 |         .prem {
112 | 
113 |             height: 120px;
114 |             width: 481px;
115 |             margin-left: 30px;
116 |             border-radius: 10px;
117 |             font-size: 1rem;
118 |             line-height: 2;
119 | 
120 |         }
121 | 
122 |         .select {
123 |             margin-top: -49px;
124 |             margin-left: 29px;
125 |         }
126 |         @media (max-width:480px)
127 |         {
128 |            body 
129 |            {
130 |             background-image: linear-gradient(to right,#34e89e,#0f3443);
131 |            }
132 |            .container 
133 |            {
134 |             background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
135 |             width: 350px;
136 | 
137 |            }
138 |            .prem 
139 |            {
140 |             width: 300px;
141 |             margin-left:20px ;
142 |            }
143 |            select.values 
144 |            {
145 |               width: 300px;
146 |            }
147 |            button
148 |            {
149 |             width: 300px;
150 |             
151 |            }
152 |         }
153 |     </style>
154 | </head>
155 | 
156 | <body>
157 |     <div class="container">
158 |         <h1>Welcome To Admin Board</h1>
159 |             
160 |             <button style="margin-bottom: 8px;" onClick="window.location.href='/addEvent'">Create a new Event</button>
161 |             <button style="margin-bottom: 8px;" onClick="window.location.href='/viewevents'">View all Events</button>
162 |             <button style="margin-bottom: 8px;" onClick="window.location.href='/viewRegistrations'">View all Registrations</button>
163 |            
164 |         </form>
165 |     </div>
166 |     
167 | </body>
168 | 
169 | </html>
170 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | const express = require("express");
  2 | require('dotenv').config({path: __dirname + '/.env'})
  3 | const mongoose = require("mongoose");
  4 | const bodyParser = require("body-parser");
  5 | const eventModule = require("./models/events");
  6 | const RegisterModule = require("./models/RegisterModel");
  7 | const LocalStorage = require('node-localstorage').LocalStorage
  8 | localStorage = new LocalStorage('./scratch')
  9 | const { json } = require('body-parser')
 10 | const eventRegistration = require('./models/Registration')
 11 | 
 12 | 
 13 | const app = express();
 14 | app.use(bodyParser.json());
 15 | app.use(bodyParser.urlencoded({ extended: true }));
 16 | app.set("view engine", "ejs");
 17 | app.use(express.static("public"));
 18 | 
 19 | mongoose.set("strictQuery", false);
 20 | mongoose
 21 |   .connect(
 22 |     process.env.MONGODB,
 23 |     { useNewUrlParser: true, useUnifiedTopology: true }
 24 |   )
 25 |   .then(console.log("MongoDB Connected..."))
 26 |   .catch((err) => console.log(err));
 27 | 
 28 | app.use(express.json());
 29 | 
 30 | 
 31 | 
 32 | // 1. Rendering Files
 33 | app.get("/details", (req, res) => {
 34 |   res.render('details')
 35 | });
 36 | 
 37 | 
 38 | 
 39 | 
 40 | 
 41 | app.get("/", (req, res) => {
 42 |   eventModule.find({}).then((data) => {
 43 |     res.render("index", { event: data });
 44 |   })
 45 | });
 46 | app.get("/loginUser", (req, res) => {
 47 |   res.render('login')
 48 | });
 49 | app.get("/registerUser", (req, res) => {
 50 |   res.render('signup')
 51 | });
 52 | app.get("/contactUs", (req, res) => {
 53 |   res.render('contact')
 54 | })
 55 | app.get("/about", (req, res) => {
 56 |   res.render('about')
 57 | })
 58 | app.get("/checkevents", (req, res) => {
 59 |   eventModule.find({}).then((data) => {
 60 |     res.render("events", { event: data });
 61 |   })
 62 | 
 63 | })
 64 | app.get("/logout", (req, res) => {
 65 |   localStorage.clear()
 66 |   res.redirect('/')
 67 | })
 68 | 
 69 | 
 70 | 
 71 | 
 72 | //admindashboard
 73 | app.get("/admindashboard", (req, res) => {
 74 |   res.sendFile(__dirname + "/adminDashboard.html");
 75 | })
 76 | //admin module files
 77 | app.get("/addEvent", async (req, res) => {
 78 |   res.sendFile(__dirname + "/newevent.html");
 79 | })
 80 | // admin updating part
 81 | app.post("/updateEvent/:id", async (req, res) => {
 82 | 
 83 |   try {
 84 |     eventModule.findById(req.params.id).then((data) => {
 85 |       console.log(data);
 86 |       res.render('updateEvent', { data: data })
 87 |     })
 88 |   } catch (err) {
 89 |     res.json({ message: err });
 90 |   }
 91 | })
 92 | app.get("/viewevents", (req, res) => {
 93 |   eventModule.find({}).then((data) => {
 94 |     res.render("adminViewEvents", { event: data });
 95 |   })
 96 | })
 97 | 
 98 | //2. CRUD OPERATIONS
 99 | 
100 | //create
101 | app.post("/create", async (req, res) => {
102 |   console.log(req.body);
103 |   const event = new eventModule({
104 |     name: req.body.name,
105 |     description: req.body.description,
106 |     photo: req.body.photo,
107 |     time: req.body.time,
108 |     mode: req.body.mode,
109 |     dateStart: req.body.dateStart,
110 |     dateEnd: req.body.dateEnd,
111 |     venue: req.body.venue,
112 |     category: req.body.category,
113 |     registerationFee: req.body.registerationFee,
114 |     cashPrice: req.body.cashPrice,
115 |     contact: req.body.contact
116 |   });
117 | 
118 |   try {
119 |     await event.save();
120 |     res.redirect("/viewevents");
121 |   } catch (err) {
122 |     res.json({ message: err });
123 |   }
124 | });
125 | 
126 | //show all events for clients
127 | 
128 | app.get("/showAllEvents", async (req, res) => {
129 |   try {
130 |     const events = await eventModule.find();
131 |     // res.json({ events });
132 | 
133 | 
134 |     eventModule.find({}).then((data) => {
135 |       res.render("showevent", { event: data });
136 |     })
137 |   } catch (err) {
138 |     res.json({ message: err });
139 |   }
140 | });
141 | 
142 | 
143 | app.get("/fetchdetails/:id",function(req,res){
144 |   try{
145 |     eventModule.findById(req.params.id).then((data)=>{
146 |       res.render("details",{event:data})
147 |     })
148 |   }
149 |   catch(err){
150 |     res.json({ message: err });
151 |   }
152 | 
153 | 
154 | });
155 | 
156 | //read
157 | app.get("/events/:eventId", async (req, res) => {
158 |   try {
159 |     const event = await eventModule.findById(req.params.eventId);
160 |     // res.json({ event });
161 |     res.render("details")
162 |   } catch (err) {
163 |     res.json({ message: err });
164 |   }
165 | });
166 | 
167 | //update
168 | app.post("/events/:eventId", async (req, res) => {
169 |   const {
170 |     name,
171 |     description,
172 |     photo,
173 |     time,
174 |     mode,
175 |     dateStart,
176 |     dateEnd,
177 |     venue,
178 |     category,
179 |     registerationFee,
180 |     cashPrice,
181 |     contact
182 |   } = req.body;
183 |   try {
184 |     const updatedEvent = await eventModule.findByIdAndUpdate(
185 |       req.params.eventId,
186 |       {
187 |         name,
188 |         description,
189 |         photo,
190 |         time,
191 |         mode,
192 |         dateStart,
193 |         dateEnd,
194 |         venue,
195 |         category,
196 |         registerationFee,
197 |         cashPrice,
198 |         contact
199 |       }
200 |     );
201 | 
202 |     if (!updatedEvent) {
203 |       res.json({ message: "Event not found" });
204 |     }
205 | 
206 |     updatedEvent = await updatedEvent.save();
207 |     res.redirect("/viewevents");
208 |   } catch (err) {
209 |     res.redirect("/viewevents");
210 |   }
211 | });
212 | 
213 | //delete
214 | app.post("/deleteEvents/:eventId", async (req, res) => {
215 |   try {
216 |     const removedEvent = await eventModule.findByIdAndRemove(
217 |       req.params.eventId
218 |     );
219 |     res.redirect("/viewevents")
220 |   } catch (err) {
221 |     res.json({ message: err });
222 |   }
223 | });
224 | 
225 | // User Registering for an event + Payments
226 | 
227 | app.post("/testing", async(req,res)=>{
228 |     const register = new eventRegistration({
229 |       name:req.body.name,
230 |       email:req.body.email,
231 |       phnumber:req.body.mobile,
232 |       year:req.body.yos,
233 |       event:req.body.events,
234 |       amount:req.body.amount,
235 |       transactionid:req.body.transactionid
236 |     })
237 | 
238 |     try{
239 |       await register.save();
240 |       res.redirect("/checkevents")
241 | 
242 |     }
243 |     catch(err){
244 |       console.log(err);
245 |     }
246 | })
247 | 
248 | // admin view for viewing student Registrations...
249 | app.get("/viewRegistrations", async(req,res)=>{
250 |   try{
251 |     eventRegistration.find({}).then((data) =>{
252 |       console.log(data);
253 |       res.render("adminViewRegistrations", {event: data});
254 |     })
255 |   }catch(err){
256 |     console.log(err);
257 |   }
258 | })
259 | 
260 | 
261 | // 3.Logins and Register
262 | 
263 | //Login route started
264 | 
265 | app.post("/login", function (req, res) {
266 |   const email = req.body.email;
267 |   const password = req.body.password;
268 |   if (email == process.env.ADMINUSER && password == process.env.ADMINPASSWORD) {
269 | 
270 |     res.redirect("/admindashboard")
271 |   }
272 |   else{
273 |   RegisterModule.findOne({ email: email })
274 |     .then((data) => {
275 |       if (data == null) {
276 |         res.redirect("/registerUser")
277 |       }
278 |       else if (data.password != password) {
279 |         res.write("<div style='margin:auto; align-items:center;margin-top:50px;width:24%;height:15%;padding:10px;'><h1 style='margin-top:4px'>Invalid credentials<br><a href='/loginUser'>Back to Login Page</a></h1></div>")
280 |       }
281 |       else {
282 |         localStorage.setItem("users", JSON.stringify(data))
283 |         res.redirect("/");
284 |       }
285 |     })
286 |     .catch((err) => {
287 |       console.log(err);
288 |     });
289 |   }
290 | 
291 | });
292 | //login route completed
293 | 
294 | //Register route 
295 | app.post("/register", function (req, res) {
296 |   const username = req.body.username;
297 |   const email = req.body.email;
298 |   const password = req.body.password;
299 |   const user = new RegisterModule({
300 |     username: username,
301 |     email: email,
302 |     password: password
303 |   })
304 |   RegisterModule.findOne({ email: email }, function (err, data) {
305 |     if (err) {
306 |       console.log(err)
307 |     }
308 |     else if (data) {
309 |       res.redirect("/loginUser")
310 |     }
311 |     else {
312 |       user.save()
313 |       res.redirect("/loginUser")
314 |     }
315 |   })
316 | 
317 | })
318 | //register route completed  
319 | 
320 | 
321 | 
322 | 
323 | 
324 | 
325 | 
326 | 
327 | 
328 | 
329 | 
330 | //server starting
331 | app.listen(3000, () => {
332 |   console.log("Server is running");
333 | });
334 | 


--------------------------------------------------------------------------------
/views/signup.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Khel Sethu</title>
  8 |     <link rel="stylesheet" type="text/css" href="css/styles.css" />
  9 |     <link rel="icon" href="images/logo.png" type="image/icon type"/>
 10 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
 11 |     <style>
 12 |        @import url("https://fonts.googleapis.com/css?family=Poppins");
 13 | 
 14 |       
 15 | 
 16 |       * {
 17 |         font-family: "Montserrat", sans-serif;
 18 |         margin: 0;
 19 |         padding: 0;
 20 |         box-sizing: border-box;
 21 |       }
 22 |       body {
 23 |         background-image: url("images/main.jpg");
 24 |         background-repeat: no-repeat;
 25 |         background-size: cover;
 26 |         background-position: center;
 27 |         height: 100vh;
 28 |       }
 29 | 
 30 |       section {
 31 |         padding: 3rem 0 2rem;
 32 |       }
 33 | 
 34 |       a {
 35 |         text-decoration: none;
 36 |       }
 37 | 
 38 |       li {
 39 |         list-style: none;
 40 |       }
 41 | 
 42 |       /*Header starts*/
 43 |       header {
 44 |         position: fixed;
 45 |         top: 0;
 46 |         left: 0;
 47 |         width: 100%;
 48 |         z-index: 100;
 49 |       }
 50 | 
 51 |       .container {
 52 |         max-width: 960px;
 53 |         margin: auto;
 54 |         width: 100%;
 55 |       }
 56 | 
 57 |       .header-active{
 58 |       background-color: white;
 59 |       transition: 0.4s;
 60 |       height: 80px;
 61 |     }
 62 | 
 63 | 
 64 |       .nav {
 65 |         display: flex;
 66 |         justify-content: space-between;
 67 |         align-items: center;
 68 |         padding: 20px 0;
 69 |       }
 70 | 
 71 |       .logo {
 72 |         font-size: 2rem;
 73 |         font-weight: 800;
 74 |         position: relative;
 75 |         top: -10px;
 76 |         color: rgb(63, 2, 63);
 77 |       }
 78 | 
 79 |       .navbar {
 80 |         display: flex;
 81 |         align-items: center;
 82 |         column-gap: 1.5rem;
 83 |       }
 84 | 
 85 |       .nav-link {
 86 |         color: rgb(63, 2, 63);
 87 |         font-weight: bold;
 88 |         font-size: 1rem;
 89 |         padding: 4px 8px;
 90 |         border-radius: 0.2rem;
 91 |       }
 92 | 
 93 |       .nav-link:hover {
 94 |         color: white;
 95 |         background: rgb(63, 2, 63);
 96 |         transition: 0.3s all linear;
 97 |       }
 98 |       /*Header ends*/
 99 |       /* menu icon starts*/
100 |       .menu-icon {
101 |         display: none;
102 |         flex-direction: column;
103 |         align-items: center;
104 |         justify-content: center;
105 |         row-gap: 5px;
106 |         cursor: pointer;
107 |         z-index: 200;
108 |         transition: 0.3s;
109 |       }
110 |       .menu-icon div {
111 |         display: block;
112 |         background: rgb(63, 2, 63);
113 |         height: 2px;
114 |         width: 24px;
115 |         transition: 0.3s;
116 |       }
117 |       .move .line1 {
118 |         transform: rotate(-45deg) translate(-5px, 5px);
119 |       }
120 |       .move .line2 {
121 |         opacity: 0;
122 |       }
123 |       .move .line3 {
124 |         transform: rotate(45deg) translate(-5px, -5px);
125 |       }
126 |       /* menu icon ends */
127 |       /* main page starts */
128 |       .home {
129 |         min-height: 400px;
130 |         display: flex;
131 |         align-items: center;
132 |         justify-content: center;
133 |         padding-top: 7rem;
134 |         font-size: 15px;
135 |         color:rgb(63, 2, 63); ;
136 |       }
137 |       .home-content{
138 |       
139 |             box-shadow: 0 0 5px 0;
140 |             padding: 30px 30px 10px 30px;
141 |             width:60%;
142 |             background: inherit;
143 |             backdrop-filter: blur(30px);
144 |             margin: -20px;
145 |             text-align: center;
146 |       }
147 |       #btn{
148 |         background-color: rgb(63, 2, 63);
149 |         border: 1px solid rgb(63, 2, 63);
150 |         color: #fff;
151 |       }
152 |       #btn:hover{
153 |         background-color: purple;
154 |         border: 1px solid purple;
155 |         color: #fff;
156 |       }
157 |       .text-center p{
158 |         font-size: 15px;
159 |       }
160 |       .text-center p a{
161 |         color: purple;
162 |         text-decoration: underline;
163 |       }
164 |       .form-control{
165 |         position: relative;
166 |         left: 20%;
167 |         width: 60%;
168 |       }
169 |       
170 |       .form-control:focus{
171 |         border: 3px solid rgb(63, 2, 63);
172 |       }
173 |       /* main page ends */
174 |       /* responsiveness starts */
175 |       @media (max-width:990px)
176 |       {
177 |         .container 
178 |         {
179 |             margin:0 auto;
180 |             width: 90%;
181 |         }
182 |       }
183 |       @media (max-width:892px){
184 |         section 
185 |         {
186 |             padding:2rem 0;
187 |         }
188 |         .nav 
189 |         {
190 |             padding: 12px 0;
191 |         }
192 |         .menu-icon 
193 |         {
194 |             display: flex;
195 | 
196 |         }
197 |         .navbar 
198 |         {
199 |             position: absolute;
200 |             top:0;
201 |             right:-100%;
202 |             width: 300px;
203 |             height:70vh;
204 |             background: #fff;
205 |             display: flex;
206 |             flex-direction: column;
207 |             align-items: center;
208 |             padding: 50px 20px;
209 |             transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
210 |         }
211 |         .open-menu 
212 |         {
213 |             right:0;
214 |             transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1)
215 |         }
216 |       }
217 |       @media (max-width:775px){
218 |         .container 
219 |         {
220 |             margin:0 auto;
221 |             width: 90%;
222 |         }
223 |         .logo 
224 |         {
225 |             font-size: 1.1rem;
226 |             top: 0px;
227 | 
228 |         }
229 |         .menu-icon 
230 |         {
231 |             display: flex;
232 | 
233 |         }
234 |         .navbar 
235 |         {
236 |             position: absolute;
237 |             top:0;
238 |             right:-100%;
239 |             width: 300px;
240 |             height:70vh;
241 |             background: #fff;
242 |             display: flex;
243 |             flex-direction: column;
244 |             align-items: center;
245 |             padding: 50px 20px;
246 |             transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
247 |         }
248 |         .open-menu 
249 |         {
250 |             right:0;
251 |             transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1)
252 |         }
253 |         .nav-link 
254 |         {
255 |             display: block;
256 |             margin: 1rem 0;
257 |         }
258 |         .home-content{
259 |           width: 100%;
260 |         }
261 |       }
262 |       /* responsiveness ends */
263 |     </style>
264 |   </head>
265 | 
266 |   <body>
267 |     <!--header starts-->
268 |     <header>
269 |       <div class="nav container">
270 |         <a class="logo" href="/"><img src="/images/logo.png" alt="" height="60px" width="60px"> Khel Sethu</a>
271 |         <ul class="navbar">
272 |           <li><a href="/" class="nav-link">Home</a></li>
273 |           <li><a href="/#events" class="nav-link">Events</a></li>
274 |           
275 |           <li><a href="/about" class="nav-link">Our Team</a></li>
276 |           <li><a href="/contactUs" class="nav-link" target="_blank">Contact-Us</a></li>
277 |           <li><a href="/loginUser" class="nav-link">Login</a></li>
278 |           <li><a href="/registerUser" class="nav-link">Sign-Up</a></li>
279 |         </ul>
280 |         <div class="menu-icon">
281 |           <div class="line1"></div>
282 |           <div class="line2"></div>
283 |           <div class="line3"></div>
284 |         </div>
285 |       </div>
286 |     </header>
287 |     <!--header ends-->
288 |     <!--main page starts-->
289 |     <section class="home container" id="home">
290 |         <div class="home-content">
291 |             <form action="/register" method="post">
292 |                 <div class="form-outline mb-4">
293 |                   </div>
294 |                 <!-- Username input -->
295 |                 <div class="form-outline mb-4">
296 |                   <input type="text" name="username" id="form2Example1" class="form-control" placeholder="Username" />
297 |                 </div>
298 |                 <div class="form-outline mb-4">
299 |                     <input type="email" name="email" id="form2Example1" class="form-control" placeholder="Email" />
300 |                   </div>
301 |                 <div class="form-outline mb-4">
302 |                   <input type="password" name="password" id="form2Example2" class="form-control" placeholder="Password" />
303 |                 </div>
304 |                 <!-- Submit button -->
305 |                 <button type="submit" id="btn" class="btn btn-block mb-4">Sign-Up</button>
306 |               
307 |                 <!-- Register buttons -->
308 |                 <div class="text-center">
309 |                   <p>Already a member? <a href="/loginUser">Login</a></p>
310 |                   
311 |                 </div>
312 |               </form>
313 |         </div>
314 |     </section>
315 |     <!--main page ended--> 
316 |     <!--link to js-->
317 |     <script src="js/index.js"></script>
318 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
319 |   </body>
320 | </html>
321 | 


--------------------------------------------------------------------------------
/views/login.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Khel sethu-Login</title>
  8 |     <link rel="stylesheet" type="text/css" href="css/styles.css" />
  9 |     <link rel="icon" href="images/logo.png" type="image/icon type"/>
 10 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
 11 |     <style>
 12 |        @import url("https://fonts.googleapis.com/css?family=Poppins");
 13 | 
 14 |       
 15 | 
 16 |       * {
 17 |         font-family: "Montserrat", sans-serif;
 18 |         margin: 0;
 19 |         padding: 0;
 20 |         box-sizing: border-box;
 21 |       }
 22 |       body {
 23 |         background-image: url("images/main.jpg");
 24 |         background-repeat: no-repeat;
 25 |         background-size: cover;
 26 |         background-position: center;
 27 |         height: 100vh;
 28 |       }
 29 | 
 30 |       section {
 31 |         padding: 3rem 0 2rem;
 32 |       }
 33 | 
 34 |       a {
 35 |         text-decoration: none;
 36 |       }
 37 | 
 38 |       li {
 39 |         list-style: none;
 40 |       }
 41 | 
 42 |       /*Header starts*/
 43 |       header {
 44 |         position: fixed;
 45 |         top: 0;
 46 |         left: 0;
 47 |         width: 100%;
 48 |         z-index: 100;
 49 |       }
 50 | 
 51 |       .container {
 52 |         max-width: 960px;
 53 |         margin: auto;
 54 |         width: 100%;
 55 |       }
 56 | 
 57 |       .header-active{
 58 |       background-color: white;
 59 |       transition: 0.4s;
 60 |       height: 80px;
 61 |     }
 62 | 
 63 | 
 64 |       .nav {
 65 |         display: flex;
 66 |         justify-content: space-between;
 67 |         align-items: center;
 68 |         padding: 20px 0;
 69 |       }
 70 | 
 71 |       .logo {
 72 |         font-size: 2rem;
 73 |         /*changes */
 74 |         position: relative;
 75 |         top: -10px;
 76 |         font-weight: 800;
 77 |         color: rgb(63, 2, 63);
 78 |       }
 79 | 
 80 |       .navbar {
 81 |         display: flex;
 82 |         align-items: center;
 83 |         column-gap: 1.5rem;
 84 |       }
 85 | 
 86 |       .nav-link {
 87 |         color: rgb(63, 2, 63);
 88 |         font-weight: bold;
 89 |         font-size: 1rem;
 90 |         padding: 4px 8px;
 91 |         border-radius: 0.2rem;
 92 |       }
 93 | 
 94 |       .nav-link:hover {
 95 |         color: white;
 96 |         background: rgb(63, 2, 63);
 97 |         transition: 0.3s all linear;
 98 |       }
 99 |       /*Header ends*/
100 |       /* menu icon starts */
101 |       .menu-icon {
102 |         display: none;
103 |         flex-direction: column;
104 |         align-items: center;
105 |         justify-content: center;
106 |         row-gap: 5px;
107 |         cursor: pointer;
108 |         z-index: 200;
109 |         transition: 0.3s;
110 |       }
111 |       .menu-icon div {
112 |         display: block;
113 |         background: rgb(63, 2, 63);
114 |         height: 2px;
115 |         width: 24px;
116 |         transition: 0.3s;
117 |       }
118 |       .move .line1 {
119 |         transform: rotate(-45deg) translate(-5px, 5px);
120 |       }
121 |       .move .line2 {
122 |         opacity: 0;
123 |       }
124 |       .move .line3 {
125 |         transform: rotate(45deg) translate(-5px, -5px);
126 |       }
127 |       /* menu icon ends */
128 |       /* main page starts */
129 |       .home {
130 |         min-height: 400px;
131 |         display: flex;
132 |         align-items: center;
133 |         justify-content: center;
134 |         padding-top: 7rem;
135 |         font-size: 15px;
136 |         color:rgb(63, 2, 63); ;
137 |       }
138 |       .home-content{
139 |       
140 |             box-shadow: 0 0 5px 0;
141 |             padding: 55px;
142 |             width:60%;
143 |             background: inherit;
144 |             backdrop-filter: blur(30px);
145 |             margin: 10px;
146 |             text-align: center;
147 |       }
148 |       #btn{
149 |         background-color: rgb(63, 2, 63);
150 |         border: 1px solid rgb(63, 2, 63);
151 |         color: #fff;
152 |       }
153 |       #btn:hover{
154 |         background-color: purple;
155 |         border: 1px solid purple;
156 |         color: #fff;
157 |       }
158 |       .text-center p{
159 |         font-size: 15px;
160 |       }
161 |       .text-center p a{
162 |         color: purple;
163 |         text-decoration: underline;
164 |       }
165 |       .form-control{
166 |         position: relative;
167 |         left: 20%;
168 |         width: 60%;
169 |       }
170 |       .form-control:focus{
171 |         border: 3px solid rgb(63, 2, 63);
172 |       }
173 |       /* main page ends */
174 |       /* responsiveness starts */
175 |       @media (max-width:990px)
176 |       {
177 |         .container 
178 |         {
179 |             margin:0 auto;
180 |             width: 90%;
181 |         }
182 |       }
183 |       @media (max-width:892px){
184 |         section 
185 |         {
186 |             padding:2rem 0;
187 |         }
188 |         .nav 
189 |         {
190 |             padding: 12px 0;
191 |         }
192 |         .menu-icon 
193 |         {
194 |             display: flex;
195 | 
196 |         }
197 |         .navbar 
198 |         {
199 |             position: absolute;
200 |             top:0;
201 |             right:-100%;
202 |             width: 300px;
203 |             height:70vh;
204 |             background: #fff;
205 |             display: flex;
206 |             flex-direction: column;
207 |             align-items: center;
208 |             padding: 50px 20px;
209 |             transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
210 |         }
211 |         .open-menu 
212 |         {
213 |             right:0;
214 |             transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1)
215 |         }
216 |       }
217 |       @media (max-width:775px){
218 |         .container 
219 |         {
220 |             margin:0 auto;
221 |             width: 90%;
222 |         }
223 |         .logo 
224 |         {
225 |             font-size: 1.1rem;
226 |             top: 0px;
227 | 
228 |         }
229 |         .menu-icon 
230 |         {
231 |             display: flex;
232 | 
233 |         }
234 |         .navbar 
235 |         {
236 |             position: absolute;
237 |             top:0;
238 |             right:-100%;
239 |             width: 300px;
240 |             height:70vh;
241 |             background: #fff;
242 |             display: flex;
243 |             flex-direction: column;
244 |             align-items: center;
245 |             padding: 50px 20px;
246 |             transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
247 |         }
248 |         .open-menu 
249 |         {
250 |             right:0;
251 |             transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1)
252 |         }
253 |         .nav-link 
254 |         {
255 |             display: block;
256 |             margin: 1rem 0;
257 |         }
258 |         .home-content{
259 |           width: 100%;
260 |         }
261 |       }
262 |       /* responsiveness ends */
263 |     </style>
264 |   </head>
265 | 
266 |   <body>
267 |     <!--header starts-->
268 |     <header>
269 |       <div class="nav container">
270 |         
271 |         <a class="logo" href="/"><img src="/images/logo.png" alt="" height="60px" width="60px"> Khel Sethu</a>
272 |         
273 |         <ul class="navbar">
274 |           <li><a href="/" class="nav-link">Home</a></li>
275 |           
276 |           <li><a href="/#events" class="nav-link">Events</a></li>
277 |           
278 |           <li><a href="/about" class="nav-link">Our Team</a></li>
279 |           <li><a href="/contactUs" class="nav-link" target="_blank">Contact-Us</a></li>
280 |           <li><a href="/loginUser" class="nav-link">Login</a></li>
281 |           <li><a href="/registerUser" class="nav-link">Sign-Up</a></li>
282 |         </ul>
283 |         <div class="menu-icon">
284 |           <div class="line1"></div>
285 |           <div class="line2"></div>
286 |           <div class="line3"></div>
287 |         </div>
288 |       </div>
289 |     </header>
290 |     <!--header starts-->
291 |     <!--main page starts-->
292 |     <section class="home container" id="home">
293 |         <div class="home-content">
294 |             <form action="/login" method="post">
295 |                 <!-- Email input -->
296 |                 <div class="form-outline mb-4">
297 |                   <!-- <label class="form-label" for="form2Example1">Email address</label>   -->
298 |                   <input type="email" name="email" id="form2Example1" class="form-control" placeholder="Email"/>
299 |                 </div>
300 |               
301 |                 <!-- Password input -->
302 |                 <div class="form-outline mb-4">
303 |                   <!-- <label class="form-label" for="form2Example2">Password</label>   -->
304 |                   <input type="password" name="password" id="form2Example2" class="form-control" placeholder="Password" />
305 |                 </div>
306 |               
307 |                 <!-- Submit button -->
308 |                 <button type="submit"  id="btn" class="btn btn-block mb-4">Login</button>
309 |               
310 |                 <!-- Register buttons -->
311 |                 <div class="text-center">
312 |                   <p>Not a member? <a href="/registerUser">Sign-Up</a></p>
313 |                   
314 |                 </div>
315 |               </form>
316 |         </div>
317 |     </section>
318 |     <!--main page ended--> 
319 |     <!--link to js-->
320 |     <script src="js/index.js"></script>
321 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
322 |   </body>
323 | </html>
324 | 


--------------------------------------------------------------------------------
/views/details.ejs:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |   <title>Khel Sethu-Events</title>
  8 | 
  9 | 
 10 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
 11 |     integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
 12 |     crossorigin="anonymous"></script>
 13 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
 14 |     integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
 15 |   <link rel="icon" href="images/logo.png" type="image/icon type" />
 16 |   <style>
 17 |     @import url("https://fonts.googleapis.com/css?family=Poppins");
 18 | 
 19 |     * {
 20 |       margin: 0;
 21 |       padding: 0;
 22 |       font-family: "Poppins", sans-serif;
 23 |     }
 24 | 
 25 |     body {
 26 |       background-image: url("/images/bck1.jpeg");
 27 |       background-repeat: no-repeat;
 28 |       background-size: 100% 100%;
 29 |       background-position: center;
 30 |       /* display: flex; */
 31 |       justify-content: center;
 32 |       align-items: center;
 33 |       max-width: -webkit-fill-available;
 34 |       height: max-content;
 35 |       min-height: 100vh;
 36 | 
 37 |     }
 38 | 
 39 |     a {
 40 |       font-weight: 300;
 41 |       text-decoration: none;
 42 |     }
 43 | 
 44 |     li {
 45 |       list-style: none;
 46 |     }
 47 | 
 48 |     /*Header starts*/
 49 |     header {
 50 |       position: fixed;
 51 |       top: 0;
 52 |       left: 0;
 53 |       width: 100%;
 54 |       z-index: 100;
 55 |     }
 56 | 
 57 |     .container {
 58 |       max-width: 960px;
 59 |       margin: auto;
 60 |       width: 100%;
 61 |     }
 62 | 
 63 |     .header-active {
 64 |       background-color: white;
 65 |       transition: 0.4s;
 66 |       height: 80px;
 67 |     }
 68 | 
 69 |     .nav {
 70 |       display: flex;
 71 |       justify-content: space-between;
 72 |       align-items: center;
 73 |       padding: 20px 0;
 74 |     }
 75 | 
 76 |     .logo {
 77 |       font-size: 2rem;
 78 |       font-weight: 800;
 79 |       position: relative;
 80 |       top: -10px;
 81 |       color: rgb(63, 2, 63);
 82 |     }
 83 | 
 84 |     .navbar {
 85 |       display: flex;
 86 |       align-items: center;
 87 |       column-gap: 1.5rem;
 88 |     }
 89 | 
 90 |     .nav-link {
 91 |       font-weight: bold;
 92 |       color: rgb(63, 2, 63);
 93 | 
 94 |       font-size: 1rem;
 95 |       padding: 4px 8px;
 96 |       border-radius: 0.2rem;
 97 |     }
 98 | 
 99 |     .nav-link:hover {
100 |       background-color: rgb(63, 2, 63);
101 |       border: 1px solid rgb(63, 2, 63);
102 |       color: white;
103 | 
104 |       transition: 0.3s all linear;
105 |     }
106 | 
107 |     /*Header ends*/
108 |     /* menu icon starts */
109 |     .menu-icon {
110 |       display: none;
111 |       flex-direction: column;
112 |       align-items: center;
113 |       justify-content: center;
114 |       row-gap: 5px;
115 |       cursor: pointer;
116 |       z-index: 200;
117 |       transition: 0.3s;
118 |     }
119 | 
120 |     .menu-icon div {
121 |       display: block;
122 |       background: rgb(63, 2, 63);
123 |       height: 2px;
124 |       width: 24px;
125 |       transition: 0.3s;
126 |     }
127 | 
128 |     .move .line1 {
129 |       transform: rotate(-45deg) translate(-5px, 5px);
130 |     }
131 | 
132 |     .move .line2 {
133 |       opacity: 0;
134 |     }
135 | 
136 |     .move .line3 {
137 |       transform: rotate(45deg) translate(-5px, -5px);
138 |     }
139 | 
140 |     /* menu-icon ends */
141 | 
142 | 
143 | 
144 |     .full {
145 |       background-color: #fff;
146 |       width: 75%;
147 |       margin: auto;
148 |     }
149 | 
150 |     .outoutsp {
151 |       margin-top: 95px;
152 |       background-color: #fff;
153 |       margin-left: 10%;
154 |       width: 75%;
155 |       height: 325px;
156 |     }
157 | 
158 |     .outsp {
159 | 
160 |       display: grid;
161 |       grid-template-columns: auto 1fr;
162 | 
163 |     }
164 | 
165 |     .outsp .left img {
166 |       width: 228px;
167 |       height: 295px;
168 |       padding: 50px 2px 50px 10px;
169 | 
170 |     }
171 | 
172 | 
173 | 
174 |     .right {
175 |       display: grid;
176 |       grid-template-columns: repeat(2, 1fr);
177 |       margin-left: 20%;
178 |       
179 |       margin-top: 50px;
180 |     }
181 | 
182 |     .right span {
183 |       padding: 10px;
184 |     }
185 | 
186 |     .form {
187 |       margin-top: 20px;
188 |     }
189 | 
190 |     .subbtn {
191 |       width: 120px;
192 |       justify-content: center;
193 |       position: relative;
194 |       left: 0%;
195 |       padding: 6px;
196 |       border-radius: 10px;
197 |       background-color: rgb(63, 2, 63);
198 |       color: #fff;
199 |     }
200 | 
201 |     .subbtn:hover {
202 |       background-color: purple;
203 |     }
204 | 
205 | 
206 |     .form input {
207 |       padding: 20px;
208 |       height: 25px;
209 |       margin: 15px;
210 |       border-radius: 7px;
211 |     }
212 | 
213 |     @media (max-width: 990px) {
214 |       .container {
215 |         margin: 0 auto;
216 |         width: 90%;
217 |       }
218 |     }
219 | 
220 |     @media (max-width: 892px) {
221 |       section {
222 |         padding: 2rem 0;
223 |       }
224 | 
225 |       .nav {
226 |         padding: 12px 0;
227 |       }
228 | 
229 |       .menu-icon {
230 |         display: flex;
231 |       }
232 | 
233 |       .navbar {
234 |         position: absolute;
235 |         top: 0;
236 |         right: -100%;
237 |         width: 300px;
238 |         height: 70vh;
239 |         background: #fff;
240 |         display: flex;
241 |         flex-direction: column;
242 |         align-items: center;
243 |         padding: 50px 20px;
244 |         transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
245 |       }
246 | 
247 | 
248 |       .open-menu {
249 |         right: 0;
250 |         transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
251 |       }
252 | 
253 |       .full {
254 |         margin: 20px auto;
255 |       }
256 |     }
257 | 
258 |     @media (max-width: 775px) {
259 |       main {
260 |         height: -webkit-fill-available;
261 |       }
262 | 
263 |       .logo {
264 |         font-size: 1.1rem;
265 |         top: 0px;
266 |       }
267 | 
268 |       .menu-icon {
269 |         display: flex;
270 |       }
271 | 
272 |       .navbar {
273 |         position: absolute;
274 |         top: 0;
275 |         right: -100%;
276 |         width: 300px;
277 |         height: 70vh;
278 |         background: #fff;
279 |         display: flex;
280 |         flex-direction: column;
281 |         align-items: center;
282 |         padding: 50px 20px;
283 |         transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
284 |       }
285 | 
286 |       .open-menu {
287 |         right: 0;
288 |         transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
289 |       }
290 | 
291 |       .nav-link {
292 |         display: block;
293 |         margin: 1rem 0;
294 |       }
295 | 
296 |       .full {
297 |         margin: 120px auto;
298 |       }
299 |     }
300 | 
301 | 
302 | 
303 |     @media (max-width:775px) {
304 |       .outoutsp {
305 |         height: auto;
306 |         width: 90%;
307 |         margin-left: 5%;
308 |         margin-top: 30px;
309 |       }
310 | 
311 |       .outsp .left {
312 |         height: max-content;
313 |       }
314 | 
315 |       .outsp {
316 |         grid-template-columns: 1fr;
317 |       }
318 | 
319 |       .outsp .left img {
320 |         width: 95%;
321 |         height: 50%;
322 |         padding: 20px 0px 0px 17px;
323 |       }
324 | 
325 | 
326 |       .right {
327 |         
328 |         margin-left: 0%;
329 |         margin-top: auto;
330 |       }
331 | 
332 |       .outsp .right p {
333 |         padding: 5px 50px 50px 50px;
334 |         line-height: 3.2rem;
335 |       }
336 | 
337 |       .form {
338 |         margin-top: 20px;
339 |       }
340 | 
341 |       .full {
342 |         margin: 120px auto;
343 |       }
344 |       .qr{
345 |         width: -webkit-fill-available;
346 |       }
347 |     }
348 |   </style>
349 | 
350 | </head>
351 | 
352 | <body>
353 |   <main>
354 |     <header class="header-active">
355 |       <a href="/" class="scroll-top">
356 |         <i class="bx bx-up-arrow-alt"></i>
357 |       </a>
358 | 
359 |       <div class="nav container">
360 |         <a class="logo" href="#"><img src="/images/logo.png" height="60px" width="60px"> Khel Sethu</a>
361 |         <ul class="navbar">
362 |           <li><a href="/" class="nav-link">Home</a></li>
363 | 
364 |           <li><a href="/checkevents" class="nav-link">Events</a></li>
365 |           <li><a href="/about" class="nav-link">Our Team</a></li>
366 |           <li>
367 |             <a href="/contactUs" target="_blank" class="nav-link">Contact-Us</a>
368 |           </li>
369 |           <% var Currentuser=JSON.parse(localStorage.getItem("users")) %>
370 |             <% if(Currentuser==null) { %>
371 |               <li><a href="/loginUser" class="nav-link">Login</a></li>
372 |               <li><a href="/registerUser" class="nav-link">Sign-Up</a></li>
373 |               <% } %>
374 |                 <% if(Currentuser!=null) { %>
375 |                   <li><a href="/logout" class="nav-link">Logout</a></li>
376 |                   <li>
377 |                     <a href="/" class="nav-link">
378 |                       <%= Currentuser.username %>
379 |                     </a>
380 |                   </li>
381 |                   <% } %>
382 |         </ul>
383 |         <div class="menu-icon">
384 |           <div class="line1"></div>
385 |           <div class="line2"></div>
386 |           <div class="line3"></div>
387 |         </div>
388 |       </div>
389 |     </header>
390 |     <!--header ends-->
391 | 
392 |     <div class="full">
393 |       <div class="outoutsp">
394 | 
395 |         <div class="outsp">
396 |           <div class="left">
397 |             <img src="<%=event.photo%>">
398 |           </div>
399 |           <div class="right">
400 |             <span>Date: <%=event.dateStart.toLocaleDateString()%></span>
401 |             <span>Name: <%=event.name%></span>
402 |             <span>Time: <%=event.time%></span>
403 |             <span>Mode: <%=event.mode%></span>
404 |             <span>Venue: <%=event.venue%></span>
405 |             <span>Registration Fee: <%=event.registerationFee%></span>
406 |             <span>Cash Prize: <%=event.cashPrice%></span>
407 |             <span>Cash Prize: <%=event.contact%></span>
408 |           </div>
409 | 
410 |         </div>
411 |       </div>
412 |       <div class="form">
413 |         <center>
414 |           <h3>Register By Submitting The Form</h3><br>
415 |           <form action="/testing" method="POST">
416 |             <input type="text" placeholder="Name" name="name" required><br>
417 |             <input type="email" placeholder="Email" name="email" required><br>
418 |             <input type="number" placeholder="Mobile No" name="mobile" required><br>
419 |             <input type="text" placeholder="Event Name" name="events" required><br>
420 |             <input type="number" placeholder="Amount" name="amount" required> <br>
421 |             <input type="text" placeholder="Enter Transaction Id" name="transactionid" required> <br><br>
422 |             <label for="Year Of Study">Year Of Study</label>
423 |             <select name="yos" id="yos" placeholder="Year Of Study">
424 |               <option value="I">I</option>
425 |               <option value="II">II</option>
426 |               <option value="III">III</option>
427 |               <option value="IV">IV</option>
428 | 
429 |             </select>
430 |             <br><br>
431 | 
432 |             <img src="/images/qr.jpg" alt="Qrcode" height="300px" width="300px" class="qr" download>
433 |             <br>
434 |             <br>
435 |             <button type="submit" class="subbtn">Submit</button>
436 | 
437 | 
438 | 
439 |           </form>
440 |         </center><br><br>
441 |       </div>
442 |     </div>
443 |     <br><br>
444 |     <script src="/js/index.js"></script>
445 | </body>
446 | 
447 | </html>


--------------------------------------------------------------------------------
/views/events.ejs:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |   <title>Khel Sethu-Events</title>
  8 | 
  9 |   <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
 10 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
 11 |     integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
 12 |     <script
 13 |     src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js"
 14 |     integrity="sha512-2bMhOkE/ACz21dJT8zBOMgMecNxx0d37NND803ExktKiKdSzdwn+L7i9fdccw/3V06gM/DBWKbYmQvKMdAA9Nw=="
 15 |     crossorigin="anonymous"
 16 |     referrerpolicy="no-referrer"
 17 |   ></script>
 18 |   <link rel="icon" href="images/logo.png" type="image/icon type" />
 19 |   <style>
 20 |     body {
 21 |       /* background-color: rgb(63, 2, 63); */
 22 |       background-image: url("images/bck1.jpeg");
 23 |       background-repeat: no-repeat;
 24 |       background-size: 100% 100%;
 25 |       background-position: center;
 26 |       /* height: 100vh; */
 27 |     }
 28 | 
 29 |     /* header starts */
 30 |     a {
 31 |       font-weight: 300;
 32 |       text-decoration: none;
 33 |     }
 34 | 
 35 |     li {
 36 |       list-style: none;
 37 | 
 38 |     }
 39 | 
 40 |     /*Header starts*/
 41 |     header {
 42 |       position: fixed;
 43 |       top: 0;
 44 |       left: 0;
 45 |       width: 100%;
 46 |       z-index: 100;
 47 |     }
 48 | 
 49 |     .container {
 50 |       max-width: 960px;
 51 |       margin: auto;
 52 |       width: 100%;
 53 |     }
 54 | 
 55 |     .header-active {
 56 |       background-color: white;
 57 |       transition: 0.4s;
 58 |       height: 80px;
 59 |     }
 60 | 
 61 |     .nav {
 62 |       display: flex;
 63 |       justify-content: space-between;
 64 |       align-items: center;
 65 |       padding: 20px 0;
 66 |     }
 67 | 
 68 |     .logo {
 69 |       font-size: 2rem;
 70 |       font-weight: 800;
 71 |       position: relative;
 72 |       top: -10px;
 73 |       color: rgb(63, 2, 63);
 74 |     }
 75 | 
 76 |     .navbar {
 77 |       display: flex;
 78 |       align-items: center;
 79 |       column-gap: 1.5rem;
 80 |     }
 81 | 
 82 |     .nav-link {
 83 |       font-weight: bold;
 84 |       color: rgb(63, 2, 63);
 85 | 
 86 |       font-size: 1rem;
 87 |       padding: 4px 8px;
 88 |       border-radius: 0.2rem;
 89 |     }
 90 | 
 91 |     .nav-link:hover {
 92 |       background-color: rgb(63, 2, 63);
 93 |       border: 1px solid rgb(63, 2, 63);
 94 |       color: white;
 95 |       /* color: white;
 96 |         background: rgb(63, 2, 63); */
 97 |       transition: 0.3s all linear;
 98 |     }
 99 | 
100 |     /*Header ends*/
101 |     /* menu icon starts */
102 |     .menu-icon {
103 |       display: none;
104 |       flex-direction: column;
105 |       align-items: center;
106 |       justify-content: center;
107 |       row-gap: 5px;
108 |       cursor: pointer;
109 |       z-index: 200;
110 |       transition: 0.3s;
111 |     }
112 | 
113 |     .menu-icon div {
114 |       display: block;
115 |       background: rgb(63, 2, 63);
116 |       ;
117 |       height: 2px;
118 |       width: 24px;
119 |       transition: 0.3s;
120 |     }
121 | 
122 |     .move .line1 {
123 | 
124 |       transform: rotate(-45deg) translate(-5px, 5px);
125 |     }
126 | 
127 |     .move .line2 {
128 |       opacity: 0;
129 |     }
130 | 
131 |     .move .line3 {
132 |       transform: rotate(45deg) translate(-5px, -5px);
133 |     }
134 | 
135 |     /* menu icon ends */
136 |     .scroll-top {
137 |       position: fixed;
138 |       bottom: 0%;
139 |       background-color: rgb(63, 2, 63);
140 |       color: white;
141 |       border-radius: 50%;
142 |       right: 1.5rem;
143 | 
144 |     }
145 | 
146 |     .scroll-active {
147 |       bottom: 2rem;
148 |     }
149 | 
150 |     .scroll-top .bx {
151 |       padding: 8px;
152 |       font-size: 1.3rem;
153 |       color: var(--main-color);
154 |       background: var(--box-color);
155 |       border-radius: 0.2rem;
156 |     }
157 | 
158 |     .scroll-top .bx:hover {
159 |       background: var(--container-color);
160 |       transition: 0.3s all linear;
161 |       color: var(--bg-color);
162 |     }
163 | 
164 | 
165 |     /* events starts */
166 |     #events {
167 |       margin-top: 50px;
168 |       padding: 8vw 8vw 0 8vw;
169 |       text-align: center;
170 |     }
171 | 
172 |     #events .events-box {
173 |       display: grid;
174 |       grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
175 |       grid-gap: 1rem;
176 |       margin-top: 50px;
177 |     }
178 | 
179 |     #events .events {
180 |       text-align: start;
181 |       background-color: #f9f9ff;
182 |       height: 100%;
183 |       position: relative;
184 |     }
185 | 
186 |     #events .events img {
187 |       width: 100%;
188 |       height: 60%;
189 |       background-size: cover;
190 |       background-position: center;
191 |     }
192 | 
193 |     #events .events .details {
194 |       padding: 15px 15px 0 15px;
195 |       /* margin-bottom: 80px; */
196 |     }
197 | 
198 |     #events .events .cost {
199 |       /* background-color: rgb(74,74,136); */
200 |       background-color: rgb(63, 2, 63);
201 |       color: #fff;
202 |       line-height: 70px;
203 |       width: 70px;
204 |       height: 70px;
205 |       text-align: center;
206 |       border-radius: 50%;
207 |       position: absolute;
208 |       right: 15px;
209 |       bottom: 125px;
210 | 
211 |     }
212 | 
213 |     .regbtn {
214 | 
215 |       border-radius: 7px;
216 |       background-color: rgb(63, 2, 63);
217 |       color: #fff;
218 |       margin-top: 30px;
219 |       height: 45px;
220 |       width: 130px;
221 |     }
222 |     .regbtn:hover{
223 |       background-color: purple;
224 |     }
225 |     /*footer*/
226 |     .footer-basic {
227 |       padding:40px 0;
228 |       background-color:#262525;
229 |       color:white;
230 |     }
231 |     
232 |     .footer-basic ul {
233 |       padding:0;
234 |       list-style:none;
235 |       text-align:center;
236 |       font-size:18px;
237 |       line-height:1.6;
238 |       margin-bottom:0;
239 |     }
240 |     
241 |     .footer-basic li {
242 |       padding:0 10px;
243 |     }
244 |     
245 |     .footer-basic ul a {
246 |       color:inherit;
247 |       text-decoration:none;
248 |       opacity:0.8;
249 |     }
250 |     
251 |     .footer-basic ul a:hover {
252 |       opacity:1;
253 |     }
254 |     
255 |     .footer-basic .social {
256 |       text-align:center;
257 |       padding-bottom:25px;
258 |     }
259 |     
260 |     .footer-basic .social > a {
261 |       font-size:24px;
262 |       width:40px;
263 |       height:40px;
264 |       line-height:40px;
265 |       display:inline-block;
266 |       text-align:center;
267 |       border-radius:50%;
268 |       border:1px solid #ccc;
269 |       margin:0 8px;
270 |       color:inherit;
271 |       opacity:0.75;
272 |     }
273 |     
274 |     .footer-basic .social > a:hover {
275 |       opacity:0.9;
276 |     }
277 |     
278 |     .footer-basic .copyright {
279 |       margin-top:15px;
280 |       text-align:center;
281 |       font-size:13px;
282 |       color:#aaa;
283 |       margin-bottom:0;
284 |     }
285 | 
286 |     /* events ends */
287 |     /* @media (max-width:1400px){
288 |       body{
289 |         height: 100vh;
290 |       }
291 |     } */
292 |     /* responsiveness starts */
293 |     @media (max-width:990px) {
294 |       body {
295 |         height: auto;
296 |       }
297 |     }
298 | 
299 |     @media (max-width:990px) {
300 |       .container {
301 |         margin: 0 auto;
302 |         width: 90%;
303 |       }
304 |     }
305 | 
306 |     @media (max-width:892px) {
307 |       section {
308 |         padding: 2rem 0;
309 |       }
310 | 
311 |       .nav {
312 |         padding: 12px 0;
313 |       }
314 | 
315 |       .menu-icon {
316 |         display: flex;
317 | 
318 |       }
319 | 
320 |       .navbar {
321 |         position: absolute;
322 |         top: 0;
323 |         right: -100%;
324 |         width: 300px;
325 |         height: 70vh;
326 |         background: #fff;
327 |         display: flex;
328 |         flex-direction: column;
329 |         align-items: center;
330 |         padding: 50px 20px;
331 |         transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
332 |       }
333 | 
334 |       .open-menu {
335 |         right: 0;
336 |         transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1)
337 |       }
338 | 
339 | 
340 | 
341 |     }
342 | 
343 |     @media (max-width:775px) {
344 |       main {
345 |         height: -webkit-fill-available;
346 |       }
347 | 
348 |       .logo {
349 |         font-size: 1.1rem;
350 |         top: 0px;
351 | 
352 |       }
353 | 
354 |       .menu-icon {
355 |         display: flex;
356 | 
357 |       }
358 | 
359 |       .navbar {
360 |         position: absolute;
361 |         top: 0;
362 |         right: -100%;
363 |         width: 300px;
364 |         height: 70vh;
365 |         background: #fff;
366 |         display: flex;
367 |         flex-direction: column;
368 |         align-items: center;
369 |         padding: 50px 20px;
370 |         transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
371 |       }
372 | 
373 |       .open-menu {
374 |         right: 0;
375 |         transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1)
376 |       }
377 | 
378 |       .nav-link {
379 |         display: block;
380 |         margin: 1rem 0;
381 |       }
382 |       #events .events{
383 |         margin-top: 20px;
384 |         margin-bottom: 20px;
385 |       }
386 |       #events .events .details{
387 |         padding: 15px 15px 50px 15px;
388 |       }
389 |     }
390 | 
391 |     /* responsiveness ends */
392 |   </style>
393 | </head>
394 | 
395 | <body>
396 |   <!--header starts-->
397 |   <main>
398 |     <header class="header-active">
399 | 
400 |       <a href="/" class="scroll-top">
401 |         <i class='bx bx-up-arrow-alt'></i>
402 |       </a>
403 | 
404 |       <div class="nav container">
405 |         <a class="logo" href="#"><img src="/images/logo.png" height="60px" width="60px"> Khel Sethu</a>
406 |         
407 |         <ul class="navbar">
408 |           <li><a href="/" class="nav-link">Home</a></li>
409 | 
410 | 
411 |           <li><a href="#events" class="nav-link">Events</a></li>
412 |           <li><a href="/about" class="nav-link">Our Team</a></li>
413 |           <li><a href="/contactUs" target="_blank" class="nav-link">Contact-Us</a></li>
414 |           <% var Currentuser=JSON.parse(localStorage.getItem("users")) %> <%
415 |             if(Currentuser==null) { %>
416 |           <li><a href="/loginUser" class="nav-link">Login</a></li>
417 |           <li><a href="/registerUser" class="nav-link">Sign-Up</a></li>
418 |           <% } %> <% if(Currentuser!=null) { %>
419 |             <li><a href="/logout" class="nav-link">Logout</a></li>
420 |             <li>
421 |               <a href="#" class="nav-link"
422 |                 ><%= Currentuser.username %></a
423 |               >
424 |             </li>
425 |             <% } %>
426 |         </ul>
427 |         <div class="menu-icon">
428 |           <div class="line1"></div>
429 |           <div class="line2"></div>
430 |           <div class="line3"></div>
431 |         </div>
432 |       </div>
433 |     </header>
434 |     <!--header ends-->
435 |    
436 | 
437 |     <!-- Events starts -->
438 |     <section id="events">
439 |       <!-- <h1>Events</h1> -->
440 |       <p>Come and grab the opportunity to prove yourselves. Check out all the ongoing and upcomming events here.</p>
441 |       <div class="events-box">
442 |         <% for(var i=0;i<event.length;i++) { %>
443 |         <div class="events">
444 |           <img src="<%=event[i].photo%>">
445 |           <div class="details">
446 |             <span>Name: <%= event[i].name %></span>
447 |            
448 |             <h6>Date:<%= event[i].dateStart.toLocaleDateString() %> </h6>
449 |             <% if(Currentuser!=null) { %>
450 |               <center>
451 |                 <button onclick="location.href='/fetchdetails/<%=event[i]._id%>'" class="regbtn">
452 |                   View Details <i class="fa fa-arrow-right"></i>
453 |                 </button>
454 |               </center>
455 |               <% } %> <% if(Currentuser==null) { %>
456 |               <center>
457 |                 <button onclick="location.href='/loginUser'" class="regbtn">
458 |                   View Details <i class="fa fa-arrow-right"></i>
459 |                 </button>
460 |               </center>
461 |               <% } %>
462 |            
463 | 
464 |           </div>
465 |           <div class="cost">
466 |             <p>Rs. <%= event[i].registerationFee %></p>
467 |           </div>
468 |         </div>
469 |         <% } %>
470 |       </div>
471 | 
472 |     </section>
473 |     <br><br><br>
474 |     <!-- Events ends -->
475 |     <!--footer started-->
476 |     <div class="footer-basic">
477 |       <footer>
478 |           <div class="social"><a href="https://www.instagram.com/prem._.pkk/"><i class="fa-brands fa-instagram"></i></i></a><a href="https://www.snapchat.com/prempk.7172"><i class="fa-brands fa-square-snapchat"></i></i></a><a href="https://twitter.com/Prempk2929"><i class="fa-brands fa-twitter"></i></i></a><a href="https://www.facebook.com/profile.php?id=100090794153191"><i class="fa-brands fa-facebook"></i></i></a></div>
479 |         <hr style="height:2px;border-width:0;color:gray;background-color:white">
480 |           <ul class="list-inline">
481 |               <li class="list-inline-item"><a href="/">Home</a></li>
482 |               <li class="list-inline-item"><a href="/checkevents">Events</a></li>
483 |               <li class="list-inline-item"><a href="/about">About-Us</a></li>
484 |               <li class="list-inline-item"><a href="/contactUs" target="_blank">Contact-Us</a></li>
485 |               
486 |           </ul>
487 |           <p class="copyright"> © Khel Sethu </p>
488 |       </footer>
489 |   </div>
490 | 
491 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
492 |       integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
493 |       crossorigin="anonymous"></script>
494 |     <!--link to js-->
495 |     <script src="/js/index.js"></script>
496 | </body>
497 | 
498 | </html>


--------------------------------------------------------------------------------
/views/contact.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 |     <title>Khel Sethu-Contact</title>
  8 |     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
  9 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
 10 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
 11 |     <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
 12 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js"
 13 |         integrity="sha512-2bMhOkE/ACz21dJT8zBOMgMecNxx0d37NND803ExktKiKdSzdwn+L7i9fdccw/3V06gM/DBWKbYmQvKMdAA9Nw=="
 14 |         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 15 |         <link rel="icon" href="images/logo.png" type="image/icon type" />
 16 |     <style>
 17 |         @import url("https://fonts.googleapis.com/css?family=Poppins");
 18 | 
 19 |         * {
 20 |             margin: 0;
 21 |             padding: 0;
 22 |             box-sizing: border-box;
 23 |         }
 24 | 
 25 |         section {
 26 |             display: flex;
 27 |             justify-content: center;
 28 |             align-items: center;
 29 |             min-height: 100vh;
 30 |             background-color: purple;
 31 |         }
 32 | 
 33 |         section::before {
 34 |             content: "";
 35 |             position: absolute;
 36 |             top: 0;
 37 |             left: 0;
 38 |             width: 50%;
 39 |             height: 100%;
 40 | 
 41 |             background-color: #FDFD95;
 42 |         }
 43 | 
 44 |         .container {
 45 |             position: relative;
 46 |             min-width: 1100px;
 47 |             min-height: 550px;
 48 |             display: flex;
 49 |             z-index: 1000;
 50 |             background-color: white;
 51 |         }
 52 | 
 53 |         .container .contactInfo {
 54 |             position: absolute;
 55 |             top: 40px;
 56 |             width: 350px;
 57 |             height: -moz-calc(100% - (80px));
 58 |             height: -webkit-calc(100% - (80px));
 59 |             height: calc(100% - (80px));
 60 |             background-color: purple;
 61 |             z-index: 1;
 62 |             padding: 40px;
 63 |             display: flex;
 64 |             justify-content: center;
 65 |             flex-direction: column;
 66 |             justify-content: space-between;
 67 |             box-shadow: 0 20px 25px rbga(0, 0, 0, 0.15);
 68 |         }
 69 | 
 70 |         .container .contactInfo h2 {
 71 |             color: white;
 72 |             font-size: 24px;
 73 |             font-weight: 500;
 74 |         }
 75 | 
 76 |         .container .contactInfo ul.info {
 77 |             position: relative;
 78 |             margin: 20px 0;
 79 |         }
 80 | 
 81 |         .container .contactInfo ul.info li {
 82 |             position: relative;
 83 |             list-style: none;
 84 |             display: flex;
 85 |             margin: 20px 0;
 86 |             cursor: pointer;
 87 |             align-items: flex-start;
 88 |         }
 89 | 
 90 |         .container .contactInfo ul.info li span:nth-child(1) {
 91 |             width: 30px;
 92 |             min-width: 30px;
 93 |             padding: 20px;
 94 |         }
 95 | 
 96 |         .container .contactInfo ul.info li span:nth-child(1) i {
 97 |             max-width: 100%;
 98 |             filter: invert(1);
 99 | 
100 |         }
101 | 
102 |         .container .contactInfo ul.info li span:nth-child(2) {
103 |             color: white;
104 |             margin-left: 10px;
105 |             font-weight: 300;
106 |             padding: 20px;
107 |         }
108 | 
109 |         .container .contactInfo ul.info {
110 |             color: white;
111 |         }
112 | 
113 |         .container .contactInfo ul.sci {
114 |             position: relative;
115 |             display: flex;
116 |             color: white;
117 |         }
118 | 
119 |         .container .contactInfo ul.sci svg {
120 |             color: white;
121 |             padding: 20px;
122 |         }
123 | 
124 |         .container .contactInfo ul.sci li {
125 |             list-style: none;
126 |             margin-right: 15px;
127 |         }
128 | 
129 |         .container .contactInfo ul.sci li a {
130 |             text-decoration: none;
131 |         }
132 | 
133 |         .container .contactInfo ul.sci li a i {
134 |             filter: invert(1);
135 |         }
136 |         .container .contactForm {
137 |             position: absolute;
138 |             padding: 70px 50px;
139 |             padding-left: 250px;
140 |             margin-left: 150px;
141 |             width: -moz-calc(100% - (150px));
142 |             width: -webkit-calc(100% - (150px));
143 |             width: calc(100% - (150px));
144 |             height: 100%;
145 |             background-color: white;
146 |             box-shadow: 0 50px 50px rgba(0, 0, 0, 0.25);
147 |         }
148 | 
149 |         .container .contactForm h2 {
150 |             color: rgb(63, 2, 63);
151 |             font-size: 24px;
152 |             font-weight: 500;
153 |         }
154 | 
155 |         .container .contactForm .formBox {
156 |             position: relative;
157 |             display: flex;
158 |             justify-content: space-between;
159 |             flex-wrap: wrap;
160 |             padding-top: 30px;
161 |         }
162 | 
163 |         .container .contactForm .formBox .inputBox {
164 |             position: relative;
165 |             margin-bottom: 35px;
166 |         }
167 | 
168 |         .container .contactForm .formBox .inputBox .w50 {
169 |             width: 47%;
170 |         }
171 | 
172 |         .container .contactForm .formBox .inputBox .w100 {
173 |             width: 100%;
174 |         }
175 | 
176 |         .container .contactForm .formBox .inputBox input,
177 |         .container .contactForm .formBox .inputBox textarea {
178 |             width: 100%;
179 |             resize: none;
180 |             padding: 5px 0;
181 |             font-size: 18px;
182 |             font-weight: 300;
183 |             color: #333;
184 |             border: none;
185 |             outline: none;
186 |             border-bottom: 1px solid #777;
187 |         }
188 | 
189 |         .container .contactForm .formBox .inputBox textarea {
190 |             height: 120px;
191 |         }
192 | 
193 |         .container .contactForm .formBox .inputBox span {
194 |             position: absolute;
195 |             left: 0;
196 |             padding: 5px 0;
197 |             font-size: 18px;
198 |             font-weight: 300;
199 |             color: #333;
200 |             pointer-events: none;
201 |             transition: 0.5s;
202 |         }
203 | 
204 |         .container .contactForm .formBox .inputBox input:focus~span,
205 |         .container .contactForm .formBox .inputBox input:valid~span,
206 |         .container .contactForm .formBox .inputBox textarea:focus~span,
207 |         .container .contactForm .formBox .inputBox textarea:valid~span {
208 |             transform: translateY(-20px);
209 |             font-size: 12px;
210 |             font-weight: 400;
211 |             letter-spacing: 1px;
212 |             color: rgb(63, 2, 63);
213 |             font-weight: 500;
214 |         }
215 | 
216 |         .container .contactForm .formBox .inputBox input[type="submit"] {
217 |             position: relative;
218 |             width: 220px;
219 |             max-width: 220px;
220 |             background-color: purple;
221 |             color: white;
222 |             font-size: 18px;
223 |             font-weight: 500;
224 |             border: none;
225 |             outline: none;
226 |             cursor: pointer;
227 |             padding: 12px;
228 |             border-radius: 5px;
229 |             margin-top: 40px;
230 |         }
231 |         .container .contactForm .formBox .inputBox input[type="submit"]:hover {
232 |             background-color: purple;
233 |         }
234 | 
235 |         /* responsive */
236 |         @media (max-width:1200px) {
237 |             .container {
238 |                 width: 90%;
239 |                 min-width: auto;
240 |                 margin: 20px;
241 |                 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
242 |             }
243 | 
244 |             .contactInfo {
245 |                 top: 0;
246 |                 height: 550px;
247 |                 position: relative;
248 |                 box-shadow: none;
249 |             }
250 | 
251 |             .container .contactForm {
252 |                 position: relative;
253 |                 width: -moz-calc(100% - (350px));
254 |                 width: -webkit-calc(100% - (350px));
255 |                 width: calc(100% - (350px));
256 |                 padding-left: 0;
257 |                 margin-left: 350px;
258 |                 padding: 40px;
259 |                 height: 550px;
260 |                 box-shadow: none;
261 | 
262 |             }
263 |         }
264 | 
265 |         @media (max-width:991px) {
266 |             section {
267 |                 background-color: #91e0ff;
268 |             }
269 | 
270 |             section::before {
271 |                 display: none;
272 |             }
273 | 
274 |             .container {
275 |                 display: flex;
276 |                 flex-direction: column-reverse;
277 |             }
278 | 
279 |             .container .contactForm {
280 |                 width: 100%;
281 |                 height: auto;
282 |                 margin-left: 0%;
283 |             }
284 | 
285 |             .container .contactInfo {
286 |                 width: 100%;
287 |                 height: auto;
288 |                 position: initial;
289 |                 flex-direction: row;
290 |             }
291 | 
292 |             .container .contactInfo ul.sci {
293 |                 position: relative;
294 |                 display: flex;
295 |                 justify-content: center;
296 |                 align-items: center;
297 |             }
298 | 
299 |         }
300 | 
301 |         @media (max-width:600px) {
302 |             .container .contactForm {
303 |                 padding: 25px;
304 |             }
305 | 
306 |             .container .contactInfo {
307 |                 padding: 25px;
308 |                 flex-direction: column;
309 |                 align-items: center;
310 |             }
311 | 
312 |             .container .contactInfo ul.sci {
313 |                 margin-top: 40px;
314 |             }
315 | 
316 |             .container .contactForm .formBox .inputBox .w50 {
317 |                 width: 100%;
318 |             }
319 |         }
320 |     </style>
321 | </head>
322 | 
323 | <body>
324 |     <section>
325 |         <div class="container">
326 |             <div class="contactInfo">
327 |                 <div>
328 |                     <h2>Contact Info</h2>
329 |                     <ul class="info">
330 |                         <li>
331 |                             <span><i class="fa fa fa-location-dot"></i></span>
332 |                             <span>
333 |                                 CSE Vignan Institute <br />
334 |                                 Duvvada, Visakhapatnam<br />
335 |                                 530032
336 |                             </span>
337 |                         </li>
338 |                         <li>
339 |                             <span><i class="fa fa fa-envelopes-bulk"></i></span>
340 |                             <span> viitduvvada@gmail.com </span>
341 |                         </li>
342 |                         <li>
343 |                             <span><i class="fa-solid fa-phone-volume"></i></span>
344 |                             <span> 9177205289 </span>
345 |                         </li>
346 |                     </ul>
347 |                 </div>
348 |                 <ul class="sci">
349 |                     <li>
350 |                         <a href="https://www.facebook.com/profile.php?id=100090794153191"><i class="fab fa-facebook"></i></a>
351 |                     </li>
352 |                     <li>
353 |                         <a href="https://twitter.com/Prempk2929"><i class="fab fa-twitter"></i></a>
354 |                     </li>
355 |                     <li>
356 |                         <a href="https://www.instagram.com/prem._.pkk/"><i class="fab fa-instagram"></i></a>
357 |                     </li>
358 |                 </ul>
359 |             </div>
360 |             <form action="">
361 |                 <div class="contactForm">
362 |                     <h2>Send a message</h2>
363 |                     <div class="formBox">
364 |                         <div class="inputBox w50">
365 |                             <input type="text" class="name" required />
366 |                             <span>First Name</span>
367 |                         </div>
368 |                         <div class="inputBox w50">
369 |                             <input type="text" required />
370 |                             <span>Last Name</span>
371 |                         </div>
372 |                         <div class="inputBox w50">
373 |                             <input type="email" class="email" required />
374 |                             <span>Email Address</span>
375 |                         </div>
376 |                         <div class="inputBox w50">
377 |                             <input type="text" required />
378 |                             <span>Mobile Number</span>
379 |                         </div>
380 |                         <div class="inputBox w100">
381 |                             <textarea required class="message"></textarea>
382 |                             <span>Write your message here.....</span>
383 |                         </div>
384 |                         <div class="inputBox w100">
385 |                             <% var Currentuser=JSON.parse(localStorage.getItem("users")) %> <%
386 |                             if(Currentuser!=null) { %>
387 |                                <input type="submit" value="Send" class="send-btn" />
388 |                               <% } %>
389 |                               <% if(Currentuser==null) { %>
390 |                                 <input type="submit" value="Send" onclick="alert('Please Login to send message')" />
391 |                             <% } %> 
392 |                         </div>
393 |                     </div>
394 |             </form>
395 |             <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
396 |             <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
397 |             <script type="text/javascript">
398 |             (function() {
399 |                 emailjs.init('t_qh85c_gS50ZMM08');
400 |             })();
401 |     </script>
402 |     <script src="js/script.js"></script>
403 | 
404 |         </div>
405 |         </div>
406 |         </div>
407 |     </section>
408 | </body>
409 | 
410 | </html>


--------------------------------------------------------------------------------
/views/about.ejs:
--------------------------------------------------------------------------------
  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" />
  6 |     <title>Khel sethu</title>
  7 |     <link
  8 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
  9 |       rel="stylesheet"
 10 |       integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
 11 |       crossorigin="anonymous"
 12 |     />
 13 | 
 14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" integrity="sha256-2XFplPlrFClt0bIdPgpz8H7ojnk10H69xRqd9+uTShA=" crossorigin="anonymous" />
 15 | 
 16 |     <link rel="icon" href="images/logo.png" type="image/icon type" />
 17 |     <script
 18 |     src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js"
 19 |     integrity="sha512-2bMhOkE/ACz21dJT8zBOMgMecNxx0d37NND803ExktKiKdSzdwn+L7i9fdccw/3V06gM/DBWKbYmQvKMdAA9Nw=="
 20 |     crossorigin="anonymous"
 21 |     referrerpolicy="no-referrer"
 22 |   ></script>
 23 |     <style>
 24 |         body{margin-top:20px;
 25 |             background-image: url("images/bck1.jpeg");
 26 |             background-repeat: no-repeat;
 27 |       background-size: 100% 100%;
 28 |       background-position: center;
 29 |       height: auto;
 30 | 
 31 | }
 32 | section {
 33 |         padding: 3rem 0 2rem;
 34 |       }
 35 | 
 36 |       main {
 37 |         
 38 |         background-repeat: no-repeat;
 39 |         background-size: 100% 100%;
 40 |         background-position: center;
 41 |         height: 100vh;
 42 |       }
 43 | 
 44 |       a {
 45 |         font-weight: 300;
 46 |         text-decoration: none;
 47 |       }
 48 | 
 49 |       li {
 50 |         list-style: none;
 51 |       }
 52 | 
 53 |       /*Header starts*/
 54 |       header {
 55 |         position: fixed;
 56 |         top: 0;
 57 |         left: 0;
 58 |         width: 100%;
 59 |         z-index: 100;
 60 |       }
 61 | 
 62 |       .container {
 63 |         max-width: 960px;
 64 |         margin: auto;
 65 |         width: 100%;
 66 |       }
 67 | 
 68 |       .header-active {
 69 |         background-color: white;
 70 |         transition: 0.4s;
 71 |         height: 80px;
 72 |       }
 73 | 
 74 |       .nav {
 75 |         display: flex;
 76 |         justify-content: space-between;
 77 |         align-items: center;
 78 |         padding: 20px 0;
 79 |       }
 80 | 
 81 |       .logo {
 82 |         font-size: 2rem;
 83 |         font-weight: 800;
 84 |         position: relative;
 85 |         top: -10px;
 86 |         color: rgb(63, 2, 63);
 87 |       }
 88 | 
 89 |       .navbar {
 90 |         display: flex;
 91 |         align-items: center;
 92 |         column-gap: 1.5rem;
 93 |       }
 94 | 
 95 |       .nav-link {
 96 |         font-weight: bold;
 97 |         color: rgb(63, 2, 63);
 98 | 
 99 |         font-size: 1rem;
100 |         padding: 4px 8px;
101 |         border-radius: 0.2rem;
102 |       }
103 | 
104 |       .nav-link:hover {
105 |         background-color: rgb(63, 2, 63);
106 |         border: 1px solid rgb(63, 2, 63);
107 |         color: white;
108 |         /* color: white;
109 |         background: rgb(63, 2, 63); */
110 |         transition: 0.3s all linear;
111 |       }
112 | 
113 |       /*Header ends*/
114 |       /* menu icon starts */
115 |       .menu-icon {
116 |         display: none;
117 |         flex-direction: column;
118 |         align-items: center;
119 |         justify-content: center;
120 |         row-gap: 5px;
121 |         cursor: pointer;
122 |         z-index: 200;
123 |         transition: 0.3s;
124 |       }
125 | 
126 |       .menu-icon div {
127 |         display: block;
128 |         background: rgb(63, 2, 63);
129 |         height: 2px;
130 |         width: 24px;
131 |         transition: 0.3s;
132 |       }
133 | 
134 |       .move .line1 {
135 |         transform: rotate(-45deg) translate(-5px, 5px);
136 |       }
137 | 
138 |       .move .line2 {
139 |         opacity: 0;
140 |       }
141 | 
142 |       .move .line3 {
143 |         transform: rotate(45deg) translate(-5px, -5px);
144 |       }
145 | 
146 |      
147 | 
148 |       
149 | 
150 |       /* menu-icon ends */
151 | 
152 | .team-style1 {
153 |     position: relative;
154 | }
155 | 
156 | .team-style1 .team-img {
157 |     position: relative;
158 |     border-radius: 0.25rem;
159 |     overflow: hidden;
160 |     border: 1px solid rgba(0, 0, 0, 0.09);
161 |     text-align: center;
162 |     
163 | }
164 | .team-style1 .team-img img {
165 |     display: inline-block;
166 |     width: -webkit-fill-available;
167 |     height: auto;
168 | 
169 | }
170 | .team-style1 .team-social-icon {
171 |     position: absolute;
172 |     top: 0;
173 |     overflow: hidden;
174 |     width: auto;
175 |     display: block;
176 |     transition: all 0.3s ease-in-out;
177 |     z-index: 9;
178 | }
179 | .team-style1 .team-social-icon ul {
180 |     list-style: none;
181 |     padding: 0;
182 |     transition: all 0.3s ease-in-out;
183 |     margin: 20px;
184 | }
185 | .team-style1 .team-social-icon ul li {
186 |     margin-bottom: 8px;
187 | }
188 | .team-style1 .team-social-icon ul li:last-child {
189 |     margin-bottom: 0;
190 | }
191 | .team-style1 .team-social-icon ul li a {
192 |     background-color: #fff;
193 |     color: purple;
194 |     font-size: 15px;
195 |     display: inline-block;
196 |     height: 36px;
197 |     border-radius: 0.25rem;
198 |     width: 36px;
199 |     border: 1px solid rgba(0, 73, 118, 0.41);
200 |     line-height: 36px;
201 |     text-decoration: none;
202 |     text-align: center;
203 |     transition: all 0.3s ease 0s;
204 | }
205 | .team-style1 .team-social-icon ul li a:hover {
206 |     background: purple;
207 |     color: #fff;
208 |     border: 1px solid purple;
209 | }
210 | .team-style1 .team-info {
211 |     position: absolute;
212 |     width: 100%;
213 |     bottom: 0;
214 |     padding: 20px;
215 |     /* background: #00baee; */
216 |     background-color: #FDFD95;
217 |     
218 |     text-align: center;
219 |     border-bottom-right-radius: 0.25rem;
220 |     border-bottom-left-radius: 0.25rem;
221 | }
222 | .team-style1 .team-info h6 {
223 |     display: block;
224 |     /* color: #fff; */
225 |     color: purple;
226 |     text-transform: capitalize;
227 | }
228 | .team-style1 .team-info small {
229 |     display: block;
230 |     color: purple;
231 | }
232 | /*footer*/
233 | @media (max-width: 990px) {
234 |         .container {
235 |           margin: 0 auto;
236 |           width: 90%;
237 |         }
238 |       }
239 | 
240 | @media screen and (max-width: 991px) {
241 |     .team-style1 .team-info {
242 |         padding: 15px;
243 |     }
244 | }
245 | @media screen and (max-width: 575px) {
246 |     .team-style1 .team-social-icon ul li a {
247 |         width: 30px;
248 |         height: 30px;
249 |         line-height: 30px;
250 |         font-size: 13px;
251 |     }
252 | }
253 | @media (max-width: 892px) {
254 |         section {
255 |           padding: 2rem 0;
256 |         }
257 | 
258 |         .nav {
259 |           padding: 12px 0;
260 |         }
261 | 
262 |         .menu-icon {
263 |           display: flex;
264 |         }
265 | 
266 |         .navbar {
267 |           position: absolute;
268 |           top: 0;
269 |           right: -100%;
270 |           width: 300px;
271 |           height: 70vh;
272 |           background: #fff;
273 |           display: flex;
274 |           flex-direction: column;
275 |           align-items: center;
276 |           padding: 50px 20px;
277 |           transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
278 |         }
279 | 
280 |         .open-menu {
281 |           right: 0;
282 |           transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
283 |         }
284 |       }
285 | 
286 |       @media (max-width: 775px) {
287 |         #block{
288 |             margin: 5px;
289 |         }
290 |         main {
291 |           height: -webkit-fill-available;
292 |         }
293 | 
294 |         .logo {
295 |           font-size: 1.1rem;
296 |           top: 0px;
297 |         }
298 | 
299 |         .menu-icon {
300 |           display: flex;
301 |         }
302 | 
303 |         .navbar {
304 |           position: absolute;
305 |           top: 0;
306 |           right: -100%;
307 |           width: 300px;
308 |           height: 70vh;
309 |           background: #fff;
310 |           display: flex;
311 |           flex-direction: column;
312 |           align-items: center;
313 |           padding: 50px 20px;
314 |           transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
315 |         }
316 | 
317 |         .open-menu {
318 |           right: 0;
319 |           transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
320 |         }
321 | 
322 |         .nav-link {
323 |           display: block;
324 |           margin: 1rem 0;
325 |         }
326 |     }
327 | /*footer*/
328 | .footer-basic {
329 |         padding:40px 0;
330 |         background-color:#262525;
331 |         color:white;
332 |       }
333 |       
334 |       .footer-basic ul {
335 |         padding:0;
336 |         list-style:none;
337 |         text-align:center;
338 |         font-size:18px;
339 |         line-height:1.6;
340 |         margin-bottom:0;
341 |       }
342 |       
343 |       .footer-basic li {
344 |         padding:0 10px;
345 |       }
346 |       
347 |       .footer-basic ul a {
348 |         color:inherit;
349 |         text-decoration:none;
350 |         opacity:0.8;
351 |       }
352 |       
353 |       .footer-basic ul a:hover {
354 |         opacity:1;
355 |       }
356 |       
357 |       .footer-basic .social {
358 |         text-align:center;
359 |         padding-bottom:25px;
360 |       }
361 |       
362 |       .footer-basic .social > a {
363 |         font-size:24px;
364 |         width:40px;
365 |         height:40px;
366 |         line-height:40px;
367 |         display:inline-block;
368 |         text-align:center;
369 |         border-radius:50%;
370 |         border:1px solid #ccc;
371 |         margin:0 8px;
372 |         color:inherit;
373 |         opacity:0.75;
374 |       }
375 |       
376 |       .footer-basic .social > a:hover {
377 |         opacity:0.9;
378 |       }
379 |       
380 |       .footer-basic .copyright {
381 |         margin-top:15px;
382 |         text-align:center;
383 |         font-size:13px;
384 |         color:#aaa;
385 |         margin-bottom:0;
386 |       }
387 |       /*footer ended*/
388 | 
389 | 
390 |     </style>
391 |   </head>
392 |   <body>
393 |      <!--header starts-->
394 |      <main>
395 |         <header class="header-active">
396 |           <a href="/" class="scroll-top">
397 |             <i class="bx bx-up-arrow-alt"></i>
398 |           </a>
399 |   
400 |           <div class="nav container">
401 |             <a class="logo" href="/"><img src="/images/logo.png" height="60px" width="60px"> Khel Sethu</a>
402 |             <ul class="navbar">
403 |               <li><a href="/" class="nav-link">Home</a></li>
404 |   
405 |               <li><a href="/#events" class="nav-link">Events</a></li>
406 |               <li><a href="/about" class="nav-link">Our Team</a></li>
407 |               <li>
408 |                 <a href="/contactUs" target="_blank" class="nav-link"
409 |                   >Contact-Us</a
410 |                 >
411 |               </li>
412 |               <% var Currentuser=JSON.parse(localStorage.getItem("users")) %> <%
413 |               if(Currentuser==null) { %>
414 |               <li><a href="/loginUser" class="nav-link">Login</a></li>
415 |               <li><a href="/registerUser" class="nav-link">Sign-Up</a></li>
416 |               <% } %> <% if(Currentuser!=null) { %>
417 |               <li><a href="/logout" class="nav-link">Logout</a></li>
418 |               <li>
419 |                 <a href="#" class="nav-link"
420 |                   ><%= Currentuser.username %></a
421 |                 >
422 |               </li>
423 |               <% } %>
424 |             </ul>
425 |             <div class="menu-icon">
426 |               <div class="line1"></div>
427 |               <div class="line2"></div>
428 |               <div class="line3"></div>
429 |             </div>
430 |           </div>
431 |         </header>
432 |         <!--header ends-->
433 |   
434 |     <section>
435 |         <div class="container">
436 |             <div class="text-center mb-5"><br>
437 |                 
438 |                 <h2 class="display-20 display-md-18 display-lg-16" style="color:purple; ">Meet Our Individuals</h2>
439 |             </div>
440 |     
441 |             <div class="row">
442 |                 <div class="col-sm-6 col-lg-4 mb-1-9 mb-lg-0" id="block">
443 |                     <div class="team-style1 hoverstyle1">
444 |                         <div class="team-img">
445 |                             <img src="/images/developer1.jpg" alt="" width="200px" height="300px">
446 |                         </div>
447 |                         <div class="team-social-icon">
448 |                             <ul>
449 | 
450 |                                   
451 |                                 <li><a href="https://www.linkedin.com/in/prem-kumar-naidu-tadi-b47179237/" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
452 |                             </ul>
453 |                         </div>
454 |                         <div class="team-info">
455 |                             <h6 class="h5">Prem Kumar Naidu Tadi</h6>
456 |                             <small>Full Stack Developer</small>
457 |                         </div>
458 |                     </div>
459 |                 </div>
460 |                 <div class="col-sm-6 col-lg-4 mb-1-9 mb-lg-0"  id="block">
461 |                     <div class="team-style1 hoverstyle1">
462 |                         <div class="team-img">
463 |                             <img src="/images/developer2.jpg" alt="" width="200px" height="500px">
464 |                         </div>
465 |                         <div class="team-social-icon">
466 |                             <ul>
467 |                                
468 |                                   
469 |                                 <li><a href="https://www.linkedin.com/in/harinadh-tanna-45b392211/" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
470 |                             </ul>
471 |                         </div>
472 |                         <div class="team-info">
473 |                             <h6 class="h5">Harinadh Tanna</h6>
474 |                             <small>Full Stack Developer</small>
475 |                         </div>
476 |                     </div>
477 |                 </div>
478 |                 <div class="col-sm-6 col-lg-4">
479 |                     <div class="team-style1 hoverstyle1"  id="block">
480 |                         <div class="team-img">
481 |                         <img src="/images/developer3.jpg" alt="" width="200px" height="500px">
482 |                         </div>
483 |                         <div class="team-social-icon">
484 |                             <ul>
485 |                                
486 |                                   
487 |                                 <li><a href="https://www.linkedin.com/in/sree-vani-ramisetti-7b0579208/" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
488 |                             </ul>
489 |                         </div>
490 |                         <div class="team-info">
491 |                             <h6 class="h5">Sree Vani Ramisetti</h6>
492 |                             <small>Full Stack Developer</small>
493 |                         </div>
494 |                     </div>
495 |                 </div>
496 |             </div>
497 |         </div>
498 |     </section>
499 |      <!--footer started-->
500 |      <div class="footer-basic">
501 |         <footer>
502 |             <div class="social"><a href="https://www.instagram.com/prem._.pkk/"><i class="fa-brands fa-instagram"></i></i></a><a href="https://www.snapchat.com/prempk.7172"><i class="fa-brands fa-square-snapchat"></i></i></a><a href="https://twitter.com/Prempk2929"><i class="fa-brands fa-twitter"></i></i></a><a href="https://www.facebook.com/profile.php?id=100090794153191"><i class="fa-brands fa-facebook"></i></i></a></div>
503 |           <hr style="height:2px;border-width:0;color:gray;background-color:white">
504 |             <ul class="list-inline">
505 |                 <li class="list-inline-item"><a href="#">Home</a></li>
506 |                 <li class="list-inline-item"><a href="/checkevents">Events</a></li>
507 |                 <li class="list-inline-item"><a href="/about">Our Team</a></li>
508 |                 <li class="list-inline-item"><a href="/contactUs" target="_blank">Contact-Us</a></li>
509 |                 
510 |             </ul>
511 |             <p class="copyright"> © Khel Sethu </p>
512 |         </footer>
513 |     </div>
514 |     <!--footer ended-->
515 |     
516 |     <script
517 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
518 |       integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
519 |       crossorigin="anonymous"
520 |     ></script>
521 |   </body>
522 | </html>
523 | 


--------------------------------------------------------------------------------
/views/index.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Khel Sethu</title>
  8 |     <link rel="stylesheet" type="text/css" href="css/styles.css" />
  9 |     <link
 10 |       href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
 11 |       rel="stylesheet"
 12 |     />
 13 |     <link
 14 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
 15 |       rel="stylesheet"
 16 |       integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
 17 |       crossorigin="anonymous"
 18 |     />
 19 |     <script
 20 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
 21 |       integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
 22 |       crossorigin="anonymous"
 23 |     ></script>
 24 |     <script
 25 |       src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js"
 26 |       integrity="sha512-2bMhOkE/ACz21dJT8zBOMgMecNxx0d37NND803ExktKiKdSzdwn+L7i9fdccw/3V06gM/DBWKbYmQvKMdAA9Nw=="
 27 |       crossorigin="anonymous"
 28 |       referrerpolicy="no-referrer"
 29 |     ></script>
 30 |     <link rel="icon" href="images/logo.png" type="image/icon type" />
 31 |     <style>
 32 |       /* @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&display=swap"); */
 33 |       @import url("https://fonts.googleapis.com/css?family=Poppins");
 34 | 
 35 |       * {
 36 |         font-family: "Montserrat", sans-serif;
 37 |         margin: 0;
 38 |         padding: 0;
 39 |         box-sizing: border-box;
 40 |       }
 41 | 
 42 |       body {
 43 |         /* background-image: url("images/main.jpg"); 
 44 |       background-repeat: no-repeat;
 45 |       background-size: 100% 100%;
 46 |       background-position: center; */
 47 |         height: 100vh;
 48 |       }
 49 | 
 50 |       section {
 51 |         padding: 3rem 0 2rem;
 52 |       }
 53 | 
 54 |       main {
 55 |         background-image: url("images/main.jpg");
 56 |         background-repeat: no-repeat;
 57 |         background-size: 100% 100%;
 58 |         background-position: center;
 59 |         height: 100vh;
 60 |       }
 61 | 
 62 |       a {
 63 |         font-weight: 300;
 64 |         text-decoration: none;
 65 |       }
 66 | 
 67 |       li {
 68 |         list-style: none;
 69 |       }
 70 | 
 71 |       /*Header starts*/
 72 |       header {
 73 |         position: fixed;
 74 |         top: 0;
 75 |         left: 0;
 76 |         width: 100%;
 77 |         z-index: 100;
 78 |       }
 79 | 
 80 |       .container {
 81 |         max-width: 960px;
 82 |         margin: auto;
 83 |         width: 100%;
 84 |       }
 85 | 
 86 |       .header-active {
 87 |         background-color: white;
 88 |         transition: 0.4s;
 89 |         height: 80px;
 90 |       }
 91 | 
 92 |       .nav {
 93 |         display: flex;
 94 |         justify-content: space-between;
 95 |         align-items: center;
 96 |         padding: 20px 0;
 97 |       }
 98 | 
 99 |       .logo {
100 |         font-size: 2rem;
101 |         font-weight: 800;
102 |         position: relative;
103 |         top: -10px;
104 |         color: rgb(63, 2, 63);
105 |       }
106 | 
107 |       .navbar {
108 |         display: flex;
109 |         align-items: center;
110 |         column-gap: 1.5rem;
111 |       }
112 | 
113 |       .nav-link {
114 |         font-weight: bold;
115 |         color: rgb(63, 2, 63);
116 | 
117 |         font-size: 1rem;
118 |         padding: 4px 8px;
119 |         border-radius: 0.2rem;
120 |       }
121 | 
122 |       .nav-link:hover {
123 |         background-color: rgb(63, 2, 63);
124 |         border: 1px solid rgb(63, 2, 63);
125 |         color: white;
126 |         /* color: white;
127 |         background: rgb(63, 2, 63); */
128 |         transition: 0.3s all linear;
129 |       }
130 | 
131 |       /*Header ends*/
132 |       /* menu icon starts */
133 |       .menu-icon {
134 |         display: none;
135 |         flex-direction: column;
136 |         align-items: center;
137 |         justify-content: center;
138 |         row-gap: 5px;
139 |         cursor: pointer;
140 |         z-index: 200;
141 |         transition: 0.3s;
142 |       }
143 | 
144 |       .menu-icon div {
145 |         display: block;
146 |         background: rgb(63, 2, 63);
147 |         height: 2px;
148 |         width: 24px;
149 |         transition: 0.3s;
150 |       }
151 | 
152 |       .move .line1 {
153 |         transform: rotate(-45deg) translate(-5px, 5px);
154 |       }
155 | 
156 |       .move .line2 {
157 |         opacity: 0;
158 |       }
159 | 
160 |       .move .line3 {
161 |         transform: rotate(45deg) translate(-5px, -5px);
162 |       }
163 | 
164 |       /* menu-icon ends */
165 | 
166 |       /*main page starts*/
167 |       .home {
168 |         min-height: 400px;
169 |         display: flex;
170 |         align-items: center;
171 |         justify-content: center;
172 |         padding-top: 7rem;
173 |         font-size: 30px;
174 |         color: rgb(63, 2, 63);
175 |       }
176 | 
177 |       .home-text h2 {
178 |         font-size: 35px;
179 |         font-weight: bold;
180 |       }
181 |       .home-text .pmain{
182 |         font-size: 16px;
183 |         color: rgb(63, 2, 63);
184 |       }
185 |       .pcls{
186 |         color: rgb(63, 2, 63);
187 |         font-weight: 800;
188 |         
189 |       }
190 |       .home-text p {
191 |         font-size: 22px;
192 | 
193 |       }
194 | 
195 |       .home-text p a {
196 |         color: purple;
197 |       }
198 | 
199 |       .home-content {
200 |         position: relative;
201 |         max-width: 600px;
202 |         width: 100%;
203 |         margin: auto;
204 |         display: flex;
205 |         flex-direction: column;
206 |         align-items: center;
207 |         justify-content: center;
208 |         text-align: center;
209 |       }
210 |       
211 | 
212 |       .scroll-top {
213 |         position: fixed;
214 |         bottom: 0%;
215 |         background-color: rgb(63, 2, 63);
216 |         color: white;
217 |         border-radius: 50%;
218 |         right: 1.5rem;
219 |       }
220 | 
221 |       .scroll-active {
222 |         bottom: 2rem;
223 |       }
224 | 
225 |       .scroll-top .bx {
226 |         padding: 8px;
227 |         font-size: 1.3rem;
228 |         color: var(--main-color);
229 |         background: var(--box-color);
230 |         border-radius: 0.2rem;
231 |       }
232 | 
233 |       .scroll-top .bx:hover {
234 |         background: var(--container-color);
235 |         transition: 0.3s all linear;
236 |         color: var(--bg-color);
237 |       }
238 | 
239 |       /* main page ends */
240 | 
241 |       /*  about starts*/
242 |       #features {
243 |         padding: 5vw 8vw 0 8vw;
244 |         text-align: center;
245 |       }
246 | 
247 |       #features .fea-base {
248 |         display: grid;
249 |         grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
250 |         grid-gap: 1rem;
251 |         margin-top: 50px;
252 |       }
253 | 
254 |       #features .fea-box {
255 |         background-color: #ebecf0;
256 |         text-align: start;
257 |         padding-left: 10px;
258 |       }
259 | 
260 |       #features .fea-box h3 {
261 |         font-size: 2.2rem;
262 |         font-weight: 600;
263 |         color: rgb(46, 46, 59);
264 |         padding: 13px 0 7px 0;
265 |       }
266 | 
267 |       #features .fea-box p {
268 |         font-size: 1rem;
269 |         font-weight: 400;
270 |         color: rgb(70, 70, 90);
271 |         /* padding: 13px 0 7px 0; */
272 |       }
273 | 
274 |       /* about  ends */
275 | 
276 |       /* events starts */
277 |       #events {
278 |         padding: 8vw 8vw 0 8vw;
279 |         text-align: center;
280 |       }
281 | 
282 |       #events .events-box {
283 |         display: grid;
284 |         grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
285 |         grid-gap: 1rem;
286 |         margin-top: 50px;
287 |       }
288 | 
289 |       #events .events {
290 |         text-align: start;
291 |         background-color: #f9f9ff;
292 |         height: 100%;
293 |         position: relative;
294 |       }
295 | 
296 |       #events .events img {
297 |         width: 100%;
298 |         height: 60%;
299 |         background-size: cover;
300 |         background-position: center;
301 |       }
302 | 
303 |       #events .events .details {
304 |         padding: 15px 15px 0 15px;
305 |         /* margin-bottom: 80px; */
306 |       }
307 | 
308 |       #events .events .cost {
309 |         /* background-color: rgb(74,74,136); */
310 |         background-color: rgb(63, 2, 63);
311 |         color: #fff;
312 |         line-height: 70px;
313 |         width: 70px;
314 |         height: 70px;
315 |         text-align: center;
316 |         border-radius: 50%;
317 |         position: absolute;
318 |         right: 15px;
319 |         bottom: 125px;
320 |       }
321 | 
322 |       .regbtn {
323 |         border-radius: 7px;
324 |         background-color: rgb(63, 2, 63);
325 |         color: #fff;
326 |         margin-top: 30px;
327 |         height: 45px;
328 |         width: 130px;
329 |       }
330 | 
331 |       .expbtn {
332 |         margin-top: 50px;
333 |         float: right;
334 |         border-radius: 7px;
335 |         /* background-color: rgb(74,74,136); */
336 |         background-color: rgb(63, 2, 63);
337 |         color: #fff;
338 |         height: 45px;
339 |         width: 130px;
340 |       }
341 | 
342 |       .regbtn:hover,
343 |       .expbtn:hover {
344 |         background-color: purple;
345 |       }
346 | 
347 |       .expbtn a {
348 |         text-decoration: none;
349 |         color: #fff;
350 |       }
351 | 
352 |       /* events ends */
353 | 
354 |       /* responsiveness starts */
355 |       @media (max-width: 990px) {
356 |         .container {
357 |           margin: 0 auto;
358 |           width: 90%;
359 |         }
360 |       }
361 | 
362 |       @media (max-width: 892px) {
363 |         section {
364 |           padding: 2rem 0;
365 |         }
366 | 
367 |         .nav {
368 |           padding: 12px 0;
369 |         }
370 | 
371 |         .menu-icon {
372 |           display: flex;
373 |         }
374 | 
375 |         .navbar {
376 |           position: absolute;
377 |           top: 0;
378 |           right: -100%;
379 |           width: 300px;
380 |           height: 70vh;
381 |           background: #fff;
382 |           display: flex;
383 |           flex-direction: column;
384 |           align-items: center;
385 |           padding: 50px 20px;
386 |           transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
387 |         }
388 | 
389 |         .open-menu {
390 |           right: 0;
391 |           transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
392 |         }
393 |       }
394 | 
395 |       @media (max-width: 775px) {
396 |         main {
397 |           height: -webkit-fill-available;
398 |         }
399 | 
400 |         .logo {
401 |           font-size: 1.1rem;
402 |           top: 0px;
403 |         }
404 | 
405 |         .menu-icon {
406 |           display: flex;
407 |         }
408 | 
409 |         .navbar {
410 |           position: absolute;
411 |           top: 0;
412 |           right: -100%;
413 |           width: 300px;
414 |           height: 70vh;
415 |           background: #fff;
416 |           display: flex;
417 |           flex-direction: column;
418 |           align-items: center;
419 |           padding: 50px 20px;
420 |           transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
421 |         }
422 | 
423 |         .open-menu {
424 |           right: 0;
425 |           transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
426 |         }
427 | 
428 |         .nav-link {
429 |           display: block;
430 |           margin: 1rem 0;
431 |         }
432 | 
433 |         .abt-container {
434 |           width: 80%;
435 |           display: block;
436 |           margin: auto;
437 |           padding-top: 50px;
438 |         }
439 | 
440 |         .content-section {
441 |           float: none;
442 |           width: 100%;
443 |           display: contents;
444 |           margin: 40%;
445 |         }
446 | 
447 |         .content-section .title {
448 |           text-align: center;
449 |           font-size: 19px;
450 |         }
451 | 
452 |         .content-section .content .button {
453 |           text-align: center;
454 |           display: contents;
455 |         }
456 | 
457 |         .content-section .content .button a {
458 |           padding: 9px 30px;
459 |         }
460 | 
461 |         .content-section .social {
462 |           text-align: center;
463 |         }
464 | 
465 |         .events-content {
466 |           grid-template-columns: repeat(2, 1fr);
467 |         }
468 | 
469 |         .abt-main {
470 |           height: auto;
471 |         }
472 |       }
473 |       /*footer*/
474 |       .footer-basic {
475 |         padding:40px 0;
476 |         background-color:#262525;
477 |         color:white;
478 |       }
479 |       
480 |       .footer-basic ul {
481 |         padding:0;
482 |         list-style:none;
483 |         text-align:center;
484 |         font-size:18px;
485 |         line-height:1.6;
486 |         margin-bottom:0;
487 |       }
488 |       
489 |       .footer-basic li {
490 |         padding:0 10px;
491 |       }
492 |       
493 |       .footer-basic ul a {
494 |         color:inherit;
495 |         text-decoration:none;
496 |         opacity:0.8;
497 |       }
498 |       
499 |       .footer-basic ul a:hover {
500 |         opacity:1;
501 |       }
502 |       
503 |       .footer-basic .social {
504 |         text-align:center;
505 |         padding-bottom:25px;
506 |       }
507 |       
508 |       .footer-basic .social > a {
509 |         font-size:24px;
510 |         width:40px;
511 |         height:40px;
512 |         line-height:40px;
513 |         display:inline-block;
514 |         text-align:center;
515 |         border-radius:50%;
516 |         border:1px solid #ccc;
517 |         margin:0 8px;
518 |         color:inherit;
519 |         opacity:0.75;
520 |       }
521 |       
522 |       .footer-basic .social > a:hover {
523 |         opacity:0.9;
524 |       }
525 |       
526 |       .footer-basic .copyright {
527 |         margin-top:15px;
528 |         text-align:center;
529 |         font-size:13px;
530 |         color:#aaa;
531 |         margin-bottom:0;
532 |       }
533 |       /*footer ended*/
534 |       @media (max-width: 665px) {
535 |         #footerid {
536 |           margin-top: 100px;
537 |         }
538 | 
539 |         .events-content {
540 |           grid-template-columns: 1fr;
541 |         }
542 |       }
543 | 
544 |       /* responsiveness ends */
545 |     </style>
546 |   </head>
547 | 
548 |   <body>
549 |     <!--header starts-->
550 |     <main>
551 |       <header class="header-active">
552 |         <a href="/" class="scroll-top">
553 |           <i class="bx bx-up-arrow-alt"></i>
554 |         </a>
555 | 
556 |         <div class="nav container">
557 |           <a class="logo" href="/"><img src="/images/logo.png" height="60px" width="60px"> Khel Sethu</a>
558 |           <ul class="navbar">
559 |             <li><a href="/" class="nav-link">Home</a></li>
560 | 
561 |             <li><a href="#events" class="nav-link">Events</a></li>
562 |             <li><a href="/about" class="nav-link">Our Team</a></li>
563 |             <li>
564 |               <a href="/contactUs" target="_blank" class="nav-link"
565 |                 >Contact-Us</a
566 |               >
567 |             </li>
568 |             <% var Currentuser=JSON.parse(localStorage.getItem("users")) %> <%
569 |             if(Currentuser==null) { %>
570 |             <li><a href="/loginUser" class="nav-link">Login</a></li>
571 |             <li><a href="/registerUser" class="nav-link">Sign-Up</a></li>
572 |             <% } %> <% if(Currentuser!=null) { %>
573 |             <li><a href="/logout" class="nav-link">Logout</a></li>
574 |             <li>
575 |               <a href="/" class="nav-link"
576 |                 ><%= Currentuser.username %></a
577 |               >
578 |             </li>
579 |             <% } %>
580 |           </ul>
581 |           <div class="menu-icon">
582 |             <div class="line1"></div>
583 |             <div class="line2"></div>
584 |             <div class="line3"></div>
585 |           </div>
586 |         </div>
587 |       </header>
588 |       <!--header ends-->
589 | 
590 |       <!--main page starts-->
591 |       <section class="home container" id="home">
592 |         <div class="home-content">
593 |           <div class="home-text">
594 |             <h2>Come. Challenge. Win.</h2>
595 |             <% if(Currentuser==null) { %>
596 |             <p class="pmain">
597 |               <a href="/loginUser"><u>Login</u></a> to continue. Don't have an
598 |               account? <a href="/registerUser"><u>Signup</u>.</a>
599 |             </p>
600 |             <% } %>
601 | 
602 |             <% if(Currentuser!=null) { %>
603 |               <p class="pcls">Be Better Than Yourself</p>
604 |               <%}%>
605 |           </div>
606 |         </div>
607 |       </section>
608 |     </main>
609 |     <!--main page ended-->
610 |     <!-- about section starts -->
611 |     <section id="features">
612 |       <p>
613 |         Khel Sethu bridges the gap between the players and the actual ground.
614 |       </p>
615 |       <div class="fea-base">
616 |         <div class="fea-box">
617 |           <h3><i class="fa fa fa-calendar-days"></i></h3>
618 |           <p>It provides all the ongoing and upcomming sports events.</p>
619 |         </div>
620 | 
621 |         <div class="fea-box">
622 |           <h3><i class="fa-solid fa-pen-to-square"></i></h3>
623 |           <p>It is dynamic and provides time-to-time update about the events.</p>
624 |         </div>
625 | 
626 |         <div class="fea-box">
627 |           <h3><i class="fa fa-address-card"></i></h3>
628 |           <p>Players can find it useful and can directly register here.</p>
629 |         </div>
630 |       </div>
631 |     </section>
632 |     <!-- about section ends -->
633 |     <!-- Events starts -->
634 |     <section id="events">
635 |       <p>
636 |         Come and grab the opportunity to prove yourselves. Check out all the
637 |         ongoing and upcomming events here.
638 |       </p>
639 |       <div class="events-box">
640 |         <% for(var i=0;i<3;i++) {%>
641 |         <div class="events">
642 |           <img src="<%=event[i].photo %>" />
643 |           <div class="details">
644 |             <span>Date: <%=event[i].dateStart.toLocaleDateString()%></span>
645 |             <h6><%=event[i].name%></h6>
646 |             <% if(Currentuser!=null) { %>
647 |             <center>
648 |               <button onclick="location.href='/fetchdetails/<%=event[i]._id%>'" class="regbtn">
649 |                 View Details <i class="fa fa-arrow-right"></i>
650 |               </button>
651 |             </center>
652 |             <% } %> <% if(Currentuser==null) { %>
653 |             <center>
654 |               <button onclick="location.href='/loginUser'" class="regbtn">
655 |                 View Details <i class="fa fa-arrow-right"></i>
656 |               </button>
657 |             </center>
658 |             <% } %>
659 |           </div>
660 |           <div class="cost">Rs. <%=event[i].registerationFee %></div>
661 |         </div>
662 |   <%} %>
663 | 
664 |         
665 |       </div>
666 |       <button class="expbtn">
667 |         <a href="/checkevents"
668 |           >Explore More <i class="fa-solid fa-forward"></i
669 |         ></a>
670 |       </button>
671 |     </section>
672 |     <br /><br /><br />
673 |     <br><br>
674 |     <!-- Events ends -->
675 |     <!--footer started-->
676 |     <div class="footer-basic">
677 |       <footer>
678 |           <div class="social"><a href="https://www.instagram.com/prem._.pkk/"><i class="fa-brands fa-instagram"></i></i></a><a href="https://www.snapchat.com/prempk.7172"><i class="fa-brands fa-square-snapchat"></i></i></a><a href="https://twitter.com/Prempk2929"><i class="fa-brands fa-twitter"></i></i></a><a href="https://www.facebook.com/profile.php?id=100090794153191"><i class="fa-brands fa-facebook"></i></i></a></div>
679 |         <hr style="height:2px;border-width:0;color:gray;background-color:white">
680 |           <ul class="list-inline">
681 |               <li class="list-inline-item"><a href="#">Home</a></li>
682 |               <li class="list-inline-item"><a href="/checkevents">Events</a></li>
683 |               <li class="list-inline-item"><a href="/about">Our Team</a></li>
684 |               <li class="list-inline-item"><a href="/contactUs" target="_blank">Contact-Us</a></li>
685 |               
686 |           </ul>
687 |           <p class="copyright"> © Khel Sethu </p>
688 |       </footer>
689 |   </div>
690 |   <!--footer ended-->
691 | 
692 |     <!--link to js-->
693 |     <script src="js/index.js"></script>
694 |   </body>
695 | </html>
696 | 


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