Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GitHub Clone</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .repo-language-color { | |
| position: relative; | |
| top: 1px; | |
| display: inline-block; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| .diff-add { | |
| background-color: rgba(46, 160, 67, 0.15); | |
| } | |
| .diff-remove { | |
| background-color: rgba(248, 81, 73, 0.15); | |
| } | |
| .diff-line { | |
| font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-900 text-white px-4 py-3 flex items-center justify-between sticky top-0 z-50"> | |
| <div class="flex items-center space-x-4"> | |
| <i data-feather="github" class="w-8 h-8"></i> | |
| <div class="relative hidden md:block"> | |
| <input type="text" placeholder="Search or jump to..." class="bg-gray-800 text-sm rounded-md px-3 py-1.5 w-64 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <div class="absolute right-2 top-1.5 text-xs bg-gray-700 px-1 rounded">/</div> | |
| </div> | |
| <div class="hidden md:flex space-x-4 text-sm font-medium"> | |
| <a href="#" class="hover:text-gray-300">Pull requests</a> | |
| <a href="#" class="hover:text-gray-300">Issues</a> | |
| <a href="#" class="hover:text-gray-300">Marketplace</a> | |
| <a href="#" class="hover:text-gray-300">Explore</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <button class="hidden md:block"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| <button class="hidden md:flex items-center space-x-1"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| <div class="flex items-center space-x-1"> | |
| <div class="w-6 h-6 rounded-full bg-blue-500"></div> | |
| <i data-feather="chevron-down" class="w-4 h-4 hidden md:block"></i> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 py-6"> | |
| <!-- Profile Section --> | |
| <div class="flex flex-col md:flex-row gap-6 mb-8"> | |
| <!-- Sidebar --> | |
| <div class="w-full md:w-1/4"> | |
| <div class="bg-white rounded-lg border border-gray-200 p-4"> | |
| <div class="flex flex-col items-center"> | |
| <img src="http://static.photos/people/200x200/1" alt="Profile" class="w-48 h-48 rounded-full mb-4"> | |
| <h2 class="text-xl font-bold">octocat</h2> | |
| <p class="text-gray-600 mb-4">The Octocat</p> | |
| <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-4 rounded-md text-sm w-full mb-4"> | |
| Follow | |
| </button> | |
| <div class="flex items-center text-gray-600 text-sm mb-2"> | |
| <i data-feather="users" class="w-4 h-4 mr-1"></i> | |
| <span>100 followers</span> | |
| </div> | |
| <div class="flex items-center text-gray-600 text-sm mb-2"> | |
| <i data-feather="user-plus" class="w-4 h-4 mr-1"></i> | |
| <span>50 following</span> | |
| </div> | |
| <div class="flex items-center text-gray-600 text-sm mb-4"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-1"></i> | |
| <span>San Francisco</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="w-full md:w-3/4"> | |
| <!-- Tabs --> | |
| <div class="border-b border-gray-200 mb-6"> | |
| <nav class="flex -mb-px"> | |
| <a href="#" class="mr-8 py-4 px-1 border-b-2 border-orange-500 font-medium text-sm text-gray-900">Overview</a> | |
| <a href="#" class="mr-8 py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">Repositories</a> | |
| <a href="#" class="mr-8 py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">Projects</a> | |
| <a href="#" class="mr-8 py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">Packages</a> | |
| <a href="#" class="mr-8 py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">Stars</a> | |
| </nav> | |
| </div> | |
| <!-- Pinned Repositories --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold mb-4">Pinned repositories</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Repo 1 --> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:border-gray-300"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <a href="#" class="text-blue-600 font-medium hover:underline">octocat/Hello-World</a> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">My first repository on GitHub!</p> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <span class="repo-language-color bg-yellow-300 mr-1"></span> | |
| <span class="mr-4">JavaScript</span> | |
| <i data-feather="star" class="w-3 h-3 mr-1"></i> | |
| <span class="mr-4">1,234</span> | |
| <i data-feather="git-branch" class="w-3 h-3 mr-1"></i> | |
| <span>42</span> | |
| </div> | |
| </div> | |
| <!-- Repo 2 --> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:border-gray-300"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <a href="#" class="text-blue-600 font-medium hover:underline">octocat/Spoon-Knife</a> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">This repo is for demonstration purposes only.</p> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <span class="repo-language-color bg-blue-500 mr-1"></span> | |
| <span class="mr-4">TypeScript</span> | |
| <i data-feather="star" class="w-3 h-3 mr-1"></i> | |
| <span class="mr-4">567</span> | |
| <i data-feather="git-branch" class="w-3 h-3 mr-1"></i> | |
| <span>12</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Recent activity</h3> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-start mb-4"> | |
| <img src="http://static.photos/people/40x40/1" alt="User" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="text-sm"> | |
| <span class="font-medium">octocat</span> pushed to <span class="font-medium">main</span> at <span class="font-medium">octocat/Hello-World</span> | |
| <span class="text-gray-500 text-xs">2 hours ago</span> | |
| </p> | |
| <div class="bg-gray-50 rounded-md p-3 mt-2 text-sm"> | |
| <div class="flex items-center text-xs text-gray-500 mb-1"> | |
| <i data-feather="git-commit" class="w-3 h-3 mr-1"></i> | |
| <span>a1b2c3d</span> | |
| </div> | |
| <p>Update README.md</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <img src="http://static.photos/people/40x40/2" alt="User" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="text-sm"> | |
| <span class="font-medium">otheruser</span> opened a pull request in <span class="font-medium">octocat/Hello-World</span> | |
| <span class="text-gray-500 text-xs">5 hours ago</span> | |
| </p> | |
| <div class="bg-gray-50 rounded-md p-3 mt-2 text-sm"> | |
| <div class="flex items-center text-xs text-gray-500 mb-1"> | |
| <i data-feather="git-pull-request" class="w-3 h-3 mr-1"></i> | |
| <span>#42</span> | |
| </div> | |
| <p>Fix typo in documentation</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |