goodminton-booker/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Dario Tao</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="icon" href="dtlogo.png" type="image/png">

    <link rel="stylesheet" href="styles.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <div id="close-button">
        <a href="../index.html">X</a>
    </div>

    <style>
        #close-button {
            position: fixed;
            top: 30px;
            right: 30px;
            font-size: 1.5em;
        }

        #close-button a {
            text-decoration: none;
            color: #000;
        }

        .text-link2 {
            color: #008CBA;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .text-link2:hover {
            color: #555;
            text-decoration: underline;
            transform: scale(1.05);
        }
    </style>

    <div id="content">
        <a class="text-link2" href="https://github.com/taodario/goodmintonbooker" target="_blank" rel="noreferrer">
            <h1>Goodminton Booker - An Automated System to Book Badminton Courts</h1>
        </a>
        <p>
            Goodminton Booker is a tool for UofT Students to book badminton courts automatically - without being in
            front of their screen when the reservation spot opens. It is highly difficult to be able to book a court
            manually, as the courts open for booking hour by hour, and there is 1 spot for 3 total courts. A chance to
            play badminton again!

            This is developed using Python and Playwright. I implemented features such as login, scheduled booking
            attempts, error handling, and screenshots for verfication.
            <br><br>
            In the images below, you can see the complex DOM
            which needed to be navigated through based on user inputs for their desired dates, times, and courts.
            <br><br>
            <img class="myImageClass" src="images/image copy.png" alt="Demo">
            <br>
            <img class="myImageClass" src="images/image.png" alt="Demo">
            <br>
            <br>
        </p>
    </div>

    <!-- linking to javascript file -->
    <script src="scripts.js"></script>

</body>

</html>