Add mobile tutorials

app/plugins/bookmarks/controllers/tutorials.php

@@ -100,4 +100,15 @@ class Tutorials extends Controller {
         }
         return Views::view( 'bookmarks.tutorials.safari.' . $tutorial );
     }
+    
+    public function mobile( $tutorial = '' ) {
+        Navigation::setCrumbComponent( 'tutorialCrumbs', Input::get( 'url' ) );
+        if ( ! in_array( $tutorial, ['iphone','android'] ) ) {
+            $test = new \stdClass();
+            $test->pretty = 'Mobile';
+            $test->printed = 'mobile';
+            return Views::view( 'bookmarks.tutorials.mobileCard', [ $test ] );
+        }
+        return Views::view( 'bookmarks.tutorials.mobile.' . $tutorial );
+    }
 }

app/plugins/bookmarks/views/tutorials/list.html

@@ -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 -->

app/plugins/bookmarks/views/tutorials/mobile/android.html

@@ -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>

app/plugins/bookmarks/views/tutorials/mobile/iphone.html

@@ -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>

app/plugins/bookmarks/views/tutorials/mobileCard.html

@@ -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>