|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CodeCanvas - GitHub Repo Render Wizard</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> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="container mx-auto px-4 py-12"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="text-center mb-12"> |
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-4">CodeCanvas</h1> |
|
|
<p class="text-xl text-gray-600">Transform GitHub repositories into beautiful documentation</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-lg p-8 mb-8"> |
|
|
<div class="mb-6"> |
|
|
<label for="repo-url" class="block text-sm font-medium text-gray-700 mb-2">GitHub Repository URL</label> |
|
|
<div class="flex"> |
|
|
<input type="text" id="repo-url" class="flex-grow px-4 py-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="https://github.com/username/repository"> |
|
|
<button id="fetch-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-r-lg transition duration-200 flex items-center"> |
|
|
<i data-feather="download" class="mr-2"></i> Fetch |
|
|
</button> |
|
|
</div> |
|
|
<div id="custom-filter-section" class="hidden"> |
|
|
<label for="custom-file-types" class="block text-sm font-medium text-gray-700 mb-2">Custom File Extensions (comma separated)</label> |
|
|
<input type="text" id="custom-file-types" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder=".ext1, .ext2, .ext3"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">File Filter</label> |
|
|
<select id="file-filter" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="all">All Files (*.*)</option> |
|
|
<option value="code">Code Only (.js, .ts, .py, .java, .cpp, .c, .h, .cs, .go, .rb, .php, .swift, .kt, .rs, .sh)</option> |
|
|
<option value="docs">Documentation Only (.md, .txt, .rst, .adoc, .tex)</option> |
|
|
<option value="config">Configuration (.json, .yaml, .yml, .toml, .xml, .ini)</option> |
|
|
<option value="tests">Test Files (_test.js, .spec.js, test_*.py, *_test.go)</option> |
|
|
<option value="styles">Styles (.css, .scss, .sass, .less)</option> |
|
|
<option value="assets">Assets (.png, .jpg, .svg, .gif, .mp4, .woff, .ttf)</option> |
|
|
<option value="custom">Custom File Types</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Template</label> |
|
|
<select id="template" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="default">Default (Code-focused)</option> |
|
|
<option value="documentation">Documentation (Readme-centric)</option> |
|
|
<option value="portfolio">Portfolio (Visual showcase)</option> |
|
|
<option value="minimal">Minimal (Clean and simple)</option> |
|
|
<option value="academic">Academic (Research papers)</option> |
|
|
<option value="blog">Blog (Markdown posts)</option> |
|
|
<option value="api">API Reference (Swagger-like)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Theme</label> |
|
|
<select id="theme" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="light">Light (GitHub-like)</option> |
|
|
<option value="dark">Dark (Dracula)</option> |
|
|
<option value="solarized">Solarized (Light/Dark)</option> |
|
|
<option value="monokai">Monokai (Vibrant)</option> |
|
|
<option value="github-dark">GitHub Dark</option> |
|
|
<option value="material">Material Design</option> |
|
|
<option value="nord">Nord (Arctic)</option> |
|
|
<option value="ayu">Ayu (Mirage)</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="preview-section" class="hidden bg-white rounded-xl shadow-lg p-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800">Preview</h2> |
|
|
<div class="flex space-x-3"> |
|
|
<button id="download-btn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition duration-200 flex items-center"> |
|
|
<i data-feather="download" class="mr-2"></i> Download |
|
|
</button> |
|
|
<button id="deploy-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition duration-200 flex items-center"> |
|
|
<i data-feather="upload" class="mr-2"></i> Deploy |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="preview-content" class="border border-gray-200 rounded-lg p-6 min-h-[400px]"> |
|
|
<div class="text-center py-20 text-gray-400"> |
|
|
<i data-feather="code" class="w-12 h-12 mx-auto mb-4"></i> |
|
|
<p>Your rendered content will appear here</p> |
|
|
</div> |
|
|
</div> |
|
|
</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(); |
|
|
</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
