forked from Mitraz0/Myntra
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (153 loc) · 5.48 KB
/
index.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
<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="min-h-screen flex flex-col bg-background text-foreground">
<div class="flex justify-between items-center p-4 bg-card">
<button class="text-primary">
<img src="https://openui.fly.dev/openui/24x24.svg?text=⬅️" alt="Back Button" />
</button>
<div class="flex space-x-4">
<img src="https://openui.fly.dev/openui/24x24.svg?text=🔍" alt="Search Icon" />
<img src="https://openui.fly.dev/openui/24x24.svg?text=🔔" alt="Notifications Icon" />
<img src="https://openui.fly.dev/openui/24x24.svg?text=❤️" alt="Favorites Icon" />
<img src="https://openui.fly.dev/openui/24x24.svg?text=👤" alt="User Profile Icon" />
</div>
</div>
<div class="flex flex-col items-center flex-grow p-4">
<h1 class="text-xl font-bold mb-4">Fashion Arena</h1>
<div class="relative w-full max-w-sm">
<button class="absolute left-0 top-1/2 transform -translate-y-1/2 text-primary">
<img src="https://openui.fly.dev/openui/24x24.svg?text=⬅️" alt="Previous Designer" />
</button>
<div class="bg-card p-4 rounded-lg shadow-lg">
<img src="https://placehold.co/300x400" alt="Designer Outfit" class="w-full rounded-lg mb-4" />
<h2 class="text-lg font-semibold text-center">Shefali Gupta</h2>
<button class="w-full bg-primary text-primary-foreground py-2 mt-4 rounded-lg hover:bg-primary/80" onclick="window.location.href='buyORrent.html'">Shop or Rent now</button>
</div>
<button class="absolute right-0 top-1/2 transform -translate-y-1/2 text-primary">
<img src="https://openui.fly.dev/openui/24x24.svg?text=➡️" alt="Next Designer" />
</button>
</div>
</div>
<div class="flex justify-around items-center p-4 bg-card">
<button class="text-primary">
<img src="https://openui.fly.dev/openui/24x24.svg?text=🏠" alt="Home Icon" />
<span class="block text-xs">Home</span>
</button>
<button class="text-primary">
<img src="https://openui.fly.dev/openui/24x24.svg?text=📺" alt="Minis Icon" />
<span class="block text-xs">Minis</span>
</button>
<button class="text-primary">
<img src="https://openui.fly.dev/openui/24x24.svg?text=🏆" alt="Fashion Show Contest Icon" />
<span class="block text-xs">Contest</span>
</button>
<button class="text-primary">
<img src="https://openui.fly.dev/openui/24x24.svg?text=🔥" alt="Trends Icon" />
<span class="block text-xs">Trends</span>
</button>
<button class="text-primary relative">
<img src="https://openui.fly.dev/openui/24x24.svg?text=🛒" alt="Shopping Bag Icon" />
<span class="block text-xs">Bag</span>
<span class="absolute top-0 right-0 bg-destructive text-destructive-foreground rounded-full text-xs px-1">1</span>
</button>
</div>
</div>
</body>
</html>