Hugging Face's logo

Spaces:
calebwodi
/
caleb-github-clone
Running

App Files Community
calebwodi commited on
Commit
60da978
·
verified ·
1 Parent(s): 49e8ccf

Generate a GitHub clone - Initial Deployment

Browse files
Files changed (6) hide show
  1. README.md +7 -5
  2. index.html +200 -18
  3. issues.html +218 -0
  4. prompts.txt +1 -0
  5. pull_request.html +232 -0
  6. repository.html +232 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Caleb Github Clone
3
- emoji: 🐨
4
- colorFrom: green
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: caleb-github-clone
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,201 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GitHub Clone</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .repo-language-color {
14
+ position: relative;
15
+ top: 1px;
16
+ display: inline-block;
17
+ width: 12px;
18
+ height: 12px;
19
+ border-radius: 50%;
20
+ }
21
+ .diff-add {
22
+ background-color: rgba(46, 160, 67, 0.15);
23
+ }
24
+ .diff-remove {
25
+ background-color: rgba(248, 81, 73, 0.15);
26
+ }
27
+ .diff-line {
28
+ font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-50 min-h-screen">
33
+ <!-- Navigation -->
34
+ <nav class="bg-gray-900 text-white px-4 py-3 flex items-center justify-between sticky top-0 z-50">
35
+ <div class="flex items-center space-x-4">
36
+ <i data-feather="github" class="w-8 h-8"></i>
37
+ <div class="relative hidden md:block">
38
+ <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">
39
+ <div class="absolute right-2 top-1.5 text-xs bg-gray-700 px-1 rounded">/</div>
40
+ </div>
41
+ <div class="hidden md:flex space-x-4 text-sm font-medium">
42
+ <a href="#" class="hover:text-gray-300">Pull requests</a>
43
+ <a href="#" class="hover:text-gray-300">Issues</a>
44
+ <a href="#" class="hover:text-gray-300">Marketplace</a>
45
+ <a href="#" class="hover:text-gray-300">Explore</a>
46
+ </div>
47
+ </div>
48
+ <div class="flex items-center space-x-3">
49
+ <button class="md:hidden">
50
+ <i data-feather="menu"></i>
51
+ </button>
52
+ <button class="hidden md:block">
53
+ <i data-feather="bell"></i>
54
+ </button>
55
+ <button class="hidden md:flex items-center space-x-1">
56
+ <i data-feather="plus" class="w-4 h-4"></i>
57
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
58
+ </button>
59
+ <div class="flex items-center space-x-1">
60
+ <div class="w-6 h-6 rounded-full bg-blue-500"></div>
61
+ <i data-feather="chevron-down" class="w-4 h-4 hidden md:block"></i>
62
+ </div>
63
+ </div>
64
+ </nav>
65
+
66
+ <!-- Main Content -->
67
+ <div class="container mx-auto px-4 py-6">
68
+ <!-- Profile Section -->
69
+ <div class="flex flex-col md:flex-row gap-6 mb-8">
70
+ <!-- Sidebar -->
71
+ <div class="w-full md:w-1/4">
72
+ <div class="bg-white rounded-lg border border-gray-200 p-4">
73
+ <div class="flex flex-col items-center">
74
+ <img src="http://static.photos/people/200x200/1" alt="Profile" class="w-48 h-48 rounded-full mb-4">
75
+ <h2 class="text-xl font-bold">octocat</h2>
76
+ <p class="text-gray-600 mb-4">The Octocat</p>
77
+ <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">
78
+ Follow
79
+ </button>
80
+ <div class="flex items-center text-gray-600 text-sm mb-2">
81
+ <i data-feather="users" class="w-4 h-4 mr-1"></i>
82
+ <span>100 followers</span>
83
+ </div>
84
+ <div class="flex items-center text-gray-600 text-sm mb-2">
85
+ <i data-feather="user-plus" class="w-4 h-4 mr-1"></i>
86
+ <span>50 following</span>
87
+ </div>
88
+ <div class="flex items-center text-gray-600 text-sm mb-4">
89
+ <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
90
+ <span>San Francisco</span>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Main Content -->
97
+ <div class="w-full md:w-3/4">
98
+ <!-- Tabs -->
99
+ <div class="border-b border-gray-200 mb-6">
100
+ <nav class="flex -mb-px">
101
+ <a href="#" class="mr-8 py-4 px-1 border-b-2 border-orange-500 font-medium text-sm text-gray-900">Overview</a>
102
+ <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>
103
+ <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>
104
+ <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>
105
+ <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>
106
+ </nav>
107
+ </div>
108
+
109
+ <!-- Pinned Repositories -->
110
+ <div class="mb-8">
111
+ <h3 class="text-lg font-semibold mb-4">Pinned repositories</h3>
112
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
113
+ <!-- Repo 1 -->
114
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-gray-300">
115
+ <div class="flex justify-between items-start mb-2">
116
+ <a href="#" class="text-blue-600 font-medium hover:underline">octocat/Hello-World</a>
117
+ <button class="text-gray-500 hover:text-gray-700">
118
+ <i data-feather="star" class="w-4 h-4"></i>
119
+ </button>
120
+ </div>
121
+ <p class="text-gray-600 text-sm mb-3">My first repository on GitHub!</p>
122
+ <div class="flex items-center text-xs text-gray-500">
123
+ <span class="repo-language-color bg-yellow-300 mr-1"></span>
124
+ <span class="mr-4">JavaScript</span>
125
+ <i data-feather="star" class="w-3 h-3 mr-1"></i>
126
+ <span class="mr-4">1,234</span>
127
+ <i data-feather="git-branch" class="w-3 h-3 mr-1"></i>
128
+ <span>42</span>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Repo 2 -->
133
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-gray-300">
134
+ <div class="flex justify-between items-start mb-2">
135
+ <a href="#" class="text-blue-600 font-medium hover:underline">octocat/Spoon-Knife</a>
136
+ <button class="text-gray-500 hover:text-gray-700">
137
+ <i data-feather="star" class="w-4 h-4"></i>
138
+ </button>
139
+ </div>
140
+ <p class="text-gray-600 text-sm mb-3">This repo is for demonstration purposes only.</p>
141
+ <div class="flex items-center text-xs text-gray-500">
142
+ <span class="repo-language-color bg-blue-500 mr-1"></span>
143
+ <span class="mr-4">TypeScript</span>
144
+ <i data-feather="star" class="w-3 h-3 mr-1"></i>
145
+ <span class="mr-4">567</span>
146
+ <i data-feather="git-branch" class="w-3 h-3 mr-1"></i>
147
+ <span>12</span>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Recent Activity -->
154
+ <div>
155
+ <h3 class="text-lg font-semibold mb-4">Recent activity</h3>
156
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
157
+ <div class="flex items-start mb-4">
158
+ <img src="http://static.photos/people/40x40/1" alt="User" class="w-10 h-10 rounded-full mr-3">
159
+ <div>
160
+ <p class="text-sm">
161
+ <span class="font-medium">octocat</span> pushed to <span class="font-medium">main</span> at <span class="font-medium">octocat/Hello-World</span>
162
+ <span class="text-gray-500 text-xs">2 hours ago</span>
163
+ </p>
164
+ <div class="bg-gray-50 rounded-md p-3 mt-2 text-sm">
165
+ <div class="flex items-center text-xs text-gray-500 mb-1">
166
+ <i data-feather="git-commit" class="w-3 h-3 mr-1"></i>
167
+ <span>a1b2c3d</span>
168
+ </div>
169
+ <p>Update README.md</p>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="flex items-start">
175
+ <img src="http://static.photos/people/40x40/2" alt="User" class="w-10 h-10 rounded-full mr-3">
176
+ <div>
177
+ <p class="text-sm">
178
+ <span class="font-medium">otheruser</span> opened a pull request in <span class="font-medium">octocat/Hello-World</span>
179
+ <span class="text-gray-500 text-xs">5 hours ago</span>
180
+ </p>
181
+ <div class="bg-gray-50 rounded-md p-3 mt-2 text-sm">
182
+ <div class="flex items-center text-xs text-gray-500 mb-1">
183
+ <i data-feather="git-pull-request" class="w-3 h-3 mr-1"></i>
184
+ <span>#42</span>
185
+ </div>
186
+ <p>Fix typo in documentation</p>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <script>
197
+ AOS.init();
198
+ feather.replace();
199
+ </script>
200
+ </body>
201
  </html>
issues.html ADDED
@@ -0,0 +1,218 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Issues - GitHub Clone</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .repo-language-color {
14
+ position: relative;
15
+ top: 1px;
16
+ display: inline-block;
17
+ width: 12px;
18
+ height: 12px;
19
+ border-radius: 50%;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-50 min-h-screen">
24
+ <!-- Navigation -->
25
+ <nav class="bg-gray-900 text-white px-4 py-3 flex items-center justify-between sticky top-0 z-50">
26
+ <div class="flex items-center space-x-4">
27
+ <i data-feather="github" class="w-8 h-8"></i>
28
+ <div class="relative hidden md:block">
29
+ <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">
30
+ <div class="absolute right-2 top-1.5 text-xs bg-gray-700 px-1 rounded">/</div>
31
+ </div>
32
+ <div class="hidden md:flex space-x-4 text-sm font-medium">
33
+ <a href="#" class="hover:text-gray-300">Pull requests</a>
34
+ <a href="#" class="hover:text-gray-300">Issues</a>
35
+ <a href="#" class="hover:text-gray-300">Marketplace</a>
36
+ <a href="#" class="hover:text-gray-300">Explore</a>
37
+ </div>
38
+ </div>
39
+ <div class="flex items-center space-x-3">
40
+ <button class="md:hidden">
41
+ <i data-feather="menu"></i>
42
+ </button>
43
+ <button class="hidden md:block">
44
+ <i data-feather="bell"></i>
45
+ </button>
46
+ <button class="hidden md:flex items-center space-x-1">
47
+ <i data-feather="plus" class="w-4 h-4"></i>
48
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
49
+ </button>
50
+ <div class="flex items-center space-x-1">
51
+ <div class="w-6 h-6 rounded-full bg-blue-500"></div>
52
+ <i data-feather="chevron-down" class="w-4 h-4 hidden md:block"></i>
53
+ </div>
54
+ </div>
55
+ </nav>
56
+
57
+ <!-- Repository Header -->
58
+ <div class="bg-white border-b border-gray-200 py-4">
59
+ <div class="container mx-auto px-4">
60
+ <div class="flex flex-col md:flex-row md:items-center justify-between">
61
+ <div class="flex items-center mb-4 md:mb-0">
62
+ <i data-feather="book" class="w-5 h-5 text-gray-600 mr-2"></i>
63
+ <div class="flex items-center text-sm">
64
+ <a href="#" class="text-blue-600 hover:underline">octocat</a>
65
+ <span class="mx-1">/</span>
66
+ <a href="#" class="text-blue-600 font-semibold hover:underline">Hello-World</a>
67
+ </div>
68
+ </div>
69
+ <div class="flex space-x-2">
70
+ <button class="flex items-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md">
71
+ <i data-feather="eye" class="w-4 h-4 mr-1"></i>
72
+ <span>Watch</span>
73
+ <span class="ml-1 text-gray-500">1.2k</span>
74
+ </button>
75
+ <button class="flex items-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md">
76
+ <i data-feather="git-branch" class="w-4 h-4 mr-1"></i>
77
+ <span>Fork</span>
78
+ <span class="ml-1 text-gray-500">42</span>
79
+ </button>
80
+ <button class="flex items-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md">
81
+ <i data-feather="star" class="w-4 h-4 mr-1"></i>
82
+ <span>Star</span>
83
+ <span class="ml-1 text-gray-500">5.6k</span>
84
+ </button>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Issues Content -->
91
+ <div class="container mx-auto px-4 py-6">
92
+ <!-- Issues Header -->
93
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
94
+ <div>
95
+ <h1 class="text-2xl font-semibold">Issues</h1>
96
+ </div>
97
+ <div class="mt-4 md:mt-0">
98
+ <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-1.5 px-4 rounded-md text-sm">
99
+ New issue
100
+ </button>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Issues Filters -->
105
+ <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
106
+ <div class="flex flex-col md:flex-row md:items-center justify-between">
107
+ <div class="flex space-x-2 mb-4 md:mb-0">
108
+ <button class="flex items-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md">
109
+ <i data-feather="filter" class="w-4 h-4 mr-1"></i>
110
+ <span>Filters</span>
111
+ </button>
112
+ <button class="flex items-center text-sm bg-white border border-gray-300 hover:bg-gray-50 text-gray-800 px-3 py-1 rounded-md">
113
+ <span>Labels</span>
114
+ <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
115
+ </button>
116
+ <button class="flex items-center text-sm bg-white border border-gray-300 hover:bg-gray-50 text-gray-800 px-3 py-1 rounded-md">
117
+ <span>Milestones</span>
118
+ <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
119
+ </button>
120
+ </div>
121
+ <div class="flex items-center">
122
+ <button class="text-gray-500 hover:text-gray-700 mr-2">
123
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
124
+ </button>
125
+ <div class="relative">
126
+ <input type="text" placeholder="Search all issues" class="bg-gray-50 border border-gray-300 rounded-md px-3 py-1 text-sm w-full md:w-64 focus:outline-none focus:ring-2 focus:ring-blue-500">
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Issues List -->
133
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
134
+ <!-- Issue Header -->
135
+ <div class="px-4 py-3 border-b border-gray-200 bg-gray-50">
136
+ <div class="flex items-center">
137
+ <i data-feather="alert-circle" class="w-5 h-5 text-gray-500 mr-2"></i>
138
+ <span class="text-sm font-medium">3 Open</span>
139
+ <span class="text-sm text-gray-500 ml-4">2 Closed</span>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Issue 1 -->
144
+ <div class="p-4 border-b border-gray-200 hover:bg-gray-50">
145
+ <div class="flex items-start">
146
+ <div class="mr-3 mt-1">
147
+ <i data-feather="alert-circle" class="w-5 h-5 text-green-600"></i>
148
+ </div>
149
+ <div class="flex-1">
150
+ <div class="flex items-center mb-1">
151
+ <a href="#" class="text-blue-600 font-medium hover:underline">Fix typo in documentation</a>
152
+ <div class="flex ml-2 space-x-1">
153
+ <span class="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-800">bug</span>
154
+ <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-800">documentation</span>
155
+ </div>
156
+ </div>
157
+ <p class="text-sm text-gray-600 mb-2">#42 opened 2 days ago by <a href="#" class="text-blue-600 hover:underline">otheruser</a></p>
158
+ <div class="flex items-center text-xs text-gray-500">
159
+ <i data-feather="message-square" class="w-3 h-3 mr-1"></i>
160
+ <span>3 comments</span>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Issue 2 -->
167
+ <div class="p-4 border-b border-gray-200 hover:bg-gray-50">
168
+ <div class="flex items-start">
169
+ <div class="mr-3 mt-1">
170
+ <i data-feather="alert-circle" class="w-5 h-5 text-green-600"></i>
171
+ </div>
172
+ <div class="flex-1">
173
+ <div class="flex items-center mb-1">
174
+ <a href="#" class="text-blue-600 font-medium hover:underline">Add dark mode support</a>
175
+ <div class="flex ml-2 space-x-1">
176
+ <span class="text-xs px-2 py-0.5 rounded-full bg-purple-100 text-purple-800">enhancement</span>
177
+ </div>
178
+ </div>
179
+ <p class="text-sm text-gray-600 mb-2">#41 opened 1 week ago by <a href="#" class="text-blue-600 hover:underline">darkmoder</a></p>
180
+ <div class="flex items-center text-xs text-gray-500">
181
+ <i data-feather="message-square" class="w-3 h-3 mr-1"></i>
182
+ <span>7 comments</span>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Issue 3 -->
189
+ <div class="p-4 hover:bg-gray-50">
190
+ <div class="flex items-start">
191
+ <div class="mr-3 mt-1">
192
+ <i data-feather="alert-circle" class="w-5 h-5 text-green-600"></i>
193
+ </div>
194
+ <div class="flex-1">
195
+ <div class="flex items-center mb-1">
196
+ <a href="#" class="text-blue-600 font-medium hover:underline">Improve performance on mobile devices</a>
197
+ <div class="flex ml-2 space-x-1">
198
+ <span class="text-xs px-2 py-0.5 rounded-full bg-purple-100 text-purple-800">enhancement</span>
199
+ <span class="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-800">performance</span>
200
+ </div>
201
+ </div>
202
+ <p class="text-sm text-gray-600 mb-2">#40 opened 2 weeks ago by <a href="#" class="text-blue-600 hover:underline">mobileuser</a></p>
203
+ <div class="flex items-center text-xs text-gray-500">
204
+ <i data-feather="message-square" class="w-3 h-3 mr-1"></i>
205
+ <span>12 comments</span>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <script>
214
+ AOS.init();
215
+ feather.replace();
216
+ </script>
217
+ </body>
218
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Generate a GitHub clone
pull_request.html ADDED
@@ -0,0 +1,232 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Pull Request - GitHub Clone</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .repo-language-color {
14
+ position: relative;
15
+ top: 1px;
16
+ display: inline-block;
17
+ width: 12px;
18
+ height: 12px;
19
+ border-radius: 50%;
20
+ }
21
+ .diff-add {
22
+ background-color: rgba(46, 160, 67, 0.15);
23
+ }
24
+ .diff-remove {
25
+ background-color: rgba(248, 81, 73, 0.15);
26
+ }
27
+ .diff-line {
28
+ font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-50 min-h-screen">
33
+ <!-- Navigation -->
34
+ <nav class="bg-gray-900 text-white px-4 py-3 flex items-center justify-between sticky top-0 z-50">
35
+ <div class="flex items-center space-x-4">
36
+ <i data-feather="github" class="w-8 h-8"></i>
37
+ <div class="relative hidden md:block">
38
+ <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">
39
+ <div class="absolute right-2 top-1.5 text-xs bg-gray-700 px-1 rounded">/</div>
40
+ </div>
41
+ <div class="hidden md:flex space-x-4 text-sm font-medium">
42
+ <a href="#" class="hover:text-gray-300">Pull requests</a>
43
+ <a href="#" class="hover:text-gray-300">Issues</a>
44
+ <a href="#" class="hover:text-gray-300">Marketplace</a>
45
+ <a href="#" class="hover:text-gray-300">Explore</a>
46
+ </div>
47
+ </div>
48
+ <div class="flex items-center space-x-3">
49
+ <button class="md:hidden">
50
+ <i data-feather="menu"></i>
51
+ </button>
52
+ <button class="hidden md:block">
53
+ <i data-feather="bell"></i>
54
+ </button>
55
+ <button class="hidden md:flex items-center space-x-1">
56
+ <i data-feather="plus" class="w-4 h-4"></i>
57
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
58
+ </button>
59
+ <div class="flex items-center space-x-1">
60
+ <div class="w-6 h-6 rounded-full bg-blue-500"></div>
61
+ <i data-feather="chevron-down" class="w-4 h-4 hidden md:block"></i>
62
+ </div>
63
+ </div>
64
+ </nav>
65
+
66
+ <!-- Repository Header -->
67
+ <div class="bg-white border-b border-gray-200 py-4">
68
+ <div class="container mx-auto px-4">
69
+ <div class="flex flex-col md:flex-row md:items-center justify-between">
70
+ <div class="flex items-center mb-4 md:mb-0">
71
+ <i data-feather="book" class="w-5 h-5 text-gray-600 mr-2"></i>
72
+ <div class="flex items-center text-sm">
73
+ <a href="#" class="text-blue-600 hover:underline">octocat</a>
74
+ <span class="mx-1">/</span>
75
+ <a href="#" class="text-blue-600 font-semibold hover:underline">Hello-World</a>
76
+ </div>
77
+ </div>
78
+ <div class="flex space-x-2">
79
+ <button class="flex items-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md">
80
+ <i data-feather="eye" class="w-4 h-4 mr-1"></i>
81
+ <span>Watch</span>
82
+ <span class="ml-1 text-gray-500">1.2k</span>
83
+ </button>
84
+ <button class="flex items-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md">
85
+ <i data-feather="git-branch" class="w-4 h-4 mr-1"></i>
86
+ <span>Fork</span>
87
+ <span class="ml-1 text-gray-500">42</span>
88
+ </button>
89
+ <button class="flex items-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md">
90
+ <i data-feather="star" class="w-4 h-4 mr-1"></i>
91
+ <span>Star</span>
92
+ <span class="ml-1 text-gray-500">5.6k</span>
93
+ </button>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Pull Request Content -->
100
+ <div class="container mx-auto px-4 py-6">
101
+ <!-- Pull Request Header -->
102
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
103
+ <div>
104
+ <h1 class="text-2xl font-semibold">Pull requests</h1>
105
+ </div>
106
+ <div class="mt-4 md:mt-0">
107
+ <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-1.5 px-4 rounded-md text-sm">
108
+ New pull request
109
+ </button>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Pull Request Filters -->
114
+ <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
115
+ <div class="flex flex-col md:flex-row md:items-center justify-between">
116
+ <div class="flex space-x-2 mb-4 md:mb-0">
117
+ <button class="flex items-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md">
118
+ <i data-feather="filter" class="w-4 h-4 mr-1"></i>
119
+ <span>Filters</span>
120
+ </button>
121
+ <button class="flex items-center text-sm bg-white border border-gray-300 hover:bg-gray-50 text-gray-800 px-3 py-1 rounded-md">
122
+ <span>Labels</span>
123
+ <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
124
+ </button>
125
+ <button class="flex items-center text-sm bg-white border border-gray-300 hover:bg-gray-50 text-gray-800 px-3 py-1 rounded-md">
126
+ <span>Milestones</span>
127
+ <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
128
+ </button>
129
+ </div>
130
+ <div class="flex items-center">
131
+ <button class="text-gray-500 hover:text-gray-700 mr-2">
132
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
133
+ </button>
134
+ <div class="relative">
135
+ <input type="text" placeholder="Search all pull requests" class="bg-gray-50 border border-gray-300 rounded-md px-3 py-1 text-sm w-full md:w-64 focus:outline-none focus:ring-2 focus:ring-blue-500">
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Pull Request List -->
142
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
143
+ <!-- PR Header -->
144
+ <div class="px-4 py-3 border-b border-gray-200 bg-gray-50">
145
+ <div class="flex items-center">
146
+ <i data-feather="git-pull-request" class="w-5 h-5 text-gray-500 mr-2"></i>
147
+ <span class="text-sm font-medium">2 Open</span>
148
+ <span class="text-sm text-gray-500 ml-4">1 Closed</span>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- PR 1 -->
153
+ <div class="p-4 border-b border-gray-200 hover:bg-gray-50">
154
+ <div class="flex items-start">
155
+ <div class="mr-3 mt-1">
156
+ <i data-feather="git-pull-request" class="w-5 h-5 text-green-600"></i>
157
+ </div>
158
+ <div class="flex-1">
159
+ <div class="flex items-center mb-1">
160
+ <a href="#" class="text-blue-600 font-medium hover:underline">Fix typo in documentation</a>
161
+ <div class="flex ml-2 space-x-1">
162
+ <span class="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-800">bug</span>
163
+ <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-800">documentation</span>
164
+ </div>
165
+ </div>
166
+ <p class="text-sm text-gray-600 mb-2">#42 opened 2 days ago by <a href="#" class="text-blue-600 hover:underline">otheruser</a> • from <span class="font-mono text-xs">fix-typo</span> into <span class="font-mono text-xs">main</span></p>
167
+ <div class="flex items-center text-xs text-gray-500">
168
+ <i data-feather="message-square" class="w-3 h-3 mr-1"></i>
169
+ <span class="mr-4">3 comments</span>
170
+ <i data-feather="check-circle" class="w-3 h-3 mr-1"></i>
171
+ <span>2 checks passed</span>
172
+ </div>
173
+ </div>
174
+ <button class="text-gray-500 hover:text-gray-700">
175
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
176
+ </button>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- PR 2 -->
181
+ <div class="p-4 hover:bg-gray-50">
182
+ <div class="flex items-start">
183
+ <div class="mr-3 mt-1">
184
+ <i data-feather="git-pull-request" class="w-5 h-5 text-green-600"></i>
185
+ </div>
186
+ <div class="flex-1">
187
+ <div class="flex items-center mb-1">
188
+ <a href="#" class="text-blue-600 font-medium hover:underline">Add dark mode support</a>
189
+ <div class="flex ml-2 space-x-1">
190
+ <span class="text-xs px-2 py-0.5 rounded-full bg-purple-100 text-purple-800">enhancement</span>
191
+ </div>
192
+ </div>
193
+ <p class="text-sm text-gray-600 mb-2">#41 opened 1 week ago by <a href="#" class="text-blue-600 hover:underline">darkmoder</a> • from <span class="font-mono text-xs">dark-mode</span> into <span class="font-mono text-xs">main</span></p>
194
+ <div class="flex items-center text-xs text-gray-500">
195
+ <i data-feather="message-square" class="w-3 h-3 mr-1"></i>
196
+ <span class="mr-4">7 comments</span>
197
+ <i data-feather="check-circle" class="w-3 h-3 mr-1"></i>
198
+ <span>5 checks passed</span>
199
+ </div>
200
+ </div>
201
+ <button class="text-gray-500 hover:text-gray-700">
202
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
203
+ </button>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <script>
210
+ AOS.init();
211
+ feather.replace();
212
+ </script>
213
+ </body>
214
+ </html>
215
+
216
+
217
+ These HTML files create a responsive GitHub clone with the following pages:
218
+ 1. index.html - User profile page with pinned repositories and activity feed
219
+ 2. repository.html - Repository view with code, commits, and branches
220
+ 3. issues.html - Issues list with filtering options
221
+ 4. pull_request.html - Pull requests list with status indicators
222
+
223
+ The design uses TailwindCSS for responsive styling and Feather Icons for icons. The UI closely mimics GitHub's interface with appropriate navigation, repository headers, and content organization.
224
+
225
+ For a full-stack implementation, you would need to:
226
+ 1. Set up a backend server (Node.js, Python, Ruby, etc.)
227
+ 2. Create API endpoints for user authentication, repository management, issues, and pull requests
228
+ 3. Implement database storage (PostgreSQL, MongoDB, etc.)
229
+ 4. Add Git integration for repository management
230
+ 5. Connect the frontend to the backend via fetch/AJAX calls
231
+
232
+ Would you like me to provide any additional pages or focus on specific aspects of the implementation?
repository.html ADDED
@@ -0,0 +1,232 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Repository - GitHub Clone</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .repo-language-color {
14
+ position: relative;
15
+ top: 1px;
16
+ display: inline-block;
17
+ width: 12px;
18
+ height: 12px;
19
+ border-radius: 50%;
20
+ }
21
+ .diff-add {
22
+ background-color: rgba(46, 160, 67, 0.15);
23
+ }
24
+ .diff-remove {
25
+ background-color: rgba(248, 81, 73, 0.15);
26
+ }
27
+ .diff-line {
28
+ font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
29
+ }
30
+ .code-line {
31
+ font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50 min-h-screen">
36
+ <!-- Navigation -->
37
+ <nav class="bg-gray-900 text-white px-4 py-3 flex items-center justify-between sticky top-0 z-50">
38
+ <div class="flex items-center space-x-4">
39
+ <i data-feather="github" class="w-8 h-8"></i>
40
+ <div class="relative hidden md:block">
41
+ <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">
42
+ <div class="absolute right-2 top-1.5 text-xs bg-gray-700 px-1 rounded">/</div>
43
+ </div>
44
+ <div class="hidden md:flex space-x-4 text-sm font-medium">
45
+ <a href="#" class="hover:text-gray-300">Pull requests</a>
46
+ <a href="#" class="hover:text-gray-300">Issues</a>
47
+ <a href="#" class="hover:text-gray-300">Marketplace</a>
48
+ <a href="#" class="hover:text-gray-300">Explore</a>
49
+ </div>
50
+ </div>
51
+ <div class="flex items-center space-x-3">
52
+ <button class="md:hidden">
53
+ <i data-feather="menu"></i>
54
+ </button>
55
+ <button class="hidden md:block">
56
+ <i data-feather="bell"></i>
57
+ </button>
58
+ <button class="hidden md:flex items-center space-x-1">
59
+ <i data-feather="plus" class="w-4 h-4"></i>
60
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
61
+ </button>
62
+ <div class="flex items-center space-x-1">
63
+ <div class="w-6 h-6 rounded-full bg-blue-500"></div>
64
+ <i data-feather="chevron-down" class="w-4 h-4 hidden md:block"></i>
65
+ </div>
66
+ </div>
67
+ </nav>
68
+
69
+ <!-- Repository Header -->
70
+ <div class="bg-white border-b border-gray-200 py-4">
71
+ <div class="container mx-auto px-4">
72
+ <div class="flex flex-col md:flex-row md:items-center justify-between">
73
+ <div class="flex items-center mb-4 md:mb-0">
74
+ <i data-feather="book" class="w-5 h-5 text-gray-600 mr-2"></i>
75
+ <div class="flex items-center text-sm">
76
+ <a href="#" class="text-blue-600 hover:underline">octocat</a>
77
+ <span class="mx-1">/</span>
78
+ <a href="#" class="text-blue-600 font-semibold hover:underline">Hello-World</a>
79
+ </div>
80
+ </div>
81
+ <div class="flex space-x-2">
82
+ <button class="flex items-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md">
83
+ <i data-feather="eye" class="w-4 h-4 mr-1"></i>
84
+ <span>Watch</span>
85
+ <span class="ml-1 text-gray-500">1.2k</span>
86
+ </button>
87
+ <button class="flex items-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md">
88
+ <i data-feather="git-branch" class="w-4 h-4 mr-1"></i>
89
+ <span>Fork</span>
90
+ <span class="ml-1 text-gray-500">42</span>
91
+ </button>
92
+ <button class="flex items-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md">
93
+ <i data-feather="star" class="w-4 h-4 mr-1"></i>
94
+ <span>Star</span>
95
+ <span class="ml-1 text-gray-500">5.6k</span>
96
+ </button>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Repository Content -->
103
+ <div class="container mx-auto px-4 py-6">
104
+ <!-- Repository Tabs -->
105
+ <div class="border-b border-gray-200 mb-6">
106
+ <nav class="flex -mb-px overflow-x-auto">
107
+ <a href="#" class="mr-8 py-4 px-1 border-b-2 border-orange-500 font-medium text-sm text-gray-900 whitespace-nowrap">Code</a>
108
+ <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 whitespace-nowrap">Issues</a>
109
+ <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 whitespace-nowrap">Pull requests</a>
110
+ <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 whitespace-nowrap">Actions</a>
111
+ <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 whitespace-nowrap">Projects</a>
112
+ <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 whitespace-nowrap">Security</a>
113
+ <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 whitespace-nowrap">Insights</a>
114
+ </nav>
115
+ </div>
116
+
117
+ <!-- Branch Selector and Actions -->
118
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
119
+ <div class="flex items-center mb-4 md:mb-0">
120
+ <div class="relative">
121
+ <button class="flex items-center text-sm bg-white border border-gray-300 rounded-md px-3 py-1.5 hover:bg-gray-50">
122
+ <i data-feather="git-branch" class="w-4 h-4 mr-2"></i>
123
+ <span class="font-medium">main</span>
124
+ <i data-feather="chevron-down" class="w-4 h-4 ml-2"></i>
125
+ </button>
126
+ </div>
127
+ <span class="text-sm text-gray-500 ml-4">1 branch</span>
128
+ <span class="text-sm text-gray-500 ml-4">0 tags</span>
129
+ </div>
130
+ <div class="flex space-x-2">
131
+ <button class="flex items-center text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1.5 rounded-md">
132
+ <i data-feather="download" class="w-4 h-4 mr-1"></i>
133
+ <span>Code</span>
134
+ <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
135
+ </button>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- File Explorer -->
140
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden mb-6">
141
+ <!-- File Header -->
142
+ <div class="flex items-center justify-between bg-gray-50 px-4 py-2 border-b border-gray-200">
143
+ <div class="flex items-center">
144
+ <i data-feather="file-text" class="w-4 h-4 text-gray-500 mr-2"></i>
145
+ <span class="text-sm font-medium">README.md</span>
146
+ </div>
147
+ <div class="flex space-x-2">
148
+ <button class="text-gray-500 hover:text-gray-700">
149
+ <i data-feather="edit" class="w-4 h-4"></i>
150
+ </button>
151
+ <button class="text-gray-500 hover:text-gray-700">
152
+ <i data-feather="trash-2" class="w-4 h-4"></i>
153
+ </button>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- File Content -->
158
+ <div class="p-4">
159
+ <div class="prose max-w-none">
160
+ <h1>Hello World</h1>
161
+ <p>This is my first repository on GitHub!</p>
162
+ <h2>Getting Started</h2>
163
+ <p>To get started with this project:</p>
164
+ <pre><code>git clone https://github.com/octocat/Hello-World.git
165
+ cd Hello-World
166
+ npm install
167
+ npm start</code></pre>
168
+ <h2>Contributing</h2>
169
+ <p>Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.</p>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- Recent Commits -->
175
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
176
+ <div class="px-4 py-3 border-b border-gray-200 bg-gray-50">
177
+ <h3 class="text-sm font-medium">Recent commits</h3>
178
+ </div>
179
+ <div class="divide-y divide-gray-200">
180
+ <!-- Commit 1 -->
181
+ <div class="p-4">
182
+ <div class="flex items-start">
183
+ <img src="http://static.photos/people/40x40/1" alt="User" class="w-10 h-10 rounded-full mr-3">
184
+ <div class="flex-1">
185
+ <div class="flex items-center mb-1">
186
+ <span class="text-sm font-medium mr-2">octocat</span>
187
+ <span class="text-xs text-gray-500">committed 2 hours ago</span>
188
+ </div>
189
+ <div class="text-sm mb-2">
190
+ <a href="#" class="text-blue-600 hover:underline">Update README.md</a>
191
+ </div>
192
+ <div class="flex items-center text-xs text-gray-500">
193
+ <i data-feather="git-commit" class="w-3 h-3 mr-1"></i>
194
+ <span class="font-mono mr-4">a1b2c3d</span>
195
+ <i data-feather="git-branch" class="w-3 h-3 mr-1"></i>
196
+ <span>main</span>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Commit 2 -->
203
+ <div class="p-4">
204
+ <div class="flex items-start">
205
+ <img src="http://static.photos/people/40x40/2" alt="User" class="w-10 h-10 rounded-full mr-3">
206
+ <div class="flex-1">
207
+ <div class="flex items-center mb-1">
208
+ <span class="text-sm font-medium mr-2">otheruser</span>
209
+ <span class="text-xs text-gray-500">committed 1 day ago</span>
210
+ </div>
211
+ <div class="text-sm mb-2">
212
+ <a href="#" class="text-blue-600 hover:underline">Fix typo in documentation</a>
213
+ </div>
214
+ <div class="flex items-center text-xs text-gray-500">
215
+ <i data-feather="git-commit" class="w-3 h-3 mr-1"></i>
216
+ <span class="font-mono mr-4">e4f5g6h</span>
217
+ <i data-feather="git-branch" class="w-3 h-3 mr-1"></i>
218
+ <span>main</span>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <script>
228
+ AOS.init();
229
+ feather.replace();
230
+ </script>
231
+ </body>
232
+ </html>