Untitled

avatar
unknown
html
2 years ago
3.7 kB
5
Indexable
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AFY RENT A CAR</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul class="menu">
                <li><a href="#hakkimizda">Hakkımızda</a></li>
                <li><a href="#anasayfa">Anasayfa</a></li>
                <li><a href="#arac-kirala">Araç Kirala</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="hakkimizda">
            <h2>Hakkımızda</h2>
            <p>AFY RENT A CAR olarak, müşterilerimize en kaliteli ve güvenilir araç kiralama hizmetini sunmayı hedefliyoruz.</p>
        </section>
        <section id="anasayfa">
            <h2>Anasayfa</h2>
            <p>Hoş geldiniz! AFY RENT A CAR ana sayfasına hoş geldiniz. Size uygun aracı kiralayın ve keyifli bir yolculuk yapın.</p>
        </section>
        <section id="arac-kirala">
            <h2>Araç Kirala</h2>
            <!-- Fiat marka araba için bir logo -->
            <img id="1" src="FIAT_FIORINO_WEB_SITE_GORSEL_626x368.jpg" alt="Fiat Logo" onclick="openPopup('1')">
            <br>
            <br>
            <br>
            <!-- Diğer markalar için logolar -->
            <img id="4" src="1200px-Audi_A1_1.6_TDI_Ambition_front_20100901.jpg" width="600" height="400" onclick="openPopup('4')">
            <br>
            <br>
            <br>
            <img id="2" src="ford-transit-connect_van-16x9-1600x900-bodystyle.jpg.renditions.original.jpg" width="1000" height="600" onclick="openPopup('2')">
            <!-- ... Diğer logolar ... -->
        </section>
    </main>
    <script src="script.js"></script>

    <style>
        /* Popup stilini tanımlayalım */
        #popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            z-index: 9999;
        }
    </style>

    <div id="popup">
        <h2>Araba Özellikleri</h2>
        <p id="carInfo">Loading...</p>
        <button onclick="closePopup()">Kapat</button>
    </div>
   
    <script>
        function openPopup(logoId) {
            document.getElementById("popup").style.display = "block";
            fetch('http://localhost:5116/1' + logoId) // API endpoint'inizi buraya ekleyin ve logoId parametresini gönderin
                .then(response => response.json())
                .then(data => {
                    const carInfoElement = document.getElementById("carInfo");
                    carInfoElement.innerHTML = ""; // Önceki içeriği temizleyelim

                    // JSON verisini dolaşarak bilgileri popup içerisine ekleyelim
                    for (const key in data) {
                        const infoLine = document.createElement("p");
                        infoLine.textContent = `${key}: ${data[key]}`;
                        carInfoElement.appendChild(infoLine);
                    }
                })
                .catch(error => {
                    const carInfoElement = document.getElementById("carInfo");
                    carInfoElement.textContent = "Hata oluştu. Araba bilgileri alınamadı.";
                    console.error(error);
                });
        }

        function closePopup() {
            document.getElementById("popup").style.display = "none";
        }
    </script>
</body>
</html>
Editor is loading...