Device Sync
This commit is contained in:
@@ -1,115 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration - Travel Spot</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta lang="EN">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="img/logo.jpg" alt="Company logo">
|
||||
<hr>
|
||||
<h1>Sign Up</h1>
|
||||
<h2>Your next travel starts here!</h2>
|
||||
<p>Fill in the form below:</p>
|
||||
|
||||
<label for="regDate">Registration date:</label>
|
||||
<input type="datetime-local" id="regDate" name="regDate">
|
||||
<br><br>
|
||||
|
||||
<!--Personal Information form-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name"><br>
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email"><br>
|
||||
<label for="telephone">Phone:</label>
|
||||
<input type="tel" id="telephone" name="telephone"><br>
|
||||
<label for="passport" name="passport">Passport:</label>
|
||||
<input type="file" id="passport" name="passport"><br>
|
||||
<label for="stress">What is your stress level?</label>
|
||||
<input type="range" id="stress" name="stress">
|
||||
</fieldset>
|
||||
</form><br>
|
||||
|
||||
<!--Travel Destination form-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Travel Destination</legend>
|
||||
<p>Tell us where you want to go:</p>
|
||||
<label for="pplTravelling">How many people will be travelling?</label>
|
||||
<input type="text" id="pplTravelling" name="pplTravelling"><br>
|
||||
<label for="period">Preferred Travel Period:</label>
|
||||
<select id="period" name="period" required>
|
||||
<option value="select">-Select-</option>
|
||||
<option value="summer">Summer</option>
|
||||
<option value="winter">Winter</option>
|
||||
</select><br>
|
||||
<label for="destination">Destination:</label>
|
||||
<input type="text" id="destination" name="destination"><br>
|
||||
<label for="departDate">Date of Departure:</label>
|
||||
<input type="date" id="departDate" name="departDate"><br>
|
||||
<label for="returnDate">Date of Return:</label>
|
||||
<input type="date" id="returnDate" name="returnDate"><br>
|
||||
<label for="includeFlight">Include Flight</label>
|
||||
<input type="checkbox" id="includeFlight" name="includeFlight"><br>
|
||||
<label for="includeHotel">Include Hotel</label>
|
||||
<input type="checkbox" id="includeHotel" name="includeHotel"><br>
|
||||
<label for="includeMeals">Include Meals</label>
|
||||
<input type="checkbox" id="includeMeals" name="includeMeals"><br>
|
||||
</fieldset>
|
||||
</form><br>
|
||||
|
||||
<!--Travel Experience field-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Travel Experience</legend>
|
||||
<p>Tell us about your last travel experience (leave this section empty if you have never travelled before):</p>
|
||||
<label for="lastDest">Last Destination:</label>
|
||||
<input type="text" id="lastDest" name="lastDest"><br>
|
||||
|
||||
<!--First radio button group-->
|
||||
<label>How do you rate the flight?</label>
|
||||
<input type="radio" id="fightRateGood" name="flightRateGood" value="Good">
|
||||
<label for="flightRateGood">Good</label>
|
||||
<input type="radio" id="fightRateNorm" name="flightRateNorm" value="Normal">
|
||||
<label for="flightRateNorm">Normal</label>
|
||||
<input type="radio" id="fightRateBad" name="flightRateBad" value="Bad">
|
||||
<label for="flightRateBad">Bad</label><br>
|
||||
|
||||
<!--Second radio button group-->
|
||||
<label>How do you rate the hotel?</label>
|
||||
<input type="radio" id="hotelRateGood" name="hotelRateGood" value="Good">
|
||||
<label for="hotelRateGood">Good</label>
|
||||
<input type="radio" id="hotelRateNorm" name="hotelRateNorm" value="Normal">
|
||||
<label for="hotelRateNorm">Normal</label>
|
||||
<input type="radio" id="hotelRateBad" name="hotelRateBad" value="Bad">
|
||||
<label for="hotelRateBad">Bad</label><br>
|
||||
|
||||
<!--Third radio button group-->
|
||||
<label>How do you rate the meal?</label>
|
||||
<input type="radio" id="mealRateGood" name="mealRateGood" value="Good">
|
||||
<label for="mealRateGood">Good</label>
|
||||
<input type="radio" id="mealRateNorm" name="mealRateNorm" value="Normal">
|
||||
<label for="mealRateNorm">Normal</label>
|
||||
<input type="radio" id="fightRateBad" name="mealRateBad" value="Bad">
|
||||
<label for="mealRateBad">Bad</label><br>
|
||||
|
||||
<label for="experienceText">Describe your experience:</label><br>
|
||||
<textarea id="experienceText" name="experienceText" cols="40" rows="5"></textarea>
|
||||
</fieldset>
|
||||
</form><br>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
|
||||
<footer>
|
||||
<hr>
|
||||
<p>Copyright © 2025. Travel Spot.</p>
|
||||
</footer>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Registration - Travel Spot</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta lang="EN">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="img/logo.jpg" alt="Company logo">
|
||||
<hr>
|
||||
<h1>Sign Up</h1>
|
||||
<h2>Your next travel starts here!</h2>
|
||||
<p>Fill in the form below:</p>
|
||||
|
||||
<label for="regDate">Registration date:</label>
|
||||
<input type="datetime-local" id="regDate" name="regDate">
|
||||
<br><br>
|
||||
|
||||
<!--Personal Information form-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name"><br>
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email"><br>
|
||||
<label for="telephone">Phone:</label>
|
||||
<input type="tel" id="telephone" name="telephone"><br>
|
||||
<label for="passport" name="passport">Passport:</label>
|
||||
<input type="file" id="passport" name="passport"><br>
|
||||
<label for="stress">What is your stress level?</label>
|
||||
<input type="range" id="stress" name="stress">
|
||||
</fieldset>
|
||||
</form><br>
|
||||
|
||||
<!--Travel Destination form-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Travel Destination</legend>
|
||||
<p>Tell us where you want to go:</p>
|
||||
<label for="pplTravelling">How many people will be travelling?</label>
|
||||
<input type="text" id="pplTravelling" name="pplTravelling"><br>
|
||||
<label for="period">Preferred Travel Period:</label>
|
||||
<select id="period" name="period" required>
|
||||
<option value="select">-Select-</option>
|
||||
<option value="summer">Summer</option>
|
||||
<option value="winter">Winter</option>
|
||||
</select><br>
|
||||
<label for="destination">Destination:</label>
|
||||
<input type="text" id="destination" name="destination"><br>
|
||||
<label for="departDate">Date of Departure:</label>
|
||||
<input type="date" id="departDate" name="departDate"><br>
|
||||
<label for="returnDate">Date of Return:</label>
|
||||
<input type="date" id="returnDate" name="returnDate"><br>
|
||||
<label for="includeFlight">Include Flight</label>
|
||||
<input type="checkbox" id="includeFlight" name="includeFlight"><br>
|
||||
<label for="includeHotel">Include Hotel</label>
|
||||
<input type="checkbox" id="includeHotel" name="includeHotel"><br>
|
||||
<label for="includeMeals">Include Meals</label>
|
||||
<input type="checkbox" id="includeMeals" name="includeMeals"><br>
|
||||
</fieldset>
|
||||
</form><br>
|
||||
|
||||
<!--Travel Experience field-->
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Travel Experience</legend>
|
||||
<p>Tell us about your last travel experience (leave this section empty if you have never travelled before):</p>
|
||||
<label for="lastDest">Last Destination:</label>
|
||||
<input type="text" id="lastDest" name="lastDest"><br>
|
||||
|
||||
<!--First radio button group-->
|
||||
<label>How do you rate the flight?</label>
|
||||
<input type="radio" id="fightRateGood" name="flightRateGood" value="Good">
|
||||
<label for="flightRateGood">Good</label>
|
||||
<input type="radio" id="fightRateNorm" name="flightRateNorm" value="Normal">
|
||||
<label for="flightRateNorm">Normal</label>
|
||||
<input type="radio" id="fightRateBad" name="flightRateBad" value="Bad">
|
||||
<label for="flightRateBad">Bad</label><br>
|
||||
|
||||
<!--Second radio button group-->
|
||||
<label>How do you rate the hotel?</label>
|
||||
<input type="radio" id="hotelRateGood" name="hotelRateGood" value="Good">
|
||||
<label for="hotelRateGood">Good</label>
|
||||
<input type="radio" id="hotelRateNorm" name="hotelRateNorm" value="Normal">
|
||||
<label for="hotelRateNorm">Normal</label>
|
||||
<input type="radio" id="hotelRateBad" name="hotelRateBad" value="Bad">
|
||||
<label for="hotelRateBad">Bad</label><br>
|
||||
|
||||
<!--Third radio button group-->
|
||||
<label>How do you rate the meal?</label>
|
||||
<input type="radio" id="mealRateGood" name="mealRateGood" value="Good">
|
||||
<label for="mealRateGood">Good</label>
|
||||
<input type="radio" id="mealRateNorm" name="mealRateNorm" value="Normal">
|
||||
<label for="mealRateNorm">Normal</label>
|
||||
<input type="radio" id="fightRateBad" name="mealRateBad" value="Bad">
|
||||
<label for="mealRateBad">Bad</label><br>
|
||||
|
||||
<label for="experienceText">Describe your experience:</label><br>
|
||||
<textarea id="experienceText" name="experienceText" cols="40" rows="5"></textarea>
|
||||
</fieldset>
|
||||
</form><br>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
|
||||
<footer>
|
||||
<hr>
|
||||
<p>Copyright © 2025. Travel Spot.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,85 +1,85 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #f9fafc;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto 10px auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #2a6ebb;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: bold;
|
||||
color: #2a6ebb;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
padding: 6px;
|
||||
margin: 4px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
margin: 5px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background-color: #2a6ebb;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #1d4f88;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-size: 0.9em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
input[type="radio"] + label {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #f9fafc;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto 10px auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #2a6ebb;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: bold;
|
||||
color: #2a6ebb;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
padding: 6px;
|
||||
margin: 4px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
margin: 5px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background-color: #2a6ebb;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #1d4f88;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-size: 0.9em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
input[type="radio"] + label {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user