<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Always Roleplay VIP Mağaza</title>
	<link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="data/bilgiler.js"></script>
</head>
<body>
    <div class="header">
        <h1>Always Roleplay VIP Mağaza</h1>
    </div>

    <div class="container">
        <div class="categories">
            <div class="category" onclick="showGallery('vehicles')">
                <img src="images/vehicles.jpg" alt="Vehicles">
                <h2>Araç</h2>
                <p>VIP araçlara göz atın.</p>
            </div>
			
            <div class="category" onclick="showGallery('stokluvehicles')">
                <img src="images/stokluvehicles.png" alt="StokluVehicles">
                <h2>Stoklu Araç</h2>
                <p>VIP stoklu araçlara göz atın.</p>
            </div>

            <div class="category" onclick="showGallery('motors')">
                <img src="images/motors.jpg" alt="Motors">
                <h2>Motorsiklet</h2>
                <p>VIP motorsikletlere göz atın.</p>
            </div>

            <div class="category" onclick="showGallery('helikopter')">
                <img src="images/helikopter.jpg" alt="Helikopter">
                <h2>Helikopter</h2>
                <p>VIP helikopterlere göz atın.</p>
            </div>

            <div class="category" onclick="showGallery('tekne')">
                <img src="images/tekne.jpg" alt="Tekne">
                <h2>Tekne</h2>
                <p>VIP teknelere göz atın.</p>
            </div>			

            <div class="category" onclick="showGallery('mekan')">
                <img src="images/mekan.jpg" alt="Mekan">
                <h2>Mekan</h2>
                <p>Mekanlara göz atın.</p>
            </div>
			
            <div class="category" onclick="showGallery('meslek')">
                <img src="images/meslek.jpg" alt="Meslek">
                <h2>Meslek</h2>
                <p>Mesleklere göz atın.</p>
            </div>			

            <div class="category" onclick="showGallery('weapons')">
                <img src="images/weapons.jpg" alt="Weapons">
                <h2>Silah</h2>
                <p>Silah seçenekleri.</p>
            </div>

            <div class="category" onclick="showGallery('kisiyeozel')">
                <img src="images/kisiyeozel.jpg" alt="Kisiyeozel">
                <h2>Kişiye Özel</h2>
                <p>Kişiye özel seçeneklerimize göz atın.</p>
            </div>				
        </div>
		
				<div class="info-bar">
		<button class="info-button" onclick="showInfoImage()">Bilgilendirme</button>
	</div>
	
		<div id="infoImageContainer" class="info-image">
			<button class="close-button" onclick="closeInfoImage()">&times;</button>
			<img src="images/bilgilendirme.png" alt="Bilgilendirme Görseli">
		</div>		
		
		<div class="button-container">
			<button class="back-button" id="categoryBackButton" onclick="showCategories()">Kategorilere Dön</button>
			<select class="sort-select" id="categorySelectButton">
				<option value="default" disabled selected>Sırala</option>
				<option value="asc">Fiyatı Artan</option>
				<option value="desc">Fiyatı Azalan</option>
			</select>
		</div>

        <div class="gallery" id="vehicles-gallery"></div>
        <div class="gallery" id="weapons-gallery"></div>
        <div class="gallery" id="mekan-gallery"></div>
        <div class="gallery" id="meslek-gallery"></div>
        <div class="gallery" id="stokluvehicles-gallery"></div>
        <div class="gallery" id="motors-gallery"></div>
        <div class="gallery" id="helikopter-gallery"></div>
        <div class="gallery" id="tekne-gallery"></div>
        <div class="gallery" id="kisiyeozel-gallery"></div>

        <div class="expanded-image" id="expandedImageContainer" style="display:none;">
            <button class="close-button" onclick="closeExpandedImage()">&times;</button>
            <img id="expandedImage" src="" alt="Expanded">
        </div>
    </div>
	
	<script type="text/javascript" src="script.js"></script>
</body>
</html>	