mirror of
https://github.com/tiennm99/vigeoguessr.git
synced 2026-10-13 22:16:27 +00:00
Compare commits
1
Commits
dev
...
81c1f98532
| Author | SHA1 | Date | |
|---|---|---|---|
 tiennm99
|
81c1f98532 |
No files matched your search
@@ -1,6 +1,10 @@
|
||||
# vigeoguessr
|
||||
|
||||
[](https://app.netlify.com/projects/vigeoguessr/deploys)
|
||||
|
||||
## Credit
|
||||
|
||||
- [viguessr](https://github.com/luuvanduc1999/viguessr)
|
||||
- [geoguessr](https://github.com/bensizelove/geoguessr)
|
||||
|
||||
Hosted on [Netlify](https://www.netlify.com/).
|
||||
@@ -37,7 +37,7 @@
|
||||
<body>
|
||||
<div class="main-container">
|
||||
<div class="background-layer"></div>
|
||||
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="gradient-overlay">
|
||||
<header class="header">
|
||||
@@ -53,74 +53,74 @@
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
<div class="game-section">
|
||||
<div class="score-header">
|
||||
<button class="back-btn" onclick="goBack()">
|
||||
<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>
|
||||
</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)';
|
||||
});
|
||||
@@ -155,5 +155,9 @@
|
||||
<button onclick="closeDonate()" class='next-btn'><div class="next-text">CLOSE</div></button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center">
|
||||
This site is powered by
|
||||
<a href="https://www.netlify.com" target="_blank">Netlify</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
+193
-144
@@ -1,174 +1,223 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>VIGEOGUESSR - 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
|
||||
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="VIGEOGUESSR - 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="description"
|
||||
content="VIGEOGUESSR - 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="VIGEOGUESSR - Play Now" />
|
||||
<meta property="og:description" content="Choose your city and guess the location of the picture. Play VIGEOGUESSR now!" />
|
||||
<meta property="og:image" content="https://vigeoguessr.miti99.com/assets/images/thumbx.png" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Choose your city and guess the location of the picture. Play VIGEOGUESSR now!"
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://vigeoguessr.miti99.com/assets/images/thumbx.png"
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://vigeoguessr.miti99.com/" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="VIGEOGUESSR - Play Now" />
|
||||
<meta name="twitter:description" content="Choose your city and guess the location of the picture. Play VIGEOGUESSR now!" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Choose your city and guess the location of the picture. Play VIGEOGUESSR 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>
|
||||
<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="background-layer"></div>
|
||||
|
||||
<div class="header-center">
|
||||
<div class="logo-icon" style="background-image: url('logo.png');"></div>
|
||||
<h3 class="logo-title">VIGEOGUESSR</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>
|
||||
<button class="bridge-btn" onclick="startGame('DL')">
|
||||
<div class="bridge-text">DALAT</div>
|
||||
</button>
|
||||
<button class="bridge-btn" onclick="startGame('DHLA')">
|
||||
<div class="bridge-text">DUC HOA</div>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</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">VIGEOGUESSR</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>
|
||||
<button class="bridge-btn" onclick="startGame('DL')">
|
||||
<div class="bridge-text">DALAT</div>
|
||||
</button>
|
||||
<button class="bridge-btn" onclick="startGame('DHLA')">
|
||||
<div class="bridge-text">DUC HOA</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 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 showDonateModal() {
|
||||
const modal = document.getElementById("donateModal");
|
||||
function bridgeToL2() {
|
||||
alert("Bridging to Layer 2...");
|
||||
// Bridge functionality would go here
|
||||
}
|
||||
|
||||
// Show the modal
|
||||
modal.style.display = "block";
|
||||
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 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)';
|
||||
});
|
||||
});
|
||||
|
||||
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:320px; height:auto;"/>
|
||||
<button onclick="closeDonate()" class='next-btn'><div class="next-text">CLOSE</div></button>
|
||||
</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: 320px; height: auto" />
|
||||
<button onclick="closeDonate()" class="next-btn">
|
||||
<div class="next-text">CLOSE</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<div style="text-align: center">
|
||||
This site is powered by
|
||||
<a href="https://www.netlify.com" target="_blank">Netlify</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user