Template Background bergambar dan objek interaktif

<!DOCTYPE html>

<html lang="ms">

<head>

    <meta charset="UTF-8">

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

    <title>Template Neocities Anda</title>

    <style>

        /* Mengosongkan margin asas */

        body, html {

            margin: 0;

            padding: 0;

            width: 100%;

            height: 100%;

            background-color: #1a1a1a; /* Warna latar hitam/gelap untuk ruang kosong atas & bawah di phone */

        }

        /* Kontainer Utama */

        .page-container {

            position: relative;

            width: 100%;

            max-width: 100%;

            margin: 0 auto;

            display: block;

        }

        /* Tetapan Gambar Latar Belakang */

        .bg-image {

            width: 100%;

            height: auto;

            display: block;

        }

        /* Gaya Asas untuk Pintu, Kerusi dan Objek Lain */

        .clickable-object {

            position: absolute;

            cursor: pointer;

        }

        /* Memastikan gambar lukisan di dalam objek mengikut saiz kontainernya */

        .clickable-object img {

            width: 100%;

            height: auto;

            display: block;

        }

        /* Kesan hover lembut (hanya berfungsi di PC/Mouse) */

        @media (hover: hover) {

            .clickable-object:hover {

                filter: brightness(1.2); /* Objek jadi cerah sikit bila di-hover */

            }

        }

        /* --- PAPARAN TELEFON (RESPONSIVE) --- */

        @media (max-width: 768px) {

            /* Meletakkan keseluruhan halaman (gambar + objek) di tengah skrin phone */

            body {

                display: flex;

                align-items: center;

                justify-content: center;

                min-height: 100vh;

            }

            .page-container {

                position: relative;

            }

        }

    </style>

</head>

<body>

    <!-- Kontainer Utama: Semua objek mesti ada di dalam ini -->

    <div class="page-container">

        

        <!-- Gantikan 'background.jpg' dengan gambar latar anda -->

        <img src="background.jpg" alt="Background" class="bg-image">

        <!-- ========================================================== -->

        <!-- CONTOH OBJEK 1: PINTU (Link ke page lain) -->

        <!-- ========================================================== -->

        <!-- Gunakan peratusan (%) untuk top, left, dan width supaya saiznya kekal sepadan dengan background -->

        <a href="page2.html" class="clickable-object" style="top: 35%; left: 45%; width: 12%;">

            <!-- Gantikan 'pintu.png' dengan lukisan pintu anda -->

            <img src="pintu.png" alt="Pintu Masuk">

        </a>

        <!-- ========================================================== -->

        <!-- CONTOH OBJEK 2: KERUSI (Butang "Back") -->

        <!-- ========================================================== -->

        <div class="clickable-object" onclick="history.back()" style="top: 60%; left: 20%; width: 8%;">

            <!-- Gantikan 'kerusi.png' dengan lukisan kerusi anda -->

            <img src="kerusi.png" alt="Kerusi Kembali">

        </div>

        <!-- ========================================================== -->

        <!-- CONTOH OBJEK 3: OBJEK INTERAKTIF (Lain-lain) -->

        <!-- ========================================================== -->

        <div class="clickable-object" onclick="fungsiInteraktifAnda()" style="top: 55%; left: 75%; width: 10%;">

            <!-- Gantikan 'item.png' dengan lukisan objek anda -->

            <img src="item.png" alt="Objek Interaktif">

        </div>

    </div>

    <script>

        // Ruang untuk Javascript Fungsi Interaktif Anda

        function fungsiInteraktifAnda() {

            alert("Anda telah klik objek interaktif!");

        }

    </script>

</body>

</html>