Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PyLearn - Interactive Python Learning Platform</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"> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script> | |
| <style> | |
| .editor { | |
| height: 400px; | |
| width: 100%; | |
| } | |
| .dark-mode { | |
| background-color: #1a202c; | |
| color: #e2e8f0; | |
| } | |
| .dark-mode .bg-gray-100 { | |
| background-color: #2d3748; | |
| } | |
| .dark-mode .text-gray-800 { | |
| color: #e2e8f0; | |
| } | |
| .dark-mode .border-gray-200 { | |
| border-color: #4a5568; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #4299e1; | |
| color: #4299e1; | |
| font-weight: 600; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| transition: width 0.3s ease; | |
| } | |
| .slide-fade-enter-active { | |
| transition: all 0.3s ease; | |
| } | |
| .slide-fade-leave-active { | |
| transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); | |
| } | |
| .slide-fade-enter, .slide-fade-leave-to { | |
| transform: translateX(20px); | |
| opacity: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 text-gray-800 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md dark-mode:bg-gray-800"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-2xl font-bold text-blue-600 dark-mode:text-blue-400"> | |
| <i class="fab fa-python mr-2"></i>PyLearn | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-blue-600 dark-mode:hover:text-blue-400">Home</a> | |
| <a href="#" class="hover:text-blue-600 dark-mode:hover:text-blue-400">Courses</a> | |
| <a href="#" class="hover:text-blue-600 dark-mode:hover:text-blue-400">Exercises</a> | |
| <a href="#" class="hover:text-blue-600 dark-mode:hover:text-blue-400">Community</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-200 dark-mode:hover:bg-gray-700"> | |
| <i class="fas fa-moon dark-mode:hidden"></i> | |
| <i class="fas fa-sun hidden dark-mode:block"></i> | |
| </button> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 hidden md:block"> | |
| Sign In | |
| </button> | |
| <button class="md:hidden p-2"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Sidebar --> | |
| <div class="w-full lg:w-1/4 bg-white rounded-lg shadow-md p-4 dark-mode:bg-gray-800"> | |
| <h2 class="text-xl font-semibold mb-4">Python Basics</h2> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-100 dark-mode:hover:bg-gray-700 cursor-pointer"> | |
| <span class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Introduction to Python</span> | |
| </span> | |
| <i class="fas fa-play text-blue-500"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-100 dark-mode:hover:bg-gray-700 cursor-pointer"> | |
| <span class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Variables and Data Types</span> | |
| </span> | |
| <i class="fas fa-play text-blue-500"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-100 dark-mode:hover:bg-gray-700 cursor-pointer"> | |
| <span class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Operators</span> | |
| </span> | |
| <i class="fas fa-play text-blue-500"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded bg-blue-50 dark-mode:bg-gray-700"> | |
| <span class="flex items-center"> | |
| <i class="fas fa-circle text-blue-500 mr-2"></i> | |
| <span class="font-medium">Conditional Statements</span> | |
| </span> | |
| <i class="fas fa-play text-blue-500"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-100 dark-mode:hover:bg-gray-700 cursor-pointer"> | |
| <span class="flex items-center"> | |
| <i class="far fa-circle text-gray-400 mr-2"></i> | |
| <span>Loops</span> | |
| </span> | |
| <i class="fas fa-lock text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-100 dark-mode:hover:bg-gray-700 cursor-pointer"> | |
| <span class="flex items-center"> | |
| <i class="far fa-circle text-gray-400 mr-2"></i> | |
| <span>Functions</span> | |
| </span> | |
| <i class="fas fa-lock text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="font-semibold mb-2">Your Progress</h3> | |
| <div class="bg-gray-200 rounded-full h-2.5 dark-mode:bg-gray-700"> | |
| <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 45%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm mt-1"> | |
| <span>45% Complete</span> | |
| <span>3/7 Lessons</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="w-full lg:w-3/4"> | |
| <!-- Lesson Content --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6 dark-mode:bg-gray-800"> | |
| <h1 class="text-2xl font-bold mb-4">Conditional Statements</h1> | |
| <div class="flex border-b mb-4"> | |
| <button class="tab-button px-4 py-2 tab-active">Lesson</button> | |
| <button class="tab-button px-4 py-2">Exercise</button> | |
| <button class="tab-button px-4 py-2">Solution</button> | |
| <button class="tab-button px-4 py-2">Discussion</button> | |
| </div> | |
| <div class="prose dark-mode:prose-invert max-w-none"> | |
| <p>Conditional statements allow your program to make decisions based on certain conditions. In Python, we use <code class="bg-gray-100 dark-mode:bg-gray-700 px-1 rounded">if</code>, <code class="bg-gray-100 dark-mode:bg-gray-700 px-1 rounded">elif</code>, and <code class="bg-gray-100 dark-mode:bg-gray-700 px-1 rounded">else</code> statements.</p> | |
| <h3 class="text-xl font-semibold mt-4">Basic Syntax</h3> | |
| <pre class="bg-gray-100 dark-mode:bg-gray-700 p-4 rounded-md"><code>if condition: | |
| # code to execute if condition is True | |
| elif another_condition: | |
| # code to execute if another_condition is True | |
| else: | |
| # code to execute if no conditions are True</code></pre> | |
| <h3 class="text-xl font-semibold mt-4">Example</h3> | |
| <p>Let's write a program that checks if a number is positive, negative, or zero:</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4"> | |
| <div> | |
| <h4 class="font-medium mb-2">Interactive Example</h4> | |
| <div id="editor" class="editor border border-gray-300 rounded-t-md dark-mode:border-gray-600"></div> | |
| <div class="bg-gray-100 dark-mode:bg-gray-700 p-3 rounded-b-md flex justify-between items-center"> | |
| <button id="runCode" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700"> | |
| <i class="fas fa-play mr-2"></i>Run Code | |
| </button> | |
| <button class="text-blue-600 hover:text-blue-800 dark-mode:hover:text-blue-400"> | |
| <i class="fas fa-share-alt mr-1"></i>Share | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-2">Output</h4> | |
| <div id="output" class="bg-gray-100 dark-mode:bg-gray-700 p-4 rounded-md h-full min-h-[200px] border border-gray-300 dark-mode:border-gray-600"> | |
| <p class="text-gray-500">Click "Run Code" to see the output here.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-blue-50 dark-mode:bg-blue-900 p-4 rounded-md"> | |
| <h4 class="font-semibold text-blue-800 dark-mode:text-blue-200 mb-2"> | |
| <i class="fas fa-lightbulb mr-2"></i>Pro Tip | |
| </h4> | |
| <p>Python uses indentation to define code blocks. Make sure to use consistent indentation (4 spaces is recommended) for your <code class="bg-blue-100 dark-mode:bg-blue-800 px-1 rounded">if</code> statements.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Exercise --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6 dark-mode:bg-gray-800"> | |
| <h2 class="text-xl font-bold mb-4">Exercise: Grade Calculator</h2> | |
| <div class="prose dark-mode:prose-invert max-w-none"> | |
| <p>Write a program that takes a student's score (0-100) as input and prints their grade based on the following criteria:</p> | |
| <ul class="list-disc pl-5"> | |
| <li>90-100: A</li> | |
| <li>80-89: B</li> | |
| <li>70-79: C</li> | |
| <li>60-69: D</li> | |
| <li>Below 60: F</li> | |
| </ul> | |
| <div class="mt-6"> | |
| <h4 class="font-medium mb-2">Your Solution</h4> | |
| <div id="exerciseEditor" class="editor border border-gray-300 rounded-t-md dark-mode:border-gray-600"></div> | |
| <div class="bg-gray-100 dark-mode:bg-gray-700 p-3 rounded-b-md flex justify-between items-center"> | |
| <div> | |
| <button id="runExercise" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 mr-2"> | |
| <i class="fas fa-play mr-2"></i>Run & Test | |
| </button> | |
| <button id="submitExercise" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"> | |
| <i class="fas fa-check mr-2"></i>Submit | |
| </button> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 dark-mode:hover:text-blue-400"> | |
| <i class="fas fa-question-circle mr-1"></i>Hint | |
| </button> | |
| </div> | |
| </div> | |
| <div id="testResults" class="mt-4 hidden"> | |
| <h4 class="font-medium mb-2">Test Results</h4> | |
| <div class="space-y-2"> | |
| <div class="test-case p-3 rounded-md border border-green-200 bg-green-50 dark-mode:bg-green-900 dark-mode:border-green-800"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Test Case 1: Score 95 → A</span> | |
| </div> | |
| </div> | |
| <div class="test-case p-3 rounded-md border border-green-200 bg-green-50 dark-mode:bg-green-900 dark-mode:border-green-800"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Test Case 2: Score 85 → B</span> | |
| </div> | |
| </div> | |
| <div class="test-case p-3 rounded-md border border-red-200 bg-red-50 dark-mode:bg-red-900 dark-mode:border-red-800"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-times-circle text-red-500 mr-2"></i> | |
| <span>Test Case 3: Score 55 → F (Your output: D)</span> | |
| </div> | |
| </div> | |
| <div class="test-case p-3 rounded-md border border-green-200 bg-green-50 dark-mode:bg-green-900 dark-mode:border-green-800"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Test Case 4: Score 72 → C</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-yellow-50 dark-mode:bg-yellow-900 p-3 rounded-md border border-yellow-200 dark-mode:border-yellow-800"> | |
| <h4 class="font-medium text-yellow-800 dark-mode:text-yellow-200"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i>Feedback | |
| </h4> | |
| <p>Your code works for most cases but fails when the score is below 60. Check your conditions for the 'F' grade.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Community Section --> | |
| <div class="bg-white rounded-lg shadow-md p-6 dark-mode:bg-gray-800"> | |
| <h2 class="text-xl font-bold mb-4">Community Discussion</h2> | |
| <div class="mb-6"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 dark-mode:bg-blue-900 dark-mode:text-blue-300"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="bg-gray-100 dark-mode:bg-gray-700 p-3 rounded-lg"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium">JaneDoe</span> | |
| <span class="text-sm text-gray-500">2 hours ago</span> | |
| </div> | |
| <p>I'm confused about when to use elif vs multiple if statements. Can someone explain?</p> | |
| <div class="flex space-x-4 mt-2 text-sm"> | |
| <button class="text-blue-600 hover:text-blue-800 dark-mode:hover:text-blue-400"> | |
| <i class="far fa-thumbs-up mr-1"></i>Like (5) | |
| </button> | |
| <button class="text-blue-600 hover:text-blue-800 dark-mode:hover:text-blue-400"> | |
| <i class="far fa-comment mr-1"></i>Reply | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6 ml-12"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 dark-mode:bg-green-900 dark-mode:text-green-300"> | |
| <i class="fas fa-user-tie"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="bg-gray-100 dark-mode:bg-gray-700 p-3 rounded-lg"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium">PythonTutor</span> | |
| <span class="text-sm text-gray-500">1 hour ago</span> | |
| </div> | |
| <p>Great question! Use <code class="bg-gray-200 dark-mode:bg-gray-600 px-1 rounded">elif</code> when the conditions are mutually exclusive (only one can be true). Use multiple <code class="bg-gray-200 dark-mode:bg-gray-600 px-1 rounded">if</code> statements when multiple conditions could be true and you want to check all of them.</p> | |
| <div class="flex space-x-4 mt-2 text-sm"> | |
| <button class="text-blue-600 hover:text-blue-800 dark-mode:hover:text-blue-400"> | |
| <i class="far fa-thumbs-up mr-1"></i>Like (12) | |
| </button> | |
| <button class="text-blue-600 hover:text-blue-800 dark-mode:hover:text-blue-400"> | |
| <i class="far fa-comment mr-1"></i>Reply | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ml-12"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark-mode:bg-gray-600 dark-mode:text-gray-300"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="bg-gray-100 dark-mode:bg-gray-700 p-3 rounded-lg"> | |
| <textarea class="w-full bg-white dark-mode:bg-gray-600 border border-gray-300 dark-mode:border-gray-500 rounded-md p-2" rows="3" placeholder="Add to the discussion..."></textarea> | |
| <div class="flex justify-end mt-2"> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"> | |
| Post Comment | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">PyLearn</h3> | |
| <p class="text-gray-400">The best way to learn Python interactively, right in your browser.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="hover:text-white">Tutorials</a></li> | |
| <li><a href="#" class="hover:text-white">Blog</a></li> | |
| <li><a href="#" class="hover:text-white">Cheat Sheets</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Community</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white">Forums</a></li> | |
| <li><a href="#" class="hover:text-white">Discord</a></li> | |
| <li><a href="#" class="hover:text-white">Events</a></li> | |
| <li><a href="#" class="hover:text-white">Contributors</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white">About Us</a></li> | |
| <li><a href="#" class="hover:text-white">Careers</a></li> | |
| <li><a href="#" class="hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="hover:text-white">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 PyLearn. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Dark mode toggle | |
| const darkModeToggle = document.getElementById('darkModeToggle'); | |
| const html = document.documentElement; | |
| // Check for saved user preference or system preference | |
| if (localStorage.getItem('darkMode') === 'true' || | |
| (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark-mode'); | |
| } | |
| darkModeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark-mode'); | |
| localStorage.setItem('darkMode', html.classList.contains('dark-mode')); | |
| }); | |
| // Tab functionality | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| tabButtons.forEach(btn => btn.classList.remove('tab-active')); | |
| button.classList.add('tab-active'); | |
| }); | |
| }); | |
| // Initialize code editor | |
| const editor = ace.edit("editor"); | |
| editor.setTheme("ace/theme/chrome"); | |
| editor.session.setMode("ace/mode/python"); | |
| editor.setValue(`# Check if a number is positive, negative or zero\nnum = float(input("Enter a number: "))\n\nif num > 0:\n print("Positive number")\nelif num == 0:\n print("Zero")\nelse:\n print("Negative number")`); | |
| editor.setOptions({ | |
| fontSize: "14px", | |
| enableBasicAutocompletion: true, | |
| enableLiveAutocompletion: true | |
| }); | |
| // Initialize exercise editor | |
| const exerciseEditor = ace.edit("exerciseEditor"); | |
| exerciseEditor.setTheme("ace/theme/chrome"); | |
| exerciseEditor.session.setMode("ace/mode/python"); | |
| exerciseEditor.setValue(`# Write your grade calculator here\nscore = int(input("Enter score (0-100): "))\n\n# Your code here\n`); | |
| exerciseEditor.setOptions({ | |
| fontSize: "14px", | |
| enableBasicAutocompletion: true, | |
| enableLiveAutocompletion: true | |
| }); | |
| // Run code button | |
| document.getElementById('runCode').addEventListener('click', () => { | |
| const outputDiv = document.getElementById('output'); | |
| outputDiv.innerHTML = '<p class="text-green-600">Running code...</p>'; | |
| // Simulate code execution (in a real app, this would call a backend API) | |
| setTimeout(() => { | |
| outputDiv.innerHTML = ` | |
| <p class="font-medium">Enter a number: 5</p> | |
| <p>Positive number</p> | |
| <p class="text-gray-500 mt-4">Execution finished in 0.02 seconds</p> | |
| `; | |
| }, 800); | |
| }); | |
| // Run exercise button | |
| document.getElementById('runExercise').addEventListener('click', () => { | |
| const testResults = document.getElementById('testResults'); | |
| testResults.classList.remove('hidden'); | |
| // Scroll to results | |
| testResults.scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| // Submit exercise button | |
| document.getElementById('submitExercise').addEventListener('click', () => { | |
| alert('Exercise submitted! Your progress has been saved.'); | |
| // In a real app, this would send to backend for grading | |
| const progressBar = document.querySelector('.progress-bar'); | |
| progressBar.style.width = '60%'; | |
| // Update progress text | |
| const progressText = document.querySelector('.flex.justify-between.text-sm.mt-1'); | |
| progressText.innerHTML = ` | |
| <span>60% Complete</span> | |
| <span>4/7 Lessons</span> | |
| `; | |
| }); | |
| // Responsive adjustments | |
| function handleResize() { | |
| if (window.innerWidth < 768) { | |
| // Mobile adjustments | |
| } else { | |
| // Desktop adjustments | |
| } | |
| } | |
| window.addEventListener('resize', handleResize); | |
| handleResize(); | |
| </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=youjunhyeok/pylearn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |