-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (138 loc) · 9.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<meta property="og:url" content="https://praashoo7.github.io/Figma-Front-End/"/>
<meta property="og:image" content="https://praashoo7.github.io/Figma-Front-End/ReadMe-Images/OGImg2.png"/>
<meta property="og:description" content="Figma-Front-End"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image:alt" content="Figma-Front-End Banner">
<meta name="twitter:url" content="https://praashoo7.github.io/Figma-Front-End/"/>
<meta name="twitter:title" content="Figma-Front-End"/>
<meta name="twitter:description" content="Restro/Hotel Management Website."/>
<meta name="twitter:image" content="https://praashoo7.github.io/Figma-Front-End/ReadMe-Images/OGImg2.png"/>
<meta name="description" content="Restro/Hotel Management Website."/>
<link rel="preload" href="https://praashoo7.github.io/Figma-Front-End/CSS/fonts/AestheticRegular-8M5dM.ttf" as="font" crossorigin="anonymous">
<link rel="preload" href="https://praashoo7.github.io/Figma-Front-End/CSS/fonts/Brownhill Script.ttf" as="font" crossorigin="anonymous">
<link rel="preload" href="https://praashoo7.github.io/Figma-Front-End/CSS/fonts/Classy Vogue Stylish Serif Font.otf" as="font" crossorigin="anonymous">
<link rel="stylesheet" href="https://praashoo7.github.io/Figma-Front-End/CSS/theme.css">
<link rel="stylesheet" href="https://praashoo7.github.io/Figma-Front-End/CSS/Login.css">
<link rel="icon" href="https://praashoo7.github.io/Figma-Front-End/CSS/svg/Login.svg">
<script>
// IMPORTANT: set this in <HEAD> top before any other tag.
const setItem = (theme) => {
theme ??= localStorage.theme || "light";
document.documentElement.dataset.theme = theme;
localStorage.theme = theme;
};
setItem();
</script>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WG4FRRC1L5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WG4FRRC1L5');
</script>
<body>
<iframe src="HomePage.html" style="display: none;"></iframe>
<div class="dark" style="display: none;">
<label class="theme-switch" for="checkbox" id="themeswitch">
<input type="checkbox" id="checkbox">
<div class="slider round"></div>
</label>
</div>
<main>
<div class="wrapper">
<div class="login_left">
<div class="image_wrapper">
<div class="skeletonAnimation" id="skeletonAnimation"></div>
<img src="CSS/imgs/Hotel.webp" class="main_image" id="main_image" alt="">
</div>
<div class="heading_text1">Hotel</div>
<div class="heading_text2">Management</div>
</div>
<div class="login_right">
<div class="heading">Login</div>
<div class="data">
<div class="username_text">Enter Username</div>
<input type="text" placeholder="Username" class="username" autocomplete="false">
<div class="password_text">Enter Password</div>
<div class="password_div">
<input type="text" id="password" placeholder="Password" class="password" autocomplete="false">
<div class="hide_password">
<button id="passwordHideButton" aria-label="passwordHideButton">
<svg class="eye_main" width="24" height="24" viewBox="0 0 30 30" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<path d="M0,15.089434 C0,16.3335929 5.13666091,24.1788679 14.9348958,24.1788679 C24.7325019,24.1788679 29.8697917,16.3335929 29.8697917,15.089434 C29.8697917,13.8456167 24.7325019,6 14.9348958,6 C5.13666091,6 0,13.8456167 0,15.089434 Z" id="outline" fill="black"></path>
<mask id="mask">
<rect width="100%" height="100%" fill="white"></rect>
<use xlink:href="#outline" class="animateEye" id="lid" fill="black"/>
</mask>
</defs>
<g>
<path id="eye_eye" d="M0,15.089434 C0,16.3335929 5.13666091,24.1788679 14.9348958,24.1788679 C24.7325019,24.1788679 29.8697917,16.3335929 29.8697917,15.089434 C29.8697917,13.8456167 24.7325019,6 14.9348958,6 C5.13666091,6 0,13.8456167 0,15.089434 Z M14.9348958,22.081464 C11.2690863,22.081464 8.29688487,18.9510766 8.29688487,15.089434 C8.29688487,11.2277914 11.2690863,8.09740397 14.9348958,8.09740397 C18.6007053,8.09740397 21.5725924,11.2277914 21.5725924,15.089434 C21.5725924,18.9510766 18.6007053,22.081464 14.9348958,22.081464 L14.9348958,22.081464 Z M18.2535869,15.089434 C18.2535869,17.0200844 16.7673289,18.5857907 14.9348958,18.5857907 C13.1018339,18.5857907 11.6162048,17.0200844 11.6162048,15.089434 C11.6162048,13.1587835 13.1018339,11.593419 14.9348958,11.593419 C15.9253152,11.593419 14.3271242,14.3639878 14.9348958,15.089434 C15.451486,15.7055336 18.2535869,14.2027016 18.2535869,15.089434 L18.2535869,15.089434 Z" ></path>
<use xlink:href="#outline" mask="url(#mask)" fill="#FFFFFF"/>
</g>
</svg>
</button>
</div>
</div>
</div>
<div class="bottom">
<div class="forgot_password">
<button class="forgot_password_btn">Forgot Password?</button>
</div>
<div class="login">
<button class="login_btn" id="login_btn" onclick="redirectToHomePage()">
<div class="load" id="load">
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
</div>
<span id="login_btn_text">Login</span>
</button>
</div>
<div class="OR">
<div class="l1"></div>
<div class="OR_text">Or login using</div>
<div class="l2"></div>
</div>
<div class="other_login">
<button class="google_login">
Google
<svg class="google_svg" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_244_735)">
<path d="M24.9868 12.7343C24.9868 11.71 24.9018 10.9626 24.7177 10.1875H12.749V14.8104H19.7744C19.6328 15.9593 18.8679 17.6894 17.1682 18.852L17.1444 19.0068L20.9286 21.8716L21.1908 21.8971C23.5987 19.724 24.9868 16.5267 24.9868 12.7343Z" fill="#4285F4"/>
<path d="M12.7488 24.9142C16.1907 24.9142 19.0801 23.8069 21.1906 21.8969L17.168 18.8517C16.0915 19.5853 14.6468 20.0974 12.7488 20.0974C9.37779 20.0974 6.51666 17.9244 5.49674 14.9209L5.34725 14.9333L1.4123 17.9092L1.36084 18.049C3.45711 22.1182 7.76301 24.9142 12.7488 24.9142Z" fill="#34A853"/>
<path d="M5.49709 14.9209C5.22798 14.1458 5.07223 13.3153 5.07223 12.4572C5.07223 11.599 5.22798 10.7685 5.48293 9.99343L5.4758 9.82835L1.49155 6.80469L1.36119 6.86528C0.497215 8.55392 0.00146484 10.4502 0.00146484 12.4572C0.00146484 14.4641 0.497215 16.3603 1.36119 18.049L5.49709 14.9209Z" fill="#FBBC05"/>
<path d="M12.7488 4.8167C15.1425 4.8167 16.7572 5.8271 17.6779 6.67147L21.2756 3.23884C19.066 1.23187 16.1907 0 12.7488 0C7.76301 0 3.45711 2.7959 1.36084 6.86517L5.48258 9.99332C6.51666 6.98979 9.37779 4.8167 12.7488 4.8167Z" fill="#EB4335"/>
</g>
<defs>
<clipPath id="clip0_244_735">
<rect width="25" height="25" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
<button class="apple_login">
Apple
<svg class="apple_svg" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3232 13.2814C19.293 10.1199 21.9063 8.59629 22.0242 8.52408C20.5568 6.37277 18.2673 6.07827 17.452 6.04385C15.5057 5.84842 13.6535 7.19127 12.6654 7.19127C11.6799 7.19127 10.154 6.07362 8.54111 6.1054C6.41735 6.13493 4.46103 7.33831 3.3676 9.23794C1.16408 13.064 2.80434 18.7303 4.9532 21.8342C6.002 23.3499 7.25556 25.0596 8.89934 24.9979C10.485 24.9357 11.082 23.9753 12.9943 23.9753C14.9082 23.9753 15.4457 24.9979 17.1228 24.9663C18.8243 24.9357 19.9062 23.4183 20.9486 21.8964C22.1535 20.1336 22.6497 18.4271 22.6785 18.3385C22.6419 18.3252 19.3576 17.0643 19.3232 13.2814Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1782 3.99302C17.0517 2.93423 17.6379 1.465 17.4773 0C16.2199 0.0499516 14.6954 0.8393 13.7948 1.89478C12.9852 2.8314 12.2767 4.32705 12.4688 5.76137C13.8714 5.87044 15.3042 5.04976 16.1782 3.99302Z" fill="black"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</main>
<div class="small_device">Please switch to a bigger Device!</div>
<script src="https://praashoo7.github.io/Figma-Front-End/JS/Login.js"></script>
<script src="https://praashoo7.github.io/Figma-Front-End/JS/theme.js"></script>
</body>
</html>