Spaces:
Running
Running
| <html><head><base href="https://geoguessr.ai"><title>GeoGuessr.AI - AI-Generated Street View Challenge</title><style> | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #f0f0f0; | |
| } | |
| .container { | |
| display: flex; | |
| height: 100vh; | |
| } | |
| .street-view { | |
| width: 70%; | |
| height: 100%; | |
| position: relative; | |
| background-color: #e0e0e0; | |
| } | |
| #panorama { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .map-interface { | |
| width: 30%; | |
| height: 100%; | |
| background-color: #ffffff; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| display: flex; | |
| flex-direction: column; | |
| box-shadow: -2px 0 10px rgba(0,0,0,0.1); | |
| } | |
| #world-map { | |
| width: 100%; | |
| height: 60%; | |
| background-color: #e0e0e0; | |
| margin-bottom: 20px; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| .controls { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| button { | |
| margin: 10px 0; | |
| padding: 12px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| background-color: #4CAF50; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: #45a049; | |
| } | |
| #result { | |
| margin-top: 20px; | |
| font-weight: bold; | |
| text-align: center; | |
| font-size: 18px; | |
| } | |
| .score { | |
| text-align: center; | |
| font-size: 24px; | |
| margin-bottom: 20px; | |
| } | |
| .loading { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 24px; | |
| color: #333; | |
| } | |
| #panorama-placeholder { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| color: #666; | |
| text-align: center; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| </style></head><body> | |
| <div class="container"> | |
| <div class="street-view"> | |
| <div id="panorama"> | |
| <div id="panorama-placeholder" style="background-image: url('https://image.pollinations.ai/prompt/A%20vibrant%20street%20scene%20in%20Kuala%20Lumpur,%20Malaysia,%20with%20modern%20skyscrapers%20and%20bustling%20street%20life'); background-size: cover; background-position: center;"></div> | |
| </div> | |
| </div> | |
| <div class="map-interface"> | |
| <h2 style="text-align: center;">GeoGuessr.AI</h2> | |
| <div class="score">Score: <span id="score">0</span></div> | |
| <div id="world-map"></div> | |
| <div class="controls"> | |
| <button id="guess-btn">Make a Guess</button> | |
| <button id="next-btn">Next Location</button> | |
| </div> | |
| <div id="result"></div> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script> | |
| <script> | |
| let currentCountry = 'Malaysia'; | |
| let score = 0; | |
| const countries = ['USA', 'Japan', 'France', 'Brazil', 'Australia', 'Egypt', 'India', 'Canada', 'Italy', 'South Africa', 'Germany', 'Mexico', 'Argentina', 'Spain', 'Russia', 'China', 'UK', 'Thailand', 'Greece', 'New Zealand', 'Malaysia', 'Singapore', 'Indonesia', 'Vietnam', 'South Korea']; | |
| function simulatePanoramaLoading() { | |
| const placeholder = document.getElementById('panorama-placeholder'); | |
| placeholder.style.backgroundImage = ''; | |
| setTimeout(() => { | |
| const cityName = getCityName(currentCountry); | |
| const prompt = `A street scene in ${cityName}, ${currentCountry}, showing typical architecture and street life`; | |
| const encodedPrompt = encodeURIComponent(prompt); | |
| placeholder.style.backgroundImage = `url('https://image.pollinations.ai/prompt/${encodedPrompt}')`; | |
| }, 1500); | |
| } | |
| function getCityName(country) { | |
| const cities = { | |
| 'USA': 'New York', | |
| 'Japan': 'Tokyo', | |
| 'France': 'Paris', | |
| 'Brazil': 'Rio de Janeiro', | |
| 'Australia': 'Sydney', | |
| 'Egypt': 'Cairo', | |
| 'India': 'Mumbai', | |
| 'Canada': 'Toronto', | |
| 'Italy': 'Rome', | |
| 'South Africa': 'Cape Town', | |
| 'Germany': 'Berlin', | |
| 'Mexico': 'Mexico City', | |
| 'Argentina': 'Buenos Aires', | |
| 'Spain': 'Barcelona', | |
| 'Russia': 'Moscow', | |
| 'China': 'Shanghai', | |
| 'UK': 'London', | |
| 'Thailand': 'Bangkok', | |
| 'Greece': 'Athens', | |
| 'New Zealand': 'Auckland', | |
| 'Malaysia': 'Kuala Lumpur', | |
| 'Singapore': 'Singapore', | |
| 'Indonesia': 'Jakarta', | |
| 'Vietnam': 'Ho Chi Minh City', | |
| 'South Korea': 'Seoul' | |
| }; | |
| return cities[country] || country; | |
| } | |
| function initWorldMap() { | |
| const width = document.getElementById('world-map').clientWidth; | |
| const height = document.getElementById('world-map').clientHeight; | |
| const svg = d3.select("#world-map") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| const g = svg.append("g"); | |
| const projection = d3.geoMercator() | |
| .scale(width / 6.5) | |
| .translate([width / 2, height / 1.5]); | |
| const path = d3.geoPath().projection(projection); | |
| const zoom = d3.zoom() | |
| .scaleExtent([1, 8]) | |
| .on("zoom", zoomed); | |
| svg.call(zoom); | |
| function zoomed(event) { | |
| g.attr("transform", event.transform); | |
| } | |
| d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json").then(function(world) { | |
| g.selectAll("path") | |
| .data(topojson.feature(world, world.objects.countries).features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .attr("fill", "#ccc") | |
| .attr("stroke", "#fff") | |
| .on("click", function(event, d) { | |
| const clickedCountry = d.properties.name; | |
| checkGuess(clickedCountry); | |
| }) | |
| .on("mouseover", function() { | |
| d3.select(this).attr("fill", "#999"); | |
| }) | |
| .on("mouseout", function() { | |
| d3.select(this).attr("fill", "#ccc"); | |
| }); | |
| }); | |
| } | |
| function checkGuess(guessedCountry) { | |
| const result = document.getElementById('result'); | |
| if (guessedCountry.toLowerCase() === currentCountry.toLowerCase()) { | |
| score += 100; | |
| result.textContent = "Correct! +100 points"; | |
| result.style.color = "green"; | |
| } else { | |
| result.textContent = `Wrong. It was ${currentCountry}.`; | |
| result.style.color = "red"; | |
| } | |
| document.getElementById('score').textContent = score; | |
| } | |
| function newLocation() { | |
| currentCountry = countries[Math.floor(Math.random() * countries.length)]; | |
| document.getElementById('result').textContent = ''; | |
| simulatePanoramaLoading(); | |
| } | |
| document.getElementById('guess-btn').addEventListener('click', () => { | |
| alert("Click on a country in the world map to make your guess!"); | |
| }); | |
| document.getElementById('next-btn').addEventListener('click', newLocation); | |
| window.onload = () => { | |
| initWorldMap(); | |
| simulatePanoramaLoading(); | |
| }; | |
| </script> | |
| </body></html> |