Skip to content

Commit bc13043

Browse files
Janaka-Stephcasperdcl
Janaka-Steph
authored and
casperdcl
committed
Better email modal + pretendard font + fix link utf8 char
1 parent 5bd0dd9 commit bc13043

File tree

5 files changed

+142
-37
lines changed

5 files changed

+142
-37
lines changed

‎_config.yml‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,19 @@ parse:
5959
6060
<div id="email-modal" class="modal">
6161
<div class="modal-content">
62-
<!--<div class="header"><span class="close">&times;</span></div>-->
63-
<label for="name">To access this book for free, please enter your email. We won't spam you!</label>
64-
<input type="email" id="email" name="email" />
65-
<button id="email-submit" onclick="emailButtonClick()">Submit</button>
66-
<span class="email-error"></span>
62+
<img src="https://static.premai.io/book/book-cover.jpg" alt="book cover" />
63+
<div class="modal-text">
64+
<h1>Enter your email to access</h1>
65+
<p>
66+
Enter your email to access the book and we’ll also keep you in the loop as we make updates.
67+
The book is open source, you can also read and contribute on <a href="https://github.com/premAI-io/state-of-open-source-ai" target="_blank">Github</a>.
68+
</p>
69+
<div class="input-container">
70+
<input type="email" id="email-input" name="email" placeholder="Enter your email..." />
71+
<button id="email-submit" onclick="emailButtonClick()">Subscribe</button>
72+
</div>
73+
<span class="email-error"></span>
74+
</div>
6775
</div>
6876
</div>
6977
myst_enable_extensions: # https://myst-parser.readthedocs.io/en/latest/using/syntax-optional.html

‎_static/emails.css‎

Lines changed: 97 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,62 +5,132 @@
55
top: 0;
66
width: 100%;
77
height: 100%;
8-
background-color: rgba(0, 0, 0, 0.4);
8+
background-color: rgba(0, 0, 0, 0.8);
99
}
1010

1111
.modal-content {
1212
display: flex;
13+
flex-direction: row;
1314
margin: 15% auto;
14-
width: 50vw;
15-
padding: 30px;
15+
width: 60vw;
16+
padding: 80px 40px;
17+
background-color: rgba(20, 20, 20, 1);
1618
box-shadow: 0 0 22px 1px black;
19+
gap: 30px;
20+
align-items: center;
21+
}
22+
23+
@media only screen and (max-width: 480px) {
24+
.modal-content {
25+
width: 90vw !important;
26+
flex-direction: column !important;
27+
}
28+
.modal-content input {
29+
font-size: 0.9rem !important;
30+
}
31+
.modal-content button {
32+
padding: 10px !important;
33+
}
34+
.modal-content img {
35+
width: 50vw !important;
36+
}
37+
}
38+
39+
@media only screen and (min-width: 481px) and (max-width: 1022px) {
40+
.modal-content {
41+
width: 70vw !important;
42+
flex-direction: column !important;
43+
}
44+
.modal-content input {
45+
font-size: 0.95rem !important;
46+
}
47+
.modal-content img {
48+
width: 30vw !important;
49+
}
50+
}
51+
52+
.modal-content img {
53+
width: 20vw;
1754
}
1855

1956
.modal-content .header {
2057
display: flex;
2158
justify-content: flex-end;
2259
}
2360

24-
.modal-content label {
25-
font-size: 1.2em;
26-
}
27-
2861
.modal-content input {
29-
border: 1px solid #F58E8E;
30-
border-radius: 3px;
62+
border: none;
63+
background-color: transparent;
3164
margin: 10px 0;
65+
flex: 1;
66+
color: rgba(255, 255, 255, 0.70);
67+
font-size: 1rem;
68+
font-style: normal;
69+
font-weight: 400;
70+
line-height: normal;
71+
width: 100%;
3272
}
3373

3474
.modal-content input:focus {
3575
outline: none !important;
36-
box-shadow: 0 0 10px #F58E8E;
3776
}
3877

3978
.modal-content button {
40-
color: black;
41-
background-color: #F58E8E;
79+
color: white;
4280
border: none;
43-
border-radius: 3px;
44-
font-size: 1.3em;
81+
text-align: center;
82+
font-size: 0.8rem;
83+
font-style: normal;
84+
font-weight: 700;
85+
line-height: 24px;
86+
border-radius: 6px;
87+
background: linear-gradient(90deg, #F58E8E 0%, #F1B370 100%);
88+
padding: 10px 24px;
4589
}
4690

47-
/*
48-
.close {
49-
color: black;
50-
font-size: 28px;
91+
.modal-content .email-error {
92+
display: flex;
93+
color: red;
94+
font-size: 0.9em;
95+
margin-top: 4px;
96+
}
97+
98+
.modal-content .input-container {
99+
display: flex;
100+
padding: 18px 16px;
101+
align-items: center;
102+
align-self: stretch;
103+
border-radius: 12px;
104+
border: 1px solid rgba(255, 255, 255, 0.20);
105+
}
106+
107+
.modal-content h1 {
108+
color: #FFF;
109+
font-size: 1.3rem;
110+
font-style: normal;
51111
font-weight: bold;
112+
line-height: normal;
52113
}
53114

54-
.close:hover,
55-
.close:focus {
56-
color: #F58E8E;
115+
.modal-content p {
116+
color: #FFF;
117+
font-size: 1rem;
118+
font-style: normal;
119+
font-weight: 400;
120+
line-height: 26px;
121+
}
122+
123+
.modal-content .modal-text {
124+
flex: 1;
125+
overflow: auto;
126+
}
127+
128+
.modal-content a {
57129
text-decoration: none;
58-
cursor: pointer;
130+
color: #F58E8E;
59131
}
60-
*/
61132

62-
.modal-content .email-error {
63-
color: red;
64-
font-size: 0.9em;
65-
margin-top: 4px;
133+
.modal-content a:hover {
134+
text-decoration: none;
135+
color: #F1B370;
66136
}

‎_static/emails.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function getCookie(cname) {
2121
}
2222

2323
async function emailButtonClick() {
24-
let emailInput = document.getElementById("email");
24+
let emailInput = document.getElementById("email-input");
2525
let emailValue = emailInput.value;
2626
let res = await fetch("https://premai.pythonanywhere.com/email?a=" + emailValue);
2727
const ok = 200 <= res.status && res.status < 299;
@@ -43,11 +43,17 @@ async function emailButtonClick() {
4343
document.addEventListener('DOMContentLoaded', function() {
4444
let modal = document.getElementById('email-modal');
4545
let email = getCookie("address");
46+
let emailInput = document.getElementById("email-input");
4647
if (email === "" || email == null) {
4748
modal.style.display = 'block';
48-
let emailInput = document.getElementById("email");
4949
emailInput.value = "";
5050
}
51-
//let closeModalBtn = modal.querySelector('.close');
52-
//closeModalBtn.addEventListener('click', () => modal.style.display = 'none');
51+
emailInput.focus()
52+
// When user click Enter, click the submit button
53+
emailInput.addEventListener("keypress", function(event) {
54+
if (event.key === "Enter") {
55+
event.preventDefault();
56+
document.getElementById("email-submit").click();
57+
}
58+
});
5359
});

‎_static/external_target.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
a.reference.external:after {
2-
content: "\2b77";
2+
content: "↗";
33
font-size: .7em;
44
vertical-align: text-top;
55
margin-left: .1em;

‎_static/font.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@font-face {
2+
font-family: "Pretendard";
3+
src: url("https://static.premai.io/fonts/Pretendard-Regular.woff2") format("woff2");
4+
font-weight: normal;
5+
}
6+
7+
@font-face {
8+
font-family: "Pretendard";
9+
src: url("https://static.premai.io/fonts/Pretendard-SemiBold.woff2") format("woff2");
10+
font-weight: 600;
11+
}
12+
13+
@font-face {
14+
font-family: "Pretendard";
15+
src: url("https://static.premai.io/fonts/Pretendard-Bold.woff2") format("woff2");
16+
font-weight: bold;
17+
}
18+
19+
* {
20+
font-family: Pretendard, sans-serif;
21+
}

0 commit comments

Comments
 (0)