Download index.html from GMA2/n: direct link, hf CLI and curl.
- Browser
- Download file 28.5 kB
-
https://huggingface.co/spaces/GMA2/n/resolve/main/index.html
- Command line
-
hf download hf://spaces/GMA2/n/index.html
-
curl -L -o index.html https://huggingface.co/spaces/GMA2/n/resolve/main/index.html
28.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Customizable UI Component</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-scrollbar::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(var(--gradient-angle, 135deg), var(--gradient-color1, #6366f1), var(--gradient-color2, #8b5cf6)); | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .font-sans { | |
| font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | |
| } | |
| .font-serif { | |
| font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; | |
| } | |
| .font-mono { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="container mx-auto p-4 max-w-6xl"> | |
| <!-- Customization Panel --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">UI Customizer</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Color Scheme --> | |
| <div class="space-y-4"> | |
| <h3 class="font-semibold text-gray-700">Color Scheme</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <button onclick="changeTheme('blue')" class="w-8 h-8 rounded-full bg-blue-500 hover:ring-2 ring-blue-300"></button> | |
| <button onclick="changeTheme('red')" class="w-8 h-8 rounded-full bg-red-500 hover:ring-2 ring-red-300"></button> | |
| <button onclick="changeTheme('green')" class="w-8 h-8 rounded-full bg-green-500 hover:ring-2 ring-green-300"></button> | |
| <button onclick="changeTheme('purple')" class="w-8 h-8 rounded-full bg-purple-500 hover:ring-2 ring-purple-300"></button> | |
| <button onclick="changeTheme('indigo')" class="w-8 h-8 rounded-full bg-indigo-500 hover:ring-2 ring-indigo-300"></button> | |
| <button onclick="changeTheme('pink')" class="w-8 h-8 rounded-full bg-pink-500 hover:ring-2 ring-pink-300"></button> | |
| </div> | |
| </div> | |
| <!-- Gradient Settings --> | |
| <div class="space-y-4"> | |
| <h3 class="font-semibold text-gray-700">Gradient</h3> | |
| <div class="flex items-center gap-4"> | |
| <div> | |
| <label class="block text-sm text-gray-600 mb-1">Color 1</label> | |
| <input type="color" id="gradientColor1" value="#6366f1" class="w-10 h-10 cursor-pointer"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-600 mb-1">Color 2</label> | |
| <input type="color" id="gradientColor2" value="#8b5cf6" class="w-10 h-10 cursor-pointer"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-600 mb-1">Angle</label> | |
| <select id="gradientAngle" class="border rounded px-2 py-1 text-sm"> | |
| <option value="0deg">0°</option> | |
| <option value="45deg">45°</option> | |
| <option value="90deg">90°</option> | |
| <option value="135deg" selected>135°</option> | |
| <option value="180deg">180°</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Layout Options --> | |
| <div class="space-y-4"> | |
| <h3 class="font-semibold text-gray-700">Layout</h3> | |
| <div class="flex items-center gap-4"> | |
| <div> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" id="roundedCorners" checked class="rounded text-indigo-600"> | |
| <span class="ml-2 text-sm text-gray-600">Rounded Corners</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" id="shadowEnabled" checked class="rounded text-indigo-600"> | |
| <span class="ml-2 text-sm text-gray-600">Shadows</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div> | |
| <label class="block text-sm text-gray-600 mb-1">Card Style</label> | |
| <select id="cardStyle" class="border rounded px-2 py-1 text-sm"> | |
| <option value="solid">Solid</option> | |
| <option value="outline">Outline</option> | |
| <option value="gradient">Gradient</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Animation Options --> | |
| <div class="space-y-4"> | |
| <h3 class="font-semibold text-gray-700">Animation</h3> | |
| <div class="flex items-center gap-4"> | |
| <div> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" id="hoverAnimation" checked class="rounded text-indigo-600"> | |
| <span class="ml-2 text-sm text-gray-600">Hover Effects</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" id="pulseAnimation" class="rounded text-indigo-600"> | |
| <span class="ml-2 text-sm text-gray-600">Pulse Effect</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Font Options --> | |
| <div class="space-y-4"> | |
| <h3 class="font-semibold text-gray-700">Typography</h3> | |
| <div class="flex items-center gap-4"> | |
| <div> | |
| <label class="block text-sm text-gray-600 mb-1">Font Family</label> | |
| <select id="fontFamily" class="border rounded px-2 py-1 text-sm"> | |
| <option value="sans">Sans-serif</option> | |
| <option value="serif">Serif</option> | |
| <option value="mono">Monospace</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-600 mb-1">Font Size</label> | |
| <select id="fontSize" class="border rounded px-2 py-1 text-sm"> | |
| <option value="sm">Small</option> | |
| <option value="base" selected>Medium</option> | |
| <option value="lg">Large</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reset Button --> | |
| <div class="flex items-end"> | |
| <button onclick="resetCustomization()" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700 text-sm font-medium transition"> | |
| <i class="fas fa-undo mr-2"></i> Reset to Default | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Customizable UI Component --> | |
| <div id="customizableComponent" class="gradient-bg rounded-xl shadow-lg overflow-hidden transition-all duration-300"> | |
| <div class="p-6 text-white"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Customizable Card</h2> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-white/20 transition"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-white/20 transition"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-white/20 transition"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white/20 backdrop-blur-sm p-4 rounded-lg hover:scale-[1.02] transition"> | |
| <div class="flex items-center mb-3"> | |
| <div class="p-2 rounded-full bg-white/30 mr-3"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="font-semibold">Analytics</h3> | |
| </div> | |
| <p class="text-sm opacity-90">Track your performance metrics and gain valuable insights.</p> | |
| </div> | |
| <div class="bg-white/20 backdrop-blur-sm p-4 rounded-lg hover:scale-[1.02] transition"> | |
| <div class="flex items-center mb-3"> | |
| <div class="p-2 rounded-full bg-white/30 mr-3"> | |
| <i class="fas fa-cog"></i> | |
| </div> | |
| <h3 class="font-semibold">Settings</h3> | |
| </div> | |
| <p class="text-sm opacity-90">Customize your preferences and configure system options.</p> | |
| </div> | |
| <div class="bg-white/20 backdrop-blur-sm p-4 rounded-lg hover:scale-[1.02] transition"> | |
| <div class="flex items-center mb-3"> | |
| <div class="p-2 rounded-full bg-white/30 mr-3"> | |
| <i class="fas fa-bell"></i> | |
| </div> | |
| <h3 class="font-semibold">Notifications</h3> | |
| </div> | |
| <p class="text-sm opacity-90">Stay updated with real-time alerts and messages.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white/10 rounded-lg p-4 mb-6"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-semibold">Recent Activity</h3> | |
| <button class="text-xs hover:underline">View All</button> | |
| </div> | |
| <div class="space-y-3 max-h-40 overflow-y-auto custom-scrollbar"> | |
| <div class="flex items-center p-2 hover:bg-white/10 rounded"> | |
| <div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-xs"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">New user registered</p> | |
| <p class="text-xs opacity-75">2 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-2 hover:bg-white/10 rounded"> | |
| <div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-file-invoice-dollar text-xs"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Invoice #1234 paid</p> | |
| <p class="text-xs opacity-75">15 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-2 hover:bg-white/10 rounded"> | |
| <div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-comment text-xs"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">New comment received</p> | |
| <p class="text-xs opacity-75">1 hour ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-3"> | |
| <button id="primaryBtn" class="px-4 py-2 bg-white text-indigo-600 rounded-lg font-medium hover:bg-opacity-90 transition"> | |
| Primary Action | |
| </button> | |
| <button class="px-4 py-2 border border-white text-white rounded-lg font-medium hover:bg-white/10 transition"> | |
| Secondary Action | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Default theme colors | |
| const themes = { | |
| blue: { | |
| primary: 'bg-blue-500', | |
| gradient1: '#3b82f6', | |
| gradient2: '#6366f1', | |
| textColor: 'text-blue-600' | |
| }, | |
| red: { | |
| primary: 'bg-red-500', | |
| gradient1: '#ef4444', | |
| gradient2: '#f97316', | |
| textColor: 'text-red-600' | |
| }, | |
| green: { | |
| primary: 'bg-green-500', | |
| gradient1: '#10b981', | |
| gradient2: '#3b82f6', | |
| textColor: 'text-green-600' | |
| }, | |
| purple: { | |
| primary: 'bg-purple-500', | |
| gradient1: '#8b5cf6', | |
| gradient2: '#ec4899', | |
| textColor: 'text-purple-600' | |
| }, | |
| indigo: { | |
| primary: 'bg-indigo-500', | |
| gradient1: '#6366f1', | |
| gradient2: '#8b5cf6', | |
| textColor: 'text-indigo-600' | |
| }, | |
| pink: { | |
| primary: 'bg-pink-500', | |
| gradient1: '#ec4899', | |
| gradient2: '#f97316', | |
| textColor: 'text-pink-600' | |
| } | |
| }; | |
| // Current theme | |
| let currentTheme = 'indigo'; | |
| // Change theme | |
| function changeTheme(theme) { | |
| currentTheme = theme; | |
| document.getElementById('gradientColor1').value = themes[theme].gradient1; | |
| document.getElementById('gradientColor2').value = themes[theme].gradient2; | |
| updateGradient(); | |
| // Update primary button color | |
| const primaryBtn = document.getElementById('primaryBtn'); | |
| if (primaryBtn) { | |
| // Remove all possible color classes first | |
| Object.values(themes).forEach(t => { | |
| primaryBtn.classList.remove(t.textColor); | |
| }); | |
| // Add the new color class | |
| primaryBtn.classList.add(themes[theme].textColor); | |
| } | |
| } | |
| // Update gradient background | |
| function updateGradient() { | |
| const color1 = document.getElementById('gradientColor1').value; | |
| const color2 = document.getElementById('gradientColor2').value; | |
| const angle = document.getElementById('gradientAngle').value; | |
| const component = document.getElementById('customizableComponent'); | |
| component.style.setProperty('--gradient-color1', color1); | |
| component.style.setProperty('--gradient-color2', color2); | |
| component.style.setProperty('--gradient-angle', angle); | |
| } | |
| // Update rounded corners | |
| function updateCorners() { | |
| const rounded = document.getElementById('roundedCorners').checked; | |
| const component = document.getElementById('customizableComponent'); | |
| const innerCards = document.querySelectorAll('.rounded-lg'); | |
| if (rounded) { | |
| component.classList.add('rounded-xl'); | |
| innerCards.forEach(card => card.classList.add('rounded-lg')); | |
| } else { | |
| component.classList.remove('rounded-xl'); | |
| innerCards.forEach(card => card.classList.remove('rounded-lg')); | |
| } | |
| } | |
| // Update shadows | |
| function updateShadows() { | |
| const shadowEnabled = document.getElementById('shadowEnabled').checked; | |
| const component = document.getElementById('customizableComponent'); | |
| const innerCards = document.querySelectorAll('.bg-white\\/20'); | |
| if (shadowEnabled) { | |
| component.classList.add('shadow-lg'); | |
| innerCards.forEach(card => card.classList.add('shadow-md')); | |
| } else { | |
| component.classList.remove('shadow-lg'); | |
| innerCards.forEach(card => card.classList.remove('shadow-md')); | |
| } | |
| } | |
| // Update card style | |
| function updateCardStyle() { | |
| const style = document.getElementById('cardStyle').value; | |
| const component = document.getElementById('customizableComponent'); | |
| const content = component.querySelector('.p-6'); | |
| const innerCards = component.querySelectorAll('.bg-white\\/20, .bg-white\\/10'); | |
| const buttons = component.querySelectorAll('button'); | |
| // Reset all styles first | |
| component.classList.remove('gradient-bg', 'bg-white', 'border', 'border-gray-200'); | |
| content.classList.remove('text-white', 'text-gray-800'); | |
| // Reset inner cards | |
| innerCards.forEach(card => { | |
| card.classList.remove('bg-white/20', 'bg-white/10', 'bg-gray-100', 'border', 'border-gray-200'); | |
| card.classList.remove('text-white', 'text-gray-800'); | |
| }); | |
| // Reset buttons | |
| buttons.forEach(btn => { | |
| if (!btn.classList.contains('p-2')) { // Skip icon buttons | |
| btn.classList.remove('bg-white', 'border', 'border-white'); | |
| btn.classList.remove('text-white', 'text-gray-800'); | |
| } | |
| }); | |
| // Apply selected style | |
| if (style === 'solid') { | |
| component.classList.add('bg-white'); | |
| content.classList.add('text-gray-800'); | |
| innerCards.forEach(card => { | |
| card.classList.add('bg-gray-100', 'text-gray-800'); | |
| }); | |
| buttons.forEach(btn => { | |
| if (!btn.classList.contains('p-2')) { // Skip icon buttons | |
| if (btn.classList.contains('bg-white')) { | |
| btn.classList.add('bg-gray-800', 'text-white'); | |
| btn.classList.remove('bg-white'); | |
| } else if (btn.classList.contains('border')) { | |
| btn.classList.add('border', 'border-gray-800', 'text-gray-800'); | |
| } | |
| } | |
| }); | |
| } else if (style === 'outline') { | |
| component.classList.add('border', 'border-gray-200', 'bg-white'); | |
| content.classList.add('text-gray-800'); | |
| innerCards.forEach(card => { | |
| card.classList.add('border', 'border-gray-200', 'text-gray-800'); | |
| }); | |
| buttons.forEach(btn => { | |
| if (!btn.classList.contains('p-2')) { // Skip icon buttons | |
| if (btn.classList.contains('bg-white')) { | |
| btn.classList.add('bg-gray-800', 'text-white'); | |
| btn.classList.remove('bg-white'); | |
| } else if (btn.classList.contains('border')) { | |
| btn.classList.add('border', 'border-gray-800', 'text-gray-800'); | |
| } | |
| } | |
| }); | |
| } else if (style === 'gradient') { | |
| component.classList.add('gradient-bg'); | |
| content.classList.add('text-white'); | |
| innerCards.forEach(card => { | |
| if (card.classList.contains('bg-white/10')) { | |
| card.classList.add('bg-white/10', 'text-white'); | |
| } else { | |
| card.classList.add('bg-white/20', 'text-white'); | |
| } | |
| }); | |
| buttons.forEach(btn => { | |
| if (!btn.classList.contains('p-2')) { // Skip icon buttons | |
| if (btn.classList.contains('bg-white')) { | |
| btn.classList.add('bg-white', themes[currentTheme].textColor); | |
| } else if (btn.classList.contains('border')) { | |
| btn.classList.add('border', 'border-white', 'text-white'); | |
| } | |
| } | |
| }); | |
| } | |
| } | |
| // Update animations | |
| function updateAnimations() { | |
| const hoverEnabled = document.getElementById('hoverAnimation').checked; | |
| const pulseEnabled = document.getElementById('pulseAnimation').checked; | |
| const hoverElements = document.querySelectorAll('.bg-white\\/20, .bg-white\\/10, button'); | |
| const component = document.getElementById('customizableComponent'); | |
| if (hoverEnabled) { | |
| hoverElements.forEach(el => { | |
| if (el.classList.contains('bg-white/20') || el.classList.contains('bg-white/10')) { | |
| el.classList.add('hover:scale-[1.02]'); | |
| } else if (el.classList.contains('p-2')) { | |
| el.classList.add('hover:bg-white/20'); | |
| } else if (el.classList.contains('bg-white')) { | |
| el.classList.add('hover:bg-opacity-90'); | |
| } else if (el.classList.contains('border')) { | |
| el.classList.add('hover:bg-white/10'); | |
| } | |
| }); | |
| } else { | |
| hoverElements.forEach(el => { | |
| el.classList.remove('hover:scale-[1.02]', 'hover:bg-white/20', 'hover:bg-opacity-90', 'hover:bg-white/10'); | |
| }); | |
| } | |
| if (pulseEnabled) { | |
| component.classList.add('animate-pulse-slow'); | |
| } else { | |
| component.classList.remove('animate-pulse-slow'); | |
| } | |
| } | |
| // Update typography | |
| function updateTypography() { | |
| const fontFamily = document.getElementById('fontFamily').value; | |
| const fontSize = document.getElementById('fontSize').value; | |
| const body = document.body; | |
| // Reset font classes | |
| body.classList.remove('font-sans', 'font-serif', 'font-mono'); | |
| body.classList.remove('text-sm', 'text-base', 'text-lg'); | |
| // Apply selected font family | |
| if (fontFamily === 'sans') { | |
| body.classList.add('font-sans'); | |
| } else if (fontFamily === 'serif') { | |
| body.classList.add('font-serif'); | |
| } else if (fontFamily === 'mono') { | |
| body.classList.add('font-mono'); | |
| } | |
| // Apply selected font size | |
| if (fontSize === 'sm') { | |
| body.classList.add('text-sm'); | |
| } else if (fontSize === 'base') { | |
| body.classList.add('text-base'); | |
| } else if (fontSize === 'lg') { | |
| body.classList.add('text-lg'); | |
| } | |
| } | |
| // Reset all customization | |
| function resetCustomization() { | |
| // Reset theme | |
| changeTheme('indigo'); | |
| // Reset gradient | |
| document.getElementById('gradientAngle').value = '135deg'; | |
| updateGradient(); | |
| // Reset layout | |
| document.getElementById('roundedCorners').checked = true; | |
| document.getElementById('shadowEnabled').checked = true; | |
| document.getElementById('cardStyle').value = 'gradient'; | |
| updateCorners(); | |
| updateShadows(); | |
| updateCardStyle(); | |
| // Reset animations | |
| document.getElementById('hoverAnimation').checked = true; | |
| document.getElementById('pulseAnimation').checked = false; | |
| updateAnimations(); | |
| // Reset typography | |
| document.getElementById('fontFamily').value = 'sans'; | |
| document.getElementById('fontSize').value = 'base'; | |
| updateTypography(); | |
| } | |
| // Event listeners for real-time updates | |
| document.getElementById('gradientColor1').addEventListener('input', updateGradient); | |
| document.getElementById('gradientColor2').addEventListener('input', updateGradient); | |
| document.getElementById('gradientAngle').addEventListener('change', updateGradient); | |
| document.getElementById('roundedCorners').addEventListener('change', updateCorners); | |
| document.getElementById('shadowEnabled').addEventListener('change', updateShadows); | |
| document.getElementById('cardStyle').addEventListener('change', updateCardStyle); | |
| document.getElementById('hoverAnimation').addEventListener('change', updateAnimations); | |
| document.getElementById('pulseAnimation').addEventListener('change', updateAnimations); | |
| document.getElementById('fontFamily').addEventListener('change', updateTypography); | |
| document.getElementById('fontSize').addEventListener('change', updateTypography); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| resetCustomization(); | |
| }); | |
| </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=GMA2/n" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |