-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdesignerPage.html
173 lines (166 loc) · 6.47 KB
/
designerPage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<script src="https://unpkg.com/unlazy@0.11.3/dist/unlazy.with-hashing.iife.js" defer init></script>
<script type="text/javascript">
window.tailwind.config = {
darkMode: ['class'],
theme: {
extend: {
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
}
}
</style>
</head>
<body>
<div class="bg-white text-black dark:bg-zinc-900 dark:text-white p-4">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center space-x-2">
<img src="https://placehold.co/40" alt="logo" class="w-10 h-10">
<span class="text-lg font-bold">fwd</span>
</div>
<div class="flex space-x-4">
<button class="text-xl transition-transform transform hover:scale-110">🔔</button>
<button class="text-xl transition-transform transform hover:scale-110">🔔</button>
<button class="text-xl transition-transform transform hover:scale-110">🔔</button>
</div>
</div>
<div class="bg-gradient-to-r from-pink-500 to-purple-500 text-white p-4 rounded-lg flex items-center space-x-4 mb-4 shadow-lg">
<div class="flex-shrink-0">
<img src="https://placehold.co/80" alt="Designer portrait" class="w-20 h-20 rounded-full shadow-md">
</div>
<div>
<h1 class="text-3xl font-bold">Shefali Gupta</h1>
</div>
</div>
<div class="mb-4">
<h2 class="text-2xl font-bold mb-2">This week</h2>
<hr class="border-t-2 border-black dark:border-white">
</div>
<div class="relative mb-4">
<div class="flex overflow-x-scroll space-x-4">
<div class="relative w-64 h-96 flex-shrink-0">
<img src="https://placehold.co/256x384" alt="Women paisley kurta" class="w-full h-full object-cover rounded-lg shadow-md">
<button class="absolute top-2 left-2 bg-white text-black p-2 rounded-full shadow-md transition-transform transform hover:scale-110">▶</button>
<button class="absolute bottom-2 right-2 bg-pink-500 text-white p-2 rounded-full shadow-md transition-transform transform hover:scale-110">💗</button>
</div>
<div class="relative w-64 h-96 flex-shrink-0">
<img src="https://placehold.co/256x384" alt="Women paisley kurta" class="w-full h-full object-cover rounded-lg shadow-md">
<button class="absolute top-2 left-2 bg-white text-black p-2 rounded-full shadow-md transition-transform transform hover:scale-110">▶</button>
<button class="absolute bottom-2 right-2 bg-pink-500 text-white p-2 rounded-full shadow-md transition-transform transform hover:scale-110">💗</button>
</div>
</div>
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 flex space-x-2">
<span class="w-2 h-2 bg-black dark:bg-white rounded-full"></span>
<span class="w-2 h-2 bg-zinc-400 dark:bg-zinc-600 rounded-full"></span>
<span class="w-2 h-2 bg-zinc-400 dark:bg-zinc-600 rounded-full"></span>
</div>
</div>
<div class="mb-4">
<h2 class="text-2xl font-bold mb-2">Explore More By Shefali</h2>
<div class="grid grid-cols-2 gap-4">
<div class="relative">
<img src="https://placehold.co/256x256" alt="Design 1" class="w-full h-full object-cover rounded-lg shadow-md">
</div>
<div class="relative">
<img src="https://placehold.co/256x256" alt="Design 2" class="w-full h-full object-cover rounded-lg shadow-md">
</div>
</div>
</div>
<div class="flex justify-around items-center py-4 border-t-2 border-zinc-200 dark:border-zinc-700">
<button class="text-xl transition-transform transform hover:scale-110">🔔</button>
<button class="text-xl transition-transform transform hover:scale-110">🔔</button>
<button class="text-xl transition-transform transform hover:scale-110">🏆</button>
<button class="text-xl transition-transform transform hover:scale-110">🔔</button>
<button class="text-xl relative transition-transform transform hover:scale-110">
🛒
<span class="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">1</span>
</button>
</div>
</div>
</body>
</html>