Skip to content

Form #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
akiwumi wants to merge 26 commits into
base: main
Choose a base branch
from
Open

Form #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
5e7b341
added docs
qabalany Oct 30, 2025
abc224d
HTML V.0.1
qabalany Oct 30, 2025
518db5e
created html structure for booking form
Nicolinabl Oct 30, 2025
3731208
added css guidelines
Nicolinabl Oct 30, 2025
a9f1c49
Make the hero image smaller, add padding to booking page headers, ali…
qabalany Oct 30, 2025
5a6c620
Merge branch 'main' into Styling
Nicolinabl Oct 31, 2025
58c9280
Merge pull request #2 from qabalany/Styling
Nicolinabl Oct 31, 2025
537b797
contact info and icon links to social media platforms added in footer
Nicolinabl Oct 31, 2025
ea06171
Update event images and
qabalany Oct 31, 2025
a21245f
add setting-button for text customization, styling and js for making …
sandrahagevall Oct 31, 2025
4c023dc
footer content moved to center
Nicolinabl Oct 31, 2025
8f70d40
add styling for text customization
sandrahagevall Nov 3, 2025
1a44acd
Add files via upload
akiwumi Nov 3, 2025
ef8365f
Merge remote-tracking branch 'origin/Styling' to sync with latest cha…
qabalany Nov 3, 2025
eba6625
Implement high contrast mode with WCAG compliant colors and toggle b…
qabalany Nov 4, 2025
66e007d
Center event cards in grid and set max-width for better alignment
qabalany Nov 4, 2025
39397c2
Fix: Enable high contrast mode on booking page by including main.js
qabalany Nov 4, 2025
3fa005b
modal, subscribe to newsletter
Nicolinabl Nov 4, 2025
f6e3e9d
Merge pull request #5 from qabalany/contrast
qabalany Nov 4, 2025
4c20a79
Merge branch 'main' into footer
qabalany Nov 4, 2025
87b696a
Merge pull request #6 from qabalany/footer
qabalany Nov 4, 2025
c05186a
Merge branch 'main' into modal
qabalany Nov 4, 2025
9b22c51
Merge pull request #7 from qabalany/modal
qabalany Nov 4, 2025
8471f5e
Merge branch 'main' into text-customization
qabalany Nov 4, 2025
850647e
Merge pull request #8 from qabalany/text-customization
qabalany Nov 4, 2025
28c4c02
Merge branch 'main' into Form
qabalany Nov 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5503
}
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,5 @@ A basic web server template focused on web accessibility practices.
1. Fork this repository by clicking the "Fork" button at the top right of the GitHub repository page.

2. Clone your forked repository

created form javascript
10 changes: 0 additions & 10 deletions about.html
View file
Open in desktop

This file was deleted.

372 changes: 372 additions & 0 deletions booking.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,372 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta
name="description"
content="booking page for events."
/>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Booking</title>
<link
rel="stylesheet"
href="css/styles.css"
/>
</head>

<body>
<a
href="#main-content"
class="skip-link"
>Skip to main content</a>

<header role="banner">
<div class="header-left">
<h1>Event Booking</h1>
<nav
role="navigation"
aria-label="Main navigation"
>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>

<div class="text-settings-wrapper">
<button
id="text-settings-button"
aria-haspopup="true"
aria-expanded="false"
aria-controls="text-settings-panel"
aria-label="Text settings"
>
⚙️
</button>

<section
id="text-settings-panel"
class="text-settings-panel"
hidden
aria-label="Text customization"
>
<h2 class="visually-hidden">Text customization</h2>

<div class="text-control">
<label for="font-size">Font size:</label>
<select
id="font-size"
aria-label="Font size"
>
<option value="default">Default</option>
<option value="large">Large</option>
<option value="x-large">Extra Large</option>
</select>
</div>

<div class="text-control">
<label for="line-height">Line height:</label>
<select
id="line-height"
aria-label="Line height"
>
<option value="default">Default</option>
<option value="wide">Wide</option>
<option value="x-wide">Extra Wide</option>
</select>
</div>
</section>
</div>
</header>

<main id="ticket-booking">
<h2>Book tickets</h2>
<form id="booking-form">
<div class="form-control">
<label
for="name"
class="form-text"
>Name:</label>
<input
type="text"
id="name"
name="name"
required
aria-required="true"
>
</div>

<div class="form-control">
<label
for="email"
class="form-text"
>Email:</label>
<input
type="email"
id="email"
name="email"
required
aria-required="true"
>
</div>

<div class="form-control">
<label
for="events"
class="form-text"
>Choose your event</label>
<select id="events">
<option>Art Exhibition</option>
<option>Live Concert</option>
<option>Food Festival</option>
<option>Tech Conference</option>
</select>
</div>

<div class="form-control">
<label
for="event-date"
class="form-text"
>Event date:</label>
<input
type="date"
id="event-date"
name="event-date"
>
</div>

<fieldset>
<legend class="form-text">Accessibility options</legend>
<div class="header-top">
<h1>Event Booking</h1>
<button id="contrast-toggle" aria-label="Toggle high contrast mode" title="Toggle high contrast mode" class="contrast-btn">
High Contrast
</button>
</div>
<nav
role="navigation"
aria-label="Main navigation"
>
<ul>
<li><a href="/index.html">Return to Homepage</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main id="ticket-booking">
<h2>Book tickets</h2>
<form id="booking-form">
<div class="form-control">
<label
for="name"
class="form-text"
>Name:</label>
<input
type="text"
id="name"
name="name"
required
aria-required="true"
>
</div>

<div class="form-control">
<label
for="email"
class="form-text"
>Email:</label>
<input
type="email"
id="email"
name="email"
required
aria-required="true"
>
</div>

<div class="form-control">
<label
for="events"
class="form-text"
>Choose your event</label>
<select id="events">
<option>Art Exhibition</option>
<option>Live Concert</option>
<option>Food Festival</option>
<option>Tech Conference</option>
</select>
</div>

<div class="form-control">
<label
for="event-date"
class="form-text"
>Event date:</label>
<input
type="date"
id="event-date"
name="event-date"
>
</div>

<fieldset>
<legend class="form-text">Accessibility options</legend>
<div class="radio-group">
<input
type="radio"
name="radio"
id="wheelchair"
value="wheelchair-chosen"
/>
<label
for="wheelchair"
class="form-text"
>Wheelchair accessibility</label>
</div>
<div class="radio-group">
<input
type="radio"
name="radio"
id="scared-of-heights"
value="virtigo-chosen"
/>
<label
for="scared-of-heights"
class="form-text"
>Scared of heights</label>
</div>
<div class="radio-group">
<input
type="radio"
name="radio"
id="wheelchair"
value="wheelchair-chosen"
/>
<label
for="wheelchair"
class="form-text"
>Wheelchair accessibility</label>
</div>
<div class="radio-group">
<input
type="radio"
name="radio"
id="scared-of-heights"
value="virtigo-chosen"
/>
<label
for="scared-of-heights"
class="form-text"
>Scared of heights</label>
</div>
<div class="radio-group">
<input
type="radio"
name="radio"
id="no-preference"
value="no-disability"
/>
<label
for="no-preference"
class="form-text"
>No preference</label>
</div>
id="no-preference"
value="no-disability"
/>
<label
for="no-preference"
class="form-text"
>No preference</label>
</div>
</fieldset>
<button type="submit">Book event</button>


<fieldset>
<legend class="form-text">Accessibility options</legend>
<div class="radio-group">
<input
type="radio"
name="radio"
id="wheelchair"
value="wheelchair-chosen"
/>
<label for="wheelchair" class="form-text">Wheelchair accessibility</label>
</div>
<div class="radio-group">
<input
type="radio"
name="radio"
id="scared-of-heights"
value="virtigo-chosen"
/>
<label for="scared-of-heights" class="form-text">Scared of heights</label>
</div>
<div class="radio-group">
<input
type="radio"
name="radio"
id="no-preference"
value="no-disability"
/>
<label for="no-preference" class="form-text">No preference</label>
</div>
</fieldset>
<button type="submit">Book event</button>


</form>

<section id="results" hidden>
<h2>Thank you for order. The ticket will be sent to the email provided</h2>
<div id="results-content"></div>
</section>
</main>


<footer>
<section
class="contact-section"
id="contact"
>
<div class="contact-information">
<h4>Contact</h4>
<p><b>Phone:</b> +46 00 000 00 00</p>
<p><b>Mail:</b> [email protected]</p>
</div>

<div class="social-media-information">
<h4>Social media</h4>
<a href="https://www.facebook.com/"><img
class="facebook-icon"
src="icons/facebook.png"
alt="link to facebook"
></a>
<a href="https://www.instagram.com/"><img
class="instagram-icon"
src="icons/instagram.png"
alt="link to instagram"
></a>
</div>
</section>

<section id="results" aria-live="polite" hidden>
<h2 id="results-title">Thank you for your order</h2>
<div id="results-content"></div>
</section>

</footer>

<script src="js/main.js"></script>
</body>

</html>
Loading