Add mobile tutorials
This commit is contained in:
Joey Kimsey
@ -1,4 +1,42 @@
|
||||
<section class="container my-5">
|
||||
<h1 class="text-center mb-4">Mobile Tutorials</h1>
|
||||
<div class="row g-4 mb-4">
|
||||
<!-- Apple Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-apple fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title text-center">Apple</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush rounded">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/mobile/iphone" class="text-decoration-none atb-green">
|
||||
How to add the app to your iPhone home-screen.
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Opera Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-android fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title text-center">Android</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush rounded">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/mobile/android" class="text-decoration-none atb-green">
|
||||
How to add the app to your Android home-screen.
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-center mb-4">Browser Tutorials</h1>
|
||||
<div class="row g-4">
|
||||
<!-- Opera Section -->
|
||||
|
||||
33
app/plugins/bookmarks/views/tutorials/mobile/android.html
Normal file
33
app/plugins/bookmarks/views/tutorials/mobile/android.html
Normal file
@ -0,0 +1,33 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to add the app to your Android home-screen.</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<h5 class="mt-4">Step 1: Open https://allthebookmarks.com in Chrome.</h5>
|
||||
<p class="card-text">
|
||||
from this page, tap the menu icon (three dots) in the top-right corner.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/android/add.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<h5>Step 2: Select "Add to Home screen" and a popup will let you choose the name.</h5>
|
||||
<p class="card-text">
|
||||
Next, tap "Add".
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/android/add2.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<h5>Step 3: A popup will let you drag the icon around or you can simply select "Add to Home screen". </h5>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/android/add3.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
The shortcut will now appear on your home screen.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/android/added.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
24
app/plugins/bookmarks/views/tutorials/mobile/iphone.html
Normal file
24
app/plugins/bookmarks/views/tutorials/mobile/iphone.html
Normal file
@ -0,0 +1,24 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to add the app to your iPhone home-screen</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<h5 class="mt-4">Step 1: Open https://allthebookmarks.com in Safari.</h5>
|
||||
<span class="text-muted">(this is required; Chrome doesn’t support adding shortcuts on iOS)</span>
|
||||
<h5>Step 2: Tap the Share icon (square with an upward arrow).</h5>
|
||||
<p class="card-text">
|
||||
Next, Scroll down and select "Add to Home Screen" then tap "Add".
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/iphone/add.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
The shortcut will appear on your home screen.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/iphone/added.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
28
app/plugins/bookmarks/views/tutorials/mobileCard.html
Normal file
28
app/plugins/bookmarks/views/tutorials/mobileCard.html
Normal file
@ -0,0 +1,28 @@
|
||||
<section class="container my-5">
|
||||
<h1 class="text-center mb-4">{pretty} Tutorials</h1>
|
||||
<div class="row g-4">
|
||||
<!-- Opera Section -->
|
||||
<div class="col-md-8 offset-2">
|
||||
{tutorialCrumbs}
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fa-solid fa-mobile fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title text-center">{pretty}</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush rounded">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/mobile/iphone" class="text-decoration-none atb-green">
|
||||
How to add the app to your iPhone home-screen.
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/mobile/android" class="text-decoration-none atb-green">
|
||||
How to add the app to your Android home-screen.
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user