modal for "continue with confidence"
This commit is contained in:
John Hess
parent
9062b4e1a2
commit
5476cf39e9
11 changed files with 77 additions and 166 deletions
|
|
@ -1,4 +1,5 @@
|
|||
<a class="btn-main btn-slim" href="{{ include.href }}">
|
||||
<a class="btn-main btn-slim" href="{{ include.href }}" data-micromodal-trigger="{{ include.modal }}" %}
|
||||
>
|
||||
<div class="btn-split">
|
||||
<div class="btn-logo">
|
||||
<img class="btn-android" src="{{ site.baseurl}}/assets/images/btr-android.svg">
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
<div class="modal micromodal-slide" id="product-modal" aria-hidden="true">
|
||||
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
|
||||
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="product-modal-title">
|
||||
<header class="modal__header">
|
||||
<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
|
||||
</header>
|
||||
<main class="modal__content" id="product-modal-content">
|
||||
<div class="modal__content__header">
|
||||
<div class="header__logo">
|
||||
<img src="{{ site.baseurl }}{{ page_data.modal.butter_app_logo }}" alt="{% t modal.butter_app_logo_alt %}" />
|
||||
</div>
|
||||
<div class="header__text">
|
||||
<h2 class="modal__title ls-40" id="product-modal-title">{% t modal.title %}</h2>
|
||||
<ul class="info__list">
|
||||
{% for item in site.translations[site.lang].modal.info_list %}
|
||||
<li>{{ item }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="header__btn">
|
||||
<a class="btn-main" href="{{ site.baseurl }}{{ page_data.modal.button_url }}">{% t modal.button_text %}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__content__description">
|
||||
<p class="content-text ls-40">{% t modal.text %}</p>
|
||||
</div>
|
||||
<div class="modal__content__slider">
|
||||
<div class="screens-slider">
|
||||
{% for slide in page_data.modal.slider_list %}
|
||||
<div class="slider-item">
|
||||
<img src="{{ site.baseurl }}{{ slide }}" alt="slider image" />
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="modal__footer">
|
||||
<p class="ls-40">{% t modal.warning %}</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
32
_includes/sideload.html
Normal file
32
_includes/sideload.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<div class="modal micromodal-slide" id="product-modal" aria-hidden="true">
|
||||
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
|
||||
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="product-modal-title">
|
||||
<main class="modal__content" id="product-modal-content">
|
||||
<div class="modal__content__header">
|
||||
<div class="header__text">
|
||||
<h2 class="modal__title ls-40" id="product-modal-title">Continue With Confidence</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__content__description">
|
||||
<p class="modal__text ls-40">
|
||||
Downloading apps from unknown sources can expose your device to malicious software. For this
|
||||
reason, your phone will warn against it.
|
||||
</p>
|
||||
<p class="modal__text ls-40">
|
||||
The Butter App Store and the apps in it are checked for malware before they are shared. Consider
|
||||
it a safe source.
|
||||
</p>
|
||||
</div>
|
||||
<a class="modal__close" aria-label="Close modal" data-micromodal-close>
|
||||
Go Back
|
||||
</a>
|
||||
<hr style="color: #00000033">
|
||||
<a class="modal__close modal__continue"
|
||||
onclick="MicroModal.close(); window.location='{{ site.baseurl }}/assets/download/butter.apk'"
|
||||
aria-label="Download App Store">
|
||||
Continue to Download
|
||||
</a>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,19 +94,11 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-main.btn-slim {
|
||||
padding: .5em 2.5em;
|
||||
}
|
||||
|
||||
|
||||
// Text utility classes
|
||||
.content-text {
|
||||
font-family: $text-font-family;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.caption {
|
||||
color: $dark-gray;
|
||||
font-family: $text-font-family;
|
||||
|
|
|
|||
|
|
@ -11,5 +11,5 @@ $royal-blue: #6166E9;
|
|||
|
||||
// Typography
|
||||
$base-font-family: 'Poppins', sans-serif !default;
|
||||
$text-font-family: 'Prata', serif;
|
||||
$text-font-family: 'Poppins', sans-serif !default;
|
||||
$footer-font-family: 'Inter', sans-serif;
|
||||
|
|
|
|||
|
|
@ -16,47 +16,54 @@
|
|||
|
||||
.modal__container {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
max-width: 1070px;
|
||||
max-height: 100vh;
|
||||
border-radius: 4px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
margin: 10px;
|
||||
max-width: 500px;
|
||||
border-radius: 21px;
|
||||
}
|
||||
|
||||
.modal__header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal__title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 600;
|
||||
font-size: 1.75em;
|
||||
line-height: 1.25;
|
||||
color: $dark-gray;
|
||||
.header__text {
|
||||
margin: 0 20px;
|
||||
h2.modal__title {
|
||||
margin: 30px auto 20px auto;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
color: black;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.modal__close {
|
||||
margin: 20px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
display: block;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.modal__header .modal__close:before { content: "\2715"; font-size: 24px; }
|
||||
.modal__continue {
|
||||
color: #6166E9;
|
||||
}
|
||||
|
||||
.modal__content {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.5;
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.modal__content__description {
|
||||
margin: 0 20px;
|
||||
p {
|
||||
font-family: $text-font-family;
|
||||
font-size: 16px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**************************\
|
||||
Demo Animation Style
|
||||
|
|
|
|||
|
|
@ -184,7 +184,7 @@ a:active {
|
|||
font-weight: 500;
|
||||
margin: 30px 0 15px 0;
|
||||
}
|
||||
p {
|
||||
p.informational-text {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin: 10px 0;
|
||||
|
|
@ -306,7 +306,6 @@ a:active {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------
|
||||
// Footer Styles
|
||||
// -------------------------
|
||||
|
|
@ -315,85 +314,6 @@ a:active {
|
|||
padding: 35px 0;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------
|
||||
// Modal Styles
|
||||
// -------------------------
|
||||
.modal__content {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
.header__logo {
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
@media (max-width: 768px) {
|
||||
max-width: 120px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header__text {
|
||||
margin: 0 30px;
|
||||
max-width: 430px;
|
||||
width: 100%;
|
||||
@media (max-width: 768px) {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.info__list {
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.header__btn {
|
||||
@media (min-width: 769px) {
|
||||
margin-left: auto;
|
||||
}
|
||||
.btn-main {
|
||||
@media (max-width: 992px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
&__slider {
|
||||
//to prevent slider jump
|
||||
@media (min-width: 1200px) {
|
||||
min-height: 586px;
|
||||
height: 100%;
|
||||
}
|
||||
.slider-item {
|
||||
margin: 0 10px;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
@media (max-width: 768px) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal__footer {
|
||||
p {
|
||||
font-size: 14px;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -------------------------
|
||||
// Slider Styles
|
||||
// -------------------------
|
||||
|
|
|
|||
|
|
@ -4,16 +4,17 @@ breadcrumb: "App Store"
|
|||
---
|
||||
|
||||
<!-- Custom style= makes the image line up with the icon. -->
|
||||
<img src="{{ site.baseurl }}/assets/images/app-store-top.png" alt="App Store icon samples" class="hero" style="max-width: 473px; display: block; margin: 0 auto;">
|
||||
<img src="{{ site.baseurl }}/assets/images/app-store-top.png" alt="App Store icon samples" class="hero"
|
||||
style="max-width: 473px; display: block; margin: 0 auto;">
|
||||
<img src="{{ site.baseurl }}/assets/images/butter-app-icon-large.svg" alt="Butter Tile" class="app-tile">
|
||||
|
||||
<h1>Discover the Butter App Store</h1>
|
||||
<p class="subtitle">Featuring free, ad-free Android apps that use less internet and less battery</p>
|
||||
|
||||
<div class="btn-container">
|
||||
{% assign apk_url = site.baseurl | append: "/assets/download/butter.apk" %}
|
||||
{% include fancybutton.html main_cta="Download App Store" sub_cta="Less than 10 MB" href=apk_url %}
|
||||
{% include fancybutton.html main_cta="Download App Store" sub_cta="Less than 10 MB" href="#" modal="product-modal" %}
|
||||
</div>
|
||||
{% include sideload.html %}
|
||||
|
||||
<a class="btn-secondary" href="{{ site.base_url }}/fdroid-webdash/">View in Browser</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -29,9 +29,11 @@ $(document).ready(function(){
|
|||
|
||||
// Prevent default for modal trigger button
|
||||
const btnModal = document.querySelector('.btn-modal');
|
||||
btnModal.addEventListener('click', (event) => {
|
||||
if (btnModal) {
|
||||
btnModal.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// If #usb-butter exists and a request to thishost.tld/usb-butter returns status 200
|
||||
// change display of #usb-butter to inherit
|
||||
|
|
|
|||
|
|
@ -33,5 +33,3 @@ layout: default
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include modal.html %}
|
||||
|
|
@ -15,11 +15,11 @@ breadcrumb: "Offline Maps"
|
|||
</div>
|
||||
|
||||
<h2>About OsmAnd</h2>
|
||||
<p>OsmAnd allows you to navigate taking into account the preferred roads and vehicle dimensions. Plan routes based on
|
||||
<p class="informational-text">OsmAnd allows you to navigate taking into account the preferred roads and vehicle dimensions. Plan routes based on
|
||||
inclines and record GPX tracks without an internet connection. OsmAnd is an open source app. It does not collect
|
||||
user data and you decide what data the app will have access to.</p>
|
||||
<h2>Map Files</h2>
|
||||
<p>Download map files for your region. To import a map file into OsmAnd, locate the file in your device downloads. Then
|
||||
<p class="informational-text">Download map files for your region. To import a map file into OsmAnd, locate the file in your device downloads. Then
|
||||
open it with the OsmAnd app.</p>
|
||||
|
||||
<div class="filelist">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue