the-tempus-project/thetempusproject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Joey Kimsey
2024-12-24 22:15:01 -05:00
parent f8e75e847d
commit 900ca8a691
110 changed files with 1065 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/plugins/bookmarks/views/bookmarks/unsorted.html
View File

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

13
app/plugins/bookmarks/views/dash.html
View File

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

14
app/plugins/bookmarks/views/dashboardExplainer.html Normal file
View File

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

15
app/plugins/bookmarks/views/dashboards/list.html
View File

@ -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">
<p>From here you can easily create, update, or remove any bookmark dashboards you have created.</p>
<p>Dashboards are a feature that allow you to build customized bookmark pages that you can easily save and open la</p>
</div>
{BKMTUTS}
<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>
<hr>
{/BKMTUTS}
<div class="row g-3 text-center p-2">
<table class="table context-main">
<thead>

14
app/plugins/bookmarks/views/export.html
View File

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

17
app/plugins/bookmarks/views/exportExplainer.html Normal file
View File

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

6
app/plugins/bookmarks/views/folders/listPage.html
View File

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

15
app/plugins/bookmarks/views/import.html
View File

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

16
app/plugins/bookmarks/views/importExplainer.html Normal file
View File

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

19
app/plugins/bookmarks/views/indexExplainer.html Normal file
View File

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

60
app/plugins/bookmarks/views/introduction.html Normal file
View File

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

10
app/plugins/bookmarks/views/share.html
View File

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

12
app/plugins/bookmarks/views/shareExplainer.html Normal file
View File

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

0
app/plugins/bookmarks/views/shareLink.html
View File

42
app/plugins/bookmarks/views/tutorials/brave/export.html Normal file
View File

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

44
app/plugins/bookmarks/views/tutorials/brave/import.html Normal file
View File

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

35
app/plugins/bookmarks/views/tutorials/brave/pin.html Normal file
View File

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

33
app/plugins/bookmarks/views/tutorials/brave/settings.html Normal file
View 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 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>

42
app/plugins/bookmarks/views/tutorials/chrome/export.html Normal file
View File

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

44
app/plugins/bookmarks/views/tutorials/chrome/import.html Normal file
View File

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

35
app/plugins/bookmarks/views/tutorials/chrome/pin.html Normal file
View File

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

33
app/plugins/bookmarks/views/tutorials/chrome/settings.html Normal file
View 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 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>

54
app/plugins/bookmarks/views/tutorials/firefox/export.html Normal file
View File

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

54
app/plugins/bookmarks/views/tutorials/firefox/import.html Normal file
View File

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

35
app/plugins/bookmarks/views/tutorials/firefox/pin.html Normal file
View File

@ -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 Firefox</h2>
<hr>
<div class="alert alert-success w-100 text-center" role="alert">
If you have not already installed the AllTheBookmarks Firefox add-on, you can find it in the
<a href="/firefox" class="text-decoration-none text-primary" target="_blank">Firefox Store</a>.
</div>
<p class="card-text">
Once installed, you can add the extension to your firefox 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/firefox/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/firefox/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/firefox/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
</div>
</div>
</div>
</section>

33
app/plugins/bookmarks/views/tutorials/firefox/settings.html Normal file
View 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 Access Extension Settings in Firefox</h2>
<hr>
<div class="alert alert-success w-100 text-center" role="alert">
If you have not already installed the AllTheBookmarks Firefox add-on, you can find it in the
<a href="/firefox" class="text-decoration-none text-primary" target="_blank">Firefox Store</a>.
</div>
<p class="card-text">
With Firefox, 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/firefox/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/firefox/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/firefox/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
</p>
</div>
</div>
</section>

202
app/plugins/bookmarks/views/tutorials/list.html Normal file
View File

@ -0,0 +1,202 @@
<section class="container my-5">
<h1 class="text-center mb-4">Browser Tutorials</h1>
<div class="row g-4">
<!-- Opera Section -->
<div class="col-md-4">
<div class="card h-100 shadow-sm context-main-bg">
<div class="card-body text-center">
<i class="fab fa-opera fa-3x mb-3 atb-green"></i>
<h5 class="card-title text-center">Opera</h5>
<hr>
<ul class="list-group list-group-flush rounded">
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/opera/pin" class="text-decoration-none atb-green">
How to pin the extension to your toolbar
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/opera/settings" class="text-decoration-none atb-green">
How to Open the extension settings page
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/opera/import" class="text-decoration-none atb-green">
How to Import Bookmarks into the browser
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/opera/export" class="text-decoration-none atb-green">
How to export Bookmarks from the browser
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Firefox Section -->
<div class="col-md-4">
<div class="card h-100 shadow-sm context-main-bg">
<div class="card-body text-center">
<i class="fab fa-firefox fa-3x mb-3 atb-green"></i>
<h5 class="card-title">Firefox</h5>
<hr>
<ul class="list-group list-group-flush">
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/firefox/pin" class="text-decoration-none atb-green">
How to pin the extension to your toolbar
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/firefox/settings" class="text-decoration-none atb-green">
How to Open the extension settings page
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/firefox/import" class="text-decoration-none atb-green">
How to Import Bookmarks into the browser
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/firefox/export" class="text-decoration-none atb-green">
How to export Bookmarks from the browser
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Chrome Section -->
<div class="col-md-4">
<div class="card h-100 shadow-sm context-main-bg">
<div class="card-body text-center">
<i class="fab fa-chrome fa-3x mb-3 atb-green"></i>
<h5 class="card-title">Chrome</h5>
<hr>
<ul class="list-group list-group-flush">
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/chrome/pin" class="text-decoration-none atb-green">
How to pin the extension to your toolbar
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/chrome/settings" class="text-decoration-none atb-green">
How to Open the extension settings page
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/chrome/import" class="text-decoration-none atb-green">
How to Import Bookmarks into the browser
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/chrome/export" class="text-decoration-none atb-green">
How to export Bookmarks from the browser
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Brave Section -->
<div class="col-md-4">
<div class="card h-100 shadow-sm context-main-bg">
<div class="card-body text-center">
<i class="fab fa-brave fa-3x mb-3 atb-green"></i>
<h5 class="card-title">Brave</h5>
<hr>
<ul class="list-group list-group-flush">
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/brave/pin" class="text-decoration-none atb-green">
How to pin the extension to your toolbar
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/brave/settings" class="text-decoration-none atb-green">
How to Open the extension settings page
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/brave/import" class="text-decoration-none atb-green">
How to Import Bookmarks into the browser
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/brave/export" class="text-decoration-none atb-green">
How to export Bookmarks from the browser
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Edge Section -->
<div class="col-md-4">
<div class="card h-100 shadow-sm context-main-bg">
<div class="card-body text-center">
<i class="fab fa-edge fa-3x mb-3 atb-green"></i>
<h5 class="card-title">Edge</h5>
<hr>
<ul class="list-group list-group-flush">
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/edge/pin" class="text-decoration-none atb-green">
How to pin the extension to your toolbar
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/edge/settings" class="text-decoration-none atb-green">
How to Open the extension settings page
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/edge/import" class="text-decoration-none atb-green">
How to Import Bookmarks into the browser
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/edge/export" class="text-decoration-none atb-green">
How to export Bookmarks from the browser
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Safari Section -->
<div class="col-md-4">
<div class="card h-100 shadow-sm context-main-bg">
<div class="card-body text-center">
<i class="fab fa-safari fa-3x mb-3 atb-green"></i>
<h5 class="card-title">Safari</h5>
<hr>
<ul class="list-group list-group-flush">
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/safari/pin" class="text-decoration-none atb-green">
How to pin the extension to your toolbar
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/safari/settings" class="text-decoration-none atb-green">
How to Open the extension settings page
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/safari/import" class="text-decoration-none atb-green">
How to Import Bookmarks into the browser
</a>
</li>
<li class="list-group-item context-second-bg mb-1">
<a href="{ROOT_URL}bookmarks/tutorials/safari/export" class="text-decoration-none atb-green">
How to export Bookmarks from the browser
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>