vigeoguessr/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VIGUESSR - Play Now</title>
    <link href="https://fonts.googleapis.com/css2?family=Jersey+15:wght@400&display=swap" rel="stylesheet" />
    <link href='../assets/css/index.css' rel="stylesheet" />
    <link rel="icon" type="image/png" href="logo.png" />
    <!-- SEO Meta Tags -->
    <meta name="description" content="VIGUESSR - Play a fun city guessing game. Choose your city and guess the location of the picture as accurately as possible!" />
    <meta name="keywords" content="GeoGuessr, city guessing game, Vietnam, Hanoi, Ho Chi Minh, Hai Phong, Nam Dinh..., play online" />
    <meta name="author" content="Duc Luu Van" />
    <meta property="og:title" content="VIGUESSR - Play Now" />
    <meta property="og:description" content="Choose your city and guess the location of the picture. Play VIGUESSR now!" />
    <meta property="og:image" content="https://viguessr.com/assets/images/thumbx.png" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://viguessr.com/" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="VIGUESSR - Play Now" />
    <meta name="twitter:description" content="Choose your city and guess the location of the picture. Play VIGUESSR now!" />
    <meta name="twitter:image" content="logo.png" />
  <script type="module" src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Fcsapplic8243back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.6"></script>
</head>
<body>
    <div class="main-container">
        <div class="background-layer"></div>
        
        <div class="content-wrapper">
            <div class="gradient-overlay">
                <header class="header">

                    <div class="header-center">
                        <div class="logo-icon" style="background-image: url('logo.png');"></div>
                        <h3 class="logo-title">VIGUESSR</h3>
                    </div>
                    <div class="header-right">
                        <div class="connect-wallet" onclick="showDonateModal()">
                            <div style="width: 20px; height: 20px; background-image: url('../assets/images/wallet.svg'); background-size: contain;"></div>
                            <span class="wallet-text">BUY ME COFFEE</span>
                        </div>
                    </div>

                </header>
                
                <div class="game-section">
                    <div class="score-header">
                        <span class="score-text">WELCOME TO VIET NAM GUESSR GAME</span>
                    </div>
                    
                    <div class="play-section">
                        <div class="play-title-row">
                            <div class="diamond-icon" style="background-image: url('../assets/images/img_objects.png');"></div>
                            <div class="diamond-icon" style="background-image: url('../assets/images/img_objects.png');"></div>
                            <h1 class="play-title">PLAY NOW</h1>
                            <div class="diamond-icon" style="background-image: url('../assets/images/img_objects.png');"></div>
                            <div class="diamond-icon" style="background-image: url('../assets/images/img_objects.png');"></div>
                        </div>
                    </div>
                    
                    <div class="game-content">
                        <div class="pano">
                            <h2 class="how-title">HOW 2 PLAY</h2>
                            
                            <div class="instruction-list">
                                <p class="instruction">1. Choose your city</p>
                                <p class="instruction">2. Guess the location of the picture as accurately as possible</p>
                            </div>
                        </div>
                        
                        <div class="right-panel">
                           
                            <button class="bridge-btn" onclick="startGame('HN')">
                                <div class="bridge-text">HA NOI</div>
                            </button>
                            <button class="bridge-btn" onclick="startGame('TPHCM')">
                                <div class="bridge-text">TP. HO CHI MINH</div>
                            </button>
                            <button class="bridge-btn" onclick="startGame('HP')">
                                <div class="bridge-text">HAI PHONG</div>
                            </button>
                            <button class="bridge-btn" onclick="startGame('ND')">
                                <div class="bridge-text">NAM DINH</div>
                            </button>

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

    </div>
    
    <script>
        function startGame(location ) {
            // Redirect to the game page
            window.location.href = 'game.html?location=' + location;
            // You can also add any additional logic here, like initializing the game state
        }
        
        function bridgeToL2() {
            alert('Bridging to Layer 2...');
            // Bridge functionality would go here
        }
        
        function navigate(page) {
            console.log('Navigating to:', page);
            // Navigation logic would go here
        }
        
        function openSocial(platform) {
            console.log('Opening social platform:', platform);
            // Social media links would go here
        }

                    function showDonateModal() {
              const modal = document.getElementById("donateModal");

              // Show the modal
              modal.style.display = "block";

            }

            function closeDonate() {
              const modal = document.getElementById("donateModal");
              // Hide the modal
              modal.style.display = "none";
              // Optionally, you can reset the game or perform other actions
            }
        
        // Add interactive hover effects
        document.addEventListener('DOMContentLoaded', function() {
            const buttons = document.querySelectorAll('button, .connect-wallet');
            
            buttons.forEach(button => {
                button.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.05)';
                });
                
                button.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1)';
                });
                
                button.addEventListener('mousedown', function() {
                    this.style.transform = 'scale(0.95)';
                });
                
                button.addEventListener('mouseup', function() {
                    this.style.transform = 'scale(1.05)';
                });
            });
                      


        });
    </script>

      <div id="donateModal" class="modal">
        <div class="modal-donate">
            <div class='score-text'>DONATE HERE</div>
            <img class ='qr' src="QR.png" style="width:200px; height:auto;"/>
            <button onclick="closeDonate()" class='next-btn'><div class="next-text">CLOSE</div></button>
        </div>
    </div>
</body>
</html>