Skip to content

Commit 24d2454

Browse files
LENpolygonLENpolygon
authored
Merge pull request #28 from LENpolygon/userCreateAndLogin
2 parents 456c974 + 664f190 commit 24d2454

File tree

9 files changed

+1002
-117
lines changed

9 files changed

+1002
-117
lines changed

‎public/build.html‎

Lines changed: 85 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,25 @@
1919
<link rel="android-chrome-icon-precomposed" sizes="512x512" href="/assets/android-chrome-512x512.png" />
2020
<!-- Global site tag (gtag.js) - Google Analytics -->
2121
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SXELHG62RJ"></script>
22-
<script>
23-
window.dataLayer = window.dataLayer || [];
24-
function gtag() { dataLayer.push(arguments); }
25-
gtag('js', new Date());
26-
gtag('config', 'G-SXELHG62RJ');
27-
</script>
28-
<script language="javascript" src="js/AoE4_Overlay.js"></script>
2922
</head>
3023

3124
<body>
25+
<div id="cookies-eu-banner" style="display: none;">
26+
By continuing to visit this site, you accept the use of cookies by Google Analytics for statistical purposes.
27+
<a href="https://www.lenpolygon.com/" id="cookies-eu-more">Read more</a>
28+
<button id="cookies-eu-reject">Reject</button>
29+
<button id="cookies-eu-accept">Accept</button>
30+
</div>
3231
<header>
3332
<a class="title gold" href="./">Age of Empires IV<br />Build Order Tool</a>
33+
<a href="#" class="desktop-only logged-in modal-trigger" id="account" title="Account"
34+
data-target="modal-account"><span
35+
style="font-size: 3.8rem; margin-top: -0.8rem; color: transparent; text-shadow: 0 0 0 #ffdb88;">👤</span><span
36+
class="gold">Account Details</span></a>
37+
<a href="#" class="desktop-only logged-out modal-trigger" id="signup" title="Login/Signup"
38+
data-target="modal-signup"><span
39+
style="font-size: 3.8rem; margin-top: -0.8rem; color: transparent; text-shadow: 0 0 0 white;">👤</span><span>Login
40+
or Signup</span></a>
3441
<a href="./" title="Browse through popular AoE 4 Build Order Online!"><span
3542
style="font-size: 4.8rem; margin-top: -0.8rem;">👁</span><span>Browse All Builds</span></a>
3643
<a class="desktop-only" href="https://github.com/LENpolygon/Build-Order-Tool-AoE4-"
@@ -58,6 +65,65 @@
5865
</a>
5966
</header>
6067

68+
<!-- SIGN UP/LOGIN MODAL -->
69+
<div id="modal-signup" class="modal">
70+
<div class="modal-content">
71+
<h2 class="title gold">Login</h2><br />
72+
<form id="login-form">
73+
<div class="input-field">
74+
<label>Email address</label>
75+
<input type="email" id="login-email" required />
76+
</div>
77+
<br />
78+
<div class="input-field">
79+
<label>Your password</label>
80+
<input type="password" id="login-password" required />
81+
</div>
82+
<br />
83+
<button class="btn yellow darken-2 z-depth-0">Login</button>
84+
</form>
85+
<br />
86+
<h2 class="title gold">Sign up</h2><br />
87+
<form id="signup-form">
88+
<div class="input-field">
89+
<label>Email address</label>
90+
<input type="email" id="signup-email" required />
91+
</div>
92+
<br />
93+
<div class="input-field">
94+
<label>Username</label>
95+
<input type="text" id="username" required />
96+
</div>
97+
<br />
98+
<div class="input-field">
99+
<label>Choose password</label>
100+
<input type="password" id="signup-password" required />
101+
</div>
102+
<br />
103+
<button class="btn yellow darken-2 z-depth-0">Sign up</button>
104+
</form>
105+
</div>
106+
</div>
107+
<!-- ACCOUNT MODAL -->
108+
<div id="modal-account" class="modal">
109+
<div class="modal-content center-align">
110+
<h2 class="title gold">Account details</h2><br />
111+
<br />
112+
<div class="account-details"></div>
113+
<br />
114+
<a href="#" class="gold" id="logout">Logout?</a>
115+
<br />
116+
<br />
117+
<br />
118+
<br />
119+
<br />
120+
<div id="yourBuilds"></div>
121+
<br />
122+
<br />
123+
<br />
124+
</div>
125+
</div>
126+
61127
<main>
62128
<article>
63129
<section>
@@ -133,7 +199,19 @@ <h4 class="desktop-only" style="text-align: right; margin-right: 1rem;">Unique<b
133199
<div id="tooltipBox" class="tooltipBox">
134200
</div>
135201
<script language="javascript" src="js/lz-string.min.js"></script>
202+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
136203
<script type="module" src="js/build.js"></script>
204+
<script language="javascript" src="js/AoE4_Overlay.js"></script>
205+
<script src="js/eu_cookie_banner.js"></script>
206+
<script>
207+
new CookiesEuBanner(function () {
208+
// Your code to launch when user accept cookies
209+
window.dataLayer = window.dataLayer || [];
210+
function gtag() { dataLayer.push(arguments); }
211+
gtag('js', new Date());
212+
gtag('config', 'G-SXELHG62RJ');
213+
});
214+
</script>
137215
</div>
138216
</body>
139217

‎public/css/build.css‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,6 @@ table .buildTime {
1313
width: 36px
1414
}
1515

16-
button {
17-
cursor: pointer;
18-
display: inline-block;
19-
font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
20-
font-size: 1.3rem;
21-
letter-spacing: .1rem;
22-
line-height: 1.3rem;
23-
padding: .9rem 1.3rem;
24-
text-transform: uppercase;
25-
-webkit-appearance: none;
26-
border-width: 1px;
27-
border-style: solid;
28-
border-color: #ffdb88;
29-
background: #181C29;
30-
color: #ffdb88;
31-
}
32-
3316
.buildActions button:hover {
3417
background: #2C374F;
3518
}

‎public/css/global.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,23 @@ table th {
325325
background-color: #a8bbbf;
326326
}
327327

328+
button {
329+
cursor: pointer;
330+
display: inline-block;
331+
font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
332+
font-size: 1.3rem;
333+
letter-spacing: .1rem;
334+
line-height: 1.3rem;
335+
padding: .9rem 1.3rem;
336+
text-transform: uppercase;
337+
-webkit-appearance: none;
338+
border-width: 1px;
339+
border-style: solid;
340+
border-color: #ffdb88;
341+
background: #181C29;
342+
color: #ffdb88;
343+
}
344+
328345
@media screen and (max-width:800px) {
329346
html {
330347
font-size: 6.7px;
@@ -358,4 +375,109 @@ table th {
358375
.mobile-only {
359376
display: none;
360377
}
378+
}
379+
380+
.modal {
381+
-webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
382+
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2)
383+
}
384+
385+
.modal {
386+
display: none;
387+
position: fixed;
388+
left: 0;
389+
right: 0;
390+
background: #2C374F;
391+
padding: 0;
392+
max-height: 70%;
393+
width: 55%;
394+
margin: auto;
395+
overflow-y: auto;
396+
border-radius: 2px;
397+
will-change: top, opacity;
398+
font-size: 1.6rem;
399+
}
400+
401+
.modal:focus {
402+
outline: none
403+
}
404+
405+
@media only screen and (max-width: 992px) {
406+
.modal {
407+
width: 80%
408+
}
409+
}
410+
411+
.modal .modal-content {
412+
padding: 24px
413+
}
414+
415+
.modal .modal-close {
416+
cursor: pointer
417+
}
418+
419+
.modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-small, .modal .modal-footer .btn-flat {
420+
margin: 6px 0
421+
}
422+
423+
.modal-overlay {
424+
position: fixed;
425+
z-index: 999;
426+
top: -25%;
427+
left: 0;
428+
bottom: 0;
429+
right: 0;
430+
height: 125%;
431+
width: 100%;
432+
background: #000;
433+
display: none;
434+
will-change: opacity
435+
}
436+
437+
#cookies-eu-banner {
438+
background: #444;
439+
color: #fff;
440+
padding: 6px;
441+
font-size: 13px;
442+
text-align: center;
443+
}
444+
#cookies-eu-more,
445+
#cookies-eu-accept,
446+
#cookies-eu-reject {
447+
text-decoration: none;
448+
background: #222;
449+
color: #fff;
450+
border: 1px solid #000;
451+
cursor: pointer;
452+
padding: 4px 7px;
453+
margin: 2px 0;
454+
font-size: 13px;
455+
font-weight: bold;
456+
transition: background 0.07s, color 0.07s, border-color 0.07s;
457+
}
458+
#cookies-eu-more:hover,
459+
#cookies-eu-more:focus,
460+
#cookies-eu-accept:hover,
461+
#cookies-eu-accept:focus {
462+
background: #fff;
463+
color: #222;
464+
}
465+
#cookies-eu-more {
466+
margin-left: 7px;
467+
}
468+
469+
#cookies-eu-reject {
470+
background: none;
471+
font-weight: normal;
472+
color: #ccc;
473+
cursor: pointer;
474+
padding: 4px 7px;
475+
margin: 2px 0;
476+
border: 1px solid #666;
477+
}
478+
#cookies-eu-reject:hover,
479+
#cookies-eu-reject:focus {
480+
border-color: #fff;
481+
background: #222;
482+
color: #fff;
361483
}

0 commit comments

Comments
 (0)