Spaces:

sekopst
/

sudoku1

Running

App Files Files Community

sekopst commited on Apr 1

Commit

37c737b

verified ·

1 Parent(s): 8af6a44

Add 2 files

Browse files

Files changed (2) hide show

README.md +5 -3
index.html +721 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Sudoku1
-emoji: 📊
 colorFrom: blue
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: sudoku1
+emoji: 🐳
 colorFrom: blue
 colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,721 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Advanced 9×9 Sudoku</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>
+        .cell {
+            width: 50px;
+            height: 50px;
+            text-align: center;
+            font-size: 1.5rem;
+            font-weight: bold;
+            position: relative;
+            transition: all 0.2s;
+        }
+        .cell:focus {
+            outline: none;
+            background-color: #e2e8f0;
+            transform: scale(1.05);
+            z-index: 10;
+        }
+        .cell.prefilled {
+            background-color: #f0f4f8;
+            color: #1e40af;
+        }
+        .cell.error {
+            color: #dc2626;
+            animation: shake 0.5s;
+        }
+        .cell.highlight {
+            background-color: #dbeafe;
+        }
+        .cell.same-number {
+            background-color: #bfdbfe;
+        }
+        .cell:nth-child(3n) {
+            border-right: 2px solid #4a5568;
+        }
+        .cell:nth-child(9n) {
+            border-right: 1px solid #cbd5e0;
+        }
+        .row:nth-child(3n) .cell {
+            border-bottom: 2px solid #4a5568;
+        }
+        .row:last-child .cell {
+            border-bottom: none;
+        }
+        .row .cell:last-child {
+            border-right: none;
+        }
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            20%, 60% { transform: translateX(-5px); }
+            40%, 80% { transform: translateX(5px); }
+        }
+        .number-btn.active {
+            background-color: #3b82f6;
+            color: white;
+        }
+        .timer {
+            font-family: monospace;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
+    <div class="bg-white rounded-xl shadow-2xl p-6 max-w-4xl w-full">
+        <div class="flex flex-col md:flex-row gap-8">
+            <!-- Game Board -->
+            <div class="flex-1">
+                <div class="flex justify-between items-center mb-4">
+                    <h1 class="text-3xl font-bold text-indigo-700">
+                        <i class="fas fa-th mr-2"></i>Advanced Sudoku
+                    </h1>
+                    <div class="timer text-xl font-mono bg-gray-200 px-3 py-1 rounded">
+                        <i class="fas fa-clock mr-2"></i><span id="time">00:00</span>
+                    </div>
+                </div>
+                <!-- Sudoku Board -->
+                <div class="border-2 border-gray-800 rounded mb-4" id="sudoku-board">
+                    <!-- Rows will be generated by JavaScript -->
+                </div>
+                <!-- Number Pad -->
+                <div class="grid grid-cols-9 gap-1 mb-4">
+                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="1">1</button>
+                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="2">2</button>
+                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="3">3</button>
+                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="4">4</button>
+                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="5">5</button>
+                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="6">6</button>
+                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="7">7</button>
+                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="8">8</button>
+                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="9">9</button>
+                </div>
+                <!-- Controls -->
+                <div class="flex gap-2">
+                    <button id="new-game" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded flex items-center justify-center">
+                        <i class="fas fa-plus-circle mr-2"></i>New Game
+                    </button>
+                    <button id="check" class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded flex items-center justify-center">
+                        <i class="fas fa-check mr-2"></i>Check
+                    </button>
+                    <button id="hint" class="flex-1 bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded flex items-center justify-center">
+                        <i class="fas fa-lightbulb mr-2"></i>Hint
+                    </button>
+                    <button id="solve" class="flex-1 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded flex items-center justify-center">
+                        <i class="fas fa-magic mr-2"></i>Solve
+                    </button>
+                </div>
+            </div>
+            <!-- Game Info -->
+            <div class="md:w-64 flex flex-col gap-4">
+                <div class="bg-gray-100 p-4 rounded-lg">
+                    <h3 class="font-bold text-lg mb-2 text-indigo-700">
+                        <i class="fas fa-info-circle mr-2"></i>How to Play
+                    </h3>
+                    <ul class="text-sm space-y-2">
+                        <li>Fill the grid so each row, column, and 3×3 box contains 1-9</li>
+                        <li>Click a cell and select a number</li>
+                        <li>Use <span class="font-bold">Check</span> to validate your solution</li>
+                        <li>Stuck? Get a <span class="font-bold">Hint</span></li>
+                    </ul>
+                </div>
+                <div class="bg-gray-100 p-4 rounded-lg">
+                    <h3 class="font-bold text-lg mb-2 text-indigo-700">
+                        <i class="fas fa-trophy mr-2"></i>Difficulty
+                    </h3>
+                    <div class="flex flex-col gap-2">
+                        <button class="difficulty-btn active bg-green-100 hover:bg-green-200 text-green-800 py-1 px-3 rounded text-left" data-difficulty="easy">
+                            <i class="fas fa-seedling mr-2"></i>Easy
+                        </button>
+                        <button class="difficulty-btn bg-yellow-100 hover:bg-yellow-200 text-yellow-800 py-1 px-3 rounded text-left" data-difficulty="medium">
+                            <i class="fas fa-tree mr-2"></i>Medium
+                        </button>
+                        <button class="difficulty-btn bg-red-100 hover:bg-red-200 text-red-800 py-1 px-3 rounded text-left" data-difficulty="hard">
+                            <i class="fas fa-fire mr-2"></i>Hard
+                        </button>
+                    </div>
+                </div>
+                <div class="bg-gray-100 p-4 rounded-lg flex-1">
+                    <h3 class="font-bold text-lg mb-2 text-indigo-700">
+                        <i class="fas fa-history mr-2"></i>Stats
+                    </h3>
+                    <div class="space-y-2 text-sm">
+                        <div>Games Played: <span id="games-played" class="font-bold">0</span></div>
+                        <div>Games Won: <span id="games-won" class="font-bold">0</span></div>
+                        <div>Best Time: <span id="best-time" class="font-bold">--:--</span></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game state
+        let board = Array(9).fill().map(() => Array(9).fill(0));
+        let solution = Array(9).fill().map(() => Array(9).fill(0));
+        let selectedCell = null;
+        let selectedNumber = null;
+        let timer = null;
+        let seconds = 0;
+        let difficulty = 'easy';
+        let gamesPlayed = 0;
+        let gamesWon = 0;
+        let bestTime = null;
+        // DOM elements
+        const sudokuBoard = document.getElementById('sudoku-board');
+        const numberButtons = document.querySelectorAll('.number-btn');
+        const difficultyButtons = document.querySelectorAll('.difficulty-btn');
+        const timeDisplay = document.getElementById('time');
+        const newGameBtn = document.getElementById('new-game');
+        const checkBtn = document.getElementById('check');
+        const hintBtn = document.getElementById('hint');
+        const solveBtn = document.getElementById('solve');
+        // Initialize the game
+        function initGame() {
+            // Clear previous board
+            sudokuBoard.innerHTML = '';
+            // Generate a new Sudoku puzzle
+            generateSudoku();
+            // Create the board UI
+            createBoardUI();
+            // Reset timer
+            resetTimer();
+            startTimer();
+            // Update stats
+            updateStats();
+        }
+        // Generate a Sudoku puzzle
+        function generateSudoku() {
+            // Generate a complete solution
+            generateSolution();
+            // Copy solution to board
+            for (let i = 0; i < 9; i++) {
+                for (let j = 0; j < 9; j++) {
+                    board[i][j] = solution[i][j];
+                }
+            }
+            // Remove numbers based on difficulty
+            let cellsToRemove;
+            switch(difficulty) {
+                case 'easy':
+                    cellsToRemove = 40;
+                    break;
+                case 'medium':
+                    cellsToRemove = 50;
+                    break;
+                case 'hard':
+                    cellsToRemove = 60;
+                    break;
+                default:
+                    cellsToRemove = 40;
+            }
+            // Remove numbers
+            let removed = 0;
+            while (removed < cellsToRemove) {
+                const row = Math.floor(Math.random() * 9);
+                const col = Math.floor(Math.random() * 9);
+                if (board[row][col] !== 0) {
+                    board[row][col] = 0;
+                    removed++;
+                }
+            }
+        }
+        // Generate a complete Sudoku solution
+        function generateSolution() {
+            // Reset solution
+            solution = Array(9).fill().map(() => Array(9).fill(0));
+            // Fill diagonal 3x3 boxes first (they are independent)
+            fillDiagonalBoxes();
+            // Solve the rest of the puzzle
+            solveSudoku(solution);
+        }
+        // Fill diagonal 3x3 boxes
+        function fillDiagonalBoxes() {
+            for (let box = 0; box < 9; box += 3) {
+                fillBox(box, box);
+            }
+        }
+        // Fill a 3x3 box
+        function fillBox(row, col) {
+            const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+            shuffleArray(nums);
+            let index = 0;
+            for (let i = 0; i < 3; i++) {
+                for (let j = 0; j < 3; j++) {
+                    solution[row + i][col + j] = nums[index++];
+                }
+            }
+        }
+        // Shuffle an array
+        function shuffleArray(array) {
+            for (let i = array.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [array[i], array[j]] = [array[j], array[i]];
+            }
+        }
+        // Solve Sudoku using backtracking
+        function solveSudoku(grid) {
+            for (let row = 0; row < 9; row++) {
+                for (let col = 0; col < 9; col++) {
+                    if (grid[row][col] === 0) {
+                        for (let num = 1; num <= 9; num++) {
+                            if (isValid(grid, row, col, num)) {
+                                grid[row][col] = num;
+                                if (solveSudoku(grid)) {
+                                    return true;
+                                }
+                                grid[row][col] = 0;
+                            }
+                        }
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+        // Check if a number is valid in a position
+        function isValid(grid, row, col, num) {
+            // Check row
+            for (let x = 0; x < 9; x++) {
+                if (grid[row][x] === num) return false;
+            }
+            // Check column
+            for (let x = 0; x < 9; x++) {
+                if (grid[x][col] === num) return false;
+            }
+            // Check 3x3 box
+            const boxRow = Math.floor(row / 3) * 3;
+            const boxCol = Math.floor(col / 3) * 3;
+            for (let i = 0; i < 3; i++) {
+                for (let j = 0; j < 3; j++) {
+                    if (grid[boxRow + i][boxCol + j] === num) return false;
+                }
+            }
+            return true;
+        }
+        // Create the board UI
+        function createBoardUI() {
+            for (let i = 0; i < 9; i++) {
+                const row = document.createElement('div');
+                row.className = 'row flex';
+                for (let j = 0; j < 9; j++) {
+                    const cell = document.createElement('input');
+                    cell.className = 'cell border border-gray-300';
+                    cell.type = 'text';
+                    cell.maxLength = 1;
+                    cell.dataset.row = i;
+                    cell.dataset.col = j;
+                    // Set value if it's a prefilled cell
+                    if (board[i][j] !== 0) {
+                        cell.value = board[i][j];
+                        cell.classList.add('prefilled');
+                        cell.readOnly = true;
+                    }
+                    // Event listeners
+                    cell.addEventListener('focus', handleCellFocus);
+                    cell.addEventListener('input', handleCellInput);
+                    cell.addEventListener('keydown', handleCellKeyDown);
+                    cell.addEventListener('click', handleCellClick);
+                    row.appendChild(cell);
+                }
+                sudokuBoard.appendChild(row);
+            }
+        }
+        // Handle cell focus
+        function handleCellFocus(e) {
+            const cell = e.target;
+            const row = parseInt(cell.dataset.row);
+            const col = parseInt(cell.dataset.col);
+            // Clear previous highlights
+            clearHighlights();
+            // Highlight current cell
+            cell.classList.add('highlight');
+            // Highlight same number cells
+            if (cell.value) {
+                highlightSameNumbers(cell.value);
+            }
+            // Highlight row, column, and box
+            highlightRelatedCells(row, col);
+            // Update selected cell
+            selectedCell = cell;
+        }
+        // Handle cell input
+        function handleCellInput(e) {
+            const cell = e.target;
+            const value = cell.value;
+            // Only allow numbers 1-9
+            if (value && !/^[1-9]$/.test(value)) {
+                cell.value = '';
+                return;
+            }
+            // Clear error state
+            cell.classList.remove('error');
+            // Update same number highlights
+            if (value) {
+                highlightSameNumbers(value);
+            } else {
+                clearSameNumberHighlights();
+            }
+        }
+        // Handle cell key down (for navigation)
+        function handleCellKeyDown(e) {
+            const cell = e.target;
+            const row = parseInt(cell.dataset.row);
+            const col = parseInt(cell.dataset.col);
+            let newRow = row;
+            let newCol = col;
+            switch(e.key) {
+                case 'ArrowUp':
+                    newRow = Math.max(0, row - 1);
+                    break;
+                case 'ArrowDown':
+                    newRow = Math.min(8, row + 1);
+                    break;
+                case 'ArrowLeft':
+                    newCol = Math.max(0, col - 1);
+                    break;
+                case 'ArrowRight':
+                    newCol = Math.min(8, col + 1);
+                    break;
+                default:
+                    return;
+            }
+            if (newRow !== row || newCol !== col) {
+                const newCell = document.querySelector(`.cell[data-row="${newRow}"][data-col="${newCol}"]`);
+                if (newCell && !newCell.classList.contains('prefilled')) {
+                    newCell.focus();
+                }
+            }
+        }
+        // Handle cell click
+        function handleCellClick(e) {
+            const cell = e.target;
+            if (selectedNumber && !cell.classList.contains('prefilled')) {
+                cell.value = selectedNumber;
+                cell.dispatchEvent(new Event('input'));
+            }
+        }
+        // Highlight related cells (row, column, box)
+        function highlightRelatedCells(row, col) {
+            // Highlight row and column
+            for (let i = 0; i < 9; i++) {
+                const rowCell = document.querySelector(`.cell[data-row="${row}"][data-col="${i}"]`);
+                const colCell = document.querySelector(`.cell[data-row="${i}"][data-col="${col}"]`);
+                if (rowCell) rowCell.classList.add('highlight');
+                if (colCell) colCell.classList.add('highlight');
+            }
+            // Highlight 3x3 box
+            const boxRow = Math.floor(row / 3) * 3;
+            const boxCol = Math.floor(col / 3) * 3;
+            for (let i = 0; i < 3; i++) {
+                for (let j = 0; j < 3; j++) {
+                    const cell = document.querySelector(`.cell[data-row="${boxRow + i}"][data-col="${boxCol + j}"]`);
+                    if (cell) cell.classList.add('highlight');
+                }
+            }
+        }
+        // Highlight cells with the same number
+        function highlightSameNumbers(num) {
+            const cells = document.querySelectorAll('.cell');
+            cells.forEach(cell => {
+                if (cell.value === num) {
+                    cell.classList.add('same-number');
+                }
+            });
+        }
+        // Clear all highlights
+        function clearHighlights() {
+            const cells = document.querySelectorAll('.cell');
+            cells.forEach(cell => {
+                cell.classList.remove('highlight', 'same-number');
+            });
+        }
+        // Clear same number highlights
+        function clearSameNumberHighlights() {
+            const cells = document.querySelectorAll('.cell');
+            cells.forEach(cell => {
+                cell.classList.remove('same-number');
+            });
+        }
+        // Start timer
+        function startTimer() {
+            if (timer) clearInterval(timer);
+            seconds = 0;
+            updateTimerDisplay();
+            timer = setInterval(() => {
+                seconds++;
+                updateTimerDisplay();
+            }, 1000);
+        }
+        // Reset timer
+        function resetTimer() {
+            if (timer) clearInterval(timer);
+            seconds = 0;
+            updateTimerDisplay();
+        }
+        // Update timer display
+        function updateTimerDisplay() {
+            const minutes = Math.floor(seconds / 60);
+            const remainingSeconds = seconds % 60;
+            timeDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+        }
+        // Update stats
+        function updateStats() {
+            document.getElementById('games-played').textContent = gamesPlayed;
+            document.getElementById('games-won').textContent = gamesWon;
+            if (bestTime !== null) {
+                const minutes = Math.floor(bestTime / 60);
+                const seconds = bestTime % 60;
+                document.getElementById('best-time').textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+            } else {
+                document.getElementById('best-time').textContent = '--:--';
+            }
+        }
+        // Check if the board is complete and correct
+        function checkSolution() {
+            let isComplete = true;
+            let isCorrect = true;
+            // Check each cell
+            for (let i = 0; i < 9; i++) {
+                for (let j = 0; j < 9; j++) {
+                    const cell = document.querySelector(`.cell[data-row="${i}"][data-col="${j}"]`);
+                    if (!cell.value) {
+                        isComplete = false;
+                        continue;
+                    }
+                    const num = parseInt(cell.value);
+                    if (num !== solution[i][j]) {
+                        cell.classList.add('error');
+                        isCorrect = false;
+                    }
+                }
+            }
+            if (!isComplete) {
+                alert('The puzzle is not complete yet!');
+                return false;
+            }
+            if (!isCorrect) {
+                alert('There are errors in your solution. Please check the highlighted cells.');
+                return false;
+            }
+            return true;
+        }
+        // Provide a hint
+        function giveHint() {
+            if (!selectedCell || selectedCell.classList.contains('prefilled')) {
+                alert('Please select an empty cell first!');
+                return;
+            }
+            const row = parseInt(selectedCell.dataset.row);
+            const col = parseInt(selectedCell.dataset.col);
+            selectedCell.value = solution[row][col];
+            selectedCell.classList.remove('error');
+            selectedCell.dispatchEvent(new Event('input'));
+            // Check if the puzzle is complete
+            if (isPuzzleComplete()) {
+                handleWin();
+            }
+        }
+        // Solve the puzzle
+        function solvePuzzle() {
+            if (confirm('Are you sure you want to see the solution?')) {
+                for (let i = 0; i < 9; i++) {
+                    for (let j = 0; j < 9; j++) {
+                        const cell = document.querySelector(`.cell[data-row="${i}"][data-col="${j}"]`);
+                        if (!cell.classList.contains('prefilled')) {
+                            cell.value = solution[i][j];
+                            cell.classList.remove('error');
+                        }
+                    }
+                }
+                clearInterval(timer);
+                alert('Puzzle solved!');
+            }
+        }
+        // Check if puzzle is complete
+        function isPuzzleComplete() {
+            for (let i = 0; i < 9; i++) {
+                for (let j = 0; j < 9; j++) {
+                    const cell = document.querySelector(`.cell[data-row="${i}"][data-col="${j}"]`);
+                    if (!cell.value) return false;
+                }
+            }
+            return true;
+        }
+        // Handle win
+        function handleWin() {
+            clearInterval(timer);
+            // Update stats
+            gamesPlayed++;
+            gamesWon++;
+            if (bestTime === null || seconds < bestTime) {
+                bestTime = seconds;
+            }
+            updateStats();
+            alert(`Congratulations! You solved the puzzle in ${timeDisplay.textContent}!`);
+        }
+        // Event listeners
+        numberButtons.forEach(btn => {
+            btn.addEventListener('click', () => {
+                // Clear active state from all buttons
+                numberButtons.forEach(b => b.classList.remove('active'));
+                // Set active state on clicked button
+                btn.classList.add('active');
+                // Update selected number
+                selectedNumber = btn.dataset.number;
+                // If a cell is selected, fill it
+                if (selectedCell && !selectedCell.classList.contains('prefilled')) {
+                    selectedCell.value = selectedNumber;
+                    selectedCell.dispatchEvent(new Event('input'));
+                    // Check if the puzzle is complete
+                    if (isPuzzleComplete()) {
+                        setTimeout(() => {
+                            if (checkSolution()) {
+                                handleWin();
+                            }
+                        }, 100);
+                    }
+                }
+            });
+        });
+        difficultyButtons.forEach(btn => {
+            btn.addEventListener('click', () => {
+                // Clear active state from all buttons
+                difficultyButtons.forEach(b => b.classList.remove('active'));
+                // Set active state on clicked button
+                btn.classList.add('active');
+                // Update difficulty
+                difficulty = btn.dataset.difficulty;
+            });
+        });
+        newGameBtn.addEventListener('click', () => {
+            gamesPlayed++;
+            updateStats();
+            initGame();
+        });
+        checkBtn.addEventListener('click', () => {
+            if (checkSolution()) {
+                handleWin();
+            }
+        });
+        hintBtn.addEventListener('click', giveHint);
+        solveBtn.addEventListener('click', solvePuzzle);
+        // Initialize the game
+        initGame();
+    </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=sekopst/sudoku1" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>