makaronz's picture
Can you analyze my github repository and create frontend?
5e7c085 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Repository Analyzer Pro</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<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/vanta@latest/dist/vanta.globe.min.js"></script>
</head>
<body class="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-violet-900">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<!-- Hero Section -->
<section class="text-center mb-16">
<h1 class="text-5xl md:text-7xl font-bold text-white mb-6">
GitHub Repository
<span class="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">
Analyzer Pro
</span>
</h1>
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
Dive deep into your GitHub repositories with our powerful analysis tool.
Get insights, metrics, and beautiful visualizations in seconds.
</p>
<!-- Repository Input Form -->
<div class="max-w-md mx-auto bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20">
<form id="repoForm" class="space-y-6">
<div>
<label for="username" class="block text-sm font-medium text-gray-300 mb-2">
GitHub Username
</label>
<input
type="text"
id="username"
required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
placeholder="Enter your GitHub username"
>
</div>
<div>
<label for="repoName" class="block text-sm font-medium text-gray-300 mb-2">
Repository Name
</label>
<input
type="text"
id="repoName"
required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
placeholder="Enter repository name"
>
</div>
<button
type="submit"
class="w-full bg-gradient-to-r from-purple-500 to-pink-600 text-white font-semibold py-3 px-6 rounded-lg hover:from-purple-600 hover:to-pink-700 transition-all duration-300 transform hover:scale-105"
>
<i data-feather="search" class="inline mr-2"></i>
Analyze Repository
</button>
</form>
</div>
</section>
<!-- Features Section -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-white text-center mb-12">What We Analyze</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/10 hover:border-purple-400/50 transition-all duration-300">
<div class="text-purple-400 mb-4">
<i data-feather="code"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Code Quality</h3>
<p class="text-gray-400">Detailed analysis of code structure, complexity, and best practices.</p>
</div>
<div class="bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/10 hover:border-purple-400/50 transition-all duration-300">
<div class="text-purple-400 mb-4">
<i data-feather="trending-up"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Performance Metrics</h3>
<p class="text-gray-400">Track commits, issues, pull requests, and contributor activity.</p>
</div>
<div class="bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/10 hover:border-purple-400/50 transition-all duration-300">
<div class="text-purple-400 mb-4">
<i data-feather="users"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Team Insights</h3>
<p class="text-gray-400">Understand contributor patterns and collaboration dynamics.</p>
</div>
</div>
</section>
<!-- Results Section -->
<section id="results" class="hidden">
<div class="bg-white/5 backdrop-blur-lg rounded-2xl p-8 border border-white/20">
<h2 class="text-3xl font-bold text-white mb-6">Analysis Results</h2>
<div id="loading" class="hidden text-center py-8">
<div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-purple-500"></div>
</div>
<div id="analysisData" class="space-y-6"></div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<!-- Component Scripts -->
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<!-- Main Script -->
<script src="script.js"></script>
<!-- Initialize Vanta.js Globe -->
<script>
VANTA.GLOBE({
el: "body",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x8b5cf6,
backgroundColor: 0x111827,
size: 0.8
});
</script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>