<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

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



        <title>Explore Garavand</title>

        <meta name="description" content="Interactive exploration of Garavand regions in Iran.">

        <meta name="keywords" content="Garavand, Kermanshah, Khuzestan, Lorestan, Iran">



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

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

        <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;700&display=swap" rel="stylesheet">



        <script type="text/javascript">

            // App Javascript Goes Here. Place your entire script content inside the try block for error handling.

            try {

                // This will run when the DOM is ready.

                $(document).ready(function() {

                    // Define the regions

                    const regions = {

                        'Geravand, Kermanshah': {

                            'province': 'Kermanshah',

                            'description': 'A region located in the Kermanshah province.'

                        },

                        'Garavand, Eslamabad-e Gharb': {

                            'province': 'Kermanshah',

                            'description': 'Located in Eslamabad-e Gharb county, within the Kermanshah province.'

                        },

                        'Garavand-e Bakhtiar': {

                            'province': 'Khuzestan',

                            'description': 'Part of the Khuzestan province, known for its diverse cultural heritage.'

                        },

                        'Garavand-e Sabzi': {

                            'province': 'Khuzestan',

                            'description': 'Another area situated in the Khuzestan province.'

                        },

                        'Garavand-e Sofla': {

                            'province': 'Khuzestan',

                            'description': 'The lower part of Garavand located in Khuzestan province.'

                        },

                        'Garavand, Lorestan': {

                            'province': 'Lorestan',

                            'description': 'Found within the Lorestan province, an area with a rich history.'

                        }

                    };



                    // Populate regions dropdown

                    $.each(regions, function(region, details) {

                        $('#region-select').append($('<option>', {

                            value: region,

                            text: region

                        }));

                    });



                    // Handle region change

                    $('#region-select').change(function() {

                        const selectedRegion = $(this).val();

                        $('#region-description').text(regions[selectedRegion].description);

                        $('#province-name').text(regions[selectedRegion].province);

                    });

                });



            } catch (error) {

                 // This will throw the error to the parent window.

                throw error;

            }

        </script>

        

        <style>

            /* App CSS Goes Here */

            body {

                font-family: 'Baloo Bhaijaan 2', cursive;

                background-color: #f3f4f6;

            }

            #main-container {

                margin-top: 20px;

                background: #ffffff;

                padding: 20px;

                border-radius: 8px;

                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

            }

            .title {

                font-size: 2em;

                color: #6c5ce7;

                text-align: center;

                margin-bottom: 20px;

            }

            .description {

                color: #2d3436;

                text-align: center;

                margin-top: 20px;

            }

            .province {

                font-weight: bold;

                color: #0984e3;

                text-align: center;

                margin-top: 10px;

            }

            .btn-wiki {

                display: block;

                margin: 20px auto;

                background: #0984e3;

                color: #ffffff;

                border: none;

                border-radius: 4px;

                padding: 10px 20px;

                font-size: 1em;

                text-align: center;

                text-decoration: none;

                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

            }

            .btn-wiki:hover {

                background: #74b9ff;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <div class="title">🏞 Explore Garavand</div>



            <select id="region-select" class="form-select">

                <option selected>Select a region</option>

            </select>



            <div id="region-description" class="description"></div>

            <div id="province-name" class="province"></div>



            <a href="https://en.wikipedia.org/wiki/Garavand" target="_blank" rel="nofollow" class="btn-wiki">

                <i class="fa fa-wikipedia-w" aria-hidden="true"></i> Learn more on Wikipedia

            </a>



        </div>

    </body>

</html>