-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
282 lines (273 loc) 路 42.2 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
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
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vin</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="/animations.css" rel="stylesheet">
<!-- When the petite-vue is mounted, show the content. -->
<script>
console.log('loaded')
const mounted = () => {
console.log('mounted');
document.querySelector('#content').classList.remove('hidden')
}
</script>
</head>
<body v-scope v-effect="oninit()" class="dark:bg-gray-800" @vue:mounted="mounted">
<script type="module">
import 'virtual:windi.css'
import { createApp } from 'https://unpkg.com/petite-vue?module'
/**
* Create the vue app
* Set up variables that will be used
* Set up methods that can be used
*/
createApp({
vins: [],
loadingVin: true,
moreVin: false,
showColors: false,
chosenColor: 'red',
producerInput: '',
regionInput: '',
grapeInput: '',
descriptionInput: '',
uploadingWine: false,
loadingTime: 100,
image: '',
currentRating: 0,
//Find the windi color for the give vin color
findColor(color) {
switch (color) {
case 'rose':
return 'text-pink-400'
case 'white':
return 'text-amber-400'
case 'red':
return 'text-rose-800'
case 'orange':
return 'text-orange-500'
default:
break;
}
},
//Change the color for adding new vines
chooseColor(color) {
this.chosenColor = color
this.showColors = false
},
//Change the rating for adding new vines
currentRatingTo(rating) {
this.currentRating = rating
},
//Fetch add vin data
addWine() {
this.uploadingWine = true;
fetch(`/api/vin`, {
method: 'POST',
body: JSON.stringify({
producer: this.producerInput,
region: this.regionInput,
grape: this.grapeInput,
description: this.descriptionInput,
color: this.chosenColor,
rating: this.currentRating,
})
})
.then((res) => res.json())
.then((data) => {
console.log(data)
this.moreVin = false;
this.uploadingWine = false;
this.vins.push(data[0].fields)
this.chosenColor = 'red'
this.producerInput = ''
this.regionInput = ''
this.grapeInput = ''
this.descriptionInput = ''
this.currentRating = 0
})
},
cancelAddVin() {
this.moreVin = false;
this.chosenColor = 'red'
this.producerInput = ''
this.regionInput = ''
this.grapeInput = ''
this.descriptionInput = ''
this.currentRating = 0
},
//Fetch vin data
fetchData(){
const loader = setInterval(() => {
this.loadingTime = this.loadingTime - 1
}, 25)
fetch(`/api/vin`)
.then((res) => res.json())
.then((data) => {
console.log(data)
clearInterval(loader)
this.loadingVin = false
this.vins = data.map(vin => vin.fields)
})
},
//Check for user color preference
checkColorScheme() {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
const setting = localStorage.getItem('color-schema') || 'auto'
if (setting === 'dark' || (prefersDark && setting !== 'light'))
document.documentElement.classList.toggle('dark', true)
},
//Run this method first
oninit() {
this.checkColorScheme()
this.fetchData()
}
}).mount()
</script>
<div class="hidden" id="content">
<div
v-if="moreVin"
class="w-screen fixed h-screen z-40 bg-gray-800 bg-opacity-75 flex items-center justify-center"
:class="moreVin ? '' : 'hidden'"
>
<div class="bg-white dark:bg-gray-600 rounded-xl w-full lg:w-96 mx-4 p-2 space-y-2 overflow-hidden">
<div class="relative py-4">
<div class="bg-white dark:bg-gray-600" @click="showColors = !showColors">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" class="w-10 h-10 flex-shrink-0" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 64 64"><path :class="findColor(chosenColor)" d="M15.1 22.1C16 30.1 23.3 37 32 37c9.4 0 17.1-8 17.1-16.7v-.2c-9.8-1.3-22.1 5.8-34 2" fill="currentColor"/><path class="text-gray-500" d="M54 20.4C54 9 48.3 2 48.3 2H15.7S10 9.1 10 20.4c0 10.8 9.3 20.9 20.9 21.5c-.1 6.3-.7 12.8-2.2 15.1c-2.2 3.2-9.8 1.6-9.8 5h26.2c0-3.4-7.6-1.8-9.8-5c-1.5-2.3-2.1-8.8-2.2-15.1C44.7 41.3 54 31.3 54 20.4M32 39.3c-9.8 0-17.9-7.8-18.9-16.7c-.1-.6-.1-1.3-.1-1.9c0-9.9 4.9-15.9 4.9-15.9h28.2s4.8 6 4.9 15.7v.2c0 9.6-8.5 18.6-19 18.6" fill="currentColor"/></svg>
</div>
<div
class="flex absolute space-x-5 top-0 transform transition-transform duration-150 py-4"
:class="showColors ? 'translate-x-16' : '-translate-x-64'"
>
<svg @click="chooseColor('white')" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" class="w-10 h-10 flex-shrink-0" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 64 64"><path class="text-amber-200" d="M15.1 22.1C16 30.1 23.3 37 32 37c9.4 0 17.1-8 17.1-16.7v-.2c-9.8-1.3-22.1 5.8-34 2" fill="currentColor"/><path class="text-gray-500" d="M54 20.4C54 9 48.3 2 48.3 2H15.7S10 9.1 10 20.4c0 10.8 9.3 20.9 20.9 21.5c-.1 6.3-.7 12.8-2.2 15.1c-2.2 3.2-9.8 1.6-9.8 5h26.2c0-3.4-7.6-1.8-9.8-5c-1.5-2.3-2.1-8.8-2.2-15.1C44.7 41.3 54 31.3 54 20.4M32 39.3c-9.8 0-17.9-7.8-18.9-16.7c-.1-.6-.1-1.3-.1-1.9c0-9.9 4.9-15.9 4.9-15.9h28.2s4.8 6 4.9 15.7v.2c0 9.6-8.5 18.6-19 18.6" fill="currentColor"/></svg>
<svg @click="chooseColor('orange')" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" class="w-10 h-10 flex-shrink-0" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 64 64"><path class="text-orange-500" d="M15.1 22.1C16 30.1 23.3 37 32 37c9.4 0 17.1-8 17.1-16.7v-.2c-9.8-1.3-22.1 5.8-34 2" fill="currentColor"/><path class="text-gray-500" d="M54 20.4C54 9 48.3 2 48.3 2H15.7S10 9.1 10 20.4c0 10.8 9.3 20.9 20.9 21.5c-.1 6.3-.7 12.8-2.2 15.1c-2.2 3.2-9.8 1.6-9.8 5h26.2c0-3.4-7.6-1.8-9.8-5c-1.5-2.3-2.1-8.8-2.2-15.1C44.7 41.3 54 31.3 54 20.4M32 39.3c-9.8 0-17.9-7.8-18.9-16.7c-.1-.6-.1-1.3-.1-1.9c0-9.9 4.9-15.9 4.9-15.9h28.2s4.8 6 4.9 15.7v.2c0 9.6-8.5 18.6-19 18.6" fill="currentColor"/></svg>
<svg @click="chooseColor('rose')" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" class="w-10 h-10 flex-shrink-0" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 64 64"><path class="text-pink-400" d="M15.1 22.1C16 30.1 23.3 37 32 37c9.4 0 17.1-8 17.1-16.7v-.2c-9.8-1.3-22.1 5.8-34 2" fill="currentColor"/><path class="text-gray-500" d="M54 20.4C54 9 48.3 2 48.3 2H15.7S10 9.1 10 20.4c0 10.8 9.3 20.9 20.9 21.5c-.1 6.3-.7 12.8-2.2 15.1c-2.2 3.2-9.8 1.6-9.8 5h26.2c0-3.4-7.6-1.8-9.8-5c-1.5-2.3-2.1-8.8-2.2-15.1C44.7 41.3 54 31.3 54 20.4M32 39.3c-9.8 0-17.9-7.8-18.9-16.7c-.1-.6-.1-1.3-.1-1.9c0-9.9 4.9-15.9 4.9-15.9h28.2s4.8 6 4.9 15.7v.2c0 9.6-8.5 18.6-19 18.6" fill="currentColor"/></svg>
<svg @click="chooseColor('red')" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" class="w-10 h-10 flex-shrink-0" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 64 64"><path class="text-rose-800" d="M15.1 22.1C16 30.1 23.3 37 32 37c9.4 0 17.1-8 17.1-16.7v-.2c-9.8-1.3-22.1 5.8-34 2" fill="currentColor"/><path class="text-gray-500" d="M54 20.4C54 9 48.3 2 48.3 2H15.7S10 9.1 10 20.4c0 10.8 9.3 20.9 20.9 21.5c-.1 6.3-.7 12.8-2.2 15.1c-2.2 3.2-9.8 1.6-9.8 5h26.2c0-3.4-7.6-1.8-9.8-5c-1.5-2.3-2.1-8.8-2.2-15.1C44.7 41.3 54 31.3 54 20.4M32 39.3c-9.8 0-17.9-7.8-18.9-16.7c-.1-.6-.1-1.3-.1-1.9c0-9.9 4.9-15.9 4.9-15.9h28.2s4.8 6 4.9 15.7v.2c0 9.6-8.5 18.6-19 18.6" fill="currentColor"/></svg>
</div>
</div>
<div class="flex space-x-2 items-center text-rose-800 dark:text-white">
<svg @click="currentRatingTo(1)" xmlns="http://www.w3.org/2000/svg" :class="currentRating >= 1 ? 'h-4 w-4 text-yellow-500' : 'h-4 w-4'" :fill="currentRating >= 1 ? 'currentColor' : 'none'" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
<svg @click="currentRatingTo(2)" xmlns="http://www.w3.org/2000/svg" :class="currentRating >= 2 ? 'h-4 w-4 text-yellow-500' : 'h-4 w-4'" :fill="currentRating >= 2 ? 'currentColor' : 'none'" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
<svg @click="currentRatingTo(3)" xmlns="http://www.w3.org/2000/svg" :class="currentRating >= 3 ? 'h-4 w-4 text-yellow-500' : 'h-4 w-4'" :fill="currentRating >= 3 ? 'currentColor' : 'none'" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
<svg @click="currentRatingTo(4)" xmlns="http://www.w3.org/2000/svg" :class="currentRating >= 4 ? 'h-4 w-4 text-yellow-500' : 'h-4 w-4'" :fill="currentRating >= 4 ? 'currentColor' : 'none'" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
<svg @click="currentRatingTo(5)" xmlns="http://www.w3.org/2000/svg" :class="currentRating >= 5 ? 'h-4 w-4 text-yellow-500' : 'h-4 w-4'" :fill="currentRating >= 5 ? 'currentColor' : 'none'" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</div>
<div class="flex space-x-2 items-baseline">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" class="w-5 h-5 flex-shrink-0" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 128 128"><path d="M51.47 37.93C25.35 37.24-5.38 8.76 5.01 39.2c5.98 17.5 26.2 26.03 46.46 25.77c20.26.26 40.48-8.26 46.46-25.77c10.39-30.44-20.34-1.96-46.46-1.27z" fill="#e59600"/><path d="M86.54 80.78c-1.04-1.98-.2-3.94 3.07-7.26c4.06-4.11 9.41-14.79 4.1-25.56c0 0-.84-1.62-.83-1.66l-.75.83c-.15-.3-.31-.61-.49-.91c-1.15-.16-78.99-.16-80.14 0c-.32.56-.6 1.12-.86 1.68l-.99-.08c-4.9 11.84-.45 21.23 3.87 25.69c2.72 2.81 4.18 5.01 3.06 7.31c-.56 1.15-1.43 1.82-2.67 2.07l-2.15.42l1.17 1.81c.42.66 1 1.21 1.67 1.6c1.87 1.09 4.13 1.36 5.71 1.4c.18 0 .44.2.83.62c5.08 5.53 9.08 7.29 21.42 7.74l17.85.01C72.89 96.05 76.9 94.3 82 88.75c.39-.43.65-.62.83-.62c1.58-.04 3.85-.31 5.71-1.4c.67-.39 1.24-.94 1.67-1.6l1.17-1.81l-2.15-.42c-1.19-.25-2.07-.94-2.69-2.12z" fill="#543930"/><radialGradient id="IconifyId-17a988a41f0-f7d2a-298" cx="108.89" cy="44.966" r="22.987" gradientTransform="matrix(.9656 -.2599 .1277 .4743 -38.69 89.913)" gradientUnits="userSpaceOnUse"><stop offset=".728" stop-color="#6d4c41" stop-opacity="0"/><stop offset="1" stop-color="#6d4c41"/></radialGradient><path d="M52.3 96.39l-.05-9.33l28.21-2.37l2.02 3.53s-3.98 4.76-8.43 6.25c-3.31 1.11-6.93 1.84-13.86 2.02l-7.89-.1z" fill="url(#IconifyId-17a988a41f0-f7d2a-298)"/><radialGradient id="IconifyId-17a988a41f0-f7d2a-299" cx="109.017" cy="44.881" r="22.842" gradientTransform="matrix(-.9656 -.2599 -.1277 .4743 141.87 90.071)" gradientUnits="userSpaceOnUse"><stop offset=".728" stop-color="#6d4c41" stop-opacity="0"/><stop offset="1" stop-color="#6d4c41"/></radialGradient><path d="M50.64 96.39l.05-9.27l-28.03-2.36l-2.01 3.51s3.95 4.73 8.38 6.21c3.29 1.1 6.89 1.83 13.77 2.01l7.84-.1z" fill="url(#IconifyId-17a988a41f0-f7d2a-299)"/><path d="M51.72 90.68H42.8v10.68c0 4.83 3.63 8.74 8.11 8.74h1.62c4.48 0 8.11-3.92 8.11-8.74V90.68h-8.92z" fill="#e59600"/><radialGradient id="IconifyId-17a988a41f0-f7d2a-300" cx="106.37" cy="61.688" r="26.407" gradientTransform="matrix(-.0746 -.9972 .8311 -.0622 31.463 176.223)" gradientUnits="userSpaceOnUse"><stop offset=".725" stop-color="#6d4c41" stop-opacity="0"/><stop offset="1" stop-color="#6d4c41"/></radialGradient><path d="M91.03 71.78c-1.61 2.15-4.27 4.58-4.57 6.47c2.98-16.16-10.03-14.24-12.72-21.62c-.54-1.49-1.04-3.02-1.1-4.61c-.05-1.19 7.31-12.45 8-13.46c.84-1.24 12.93 8.95 12.93 8.95c-.01.02 6.81 11.78-2.54 24.27z" fill="url(#IconifyId-17a988a41f0-f7d2a-300)"/><radialGradient id="IconifyId-17a988a41f0-f7d2a-301" cx="90.954" cy="49.198" r="9.161" gradientTransform="matrix(-.9437 .3361 -.2455 -.7109 188.116 83.09)" gradientUnits="userSpaceOnUse"><stop offset=".663" stop-color="#6d4c41"/><stop offset="1" stop-color="#6d4c41" stop-opacity="0"/></radialGradient><path d="M80.18 84.32c-7.11-10.35 10.67-12.33 10.67-12.33c-2.33 2.28-5.43 6.1-4.36 8.54c1.27 2.88 4.94 2.65 4.94 2.65S85 89.06 80.18 84.32z" fill="url(#IconifyId-17a988a41f0-f7d2a-301)"/><path d="M78.31 51.78H24.63c-5.79 0-10.52 5.04-10.52 11.21S18.84 74.2 24.63 74.2H78.32c5.79 0 10.52-5.04 10.52-11.21S84.1 51.78 78.31 51.78z" fill="#e59600"/><path d="M51.47 13.11c-17.1 0-32.93 18.28-32.93 44.59c0 26.17 16.31 39.1 32.93 39.1S84.4 83.87 84.4 57.7c0-26.31-15.83-44.59-32.93-44.59z" fill="#ffca28"/><g fill="#404040"><ellipse cx="36.17" cy="60.01" rx="4.84" ry="5.01"/><ellipse cx="66.77" cy="60.01" rx="4.84" ry="5.01"/></g><path d="M59.85 77.04c-3.13 1.86-13.39 1.86-16.52 0c-1.8-1.07-3.63.57-2.89 2.2c.73 1.61 6.33 5.33 11.17 5.33s10.36-3.72 11.1-5.33c.75-1.64-1.06-3.27-2.86-2.2z" fill="#795548"/><g fill="#6d4c41"><path d="M43.36 51.13c-.91-1.21-3.02-2.96-7.1-2.96s-6.19 1.75-7.1 2.96c-.4.53-.3 1.15-.02 1.52c.26.35 1.02.67 1.87.38s2.49-1.14 5.26-1.16c2.76.02 4.41.87 5.26 1.16c.85.29 1.61-.03 1.87-.38c.26-.37.36-.99-.04-1.52z"/><path d="M73.79 51.13c-.91-1.21-3.02-2.96-7.1-2.96s-6.19 1.75-7.1 2.96c-.4.53-.3 1.15-.02 1.52c.26.35 1.02.67 1.87.38s2.49-1.14 5.26-1.16c2.76.02 4.41.87 5.26 1.16s1.61-.03 1.87-.38c.26-.37.36-.99-.04-1.52z"/></g><path d="M55.26 69.09c-.1-.04-.21-.07-.32-.08H48c-.11.01-.21.04-.32.08c-.63.26-.98.91-.68 1.6c.3.69 1.68 2.64 4.47 2.64s4.17-1.95 4.47-2.64c.3-.69-.05-1.34-.68-1.6z" fill="#e59600"/><g><radialGradient id="IconifyId-17a988a41f0-f7d2a-302" cx="106.533" cy="61.498" r="26.233" gradientTransform="matrix(.0746 -.9972 -.8311 -.0622 71.472 176.564)" gradientUnits="userSpaceOnUse"><stop offset=".725" stop-color="#6d4c41" stop-opacity="0"/><stop offset="1" stop-color="#6d4c41"/></radialGradient><path d="M12.16 71.94c1.61 2.13 4.25 4.55 4.54 6.43c-2.96-16.05 9.97-14.15 12.64-21.48c.54-1.48 1.03-3 1.1-4.58c.05-1.18-7.27-12.37-7.94-13.37c-.83-1.23-12.85 8.9-12.85 8.9s-6.25 12.54 2.51 24.1z" fill="url(#IconifyId-17a988a41f0-f7d2a-302)"/><radialGradient id="IconifyId-17a988a41f0-f7d2a-303" cx="91.193" cy="49.087" r="9.103" gradientTransform="matrix(.9437 .3361 .2455 -.7109 -85.133 83.043)" gradientUnits="userSpaceOnUse"><stop offset=".663" stop-color="#6d4c41"/><stop offset="1" stop-color="#6d4c41" stop-opacity="0"/></radialGradient><path d="M22.94 84.4c7.06-10.28-10.6-12.25-10.6-12.25c2.32 2.27 5.4 6.07 4.33 8.48c-1.26 2.86-4.91 2.63-4.91 2.63s6.39 5.85 11.18 1.14z" fill="url(#IconifyId-17a988a41f0-f7d2a-303)"/></g><path d="M90.86 28.86c-.16-.24-.34-.5-.53-.75c-.35.06-.74.13-1.12.19c-.38-.72-.72-1.29-.97-1.66c-.06-.08-4.83.82-11.92 1.74H24.58c-6.01-.81-10.02-1.61-10.34-1.74c-.2.6-.35 1.18-.46 1.74h-1.02c-1.42 4.01-.57 4.92.03 6.61c-2.48 2.1-5.84 6.67-3.45 12.38c2.41 5.78 8.03 6.38 8.03 6.38c-.61 10.55 2.72 15.67 2.72 15.67s4.13-18.12 3.75-20.89c0 0 7.62-1.51 16.27-6.46c5.85-3.35 9.84-7.27 16.41-8.75c10-2.25 12.23 4.99 12.23 4.99S78 36.53 80.8 49.38c1.15 5.29 1.64 14.12 2.27 19.49c-.05-.47 3.44-6.28 4.05-12.18c.17-1.64 2.07-5.04 3.43-8.32c.57 1.07 1.22 2.36 1.41 3.01c0 0 1.1-4.46 1.18-4.77c2.2-8.78-.55-15.13-2.28-17.75z" fill="#543930"/><g><radialGradient id="IconifyId-17a988a41f0-f7d2a-304" cx="26.72" cy="83.07" r="16.886" gradientTransform="matrix(.9907 .1371 .1915 -1.4003 -15.657 157.665)" gradientUnits="userSpaceOnUse"><stop offset=".598" stop-color="#6d4c41" stop-opacity="0"/><stop offset="1" stop-color="#6d4c41"/></radialGradient><path d="M12.56 35.13C10.19 37.25 7 41.97 9.35 47.81c1.77 4.41 8.09 6.33 8.09 6.33c0 .02 1.26.4 1.91.4l1.48-22.02c-3.03 0-5.94.91-7.82 2.23c.02.03-.46.35-.45.38z" fill="url(#IconifyId-17a988a41f0-f7d2a-304)"/><radialGradient id="IconifyId-17a988a41f0-f7d2a-305" cx="76.736" cy="80.423" r="24.991" gradientTransform="matrix(.3076 .9515 .706 -.2282 -3.648 -7.087)" gradientUnits="userSpaceOnUse"><stop offset=".699" stop-color="#6d4c41" stop-opacity="0"/><stop offset="1" stop-color="#6d4c41"/></radialGradient><path d="M86.75 57.5c.16-1.55 4.34-3.6 6.14-10.26c.19-.71.35-1.43.5-2.15c1.46-8.09-1.16-15.52-2.79-17.98c-2.26-3.41-11.76 3.37-10.14 6.08c5.06 8.47 4.9 16.19 6.29 24.31z" fill="url(#IconifyId-17a988a41f0-f7d2a-305)"/></g><g><linearGradient id="IconifyId-17a988a41f0-f7d2a-306" gradientUnits="userSpaceOnUse" x1="51.72" y1="4" x2="51.72" y2="29.982" gradientTransform="matrix(1 0 0 -1 0 128)"><stop offset="0" stop-color="#709e3b"/><stop offset=".328" stop-color="#73a13e"/><stop offset=".595" stop-color="#7dab47"/><stop offset=".839" stop-color="#8dbc57"/><stop offset="1" stop-color="#9ccc65"/></linearGradient><path d="M95.73 120.81c0-17.79-25.56-21.89-34.66-22.78l-7.67 10.54h-3.33l-7.55-10.56c-9.85.93-18.23 3.27-24.28 6.78c-6.98 4.05-10.51 9.44-10.51 16.01v3.2h88.02v-3.19z" fill="url(#IconifyId-17a988a41f0-f7d2a-306)"/><linearGradient id="IconifyId-17a988a41f0-f7d2a-307" gradientUnits="userSpaceOnUse" x1="51.791" y1="3.482" x2="51.791" y2="28.074" gradientTransform="matrix(1 0 0 -1 0 128)"><stop offset="0" stop-color="#1e88e5"/><stop offset="1" stop-color="#1565c0"/></linearGradient><path fill="url(#IconifyId-17a988a41f0-f7d2a-307)" d="M83.64 120.08l-7.17-5.52l.25-.39l-25.99.49l-23.87-.49l.25.39l-7.17 5.52l-.17 3.92h64.04z"/><linearGradient id="IconifyId-17a988a41f0-f7d2a-308" gradientUnits="userSpaceOnUse" x1="28.334" y1="4.008" x2="28.334" y2="27.385" gradientTransform="matrix(1 0 0 -1 0 128)"><stop offset="0" stop-color="#1e88e5"/><stop offset="1" stop-color="#1565c0"/></linearGradient><path d="M33.78 107.13l-.11-7.82s-5.79 1.2-7.87 2.1l-2.92 6.6l3.78 5.86l7.12-6.74z" fill="url(#IconifyId-17a988a41f0-f7d2a-308)"/><linearGradient id="IconifyId-17a988a41f0-f7d2a-309" gradientUnits="userSpaceOnUse" x1="65.915" y1="4.008" x2="65.915" y2="27.385" gradientTransform="rotate(180 70.581 64)"><stop offset="0" stop-color="#1e88e5"/><stop offset="1" stop-color="#1565c0"/></linearGradient><path d="M69.8 107.13l.11-7.82s5.79 1.2 7.87 2.1l2.92 6.6l-3.79 5.86l-7.11-6.74z" fill="url(#IconifyId-17a988a41f0-f7d2a-309)"/><path d="M72.97 115.61l5.17.98a2.56 2.56 0 0 0 2.98-2.03a2.56 2.56 0 0 0-2.03-2.98l-5.17-.98a2.56 2.56 0 0 0-2.98 2.03c-.26 1.39.64 2.72 2.03 2.98z" fill="#bdbdbd"/><g><path d="M30.61 115.61l-5.17.98c-1.38.26-2.72-.65-2.98-2.03a2.56 2.56 0 0 1 2.03-2.98l5.17-.98a2.56 2.56 0 0 1 2.98 2.03c.26 1.39-.64 2.72-2.03 2.98z" fill="#bdbdbd"/></g><linearGradient id="IconifyId-17a988a41f0-f7d2a-310" gradientUnits="userSpaceOnUse" x1="43.175" y1="27.731" x2="43.175" y2="12.954" gradientTransform="matrix(1 0 0 -1 0 128)"><stop offset="0" stop-color="#aed581"/><stop offset="1" stop-color="#8bc34a"/></linearGradient><path d="M42.38 98.03c-2.61.25-5.11.61-7.5 1.05l-.25 20.95l17.09-11.53l-9.34-10.47z" fill="url(#IconifyId-17a988a41f0-f7d2a-310)"/><linearGradient id="IconifyId-17a988a41f0-f7d2a-311" gradientUnits="userSpaceOnUse" x1="60.265" y1="29.912" x2="60.265" y2="12.478" gradientTransform="matrix(1 0 0 -1 0 128)"><stop offset="0" stop-color="#aed581"/><stop offset="1" stop-color="#8bc34a"/></linearGradient><path d="M68.56 99.11c-2.96-.56-5.59-.89-7.49-1.08l-9.34 10.48l17.09 11.53l-.26-20.93z" fill="url(#IconifyId-17a988a41f0-f7d2a-311)"/></g><g><linearGradient id="IconifyId-17a988a41f0-f7d2a-312" gradientUnits="userSpaceOnUse" x1="51.471" y1="120.426" x2="51.471" y2="96.641" gradientTransform="matrix(1 0 0 -1 0 128)"><stop offset=".003" stop-color="#fff59d"/><stop offset=".553" stop-color="#fee565"/><stop offset=".996" stop-color="#fdd835"/></linearGradient><path d="M77.49 29.04C72.67 17.05 67.93 7.59 61.86 6.86c-1.62-.19-5.86-.73-10.15-.74c-4.45 0-8.95.54-10.62.74c-6.07.73-10.81 10.19-15.64 22.17c-2.62 6.5 54.66 6.5 52.04.01z" fill="url(#IconifyId-17a988a41f0-f7d2a-312)"/><linearGradient id="IconifyId-17a988a41f0-f7d2a-313" gradientUnits="userSpaceOnUse" x1="51.47" y1="101.453" x2="51.47" y2="72.425" gradientTransform="matrix(1 0 0 -1 0 128)"><stop offset=".003" stop-color="#fff59d"/><stop offset=".553" stop-color="#fee565"/><stop offset=".996" stop-color="#fdd835"/></linearGradient><path d="M91.57 24.72c-9.43 1.71-25.18 3.7-39.53 3.76H50.9c-14.35-.06-30.1-2.05-39.53-3.76c-8.14-1.48-8.43 3.84-8.43 3.84s2.58-3.19 7.11 1.23c7.03 6.86 18.48 17.75 40.77 17.84c.22 0 .43-.01.65-.01c.22 0 .43.01.65.01c22.3-.1 33.74-10.98 40.77-17.84c4.53-4.42 7.11-1.23 7.11-1.23s-.29-5.32-8.43-3.84z" fill="url(#IconifyId-17a988a41f0-f7d2a-313)"/><g><path d="M51.47 20.37c-15.18 0-25.05 6.55-25.05 6.55s14.37 1.47 25.05 1.47s25.05-1.47 25.05-1.47s-9.87-6.55-25.05-6.55z" fill="#78909c"/></g></g><g><path fill="none" stroke="#d18100" stroke-width="5" stroke-miterlimit="10" d="M107.48 109.01V124"/><path d="M108.64 116.76h-2.32c-1.39 0-2.51 0-2.51-2.51v-12.01h7.33v12.01c.01 2.13-1.12 2.51-2.5 2.51z" fill="#636363"/><path d="M116.73 99.5c-1.84 0-7.74.06-9.07.06c-2.12 0-7.74-.19-10.03-.19c-7.48 0-7.54-26.69-7.54-26.69v24.71c0 6.69 3.42 8.83 9.42 9.05h15.38c5.42 0 7.35-3.71 7.35-8.15l-.38-4.86c-.02.01-1.47 6.07-5.13 6.07z" fill="#616161"/><linearGradient id="IconifyId-17a988a41f0-f7d2a-314" gradientUnits="userSpaceOnUse" x1="106.778" y1="19.532" x2="106.778" y2="78.202" gradientTransform="matrix(1 0 0 -1 0 128)"><stop offset="0" stop-color="#757575"/><stop offset=".482" stop-color="#9e9e9e"/></linearGradient><path d="M123.37 38.4c-.11-.42-.73-.41-.83.01l-1.15 4.68l-2 52.18s-.01.27-.01.41c0 1.54-1.19 2.64-2.73 2.64s-2.81-1.12-2.81-2.66c0-.22.6-52.38.6-52.38l-1.19-5.13c-.11-.42-.72-.42-.83-.01l-1.35 5.05l-.62 52.15c0 1.7-1.03 2.99-2.73 2.99s-3.08-1.38-3.08-3.08l-.3-52.17l-1.18-4.94c-.11-.41-.71-.41-.83 0l-1.5 5.15l.03 51.86c0 1.76-1.22 3.19-2.98 3.19c-1.96 0-3.4-1.43-3.4-3.19l-2.04-52.06l-1.34-4.97c-.11-.42-.6-.34-.72.07l-1.37 5l1.6 53.63c0 4.52 2.88 7.94 8.88 8.17h15.38c5.42 0 7.5-3.73 7.5-8.17l2.16-53.4l-1.16-5.02z" fill="url(#IconifyId-17a988a41f0-f7d2a-314)"/></g></svg>
<input :value="producerInput" @change="producerInput = event.target.value" class="apperance-none text-xl font-bold focus:outline-none dark:bg-gray-600 dark:text-white dark:placeholder-white" placeholder="Producteur" />
</div>
<div class="flex space-x-2 items-baseline">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" class="w-5 h-5 flex-shrink-0" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><circle fill="#88C9F9" cx="18" cy="18" r="18"/><path fill="#5C913B" d="M25.716 1.756c-1.022.568-1.872 1.528-3.028 1.181c-1.875-.562-4.375-1.812-6-.25s-2 3 0 2.938s3.375-2.438 4.375-1.438s.749 1.813-1.625 2.125S14.5 7 13.125 7s-1.688.812-.75 1.688s-.563.937-2.125 1.812s.375 1.25 1.688 2s2.312-.188 2.875-1.438s2.981-2.75 3.99-2.562c1.01.188 1.01.688.822 1.562s.75.625.812-.375s1.188-1.75 2.062-1.812s1.625 1.188.625 1.812s-2 1.125-.75 1.438s2.125 1.938.688 2.625s-3.937 1.125-5.062.562s-3.688-1.375-4.375-.938s-1.062.89-1.875 1.195c-.812.305-4.125 1.805-4.188 3.743S7.438 22.438 8.75 22.5s4.5-.812 5.5-1.625s2.375-.625 2.812.312s.125 1.5-.312 3s.286 2.25.987 3.562c.701 1.312 1.263 2.062 1.263 3s1 1.875 2.5.312s2.875-4.625 3.5-5.75s1.125-3.625 1.875-4.125s1.938-1.688 1.062-1.5s-2.625-.062-3.062-1.312s-2.312-3.625-1.438-3.875s1.875 1.39 2.25 2.164c.375.774.875 1.711 1.625 1.961s2.375-1.673 2.875-1.961c.5-.289.125-1.476-.875-1.351s-2.312 0-2.312-.624s1.25-1.438 2.25-1.25s1.75.5 2.375 1.25s1.875 2.125 2.375 3s.875 1 1.125-.562c.166-1.038.387-1.609.59-2.222c-1.013-5.829-4.82-10.683-9.999-13.148z"/></svg>
<input :value="regionInput" @change="regionInput = event.target.value" class="apperance-none text-lg font-bold focus:outline-none dark:bg-gray-600 dark:text-white dark:placeholder-white" placeholder="R茅gion" />
</div>
<div class="flex space-x-2 items-baseline">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" class="w-5 h-5 flex-shrink-0" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path fill="#77B255" d="M9.999 12a.99.99 0 0 1-.446-.106c-4.38-2.19-7.484-7.526-8.501-10.578A.999.999 0 1 1 2.949.683c.877 2.632 3.688 7.517 7.499 9.422A1 1 0 0 1 9.999 12z"/><circle fill="#553788" cx="19" cy="29" r="7"/><circle fill="#9266CC" cx="10" cy="15" r="7"/><circle fill="#AA8DD8" cx="19" cy="12" r="7"/><circle fill="#744EAA" cx="27" cy="18" r="7"/><circle fill="#744EAA" cx="9" cy="26" r="7"/><circle fill="#9266CC" cx="18" cy="21" r="7"/><circle fill="#9266CC" cx="29" cy="29" r="7"/></svg>
<input :value="grapeInput" @change="grapeInput = event.target.value" class="apperance-none text-lg font-bold focus:outline-none dark:bg-gray-600 dark:text-white dark:placeholder-white" placeholder="Vari茅t茅 de raisin" />
</div>
<div class="flex space-x-2 items-baseline">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" class="w-5 h-5 flex-shrink-0" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path fill="#3E721D" d="M35 26a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4V6.313C1 4.104 6.791 0 9 0h20.625C32.719 0 35 2.312 35 5.375V26z"/><path fill="#CCD6DD" d="M33 30a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V6c0-4.119-.021-4 5-4h21a4 4 0 0 1 4 4v24z"/><path fill="#E1E8ED" d="M31 31a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h24a3 3 0 0 1 3 3v24z"/><path fill="#5C913B" d="M31 32a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4h21a4 4 0 0 1 4 4v22z"/><path fill="#77B255" d="M29 32a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V12a4 4 0 0 1 4-4h19.335C27.544 8 29 9.456 29 11.665V32z"/><path fill="#3E721D" d="M6 6C4.312 6 4.269 4.078 5 3.25C5.832 2.309 7.125 2 9.438 2H11V0H8.281C4.312 0 1 2.5 1 5.375V32a4 4 0 0 0 4 4h2V6H6z"/></svg>
<textarea :value="descriptionInput" @change="descriptionInput = event.target.value" class="apperance-none text-lg font-bold resize-none dark:bg-gray-600 dark:text-white dark:placeholder-white focus:outline-none" placeholder="La description"></textarea>
</div>
<div class="flex w-full space-x-2">
<div @click="addWine()" class="py-2 px-4 bg-rose-800 text-white font-bold border-2 border-rose-800 rounded-lg flex-grow flex justify-center items-center">
<span v-if="!uploadingWine">Ajouter du Vin</span>
<svg v-if="uploadingWine" class="animate-spin text-white w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<div @click="cancelAddVin()" class="py-2 px-4 bg-white border-2 border-rose-800 rounded-lg text-rose-800 font-bold">Cancel</div>
</div>
</div>
</div>
<article class="px-8 mx-auto items-center max-w-2xl lg:max-w-4xl flex flex-col min-h-screen">
<div class="flex items-center w-full justify-between pt-2 pb-8">
<div class="flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-gray-500 w-14 h-14 z-50" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" preserveAspectRatio="xMidYMid meet" viewBox="0 0 64 64"><path d="M54 20.4C54 9 48.3 2 48.3 2H15.7S10 9.1 10 20.4c0 10.8 9.3 20.9 20.9 21.5c-.1 6.3-.7 12.8-2.2 15.1c-2.2 3.2-9.8 1.6-9.8 5h26.2c0-3.4-7.6-1.8-9.8-5c-1.5-2.3-2.1-8.8-2.2-15.1C44.7 41.3 54 31.3 54 20.4M32 39.3c-9.8 0-17.9-7.8-18.9-16.7c-.1-.6-.1-1.3-.1-1.9c0-9.9 4.9-15.9 4.9-15.9h28.2s4.8 6 4.9 15.7v.2c0 9.6-8.5 18.6-19 18.6"/></svg>
<div class="fu-inner w-9 h-9 top-2 z-10">
<div class="water bg-rose-800 dark:bg-pink-400 absolute z-10 w-[200%] h-[200%]"></div>
</div>
</div>
<p
style="font-family: 'Pacifico', cursive;"
class="font-bold text-rose-800 italic dark:text-pink-400 text-xl lg:text-3xl"
>
vin de nick et laura
</p>
</div>
<div v-if="loadingVin" class="w-full h-full flex-grow relative flex items-center justify-center">
<div class="flex items-center justify-center relative">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-gray-500 w-14 h-14 z-50" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" preserveAspectRatio="xMidYMid meet" viewBox="0 0 64 64"><path d="M54 20.4C54 9 48.3 2 48.3 2H15.7S10 9.1 10 20.4c0 10.8 9.3 20.9 20.9 21.5c-.1 6.3-.7 12.8-2.2 15.1c-2.2 3.2-9.8 1.6-9.8 5h26.2c0-3.4-7.6-1.8-9.8-5c-1.5-2.3-2.1-8.8-2.2-15.1C44.7 41.3 54 31.3 54 20.4M32 39.3c-9.8 0-17.9-7.8-18.9-16.7c-.1-.6-.1-1.3-.1-1.9c0-9.9 4.9-15.9 4.9-15.9h28.2s4.8 6 4.9 15.7v.2c0 9.6-8.5 18.6-19 18.6"/></svg>
<div class="fu-inner w-9 top-0 h-9 z-10">
<div
class="water bg-rose-800 dark:bg-pink-400 absolute z-10 w-[200%] h-[200%]"
:style="{top: loadingTime + '%'}"
></div>
</div>
</div>
</div>
<div class="flex-grow">
<ul v-if="!loadingVin" class="grid grid-cols-6 py-4 gap-4 dark:text-pink-400">
<li v-for="{ color, description, region, producer, grape, img, rating } in vins" class="flex items-start space-x-2 col-span-6 md:col-span-3 lg:col-span-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" class="w-6 h-6 flex-shrink-0" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 64 64"><path :class="findColor(color)" d="M15.1 22.1C16 30.1 23.3 37 32 37c9.4 0 17.1-8 17.1-16.7v-.2c-9.8-1.3-22.1 5.8-34 2" fill="currentColor"/><path class="text-gray-500" d="M54 20.4C54 9 48.3 2 48.3 2H15.7S10 9.1 10 20.4c0 10.8 9.3 20.9 20.9 21.5c-.1 6.3-.7 12.8-2.2 15.1c-2.2 3.2-9.8 1.6-9.8 5h26.2c0-3.4-7.6-1.8-9.8-5c-1.5-2.3-2.1-8.8-2.2-15.1C44.7 41.3 54 31.3 54 20.4M32 39.3c-9.8 0-17.9-7.8-18.9-16.7c-.1-.6-.1-1.3-.1-1.9c0-9.9 4.9-15.9 4.9-15.9h28.2s4.8 6 4.9 15.7v.2c0 9.6-8.5 18.6-19 18.6" fill="currentColor"/></svg>
<div class="text-sm">
<p class="text-lg font-bold">{{producer}}</p>
<p class="font-semibold dark:text-white">{{grape}}</p>
<p class="font-semibold dark:text-white">{{region}}</p>
<p class="text-xs italic dark:text-white">{{description}}</p>
<p class="text-xs italic dark:text-white">{{rating || 'no rating'}}</p>
<div class="flex items-center space-x-2 my-1 text-rose-800 dark:text-white">
<svg xmlns="http://www.w3.org/2000/svg" :class="rating >= 1 ? 'h-4 w-4 text-yellow-500' : 'h-4 w-4'" :fill="rating >= 1 ? 'currentColor' : 'none'" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" :class="rating >= 2 ? 'h-4 w-4 text-yellow-500' : 'h-4 w-4'" :fill="rating >= 2 ? 'currentColor' : 'none'" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" :class="rating >= 3 ? 'h-4 w-4 text-yellow-500' : 'h-4 w-4'" :fill="rating >= 3 ? 'currentColor' : 'none'" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" :class="rating >= 4 ? 'h-4 w-4 text-yellow-500' : 'h-4 w-4'" :fill="rating >= 4 ? 'currentColor' : 'none'" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" :class="rating >= 5 ? 'h-4 w-4 text-yellow-500' : 'h-4 w-4'" :fill="rating >= 5 ? 'currentColor' : 'none'" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</div>
</div>
</li>
</ul>
</div>
<div class="w-full py-8 flex items-center justify-center font-bold dark:text-white text-sm space-y-4">
<div class="">
<span>Made with </span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-rose-800 dark:text-pink-400 inline" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
</svg>
<span>&</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" class="w-5 h-5 flex-shrink-0 inline" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 64 64"><path class="dark:text-pink-400 text-rose-800" d="M15.1 22.1C16 30.1 23.3 37 32 37c9.4 0 17.1-8 17.1-16.7v-.2c-9.8-1.3-22.1 5.8-34 2" fill="currentColor"/><path class="text-gray-500" d="M54 20.4C54 9 48.3 2 48.3 2H15.7S10 9.1 10 20.4c0 10.8 9.3 20.9 20.9 21.5c-.1 6.3-.7 12.8-2.2 15.1c-2.2 3.2-9.8 1.6-9.8 5h26.2c0-3.4-7.6-1.8-9.8-5c-1.5-2.3-2.1-8.8-2.2-15.1C44.7 41.3 54 31.3 54 20.4M32 39.3c-9.8 0-17.9-7.8-18.9-16.7c-.1-.6-.1-1.3-.1-1.9c0-9.9 4.9-15.9 4.9-15.9h28.2s4.8 6 4.9 15.7v.2c0 9.6-8.5 18.6-19 18.6" fill="currentColor"/></svg>
<span>by <a href="https://nickgraffis.me" class="hover:underline dark:hover:text-pink-400 hover:text-rose-400">Nick Graffis</a></span>
</div>
</div>
<div @click="moreVin = !moreVin" class="fixed bottom-4 right-4 z-50 w-12 h-12 dark:bg-pink-400 bg-rose-800 rounded-full flex items-center justify-center cursor-pointer transform duration-150 transition-transform hover:scale-110 active:scale-90">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" class="w-7 h-7" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><circle fill="#CCD6DD" cx="7.189" cy="27.5" r="1.5"/><path fill="#CCD6DD" d="M9.609 13.234A3.5 3.5 0 0 0 6.189 9a3.489 3.489 0 0 0-3.45 3.005c-.017 0-.033-.005-.05-.005a2 2 0 0 0 0 4c.033 0 .063-.008.095-.01a1.49 1.49 0 0 0-.095.51c0 .46.212.867.539 1.143A1.985 1.985 0 0 0 2.689 19a2 2 0 0 0 2 2c0 .375.11.721.289 1.021A1.496 1.496 0 0 0 5.189 25a1.5 1.5 0 0 0 1.5-1.5c0-.18-.037-.35-.095-.51c.032.002.062.01.095.01a2 2 0 0 0 2-2c0-.601-.27-1.133-.69-1.5c.419-.367.69-.899.69-1.5a1.98 1.98 0 0 0-.294-1.03c.097.015.193.03.294.03a2 2 0 0 0 2-2c0-.771-.441-1.432-1.08-1.766z"/><circle fill="#E4EBEF" cx="5.689" cy="19" r="1"/><path fill="#E4EBEF" d="M8.689 13a2 2 0 1 0-4 0c0 .032.008.063.01.095a1.49 1.49 0 0 0-.51-.095a1.5 1.5 0 1 0 .558 2.89c.172.638.749 1.11 1.442 1.11a1.5 1.5 0 0 0 1.5-1.5c0-.248-.066-.478-.172-.684A1.996 1.996 0 0 0 8.689 13z"/><path fill="#C1694F" d="M7.301 3.076s-.817-.798-.873-.842c.233-.618.164-1.269-.25-1.692c-.627-.616-1.758-.488-2.536.29L1.521 2.953c-.777.777-.906 1.909-.29 2.536c.423.413 1.073.483 1.692.25c.045.055.842.873.842.873c.781.78 2.047.78 2.828 0l.707-.708a2 2 0 0 0 .001-2.828z"/><path fill="#A95233" d="M6.727 3.985c.096-.096.395-.412.703-.75c-.043-.053-.08-.109-.13-.159c0 0-.817-.798-.873-.842c-.112.298-.289.59-.542.842L3.766 5.197c-.253.253-.545.43-.843.542c.045.055.842.873.842.873c.049.049.106.086.159.13c.291-.261.584-.537.682-.634l2.121-2.123z"/><path fill="#264612" d="M34.9 23.787l-5.067-5.067c-3.664-3.664-7.322-4.14-14.358-6.945l-3.149 3.149c3.231 6.61 3.236 10.739 6.9 14.403l5.068 5.068c.993.993 1.787 1.81 2.782.816l8.409-8.412c.996-.996.408-2.019-.585-3.012z"/><path fill="#FFE8B6" d="M16.205 12.164s1.739.644-.56 2.943c-2.122 2.122-2.917.651-2.917.651l-3.447-3.447l3.536-3.536l3.388 3.389z"/><path fill="#FFD983" d="M13.124 9.083L12.11 8.068l-3.536 3.535l1.014 1.015c.994.993.819 1.055 2.644-.77l.592-.593c1.442-1.443 1.293-1.179.3-2.172z"/><path fill="#264612" d="M12.463 7.007a1.5 1.5 0 0 1-.001 2.122l-2.827 2.827a1.5 1.5 0 1 1-2.122-2.122l2.827-2.827a1.503 1.503 0 0 1 2.123 0z"/><path fill="#FFE8B6" d="M28.373 20.089a2.003 2.003 0 0 0-2.829 0l-4.949 4.95a2 2 0 0 0 0 2.828l4.242 4.242a2 2 0 0 0 2.829 0l4.949-4.949a2 2 0 0 0 0-2.828l-4.242-4.243z"/></svg>
</div>
</article>
</div>
</body>
</html>