tiennm99/vigeoguessr
1
0 Fork 0
mirror of https://github.com/tiennm99/vigeoguessr.git synced 2026-10-12 14:15:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: tiennm99/vigeoguessr:dev
tiennm99/vigeoguessr:main tiennm99/vigeoguessr:dev
...
compare: tiennm99/vigeoguessr:main
tiennm99/vigeoguessr:main tiennm99/vigeoguessr:dev
3 Commits
dev ... main
Author SHA1 Message Date
tiennm99 06bbf0e0bb fix: load stylesheets and images relative to the Pages subpath 2026-10-08 16:47:47 +07:00
tiennm99 91b37be2f8 chore: host on GitHub Pages and remove Netlify references 2026-10-08 16:42:06 +07:00
tiennm99 81c1f98532 feat(netlify): add 2025-12-06 22:52:30 +07:00
3 changed files with 212 additions and 165 deletions
Expand all files Collapse all files

No files matched your search

README.md
+2
View File
@@ -4,3 +4,5 @@
- [viguessr](https://github.com/luuvanduc1999/viguessr) - [viguessr](https://github.com/luuvanduc1999/viguessr)
- [geoguessr](https://github.com/bensizelove/geoguessr) - [geoguessr](https://github.com/bensizelove/geoguessr)
Hosted on [GitHub Pages](https://tiennm99.github.io/vigeoguessr/).
game.html
+21 -21
View File
@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VIGEOGUESSR - Play Now</title> <title>VIGEOGUESSR - Play Now</title>
<link href="https://fonts.googleapis.com/css2?family=Jersey+15:wght@400&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Jersey+15:wght@400&display=swap" rel="stylesheet" />
<link href='../assets/css/game.css' rel="stylesheet" /> <link href='assets/css/game.css' rel="stylesheet" />
<script src="/assets/js/game.js" type="text/javascript"></script> <script src="assets/js/game.js" type="text/javascript"></script>
<!-- Leaflet for maps --> <!-- Leaflet for maps -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
@@ -37,7 +37,7 @@
<body> <body>
<div class="main-container"> <div class="main-container">
<div class="background-layer"></div> <div class="background-layer"></div>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="gradient-overlay"> <div class="gradient-overlay">
<header class="header"> <header class="header">
@@ -47,80 +47,80 @@
</div> </div>
<div class="header-right"> <div class="header-right">
<div class="connect-wallet" onclick="showDonateModal()"> <div class="connect-wallet" onclick="showDonateModal()">
<div style="width: 20px; height: 20px; background-image: url('../assets/images/wallet.svg'); background-size: contain;"></div> <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> <span class="wallet-text">BUY ME COFFEE</span>
</div> </div>
</div> </div>
</header> </header>
<div class="game-section"> <div class="game-section">
<div class="score-header"> <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> <div class="diamond-icon" style="background-image: url('assets/images/back.svg');"></div>
</button> </button>
</div> </div>
<div class="game-content"> <div class="game-content">
<div class="pano" id="pano"> <div class="pano" id="pano">
</div> </div>
<div class="right-panel"> <div class="right-panel">
<div class="disclaimer" id="map"></div> <div class="disclaimer" id="map"></div>
<button class="check-btn" id="check" disabled onclick="check()"> <button class="check-btn" id="check" disabled onclick="check()">
<div class="check-text">SUBMIT</div> <div class="check-text">SUBMIT</div>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
function startGame(location ) { function startGame(location ) {
// Redirect to the game page // Redirect to the game page
window.location.href = 'game.html?location=' + location; window.location.href = 'game.html?location=' + location;
// You can also add any additional logic here, like initializing the game state // You can also add any additional logic here, like initializing the game state
} }
function bridgeToL2() { function bridgeToL2() {
alert('Bridging to Layer 2...'); alert('Bridging to Layer 2...');
// Bridge functionality would go here // Bridge functionality would go here
} }
function navigate(page) { function navigate(page) {
console.log('Navigating to:', page); console.log('Navigating to:', page);
// Navigation logic would go here // Navigation logic would go here
} }
function openSocial(platform) { function openSocial(platform) {
console.log('Opening social platform:', platform); console.log('Opening social platform:', platform);
// Social media links would go here // Social media links would go here
} }
// Add interactive hover effects // Add interactive hover effects
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('button, .connect-wallet'); const buttons = document.querySelectorAll('button, .connect-wallet');
buttons.forEach(button => { buttons.forEach(button => {
button.addEventListener('mouseenter', function() { button.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.05)'; this.style.transform = 'scale(1.05)';
}); });
button.addEventListener('mouseleave', function() { button.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)'; this.style.transform = 'scale(1)';
}); });
button.addEventListener('mousedown', function() { button.addEventListener('mousedown', function() {
this.style.transform = 'scale(0.95)'; this.style.transform = 'scale(0.95)';
}); });
button.addEventListener('mouseup', function() { button.addEventListener('mouseup', function() {
this.style.transform = 'scale(1.05)'; this.style.transform = 'scale(1.05)';
}); });
@@ -156,4 +156,4 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>
index.html
+189 -144
View File
@@ -1,174 +1,219 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VIGEOGUESSR - Play Now</title> <title>VIGEOGUESSR - Play Now</title>
<link href="https://fonts.googleapis.com/css2?family=Jersey+15:wght@400&display=swap" rel="stylesheet" /> <link
<link href='../assets/css/index.css' rel="stylesheet" /> 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" /> <link rel="icon" type="image/png" href="logo.png" />
<!-- SEO Meta Tags --> <!-- 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
<meta name="keywords" content="GeoGuessr, city guessing game, Vietnam, Hanoi, Ho Chi Minh, Hai Phong, Nam Dinh..., play online" /> 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 name="author" content="Duc Luu Van" />
<meta property="og:title" content="VIGEOGUESSR - Play Now" /> <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
<meta property="og:image" content="https://vigeoguessr.miti99.com/assets/images/thumbx.png" /> 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:type" content="website" />
<meta property="og:url" content="https://vigeoguessr.miti99.com/" /> <meta property="og:url" content="https://vigeoguessr.miti99.com/" />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="VIGEOGUESSR - Play Now" /> <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" /> <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> <script
</head> type="module"
<body> 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="main-container">
<div class="background-layer"></div> <div class="background-layer"></div>
<div class="content-wrapper">
<div class="gradient-overlay">
<header class="header">
<div class="header-center"> <div class="content-wrapper">
<div class="logo-icon" style="background-image: url('logo.png');"></div> <div class="gradient-overlay">
<h3 class="logo-title">VIGEOGUESSR</h3> <header class="header">
</div> <div class="header-center">
<div class="header-right"> <div
<div class="connect-wallet" onclick="showDonateModal()"> class="logo-icon"
<div style="width: 20px; height: 20px; background-image: url('../assets/images/wallet.svg'); background-size: contain;"></div> style="background-image: url('logo.png')"
<span class="wallet-text">BUY ME COFFEE</span> ></div>
</div> <h3 class="logo-title">VIGEOGUESSR</h3>
</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 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>
</div> </div>
<script> <script>
function startGame(location ) { function startGame(location) {
// Redirect to the game page // Redirect to the game page
window.location.href = 'game.html?location=' + location; window.location.href = "game.html?location=" + location;
// You can also add any additional logic here, like initializing the game state // 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() { function bridgeToL2() {
const modal = document.getElementById("donateModal"); alert("Bridging to Layer 2...");
// Bridge functionality would go here
}
// Show the modal function navigate(page) {
modal.style.display = "block"; 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() { function showDonateModal() {
const modal = document.getElementById("donateModal"); 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)';
});
});
// 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> </script>
<div id="donateModal" class="modal"> <div id="donateModal" class="modal">
<div class="modal-donate"> <div class="modal-donate">
<div class='score-text'>DONATE HERE</div> <div class="score-text">DONATE HERE</div>
<img class ='qr' src="QR.png" style="width:320px; height:auto;"/> <img class="qr" src="QR.png" style="width: 320px; height: auto" />
<button onclick="closeDonate()" class='next-btn'><div class="next-text">CLOSE</div></button> <button onclick="closeDonate()" class="next-btn">
</div> <div class="next-text">CLOSE</div>
</button>
</div>
</div> </div>
</body> </body>
</html> </html>