Nothing works please make everything work and everything only be fro the database with a modern nice ui
f58c9d4 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Script Details | LuaScriptVerse</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script> | |
| <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" /> | |
| <script src="https://unpkg.com/@supabase/supabase-js@2"></script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <div id="script-loading" class="text-center py-12"> | |
| <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mx-auto mb-4"></div> | |
| <p>Loading script details...</p> | |
| </div> | |
| <div id="script-content" class="hidden"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <h1 id="script-title" class="text-3xl font-bold"></h1> | |
| <div class="flex items-center mt-2 text-gray-400"> | |
| <div class="flex items-center mr-4"> | |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> | |
| <span id="script-author"></span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-1"></i> | |
| <span id="script-date"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="like-btn" class="px-4 py-2 bg-gray-800 rounded-lg hover:bg-gray-700 transition flex items-center"> | |
| <i data-feather="heart" class="w-4 h-4 mr-2"></i> | |
| <span id="like-count">0</span> | |
| </button> | |
| <button id="copy-btn" class="px-4 py-2 bg-gray-800 rounded-lg hover:bg-gray-700 transition"> | |
| <i data-feather="copy" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Description</h2> | |
| <p id="script-description" class="text-gray-300"></p> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">Script Code</h2> | |
| <div class="text-sm text-gray-400"> | |
| <i data-feather="eye" class="inline mr-1"></i> | |
| <span id="view-count">0</span> views | |
| </div> | |
| </div> | |
| <pre><code id="script-code" class="language-lua"></code></pre> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h2 class="text-xl font-bold mb-4">Comments</h2> | |
| <div id="comments-container"> | |
| <p class="text-gray-400 text-center py-4">Loading comments...</p> | |
| </div> | |
| <form id="comment-form" class="mt-6"> | |
| <textarea id="comment-input" rows="3" placeholder="Add a comment..." required | |
| class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea> | |
| <button type="submit" class="mt-2 px-4 py-2 bg-indigo-600 rounded-lg hover:bg-indigo-700 transition"> | |
| Post Comment | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Get script ID from URL | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const scriptId = urlParams.get('id'); | |
| if (!scriptId) { | |
| window.location.href = '/'; | |
| } | |
| // Load script data | |
| async function loadScript() { | |
| try { | |
| const script = await fetchScriptById(scriptId); | |
| if (script.error) throw script.error; | |
| document.getElementById('script-title').textContent = script.title; | |
| document.getElementById('script-author').textContent = script.profiles?.username || 'Anonymous'; | |
| document.getElementById('script-date').textContent = new Date(script.created_at).toLocaleDateString(); | |
| document.getElementById('script-description').textContent = script.description || 'No description provided'; | |
| document.getElementById('script-code').textContent = script.code; | |
| document.getElementById('view-count').textContent = script.view_count || 0; | |
| document.getElementById('like-count').textContent = script.like_count || 0; | |
| Prism.highlightElement(document.getElementById('script-code')); | |
| document.getElementById('script-loading').classList.add('hidden'); | |
| document.getElementById('script-content').classList.remove('hidden'); | |
| } catch (error) { | |
| console.error('Load error:', error); | |
| document.getElementById('script-loading').innerHTML = ` | |
| <i data-feather="alert-triangle" class="w-12 h-12 text-red-500 mx-auto mb-4"></i> | |
| <p class="text-xl">Error loading script</p> | |
| <p class="text-gray-400 mt-2">${error.message}</p> | |
| <a href="/" class="mt-4 inline-block px-4 py-2 bg-indigo-600 rounded-lg hover:bg-indigo-700 transition"> | |
| Back to Home | |
| </a> | |
| `; | |
| feather.replace(); | |
| } | |
| } | |
| // Load comments | |
| async function loadComments() { | |
| try { | |
| const comments = await fetchComments(scriptId); | |
| if (comments.error) throw comments.error; | |
| const container = document.getElementById('comments-container'); | |
| if (comments.length === 0) { | |
| container.innerHTML = '<p class="text-gray-400 text-center py-4">No comments yet. Be the first to comment!</p>'; | |
| return; | |
| } | |
| let html = ''; | |
| comments.forEach(comment => { | |
| html += ` | |
| <div class="border-b border-gray-700 py-4"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center mr-2"> | |
| <i data-feather="user" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="font-medium">${comment.username || 'Anonymous'}</span> | |
| <span class="text-gray-500 text-sm ml-2">${new Date(comment.created_at).toLocaleString()}</span> | |
| </div> | |
| <p class="text-gray-300 pl-10">${comment.content}</p> | |
| </div> | |
| `; | |
| }); | |
| container.innerHTML = html; | |
| feather.replace(); | |
| } catch (error) { | |
| console.error('Comments error:', error); | |
| document.getElementById('comments-container').innerHTML = ` | |
| <p class="text-red-400 text-center py-4">Error loading comments: ${error.message}</p> | |
| `; | |
| } | |
| } | |
| // Handle comment submission | |
| document.getElementById('comment-form').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const content = document.getElementById('comment-input').value.trim(); | |
| if (!content) return; | |
| try { | |
| const { error } = await postComment(scriptId, content); | |
| if (error) throw error; | |
| document.getElementById('comment-input').value = ''; | |
| loadComments(); | |
| } catch (error) { | |
| console.error('Comment error:', error); | |
| alert(`Failed to post comment: ${error.message}`); | |
| } | |
| }); | |
| // Handle like button | |
| document.getElementById('like-btn').addEventListener('click', async () => { | |
| try { | |
| const { action, error } = await toggleLike(scriptId); | |
| if (error) throw error; | |
| const likeCount = document.getElementById('like-count'); | |
| likeCount.textContent = action === 'liked' | |
| ? parseInt(likeCount.textContent) + 1 | |
| : parseInt(likeCount.textContent) - 1; | |
| } catch (error) { | |
| console.error('Like error:', error); | |
| alert(`Please sign in to like scripts`); | |
| } | |
| }); | |
| // Handle copy button | |
| document.getElementById('copy-btn').addEventListener('click', () => { | |
| const code = document.getElementById('script-code').textContent; | |
| navigator.clipboard.writeText(code) | |
| .then(() => { | |
| const btn = document.getElementById('copy-btn'); | |
| btn.innerHTML = '<i data-feather="check" class="w-4 h-4"></i>'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| btn.innerHTML = '<i data-feather="copy" class="w-4 h-4"></i>'; | |
| feather.replace(); | |
| }, 2000); | |
| }) | |
| .catch(err => { | |
| console.error('Copy failed:', err); | |
| }); | |
| }); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| loadScript(); | |
| loadComments(); | |
| feather.replace(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |