Hugging Face's logo

Spaces:
sourcingnuances
/
code-tapestry
Running

App Files Community
sourcingnuances commited on
Commit
7363a2c
·
verified ·
1 Parent(s): e2fb1ac

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +257 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Code Tapestry
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: green
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: code-tapestry
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,257 @@
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>Code Tapestry Timeline</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ .tapestry-container {
11
+ perspective: 1000px;
12
+ }
13
+ .thread {
14
+ transition: all 0.3s ease;
15
+ position: relative;
16
+ transform-style: preserve-3d;
17
+ }
18
+ .thread:hover {
19
+ transform: scaleY(1.1) translateZ(10px);
20
+ z-index: 10;
21
+ }
22
+ .thread-addition {
23
+ background: linear-gradient(to right, rgba(46, 125, 50, 0.1), rgba(46, 125, 50, 0.8));
24
+ }
25
+ .thread-deletion {
26
+ background: linear-gradient(to right, rgba(198, 40, 40, 0.1), rgba(198, 40, 40, 0.8));
27
+ }
28
+ .thread:hover .thread-content {
29
+ opacity: 1;
30
+ transform: translateY(0);
31
+ }
32
+ .thread-content {
33
+ opacity: 0;
34
+ transform: translateY(20px);
35
+ transition: all 0.3s ease;
36
+ pointer-events: none;
37
+ }
38
+ .ring {
39
+ position: absolute;
40
+ border-radius: 50%;
41
+ mix-blend-mode: multiply;
42
+ transform-origin: center;
43
+ animation: ripple 1.5s infinite;
44
+ }
45
+ @keyframes ripple {
46
+ 0% {
47
+ transform: scale(0.8);
48
+ opacity: 0.6;
49
+ }
50
+ 100% {
51
+ transform: scale(1.2);
52
+ opacity: 0;
53
+ }
54
+ }
55
+ .timeline-marker {
56
+ position: relative;
57
+ }
58
+ .timeline-marker::after {
59
+ content: '';
60
+ position: absolute;
61
+ top: 0;
62
+ left: 50%;
63
+ width: 2px;
64
+ height: 100%;
65
+ background: rgba(255,255,255,0.2);
66
+ transform: translateX(-50%);
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
71
+ <div class="container mx-auto px-4 py-12">
72
+ <header class="mb-12 text-center">
73
+ <h1 class="text-4xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-red-400">
74
+ Code Tapestry Timeline
75
+ </h1>
76
+ <p class="text-gray-400 max-w-2xl mx-auto">
77
+ Where version history becomes woven art. Hover over threads to reveal the story behind each change.
78
+ </p>
79
+ </header>
80
+
81
+ <div class="tapestry-container relative">
82
+ <!-- Timeline markers -->
83
+ <div class="absolute left-0 top-0 h-full w-full flex justify-between px-8">
84
+ <div class="timeline-marker h-full w-px"></div>
85
+ <div class="timeline-marker h-full w-px"></div>
86
+ <div class="timeline-marker h-full w-px"></div>
87
+ <div class="timeline-marker h-full w-px"></div>
88
+ <div class="timeline-marker h-full w-px"></div>
89
+ </div>
90
+
91
+ <!-- Tapestry threads -->
92
+ <div class="grid gap-4">
93
+ <!-- Thread 1 -->
94
+ <div class="thread thread-addition rounded-lg p-4 shadow-lg cursor-pointer group">
95
+ <div class="flex items-center">
96
+ <div class="w-10 h-10 rounded-full bg-emerald-900 flex items-center justify-center mr-4">
97
+ <i data-feather="plus" class="text-emerald-400"></i>
98
+ </div>
99
+ <div>
100
+ <h3 class="font-medium">Added authentication middleware</h3>
101
+ <p class="text-sm text-gray-400">2 days ago by Alex</p>
102
+ </div>
103
+ </div>
104
+ <div class="thread-content absolute left-0 mt-2 w-full bg-gray-800 p-4 rounded-lg shadow-xl">
105
+ <pre class="text-xs font-mono text-emerald-300 overflow-x-auto">+ const authenticate = (req, res, next) => {
106
+ + const token = req.headers.authorization?.split(' ')[1];
107
+ + if (!token) return res.status(401).send('Access denied');
108
+ + try {
109
+ + const verified = jwt.verify(token, process.env.JWT_SECRET);
110
+ + req.user = verified;
111
+ + next();
112
+ + } catch (err) {
113
+ + res.status(400).send('Invalid token');
114
+ + }
115
+ + };</pre>
116
+ <div class="flex justify-end mt-2">
117
+ <span class="text-xs px-2 py-1 rounded-full bg-emerald-900 text-emerald-300">+24 lines</span>
118
+ </div>
119
+ </div>
120
+ <div class="ring w-20 h-20 bg-emerald-400 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
121
+ </div>
122
+
123
+ <!-- Thread 2 -->
124
+ <div class="thread thread-deletion rounded-lg p-4 shadow-lg cursor-pointer group">
125
+ <div class="flex items-center">
126
+ <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center mr-4">
127
+ <i data-feather="minus" class="text-red-400"></i>
128
+ </div>
129
+ <div>
130
+ <h3 class="font-medium">Removed deprecated API endpoints</h3>
131
+ <p class="text-sm text-gray-400">1 week ago by Sam</p>
132
+ </div>
133
+ </div>
134
+ <div class="thread-content absolute left-0 mt-2 w-full bg-gray-800 p-4 rounded-lg shadow-xl">
135
+ <pre class="text-xs font-mono text-red-300 overflow-x-auto">- app.get('/api/v1/old-endpoint', (req, res) => {
136
+ - // Deprecated since v2.3
137
+ - res.json({ message: "This endpoint is no longer supported" });
138
+ - });</pre>
139
+ <div class="flex justify-end mt-2">
140
+ <span class="text-xs px-2 py-1 rounded-full bg-red-900 text-red-300">-8 lines</span>
141
+ </div>
142
+ </div>
143
+ <div class="ring w-20 h-20 bg-red-400 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
144
+ </div>
145
+
146
+ <!-- Thread 3 -->
147
+ <div class="thread thread-addition rounded-lg p-4 shadow-lg cursor-pointer group">
148
+ <div class="flex items-center">
149
+ <div class="w-10 h-10 rounded-full bg-emerald-900 flex items-center justify-center mr-4">
150
+ <i data-feather="plus" class="text-emerald-400"></i>
151
+ </div>
152
+ <div>
153
+ <h3 class="font-medium">Implemented dark mode toggle</h3>
154
+ <p class="text-sm text-gray-400">3 weeks ago by Jordan</p>
155
+ </div>
156
+ </div>
157
+ <div class="thread-content absolute left-0 mt-2 w-full bg-gray-800 p-4 rounded-lg shadow-xl">
158
+ <pre class="text-xs font-mono text-emerald-300 overflow-x-auto">+ const [darkMode, setDarkMode] = useState(false);
159
+ +
160
+ + useEffect(() => {
161
+ + if (darkMode) {
162
+ + document.documentElement.classList.add('dark');
163
+ + } else {
164
+ + document.documentElement.classList.remove('dark');
165
+ + }
166
+ + }, [darkMode]);</pre>
167
+ <div class="flex justify-end mt-2">
168
+ <span class="text-xs px-2 py-1 rounded-full bg-emerald-900 text-emerald-300">+12 lines</span>
169
+ </div>
170
+ </div>
171
+ <div class="ring w-20 h-20 bg-emerald-400 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
172
+ </div>
173
+
174
+ <!-- Thread 4 -->
175
+ <div class="thread thread-deletion rounded-lg p-4 shadow-lg cursor-pointer group">
176
+ <div class="flex items-center">
177
+ <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center mr-4">
178
+ <i data-feather="minus" class="text-red-400"></i>
179
+ </div>
180
+ <div>
181
+ <h3 class="font-medium">Cleaned up unused dependencies</h3>
182
+ <p class="text-sm text-gray-400">1 month ago by Taylor</p>
183
+ </div>
184
+ </div>
185
+ <div class="thread-content absolute left-0 mt-2 w-full bg-gray-800 p-4 rounded-lg shadow-xl">
186
+ <pre class="text-xs font-mono text-red-300 overflow-x-auto">- "dependencies": {
187
+ - "lodash": "^4.17.20",
188
+ - "moment": "^2.29.1",
189
+ - "request": "^2.88.2"
190
+ - }</pre>
191
+ <div class="flex justify-end mt-2">
192
+ <span class="text-xs px-2 py-1 rounded-full bg-red-900 text-red-300">-5 lines</span>
193
+ </div>
194
+ </div>
195
+ <div class="ring w-20 h-20 bg-red-400 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
196
+ </div>
197
+
198
+ <!-- Thread 5 -->
199
+ <div class="thread thread-addition rounded-lg p-4 shadow-lg cursor-pointer group">
200
+ <div class="flex items-center">
201
+ <div class="w-10 h-10 rounded-full bg-emerald-900 flex items-center justify-center mr-4">
202
+ <i data-feather="plus" class="text-emerald-400"></i>
203
+ </div>
204
+ <div>
205
+ <h3 class="font-medium">Added error boundary component</h3>
206
+ <p class="text-sm text-gray-400">2 months ago by Casey</p>
207
+ </div>
208
+ </div>
209
+ <div class="thread-content absolute left-0 mt-2 w-full bg-gray-800 p-4 rounded-lg shadow-xl">
210
+ <pre class="text-xs font-mono text-emerald-300 overflow-x-auto">+ class ErrorBoundary extends React.Component {
211
+ + state = { hasError: false };
212
+ +
213
+ + static getDerivedStateFromError(error) {
214
+ + return { hasError: true };
215
+ + }
216
+ +
217
+ + componentDidCatch(error, errorInfo) {
218
+ + logErrorToService(error, errorInfo);
219
+ + }
220
+ +
221
+ + render() {
222
+ + if (this.state.hasError) {
223
+ + return <FallbackUI />;
224
+ + }
225
+ + return this.props.children;
226
+ + }
227
+ + }</pre>
228
+ <div class="flex justify-end mt-2">
229
+ <span class="text-xs px-2 py-1 rounded-full bg-emerald-900 text-emerald-300">+18 lines</span>
230
+ </div>
231
+ </div>
232
+ <div class="ring w-20 h-20 bg-emerald-400 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <footer class="mt-16 text-center text-gray-500 text-sm">
238
+ <p>Weave your code history into a visual tapestry</p>
239
+ <p class="mt-1">Hover over threads to see the changes ripple through time</p>
240
+ </footer>
241
+ </div>
242
+
243
+ <script>
244
+ feather.replace();
245
+
246
+ // Add ripple effect on hover
247
+ document.querySelectorAll('.thread').forEach(thread => {
248
+ thread.addEventListener('mouseenter', function() {
249
+ const ring = this.querySelector('.ring');
250
+ ring.style.animation = 'none';
251
+ void ring.offsetWidth; // Trigger reflow
252
+ ring.style.animation = 'ripple 1.5s infinite';
253
+ });
254
+ });
255
+ </script>
256
+ <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=sourcingnuances/code-tapestry" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
257
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Conceive a timeline tapestry where code changes weave crimson and emerald threads. Hovering unspools each line into a gentle ripple, revealing additions as growth rings and deletions as fading fibers—turning diffs into living art.