index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Phone Hunter</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body class="container">
    <header class="text-center mt-4 mb-5">
        <h1>Welcome to Phone Hunter!</h1>
    </header>
    <main>
        <section class="w-50 mx-auto my-5">
            <div class="input-group mb-3">
                <input id="input-search" type="text" class="form-control" placeholder="Enter Phone Brand"
                    aria-label="Recipient's username" aria-describedby="button-addon2">
                <button id="btn-search" class="btn btn-primary ms-3 px-5 rounded" type="button"
                    id="button-addon2">Search</button>
            </div>
        </section>
        <section>
            <!-- No Phone Found Message -->
            <div id="no-phone-found" class="mb-5 d-none">
                <h3 class="text-danger text-center">No Phone Found! Please Search Again</h3>
            </div>

            <!-- Spinner -->
            <div id="spinner" style="height: 400px;" class="d-flex justify-content-center align-items-center d-none">
                <div class="spinner-border text-success" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>


            <!-- Phone Container -->
            <div id="phone-container" class="row row-cols-1 row-cols-md-3 g-4">
            </div>

            <!-- Show All Phones -->
            <div id="show-all" class="d-flex justify-content-center my-5 d-none">
                <div id="btn-show-all" class="btn btn-primary text-center">Show All</div>
            </div>
        </section>


        <!-- Modal Section -->
        <section>
            
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div id="phone-details-modal" class="modal-dialog">

                </div>
            </div>
        </section>


    </main>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
        crossorigin="anonymous"></script>
    <script src="js/app.js"></script>
</body>

</html>