Hugging Face's logo

Spaces:
involvex
/
gamingai
Running

App Files Community
gamingai / index.html
involvex's picture
involvex
Add 3 files
b196e51 verified
Raw
History Blame Contribute Delete
16.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>New World Location Guide</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 /* Custom CSS for smooth transitions and overlay effects */
 .overlay-container {
 transition: all 0.3s ease;
 transform: translateY(0);
 opacity: 1;
 }
 .overlay-container.hidden {
 transform: translateY(20px);
 opacity: 0;
 pointer-events: none;
 }
 .map-marker {
 position: absolute;
 width: 16px;
 height: 16px;
 background-color: #F59E0B;
 border-radius: 50%;
 border: 2px solid white;
 transform: translate(-50%, -50%);
 cursor: pointer;
 transition: all 0.2s ease;
 }
 .map-marker:hover {
 transform: translate(-50%, -50%) scale(1.3);
 z-index: 10;
 }
 .map-marker.active {
 background-color: #EF4444;
 box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
 }
 .map-container {
 position: relative;
 background-image: url('https://via.placeholder.com/800x600/1F2937/FFFFFF?text=New+World+Map');
 background-size: cover;
 background-position: center;
 }
 .scrollable-content {
 scrollbar-width: thin;
 scrollbar-color: #4B5563 #1F2937;
 }
 .scrollable-content::-webkit-scrollbar {
 width: 6px;
 }
 .scrollable-content::-webkit-scrollbar-track {
 background: #1F2937;
 }
 .scrollable-content::-webkit-scrollbar-thumb {
 background-color: #4B5563;
 border-radius: 3px;
 }
 .hotkey-badge {
 font-family: monospace;
 }
 </style>
</head>
<body class="bg-gray-900 text-gray-100 font-sans">
 <!-- Main Overlay Container -->
 <div id="overlay" class="overlay-container fixed bottom-4 right-4 w-96 bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-700">
 <!-- Header with title and close button -->
 <div class="flex items-center justify-between px-4 py-3 bg-gray-900 border-b border-gray-700">
 <div class="flex items-center space-x-2">
 <i class="fas fa-map-marked-alt text-amber-500"></i>
 <h2 class="font-bold text-lg">New World Locations</h2>
 </div>
 <div class="flex items-center space-x-3">
 <span class="text-xs bg-gray-700 px-2 py-1 rounded hotkey-badge">ALT+Z</span>
 <button id="close-btn" class="text-gray-400 hover:text-white">
 <i class="fas fa-times"></i>
 </button>
 </div>
 </div>
<!-- Search and Filter Bar -->
 <div class="px-4 py-3 bg-gray-800 border-b border-gray-700">
 <div class="relative">
 <input type="text" placeholder="Search locations..." class="w-full bg-gray-700 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 pl-10">
 <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
 </div>
 <div class="flex space-x-2 mt-2">
 <button class="px-3 py-1 text-xs bg-gray-700 hover:bg-gray-600 rounded-full">All</button>
 <button class="px-3 py-1 text-xs bg-gray-700 hover:bg-gray-600 rounded-full">Resources</button>
 <button class="px-3 py-1 text-xs bg-gray-700 hover:bg-gray-600 rounded-full">Dungeons</button>
 <button class="px-3 py-1 text-xs bg-gray-700 hover:bg-gray-600 rounded-full">Settlements</button>
 </div>
 </div>
<!-- Main Content Area -->
 <div class="flex" style="height: 500px;">
 <!-- Map View -->
 <div class="map-container w-1/2 h-full">
 <!-- Map markers will be added here dynamically -->
 <div class="map-marker" style="top: 30%; left: 25%;" data-location="everfall"></div>
 <div class="map-marker" style="top: 45%; left: 60%;" data-location="windsward"></div>
 <div class="map-marker" style="top: 70%; left: 40%;" data-location="brightwood"></div>
 <div class="map-marker" style="top: 20%; left: 75%;" data-location="monarchs"></div>
 </div>
<!-- Location Details -->
 <div class="w-1/2 flex flex-col border-l border-gray-700">
 <div class="p-4 border-b border-gray-700">
 <h3 class="font-bold text-amber-400" id="location-name">Select a Location</h3>
 <p class="text-sm text-gray-300 mt-1" id="location-description">Click on a map marker to view details</p>
 </div>
<div class="flex-1 overflow-y-auto scrollable-content p-4">
 <div id="location-details" class="space-y-4">
 <!-- Content will be populated when a location is selected -->
 <div class="text-center py-10 text-gray-500">
 <i class="fas fa-map-marker-alt text-3xl mb-2"></i>
 <p>Select a location from the map</p>
 </div>
 </div>
 </div>
<!-- Quick Actions -->
 <div class="p-3 bg-gray-900 border-t border-gray-700 flex justify-between">
 <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm flex items-center">
 <i class="fas fa-route mr-2"></i> Path
 </button>
 <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm flex items-center">
 <i class="fas fa-bookmark mr-2"></i> Bookmark
 </button>
 <button class="px-3 py-1 bg-amber-600 hover:bg-amber-700 rounded text-sm flex items-center">
 <i class="fas fa-share-alt mr-2"></i> Share
 </button>
 </div>
 </div>
 </div>
<!-- Footer with version info -->
 <div class="px-4 py-2 text-xs text-gray-500 bg-gray-900 border-t border-gray-700 flex justify-between">
 <span>v1.0.0</span>
 <span>Overwolf Addon</span>
 </div>
 </div>
<!-- Settings Modal (hidden by default) -->
 <div id="settings-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
 <div class="bg-gray-800 rounded-lg w-96 p-6 border border-gray-700">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-lg font-bold">Settings</h3>
 <button id="close-settings" class="text-gray-400 hover:text-white">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="space-y-4">
 <div>
 <label class="block text-sm font-medium mb-1">Toggle Hotkey</label>
 <div class="flex items-center">
 <input type="text" value="ALT+Z" class="bg-gray-700 text-white px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 w-full hotkey-badge" readonly>
 <button class="ml-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg">
 <i class="fas fa-keyboard"></i>
 </button>
 </div>
 </div>
<div>
 <label class="block text-sm font-medium mb-1">Opacity</label>
 <input type="range" min="50" max="100" value="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
 </div>
<div class="flex items-center justify-between">
 <span class="text-sm">Show in-game</span>
 <label class="relative inline-flex items-center cursor-pointer">
 <input type="checkbox" value="" class="sr-only peer" checked>
 <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-500"></div>
 </label>
 </div>
 </div>
<div class="mt-6 flex justify-end space-x-3">
 <button id="cancel-settings" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg">
 Cancel
 </button>
 <button id="save-settings" class="px-4 py-2 bg-amber-600 hover:bg-amber-700 rounded-lg">
 Save Changes
 </button>
 </div>
 </div>
 </div>
<script>
 // Sample location data
 const locationData = {
 "everfall": {
 name: "Everfall",
 description: "A central territory with valuable resources and dangerous enemies.",
 type: "Settlement",
 level: "25-35",
 resources: ["Iron", "Silver", "Linen", "Timber"],
 enemies: ["Lost", "Corrupted", "Angry Earth"],
 notes: "Contains the Amrine Temple expedition entrance."
 },
 "windsward": {
 name: "Windsward",
 description: "A lush coastal region with abundant resources and moderate danger.",
 type: "Settlement",
 level: "1-25",
 resources: ["Hemp", "Wood", "Stone", "Oil"],
 enemies: ["Pirates", "Wolves", "Boars"],
 notes: "Great starting area for new players."
 },
 "brightwood": {
 name: "Brightwood",
 description: "A haunted forest with valuable mid-game resources.",
 type: "Region",
 level: "30-40",
 resources: ["Starmetal", "Wyrdwood", "Fiber", "Oil"],
 enemies: ["Lost", "Ghosts", "Corrupted"],
 notes: "Contains the Dynasty Shipyard expedition."
 },
 "monarchs": {
 name: "Monarch's Bluffs",
 description: "Cliffside territory with ocean views and early-game resources.",
 type: "Settlement",
 level: "1-25",
 resources: ["Iron", "Stone", "Hemp", "Timber"],
 enemies: ["Pirates", "Corrupted", "Boars"],
 notes: "Good fishing spots along the coast."
 }
 };
 // DOM elements
 const overlay = document.getElementById('overlay');
 const closeBtn = document.getElementById('close-btn');
 const mapMarkers = document.querySelectorAll('.map-marker');
 const locationName = document.getElementById('location-name');
 const locationDescription = document.getElementById('location-description');
 const locationDetails = document.getElementById('location-details');
 const settingsModal = document.getElementById('settings-modal');
 const closeSettings = document.getElementById('close-settings');
 const cancelSettings = document.getElementById('cancel-settings');
 const saveSettings = document.getElementById('save-settings');
 // Toggle overlay visibility
 function toggleOverlay() {
 overlay.classList.toggle('hidden');
 }
 // Handle map marker clicks
 mapMarkers.forEach(marker => {
 marker.addEventListener('click', () => {
 // Remove active class from all markers
 mapMarkers.forEach(m => m.classList.remove('active'));
// Add active class to clicked marker
 marker.classList.add('active');
// Get location data
 const locationId = marker.dataset.location;
 const location = locationData[locationId];
// Update location info
 locationName.textContent = location.name;
 locationDescription.textContent = location.description;
// Create details HTML
 let detailsHTML = `
 <div class="space-y-3">
 <div>
 <h4 class="font-medium text-amber-400">Type</h4>
 <p>${location.type}</p>
 </div>
 <div>
 <h4 class="font-medium text-amber-400">Level Range</h4>
 <p>${location.level}</p>
 </div>
 <div>
 <h4 class="font-medium text-amber-400">Resources</h4>
 <div class="flex flex-wrap gap-1 mt-1">
 ${location.resources.map(res => `<span class="px-2 py-1 bg-gray-700 rounded text-xs">${res}</span>`).join('')}
 </div>
 </div>
 <div>
 <h4 class="font-medium text-amber-400">Enemies</h4>
 <div class="flex flex-wrap gap-1 mt-1">
 ${location.enemies.map(enemy => `<span class="px-2 py-1 bg-gray-700 rounded text-xs">${enemy}</span>`).join('')}
 </div>
 </div>
 <div>
 <h4 class="font-medium text-amber-400">Notes</h4>
 <p class="text-sm">${location.notes}</p>
 </div>
 </div>
 `;
locationDetails.innerHTML = detailsHTML;
 });
 });
 // Event listeners
 closeBtn.addEventListener('click', toggleOverlay);
// For demo purposes, we'll use ALT+Z as the hotkey
 document.addEventListener('keydown', (e) => {
 if (e.altKey && e.key.toLowerCase() === 'z') {
 toggleOverlay();
 }
 });
 // Settings modal controls
 closeBtn.addEventListener('dblclick', () => {
 settingsModal.classList.remove('hidden');
 });
closeSettings.addEventListener('click', () => {
 settingsModal.classList.add('hidden');
 });
cancelSettings.addEventListener('click', () => {
 settingsModal.classList.add('hidden');
 });
saveSettings.addEventListener('click', () => {
 settingsModal.classList.add('hidden');
 // In a real app, you would save settings here
 });
 // Initialize with Windsward selected
 setTimeout(() => {
 document.querySelector('.map-marker[data-location="windsward"]').click();
 }, 100);
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=involvex/gamingai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>