Hugging Face's logo

Spaces:
XXXMARK
/
mcw
Running

App Files Community
XXXMARK commited on
Commit
c467c78
·
verified ·
1 Parent(s): 63fe2ae

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +279 -18
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mcw
3
- emoji: 🦀
4
- colorFrom: yellow
5
- colorTo: purple
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: mcw
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
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,280 @@
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>My Creative Workspace</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .workspace-card {
14
+ transition: all 0.3s ease;
15
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
16
+ }
17
+ .workspace-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .tool-icon {
22
+ width: 60px;
23
+ height: 60px;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ border-radius: 16px;
28
+ font-size: 24px;
29
+ color: white;
30
+ margin-bottom: 15px;
31
+ }
32
+ .inspiration-item {
33
+ background-size: cover;
34
+ background-position: center;
35
+ height: 200px;
36
+ border-radius: 12px;
37
+ position: relative;
38
+ overflow: hidden;
39
+ }
40
+ .inspiration-overlay {
41
+ position: absolute;
42
+ bottom: 0;
43
+ left: 0;
44
+ right: 0;
45
+ background: rgba(0, 0, 0, 0.6);
46
+ color: white;
47
+ padding: 15px;
48
+ transform: translateY(100%);
49
+ transition: transform 0.3s ease;
50
+ }
51
+ .inspiration-item:hover .inspiration-overlay {
52
+ transform: translateY(0);
53
+ }
54
+ .animate-float {
55
+ animation: float 6s ease-in-out infinite;
56
+ }
57
+ @keyframes float {
58
+ 0% { transform: translateY(0px); }
59
+ 50% { transform: translateY(-20px); }
60
+ 100% { transform: translateY(0px); }
61
+ }
62
+ </style>
63
+ </head>
64
+ <body class="gradient-bg min-h-screen font-sans">
65
+ <header class="bg-white bg-opacity-90 shadow-sm">
66
+ <div class="container mx-auto px-6 py-4">
67
+ <div class="flex items-center justify-between">
68
+ <div class="flex items-center">
69
+ <i class="fas fa-laptop-code text-3xl text-indigo-600 mr-3"></i>
70
+ <h1 class="text-2xl font-bold text-gray-800">Creative Workspace</h1>
71
+ </div>
72
+ <nav class="hidden md:flex space-x-8">
73
+ <a href="#" class="text-indigo-600 font-medium">Home</a>
74
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Tools</a>
75
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Inspiration</a>
76
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Collaboration</a>
77
+ </nav>
78
+ <button class="md:hidden text-gray-600">
79
+ <i class="fas fa-bars text-2xl"></i>
80
+ </button>
81
+ </div>
82
+ </div>
83
+ </header>
84
+
85
+ <main class="container mx-auto px-6 py-12">
86
+ <!-- Hero Section -->
87
+ <section class="flex flex-col md:flex-row items-center mb-20">
88
+ <div class="md:w-1/2 mb-10 md:mb-0">
89
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 leading-tight mb-6">
90
+ My <span class="text-indigo-600">Creative</span> Workspace
91
+ </h1>
92
+ <p class="text-lg text-gray-600 mb-8">
93
+ A meticulously designed environment that enhances creativity, optimizes workflow, and fosters innovation. Every element is thoughtfully curated to propel both individual and collaborative success.
94
+ </p>
95
+ <div class="flex space-x-4">
96
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition shadow-md">
97
+ Explore Tools
98
+ </button>
99
+ <button class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-medium transition">
100
+ Virtual Tour
101
+ </button>
102
+ </div>
103
+ </div>
104
+ <div class="md:w-1/2 flex justify-center">
105
+ <div class="relative w-full max-w-md">
106
+ <img src="https://images.unsplash.com/photo-1517502884422-41eaead166d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
107
+ alt="Workspace"
108
+ class="rounded-xl shadow-2xl w-full h-auto animate-float">
109
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg">
110
+ <div class="flex items-center">
111
+ <div class="bg-indigo-100 p-3 rounded-full mr-3">
112
+ <i class="fas fa-lightbulb text-indigo-600"></i>
113
+ </div>
114
+ <div>
115
+ <p class="text-sm text-gray-500">Daily Inspiration</p>
116
+ <p class="font-medium">Creative Flow</p>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <!-- Digital Tools Section -->
125
+ <section class="mb-20">
126
+ <div class="text-center mb-12">
127
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Digital Toolkit</h2>
128
+ <p class="text-gray-600 max-w-2xl mx-auto">
129
+ State-of-the-art platforms and software that streamline my creative process and enhance productivity.
130
+ </p>
131
+ </div>
132
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
133
+ <!-- Tool 1 -->
134
+ <div class="bg-white rounded-xl p-6 workspace-card">
135
+ <div class="tool-icon bg-gradient-to-r from-blue-500 to-blue-400">
136
+ <i class="fas fa-comments"></i>
137
+ </div>
138
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Communication</h3>
139
+ <p class="text-gray-600 mb-4">
140
+ Seamless collaboration with colleagues through advanced communication platforms.
141
+ </p>
142
+ <div class="flex flex-wrap gap-2">
143
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Slack</span>
144
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Zoom</span>
145
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Teams</span>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Tool 2 -->
150
+ <div class="bg-white rounded-xl p-6 workspace-card">
151
+ <div class="tool-icon bg-gradient-to-r from-purple-500 to-purple-400">
152
+ <i class="fas fa-project-diagram"></i>
153
+ </div>
154
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Project Management</h3>
155
+ <p class="text-gray-600 mb-4">
156
+ Sophisticated systems to organize, track, and manage all creative projects.
157
+ </p>
158
+ <div class="flex flex-wrap gap-2">
159
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Trello</span>
160
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Asana</span>
161
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Jira</span>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Tool 3 -->
166
+ <div class="bg-white rounded-xl p-6 workspace-card">
167
+ <div class="tool-icon bg-gradient-to-r from-green-500 to-green-400">
168
+ <i class="fas fa-paint-brush"></i>
169
+ </div>
170
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Design Suite</h3>
171
+ <p class="text-gray-600 mb-4">
172
+ Professional creative software for visual design, prototyping, and asset creation.
173
+ </p>
174
+ <div class="flex flex-wrap gap-2">
175
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Figma</span>
176
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Adobe CC</span>
177
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Sketch</span>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Tool 4 -->
182
+ <div class="bg-white rounded-xl p-6 workspace-card">
183
+ <div class="tool-icon bg-gradient-to-r from-red-500 to-red-400">
184
+ <i class="fas fa-code"></i>
185
+ </div>
186
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Development</h3>
187
+ <p class="text-gray-600 mb-4">
188
+ Powerful coding environments and version control for technical implementation.
189
+ </p>
190
+ <div class="flex flex-wrap gap-2">
191
+ <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">VS Code</span>
192
+ <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">GitHub</span>
193
+ <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">Docker</span>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </section>
198
+
199
+ <!-- Inspiration Section -->
200
+ <section class="mb-20">
201
+ <div class="text-center mb-12">
202
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Creative Inspiration</h2>
203
+ <p class="text-gray-600 max-w-2xl mx-auto">
204
+ Elements in my workspace that ignite creativity and foster innovative thinking.
205
+ </p>
206
+ </div>
207
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
208
+ <!-- Inspiration 1 -->
209
+ <div class="inspiration-item" style="background-image: url('https://images.unsplash.com/photo-1454165804606-3cfe5a5a570a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
210
+ <div class="inspiration-overlay">
211
+ <h3 class="font-bold text-lg">Minimalist Design</h3>
212
+ <p class="text-sm">Clean, distraction-free environment for focused creativity</p>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Inspiration 2 -->
217
+ <div class="inspiration-item" style="background-image: url('https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80')">
218
+ <div class="inspiration-overlay">
219
+ <h3 class="font-bold text-lg">Natural Elements</h3>
220
+ <p class="text-sm">Plants and natural light to boost mood and creativity</p>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Inspiration 3 -->
225
+ <div class="inspiration-item" style="background-image: url('https://images.unsplash.com/photo-1452421822248-d4c2b47f0c81?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80')">
226
+ <div class="inspiration-overlay">
227
+ <h3 class="font-bold text-lg">Inspiration Board</h3>
228
+ <p class="text-sm">Visual collection of ideas, colors, and concepts</p>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </section>
233
+
234
+ <!-- Collaboration Section -->
235
+ <section class="bg-white rounded-xl shadow-lg overflow-hidden">
236
+ <div class="flex flex-col md:flex-row">
237
+ <div class="md:w-1/2 p-10">
238
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Collaborative Synergy</h2>
239
+ <p class="text-gray-600 mb-6">
240
+ My workspace is designed to cultivate meaningful collaborations with colleagues and industry experts, creating a dynamic environment that drives forward-thinking advancements.
241
+ </p>
242
+ <ul class="space-y-4 mb-8">
243
+ <li class="flex items-start">
244
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
245
+ <i class="fas fa-users text-indigo-600"></i>
246
+ </div>
247
+ <div>
248
+ <h4 class="font-medium text-gray-800">Brainstorming Sessions</h4>
249
+ <p class="text-gray-600 text-sm">Interactive whiteboards for collective ideation</p>
250
+ </div>
251
+ </li>
252
+ <li class="flex items-start">
253
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
254
+ <i class="fas fa-share-alt text-indigo-600"></i>
255
+ </div>
256
+ <div>
257
+ <h4 class="font-medium text-gray-800">Seamless Sharing</h4>
258
+ <p class="text-gray-600 text-sm">Instant access to resources and files</p>
259
+ </div>
260
+ </li>
261
+ <li class="flex items-start">
262
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
263
+ <i class="fas fa-comment-dots text-indigo-600"></i>
264
+ </div>
265
+ <div>
266
+ <h4 class="font-medium text-gray-800">Real-time Feedback</h4>
267
+ <p class="text-gray-600 text-sm">Quick iterations with immediate input</p>
268
+ </div>
269
+ </li>
270
+ </ul>
271
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition shadow-md">
272
+ Connect With Me
273
+ </button>
274
+ </div>
275
+ <div class="md:w-1/2 bg-indigo-50 flex items-center justify-center p-10">
276
+ <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
277
+ alt="Collaboration"
278
+ class="rounded-lg shadow-md w-full h-auto">
279
+
280
  </html>
prompts.txt ADDED
File without changes