-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
227 lines (192 loc) · 9.73 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Mountain Beer</title>
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<link rel="stylesheet" href="style.css">
<!-- FontAwesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<style>
img.logo {
width: 200px;
height: 200px;
}
img.beers {
width: 200px;
height: 300px;
}
footer {
display: none;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-links a {
margin-right: 10px;
color: #000;
text-decoration: none;
}
.arrow {
animation: MoveUpDown 1.2s linear infinite;
position: absolute;
}
@keyframes MoveUpDown {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
</style>
</head>
<body style="background-color: #222;">
<!-- check the age -->
<div id="content" >
<div class="container">
<div class="beer-title text-center">
<!-- Split the text into individual spans -->
<span>მ</span><span>თ</span><span>ი</span><span>ს</span>
<span>ლ</span><span>უ</span><span>დ</span><span>ი</span>
</div>
<div id="inputFields" class="top-content">
<h5 class="title mb-5">თუ თქვენ უკვე მიაღწიეთ ალკოჰოლური სასმლის მიღებისთვის კანონით განსაზღვრულ ასაკს, შეიყვანეთ თქვენი დაბადების თარიღი<h5/>
<!-- Flexbox for Inputs -->
<div class="d-flex justify-content-center inputs mb-4">
<input type="number" id="input-day" name="day" placeholder="დღე" class="form-control input">
<input type="number" id="input-month" name="month" placeholder="თვე" class="form-control input">
<input type="number" id="input-year" name="year" placeholder="წელი" class="form-control input">
</div>
<!-- Button -->
<button type="submit" class="btn btn-primary enter" onclick="verifyAge()">შესვლა</button>
</div>
</div>
</div> <!-- end check the age -->
<div id="mainContent" style="display: none;">
<div class="container my-2">
<div class="my-xs-1 my-sm-2 my-md-4 my-lg-5 my-xl-6 ">
<img src="./assets/photos/logo.JPG" alt="Logo" class="rounded mx-auto d-block logo">
</div>
<h6 class="my-4 my-md-4 my-lg-5 my-xl-6 text-center text-dark font-weight-bold">მთის ლუდი თუ მტრის სისხლი</h6>
<div class="my-4 my-lg-5 my-xl-6"></div>
<img src="./assets/photos/beers.JPG" alt="beers" class="rounded mx-auto d-block beers">
</div>
</div>
<!-- Contact information -->
<footer id="footerInfo" class="py-md-3 py-lg-4 py-xl-5">
<div class="row text-center my-md-3 my-lg-4 my-xl-5">
<!-- Address Title -->
<div class="col-md-6">
<h6 class="my-4 text-dark font-weight-bold">ლუდი იწარმოება აქ
<span style='font-size: 2rem; height: 10vh; font-weight: 200; color: blue; margin-left: 5px; padding-bottom: 15px;' class="arrow text-center">
<i class="fa-solid fa-down-long"></i>
</span></h6>
<!-- Adress -->
<ul class="text-center">
<li style="list-style-type: none;" class="my-4"><a href="https://maps.app.goo.gl/HqdFpTngbLDeRWhn9" target="_blank">კასპი, თევდორეს ქუჩა N3</a></li>
</ul>
</div>
<!-- Phone number -->
<div class="col-md-6 my-sm-2 my-md-3 my-lg-4 my-xl-5 text-center">
<h6 class="text-dark font-weight-bold">ტელ:
<a href="tel:+995577936762">577936762</a>,
<a href="tel:+995591015752">591015752</a>
</h6>
</div>
</div>
<!-- Social Network -->
<div class="text-center">
<a href="https://facebook.com/MTIS-LUDI" class="my-md-3 my-lg-4 my-xl-5 mx-2"><img class="img-responsive mx-sm-2 mx-md-4 mx-lg-5 mx-xl-6" width="40" height="40" src="./assets/social/facebook.png" alt="facebook-icon" ></a>
<a href="https://g.co/kgs/PnXupo4" class="my-md-3 my-lg-4 my-xl-5 mx-2"><img class="img-responsive mx-sm-2 mx-md-4 mx-lg-5 mx-xl-6" width="40" height="40" src="./assets/social/google.png" alt="google-icon" ></a>
</div>
</footer>
</div>
<div class="d-flex justify-content-center mt-4">
<div id="errorMsg" class="alert alert-danger alert-dismissible fade show w-50 py-5 d-none text-center" role="alert">
<h3> სამწუხაროდ, თქვენ <strong>არ გაქვთ </strong> ალკოჰოლური სასმლის მიღების უფლება.</h3>
</body>
<script>
// GSAP Animation for "Mountain Beer" text
gsap.to(".beer-title span", {
duration: 1, // Duration for each letter's animation
opacity: 1, // Fade in the letters
y: 0, // Move letters back to the original position
ease: "bounce.out", // Bounce effect
stagger: 0.1 // Stagger the animation (0.1 second delay between letters)
});
function verifyAge() {
// Get input values
const day = parseInt(document.getElementById('input-day').value);
const month = parseInt(document.getElementById('input-month').value);
const year = parseInt(document.getElementById('input-year').value);
// Check if inputs are valid
if (isNaN(day) || isNaN(month) || isNaN(year)) {
alert('გთხოვთ, შეიყვანეთ სწორი თარიღი');
return;
}
// Calculate age
const today = new Date();
const birthDate = new Date(year, month - 1, day); // JavaScript months are 0-indexed
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
const dayDiff = today.getDate() - birthDate.getDate();
// Adjust age if birthdate hasn't occurred yet this year
if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
age--;
}
// Check if the user is old enough (e.g., 18 years old)
const legalDrinkingAge = 18; // Set to your legal drinking age
// remove and add error message
const errMsg=document.getElementById("errorMsg");
const inputFields=document.getElementById("inputFields");
const timeline = gsap.timeline({
// duration: 3,
paused: true
});
if (age >= legalDrinkingAge) {
toggleContent();
//alert('თქვენ მიაღწიეთ ალკოჰოლური სასმლის მიღებისთვის კანონიერ ასაკს');
} else {
//alert('სამწუხაროდ, თქვენ არ გაქვთ ალკოჰოლური სასმლის მიღების უფლება');
errMsg.classList.remove("d-none");
errMsg.classList.add("d-block");
inputFields.style.display="none"
timeline.fromTo("#errorMsg",
{ y: 100 }, // Start at 400px from the top (or at the bottom of the container),
{
duration: 3,
opacity: 1,
y: 0,
stagger: 0.3,
yoyo: true,
ease: "power3.out", // Ease effect for smooth animation
});
timeline.play();
}
}
function toggleContent() {
const content = document.getElementById('content');
const mainContent = document.getElementById('mainContent');
const footerTag = document.getElementById('footerInfo');
// Toggle between visible and invisible by changing the display property
if (content.style.display === 'block' || content.style.display === '') {
content.style.display = 'none'; // Hide the content
mainContent.style.display = 'block';
document.body.style.backgroundColor = 'transparent'; // Remove background color
document.body.style.display = 'block';
footerInfo.style.display = 'block';
} else {
content.style.display = 'block'; // Show the content
}
}
</script>
</html>