wip

app/classes/preferences.php

@@ -200,13 +200,13 @@ class Preferences {
         foreach ( self::$preferences as $name => $details ) {
             $tempPrefsArray = $this->normalizePreferenceArray( $name, $details );
             if ( isset( $populated[ $name ] ) ) {
-                $tempPrefsArray['default'] = $populated[$name];
+                $tempPrefsArray['value'] = $populated[$name];
             }
             // $form .= Forms::getFormFieldHtml( $name, $tempPrefsArray['pretty'], $tempPrefsArray['type'], $tempPrefsArray['default'], $tempPrefsArray['options'] );
             if ( $tempPrefsArray['type'] == 'checkbox' ) {
                 $tempPrefsArray['type'] = 'switch';
             }
-            $inputTypes[ $tempPrefsArray['type'] ][] = self::getFormFieldHtml( $name, $tempPrefsArray['pretty'], $tempPrefsArray['type'], $tempPrefsArray['default'], $tempPrefsArray['options'] );
+            $inputTypes[ $tempPrefsArray['type'] ][] = self::getFormFieldHtml( $name, $tempPrefsArray['pretty'], $tempPrefsArray['type'], $tempPrefsArray['value'], $tempPrefsArray['options'] );
         }
         foreach ( $inputTypes as $skip => $items ) {
             $form .= implode( ' ', $items );

app/controllers/home.php

@@ -27,13 +27,13 @@ use TheTempusProject\TheTempusProject as App;
 class Home extends Controller {
     public function index() {
         self::$title = '{SITENAME}';
-        self::$pageDescription = 'This is the homepage of your new Tempus Project Installation. Thank you for installing. find more info at https://thetempusproject.com';
+        self::$pageDescription = 'AllTheBookmarks.com is here to provide you a better, faster, and easier way - to manage bookmarks across multiple browser and multiple devices seamlessly.';
         Views::view( 'index' );
     }
 
     public function login() {
         self::$title = 'Portal - {SITENAME}';
-        self::$pageDescription = 'Please log in to use {SITENAME} member features.';
+        self::$pageDescription = 'Please log in to access all of the great features {SITENAME} has to offer.';
         if ( App::$isLoggedIn ) {
             return Issues::add( 'notice', 'You are already logged in. Please <a href="' . Routes::getAddress() . 'home/logout">click here</a> to log out.' );
         }
@@ -69,7 +69,7 @@ class Home extends Controller {
 
     public function profile( $id = null ) {
         self::$title = 'User Profile - {SITENAME}';
-        self::$pageDescription = 'User Profiles for {SITENAME}';
+        self::$pageDescription = 'User Profile - {SITENAME}';
         if ( !App::$isLoggedIn ) {
             return Issues::add( 'notice', 'You must be logged in to view this page.' );
         }
@@ -91,26 +91,26 @@ class Home extends Controller {
 
     public function about() {
         self::$title = 'About - {SITENAME}';
-        self::$pageDescription = '{SITENAME} Terms and Conditions of use. Please use {SITENAME} safely.';
+        self::$pageDescription = '{SITENAME} was started by a developer with years of industry experience which has lead to a refined no-nonsense tool for everyone. Find out more about us here.';
         Views::view( 'about' );
     }
 
     public function contact() {
         self::$title = 'Contact Us - {SITENAME}';
-        self::$pageDescription = '{SITENAME} Terms and Conditions of use. Please use {SITENAME} safely.';
+        self::$pageDescription = 'On this page, you\'ll be able to reach out to the team directly with any questions, comments, or concerns you may have.';
         Views::view( 'contact' );
     }
 
     public function privacy() {
         self::$title = 'Privacy Policy - {SITENAME}';
-        self::$pageDescription = '{SITENAME} Terms and Conditions of use. Please use {SITENAME} safely.';
+        self::$pageDescription = 'At {SITENAME} you privacy is very important to us. On this page you can find a detailed outline of all the information we collect and how its used.';
         Components::set( 'PRIVACY', Views::simpleView( 'privacy' ) );
         Views::raw( '<div class="col-lg-8 mx-auto">{PRIVACY}</div>' );
     }
 
     public function faq() {
         self::$title = 'Frequently Asked Questions - {SITENAME}';
-        self::$pageDescription = '{SITENAME} Terms and Conditions of use. Please use {SITENAME} safely.';
+        self::$pageDescription = 'Many times, we aren\'t the first to ask why or how something works. Here you will find a list of {SITENAME} commonly asked questions and our best answers.' ;
         Views::view( 'faq' );
     }
 }

app/controllers/register.php

@@ -27,6 +27,7 @@ use TheTempusProject\Classes\Forms;
 
 class Register extends Controller {
     public function confirm( $code = null ) {
+        Template::noIndex();
         self::$title = 'Confirm Email';
         if ( !isset( $code ) && !Input::exists( 'confirmationCode' ) ) {
             return Views::view( 'confirmation' );
@@ -43,8 +44,8 @@ class Register extends Controller {
     }
 
     public function index() {
-        self::$title = 'Register';
+        self::$title = '{SITENAME} Sign Up';
-        self::$pageDescription = 'Many features of the site are disabled or even hidden from unregistered users. On this page you can sign up for an account to access all the app has to offer.';
+        self::$pageDescription = 'Many features of {SITENAME} are disabled or hidden from unregistered users. On this page you can sign up for an account to access all the app has to offer.';
         Components::set( 'TERMS', Views::simpleView( 'terms' ) );
         if ( App::$isLoggedIn ) {
             return Issues::add( 'notice', 'You are currently logged in.' );
@@ -94,6 +95,7 @@ class Register extends Controller {
 
     public function resend() {
         self::$title = 'Resend Confirmation';
+        Template::noIndex();
         if ( !App::$isLoggedIn ) {
             return Issues::add( 'notice', 'Please log in to resend your confirmation email.' );
         }
@@ -110,6 +112,7 @@ class Register extends Controller {
 
     public function reset( $code = null ) {
         self::$title = 'Password Reset';
+        Template::noIndex();
         if ( !isset( $code ) && !Input::exists( 'resetCode' ) ) {
             Issues::add( 'info', 'Please provide a reset code.' );
             return Views::view( 'password_reset_code' );

app/controllers/usercp.php

@@ -98,7 +98,6 @@ class Usercp extends Controller {
         $fields = App::$activePrefs;
         if ( Input::exists( 'submit' ) ) {
             $fields = $prefs->convertFormToArray( true, false );
-            // dv( $fields );
             // @TODO  now i may need to rework the form checker to work with this....
             // if (!Forms::check('userPrefs')) {
             //     Issues::add( 'error', [ 'There was an error with your request.' => Check::userErrors() ] );

app/css/main-dark.css

@@ -140,3 +140,11 @@ body {
     background-color: #1f1f1f;
     color: #e0e0e0;
 }
+.form-control:focus {
+    color: #e0e0e0;
+    /* border-color: #85bd3e; */
+    border-color: #1b947f;
+    background-color: #1f1f1f;
+    /* box-shadow: 0 0 0 .25rem #1b947f; */
+    box-shadow: 0 0 0 .25rem #85bd3e;
+}

app/css/main.css

@@ -8,12 +8,10 @@
  * @link    https://TheTempusProject.com
  * @license https://opensource.org/licenses/MIT [MIT LICENSE]
  */
-
 .context-other-bg {
     background-color: #eaeaea;
 }
 
-
 .context-main-bg {
     background-color: #f7f7f7;
 }
@@ -70,14 +68,6 @@
     transform: translateX(25px); /* Adjust based on switch width */
 }
 
-
-
-
-
-
-
-
-
 .context-main {
     color: #000;
 }
@@ -92,8 +82,10 @@ html {
 pre {
     white-space: pre-wrap;
 }
+
 body {
-    background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
+    background-color: #e4e4e4;
+    /* background-image: linear-gradient(180deg, #eee, #fff 100px, #fff); */
 }
 @media ( min-width: 768px ) {
     .main {
@@ -370,3 +362,16 @@ button.atb-green-bg:hover {
     opacity: 0.7;
     cursor: move; /* Show a move cursor when dragging */
   }
+
+
+.form-switch .form-check-input {
+    border-color: #1b947f;
+}
+.form-switch .form-check-input:checked {
+    border-color: #1b947f;
+    background-color: #85bd3e;
+}
+.form-switch .form-check-input:focus {
+    border-color: #1b947f;
+    box-shadow: #85bd3e;
+}

app/plugins/blog/models/posts.php

@@ -131,34 +131,34 @@ class Posts extends DatabaseModel {
             }
             $draft = '';
             $authorName = self::$user->getUsername( $instance->author );
+
             $cleanPost = Sanitize::contentShort( $instance->content );
-            $postSpace = explode( ' ', $cleanPost );
+            $wordsArray = explode( ' ', $cleanPost );
             $postLine = explode( "\n", $cleanPost );
-            // summary by words: 100
+            $spaceSummary = implode( ' ', array_splice( $wordsArray, 0, 100 ) );
-            $spaceSummary = implode( ' ', array_splice( $postSpace, 0, 100 ) );
-            // summary by lines: 5
             $lineSummary = implode( "\n", array_splice( $postLine, 0, 5 ) );
             if ( strlen( $spaceSummary ) < strlen( $lineSummary ) ) {
+                $contentSummaryNoLink = $spaceSummary;
                 $contentSummary = $spaceSummary;
-                if ( count( $postSpace, 1 ) <= 100 ) {
+                if ( count( $wordsArray, 1 ) >= 100 ) {
                     $contentSummaryNoLink = $contentSummary;
                     $contentSummary .= '... <a href="{ROOT_URL}blog/post/' . $instance->ID . '">Read More</a>';
                 }
             } else {
-                // @todo: need to refine this after testing
                 $contentSummaryNoLink = $lineSummary;
                 $contentSummary = $lineSummary . '... <a href="{ROOT_URL}blog/post/' . $instance->ID . '">Read More</a>';
             }
+            $instance->contentSummaryNoLink = $contentSummaryNoLink;
+            $instance->contentSummary = $contentSummary;
+
+            if ( isset( $params['stripHtml'] ) && $params['stripHtml'] === true ) {
+                $instance->contentSummary = strip_tags( $instance->content );
+            }
             if ( $instance->draft != '0' ) {
                 $draft = ' <b>Draft</b>';
             }
             $instance->isDraft = $draft;
             $instance->authorName = $authorName;
-            $instance->contentSummaryNoLink = $contentSummaryNoLink;
-            $instance->contentSummary = $contentSummary;
-            if ( isset( $params['stripHtml'] ) && $params['stripHtml'] === true ) {
-                $instance->contentSummary = strip_tags( $instance->content );
-            }
             if ( self::$comments !== false ) {
                 $instance->commentCount = self::$comments->count( 'blog', $instance->ID );
             }

app/plugins/bookmarks/controllers/bookmarks.php

@@ -70,6 +70,22 @@ class Bookmarks extends Controller {
         $this->setPrefToggles();
     }
 
+    public function tutorials( $browser = '', $tutorial = '' ) {
+        self::$title = 'Tutorials - {SITENAME}';
+        if ( empty( $browser ) && empty( $tutorial ) ) {
+            return Views::view( 'bookmarks.tutorials.list' );
+        }
+        if ( ! in_array( $browser, ['chrome','brave','firefox','edge','safari','opera'] ) ) {
+            Issues::add( 'error', 'Unknown browser' );
+            return Views::view( 'bookmarks.tutorials.list' );
+        }
+        if ( ! in_array( $tutorial, ['pin','settings','import','export'] ) ) {
+            Issues::add( 'error', 'Unknown tutorial' );
+            return Views::view( 'bookmarks.tutorials.list' );
+        }
+        return Views::view( 'bookmarks.tutorials.' . $browser . '.' . $tutorial );
+    }
+
     public function index() {
         self::$title = 'Manage Bookmarks - {SITENAME}';
         if ( Input::exists('submit') ) {
@@ -95,9 +111,12 @@ class Bookmarks extends Controller {
                 $panelArray[] = $folderObject;
             }
         }
+        if ( ! empty( $folders ) ) {
             Components::set( 'folderPanels', Views::simpleView( 'bookmarks.components.bookmarkListPanel', $panelArray ) );
             return Views::view( 'bookmarks.dash' );
         }
+        return Views::view( 'bookmarks.indexExplainer' );
+    }
 
     /**
      * Bookmarks
@@ -564,9 +583,10 @@ class Bookmarks extends Controller {
 
     public function dashboards() {
         self::$title = 'Bookmark Dashboards - {SITENAME}';
+        
         if ( !App::$isMember ) {
-            Issues::add( 'notice', 'You must have an active membership to manage dashboards.' );
+            Issues::add( 'notice', 'You will need an active subscription to start creating dashboards. You can check our <a href="/member/join">Pricing</a> page for more details.' );
-            return $this->index();
+            return Views::view( 'bookmarks.dashboardExplainer' );
         }
         $dashboards = self::$dashboards->byUser();
         return Views::view( 'bookmarks.dashboards.list', $dashboards );
@@ -687,8 +707,8 @@ class Bookmarks extends Controller {
     public function import() {
         self::$title = 'Bookmark Import - {SITENAME}';
         if ( !App::$isMember ) {
-            Issues::add( 'notice', 'You must have an active membership to import bookmarks.' );
+            Issues::add( 'notice', 'You will need an active subscription to start importing bookmarks. You can check our <a href="/member/join">Pricing</a> page for more details.' );
-            return $this->index();
+            return Views::view( 'bookmarks.importExplainer' );
         }
 
         if ( ! Input::exists('submit') ) {
@@ -739,8 +759,8 @@ class Bookmarks extends Controller {
     public function export() {
         self::$title = 'Bookmark Export - {SITENAME}';
         if ( !App::$isMember ) {
-            Issues::add( 'notice', 'You must have an active membership to export bookmarks.' );
+            Issues::add( 'notice', 'You will need an active subscription to start exporting bookmarks. You can check our <a href="/member/join">Pricing</a> page for more details.' );
-            return $this->index();
+            return Views::view( 'bookmarks.exportExplainer' );
         }
 
         $folders = self::$folders->byUser();
@@ -806,7 +826,7 @@ class Bookmarks extends Controller {
         $panelArray = [];
         $folders = self::$folders->byUser();
         if ( empty( $folders ) ) {
-            return Views::view( 'bookmarks.share' );
+            return Views::view( 'bookmarks.shareExplainer' );
         }
         foreach ( $folders as $key => $folder ) {
             $panel = new \stdClass();
@@ -924,6 +944,7 @@ class Bookmarks extends Controller {
             }
             $options = $assocOptions;
         }
+        if ( ! empty( $options ) ) {
             foreach ( $options as $fieldname => $value ) {
                 if ( $folderID == $value ) {
                     $selected = ' selected';
@@ -932,6 +953,9 @@ class Bookmarks extends Controller {
                 }
                 $out .= '<option value="' . $value . '"' . $selected . '>' . $fieldname . '</option>';
             }
+        } else {
+            $out .= '<option value="0" selected>No Folder</option>';
+        }
         $out .= '</select>';
         $out .= '</div>';
         $out .= '</div>';

app/plugins/bookmarks/plugin.php

@@ -18,6 +18,7 @@ use TheTempusProject\Models\Bookmarks as Bookmark;
 use TheTempusProject\Models\Folders;
 use TheTempusProject\Houdini\Classes\Components;
 use TheTempusProject\Houdini\Classes\Template;
+use TheTempusProject\TheTempusProject as App;
 
 class Bookmarks extends Plugin {
     public $pluginName = 'TP Bookmarks';
@@ -43,11 +44,22 @@ class Bookmarks extends Plugin {
             'url' => '{ROOT_URL}bookmarks/index',
             'filter' => 'loggedin',
         ],
+        [
+            'text' => 'Tutorials',
+            'url' => '{ROOT_URL}bookmarks/tutorials',
+            'filter' => 'bkmtuts',
+        ],
         [
             'text' => 'Extensions',
             'url' => '{ROOT_URL}extensions/index',
         ],
     ];
+    public $info_footer_links = [
+        [
+            'text' => 'Tutorials',
+            'url' => '{ROOT_URL}bookmarks/tutorials',
+        ],
+    ];
     public $configMatrix = [
         'enabled' => [
             'type' => 'radio',
@@ -96,9 +108,12 @@ class Bookmarks extends Plugin {
             'type' => 'checkbox',
             'default' => 'true',
         ],
+        'bookmarkTutorials' => [
+            'pretty' => 'Show tutorials for the bookmark feature',
+            'type' => 'checkbox',
+            'default' => 'true',
+        ],
     ];
-
-
     public $resourceMatrix = [
         'routes' => [
             [
@@ -134,17 +149,32 @@ class Bookmarks extends Plugin {
         ]
     ];
 
-
-
-
-
-
     public $bookmarks;
     public $folders;
+    protected static $loaded = false;
     
     public function __construct( $load = false ) {
         $this->bookmarks = new Bookmark;
         $this->folders = new Folders;
+
+        if ( ! self::$loaded && $load ) {
+            $tutpref = true;
+            if ( App::$isLoggedIn ) {
+                if ( empty( App::$activeUser->prefs['bookmarkTutorials'] ) ) {
+                    $tutpref = false;
+                }
+            }
+            $this->filters[] = [
+                'name' => 'bkmtuts',
+                'find' => '#{BKMTUTS}(.*?){/BKMTUTS}#is',
+                'replace' => ( $tutpref ? '$1' : '' ),
+                'enabled' => true,
+            ];
+        }
+
         parent::__construct( $load );
+        if ( ! self::$loaded && $load ) {
+            self::$loaded = true;
+        }
     }
 }

app/plugins/bookmarks/views/bookmarks/unsorted.html

@@ -2,6 +2,13 @@
     <div class="offset-md-2 col-8 mr-2 py-3 context-main-bg p-3">
         <legend class="text-center">Unsorted Bookmarks</legend>
         <hr>
+        {BKMTUTS}
+        <p class="px-2">
+            When you add bookmarks without a folder, they will be considered "Unsorted". There is nothing wrong with these bookmarks, 
+            but much of the application relies on folder for organizing and displaying bookmarks. You may find that these bookmarks do not regularly appear in other sections of the application.
+        </p>
+        <hr>
+        {/BKMTUTS}
         <table class="table table-striped context-main1">
             <thead>
                 <tr>

app/plugins/bookmarks/views/dash.html

@@ -1,7 +1,18 @@
 <div class="mb-4 mt-4">
     <div class="offset-md-1 col-10 py-3 context-main-bg">
-        <legend class="text-center">MAnage</legend>
+        <legend class="text-center">Manage Bookmarks</legend>
         <hr>
+        {BKMTUTS}
+        <p class="px-4">
+            Dashboards are one of our most powerful and useful features of AllTheBookmarks. With dashboards, you're able to create, edit, share, and use pages built dynamically from your bookmark folders.
+            When you create a dashboard, you select any number of your organized folders, select a few display options, and you gain access to a new page just for those folders.
+        </p>
+        <p class="px-4">
+            Sometimes, there just isn't enough room on the toolbar. Instead of having 6 folders you always use, have 1, short link called "Games" that opens 1 page. I use this to group small sections of 
+            my bookmarks together like games. I have PalWorld, WoW, Satisfactory, and Diablo links in a "Games" dashboard. I can just quickly go to that dash, find the folder I need and go.
+        </p>
+        <hr>
+        {/BKMTUTS}
         {VIEW_OPTIONS}
         <hr>
         <div class="row g-3" data-masonry='{ "percentPosition": false }' id="bookmarkSort">

app/plugins/bookmarks/views/dashboardExplainer.html

@@ -0,0 +1,14 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Bookmark Dashboards</legend>
+        <hr>
+        <p class="px-2">
+            Dashboards are one of our most powerful and useful features of AllTheBookmarks. With dashboards, you're able to create, edit, share, and use pages built dynamically from your bookmark folders.
+            When you create a dashboard, you select any number of your organized folders, select a few display options, and you gain access to a new page just for those folders.
+        </p>
+        <p class="px-2">
+            Sometimes, there just isn't enough room on the toolbar. Instead of having 6 folders you always use, have 1, short link called "Games" that opens 1 page. I use this to group small sections of 
+            my bookmarks together like games. I have PalWorld, WoW, Satisfactory, and Diablo links in a "Games" dashboard. I can just quickly go to that dash, find the folder I need and go.
+        </p>
+    </div>
+</div>

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

@@ -2,10 +2,17 @@
     <div class="offset-2 col-8 p-3 context-main-bg">
         <legend class="text-center">Dashboards</legend>
         <hr>
-        <div class="offset-3 col-lg-6 my-4">
+        {BKMTUTS}
-            <p>From here you can easily create, update, or remove any bookmark dashboards you have created.</p>
+        <p class="px-2">
-            <p>Dashboards are a feature that allow you to build customized bookmark pages that you can easily save and open la</p>
+            Dashboards are one of our most powerful and useful features of AllTheBookmarks. With dashboards, you're able to create, edit, share, and use pages built dynamically from your bookmark folders.
-        </div>
+            When you create a dashboard, you select any number of your organized folders, select a few display options, and you gain access to a new page just for those folders.
+        </p>
+        <p class="px-2">
+            Sometimes, there just isn't enough room on the toolbar. Instead of having 6 folders you always use, have 1, short link called "Games" that opens 1 page. I use this to group small sections of 
+            my bookmarks together like games. I have PalWorld, WoW, Satisfactory, and Diablo links in a "Games" dashboard. I can just quickly go to that dash, find the folder I need and go.
+        </p>
+        <hr>
+        {/BKMTUTS}
         <div class="row g-3 text-center p-2">
             <table class="table context-main">
                 <thead>

app/plugins/bookmarks/views/export.html

@@ -2,6 +2,20 @@
     <div class="offset-2 col-8 p-3 context-main-bg">
         <legend class="text-center">Bookmark Export</legend>
         <hr>
+        {BKMTUTS}
+        <p class="px-2">
+            Our export tool allows you to select bookmarks and folders from your AllTheBookmarks account and generate a file that you can then import into any browser. 
+            Giving you access to all your bookmarks right inside your browser.
+        </p>
+        <p class="px-2">
+            You can simply select the folders you want to bring into your browser on this page and click generate. A notification will pop-up showing you where you can 
+            find your file for download. You take that newly saved file an import it into your browser of choice.
+        </p>
+        <p class="px-2">
+            If you need help importing your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+        <hr>
+        {/BKMTUTS}
         <h3 class="text-center">Select which folders to include in the export</h3>
         <form action="" method="post">
             <div class="row g-3 col-4 offset-4">

app/plugins/bookmarks/views/exportExplainer.html

@@ -0,0 +1,17 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Bookmark Export</legend>
+        <hr>
+        <p class="px-2">
+            Our export tool allows you to select bookmarks and folders from your AllTheBookmarks account and generate a file that you can then import into any browser. 
+            Giving you access to all your bookmarks right inside your browser.
+        </p>
+        <p class="px-2">
+            You can simply select the folders you want to bring into your browser on this page and click generate. A notification will pop-up showing you where you can 
+            find your file for download. You take that newly saved file an import it into your browser of choice.
+        </p>
+        <p class="px-2">
+            If you need help importing your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+    </div>
+</div>

app/plugins/bookmarks/views/folders/listPage.html

@@ -1,5 +1,11 @@
 <div class="offset-2 col-8 p-3 context-main-bg my-4">
     <legend class="text-center">Folders List</legend>
     <hr>
+    {BKMTUTS}
+    <p class="ps-2">
+        Just like the folders you have in your web browser, you can add, edit, or remove folders for organizing your bookmarks here.
+    </p>
+    <hr>
+    {/BKMTUTS}
     {foldersList}
 </div>

app/plugins/bookmarks/views/import.html

@@ -1,7 +1,20 @@
 <div class="my-4">
     <div class="offset-2 col-8 p-3 context-main-bg">
-        <legend class="text-center">Import Bookmarks</legend>
+        <legend class="text-center">Bookmark Import</legend>
         <hr>
+        {BKMTUTS}
+        <p class="ps-2">
+            Our import tool allows you to upload a file from you browser (Chrome, Firefox, etc) that will add all of your bookmarks and folders to your allthebookmarks.com dashboard.
+        </p>
+        <p class="ps-2">
+            The tool has been tested with all major browsers except safari. This includes Firefox, Chrome, Opera, Brave, and Edge. 
+            You will need to browse your computer and select the <strong>.html</strong> file where you exported your bookmarks from your browser.
+        </p>
+        <p class="ps-2">
+            If you need help exporting your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+        <hr>
+        {/BKMTUTS}
         <form method="post" enctype="multipart/form-data">
             <div class="offset-3 col-lg-6 my-4 text-center">
                 <label for="bookmark_file" class="col-lg-3 control-label">Import file (.html):</label>

app/plugins/bookmarks/views/importExplainer.html

@@ -0,0 +1,16 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Bookmark Import</legend>
+        <hr>
+        <p class="ps-2">
+            Our import tool allows you to upload a file from you browser (Chrome, Firefox, etc) that will add all of your bookmarks and folders to your allthebookmarks.com dashboard.
+        </p>
+        <p class="ps-2">
+            The tool has been tested with all major browsers except safari. This includes Firefox, Chrome, Opera, Brave, and Edge. 
+            You will need to browse your computer and select the <strong>.html</strong> file where you exported your bookmarks from your browser.
+        </p>
+        <p class="ps-2">
+            If you need help exporting your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+    </div>
+</div>

app/plugins/bookmarks/views/indexExplainer.html

@@ -0,0 +1,19 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Manage Bookmarks</legend>
+        <hr>
+        <p class="ps-2">
+            This is one of the main pages you'll be using to manage your bookmarks. Here you will find a list of all of your folders and the bookmarks they contain. 
+            Hidden, archived, private, and public bookmarks can all be reviewed on this page using the filter options below. Some controls may be hidden by default, 
+            so you're encouraged to toggle them to better understand your options for managing your bookmarks.
+        </p>
+        <p class="ps-2">
+            Once you start collecting hundreds and thousands of bookmarks, this page can get a bit overwhelming. We encourage you to check out our <a href="/bookmarks/dashboards" class="text-decoration-none atb-green">Dashboards</a> feature 
+            for a more robust way to interact with all your saved bookmarks. Make use of the ability to hide and archive bookmarks to keep organized as well.
+        </p>
+        <div class="text-center mt-4 pb-4">
+            <a href="/bookmarks/createBookmark" class="btn btn-outline-secondary btn-lg px-5 ms-3 atb-green-bg">Add Bookmarks</a>
+            <a href="/bookmarks/createFolder" class="btn btn-outline-secondary btn-lg px-5 ms-3 atb-green-bg">Add Folders</a>
+        </div>
+    </div>
+</div>

app/plugins/bookmarks/views/introduction.html

@@ -0,0 +1,60 @@
+<div class="container py-5">
+    <!-- Hero Section -->
+    <div class="text-center mb-5">
+      <h1 class="display-4">Welcome to <span class="text-primary">All The Bookmarks</span></h1>
+      <p class="lead">Your ultimate tool for organizing, sharing, and managing website bookmarks effortlessly.</p>
+      <img src="path/to/hero-image.jpg" alt="Illustration of bookmark organization" class="img-fluid my-4">
+      <a href="#" class="btn btn-primary btn-lg">Get Started</a>
+    </div>
+  
+    <!-- Features Section -->
+    <div class="row text-center mb-5">
+      <div class="col-md-4">
+        <i class="fas fa-folder fa-3x text-primary mb-3"></i>
+        <h5>Organize Your Bookmarks</h5>
+        <p>Create folders to keep your bookmarks tidy and easy to find.</p>
+      </div>
+      <div class="col-md-4">
+        <i class="fas fa-share-alt fa-3x text-primary mb-3"></i>
+        <h5>Share Collections</h5>
+        <p>Share dashboards with groups of folders to collaborate seamlessly.</p>
+      </div>
+      <div class="col-md-4">
+        <i class="fas fa-sync-alt fa-3x text-primary mb-3"></i>
+        <h5>Import & Export</h5>
+        <p>Sync your bookmarks across major browsers with our easy import/export tools.</p>
+      </div>
+    </div>
+  
+    <!-- Browser Extensions Section -->
+    <div class="row align-items-center mb-5">
+      <div class="col-md-6">
+        <h3>Bookmark Anytime, Anywhere</h3>
+        <p>Our browser extension works with Chrome, Firefox, Brave, Edge, and Opera, making it simple to save and manage bookmarks directly from your browser.</p>
+        <a href="#" class="btn btn-outline-primary">Install Extension</a>
+      </div>
+      <div class="col-md-6 text-center">
+        <img src="path/to/extension-image.jpg" alt="Illustration of browser extensions" class="img-fluid">
+      </div>
+    </div>
+  
+    <!-- Dashboards Section -->
+    <div class="row align-items-center mb-5">
+      <div class="col-md-6 text-center">
+        <img src="path/to/dashboard-image.jpg" alt="Illustration of dashboards" class="img-fluid">
+      </div>
+      <div class="col-md-6">
+        <h3>Dynamic Dashboards</h3>
+        <p>Group folders into dashboards and share them to keep everyone updated on the latest changes.</p>
+        <a href="#" class="btn btn-outline-primary">Learn More About Dashboards</a>
+      </div>
+    </div>
+  
+    <!-- Call to Action -->
+    <div class="text-center">
+      <h4>Ready to Get Started?</h4>
+      <p>Start organizing, sharing, and syncing your bookmarks today!</p>
+      <a href="#" class="btn btn-success btn-lg">Create Your First Folder</a>
+    </div>
+  </div>
+  

app/plugins/bookmarks/views/share.html

@@ -2,9 +2,17 @@
     <div class="offset-md-1 col-10 py-3 context-main-bg">
         <legend class="text-center">Share</legend>
         <hr>
+        {BKMTUTS}
         <div class="offset-3 col-lg-6 my-4">
-            <p>Any link or folder can be shared. By default, the extensions and app both default to <strong>private</strong>. On this page, you can quickly see a list of any public links and folders. These "public" items can be shared with anyone who has the link.</p>
+            <p class="px-2">
+                This is the share page, designed to very quickly show you what folders and urls you have set to public and have the ability to share with anyone.
+            </p>
+            <p class="px-2">
+                Any link or folder can be shared and by default, the extensions and app default to <strong>private</strong>. These "public" items can be viewed by anyone with the link provided from this page.
+            </p>
+            <hr>
         </div>
+        {/BKMTUTS}
         <div class="row g-3"  data-masonry='{ "percentPosition": false }' id="bookmarkSort">
             {LOOP}
                 {panel}

app/plugins/bookmarks/views/shareExplainer.html

@@ -0,0 +1,12 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Share</legend>
+        <hr>
+        <p class="px-2">
+            This is the share page, designed to very quickly show you what folders and urls you have set to public and have the ability to share with anyone.
+        </p>
+        <p class="px-2">
+            Any link or folder can be shared and by default, the extensions and app default to <strong>private</strong>. These "public" items can be viewed by anyone with the link provided from this page.
+        </p>
+    </div>
+</div>

app/plugins/bookmarks/views/tutorials/brave/export.html

@@ -0,0 +1,42 @@
+<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 Export bookmarks from Brave</h2>
+            <hr>
+            <p class="card-text">
+                Exporting your bookmarks is lightning fast and simple inside of brave.
+            </p>
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three lines on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <h5>Step 2: Open the Export Menu</h5>
+            <p class="card-text">
+                On this page, in the top right, you should see another set of three dots, click these.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                From this list, select <strong>Export Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/brave/import.html

@@ -0,0 +1,44 @@
+<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 Import bookmarks in Brave</h2>
+            <hr>
+            <p class="card-text">
+                Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of brave.
+            </p>
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three lines on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <h5>Step 2: Open the Import Menu</h5>
+
+            <p class="card-text">
+                On this page, in the top right, you should see another set of three dots, click these.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                From this list, select <strong>Import Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/brave/pin.html

@@ -0,0 +1,35 @@
+<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 pin the extension to your toolbar in Brave</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Brave extension, you can find it in the 
+                <a href="/brave" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
+            </div>
+            <p class="card-text">
+                Once installed, you can add the extension to your brave toolbar with just a few easy steps.
+            </p>
+            <h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
+            <p class="card-text">
+                It should look like this:
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
+            <p class="card-text">
+                Next to AllTheBookmarks, on the right you should see a pin icon, click this.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                Once pinned, you should see the AllTheBookmarks icon on the toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/brave/settings.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 Access Extension Settings in Brave</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Brave extension, you can find it in the 
+                <a href="/brave" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
+            </div>
+            <p class="card-text">
+                With Brave, accessing the extension settings couldn't be easier.
+            </p>
+            <h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
+            <p class="card-text">
+                Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Options</h5>
+            <p class="card-text">
+                From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                (If you need help pinning the extension to your toolbar for easy access, we have a separate 
+                <a href="/bookmarks/tutorials/brave/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/chrome/export.html

@@ -0,0 +1,42 @@
+<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 Export bookmarks from Chrome</h2>
+            <hr>
+            <p class="card-text">
+                Exporting your bookmarks is lightning fast and simple inside of chrome.
+            </p>
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three dots on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <h5>Step 2: Open the Export Menu</h5>
+            <p class="card-text">
+                On this page, in the top right, you should see another set of three dots, click these.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                From this list, select <strong>Export Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/chrome/import.html

@@ -0,0 +1,44 @@
+<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 Import bookmarks in Chrome</h2>
+            <hr>
+            <p class="card-text">
+                Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of chrome.
+            </p>
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three dots on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <h5>Step 2: Open the Import Menu</h5>
+
+            <p class="card-text">
+                On this page, in the top right, you should see another set of three dots, click these.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                From this list, select <strong>Import Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/chrome/pin.html

@@ -0,0 +1,35 @@
+<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 pin the extension to your toolbar in Chrome</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Chrome extension, you can find it in the 
+                <a href="/chrome" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
+            </div>
+            <p class="card-text">
+                Once installed, you can add the extension to your chrome toolbar with just a few easy steps.
+            </p>
+            <h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
+            <p class="card-text">
+                It should look like this:
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
+            <p class="card-text">
+                Next to AllTheBookmarks, on the right you should see a pin icon, click this.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                Once pinned, you should see the AllTheBookmarks icon on the toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/chrome/settings.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 Access Extension Settings in Chrome</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Chrome extension, you can find it in the 
+                <a href="/chrome" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
+            </div>
+            <p class="card-text">
+                With Chrome, accessing the extension settings couldn't be easier.
+            </p>
+            <h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
+            <p class="card-text">
+                Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Options</h5>
+            <p class="card-text">
+                From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                (If you need help pinning the extension to your toolbar for easy access, we have a separate 
+                <a href="/bookmarks/tutorials/chrome/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/firefox/export.html

@@ -0,0 +1,54 @@
+<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 Export bookmarks in Firefox</h2>
+            <hr>
+            <p class="card-text">
+                Exporting your bookmarks is lightning fast and simple inside of firefox.
+            </p>
+
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three lines on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Open the Bookmark Menu</h5>
+            <p class="card-text">
+                In the list, select <strong>Bookmarks</strong> and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, select <strong>Manage Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/manage-bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Import Menu</h5>
+            <p class="card-text">
+                On this page, near the top left, you should see a button that says <strong>Import and Backup</strong>. Click this button and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/import-export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                From this list, select <strong>Export Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/firefox/import.html

@@ -0,0 +1,54 @@
+<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 Import bookmarks in Firefox</h2>
+            <hr>
+            <p class="card-text">
+                Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of firefox.
+            </p>
+
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three lines on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Open the Bookmark Menu</h5>
+            <p class="card-text">
+                In the list, select <strong>Bookmarks</strong> and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, select <strong>Manage Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/manage-bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Import Menu</h5>
+            <p class="card-text">
+                On this page, near the top left, you should see a button that says <strong>Import and Backup</strong>. Click this button and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/import-export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                From this list, select <strong>Import Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>