-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmix_match4.html
130 lines (122 loc) · 6.44 KB
/
mix_match4.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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<head>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.tailgrids.com/tailgrids-fallback.css" />
<Style>
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
font-family: 'Raleway', sans-serif;
}
:root, [data-theme] {
background-color: #ffffff !important ;
/* color: hsla(var(--bc)/var(--tw-text-opacity,1)); */
}
html[data-theme='light'] {
--background-color: #fff;
--text-color: #121416d8;
--link-color: #543fd7;
}
</Style>
</head>
<body class="bg-gradient-to-b from-blue-100 to white overflow-x-hidden" style="background-color: #ffffff !important;" id="body">
<header>
<nav class="fixed w-full relative">
<div class="container m-auto px-6 md:px-12 lg:px-6">
<div class="flex flex-wrap items-center justify-between py-6 gap-6 md:py-4 md:gap-0">
<div class="w-full flex justify-between lg:w-auto"><a href="index.html" aria-label="logo"><img src="logo.png" class="w-24" alt="mixeo logo" width="144" height="48"></a>
<button aria-label="hamburger" id="hamburger" class="w-10 h-10 mr-2 block md:hidden">
<div aria-hidden="true" id="line" class="inset-0 w-6 h-0.5 mt-2 m-auto rounded bg-gray-500 transtion duration-300"></div>
<div aria-hidden="true" id="line2" class="inset-0 w-6 h-0.5 mt-2 m-auto rounded bg-gray-500 transtion duration-300"></div>
</button></div>
<div id="menu" class="w-full md:flex md:items-center md:w-auto md:space-y-0 md:p-0 md:flex-nowrap hidden">
<div class="block w-full lg:items-center lg:flex ">
<ul class="space-y-6 pb-6 tracking-wide font-medium text-gray-600 lg:pb-0 lg:pr-6 lg:items-center lg:flex lg:space-y-0">
<li><a href="index.html" class="block md:px-3"><span>Home</span></a></li>
<li><a href="about.html" class="block md:px-3" id="link"><span>About Us</span></a></li>
<li><a href="how.html" class="block md:px-3"><span>How it works</span></a></li>
</ul>
<ul class="border-t space-y-2 pt-2 lg:space-y-0 lg:space-x-2 lg:pt-0 lg:pl-2 lg:border-t-0 lg:border-l lg:items-center lg:flex">
<li><a href="sign.html"><button type="button" title="Start buying" class="w-full py-3 px-6 rounded-full text-center transition focus:bg-sky-100 sm:w-max"><span class="block text-cyan-600 font-semibold"> Sign in </span></button></a></li>
<li><a href="DASHBOARD.html"><button type="button" title="Start buying" class="w-full py-3 px-6 rounded-full text-center transition bg-cyan-500 hover:bg-cyan-600 hover:border-cyan-900 hover:border-10 focus:bg-sky-600 sm:w-max"><span class="block text-white font-semibold"> Try it Now </span></button></a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="px-8 py-2 text-gray-800">
<div class="flex items-center mx-auto container justify-center md:justify-between py-2">
<div>
<span>Fetching Clothes from virtual wardrobe </span>
</div>
<div class=" bg-blue-100 ">
<button type="button" class="grid grid-cols-3 bg-green-400 w-40 h-11 rounded-lg text-white font-bold hover:bg-indigo-300 hover:cursor-not-allowed duration-[500ms,800ms]" disabled>
<div class="grid-1 my-auto h-5 w-5 mx-3 border-t-transparent border-solid "></div>
<div class="grid-2 my-auto -mx-1"> Success <div>
</button>
</div>
</div>
</div>
<div class="px-8 py-2 text-gray-800">
<div class="flex items-center mx-auto container justify-center md:justify-between py-2">
<div>
<span>Fetching Preferences from AI Test taken </span>
</div>
<div class=" bg-blue-100 ">
<button type="button" class="grid grid-cols-3 bg-green-400 w-40 h-11 rounded-lg text-white font-bold hover:bg-indigo-300 hover:cursor-not-allowed duration-[500ms,800ms]" disabled>
<div class="grid-1 my-auto h-5 w-5 mx-3 border-t-transparent border-solid "></div>
<div class="grid-2 my-auto -mx-1"> Success <div>
</button>
</div>
</div>
</div>
<div class="px-8 py-2 text-gray-800">
<div class="flex items-center mx-auto container justify-center md:justify-between py-2">
<div>
<span>Generating outfits </span>
</div>
<div class=" bg-blue-100 ">
<button type="button" class="grid grid-cols-3 bg-green-400 w-40 h-11 rounded-lg text-white font-bold hover:bg-indigo-300 hover:cursor-not-allowed duration-[500ms,800ms]" disabled>
<div class="grid-1 my-auto h-5 w-5 mx-3 border-t-transparent border-solid "></div>
<div class="grid-2 my-auto -mx-1"> Success <div>
</button>
</div>
</div>
</div>
</div>
<div class="relative max-w-md max-h-sm mx-auto min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-xl mt-16">
<div class="card">
<div class="grid card-header mx-auto mt-6 justify-items-center">
<img class="aspect-square w-2/3 object-cover rounded-lg" src="images/spacer.gif" id="myPicture" alt="some image">
<!-- <img
class="aspect-square w-2/3 object-cover rounded-lg"
src="https://i.pinimg.com/564x/93/a5/95/93a59573394503902efbd7689eea0f44.jpg"
alt="tailwind-card-image"
/> -->
</a>
</div>
<div class="card-body">
<a href="#">
<h4 class="font-semibold">Outfit Generated! </h4>
</a>
<p class="mb-2" id="regen">
</p><br>
<p class="mb-4" id="regen2">
</p>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/colored-shadow.js"></script>
<script src="script.js"></script>
<script src="plswork.js"></script>
</body>
</html>