Spaces:

involvex
/

gamingai

Running

File size: 16,307 Bytes

b196e51

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