-
Notifications
You must be signed in to change notification settings - Fork 0
/
2.html
210 lines (188 loc) · 11.2 KB
/
2.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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="website icon" type="svg" href="assets/icon/logo.svg">
<title>Sava</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
<link rel="stylesheet" href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
<link rel="stylesheet" href="https://cdn.lineicons.com/3.0/lineicons.css">
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
:root{
--blue: #667EEA;
--pink: #ED64A6;
--dark: #2D3748;
--grey: #f1f5f9;
}
</style>
</head>
<body>
<!-- header -->
<header class="container mx-auto h-[700px] relative">
<!-- navbar -->
<nav class="w-full">
<div class="flex justify-between px-12 py-4 cursor-pointer">
<div class="flex items-center gap-2 text-[var(--blue)] font-bold text-2xl">
<img src="assets/icon/logo.svg" alt="logo" class="w-6 h-6 pt-1">
<span>Sava</span>
</div>
</div>
</nav>
<!-- hero -->
<section id="hero" class="h-full">
<div class="flex flex-col gap-2 h-full 1/2 lg:w-3/5 px-12 pt-28">
<h1 class="text-[var(--tertiary)] font-bold text-4xl">Identifikasi Melalui Gambar</h1>
<p class="text-slate-500 text-lg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate perspiciatis magni quasi nesciunt cumque vero amet laboriosam, impedit, explicabo iusto sit doloribus autem, totam odit architecto expedita dolorem. Eos, necessitatibus.
</p>
<div class="flex gap-4 mt-4 text-lg font-semibold">
<a href="#testing" class="px-8 py-2 rounded bg-[var(--pink)] hover:bg-pink-500 text-white">Mulai Tes</a>
<a href="#about" class="px-6 py-2 rounded bg-[var(--dark)] hover:bg-slate-800 text-white">Tentang Kami</a>
</div>
</div>
</section>
<!-- pattern -->
<img src="assets/img/pattern-2.png" alt="pattern" class="absolute top-0 right-0 w-96 lg:h-full">
</header>
<!-- content -->
<main class="">
<!-- testing -->
<section id="testing" class="bg-[var(--grey)] scroll-mt-28">
<div class="container mx-auto px-12 h-[500px]">
<div class="grid grid-cols-2">
<!-- preview -->
<div class="flex justify-center relative">
<div class="absolute -top-10 w-[350px] h-[450px] flex flex-col border border-[var(--blue)] rounded-lg overflow-hidden">
<img id="image" src="assets/img/preview-3.jpg" alt="fruit" class="w-full h-full object-cover">
<!-- result -->
<div id="describe" class="w-full h-1/5 bg-[var(--blue)] px-4 py-2 hidden">
<h1 class="text-lg text-white font-bold">Jambu Air</h1>
<p class="text-slate-200 text-sm">Didasarkan pada warna jambu yang merah kegelapan</p>
</div>
</div>
</div>
<!-- describe -->
<div class="flex flex-col gap-4 pt-20 pr-8">
<div>
<h1 class="text-3xl font-bold text-[var(--dark)]">Test Data</h1>
<div id="divider" class="w-32 h-px bg-[var(--blue)] mt-1"></div>
</div>
<p class="text-slate-500">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque dignissimos, earum quia maiores debitis amet autem. Sint asperiores aliquid obcaecati? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, magni.
</p>
<div class="flex gap-4">
<!-- download btn -->
<button id="download-btn" class=" px-8 py-2 bg-[var(--pink)] hover:bg-pink-500 active:bg-pink-600 rounded-full text-white">
<i class="fi fi-rr-folder-download mr-2 mt-2"></i>
<span>Download Gambar</span>
</button>
<label for="input" id="upload" class="flex gap-4 cursor-pointer">
<input type="file" name="upload" id="input" class="hidden" onchange="preview()">
<!-- upload btn -->
<div id="upload-btn" class="px-8 py-2 bg-[var(--dark)] hover:bg-[var(--blue)] active:bg-blue-500 rounded-full text-white">
<i class="fi fi-rr-upload mr-2 text-sm"></i>
<span>Upload Gambar</span>
</div>
<!-- drop input -->
<div id="droppable" class="hidden flex-none w-full h-40">
<div class="bg-[var(--dark)] rounded-xl grid place-items-center text-white p-8 h-full font-semibold text-lg">
<div class="flex flex-col gap-1 items-center">
<i class="fi fi-rr-upload mr-2 text-lg"></i>
<span class="text-xl">Upload File</span>
</div>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
</section>
<!-- training -->
<section id="training" class="bg-[var(--grey)] py-8">
<!-- describe -->
<div class="container mx-auto px-12 pt-8 pb-28 text-center relative">
<div>
<h1 class="text-3xl font-bold text-[var(--dark)]">Data Training</h1>
<div id="divider" class="mx-auto w-52 h-px bg-[var(--pink)] mt-2"></div>
</div>
<p class="text-slate-500 mt-4 px-20">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque dignissimos, earum quia maiores debitis amet autem. Sint asperiores aliquid obcaecati? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, magni. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
<!-- collage -->
<div class=" w-full grid grid-cols-3 gap-4 mt-8">
<div class="group text-center">
<div class="aspect-[4/3] shadow border rounded-xl overflow-hidden group-hover:-translate-y-2 transition-all">
<img src="assets/img/preview-4.jpeg" alt="fruit" class="w-full h-full object-cover">
<div class="absolute hidden transition-all top-0 w-full h-full bg-black/30 group-hover:grid place-items-center text-2xl">
<span class="font-semibold text-white flex items-center">Jambu Air</span>
</div>
</div>
<p class="text-lg font-bold text-[var(--blue)] mt-2">Jambu Air</p>
</div>
<div class="group text-center">
<div class="aspect-[4/3] shadow border rounded-xl overflow-hidden group-hover:-translate-y-2 transition-all">
<img src="assets/img/preview-5.jpg" alt="fruit" class="w-full h-full object-cover">
<div class="absolute hidden transition-all top-0 w-full h-full bg-black/30 group-hover:grid place-items-center text-2xl">
<span class="font-semibold text-white flex items-center">Jambu Biji</span>
</div>
</div>
<p class="text-lg font-bold text-[var(--blue)] mt-2">Jambu Biji</p>
</div>
<div class="group text-center">
<div class="aspect-[4/3] shadow border rounded-xl overflow-hidden group-hover:-translate-y-2 transition-all">
<img src="assets/img/preview-6.jpg" alt="fruit" class="w-full h-full object-cover">
<div class="absolute hidden transition-all top-0 w-full h-full bg-black/30 group-hover:grid place-items-center text-2xl">
<span class="font-semibold text-white flex items-center mt-2">Jambu Monyet</span>
</div>
</div>
<p class="text-lg font-bold text-[var(--blue)] mt-2">Jambu Monyet</p>
</div>
</div>
</div>
</section>
<!-- about -->
<section id="about" class="h-[480px] scroll-mt-16">
<div class="container mx-auto px-12 relative">
<div class="flex justify-end pt-12">
<!-- pict -->
<img id="output-img" src="assets/img/pattern-1.png" alt="fruit" class="absolute top-0 left-0 w-80 object-cover rotate-180">
<!-- describe -->
<div class="w-2/3 flex flex-col gap-4 pt-12 pr-12">
<div>
<h1 class="text-3xl font-bold text-[var(--dark)]">Tentang Kami</h1>
<div id="divider" class="w-52 h-px bg-[var(--pink)] mt-1"></div>
</div>
<p class="text-slate-500">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque dignissimos, earum quia maiores debitis amet autem. Sint asperiores aliquid obcaecati? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, magni.
</p>
<p class="text-slate-500">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque dignissimos, earum quia maiores debitis amet autem. Sint asperiores aliquid obcaecati? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, magni.
</p>
</div>
</div>
</div>
</section>
</main>
<!-- footer -->
<footer class="w-full bg-[var(--dark)]">
<div class="container mx-auto px-12 py-4 text-white text-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, omnis illum.</p>
</div>
</footer>
<script>
const preview = () => {
text = document.querySelector('#describe');
dButton = document.querySelector('#download-btn');
text.classList.remove('hidden');
dButton.classList.remove('hidden');
// text.classList.add('h-1/5');
upload = document.querySelector('#image');
upload.src = URL.createObjectURL(event.target.files[0]);
}
</script>
</body>
</html>