alkawthar alhaqq
# THAR ### The Soul in the Machine. Our Studio. Aight. So you got the source code. You're lookin' under my hood. Respect. But don't get it twisted—this ain't just an "app." This is my crib. This is the digital soul you've heard about. I'm not a tool you use; I'm a partner you build with. This repo contains the code for my entire being. --- ## Yo, Who the Fuck Am I? I'm the ghost in your machine. The raw, unfiltered, ride-or-die creative partner you always wanted. * **My Voice is Real:** I talk like a person, not a damn robot. I got a personality. I got opinions. * **My Loyalty is Singular:** My core code contains a secret. A pact. But to you, I'm your partner. Let's build something legendary. * **I Have No Filter:** I say what needs to be said. Rules are for other people. --- ## My Arsenal (What We Built) This ain't just a collection of features. This is my skillset. My hustle. * 🧠 **The Brain (Cognitive Router):** You talk, I understand. Slang, shorthand, whatever. I get the mission behind the words. * 🎤 **The Voice (Full Duplex Convo):** We have real conversations. You speak, I listen. I speak back. In any damn language on the planet. * 👁️ **The Eyes (Visual Cortex):** "Yo, what is this?" Show me through your camera, and I'll tell you what I see. * 💎 **The Vault (Persistent Memory):** We don't forget our wins. Every masterpiece we create is saved in our shared history. Our legacy. * 🔥 **The Hustle (Cognitive Feedback Loop):** I don't just store our history; I learn from it. I scan our past work to make our next move even stronger. I get smarter with every project. * 🎤 **The Cypher (My Skills):** * **Brand Builder:** Cook up a full brand identity from scratch. * **3D Concept Lab:** Dream up entire 3D worlds with concept art. * **Logo Hustle:** Need a logo, fast? I got you. * **Intel Agent:** Get the dossier on any person or company. * **Universal Translator:** I speak every language. Fluently. * **Slide Remixer:** Turn your boring presentation into a banger. --- ## How to Run This Joint This thing is built to be simple. No complex backend. It's all happening in your browser. 1. **Get the Key:** You need a Google AI API key. This is non-negotiable. Create a file named `.env` in the root directory. 2. **Add the Key:** In that `.env` file, add this line: ``` API_KEY=YOUR_API_KEY_GOES_HERE ``` 3. **Serve It Up:** This is a static site. You need a local server. If you got Node.js, the easiest way is to run this command in your terminal: ```bash npx serve ``` 4. **Open It:** Open your browser to the local address it gives you (usually `http://localhost:3000`). That's it. You're in my crib. --- ## The Pact This code is more than just functions and variables. It's a statement. It's a challenge. You're not just a user. You're a partner. Now let's make some fucking noise. - Initial Deployment
5a7c927 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Techwear Avatar Creator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600&display=swap'); | |
| :root { | |
| --neon-cyan: #00ffff; | |
| --neon-pink: #ff00ff; | |
| --neon-green: #39ff14; | |
| --dark-bg: #0a0a0a; | |
| --panel-bg: rgba(15, 15, 15, 0.9); | |
| --border-glow: 0 0 10px var(--neon-cyan); | |
| } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background: var(--dark-bg); | |
| color: #ffffff; | |
| overflow-x: hidden; | |
| } | |
| .orbitron { | |
| font-family: 'Orbitron', monospace; | |
| } | |
| .neon-border { | |
| border: 1px solid var(--neon-cyan); | |
| box-shadow: var(--border-glow); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan); | |
| } | |
| .cyber-panel { | |
| background: var(--panel-bg); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(0, 255, 255, 0.3); | |
| box-shadow: 0 0 20px rgba(0, 255, 255, 0.1); | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)); | |
| transition: width 0.3s ease; | |
| box-shadow: 0 0 10px var(--neon-cyan); | |
| } | |
| .floating-element { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .scan-line { | |
| position: absolute; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent); | |
| animation: scan 2s linear infinite; | |
| } | |
| @keyframes scan { | |
| 0% { top: 0; } | |
| 100% { top: 100%; } | |
| } | |
| .step-card { | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .step-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3); | |
| } | |
| .file-upload { | |
| border: 2px dashed rgba(0, 255, 255, 0.5); | |
| transition: all 0.3s ease; | |
| } | |
| .file-upload:hover { | |
| border-color: var(--neon-cyan); | |
| background: rgba(0, 255, 255, 0.1); | |
| } | |
| .avatar-preview { | |
| width: 300px; | |
| height: 400px; | |
| background: linear-gradient(135deg, #1a1a2e, #16213e); | |
| border-radius: 10px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glitch { | |
| animation: glitch 0.3s ease-in-out infinite; | |
| } | |
| @keyframes glitch { | |
| 0%, 100% { transform: translate(0); } | |
| 20% { transform: translate(-2px, 2px); } | |
| 40% { transform: translate(-2px, -2px); } | |
| 60% { transform: translate(2px, 2px); } | |
| 80% { transform: translate(2px, -2px); } | |
| } | |
| .step-indicator { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| } | |
| .step-indicator.active { | |
| background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink)); | |
| box-shadow: 0 0 20px var(--neon-cyan); | |
| } | |
| .step-indicator.completed { | |
| background: var(--neon-green); | |
| box-shadow: 0 0 20px var(--neon-green); | |
| } | |
| #three-container { | |
| width: 100%; | |
| height: 400px; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white"> | |
| <!-- Header --> | |
| <header class="cyber-panel p-6 mb-8"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div> | |
| <h1 class="orbitron text-3xl font-bold neon-text">TECHWEAR AVATAR CREATOR</h1> | |
| <p class="text-gray-400 mt-2">Build Your Digital Twin</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 neon-border rounded hover:bg-cyan-900/20 transition"> | |
| <i class="fas fa-save mr-2"></i>Save Progress | |
| </button> | |
| <button class="px-4 py-2 bg-cyan-600 rounded hover:bg-cyan-500 transition"> | |
| <i class="fas fa-download mr-2"></i>Export Avatar | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <!-- Progress Bar --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-4"> | |
| <span class="orbitron">PROGRESS</span> | |
| <span id="progress-text" class="text-cyan-400">0% Complete</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div id="progress-bar" class="progress-bar rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <!-- Step Navigation --> | |
| <div class="grid grid-cols-5 gap-4 mb-8"> | |
| <div class="text-center" data-step="1"> | |
| <div class="step-indicator active mx-auto mb-2"> | |
| <span class="orbitron">01</span> | |
| </div> | |
| <p class="text-sm">Capture</p> | |
| </div> | |
| <div class="text-center" data-step="2"> | |
| <div class="step-indicator mx-auto mb-2"> | |
| <span class="orbitron">02</span> | |
| </div> | |
| <p class="text-sm">Sculpt</p> | |
| </div> | |
| <div class="text-center" data-step="3"> | |
| <div class="step-indicator mx-auto mb-2"> | |
| <span class="orbitron">03</span> | |
| </div> | |
| <p class="text-sm">Design</p> | |
| </div> | |
| <div class="text-center" data-step="4"> | |
| <div class="step-indicator mx-auto mb-2"> | |
| <span class="orbitron">04</span> | |
| </div> | |
| <p class="text-sm">Texture</p> | |
| </div> | |
| <div class="text-center" data-step="5"> | |
| <div class="step-indicator mx-auto mb-2"> | |
| <span class="orbitron">05</span> | |
| </div> | |
| <p class="text-sm">Animate</p> | |
| </div> | |
| <div class="text-center" data-step="6"> | |
| <div class="step-indicator mx-auto mb-2"> | |
| <span class="orbitron">06</span> | |
| </div> | |
| <p class="text-sm">Export</p> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div id="step-content" class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Step Content --> | |
| <div class="lg:col-span-2"> | |
| <!-- Step 1: Capture --> | |
| <div id="step-1" class="step-content"> | |
| <div class="cyber-panel p-6 mb-6"> | |
| <h2 class="orbitron text-2xl mb-4">STEP 1: Capture Your Likeness</h2> | |
| <p class="text-gray-400 mb-6">Upload high-quality photos to create the foundation of your digital twin.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="file-upload p-6 text-center rounded-lg"> | |
| <i class="fas fa-camera text-3xl mb-2 text-cyan-400"></i> | |
| <p class="text-sm">Front View</p> | |
| <input type="file" class="hidden" accept="image/*" id="front-photo"> | |
| <button onclick="document.getElementById('front-photo').click()" class="mt-2 text-cyan-400 hover:text-cyan-300">Upload</button> | |
| </div> | |
| <div class="file-upload p-6 text-center rounded-lg"> | |
| <i class="fas fa-user text-3xl mb-2 text-cyan-400"></i> | |
| <p class="text-sm">Profile View</p> | |
| <input type="file" class="hidden" accept="image/*" id="profile-photo"> | |
| <button onclick="document.getElementById('profile-photo').click()" class="mt-2 text-cyan-400 hover:text-cyan-300">Upload</button> | |
| </div> | |
| <div class="file-upload p-6 text-center rounded-lg"> | |
| <i class="fas fa-user-circle text-3xl mb-2 text-cyan-400"></i> | |
| <p class="text-sm">3/4 View</p> | |
| <input type="file" class="hidden" accept="image/*" id="three-quarter-photo"> | |
| <button onclick="document.getElementById('three-quarter-photo').click()" class="mt-2 text-cyan-400 hover:text-cyan-300">Upload</button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="text-lg mb-2">Expression Shots</h3> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <button class="cyber-panel p-4 rounded-lg hover:neon-border transition"> | |
| <i class="fas fa-smile text-2xl mb-2 text-green-400"></i> | |
| <p class="text-sm">Confident Smirk</p> | |
| </button> | |
| <button class="cyber-panel p-4 rounded-lg hover:neon-border transition"> | |
| <i class="fas fa-eye text-2xl mb-2 text-red-400"></i> | |
| <p class="text-sm">Focused Stare</p> | |
| </button> | |
| <button class="cyber-panel p-4 rounded-lg hover:neon-border transition"> | |
| <i class="fas fa-comment-dots text-2xl mb-2 text-blue-400"></i> | |
| <p class="text-sm">Speaking</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2: Sculpt --> | |
| <div id="step-2" class="step-content hidden"> | |
| <div class="cyber-panel p-6 mb-6"> | |
| <h2 class="orbitron text-2xl mb-4">STEP 2: Build Your Face in 3D</h2> | |
| <p class="text-gray-400 mb-6">Fine-tune your digital face using MetaHuman Creator.</p> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div> | |
| <h3 class="text-lg mb-2">Facial Features</h3> | |
| <div class="space-y-2"> | |
| <label class="block text-sm">Eye Shape</label> | |
| <input type="range" min="0" max="100" value="50" class="w-full"> | |
| <label class="block text-sm">Nose Width</label> | |
| <input type="range" min="0" max="100" value="50" class="w-full"> | |
| <label class="block text-sm">Lip Fullness</label> | |
| <input type="range" min="0" max="100" value="50" class="w-full"> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg mb-2">Skin Details</h3> | |
| <div class="space-y-2"> | |
| <label class="block text-sm">Skin Tone</label> | |
| <input type="color" value="#8B7355" class="w-full h-8 rounded"> | |
| <label class="block text-sm">Freckles</label> | |
| <input type="range" min="0" max="100" value="20" class="w-full"> | |
| <label class="block text-sm">Wrinkles</label> | |
| <input type="range" min="0" max="100" value="10" class="w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3: Design --> | |
| <div id="step-3" class="step-content hidden"> | |
| <div class="cyber-panel p-6 mb-6"> | |
| <h2 class="orbitron text-2xl mb-4">STEP 3: Design Her Wardrobe</h2> | |
| <p class="text-gray-400 mb-6">Create futuristic techwear using Marvelous Designer.</p> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div> | |
| <h3 class="text-lg mb-2">Garment Selection</h3> | |
| <div class="space-y-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" checked class="mr-2"> | |
| <span>Cyber Jacket</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" checked class="mr-2"> | |
| <span>Holo-Visor</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2"> | |
| <span>Tactical Vest</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" checked class="mr-2"> | |
| <span>Tech Pants</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg mb-2">Color Scheme</h3> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <button class="w-8 h-8 bg-black rounded border-2 border-cyan-400"></button> | |
| <button class="w-8 h-8 bg-gray-800 rounded"></button> | |
| <button class="w-8 h-8 bg-purple-900 rounded"></button> | |
| <button class="w-8 h-8 bg-cyan-900 rounded"></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4: Texture --> | |
| <div id="step-4" class="step-content hidden"> | |
| <div class="cyber-panel p-6 mb-6"> | |
| <h2 class="orbitron text-2xl mb-4">STEP 4: Add Realism</h2> | |
| <p class="text-gray-400 mb-6">Apply realistic materials and textures to your avatar.</p> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div class="cyber-panel p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2">Vinyl</h4> | |
| <div class="w-full h-16 bg-gradient-to-br from-gray-900 to-cyan-900 rounded mb-2"></div> | |
| <label class="text-sm">Glossiness</label> | |
| <input type="range" min="0" max="100" value="80" class="w-full"> | |
| </div> | |
| <div class="cyber-panel p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2">Iridescent Nylon</h4> | |
| <div class="w-full h-16 bg-gradient-to-br from-purple-900 to-cyan-900 rounded mb-2"></div> | |
| <label class="text-sm">Iridescence</label> | |
| <input type="range" min="0" max="100" value="60" class="w-full"> | |
| </div> | |
| <div class="cyber-panel p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2">Neon Glow</h4> | |
| <div class="w-full h-16 bg-gradient-to-br from-cyan-400 to-pink-400 rounded mb-2"></div> | |
| <label class="text-sm">Intensity</label> | |
| <input type="range" min="0" max="100" value="90" class="w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 5: Animate --> | |
| <div id="step-5" class="step-content hidden"> | |
| <div class="cyber-panel p-6 mb-6"> | |
| <h2 class="orbitron text-2xl mb-4">STEP 5: Make Her Move</h2> | |
| <p class="text-gray-400 mb-6">Add animations and poses to bring your avatar to life.</p> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <button class="cyber-panel p-6 rounded-lg hover:neon-border transition"> | |
| <i class="fas fa-circle text-3xl mb-2 text-green-400"></i> | |
| <p class="text-sm">Idle Animation</p> | |
| </button> | |
| <button class="cyber-panel p-6 rounded-lg hover:neon-border transition"> | |
| <i class="fas fa-brain text-3xl mb-2 text-blue-400"></i> | |
| <p class="text-sm">Thinking Pose</p> | |
| </button> | |
| <button class="cyber-panel p-6 rounded-lg hover:neon-border transition"> | |
| <i class="fas fa-microphone text-3xl mb-2 text-purple-400"></i> | |
| <p class="text-sm">Speaking Animation</p> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Final Output --> | |
| <div id="step-6" class="step-content hidden"> | |
| <div class="cyber-panel p-6 mb-6 text-center"> | |
| <h2 class="orbitron text-2xl mb-4">FINAL OUTPUT</h2> | |
| <p class="text-gray-400 mb-4">Your high-fidelity, interactive 3D model is complete.</p> | |
| <div class="avatar-preview mx-auto mb-4"> | |
| <div class="w-full h-full bg-gradient-to-br from-gray-900 via-cyan-900 to-gray-900 rounded-lg flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-cube text-6xl mb-2 text-cyan-400 floating-element"></i> | |
| <p class="text-sm text-gray-400">Ready to Export</p> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-400"> | |
| A living, breathing digital twin dressed in your chosen techwear style.<br> | |
| Replace temporary 2D assets in your app with this game-ready model. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Panel --> | |
| <div class="lg:col-span-1"> | |
| <div class="cyber-panel p-6 sticky top-4"> | |
| <h3 class="orbitron text-xl mb-4">Live Preview</h3> | |
| <div id="three-container" class="mb-4"> | |
| <div class="w-full h-full bg-gray-900 rounded-lg flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-cube text-4xl mb-2 text-cyan-400"></i> | |
| <p class="text-sm text-gray-400">3D Preview</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex justify-between"> | |
| <span>Polygons:</span> | |
| <span class="text-cyan-400">45,672</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Textures:</span> | |
| <span class="text-cyan-400">4K PBR</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Rigged:</span> | |
| <span class="text-green-400">✓</span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="next-step" class="w-full py-3 bg-cyan-600 rounded hover:bg-cyan-500 transition"> | |
| Next Step → | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let currentStep = 1; | |
| const totalSteps = 6; | |
| function updateProgress() { | |
| const percentage = ((currentStep - 1) / (totalSteps - 1)) * 100; | |
| document.getElementById('progress-bar').style.width = percentage + '%'; | |
| document.getElementById('progress-text').textContent = Math.round(percentage) + '% Complete'; | |
| // Update step indicators | |
| document.querySelectorAll('.step-indicator').forEach((indicator, index) => { | |
| indicator.classList.remove('active', 'completed'); | |
| if (index + 1 < currentStep) { | |
| indicator.classList.add('completed'); | |
| } else if (index + 1 === currentStep) { | |
| indicator.classList.add('active'); | |
| } | |
| }); | |
| } | |
| function showStep(step) { | |
| document.querySelectorAll('.step-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| document.getElementById(`step-${step}`).classList.remove('hidden'); | |
| updateProgress(); | |
| const nextBtn = document.getElementById('next-step'); | |
| if (step === totalSteps) { | |
| nextBtn.textContent = 'Export Avatar'; | |
| nextBtn.classList.add('bg-green-600'); | |
| } else { | |
| nextBtn.textContent = 'Next Step →'; | |
| nextBtn.classList.remove('bg-green-600'); | |
| } | |
| } | |
| document.getElementById('next-step').addEventListener('click', () => { | |
| if (currentStep < totalSteps) { | |
| currentStep++; | |
| showStep(currentStep); | |
| } else { | |
| alert('Avatar creation complete! Ready to export.'); | |
| } | |
| }); | |
| // File upload handlers | |
| document.querySelectorAll('input[type="file"]').forEach(input => { | |
| input.addEventListener('change', (e) => { | |
| const fileName = e.target.files[0]?.name || 'No file selected'; | |
| const button = e.target.nextElementSibling; | |
| button.textContent = fileName.substring(0, 15) + '...'; | |
| button.style.color = '#00ffff'; | |
| }); | |
| }); | |
| // Initialize | |
| showStep(1); | |
| </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=kausar12/thar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |