|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Project Link Manager</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> |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.input-highlight { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
.input-highlight:focus { |
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
.table-row:hover { |
|
|
background-color: rgba(249, 250, 251, 0.8); |
|
|
transform: translateY(-1px); |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.table-row { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-4xl"> |
|
|
|
|
|
<header class="text-center mb-12 fade-in"> |
|
|
<h1 class="text-4xl font-bold text-indigo-700 mb-2">Project Link Manager</h1> |
|
|
<p class="text-gray-600">Organize your web research projects with ease</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="userInfoForm" class="bg-white rounded-xl shadow-md p-6 mb-8 fade-in"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Project Details</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="userName" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label> |
|
|
<input type="text" id="userName" class="w-full px-4 py-2 rounded-lg border border-gray-300 input-highlight focus:outline-none focus:ring-2 focus:ring-indigo-200" placeholder="John Doe"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="projectName" class="block text-sm font-medium text-gray-700 mb-1">Project Name</label> |
|
|
<input type="text" id="projectName" class="w-full px-4 py-2 rounded-lg border border-gray-300 input-highlight focus:outline-none focus:ring-2 focus:ring-indigo-200" placeholder="Market Research Q3"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<label for="linksInput" class="block text-sm font-medium text-gray-700 mb-1">Website Links (one per line)</label> |
|
|
<textarea id="linksInput" rows="6" class="w-full px-4 py-2 rounded-lg border border-gray-300 input-highlight focus:outline-none focus:ring-2 focus:ring-indigo-200" placeholder="https://example.com\nhttps://another-site.org"></textarea> |
|
|
<p class="text-xs text-gray-500 mt-1">Enter one URL per line. We'll automatically extract the website names.</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-end"> |
|
|
<button id="generateTableBtn" class="px-6 py-2 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors duration-200 flex items-center"> |
|
|
<i class="fas fa-table mr-2"></i> Generate Table |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="resultsSection" class="hidden fade-in"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800">Your Project Links</h2> |
|
|
<button id="editProjectBtn" class="px-4 py-2 text-indigo-600 hover:text-indigo-800 transition-colors duration-200 flex items-center"> |
|
|
<i class="fas fa-edit mr-2"></i> Edit Project |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> |
|
|
<div class="p-4 border-b border-gray-200 bg-gray-50"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 id="displayUserName" class="font-medium text-gray-800"></h3> |
|
|
<p id="displayProjectName" class="text-sm text-gray-600"></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Website</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pages</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="linksTableBody" class="bg-white divide-y divide-gray-200"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-gray-200 bg-gray-50 flex justify-between items-center"> |
|
|
<div> |
|
|
<button id="addRowBtn" class="px-4 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 transition-colors duration-200 flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Row |
|
|
</button> |
|
|
</div> |
|
|
<div> |
|
|
<button id="exportBtn" class="px-4 py-2 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 transition-colors duration-200 flex items-center"> |
|
|
<i class="fas fa-file-export mr-2"></i> Export Data |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const userInfoForm = document.getElementById('userInfoForm'); |
|
|
const resultsSection = document.getElementById('resultsSection'); |
|
|
const generateTableBtn = document.getElementById('generateTableBtn'); |
|
|
const editProjectBtn = document.getElementById('editProjectBtn'); |
|
|
const addRowBtn = document.getElementById('addRowBtn'); |
|
|
const exportBtn = document.getElementById('exportBtn'); |
|
|
const linksTableBody = document.getElementById('linksTableBody'); |
|
|
const displayUserName = document.getElementById('displayUserName'); |
|
|
const displayProjectName = document.getElementById('displayProjectName'); |
|
|
|
|
|
|
|
|
function extractDomain(url) { |
|
|
try { |
|
|
|
|
|
let domain = url.replace(/^(https?:\/\/)?(www\.)?/, ''); |
|
|
|
|
|
domain = domain.split('/')[0]; |
|
|
|
|
|
domain = domain.split(':')[0]; |
|
|
|
|
|
domain = domain.charAt(0).toUpperCase() + domain.slice(1); |
|
|
return domain; |
|
|
} catch (e) { |
|
|
return "Unknown"; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function generateTable() { |
|
|
const userName = document.getElementById('userName').value.trim(); |
|
|
const projectName = document.getElementById('projectName').value.trim(); |
|
|
const linksText = document.getElementById('linksInput').value.trim(); |
|
|
|
|
|
if (!userName || !projectName || !linksText) { |
|
|
alert('Please fill in all fields'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
displayUserName.textContent = userName; |
|
|
displayProjectName.textContent = projectName; |
|
|
|
|
|
|
|
|
linksTableBody.innerHTML = ''; |
|
|
|
|
|
|
|
|
const links = linksText.split('\n').filter(link => link.trim() !== ''); |
|
|
|
|
|
links.forEach((link, index) => { |
|
|
const domain = extractDomain(link); |
|
|
addTableRow(index + 1, link, domain, ''); |
|
|
}); |
|
|
|
|
|
|
|
|
userInfoForm.classList.add('hidden'); |
|
|
resultsSection.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function addTableRow(number, url = '', domain = '', pages = '') { |
|
|
const row = document.createElement('tr'); |
|
|
row.className = 'table-row'; |
|
|
|
|
|
row.innerHTML = ` |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${number}</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<input type="text" class="url-input w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-indigo-200" value="${url}" placeholder="Enter URL"> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<input type="text" class="domain-input w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-indigo-200" value="${domain}" placeholder="Website name"> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<input type="number" class="pages-input w-20 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-indigo-200" value="${pages}" placeholder="0" min="0"> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button class="delete-row-btn text-red-600 hover:text-red-900 mr-3"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
<button class="visit-btn text-indigo-600 hover:text-indigo-900"> |
|
|
<i class="fas fa-external-link-alt"></i> |
|
|
</button> |
|
|
</td> |
|
|
`; |
|
|
|
|
|
linksTableBody.appendChild(row); |
|
|
|
|
|
|
|
|
const urlInput = row.querySelector('.url-input'); |
|
|
const domainInput = row.querySelector('.domain-input'); |
|
|
const deleteBtn = row.querySelector('.delete-row-btn'); |
|
|
const visitBtn = row.querySelector('.visit-btn'); |
|
|
|
|
|
|
|
|
urlInput.addEventListener('change', function() { |
|
|
if (urlInput.value.trim() !== '') { |
|
|
domainInput.value = extractDomain(urlInput.value); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
deleteBtn.addEventListener('click', function() { |
|
|
row.remove(); |
|
|
updateRowNumbers(); |
|
|
}); |
|
|
|
|
|
|
|
|
visitBtn.addEventListener('click', function() { |
|
|
if (urlInput.value.trim() !== '') { |
|
|
let url = urlInput.value.trim(); |
|
|
if (!url.startsWith('http://') && !url.startsWith('https://')) { |
|
|
url = 'https://' + url; |
|
|
} |
|
|
window.open(url, '_blank'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updateRowNumbers() { |
|
|
const rows = linksTableBody.querySelectorAll('tr'); |
|
|
rows.forEach((row, index) => { |
|
|
row.cells[0].textContent = index + 1; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function exportData() { |
|
|
const rows = linksTableBody.querySelectorAll('tr'); |
|
|
const data = { |
|
|
userName: displayUserName.textContent, |
|
|
projectName: displayProjectName.textContent, |
|
|
links: [] |
|
|
}; |
|
|
|
|
|
rows.forEach(row => { |
|
|
data.links.push({ |
|
|
url: row.querySelector('.url-input').value, |
|
|
domain: row.querySelector('.domain-input').value, |
|
|
pages: row.querySelector('.pages-input').value |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const dataStr = JSON.stringify(data, null, 2); |
|
|
const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr); |
|
|
const exportFileDefaultName = `${displayProjectName.textContent.replace(/\s+/g, '_')}_links.json`; |
|
|
|
|
|
const linkElement = document.createElement('a'); |
|
|
linkElement.setAttribute('href', dataUri); |
|
|
linkElement.setAttribute('download', exportFileDefaultName); |
|
|
linkElement.click(); |
|
|
} |
|
|
|
|
|
|
|
|
generateTableBtn.addEventListener('click', generateTable); |
|
|
|
|
|
editProjectBtn.addEventListener('click', function() { |
|
|
resultsSection.classList.add('hidden'); |
|
|
userInfoForm.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
addRowBtn.addEventListener('click', function() { |
|
|
const rowCount = linksTableBody.querySelectorAll('tr').length; |
|
|
addTableRow(rowCount + 1); |
|
|
}); |
|
|
|
|
|
exportBtn.addEventListener('click', exportData); |
|
|
|
|
|
|
|
|
const inputs = document.querySelectorAll('input, textarea'); |
|
|
inputs.forEach(input => { |
|
|
input.addEventListener('focus', function() { |
|
|
this.classList.add('input-highlight'); |
|
|
}); |
|
|
|
|
|
input.addEventListener('blur', function() { |
|
|
this.classList.remove('input-highlight'); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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=Orkhan/test23" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
