Hugging Face's logo

Spaces:
Marv12
/
oooop
Running

App Files Community
Marv12 commited on
Commit
5b50254
·
verified ·
1 Parent(s): bb1337d

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +205 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Oooop
3
- emoji: 📚
4
- colorFrom: green
5
- colorTo: blue
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: oooop
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,205 @@
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>Dark Masonry Grid UI</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
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #000;
15
+ }
16
+
17
+ .masonry-grid {
18
+ column-count: 2;
19
+ column-gap: 16px;
20
+ padding: 16px;
21
+ }
22
+
23
+ .masonry-item {
24
+ break-inside: avoid;
25
+ margin-bottom: 16px;
26
+ border-radius: 16px;
27
+ overflow: hidden;
28
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
29
+ position: relative;
30
+ }
31
+
32
+ .card-image {
33
+ width: 100%;
34
+ height: auto;
35
+ display: block;
36
+ }
37
+
38
+ .card-title {
39
+ position: absolute;
40
+ bottom: 12px;
41
+ left: 12px;
42
+ color: white;
43
+ font-weight: 700;
44
+ font-size: 14px;
45
+ text-transform: uppercase;
46
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
47
+ }
48
+
49
+ .badge {
50
+ position: absolute;
51
+ top: 12px;
52
+ padding: 4px 8px;
53
+ border-radius: 9999px;
54
+ font-size: 10px;
55
+ font-weight: 600;
56
+ text-transform: uppercase;
57
+ }
58
+
59
+ .badge-left {
60
+ left: 12px;
61
+ }
62
+
63
+ .badge-right {
64
+ right: 12px;
65
+ }
66
+
67
+ .badge-purple {
68
+ background-color: rgba(124, 58, 237, 0.9);
69
+ color: white;
70
+ }
71
+
72
+ .badge-white {
73
+ background-color: rgba(255, 255, 255, 0.9);
74
+ color: black;
75
+ }
76
+
77
+ .button-container {
78
+ display: flex;
79
+ justify-content: space-between;
80
+ padding: 16px;
81
+ position: fixed;
82
+ bottom: 0;
83
+ left: 0;
84
+ right: 0;
85
+ background-color: rgba(0, 0, 0, 0.8);
86
+ }
87
+
88
+ .button-dark {
89
+ background-color: rgba(30, 30, 30, 0.9);
90
+ color: white;
91
+ border-radius: 8px;
92
+ padding: 12px 16px;
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 8px;
96
+ font-weight: 500;
97
+ }
98
+
99
+ .button-light {
100
+ background-color: rgba(255, 255, 255, 0.9);
101
+ color: black;
102
+ border-radius: 8px;
103
+ padding: 12px 16px;
104
+ display: flex;
105
+ align-items: center;
106
+ gap: 8px;
107
+ font-weight: 500;
108
+ }
109
+
110
+ /* Custom heights for masonry items to create staggered effect */
111
+ .item-1 { height: 220px; }
112
+ .item-2 { height: 180px; }
113
+ .item-3 { height: 240px; }
114
+ .item-4 { height: 200px; }
115
+ .item-5 { height: 260px; }
116
+ .item-6 { height: 190px; }
117
+ .item-7 { height: 230px; }
118
+ .item-8 { height: 210px; }
119
+ </style>
120
+ </head>
121
+ <body>
122
+ <div class="masonry-grid">
123
+ <!-- Card 1 -->
124
+ <div class="masonry-item item-1">
125
+ <img src="https://source.unsplash.com/random/300x400/?cyberpunk" alt="Cyberpunk" class="card-image">
126
+ <div class="badge badge-left badge-white">
127
+ <i class="fas fa-crown"></i> TOP CHOICE
128
+ </div>
129
+ <div class="card-title">CYBERPUNK</div>
130
+ </div>
131
+
132
+ <!-- Card 2 -->
133
+ <div class="masonry-item item-2">
134
+ <img src="https://source.unsplash.com/random/300x300/?glitch" alt="Glitch" class="card-image">
135
+ <div class="badge badge-right badge-purple">
136
+ MIXED
137
+ </div>
138
+ <div class="card-title">GLITCH</div>
139
+ </div>
140
+
141
+ <!-- Card 3 -->
142
+ <div class="masonry-item item-3">
143
+ <img src="https://source.unsplash.com/random/300x450/?neon" alt="Neon Dreams" class="card-image">
144
+ <div class="badge badge-right badge-white">
145
+ NEW
146
+ </div>
147
+ <div class="card-title">NEON DREAMS</div>
148
+ </div>
149
+
150
+ <!-- Card 4 -->
151
+ <div class="masonry-item item-4">
152
+ <img src="https://source.unsplash.com/random/300x350/?synthwave" alt="Synthwave" class="card-image">
153
+ <div class="badge badge-left badge-white">
154
+ COLLECTION
155
+ </div>
156
+ <div class="card-title">SYNTHWAVE</div>
157
+ </div>
158
+
159
+ <!-- Card 5 -->
160
+ <div class="masonry-item item-5">
161
+ <img src="https://source.unsplash.com/random/300x500/?hologram" alt="Hologram" class="card-image">
162
+ <div class="badge badge-right badge-white">
163
+ NEW
164
+ </div>
165
+ <div class="card-title">HOLOGRAM</div>
166
+ </div>
167
+
168
+ <!-- Card 6 -->
169
+ <div class="masonry-item item-6">
170
+ <img src="https://source.unsplash.com/random/300x320/?retro" alt="Retro" class="card-image">
171
+ <div class="badge badge-left badge-purple">
172
+ MIXED
173
+ </div>
174
+ <div class="card-title">RETRO FUTURE</div>
175
+ </div>
176
+
177
+ <!-- Card 7 -->
178
+ <div class="masonry-item item-7">
179
+ <img src="https://source.unsplash.com/random/300x470/?vaporwave" alt="Vaporwave" class="card-image">
180
+ <div class="badge badge-left badge-white">
181
+ TOP CHOICE
182
+ </div>
183
+ <div class="card-title">VAPORWAVE</div>
184
+ </div>
185
+
186
+ <!-- Card 8 -->
187
+ <div class="masonry-item item-8">
188
+ <img src="https://source.unsplash.com/random/300x380/?outrun" alt="Outrun" class="card-image">
189
+ <div class="badge badge-right badge-white">
190
+ COLLECTION
191
+ </div>
192
+ <div class="card-title">OUTRUN</div>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="button-container">
197
+ <button class="button-dark">
198
+ <i class="fas fa-camera"></i> Hide preview
199
+ </button>
200
+ <button class="button-light">
201
+ <i class="fas fa-sync-alt"></i> Refresh Preview
202
+ </button>
203
+ </div>
204
+ <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=Marv12/oooop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
205
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Got it — you’re absolutely right, the AI results didn’t reflect the full accuracy of the image. Let’s correct that fully and precisely with every visual and structural nuance from the screenshot. Here’s the refined and detailed prompt you should use: --- Prompt: Design a mobile UI screen featuring a dark-themed web app interface with a responsive, uneven masonry-style grid layout for content cards. The screen includes the following: Two-column layout with asymmetrical card heights and staggered vertical alignment — i.e., the cards do not form perfect rows, and each card aligns naturally to create a Pinterest-style flow. Cards have rounded corners (16px radius), slight drop shadows, and edge spacing with 16px padding from screen sides and between cards. Each card displays: A background image A label/badge in the top-left or top-right corner ("TOP CHOICE", "NEW", "MIXED", or "COLLECTION") inside translucent capsules or pill-shaped badges A title at the bottom-left, in all caps, white, bold, and truncated if too long Some badges are white with icons, some purple (e.g., MIXED), with slight transparency The “Cyberpunk” and “Glitch” cards are slightly misaligned with others due to text overflow outside the cards Cards like “NEON DREAMS” and “HOLOGRAM” clearly show the NEW badge on the top-right Below the card grid, add two dark buttons: Left: “Hide preview” with a camera icon inside a rounded dark container Right: “Refresh Preview” with a circular arrow icon inside a light container Theme: Black background, high contrast. Typography: Clear, minimal sans-serif font. Extra: Ensure the visual misalignments, overflow artifacts, and natural staggering of the cards are respected. --- This will now generate results that match the image accurately, including the unaligned elements, badge placements, and asymmetrical layout. Would you like me to run this for you to confirm it works before you use it again?