vigeoguessr/game.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/game.css' rel="stylesheet" />

    <script src="/assets/js/game.js" type="text/javascript"></script>

        <!-- Leaflet for maps -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

    <!-- Photo Sphere Viewer for 360 images -->
    <script src="https://unpkg.com/three@0.152.0/build/three.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@photo-sphere-viewer/core@5.7.4/index.css" />
    <script src="https://unpkg.com/@photo-sphere-viewer/core@5.7.4/index.js"></script></script>

    <link rel="icon" type="image/png" href="logo.png" />

    <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/thumb.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">
                        <button class="back-btn" onclick="goBack()"> 
                            <div class="diamond-icon" style="background-image: url('../assets/images/back.svg');"></div>
                        </button>
                    </div>
                    <div class="game-content">
                        <div class="pano" id="pano">
                        </div>
                        
                        <div class="right-panel">
                            <div class="disclaimer" id="map"></div>
                            <button class="check-btn" id="check" disabled onclick="check()">
                                <div class="check-text">SUBMIT</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
        }
        
        // 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)';
                });
            });

            // Close donate modal when clicking outside of it (but not result modal)
            const donateModal = document.getElementById('donateModal');
            if (donateModal) {
                donateModal.addEventListener('click', function(event) {
                    if (event.target === donateModal) {
                        donateModal.style.display = 'none';
                    }
                });
            }
        });
    </script>

    <div id="resultModal" class="modal">
        <div class="modal-content">
            <div class='score-text'>RESULT</div>
            <span class='distance-text' id="distance-guess">Your Score</span>
            <div class='container' id="result" ></div>
            <p id="resultText">You were 0 km away!</p>
            <button onclick="nextRound()" class='next-btn'><div class="next-text">NEXT ROUND</div></button>
        </div>
    </div>

    <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>