<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
</head>
<body>
<div class="topnav">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div style="padding-left:16px">
<h2>Search Bar</h2>
</div>
<link rel="stylesheet" href="styles.css">
<script type="module" src="script.js"></script>
<!--Add custom font-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<nav>
<a href="#home">HOME</a>
<a href="#findingpartners">FINDING PARTNERS</a>
<a href="#about">ABOUT</a>
<a href="#contact">CONTACT</a>
</nav>
<header>
<div>
<h1>Racket Match 🏓</h1>
<h3>Created by Katherine and Rachel Ku</h3>
</div>
</header>
<section id="findingpartners">
<div>
<h2>Finding Partners</h2>
<h3>Are you new to table tennis, tennis, or badminton and want to find someone to practice with? Well, you are in the right place! </h3>
<p>Fill out the information below and we will email you when we find a match. <form action='/~/quickpoll/open'>
<label>Name (First and Last):</label>
<input name='Name'>
<br>
<br>
<label>Email:</label>
<input name='Email'>
<br>
<br>
</form>
<label> What sport do you play?</label>
<select>
<option>table tennis 🏓 </option>
<option> tennis 🎾 </option>
<option> badminton 🏸</option>
</select>
<br>
<br>
<form>
<label> Are you right handed or left handed?</label>
<select>
<option> right handed ➡️ </option>
<option> left handed ⬅️</option>
</select>
<br>
<br>
</form>
<form>
<label> What is your grip? </label>
<select>
<option> penhold ✍️ </option>
<option> shakehand 🤝</option>
</select>
<br>
<br>
<p><a href="https://usatt.simplycompete.com/userAccount/s2">Check your table tennis rating</a></p>
<p><a href="https://www.atptour.com/en/rankings/singles">Check your tennis ranking</a></p>
<p><a href="https://bwfbadminton.com/rankings/">Check your badminton ranking</a></p>
<br>
</form>
<form>
<label> Rating/Ranking: </label>
<input name='Rating'>
</form>
<br>
<label> Club you play at:</label>
<input name='club'>
<br>
<br>
<button>Submit!</button>
</div>
</section>
<section id="about">
<h2>About This Project</h2>
<br>
<p>We created this project to help athletes find a partner to practice with. When they first start playing a sport, they need someone to play with so they can get better. They might not know anyone who plays the same sport as them so this website will be a big help. People can find practice partners that are around the same rating and similar playing styles. Racket Match can help table tennis, tennis, and badminton athletes to meet new people, make friends, and most importantly, improve their skills. </p>
</section>
<section id="contact">
<h2>Contact</h2>
<form action='/survey/checkout' method='post' enctype="multipart/form-data">
<input type="text" name="Name" placeholder='Your name' required>
<input type="email" name="email" placeholder='Your email' required>
<textarea name="Message" placeholder='Write a message here' required></textarea>
<button>Send Message</button>
<input type='hidden' name='redirecturl' value='thankyou.html'>
<input type='hidden' name='survey' value='Contact'>
</form>
</section>
</body>
</html>