Skip to content

Commit

Permalink
Add popup to gather emails.
Browse files Browse the repository at this point in the history
  • Loading branch information
@chayev
chayev committed Jun 12, 2023
1 parent 5be78c5 commit dff03e6
Show file tree
Hide file tree
Showing 3 changed files with 169 additions and 7 deletions.
58 changes: 51 additions & 7 deletions webapp/static/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ form input {
width: 100%;
}

form input[type='text'] {
.padding > form input[type='text'] {
padding: 5px;
height: 40px;
border: 2px solid #333333;
Expand Down Expand Up @@ -109,7 +109,7 @@ form input[type='submit'] {
max-width: 1200px;
}

#results form {
#results .padding > form {
display: grid;
width: 100%;
grid-template-columns: auto 20% 20% 40px;
Expand All @@ -121,20 +121,20 @@ form input[type='submit'] {
display: none;
}

#results form label {
#results .padding > form label {
text-align: left;
font-size: small;
font-weight: bold;
padding-left: 4px;
}

@media (min-width: 881px) {
#results form label[for='bundle'] {
#results .padding > form label[for='bundle'] {
grid-column-start: span 2;
}
}

#results form a {
#results .padding > form a {
width: 40px;
}

Expand Down Expand Up @@ -174,13 +174,13 @@ footer a {
#results main {
width: 95%;
}
#results form {
#results .padding > form {
display: grid;
grid-template-columns: 55px auto;
grid-template-rows: 40px 40px 40px 40px;
line-height: 40px;
}
#results form input[type='submit'] {
#results .padding > form input[type='submit'] {
grid-column-start: span 2;
padding: 0;
}
Expand Down Expand Up @@ -287,3 +287,47 @@ input:checked + #toggle:after {
#copy-link:hover {
background: #505050;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

#mc-embedded-subscribe-form {
grid-template-columns: unset;
grid-template-rows: unset;
}
59 changes: 59 additions & 0 deletions webapp/tpl/android-results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,68 @@ <h1><a href="/" aria-label="Go to Homepage" tabindex="-1">yURL</a><span id="desc
<div class="title">
<h2>Results:</h2>
{{ template "copyLink" }}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Subscribe</button>
</div>
<pre>{{ .Content }}</pre>
</main>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<div id="mc_embed_signup">
<form action="https://chayev.us21.list-manage.com/subscribe/post?u=9be68fc65e7fec439ccea32a8&amp;id=6a1a3b3510&amp;f_id=001c5ae1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our newsletter</h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div id="mce-responses" class="clear foot">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9be68fc65e7fec439ccea32a8_6a1a3b3510" tabindex="-1" value=""></div>
<div class="optionalParent">
<div class="clear foot">
<input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';fnames[6]='MESSAGE';ftypes[6]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
</div>
{{ template "footer" . }}
</body>
</html>
59 changes: 59 additions & 0 deletions webapp/tpl/ios-results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,68 @@ <h1><a href="/" aria-label="Go to Homepage" tabindex="-1">yURL</a><span id="desc
<div class="title">
<h2>Results:</h2>
{{ template "copyLink" }}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Subscribe</button>
</div>
<pre>{{ .Content }}</pre>
</main>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<div id="mc_embed_signup">
<form action="https://chayev.us21.list-manage.com/subscribe/post?u=9be68fc65e7fec439ccea32a8&amp;id=6a1a3b3510&amp;f_id=001c5ae1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our newsletter</h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div id="mce-responses" class="clear foot">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9be68fc65e7fec439ccea32a8_6a1a3b3510" tabindex="-1" value=""></div>
<div class="optionalParent">
<div class="clear foot">
<input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';fnames[6]='MESSAGE';ftypes[6]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
</div>
{{ template "footer" . }}
</body>
</html>

0 comments on commit dff03e6

Please sign in to comment.