map-com / index.html
Tejas123we's picture
Add 3 files
bd7a8b9 verified
Raw History Blame Contribute Delete
31.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frontier - Advanced Interactive Map</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">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600;700&display=swap');
:root {
--primary: #1a365d;
--secondary: #2a4365;
--accent: #4299e1;
--text: #ebf8ff;
--map-bg: #1a202c;
}
body {
font-family: 'Geologica', sans-serif;
background-color: var(--map-bg);
color: var(--text);
overflow: hidden;
height: 100vh;
}
#map {
height: 100%;
width: 100%;
z-index: 1;
}
.map-overlay {
position: absolute;
z-index: 2;
pointer-events: none;
}
.map-control {
pointer-events: all;
background-color: rgba(26, 32, 44, 0.8);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.chat-container {
position: absolute;
bottom: 20px;
right: 20px;
width: 350px;
max-height: 500px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
transform: translateY(calc(100% - 60px));
}
.chat-container.open {
transform: translateY(0);
}
.chat-messages {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--accent) var(--secondary);
}
.chat-messages::-webkit-scrollbar {
width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
background: var(--secondary);
}
.chat-messages::-webkit-scrollbar-thumb {
background-color: var(--accent);
border-radius: 6px;
}
.ai-message {
background-color: rgba(42, 67, 101, 0.8);
border-left: 3px solid var(--accent);
}
.user-message {
background-color: rgba(26, 32, 44, 0.8);
border-right: 3px solid #48bb78;
}
.marker-popup {
background-color: var(--map-bg);
color: var(--text);
border-radius: 8px;
padding: 8px;
font-family: 'Geologica', sans-serif;
}
.marker-popup h3 {
color: var(--accent);
font-weight: 600;
margin-bottom: 4px;
}
.marker-popup p {
font-size: 0.9rem;
margin-bottom: 6px;
}
.marker-popup img {
border-radius: 4px;
margin-bottom: 8px;
max-width: 100%;
}
.rainbow {
background: linear-gradient(to right, #4299e1, #48bb78, #f6e05e, #ed8936, #f56565);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow 8s ease infinite;
background-size: 400% 100%;
}
@keyframes rainbow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(66, 153, 225, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(66, 153, 225, 0); }
100% { box-shadow: 0 0 0 0 rgba(66, 153, 225, 0); }
}
.location-card {
background-color: rgba(26, 32, 44, 0.9);
transition: all 0.3s ease;
}
.location-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.search-suggestions {
max-height: 300px;
overflow-y: auto;
}
</style>
</head>
<body class="h-screen overflow-hidden">
<!-- Map Container -->
<div id="map"></div>
<!-- Top Controls -->
<div class="map-overlay top-4 left-4">
<div class="map-control p-3 w-64">
<div class="flex items-center justify-between mb-3">
<h1 class="text-xl font-bold rainbow">Frontier</h1>
<div class="text-xs bg-blue-600 px-2 py-1 rounded-full">v2.1.0</div>
</div>
<div class="relative">
<input type="text" id="search-input" placeholder="Search locations..." class="w-full bg-gray-800 text-white px-3 py-2 rounded border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
<div id="search-suggestions" class="search-suggestions absolute left-0 right-0 mt-1 bg-gray-800 rounded shadow-lg hidden z-10">
<!-- Suggestions will appear here -->
</div>
</div>
<div class="mt-3 flex justify-between text-xs">
<button id="locate-me" class="px-2 py-1 bg-blue-600 hover:bg-blue-700 rounded flex items-center">
<i class="fas fa-location-arrow mr-1"></i> Locate Me
</button>
<button id="map-style" class="px-2 py-1 bg-gray-700 hover:bg-gray-600 rounded flex items-center">
<i class="fas fa-layer-group mr-1"></i> Satellite
</button>
</div>
</div>
</div>
<!-- Layer Controls -->
<div class="map-overlay top-4 right-4">
<div class="map-control p-3 w-48">
<h3 class="font-medium mb-2">Map Layers</h3>
<div class="space-y-2">
<label class="flex items-center space-x-2 text-sm">
<input type="checkbox" id="poi-toggle" class="form-checkbox text-blue-500" checked>
<span>Points of Interest</span>
</label>
<label class="flex items-center space-x-2 text-sm">
<input type="checkbox" id="traffic-toggle" class="form-checkbox text-blue-500">
<span>Traffic</span>
</label>
<label class="flex items-center space-x-2 text-sm">
<input type="checkbox" id="weather-toggle" class="form-checkbox text-blue-500" checked>
<span>Weather</span>
</label>
</div>
</div>
</div>
<!-- Location Info Panel -->
<div id="location-panel" class="map-overlay bottom-4 left-4 hidden">
<div class="map-control p-4 w-80 location-card">
<div class="flex justify-between items-start mb-3">
<div>
<h2 id="location-name" class="text-lg font-bold text-blue-400">Location Name</h2>
<p id="location-address" class="text-sm text-gray-400">123 Main St, City</p>
</div>
<button id="close-panel" class="text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div id="location-image" class="mb-3 rounded bg-gray-700 h-32 flex items-center justify-center">
<i class="fas fa-image text-gray-500 text-3xl"></i>
</div>
<div id="location-details" class="text-sm space-y-2">
<p><i class="fas fa-info-circle text-blue-400 mr-2"></i> <span id="location-description">Description of the location.</span></p>
<p><i class="fas fa-tag text-blue-400 mr-2"></i> <span id="location-category">Category</span></p>
<p><i class="fas fa-star text-blue-400 mr-2"></i> <span id="location-rating">4.5/5 (120 reviews)</span></p>
<p><i class="fas fa-clock text-blue-400 mr-2"></i> <span id="location-hours">Open now: 9AM - 5PM</span></p>
</div>
<div class="mt-4 flex space-x-2">
<button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm">
<i class="fas fa-directions mr-1"></i> Directions
</button>
<button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded text-sm">
<i class="fas fa-bookmark mr-1"></i> Save
</button>
</div>
</div>
</div>
<!-- Frontier AI Chat -->
<div id="chat-container" class="chat-container map-control bg-gray-800 rounded-lg shadow-xl">
<div class="bg-blue-600 px-4 py-3 rounded-t-lg flex justify-between items-center cursor-pointer" id="chat-header">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center mr-3">
<i class="fas fa-robot text-blue-600"></i>
</div>
<div>
<div class="font-bold">Frontier AI</div>
<div class="text-xs opacity-80">Ask me about any location</div>
</div>
</div>
<div>
<i class="fas fa-chevron-up" id="chat-toggle-icon"></i>
</div>
</div>
<div class="chat-messages p-4 space-y-3" id="chat-messages">
<div class="ai-message p-3 rounded-lg">
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center mr-3 flex-shrink-0">
<i class="fas fa-robot text-white"></i>
</div>
<div>
<div class="font-medium text-blue-300">Frontier AI</div>
<div class="mt-1 text-sm">Hello! I'm Frontier, your intelligent map assistant. Ask me about any location, get recommendations, or learn about points of interest. How can I help you explore today?</div>
</div>
</div>
</div>
</div>
<div class="p-3 border-t border-gray-700">
<div class="flex items-center bg-gray-700 rounded-lg">
<input type="text" id="chat-input" placeholder="Ask about a location..." class="flex-1 bg-transparent border-none px-3 py-2 text-sm outline-none">
<button id="send-message" class="px-3 py-2 text-blue-400 hover:text-blue-300">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<!-- Weather Widget -->
<div class="map-overlay top-20 right-4">
<div class="map-control p-3 w-48 bg-gradient-to-br from-blue-900 to-blue-800 rounded-lg">
<div class="flex justify-between items-center mb-2">
<div>
<div class="text-sm">Current Weather</div>
<div class="text-xl font-bold" id="weather-temp">24°C</div>
</div>
<div class="text-3xl" id="weather-icon">
<i class="fas fa-sun text-yellow-300"></i>
</div>
</div>
<div class="text-xs space-y-1">
<div class="flex justify-between">
<span>Humidity:</span>
<span id="weather-humidity">65%</span>
</div>
<div class="flex justify-between">
<span>Wind:</span>
<span id="weather-wind">12 km/h</span>
</div>
<div class="flex justify-between">
<span>Precip:</span>
<span id="weather-precip">0%</span>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// Initialize the map
const map = L.map('map').setView([51.505, -0.09], 13);
// Add base tile layers
const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
const satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
osmLayer.addTo(map);
// Sample points of interest data
const poiData = [
{
id: 1,
name: "Central Park",
lat: 51.505,
lng: -0.09,
category: "Park",
description: "A large public park with walking trails, lakes, and recreational facilities.",
rating: 4.7,
reviews: 1245,
hours: "Open 24 hours",
address: "Park Lane, London W1K 1QA"
},
{
id: 2,
name: "Museum of Modern Art",
lat: 51.508,
lng: -0.095,
category: "Museum",
description: "World-renowned museum featuring contemporary art exhibitions and collections.",
rating: 4.8,
reviews: 982,
hours: "10AM - 6PM",
address: "25 Museum St, London WC1A 1BA"
},
{
id: 3,
name: "The Grand Restaurant",
lat: 51.503,
lng: -0.087,
category: "Restaurant",
description: "Award-winning fine dining with panoramic city views and seasonal menus.",
rating: 4.6,
reviews: 756,
hours: "12PM - 11PM",
address: "1 Riverside, London SE1 2AA"
},
{
id: 4,
name: "City Shopping Mall",
lat: 51.507,
lng: -0.083,
category: "Shopping",
description: "Largest shopping center in the city with over 300 stores and restaurants.",
rating: 4.4,
reviews: 1543,
hours: "9AM - 9PM",
address: "400 Oxford St, London W1A 1AB"
},
{
id: 5,
name: "Historic Cathedral",
lat: 51.501,
lng: -0.085,
category: "Landmark",
description: "Gothic cathedral with 700 years of history and stunning architecture.",
rating: 4.9,
reviews: 2301,
hours: "8AM - 5PM",
address: "St. Paul's Churchyard, London EC4M 8AD"
}
];
// Create markers for points of interest
const poiMarkers = [];
poiData.forEach(poi => {
const marker = L.marker([poi.lat, poi.lng], {
icon: L.divIcon({
className: 'pulse',
html: `<div class="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-lg">
<i class="fas ${getIconForCategory(poi.category)} text-xs"></i>
</div>`,
iconSize: [24, 24]
})
}).addTo(map);
marker.bindPopup(`
<div class="marker-popup">
<h3>${poi.name}</h3>
<p><i class="fas ${getIconForCategory(poi.category)} text-blue-400 mr-1"></i> ${poi.category}</p>
<p>${poi.description}</p>
<p><i class="fas fa-star text-yellow-400 mr-1"></i> ${poi.rating}/5 (${poi.reviews} reviews)</p>
<button onclick="showLocationDetails(${poi.id})" class="mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white text-sm py-1 rounded">
More Info
</button>
</div>
`);
marker.poiData = poi;
poiMarkers.push(marker);
});
// Function to get appropriate icon for category
function getIconForCategory(category) {
switch(category.toLowerCase()) {
case 'park': return 'fa-tree';
case 'museum': return 'fa-landmark';
case 'restaurant': return 'fa-utensils';
case 'shopping': return 'fa-shopping-bag';
case 'landmark': return 'fa-monument';
default: return 'fa-map-marker-alt';
}
}
// Show location details in panel
function showLocationDetails(id) {
const poi = poiData.find(item => item.id === id);
if (!poi) return;
document.getElementById('location-name').textContent = poi.name;
document.getElementById('location-address').textContent = poi.address;
document.getElementById('location-description').textContent = poi.description;
document.getElementById('location-category').textContent = poi.category;
document.getElementById('location-rating').textContent = `${poi.rating}/5 (${poi.reviews} reviews)`;
document.getElementById('location-hours').textContent = poi.hours;
// Simulate loading an image
const imageContainer = document.getElementById('location-image');
imageContainer.innerHTML = `
<div class="w-full h-full bg-gradient-to-br from-blue-900 to-blue-700 rounded flex items-center justify-center">
<i class="fas fa-image text-gray-300 text-4xl"></i>
</div>
`;
// In a real app, you would load actual images here
setTimeout(() => {
imageContainer.innerHTML = `
<div class="w-full h-full bg-cover bg-center rounded" style="background-image: url('https://source.unsplash.com/random/400x200/?${poi.category},${poi.name.split(' ').join(',')}')"></div>
`;
}, 500);
document.getElementById('location-panel').classList.remove('hidden');
map.closePopup();
}
// Close location panel
document.getElementById('close-panel').addEventListener('click', () => {
document.getElementById('location-panel').classList.add('hidden');
});
// Toggle map style
let currentLayer = 'street';
document.getElementById('map-style').addEventListener('click', () => {
if (currentLayer === 'street') {
map.removeLayer(osmLayer);
satelliteLayer.addTo(map);
document.getElementById('map-style').innerHTML = '<i class="fas fa-map mr-1"></i> Street';
currentLayer = 'satellite';
} else {
map.removeLayer(satelliteLayer);
osmLayer.addTo(map);
document.getElementById('map-style').innerHTML = '<i class="fas fa-layer-group mr-1"></i> Satellite';
currentLayer = 'street';
}
});
// Locate me button
document.getElementById('locate-me').addEventListener('click', () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
map.flyTo([position.coords.latitude, position.coords.longitude], 15);
L.marker([position.coords.latitude, position.coords.longitude], {
icon: L.divIcon({
className: 'pulse',
html: `<div class="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center text-white shadow-lg">
<i class="fas fa-user text-sm"></i>
</div>`,
iconSize: [32, 32]
})
}).addTo(map).bindPopup("Your location").openPopup();
},
(error) => {
alert("Could not get your location: " + error.message);
}
);
} else {
alert("Geolocation is not supported by your browser");
}
});
// Toggle POI markers
document.getElementById('poi-toggle').addEventListener('change', (e) => {
poiMarkers.forEach(marker => {
if (e.target.checked) {
map.addLayer(marker);
} else {
map.removeLayer(marker);
}
});
});
// Search functionality
document.getElementById('search-input').addEventListener('input', (e) => {
const query = e.target.value.toLowerCase();
const suggestionsContainer = document.getElementById('search-suggestions');
if (query.length < 2) {
suggestionsContainer.classList.add('hidden');
return;
}
const matches = poiData.filter(poi =>
poi.name.toLowerCase().includes(query) ||
poi.category.toLowerCase().includes(query) ||
poi.description.toLowerCase().includes(query)
);
if (matches.length > 0) {
suggestionsContainer.innerHTML = matches.slice(0, 5).map(poi => `
<div class="px-3 py-2 hover:bg-gray-700 cursor-pointer flex items-center" onclick="selectSearchResult(${poi.id})">
<i class="fas ${getIconForCategory(poi.category)} text-blue-400 mr-2"></i>
<div>
<div class="font-medium">${poi.name}</div>
<div class="text-xs text-gray-400">${poi.category} • ${poi.address}</div>
</div>
</div>
`).join('');
suggestionsContainer.classList.remove('hidden');
} else {
suggestionsContainer.innerHTML = `
<div class="px-3 py-2 text-gray-400 text-sm">
No results found for "${query}"
</div>
`;
suggestionsContainer.classList.remove('hidden');
}
});
// Select search result
function selectSearchResult(id) {
const poi = poiData.find(item => item.id === id);
if (!poi) return;
map.flyTo([poi.lat, poi.lng], 15);
showLocationDetails(id);
document.getElementById('search-input').value = poi.name;
document.getElementById('search-suggestions').classList.add('hidden');
}
// Chat functionality
const chatContainer = document.getElementById('chat-container');
const chatMessages = document.getElementById('chat-messages');
const chatInput = document.getElementById('chat-input');
const chatToggle = document.getElementById('chat-header');
const chatToggleIcon = document.getElementById('chat-toggle-icon');
let isChatOpen = false;
chatToggle.addEventListener('click', () => {
isChatOpen = !isChatOpen;
if (isChatOpen) {
chatContainer.classList.add('open');
chatToggleIcon.classList.remove('fa-chevron-up');
chatToggleIcon.classList.add('fa-chevron-down');
chatInput.focus();
} else {
chatContainer.classList.remove('open');
chatToggleIcon.classList.remove('fa-chevron-down');
chatToggleIcon.classList.add('fa-chevron-up');
}
});
function addMessage(sender, message, isAI = false) {
const messageDiv = document.createElement('div');
messageDiv.className = isAI ? 'ai-message p-3 rounded-lg' : 'user-message p-3 rounded-lg';
messageDiv.innerHTML = `
<div class="flex items-start">
<div class="w-8 h-8 rounded-full ${isAI ? 'bg-blue-600' : 'bg-green-600'} flex items-center justify-center mr-3 flex-shrink-0">
<i class="fas ${isAI ? 'fa-robot' : 'fa-user'} text-white"></i>
</div>
<div>
<div class="font-medium ${isAI ? 'text-blue-300' : 'text-green-300'}">${sender}</div>
<div class="mt-1 text-sm">${message}</div>
</div>
</div>
`;
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function sendMessage() {
const message = chatInput.value.trim();
if (!message) return;
addMessage('You', message, false);
chatInput.value = '';
// Simulate AI response
setTimeout(() => {
const response = generateAIResponse(message);
addMessage('Frontier AI', response, true);
}, 1000);
}
chatInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
document.getElementById('send-message').addEventListener('click', sendMessage);
// Simple AI response generator
function generateAIResponse(query) {
const lowerQuery = query.toLowerCase();
if (lowerQuery.includes('hello') || lowerQuery.includes('hi')) {
return "Hello! I'm Frontier, your intelligent map assistant. How can I help you explore today?";
}
if (lowerQuery.includes('restaurant') || lowerQuery.includes('eat') || lowerQuery.includes('food')) {
return "I can recommend several great restaurants in the area. The Grand Restaurant has excellent reviews (4.6/5) and offers fine dining with panoramic city views. Would you like directions there?";
}
if (lowerQuery.includes('park') || lowerQuery.includes('green')) {
return "Central Park is a beautiful public space with walking trails and lakes. It's open 24 hours and has a 4.7/5 rating from visitors. Would you like more information about it?";
}
if (lowerQuery.includes('museum') || lowerQuery.includes('art')) {
return "The Museum of Modern Art is a world-renowned institution with contemporary art exhibitions. It's open from 10AM to 6PM and has a 4.8/5 rating. I can show you its location on the map if you'd like.";
}
if (lowerQuery.includes('shop') || lowerQuery.includes('mall') || lowerQuery.includes('store')) {
return "The City Shopping Mall is the largest shopping center in the area with over 300 stores. It's open from 9AM to 9PM and has a 4.4/5 rating. Would you like to see its location?";
}
if (lowerQuery.includes('historic') || lowerQuery.includes('landmark') || lowerQuery.includes('cathedral')) {
return "The Historic Cathedral is a stunning gothic building with 700 years of history. It's open from 8AM to 5PM and has excellent reviews (4.9/5). I can provide more details if you're interested.";
}
if (lowerQuery.includes('help')) {
return "I can help you with: <br>- Finding points of interest <br>- Getting directions <br>- Providing location details <br>- Recommending places to visit <br>- Answering questions about the area <br>What would you like to know?";
}
// Default response if no specific match
const randomResponses = [
"I found some information about that location. Would you like me to show it on the map?",
"That's an interesting question! I can provide details about that place if you'd like.",
"I have information about that area. Would you like to learn more?",
"I can help you explore that location. Would you like directions or more details?"
];
return randomResponses[Math.floor(Math.random() * randomResponses.length)];
}
// Simulate weather data
function updateWeather() {
const weatherConditions = ['sun', 'cloud', 'cloud-rain', 'bolt'];
const weatherIcons = {
'sun': 'fa-sun',
'cloud': 'fa-cloud',
'cloud-rain': 'fa-cloud-rain',
'bolt': 'fa-bolt'
};
const condition = weatherConditions[Math.floor(Math.random() * weatherConditions.length)];
const temp = Math.floor(Math.random() * 15) + 15; // 15-30°C
const humidity = Math.floor(Math.random() * 30) + 50; // 50-80%
const wind = Math.floor(Math.random() * 10) + 5; // 5-15 km/h
const precip = Math.floor(Math.random() * 30); // 0-30%
document.getElementById('weather-temp').textContent = `${temp}°C`;
document.getElementById('weather-icon').innerHTML = `<i class="fas ${weatherIcons[condition]} text-yellow-300"></i>`;
document.getElementById('weather-humidity').textContent = `${humidity}%`;
document.getElementById('weather-wind').textContent = `${wind} km/h`;
document.getElementById('weather-precip').textContent = `${precip}%`;
}
// Update weather every 30 minutes
updateWeather();
setInterval(updateWeather, 1800000);
// Close suggestions when clicking outside
document.addEventListener('click', (e) => {
if (!e.target.closest('#search-input') && !e.target.closest('#search-suggestions')) {
document.getElementById('search-suggestions').classList.add('hidden');
}
});
</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=Tejas123we/map-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>