all atb changes
This commit is contained in:
Joey Kimsey
56
app/plugins/bookmarks/views/bookmarks/create.html
Normal file
56
app/plugins/bookmarks/views/bookmarks/create.html
Normal file
@ -0,0 +1,56 @@
|
||||
<div class="my-4">
|
||||
<div class="offset-md-2 col-8 py-3 context-main-bg">
|
||||
<legend class="text-center">Add Bookmark</legend>
|
||||
<hr>
|
||||
<form method="post" class="container py-4">
|
||||
<fieldset>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Title</label>
|
||||
<div class="col-lg-3">
|
||||
<input type="text" class="form-control" name="title" id="title" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3 row">
|
||||
<label for="url" class="col-lg-5 col-form-label text-end">URL</label>
|
||||
<div class="col-lg-3">
|
||||
<input type="text" class="form-control" name="url" id="url" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3 row">
|
||||
<label for="description" class="col-lg-5 col-form-label text-end">Description:</label>
|
||||
<div class="col-lg-3">
|
||||
<textarea class="form-control" name="description" maxlength="2000" rows="10" cols="50" id="description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
{folderSelect}
|
||||
<div class="mb-3 row">
|
||||
<label for="privacy" class="col-lg-5 col-form-label text-end">Privacy</label>
|
||||
<div class="col-lg-3">
|
||||
<select id="privacy" name="privacy" class="form-control">
|
||||
<option value="private">Private</option>
|
||||
<option value="public">Public</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="color" class="col-lg-5 col-form-label text-end">Color</label>
|
||||
<div class="col-lg-3" id="colorContainer">
|
||||
{colorSelect}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden Token -->
|
||||
<input type="hidden" name="token" value="{TOKEN}">
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="text-center">
|
||||
<button type="submit" name="submit" value="submit" class="btn atb-green-bg btn-lg">Create</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
56
app/plugins/bookmarks/views/bookmarks/edit.html
Normal file
56
app/plugins/bookmarks/views/bookmarks/edit.html
Normal file
@ -0,0 +1,56 @@
|
||||
<div class="my-4">
|
||||
<div class="offset-md-1 col-10 py-3 context-main-bg">
|
||||
<legend class="text-center">Edit Bookmark</legend>
|
||||
<hr>
|
||||
<form action="" method="post" class="container py-4">
|
||||
<fieldset>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Title</label>
|
||||
<div class="col-lg-3">
|
||||
<input type="text" class="form-control" name="title" id="title" value="{title}" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3 row">
|
||||
<label for="url" class="col-lg-5 col-form-label text-end">URL</label>
|
||||
<div class="col-lg-3">
|
||||
<input type="text" class="form-control" name="url" id="url" value="{url}" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Description:</label>
|
||||
<div class="col-lg-3">
|
||||
<textarea class="form-control" name="description" maxlength="2000" rows="10" cols="50" id="description">{description}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
{folderSelect}
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Privacy</label>
|
||||
<div class="col-lg-3">
|
||||
<select id="privacy" name="privacy" class="form-control" value="{privacy}">
|
||||
<option value="private">Private</option>
|
||||
<option value="public">Public</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Color</label>
|
||||
<div class="col-lg-3" id="colorContainer">
|
||||
{colorSelect}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden Token -->
|
||||
<input type="hidden" name="token" value="{TOKEN}">
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="text-center">
|
||||
<button type="submit" name="submit" value="submit" class="btn atb-green-bg btn-lg">Save</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
38
app/plugins/bookmarks/views/bookmarks/list.html
Normal file
38
app/plugins/bookmarks/views/bookmarks/list.html
Normal file
@ -0,0 +1,38 @@
|
||||
<table class="table table-striped context-main">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 75%">Bookmark</th>
|
||||
<th style="width: 10%"></th>
|
||||
<th style="width: 5%"></th>
|
||||
<th style="width: 5%"></th>
|
||||
<th style="width: 5%"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{LOOP}
|
||||
<tr>
|
||||
<td style="text-align: center;">
|
||||
<a href="{url}" class="text-decoration-none atb-green">
|
||||
{title}
|
||||
</a>
|
||||
</td>
|
||||
<td style="text-align: center;">
|
||||
{privacy}
|
||||
</td>
|
||||
<td><a href="{ROOT_URL}bookmarks/bookmark/{ID}" class="btn btn-sm atb-green-outline"><i class="fa fa-fw fa-upload"></i></a></td>
|
||||
<td><a href="{ROOT_URL}bookmarks/editBookmark/{ID}" class="btn btn-sm btn-outline-warning"><i class="fa fa-fw fa-pencil"></i></a></td>
|
||||
<td><a href="{ROOT_URL}bookmarks/deleteBookmark/{ID}" class="btn btn-sm btn-outline-danger"><i class="fa fa-fw fa-trash"></i></a></td>
|
||||
</tr>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<tr>
|
||||
<td style="text-align: center;" colspan="6">
|
||||
No results to show.
|
||||
</td>
|
||||
</tr>
|
||||
{/ALT}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="text-center">
|
||||
<a href="{ROOT_URL}bookmarks/createBookmark" class="btn btn-md atb-green-bg">Create</a>
|
||||
</div>
|
||||
13
app/plugins/bookmarks/views/bookmarks/listPage.html
Normal file
13
app/plugins/bookmarks/views/bookmarks/listPage.html
Normal file
@ -0,0 +1,13 @@
|
||||
<div class="offset-md-2 col-8 py-3">
|
||||
{LOOP}
|
||||
<legend class="">Bookmark List</legend>
|
||||
<div class="col-6 col-md-12">
|
||||
{panel}
|
||||
</div>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="col-12">
|
||||
<p>no folders</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
</div>
|
||||
54
app/plugins/bookmarks/views/bookmarks/unsorted.html
Normal file
54
app/plugins/bookmarks/views/bookmarks/unsorted.html
Normal file
@ -0,0 +1,54 @@
|
||||
<div class="my-4 g-">
|
||||
<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>
|
||||
<p class="px-2 text-muted text-center">
|
||||
This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
|
||||
</p>
|
||||
<hr>
|
||||
{/BKMTUTS}
|
||||
<table class="table table-striped context-main1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 75%">Bookmark</th>
|
||||
<th style="width: 10%"></th>
|
||||
<th style="width: 5%"></th>
|
||||
<th style="width: 5%"></th>
|
||||
<th style="width: 5%"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{LOOP}
|
||||
<tr>
|
||||
<td style="text-align: center;">
|
||||
<a href="{url}" class="text-decoration-none atb-green">
|
||||
{title}
|
||||
</a>
|
||||
</td>
|
||||
<td style="text-align: center;">
|
||||
{privacy}
|
||||
</td>
|
||||
<td><a href="{ROOT_URL}bookmarks/bookmark/{ID}" class="btn btn-sm atb-green-outline"><i class="fa fa-fw fa-upload"></i></a></td>
|
||||
<td><a href="{ROOT_URL}bookmarks/editBookmark/{ID}" class="btn btn-sm btn-outline-warning"><i class="fa fa-fw fa-pencil"></i></a></td>
|
||||
<td><a href="{ROOT_URL}bookmarks/deleteBookmark/{ID}" class="btn btn-sm btn-outline-danger"><i class="fa fa-fw fa-trash"></i></a></td>
|
||||
</tr>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<tr>
|
||||
<td style="text-align: center;" colspan="6">
|
||||
No results to show.
|
||||
</td>
|
||||
</tr>
|
||||
{/ALT}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="text-center">
|
||||
<a href="{ROOT_URL}bookmarks/createBookmark" class="btn btn-lg atb-green-bg">Add</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
96
app/plugins/bookmarks/views/bookmarks/view.html
Normal file
96
app/plugins/bookmarks/views/bookmarks/view.html
Normal file
@ -0,0 +1,96 @@
|
||||
<div class="container py-4">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow">
|
||||
<!-- Card Header -->
|
||||
<div class="card-header text-center bg-dark text-white">
|
||||
<h3 class="card-title mb-0">Bookmark</h3>
|
||||
</div>
|
||||
|
||||
<!-- Card Body -->
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
|
||||
<!-- User Details -->
|
||||
<div class="offset-md-2 col-md-8">
|
||||
<table class="table table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Title:</th>
|
||||
<td>{title}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">URL:</th>
|
||||
<td>{url}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Type:</th>
|
||||
<td>{linkType}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Privacy:</th>
|
||||
<td>{privacy}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Color:</th>
|
||||
<td>{color}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Created:</th>
|
||||
<td>{DTC}{createdAt}{/DTC}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Archived:</th>
|
||||
<td>{DTC}{archivedAt}{/DTC}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Hidden:</th>
|
||||
<td>{DTC}{hiddenAt}{/DTC}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Last Refreshed:</th>
|
||||
<td>{DTC}{refreshedAt}{/DTC}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" colspan="2">Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">{description}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" colspan="2">Icon</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">{iconHtml}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">{icon}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" colspan="2">Meta</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">{meta}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Admin Controls -->
|
||||
<div class="card-footer text-center">
|
||||
{refreshBtn}
|
||||
{hideBtn}
|
||||
{archiveBtn}
|
||||
<a href="{ROOT_URL}bookmarks/editBookmark/{ID}" class="btn btn-warning btn-sm me-2" data-bs-toggle="tooltip" title="Edit Bookmark">
|
||||
<i class="fa fa-pencil"></i> Edit
|
||||
</a>
|
||||
<a href="{ROOT_URL}bookmarks/deleteBookmark/{ID}" class="btn btn-danger btn-sm" data-bs-toggle="tooltip" title="Delete Bookmark">
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,56 @@
|
||||
{LOOP}
|
||||
<div class="col-xlg-6 col-lg-6 col-md-6 col-sm-6 bookmark-card" id="folderCard{ID}">
|
||||
<div class="card m-3 accordion">
|
||||
<div class="accordion-item">
|
||||
<div class="card-header accordion-header text-center bg-{color} context-main">
|
||||
<span class="float-start">
|
||||
<button class="btn btn-sm pe-3 folder-raise context-main" type="button"><i class="fa-solid fa-arrow-up"></i></button>
|
||||
<button class="btn btn-sm ps-3 folder-lower context-main" type="button"><i class="fa-solid fa-arrow-down"></i></button>
|
||||
</span>
|
||||
<span class="h4 text-center mx-5" data-bs-target="#Collapse{ID}" data-bs-toggle="collapse" aria-expanded="true" aria-controls="Collapse{ID}">{title}</span>
|
||||
<a class="btn btn-sm atb-green-bg btn-rounded float-end btn-share" data-bs-toggle="modal" data-bs-target="#linkShare{ID}">
|
||||
<i class="fa fa-fw fa-share"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="modal fade context-main" id="linkShare{ID}" tabindex="-1" style="display: none;" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header context-main-bg">
|
||||
<h1 class="modal-title fs-5">Share Url</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body context-second-bg">
|
||||
<p>This link can be shared with anyone and will show display info as long as it is set to public privacy.</p>
|
||||
<input type="text" value="{SITE_URL}shared/folder/{uuid}" name="input" class="w-100 form-control" id="shareFolderUrlInput{ID}">
|
||||
<button class="btn btn-secondary mt-2" onclick="copyElementText('shareFolderUrlInput{ID}')">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="Collapse{ID}" class="accordion-collapse collapse w-100 position-relative show">
|
||||
<div class="card-body accordion-body p-2 context-second-bg">
|
||||
<ul class="list-group mt-1">
|
||||
{bookmarkListRows}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-center align-items-center context-main-bg">
|
||||
<a href="{ROOT_URL}bookmarks/createBookmark/{ID}" class="btn btn-sm btn-success btn-addlink"><i class="fa fa-fw fa-plus"></i></a></td>
|
||||
<span class="ms-auto">
|
||||
<a href="{ROOT_URL}bookmarks/bookmarks/{ID}" class="btn btn-sm atb-green-outline"><i class="fa fa-fw fa-list"></i></a>
|
||||
<a href="{ROOT_URL}bookmarks/folders/{ID}" class="btn btn-sm atb-green-outline"><i class="fa fa-fw fa-info-circle"></i></a></td>
|
||||
<a href="{ROOT_URL}bookmarks/editFolder/{ID}" class="btn btn-sm btn-warning edit-mode"><i class="fa fa-fw fa-pencil"></i></a></td>
|
||||
<a href="{ROOT_URL}bookmarks/deleteFolder/{ID}" class="btn btn-sm btn-danger edit-mode"><i class="fa fa-fw fa-trash"></i></a></td>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="col-12 text-center h4">
|
||||
<p>No folders found.</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
35
app/plugins/bookmarks/views/components/bookmarkListRows.html
Normal file
35
app/plugins/bookmarks/views/components/bookmarkListRows.html
Normal file
@ -0,0 +1,35 @@
|
||||
{LOOP}
|
||||
<li class="list-group-item context-main-bg bg-{color} {hidden_class} {archived_class} mb-1">
|
||||
<a href="{ROOT_URL}bookmarks/bookmark/{ID}" class="context-main">{iconHtml}</a>
|
||||
<a href="{url}" class="text-decoration-none atb-green"> {title}</a>
|
||||
<span class="float-end">
|
||||
<span class="btn-hideshow">{hideBtn}</span>
|
||||
<span class="btn-archive">{archiveBtn}</span>
|
||||
<span class="btn-publish">{publish}</span>
|
||||
<a href="{ROOT_URL}bookmarks/editBookmark/{ID}" class="btn btn-sm btn-warning edit-mode"><i class="fa fa-fw fa-pencil"></i></a>
|
||||
<a href="{ROOT_URL}bookmarks/deleteBookmark/{ID}" class="btn btn-sm btn-danger edit-mode"><i class="fa fa-fw fa-trash"></i></a>
|
||||
<a class="btn btn-sm atb-green-bg btn-share" data-bs-toggle="modal" data-bs-target="#linkShare{ID}">
|
||||
<i class="fa fa-fw fa-share"></i>
|
||||
</a>
|
||||
<div class="modal fade" id="linkShare{ID}" tabindex="-1" style="display: none;" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5">Share Url</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="text" value="{SITE_URL}shared/link/{uuid}" name="input" class="w-100 form-control" id="shareLinkUrlInput{ID}">
|
||||
<button class="btn btn-secondary mt-2" onclick="copyElementText('shareLinkUrlInput{ID}')">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<li class="list-group-item context-main context-main-bg mb-1">
|
||||
<p class="list-group text-center">No Bookmarks</p>
|
||||
</li>
|
||||
{/ALT}
|
||||
16
app/plugins/bookmarks/views/components/linkSelect.html
Normal file
16
app/plugins/bookmarks/views/components/linkSelect.html
Normal file
@ -0,0 +1,16 @@
|
||||
<div class="" id="accordionFolders">
|
||||
<!-- Folder -->
|
||||
{LOOP}
|
||||
<div class="">
|
||||
<!-- Header -->
|
||||
<h4 class="" id="headingFolder{ID}">
|
||||
<div class="d-flex align-items-center context-main-bg context-main bg-{color}">
|
||||
<input type="checkbox" class="form-check-input m-2" name="link_order[]" value="{ID}"{selected}>
|
||||
<span class="card-header context-main bg-{color}">
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
</h4>
|
||||
</div>
|
||||
{/LOOP}
|
||||
</div>
|
||||
27
app/plugins/bookmarks/views/components/publicList.html
Normal file
27
app/plugins/bookmarks/views/components/publicList.html
Normal file
@ -0,0 +1,27 @@
|
||||
{LOOP}
|
||||
<div class="bookmark-card">
|
||||
<div class="card m-3 accordion">
|
||||
<div class="accordion-item">
|
||||
|
||||
<div class="card-header accordion-header bg-{color} context-main">
|
||||
<div class="d-flex justify-content-between align-items-center w-100" data-bs-target="#Collapse{ID}" data-bs-toggle="collapse" aria-expanded="true" aria-controls="Collapse{ID}">
|
||||
<div class="text-center h4">{title}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="Collapse{ID}" class="accordion-collapse collapse w-100 position-relative show">
|
||||
<div class="card-body accordion-body p-2 context-second-bg">
|
||||
<ul class="list-group">
|
||||
{bookmarkListRows}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="context-other-bg">
|
||||
<p class="context-other-bg">no Folders</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
30
app/plugins/bookmarks/views/components/publicListRows.html
Normal file
30
app/plugins/bookmarks/views/components/publicListRows.html
Normal file
@ -0,0 +1,30 @@
|
||||
{LOOP}
|
||||
<li class="list-group-item context-main-bg bg-{color}">
|
||||
<a href="{ROOT_URL}bookmarks/bookmark/{ID}" class="context-main">{iconHtml}</a>
|
||||
<a href="{url}" class="text-decoration-none atb-green"> {title}</a>
|
||||
<span class="float-end">
|
||||
<a class="btn btn-sm atb-green-bg" data-bs-toggle="modal" data-bs-target="#linkShare{ID}">
|
||||
<i class="fa fa-fw fa-share"></i>
|
||||
</a>
|
||||
<div class="modal fade" id="linkShare{ID}" tabindex="-1" style="display: none;" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5">Share Url</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="text" value="{SITE_URL}shared/link/{uuid}" name="input" class="w-100 form-control" id="shareLinkUrlInput{ID}">
|
||||
<button class="btn btn-secondary mt-2" onclick="copyElementText('shareLinkUrlInput{ID}')">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<li class="list-group-item context-main context-main-bg">
|
||||
<p class="list-group text-center">No Bookmarks</p>
|
||||
</li>
|
||||
{/ALT}
|
||||
54
app/plugins/bookmarks/views/components/shareListPanel.html
Normal file
54
app/plugins/bookmarks/views/components/shareListPanel.html
Normal file
@ -0,0 +1,54 @@
|
||||
{LOOP}
|
||||
<div class="col-xlg-6 col-lg-6 col-md-6 col-sm-6 bookmark-card" id="folderCard{ID}">
|
||||
<div class="card m-3 accordion">
|
||||
<div class="accordion-item">
|
||||
<div class="card-header accordion-header bg-{color} context-main">
|
||||
<div class="d-flex justify-content-between align-items-center w-100">
|
||||
<span data-bs-target="#Collapse{ID}" data-bs-toggle="collapse" aria-expanded="true" aria-controls="Collapse{ID}">
|
||||
<span class="text-center px-5">{privacyBadge}</span>
|
||||
<span class="h4 text-center px-5">{title}</span>
|
||||
</span>
|
||||
<a class="btn btn-sm btn-rounded btn-share atb-green-bg" data-bs-toggle="modal" data-bs-target="#linkShare{ID}">
|
||||
<i class="fa fa-fw fa-share"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade context-main" id="linkShare{ID}" tabindex="-1" style="display: none;" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header context-main-bg">
|
||||
<h1 class="modal-title fs-5">Share Url</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body context-second-bg">
|
||||
<p>This link can be shared with anyone and will show display info as long as it is set to public privacy.</p>
|
||||
<input type="text" value="{SITE_URL}shared/folder/{uuid}" name="input" class="w-100 form-control" id="shareFolderUrlInput{ID}">
|
||||
<button class="btn btn-secondary mt-2" onclick="copyElementText('shareFolderUrlInput{ID}')">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="Collapse{ID}" class="accordion-collapse collapse w-100 position-relative show">
|
||||
<div class="card-body accordion-body p-2 context-second-bg">
|
||||
<ul class="list-group">
|
||||
{bookmarkListRows}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-center align-items-center context-main-bg">
|
||||
<span class="ms-auto">
|
||||
<a href="{ROOT_URL}bookmarks/bookmarks/{ID}" class="btn btn-sm atb-green-outline"><i class="fa fa-fw fa-list"></i></a>
|
||||
<a href="{ROOT_URL}bookmarks/folders/{ID}" class="btn btn-sm atb-green-outline"><i class="fa fa-fw fa-info-circle"></i></a></td>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="context-other-bg">
|
||||
<p class="context-other-bg">no Folders</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
31
app/plugins/bookmarks/views/components/shareListRows.html
Normal file
31
app/plugins/bookmarks/views/components/shareListRows.html
Normal file
@ -0,0 +1,31 @@
|
||||
{LOOP}
|
||||
<li class="list-group-item context-main-bg bg-{color} mb-1">
|
||||
<a href="{ROOT_URL}bookmarks/bookmark/{ID}" class="context-main">{iconHtml}</a>
|
||||
<a href="{url}"> {title}</a>{privacyBadge}
|
||||
<span class="float-end">
|
||||
{publish}
|
||||
<a class="btn btn-sm atb-green-bg btn-share" data-bs-toggle="modal" data-bs-target="#linkShare{ID}">
|
||||
<i class="fa fa-fw fa-share"></i>
|
||||
</a>
|
||||
<div class="modal fade" id="linkShare{ID}" tabindex="-1" style="display: none;" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5">Share Url</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="text" value="{SITE_URL}shared/link/{uuid}" name="input" class="w-100 form-control" id="shareLinkUrlInput{ID}">
|
||||
<button class="btn btn-secondary mt-2" onclick="copyElementText('shareLinkUrlInput{ID}')">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<li class="list-group-item context-main context-main-bg">
|
||||
<p class="list-group text-center">No Bookmarks</p>
|
||||
</li>
|
||||
{/ALT}
|
||||
25
app/plugins/bookmarks/views/dash.html
Normal file
25
app/plugins/bookmarks/views/dash.html
Normal file
@ -0,0 +1,25 @@
|
||||
<div class="mb-4 mt-4">
|
||||
<div class="offset-md-1 col-10 py-3 context-main-bg">
|
||||
<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>
|
||||
<p class="px-2 text-muted text-center">
|
||||
This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
|
||||
</p>
|
||||
<hr>
|
||||
{/BKMTUTS}
|
||||
{VIEW_OPTIONS}
|
||||
<hr>
|
||||
<div class="row g-3" data-masonry='{ "percentPosition": false }' id="bookmarkSort">
|
||||
{folderPanels}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
14
app/plugins/bookmarks/views/dashboardExplainer.html
Normal file
14
app/plugins/bookmarks/views/dashboardExplainer.html
Normal 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>
|
||||
30
app/plugins/bookmarks/views/dashboards/bookmarkRows.html
Normal file
30
app/plugins/bookmarks/views/dashboards/bookmarkRows.html
Normal file
@ -0,0 +1,30 @@
|
||||
{LOOP}
|
||||
<li class="list-group-item context-main-bg bg-{color} {hidden_class} {archived_class} mb-1">
|
||||
<a href="{ROOT_URL}bookmarks/bookmark/{ID}" class="context-main">{iconHtml}</a>
|
||||
<a href="{url}"> {title}</a>
|
||||
<span class="float-end">
|
||||
<a class="btn btn-sm atb-green-bg btn-share" data-bs-toggle="modal" data-bs-target="#linkShare{ID}">
|
||||
<i class="fa fa-fw fa-share"></i>
|
||||
</a>
|
||||
<div class="modal fade" id="linkShare{ID}" tabindex="-1" style="display: none;" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5">Share Url</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="text" value="{SITE_URL}shared/link/{uuid}" name="input" class="w-100 form-control" id="shareLinkUrlInput{ID}">
|
||||
<button class="btn btn-secondary mt-2" onclick="copyElementText('shareLinkUrlInput{ID}')">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<li class="list-group-item context-main context-main-bg mb-1">
|
||||
<p class="list-group text-center">No Bookmarks</p>
|
||||
</li>
|
||||
{/ALT}
|
||||
43
app/plugins/bookmarks/views/dashboards/create.html
Normal file
43
app/plugins/bookmarks/views/dashboards/create.html
Normal file
@ -0,0 +1,43 @@
|
||||
<div class="my-4">
|
||||
<div class="offset-md-1 col-10 py-3 context-main-bg text-center">
|
||||
<legend class="">Add Dashboard</legend>
|
||||
<hr>
|
||||
<p>Dashboards are groups of folders that usually share a theme. When links are added to folders they will automatically be added to dashboards unless hidden or archived. </p>
|
||||
<form action="" method="post" class="container py-4">
|
||||
<fieldset>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-4 col-form-label text-end">Title</label>
|
||||
<div class="col-lg-4">
|
||||
<input type="text" class="form-control" name="title" id="title" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-4 col-form-label text-end">Description:</label>
|
||||
<div class="col-lg-4">
|
||||
<textarea class="form-control" name="description" maxlength="2000" rows="4" id="description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-4 col-form-label text-end">Dashboard Filters:</label>
|
||||
<div class="col-lg-4">
|
||||
{DASH_OPTIONS}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-4 col-form-label text-end">Included Folders:</label>
|
||||
<div class="col-lg-4">
|
||||
{LINK_SELECT}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden Token -->
|
||||
<input type="hidden" name="token" value="{TOKEN}">
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="text-center">
|
||||
<button type="submit" name="submit" value="submit" class="btn atb-green-bg btn-lg">Create</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
27
app/plugins/bookmarks/views/dashboards/dashOptions.html
Normal file
27
app/plugins/bookmarks/views/dashboards/dashOptions.html
Normal file
@ -0,0 +1,27 @@
|
||||
<div class="p-2">
|
||||
<!-- Status Filters -->
|
||||
<div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
|
||||
<div class="me-3 fw-bold">Status:</div>
|
||||
<div class="form-check form-switch me-3">
|
||||
<input class="form-check-input" type="checkbox" value="showArchivedSwitch" id="dashShowArchivedSwitch" name="link_filter[]"{showArchivedSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="showArchivedSwitch">Show Archived</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" value="showHiddenSwitch" id="dashShowHiddenSwitch" name="link_filter[]"{showHiddenSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="showHiddenSwitch">Show Hidden</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons Filters -->
|
||||
<div class="d-flex align-items-center border p-2 rounded context-main-bg">
|
||||
<div class="me-3 fw-bold">Buttons:</div>
|
||||
<div class="form-check form-switch me-3">
|
||||
<input class="form-check-input" type="checkbox" value="shareButtonSwitch" id="dashShareButtonSwitch" name="link_filter[]"{shareButtonSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="shareButtonSwitch">Share Button</label>
|
||||
</div>
|
||||
<div class="form-check form-switch me-3">
|
||||
<input class="form-check-input" type="checkbox" value="addButtonSwitch" id="dashAddButtonSwitch" name="link_filter[]"{addButtonSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="addButtonSwitch">Add Button</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
43
app/plugins/bookmarks/views/dashboards/edit.html
Normal file
43
app/plugins/bookmarks/views/dashboards/edit.html
Normal file
@ -0,0 +1,43 @@
|
||||
<div class="my-4">
|
||||
<div class="offset-md-1 col-10 py-3 context-main-bg text-center">
|
||||
<legend class="">Edit Dashboard</legend>
|
||||
<hr>
|
||||
<p>Dashboards are groups of folders that usually share a theme. When links are added to folders they will automatically be added to dashboards unless hidden or archived. </p>
|
||||
<form action="" method="post" class="container py-4">
|
||||
<fieldset>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-4 col-form-label text-end">Title</label>
|
||||
<div class="col-lg-4">
|
||||
<input type="text" class="form-control" name="title" id="title" value="{title}" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-4 col-form-label text-end">Description:</label>
|
||||
<div class="col-lg-4">
|
||||
<textarea class="form-control" name="description" maxlength="2000" rows="4" id="description">{description}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-4 col-form-label text-end">Dashboard Filters:</label>
|
||||
<div class="col-lg-4">
|
||||
{DASH_OPTIONS}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-4 col-form-label text-end">Included Folders:</label>
|
||||
<div class="col-lg-4">
|
||||
{LINK_SELECT}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden Token -->
|
||||
<input type="hidden" name="token" value="{TOKEN}">
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="text-center">
|
||||
<button type="submit" name="submit" value="submit" class="btn atb-green-bg btn-lg">Save</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
54
app/plugins/bookmarks/views/dashboards/folderPanels.html
Normal file
54
app/plugins/bookmarks/views/dashboards/folderPanels.html
Normal file
@ -0,0 +1,54 @@
|
||||
{LOOP}
|
||||
<div class="col-xlg-6 col-lg-6 col-md-6 col-sm-6 bookmark-card" id="folderCard{ID}">
|
||||
<div class="card m-3 accordion">
|
||||
<div class="accordion-item">
|
||||
<div class="card-header accordion-header text-center bg-{color} context-main">
|
||||
<span class="float-start">
|
||||
<button class="btn btn-sm pe-3 folder-raise atb-green" type="button"><i class="fa-solid fa-arrow-up"></i></button>
|
||||
<button class="btn btn-sm ps-3 folder-lower atb-green" type="button"><i class="fa-solid fa-arrow-down"></i></button>
|
||||
</span>
|
||||
<span class="h4 text-center mx-5" data-bs-target="#Collapse{ID}" data-bs-toggle="collapse" aria-expanded="true" aria-controls="Collapse{ID}">{title}</span>
|
||||
<a class="btn btn-sm atb-green-bg btn-rounded float-end btn-share" data-bs-toggle="modal" data-bs-target="#linkShare{ID}">
|
||||
<i class="fa fa-fw fa-share"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="modal fade context-main" id="linkShare{ID}" tabindex="-1" style="display: none;" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header context-main-bg">
|
||||
<h1 class="modal-title fs-5">Share Url</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body context-second-bg">
|
||||
<p>This link can be shared with anyone and will show display info as long as it is set to public privacy.</p>
|
||||
<input type="text" value="{SITE_URL}shared/folder/{uuid}" name="input" class="w-100 form-control" id="shareFolderUrlInput{ID}">
|
||||
<button class="btn btn-secondary mt-2" onclick="copyElementText('shareFolderUrlInput{ID}')">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="Collapse{ID}" class="accordion-collapse collapse w-100 position-relative show">
|
||||
<div class="card-body accordion-body p-2 context-second-bg">
|
||||
<ul class="list-group mt-1">
|
||||
{bookmarkRows}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-center align-items-center context-main-bg">
|
||||
<a href="{ROOT_URL}bookmarks/createBookmark/{ID}" class="btn btn-sm btn-success btn-addlink"><i class="fa fa-fw fa-plus"></i></a></td>
|
||||
<span class="ms-auto">
|
||||
<a href="{ROOT_URL}bookmarks/bookmarks/{ID}" class="btn btn-sm atb-green-outline"><i class="fa fa-fw fa-list"></i></a>
|
||||
<a href="{ROOT_URL}bookmarks/folders/{ID}" class="btn btn-sm atb-green-outline"><i class="fa fa-fw fa-info-circle"></i></a></td>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="col-12 text-center h4">
|
||||
<p>No folders found.</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
54
app/plugins/bookmarks/views/dashboards/list.html
Normal file
54
app/plugins/bookmarks/views/dashboards/list.html
Normal file
@ -0,0 +1,54 @@
|
||||
<div class="my-4">
|
||||
<div class="offset-2 col-8 p-3 context-main-bg">
|
||||
<legend class="text-center">Dashboards</legend>
|
||||
<hr>
|
||||
{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>
|
||||
<p class="px-2 text-muted text-center">
|
||||
This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
|
||||
</p>
|
||||
<hr>
|
||||
{/BKMTUTS}
|
||||
<div class="row g-3 text-center p-2">
|
||||
<table class="table context-main">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Description</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{LOOP}
|
||||
<tr>
|
||||
<td class="">{title}</td>
|
||||
<td>{description}</td>
|
||||
<td><a href="{ROOT_URL}bookmarks/dashboard/{uuid}" class="btn btn-sm atb-green-bg"><i class="fa fa-fw fa-upload"></i></a></td>
|
||||
<td><a href="{ROOT_URL}bookmarks/editDash/{ID}" class="btn btn-sm btn-warning"><i class="fa fa-fw fa-pencil"></i></a></td>
|
||||
<td><a href="{ROOT_URL}bookmarks/deleteDash/{ID}" class="btn btn-sm btn-danger"><i class="fa fa-fw fa-trash"></i></a></td>
|
||||
</tr>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<tr>
|
||||
<td class="context-main" colspan="7">
|
||||
No results to show.
|
||||
</td>
|
||||
</tr>
|
||||
{/ALT}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="">
|
||||
<a href="{ROOT_URL}bookmarks/addDash" class="btn btn-lg atb-green-bg">Create</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
29
app/plugins/bookmarks/views/dashboards/view.html
Normal file
29
app/plugins/bookmarks/views/dashboards/view.html
Normal file
@ -0,0 +1,29 @@
|
||||
<div class="my-4">
|
||||
<div class="offset-md-1 col-10 py-3 context-main-bg">
|
||||
<legend class="text-center">{title}</legend>
|
||||
<hr>
|
||||
<form method="post">
|
||||
<fieldset>
|
||||
<input type="hidden" name="token" value="{TOKEN}">
|
||||
<input type="hidden" name="dash_id" id="dash_id" value="{ID}">
|
||||
<input type="hidden" name="link_order" value="{link_order}" id="dashLinkOrder">
|
||||
<div class="row g-3" id="bookmarkSort">
|
||||
{folderPanels}
|
||||
</div>
|
||||
<hr>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 offset-2">
|
||||
{DASH_OPTIONS}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="h-100 d-flex align-items-center">
|
||||
<button type="submit" name="submit" value="submit" class="btn btn-lg mx-5 atb-green-bg">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
84
app/plugins/bookmarks/views/export.html
Normal file
84
app/plugins/bookmarks/views/export.html
Normal file
@ -0,0 +1,84 @@
|
||||
<div class="my-4">
|
||||
<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="/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
|
||||
</p>
|
||||
<p class="px-2 text-muted text-center">
|
||||
This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
|
||||
</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">
|
||||
<table class="table context-main">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width: 80%">Title</th>
|
||||
<th style="width: 20%">
|
||||
<input type="checkbox" onchange="checkAll(this)" name="check.g" value="BF_[]">
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="">
|
||||
<tr>
|
||||
<td class="text-center">Unsorted</td>
|
||||
<td>
|
||||
<input type="checkbox" value="unsorted" name="BF_[]">
|
||||
</td>
|
||||
</tr>
|
||||
{LOOP}
|
||||
<tr>
|
||||
<td class="text-center">{prettyTitle}</td>
|
||||
<td>
|
||||
<input type="checkbox" value="{ID}" name="BF_[]">
|
||||
</td>
|
||||
</tr>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<tr>
|
||||
<td class="text-center context-main" colspan="7">
|
||||
No Folders To Export
|
||||
</td>
|
||||
</tr>
|
||||
{/ALT}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-3 col-form-label text-end align-items-center">Bookmark Filters:</label>
|
||||
<div class="col-lg-6">
|
||||
<div class="p-2">
|
||||
<!-- Status Filters -->
|
||||
<div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
|
||||
<div class="me-3 fw-bold">Status:</div>
|
||||
<div class="form-check form-switch me-3">
|
||||
<input class="form-check-input" type="checkbox" value="true" id="archivedIncluded" name="archivedIncluded">
|
||||
<label class="form-check-label" for="archivedIncluded">Include Archived</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" value="true" id="hiddenIncluded" name="hiddenIncluded">
|
||||
<label class="form-check-label" for="hiddenIncluded">Include Hidden</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p>Literally every browser is chromium based now, so they all have a standard import/export.</p>
|
||||
<button type="submit" name="submit" value="submit" class="btn atb-green-bg btn-lg">Create Export</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
17
app/plugins/bookmarks/views/exportExplainer.html
Normal file
17
app/plugins/bookmarks/views/exportExplainer.html
Normal 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="/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
108
app/plugins/bookmarks/views/extensions/bookmarklet.html
Normal file
108
app/plugins/bookmarks/views/extensions/bookmarklet.html
Normal file
@ -0,0 +1,108 @@
|
||||
<div class="col-10 offset-md-1 context-main-bg p-4 my-5">
|
||||
<legend class="text-center">Mobile Bookmarklet</legend>
|
||||
<hr>
|
||||
<div class="col-8 offset-2 ">
|
||||
<div class="h5">
|
||||
<p>
|
||||
You can quickly and easily add bookmarks to your AllTheBookmarks account from any mobile device.
|
||||
Since you can't use extensions on mobile, you can log in from your mobile device and visit this page.
|
||||
</p>
|
||||
<p>
|
||||
Below is a code snippet that you can copy. Copy the code, then create a new bookmark on your mobile device as you would normally.
|
||||
Before saving the bookmark, change the name to something simple like "ATB Bookmarker" and paste this code as the url.
|
||||
</p>
|
||||
<p>
|
||||
Once you have the bookmarklet saved, you can simply go to your mobile bookmarks while on a page and this snippet will grab the info you need and add it to you account.
|
||||
</p>
|
||||
</div>
|
||||
<div class="context-second-bg p-4 border m-4">
|
||||
<form method="post">
|
||||
<fieldset>
|
||||
<!-- Privacy -->
|
||||
<div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
|
||||
<div class="me-3 fw-bold">Default privacy:</div>
|
||||
<div class="">
|
||||
<select id="privacy" name="privacy" class="form-control">
|
||||
<option value="private">Private</option>
|
||||
<option value="public">Public</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
|
||||
<div class="me-3 fw-bold">Ask for Description:</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="includeDescription" name="includeDescription"{editModeSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="includeDescription"></label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Color -->
|
||||
<div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
|
||||
<div class="me-3 fw-bold">Include a default color:</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="includeColor" name="includeColor"{editModeSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="includeColor"></label>
|
||||
</div>
|
||||
<div class="">
|
||||
{colorSelect}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Folder -->
|
||||
<div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
|
||||
<div class="me-3 fw-bold">Include a default folder:</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="includeFolder" name="includeFolder"{editModeSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="includeFolder"></label>
|
||||
</div>
|
||||
<div class="">
|
||||
{folderSelect}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="card-footer d-flex justify-content-center align-items-center context-main-bg">
|
||||
<button type="submit" name="submit" value="submit" class="btn btn-md atb-green-outline my-2">Refresh Code</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="context-second-bg p-4">
|
||||
<pre lang="javascript">
|
||||
javascript:(function() {
|
||||
const apiKey = "{BK_API_KEY}";
|
||||
const apiUrl = "{BK_API_URL}";
|
||||
const url = window.location.href;
|
||||
const name = prompt("Enter a name for the bookmark:");
|
||||
{BK_JS_NOTES}
|
||||
{BK_JS_COLOR}
|
||||
{BK_JS_PRIVACY}
|
||||
{BK_JS_FOLDER}
|
||||
|
||||
if (!name) {
|
||||
alert("Name is required.");
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(apiUrl + 'api/bookmarks/create', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${apiKey}`
|
||||
},
|
||||
body: JSON.stringify({ name, url, notes, color, privacy, folder })
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
alert("Bookmark saved successfully!");
|
||||
} else {
|
||||
alert("Failed to save bookmark. Please check your API key.");
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
alert("An unknown error occurred while saving the bookmark.");
|
||||
});
|
||||
})();
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="col-10 offset-md-1 context-main-bg p-4 my-5">
|
||||
<legend class="text-center">Mobile Bookmarklet</legend>
|
||||
<hr>
|
||||
<div class="col-8 offset-2 ">
|
||||
<div class="h5">
|
||||
<p>
|
||||
You can quickly and easily add bookmarks to your AllTheBookmarks account from any mobile device.
|
||||
Since you can't use extensions on mobile, you can log in from your mobile device and visit this page.
|
||||
</p>
|
||||
<p>
|
||||
Once logged in, there will be a code snippet that you can copy. Copy the code, then create a new bookmark on your mobile device as you would normally.
|
||||
Before saving the bookmark, change the name to something simple like "ATB Bookmarker" and paste this code as the url.
|
||||
</p>
|
||||
<p>
|
||||
Once you have the bookmarklet saved, you can simply go to your mobile bookmarks while on a page and this snippet will grab the info you need and add it to you account.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
62
app/plugins/bookmarks/views/extensions/brave.html
Normal file
62
app/plugins/bookmarks/views/extensions/brave.html
Normal file
@ -0,0 +1,62 @@
|
||||
<div class="container py-5">
|
||||
<!-- Product Title and Overview -->
|
||||
<div class="text-center mb-4">
|
||||
<i class="fab fa-brave fa-3x text-danger mb-3"></i>
|
||||
<h5 class="card-title">Brave Extension</h5>
|
||||
<p class="lead text-muted">Your ultimate Brave addon to organize, store, and personalize your bookmarks effortlessly.</p>
|
||||
</div>
|
||||
|
||||
<!-- Features Section -->
|
||||
<div class="row g-4">
|
||||
<!-- Feature: Add and Manage Bookmarks -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-bookmark fa-2x text-primary mb-3"></i>
|
||||
<h5 class="card-title">Add & Manage Bookmarks</h5>
|
||||
<p class="card-text">Quickly add bookmarks, organize them, and never lose track of your favorite websites.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Create Folders -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-folder-open fa-2x text-success mb-3"></i>
|
||||
<h5 class="card-title">Create Folders</h5>
|
||||
<p class="card-text">Group your bookmarks into customizable folders for better organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Set Colors -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-palette fa-2x text-warning mb-3"></i>
|
||||
<h5 class="card-title">Set Colors</h5>
|
||||
<p class="card-text">Personalize your folders and bookmarks with color coding.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Privacy Settings -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-lock fa-2x text-danger mb-3"></i>
|
||||
<h5 class="card-title">Privacy Controls</h5>
|
||||
<p class="card-text">Keep your bookmarks private or share them—your choice, your control.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div class="text-center mt-5">
|
||||
<a href="/brave" class="btn atb-green-bg btn-lg">
|
||||
<i class="fas fa-download me-2"></i>Get the Addon for Brave
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
62
app/plugins/bookmarks/views/extensions/chrome.html
Normal file
62
app/plugins/bookmarks/views/extensions/chrome.html
Normal file
@ -0,0 +1,62 @@
|
||||
<div class="container py-5">
|
||||
<!-- Product Title and Overview -->
|
||||
<div class="text-center mb-4">
|
||||
<i class="fab fa-chrome fa-3x text-primary mb-3"></i>
|
||||
<h5 class="card-title">Chrome Extension</h5>
|
||||
<p class="lead text-muted">Your ultimate Chrome addon to organize, store, and personalize your bookmarks effortlessly.</p>
|
||||
</div>
|
||||
|
||||
<!-- Features Section -->
|
||||
<div class="row g-4">
|
||||
<!-- Feature: Add and Manage Bookmarks -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-bookmark fa-2x text-primary mb-3"></i>
|
||||
<h5 class="card-title">Add & Manage Bookmarks</h5>
|
||||
<p class="card-text">Quickly add bookmarks, organize them, and never lose track of your favorite websites.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Create Folders -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-folder-open fa-2x text-success mb-3"></i>
|
||||
<h5 class="card-title">Create Folders</h5>
|
||||
<p class="card-text">Group your bookmarks into customizable folders for better organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Set Colors -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-palette fa-2x text-warning mb-3"></i>
|
||||
<h5 class="card-title">Set Colors</h5>
|
||||
<p class="card-text">Personalize your folders and bookmarks with color coding.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Privacy Settings -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-lock fa-2x text-danger mb-3"></i>
|
||||
<h5 class="card-title">Privacy Controls</h5>
|
||||
<p class="card-text">Keep your bookmarks private or share them—your choice, your control.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div class="text-center mt-5">
|
||||
<a href="/chrome" class="btn atb-green-bg btn-lg">
|
||||
<i class="fas fa-download me-2"></i>Get the Addon for Chrome
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
62
app/plugins/bookmarks/views/extensions/edge.html
Normal file
62
app/plugins/bookmarks/views/extensions/edge.html
Normal file
@ -0,0 +1,62 @@
|
||||
<div class="container py-5">
|
||||
<!-- Product Title and Overview -->
|
||||
<div class="text-center mb-4">
|
||||
<i class="fab fa-edge fa-3x text-info mb-3"></i>
|
||||
<h5 class="card-title">Edge Extension</h5>
|
||||
<p class="lead text-muted">Your ultimate Edge addon to organize, store, and personalize your bookmarks effortlessly.</p>
|
||||
</div>
|
||||
|
||||
<!-- Features Section -->
|
||||
<div class="row g-4">
|
||||
<!-- Feature: Add and Manage Bookmarks -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-bookmark fa-2x text-primary mb-3"></i>
|
||||
<h5 class="card-title">Add & Manage Bookmarks</h5>
|
||||
<p class="card-text">Quickly add bookmarks, organize them, and never lose track of your favorite websites.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Create Folders -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-folder-open fa-2x text-success mb-3"></i>
|
||||
<h5 class="card-title">Create Folders</h5>
|
||||
<p class="card-text">Group your bookmarks into customizable folders for better organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Set Colors -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-palette fa-2x text-warning mb-3"></i>
|
||||
<h5 class="card-title">Set Colors</h5>
|
||||
<p class="card-text">Personalize your folders and bookmarks with color coding.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Privacy Settings -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-lock fa-2x text-danger mb-3"></i>
|
||||
<h5 class="card-title">Privacy Controls</h5>
|
||||
<p class="card-text">Keep your bookmarks private or share them—your choice, your control.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div class="text-center mt-5">
|
||||
<a href="/edge" class="btn atb-green-bg btn-lg">
|
||||
<i class="fas fa-download me-2"></i>Get the Addon for Edge
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
62
app/plugins/bookmarks/views/extensions/firefox.html
Normal file
62
app/plugins/bookmarks/views/extensions/firefox.html
Normal file
@ -0,0 +1,62 @@
|
||||
<div class="container py-5">
|
||||
<!-- Product Title and Overview -->
|
||||
<div class="text-center mb-4">
|
||||
<i class="fab fa-firefox fa-3x text-warning mb-3"></i>
|
||||
<h5 class="card-title">Firefox Extension</h5>
|
||||
<p class="lead text-muted">Your ultimate Firefox addon to organize, store, and personalize your bookmarks effortlessly.</p>
|
||||
</div>
|
||||
|
||||
<!-- Features Section -->
|
||||
<div class="row g-4">
|
||||
<!-- Feature: Add and Manage Bookmarks -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-bookmark fa-2x text-primary mb-3"></i>
|
||||
<h5 class="card-title">Add & Manage Bookmarks</h5>
|
||||
<p class="card-text">Quickly add bookmarks, organize them, and never lose track of your favorite websites.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Create Folders -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-folder-open fa-2x text-success mb-3"></i>
|
||||
<h5 class="card-title">Create Folders</h5>
|
||||
<p class="card-text">Group your bookmarks into customizable folders for better organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Set Colors -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-palette fa-2x text-warning mb-3"></i>
|
||||
<h5 class="card-title">Set Colors</h5>
|
||||
<p class="card-text">Personalize your folders and bookmarks with color coding.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Privacy Settings -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-lock fa-2x text-danger mb-3"></i>
|
||||
<h5 class="card-title">Privacy Controls</h5>
|
||||
<p class="card-text">Keep your bookmarks private or share them—your choice, your control.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div class="text-center mt-5">
|
||||
<a href="/firefox" class="btn atb-green-bg btn-lg">
|
||||
<i class="fas fa-download me-2"></i>Get the Addon for Firefox
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
78
app/plugins/bookmarks/views/extensions/index.html
Normal file
78
app/plugins/bookmarks/views/extensions/index.html
Normal file
@ -0,0 +1,78 @@
|
||||
<div class="container py-5">
|
||||
<!-- Page Header -->
|
||||
<div class="text-center mb-4">
|
||||
<h1 class="fw-bold">Our Browser Extensions</h1>
|
||||
<p class="lead text-muted">Discover powerful tools to enhance your browsing experience, compatible with the browsers you love.</p>
|
||||
</div>
|
||||
|
||||
<!-- Products Grid -->
|
||||
<div class="row g-4">
|
||||
<!-- Chrome Extension -->
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-chrome fa-3x text-primary mb-3"></i>
|
||||
<h5 class="card-title">Chrome Extension</h5>
|
||||
<p class="card-text">Enhance your Chrome browser with advanced features and effortless organization.</p>
|
||||
<a href="/extensions/chrome" class="btn atb-green-bg btn-sm">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Firefox Extension -->
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-firefox fa-3x text-warning mb-3"></i>
|
||||
<h5 class="card-title">Firefox Extension</h5>
|
||||
<p class="card-text">Seamlessly integrate with Firefox for a smoother browsing experience.</p>
|
||||
<a href="/extensions/firefox" class="btn atb-green-bg btn-sm">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Opera Extension -->
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-opera fa-3x text-danger mb-3"></i>
|
||||
<h5 class="card-title">Opera Extension</h5>
|
||||
<p class="card-text">Boost your Opera browser with intuitive features and tools.</p>
|
||||
<a href="/extensions/opera" class="btn atb-green-bg btn-sm">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Brave Extension -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-brave fa-3x text-orange mb-3"></i>
|
||||
<h5 class="card-title">Brave Extension</h5>
|
||||
<p class="card-text">Enjoy secure and private browsing with Brave, enhanced by our extension.</p>
|
||||
<a href="/extensions/brave" class="btn atb-green-bg btn-sm">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edge Extension -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-edge fa-3x text-info mb-3"></i>
|
||||
<h5 class="card-title">Edge Extension</h5>
|
||||
<p class="card-text">Maximize productivity on Microsoft Edge with our extension.</p>
|
||||
<a href="/extensions/edge" class="btn atb-green-bg btn-sm">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Safari Disclaimer -->
|
||||
<div class="text-center mt-5">
|
||||
<p class="text-muted">
|
||||
<i class="fas fa-exclamation-circle me-2"></i>
|
||||
Unfortunately, our extensions are not currently supported on <a href="/extensions/safari" class="text-decoration-none atb-green">Safari</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
62
app/plugins/bookmarks/views/extensions/opera.html
Normal file
62
app/plugins/bookmarks/views/extensions/opera.html
Normal file
@ -0,0 +1,62 @@
|
||||
<div class="container py-5">
|
||||
<!-- Product Title and Overview -->
|
||||
<div class="text-center mb-4">
|
||||
<i class="fab fa-opera fa-3x text-danger mb-3"></i>
|
||||
<h5 class="card-title">Opera Extension</h5>
|
||||
<p class="lead text-muted">Your ultimate Opera addon to organize, store, and personalize your bookmarks effortlessly.</p>
|
||||
</div>
|
||||
|
||||
<!-- Features Section -->
|
||||
<div class="row g-4">
|
||||
<!-- Feature: Add and Manage Bookmarks -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-bookmark fa-2x text-primary mb-3"></i>
|
||||
<h5 class="card-title">Add & Manage Bookmarks</h5>
|
||||
<p class="card-text">Quickly add bookmarks, organize them, and never lose track of your favorite websites.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Create Folders -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-folder-open fa-2x text-success mb-3"></i>
|
||||
<h5 class="card-title">Create Folders</h5>
|
||||
<p class="card-text">Group your bookmarks into customizable folders for better organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Set Colors -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-palette fa-2x text-warning mb-3"></i>
|
||||
<h5 class="card-title">Set Colors</h5>
|
||||
<p class="card-text">Personalize your folders and bookmarks with color coding.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature: Privacy Settings -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm h-100 context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-lock fa-2x text-danger mb-3"></i>
|
||||
<h5 class="card-title">Privacy Controls</h5>
|
||||
<p class="card-text">Keep your bookmarks private or share them—your choice, your control.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div class="text-center mt-5">
|
||||
<a href="/opera" class="btn atb-green-bg btn-lg">
|
||||
<i class="fas fa-download me-2"></i>Get the Addon for Opera
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
9
app/plugins/bookmarks/views/extensions/safari.html
Normal file
9
app/plugins/bookmarks/views/extensions/safari.html
Normal file
@ -0,0 +1,9 @@
|
||||
<div class="container py-5">
|
||||
<!-- Product Title and Overview -->
|
||||
<div class="text-center mb-4">
|
||||
<i class="fab fa-safari fa-3x text-danger mb-3"></i>
|
||||
<h1 class="fw-bold">AllTheBookmarks</h1>
|
||||
<h5 class="card-title">Safari Extension</h5>
|
||||
<p class="lead text-muted">I'm just gonna level with ya here, I have no idea if this will work on safari, and I'm not going to buy an apple product to find out. If you would like to gift me a relatively modern mac computer, I will happily test and find out.</p>
|
||||
</div>
|
||||
</div>
|
||||
48
app/plugins/bookmarks/views/folders/create.html
Normal file
48
app/plugins/bookmarks/views/folders/create.html
Normal file
@ -0,0 +1,48 @@
|
||||
|
||||
<div class="mb-4 mt-4">
|
||||
<div class="offset-md-1 col-10 py-3 context-main-bg">
|
||||
<legend class="text-center">Add Folder</legend>
|
||||
<hr>
|
||||
|
||||
<form action="" method="post" class="container py-4">
|
||||
<fieldset>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Title</label>
|
||||
<div class="col-lg-3">
|
||||
<input type="text" class="form-control" name="title" id="title" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Description:</label>
|
||||
<div class="col-lg-3">
|
||||
<textarea class="form-control" name="description" maxlength="2000" rows="10" cols="50" id="description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
{folderSelect}
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Privacy</label>
|
||||
<div class="col-lg-3">
|
||||
<select id="privacy" name="privacy" class="form-control">
|
||||
<option value="private">Private</option>
|
||||
<option value="public">Public</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Color</label>
|
||||
<div class="col-lg-3">
|
||||
{colorSelect}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden Token -->
|
||||
<input type="hidden" name="token" value="{TOKEN}">
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="text-center">
|
||||
<button type="submit" name="submit" value="submit" class="btn atb-green-bg btn-lg">Create</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
46
app/plugins/bookmarks/views/folders/edit.html
Normal file
46
app/plugins/bookmarks/views/folders/edit.html
Normal file
@ -0,0 +1,46 @@
|
||||
<div class="mb-4 mt-4">
|
||||
<div class="offset-md-1 col-10 py-3 context-main-bg">
|
||||
<legend class="text-center">Edit Folder</legend>
|
||||
<hr>
|
||||
<form action="" method="post" class="container py-4">
|
||||
<fieldset>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Title</label>
|
||||
<div class="col-lg-3">
|
||||
<input type="text" class="form-control" name="title" id="title" value="{title}" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Description:</label>
|
||||
<div class="col-lg-3">
|
||||
<textarea class="form-control" name="description" maxlength="2000" rows="10" cols="50" id="description">{description}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
{folderSelect}
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Privacy</label>
|
||||
<div class="col-lg-3">
|
||||
<select id="privacy" name="privacy" class="form-control" value="{privacy}">
|
||||
<option value="private">Private</option>
|
||||
<option value="public">Public</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Color</label>
|
||||
<div class="col-lg-3">
|
||||
{colorSelect}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden Token -->
|
||||
<input type="hidden" name="token" value="{TOKEN}">
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="text-center">
|
||||
<button type="submit" name="submit" value="submit" class="btn atb-green-bg btn-lg">Save</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
34
app/plugins/bookmarks/views/folders/list.html
Normal file
34
app/plugins/bookmarks/views/folders/list.html
Normal file
@ -0,0 +1,34 @@
|
||||
<table class="table table-striped context-main text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Privacy</th>
|
||||
<th>Description</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{LOOP}
|
||||
<tr>
|
||||
<td>{prettyTitle}</td>
|
||||
<td>{prettyPrivacy}</td>
|
||||
<td>{description}</td>
|
||||
<td>
|
||||
<a href="{ROOT_URL}bookmarks/folders/{ID}" class="btn btn-sm atb-green-outline mx-1"><i class="fa fa-fw fa-info-circle"></i></a>
|
||||
<a href="{ROOT_URL}bookmarks/editFolder/{ID}" class="btn btn-sm btn-outline-warning mx-1"><i class="fa fa-fw fa-pencil"></i></a>
|
||||
<a href="{ROOT_URL}bookmarks/deleteFolder/{ID}" class="btn btn-sm btn-outline-danger mx-1"><i class="fa fa-fw fa-trash"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
No results to show.
|
||||
</td>
|
||||
</tr>
|
||||
{/ALT}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="text-center">
|
||||
<a href="{ROOT_URL}bookmarks/createFolder" class="btn btn-md atb-green-bg">Create</a>
|
||||
</div>
|
||||
14
app/plugins/bookmarks/views/folders/listPage.html
Normal file
14
app/plugins/bookmarks/views/folders/listPage.html
Normal file
@ -0,0 +1,14 @@
|
||||
<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>
|
||||
<p class="px-2 text-muted text-center">
|
||||
This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
|
||||
</p>
|
||||
<hr>
|
||||
{/BKMTUTS}
|
||||
{foldersList}
|
||||
</div>
|
||||
61
app/plugins/bookmarks/views/folders/view.html
Normal file
61
app/plugins/bookmarks/views/folders/view.html
Normal file
@ -0,0 +1,61 @@
|
||||
<div class="container py-4">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow">
|
||||
<!-- Card Header -->
|
||||
<div class="card-header text-center bg-dark text-white">
|
||||
<h3 class="card-title mb-0">Bookmark Folder</h3>
|
||||
</div>
|
||||
|
||||
<!-- Card Body -->
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
|
||||
<!-- User Details -->
|
||||
<div class="offset-md-2 col-md-8">
|
||||
<table class="table table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Title:</th>
|
||||
<td>{title}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Privacy:</th>
|
||||
<td>{privacy}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Color:</th>
|
||||
<td>{color}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Created:</th>
|
||||
<td>{DTC}{createdAt}{/DTC}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" colspan="2">Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">{description}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Admin Controls -->
|
||||
<div class="card-footer text-center">
|
||||
<a href="{ROOT_URL}bookmarks/bookmarks/{ID}" class="btn atb-green-bg btn-sm me-2" data-bs-toggle="tooltip" title="Broadcast Message">
|
||||
<i class="fa fa-list"></i> Bookmarks
|
||||
</a>
|
||||
<a href="{ROOT_URL}bookmarks/editFolder/{ID}" class="btn btn-warning btn-sm me-2" data-bs-toggle="tooltip" title="Edit User">
|
||||
<i class="fa fa-pencil"></i> Edit
|
||||
</a>
|
||||
<a href="{ROOT_URL}bookmarks/deleteFolder/{ID}" class="btn btn-danger btn-sm" data-bs-toggle="tooltip" title="Delete User">
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
31
app/plugins/bookmarks/views/import.html
Normal file
31
app/plugins/bookmarks/views/import.html
Normal file
@ -0,0 +1,31 @@
|
||||
<div class="my-4">
|
||||
<div class="offset-2 col-8 p-3 context-main-bg">
|
||||
<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="/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
|
||||
</p>
|
||||
<p class="px-2 text-muted text-center">
|
||||
This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
|
||||
</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>
|
||||
<input type="file" name="bookmark_file" id="bookmark_file" accept=".html">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" name="submit" value="submit" class="btn btn-lg center-block atb-green-bg">Import</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
16
app/plugins/bookmarks/views/importExplainer.html
Normal file
16
app/plugins/bookmarks/views/importExplainer.html
Normal 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="/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
19
app/plugins/bookmarks/views/indexExplainer.html
Normal 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>
|
||||
58
app/plugins/bookmarks/views/introduction.html
Normal file
58
app/plugins/bookmarks/views/introduction.html
Normal file
@ -0,0 +1,58 @@
|
||||
<div class="container py-5 context-main-bg mt-4">
|
||||
<!-- Hero Section -->
|
||||
<div class="text-center mb-5">
|
||||
<h1 class="display-4">Welcome to <span class="atb-green">All The Bookmarks</span></h1>
|
||||
<p class="lead">You've unlocked the ultimate tool for organizing, sharing, and managing all of your bookmarks effortlessly.</p>
|
||||
<img src="/images/manage.png" alt="Illustration of bookmark organization" class="img-fluid m-4 border border-white" style="width: 600px;">
|
||||
</div>
|
||||
<hr>
|
||||
<!-- Features Section -->
|
||||
<div class="row text-center my-4">
|
||||
<div class="col-md-4">
|
||||
<i class="fas fa-folder fa-3x atb-green 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 atb-green 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 atb-green mb-3"></i>
|
||||
<h5>Import & Export</h5>
|
||||
<p>Sync your bookmarks across major browsers with our easy import/export tools.</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<!-- Browser Extensions Section -->
|
||||
<div class="row align-items-center my-4 ps-5">
|
||||
<div class="col-md-6">
|
||||
<h3>Bookmark Anything; 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="/extensions" class="btn atb-green-outline">Install Extension</a>
|
||||
</div>
|
||||
<div class="col-md-6 text-center">
|
||||
<img src="/images/extension.png" alt="Illustration of browser extensions" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<!-- Dashboards Section -->
|
||||
<div class="row align-items-center my-4 ps-5">
|
||||
<div class="col-md-6 text-center">
|
||||
<img src="/images/dashboard.png" 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="/bookmarks/dashboards" class="btn atb-green-outline">Learn More About Dashboards</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<!-- Call to Action -->
|
||||
<div class="text-center mt-4">
|
||||
<h4>Ready to Get Started?</h4>
|
||||
<p>Start organizing, sharing, and syncing your bookmarks today!</p>
|
||||
<a href="/bookmarks/createFolder" class="btn btn-lg atb-green-bg">Create Your First Folder</a>
|
||||
</div>
|
||||
</div>
|
||||
10
app/plugins/bookmarks/views/nav/folderTabs.html
Normal file
10
app/plugins/bookmarks/views/nav/folderTabs.html
Normal file
@ -0,0 +1,10 @@
|
||||
<ul class="nav nav-tabs justify-content-center mt-4" role="tablist">
|
||||
<li class="nav-item context-main-bg mx-1"><a href="{ROOT_URL}bookmarks/index/" class="nav-link context-main">Manage</a></li>
|
||||
<li class="nav-item context-main-bg mx-1"><a href="{ROOT_URL}bookmarks/unsorted/" class="nav-link context-main">Unsorted</a></li>
|
||||
<li class="nav-item context-main-bg mx-1"><a href="{ROOT_URL}bookmarks/dashboards/" class="nav-link context-main">Dashboards</a></li>
|
||||
<li class="nav-item context-main-bg mx-1"><a href="{ROOT_URL}bookmarks/folders/" class="nav-link context-main">Folders</a></li>
|
||||
<li class="nav-item context-main-bg mx-1"><a href="{ROOT_URL}bookmarks/share/" class="nav-link context-main">Share</a></li>
|
||||
<li class="nav-item context-main-bg mx-1"><a href="{ROOT_URL}bookmarks/import/" class="nav-link context-main">Import</a></li>
|
||||
<li class="nav-item context-main-bg mx-1"><a href="{ROOT_URL}bookmarks/export/" class="nav-link context-main">Export</a></li>
|
||||
</ul>
|
||||
{userFolderTabs}
|
||||
0
app/plugins/bookmarks/views/nav/tutorialCrumbs.html
Normal file
0
app/plugins/bookmarks/views/nav/tutorialCrumbs.html
Normal file
9
app/plugins/bookmarks/views/nav/userFolderTabs.html
Normal file
9
app/plugins/bookmarks/views/nav/userFolderTabs.html
Normal file
@ -0,0 +1,9 @@
|
||||
<ul class="nav nav-tabs justify-content-center mt-4" role="tablist">
|
||||
<li class="nav-item context-main-bg mx-1"><a href="{ROOT_URL}bookmarks/folders/" class="nav-link">All</a></li>
|
||||
{LOOP}
|
||||
<li class="nav-item context-main-bg mx-1"><a href="{ROOT_URL}bookmarks/bookmarks/{ID}" class="nav-link">{title}</a></li>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<li class="nav-item context-main-bg mx-1"></li>
|
||||
{/ALT}
|
||||
</ul>
|
||||
66
app/plugins/bookmarks/views/nav/viewOptions.html
Normal file
66
app/plugins/bookmarks/views/nav/viewOptions.html
Normal file
@ -0,0 +1,66 @@
|
||||
<div class="m-3">
|
||||
<div class="card w-100">
|
||||
<div class="card-header text-center context-main-bg">
|
||||
<a class="btn btn-link text-decoration-none" data-bs-toggle="collapse" href="#filterOptions" role="button" aria-expanded="false" aria-controls="filterOptions">
|
||||
<strong class="h3 context-main"><i class="fa-solid fa-fw fa-gears"></i></strong>
|
||||
</a>
|
||||
</div>
|
||||
<div id="filterOptions" class="collapse">
|
||||
<form method="post">
|
||||
<div class="card-body context-second-bg">
|
||||
<fieldset>
|
||||
<!-- Edit Mode -->
|
||||
<div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
|
||||
<div class="me-3 fw-bold">Edit Mode:</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="editModeSwitch" name="editModeSwitch"{editModeSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="editModeSwitch"></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Filters -->
|
||||
<div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
|
||||
<div class="me-3 fw-bold">Status:</div>
|
||||
<div class="form-check form-switch me-3">
|
||||
<input class="form-check-input" type="checkbox" id="showArchivedSwitch" name="showArchivedSwitch"{showArchivedSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="showArchivedSwitch">Show Archived</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="showHiddenSwitch" name="showHiddenSwitch"{showHiddenSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="showHiddenSwitch">Show Hidden</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons Filters -->
|
||||
<div class="d-flex align-items-center border p-2 rounded context-main-bg">
|
||||
<div class="me-3 fw-bold">Buttons:</div>
|
||||
<div class="form-check form-switch me-3">
|
||||
<input class="form-check-input" type="checkbox" id="archiveButtonSwitch" name="archiveButtonSwitch"{archiveButtonSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="archiveButtonSwitch">Archive Button</label>
|
||||
</div>
|
||||
<div class="form-check form-switch me-3">
|
||||
<input class="form-check-input" type="checkbox" id="visibilityButtonSwitch" name="visibilityButtonSwitch"{visibilityButtonSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="visibilityButtonSwitch">Visibility Button</label>
|
||||
</div>
|
||||
<div class="form-check form-switch me-3">
|
||||
<input class="form-check-input" type="checkbox" id="privacyButtonSwitch" name="privacyButtonSwitch"{privacyButtonSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="privacyButtonSwitch">Privacy Button</label>
|
||||
</div>
|
||||
<div class="form-check form-switch me-3">
|
||||
<input class="form-check-input" type="checkbox" id="shareButtonSwitch" name="shareButtonSwitch"{shareButtonSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="shareButtonSwitch">Share Button</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="addButtonSwitch" name="addButtonSwitch"{addButtonSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="addButtonSwitch">Add Button</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-center align-items-center context-main-bg">
|
||||
<button type="submit" name="submit" value="submit" class="btn btn-md atb-green-outline my-2">Save as Default</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
48
app/plugins/bookmarks/views/public/bookmark.html
Normal file
48
app/plugins/bookmarks/views/public/bookmark.html
Normal file
@ -0,0 +1,48 @@
|
||||
<div class="container py-4">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow">
|
||||
<!-- Card Header -->
|
||||
<div class="card-header text-center bg-dark text-white">
|
||||
<h3 class="card-title mb-0">Bookmark</h3>
|
||||
</div>
|
||||
|
||||
<!-- Card Body -->
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
|
||||
<!-- User Details -->
|
||||
<div class="offset-md-2 col-md-8">
|
||||
<table class="table table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Title:</th>
|
||||
<td>{title}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">URL:</th>
|
||||
<td>{url}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Created:</th>
|
||||
<td>{DTC}{createdAt}{/DTC}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Last Refreshed:</th>
|
||||
<td>{DTC}{refreshedAt}{/DTC}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" colspan="2">Icon</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">{iconHtml}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
49
app/plugins/bookmarks/views/public/folder.html
Normal file
49
app/plugins/bookmarks/views/public/folder.html
Normal file
@ -0,0 +1,49 @@
|
||||
<div class="container py-4">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow">
|
||||
<!-- Card Header -->
|
||||
<div class="card-header text-center bg-dark text-white">
|
||||
<h3 class="card-title mb-0">Bookmark Folder</h3>
|
||||
</div>
|
||||
|
||||
<!-- Card Body -->
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
|
||||
<!-- User Details -->
|
||||
<div class="offset-md-2 col-md-8">
|
||||
<table class="table table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Title:</th>
|
||||
<td>{title}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Color:</th>
|
||||
<td>{color}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Added on:</th>
|
||||
<td>{DTC date}{createdAt}{/DTC}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" colspan="2">Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">{description}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-12">
|
||||
{panel}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
30
app/plugins/bookmarks/views/share.html
Normal file
30
app/plugins/bookmarks/views/share.html
Normal file
@ -0,0 +1,30 @@
|
||||
<div class="mb-4 mt-4">
|
||||
<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 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>
|
||||
<p class="px-2 text-muted text-center">
|
||||
This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
|
||||
</p>
|
||||
<hr>
|
||||
</div>
|
||||
{/BKMTUTS}
|
||||
<div class="row g-3" data-masonry='{ "percentPosition": false }' id="bookmarkSort">
|
||||
{LOOP}
|
||||
{panel}
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="col-12">
|
||||
<p class="text-center">No <strong>public</strong> folders found.</p>
|
||||
</div>
|
||||
{/ALT}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
12
app/plugins/bookmarks/views/shareExplainer.html
Normal file
12
app/plugins/bookmarks/views/shareExplainer.html
Normal 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>
|
||||
43
app/plugins/bookmarks/views/tutorials/brave/export.html
Normal file
43
app/plugins/bookmarks/views/tutorials/brave/export.html
Normal file
@ -0,0 +1,43 @@
|
||||
<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>
|
||||
{tutorialCrumbs}
|
||||
<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>
|
||||
45
app/plugins/bookmarks/views/tutorials/brave/import.html
Normal file
45
app/plugins/bookmarks/views/tutorials/brave/import.html
Normal file
@ -0,0 +1,45 @@
|
||||
<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>
|
||||
{tutorialCrumbs}
|
||||
<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>
|
||||
36
app/plugins/bookmarks/views/tutorials/brave/pin.html
Normal file
36
app/plugins/bookmarks/views/tutorials/brave/pin.html
Normal file
@ -0,0 +1,36 @@
|
||||
<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>
|
||||
{tutorialCrumbs}
|
||||
<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>
|
||||
34
app/plugins/bookmarks/views/tutorials/brave/settings.html
Normal file
34
app/plugins/bookmarks/views/tutorials/brave/settings.html
Normal file
@ -0,0 +1,34 @@
|
||||
<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>
|
||||
{tutorialCrumbs}
|
||||
<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="/tutorials/brave/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
38
app/plugins/bookmarks/views/tutorials/card.html
Normal file
38
app/plugins/bookmarks/views/tutorials/card.html
Normal file
@ -0,0 +1,38 @@
|
||||
<section class="container my-5">
|
||||
<h1 class="text-center mb-4">{pretty} Tutorials</h1>
|
||||
<div class="row g-4">
|
||||
<!-- Opera Section -->
|
||||
<div class="col-md-8 offset-2">
|
||||
{tutorialCrumbs}
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-{printed} fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title text-center">{pretty}</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush rounded">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/{printed}/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}tutorials/{printed}/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}tutorials/{printed}/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}tutorials/{printed}/export" class="text-decoration-none atb-green">
|
||||
How to export Bookmarks from the browser
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
43
app/plugins/bookmarks/views/tutorials/chrome/export.html
Normal file
43
app/plugins/bookmarks/views/tutorials/chrome/export.html
Normal file
@ -0,0 +1,43 @@
|
||||
<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>
|
||||
{tutorialCrumbs}
|
||||
<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>
|
||||
45
app/plugins/bookmarks/views/tutorials/chrome/import.html
Normal file
45
app/plugins/bookmarks/views/tutorials/chrome/import.html
Normal file
@ -0,0 +1,45 @@
|
||||
<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>
|
||||
{tutorialCrumbs}
|
||||
<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>
|
||||
36
app/plugins/bookmarks/views/tutorials/chrome/pin.html
Normal file
36
app/plugins/bookmarks/views/tutorials/chrome/pin.html
Normal file
@ -0,0 +1,36 @@
|
||||
<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>
|
||||
{tutorialCrumbs}
|
||||
<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>
|
||||
34
app/plugins/bookmarks/views/tutorials/chrome/settings.html
Normal file
34
app/plugins/bookmarks/views/tutorials/chrome/settings.html
Normal file
@ -0,0 +1,34 @@
|
||||
<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>
|
||||
{tutorialCrumbs}
|
||||
<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="/tutorials/chrome/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
48
app/plugins/bookmarks/views/tutorials/edge/export.html
Normal file
48
app/plugins/bookmarks/views/tutorials/edge/export.html
Normal file
@ -0,0 +1,48 @@
|
||||
<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 Edge</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Exporting your bookmarks is lightning fast and simple inside of Edge.
|
||||
</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/edge/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>Favorites</strong> and another menu should appear.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/favorites.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 3: Open the Favorites Options</h5>
|
||||
<p class="card-text">
|
||||
In this menu, on the top right click the three dots for a final dropdown.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/bookmark-options.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 4: Export your bookmarks</h5>
|
||||
<p class="card-text">
|
||||
From this list, select <strong>Export favorites</strong> and you should be taken to the import page.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/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>
|
||||
64
app/plugins/bookmarks/views/tutorials/edge/import.html
Normal file
64
app/plugins/bookmarks/views/tutorials/edge/import.html
Normal file
@ -0,0 +1,64 @@
|
||||
<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 Edge</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of Edge.
|
||||
</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/edge/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>Favorites</strong> and another menu should appear.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/favorites.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 3: Open the Favorites Options</h5>
|
||||
<p class="card-text">
|
||||
In this menu, on the top right click the three dots for a final dropdown.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/bookmark-options.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 4: Open the Import Page</h5>
|
||||
<p class="card-text">
|
||||
From this list, select <strong>Import favorites</strong> and you should be taken to the import page.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 5: Open the Importer</h5>
|
||||
<p class="card-text">
|
||||
On this page, under the title <strong>Import from other browsers</strong> click the button labeled <strong>Choose what to import</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/import-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 6: Begin Importing</h5>
|
||||
<p class="card-text">
|
||||
Under <strong>Import from</strong> make sure to select <strong>Favorites or bookmarks HTML file</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/import-select.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>
|
||||
36
app/plugins/bookmarks/views/tutorials/edge/pin.html
Normal file
36
app/plugins/bookmarks/views/tutorials/edge/pin.html
Normal file
@ -0,0 +1,36 @@
|
||||
<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 Edge</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Edge extension, you can find it in the
|
||||
<a href="/edge" class="text-decoration-none text-primary" target="_blank">Microsoft Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Once installed, you can add the extension to your Edge 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/edge/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 an eye icon, click this.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/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/edge/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
37
app/plugins/bookmarks/views/tutorials/edge/settings.html
Normal file
37
app/plugins/bookmarks/views/tutorials/edge/settings.html
Normal file
@ -0,0 +1,37 @@
|
||||
<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 Edge</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Edge extension, you can find it in the
|
||||
<a href="/edge" class="text-decoration-none text-primary" target="_blank">Microsoft Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
With Edge, 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/edge/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>Extension 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/edge/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="/tutorials/edge/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
55
app/plugins/bookmarks/views/tutorials/firefox/export.html
Normal file
55
app/plugins/bookmarks/views/tutorials/firefox/export.html
Normal file
@ -0,0 +1,55 @@
|
||||
<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>
|
||||
{tutorialCrumbs}
|
||||
<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 4: Open the Export 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>
|
||||
55
app/plugins/bookmarks/views/tutorials/firefox/import.html
Normal file
55
app/plugins/bookmarks/views/tutorials/firefox/import.html
Normal file
@ -0,0 +1,55 @@
|
||||
<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>
|
||||
{tutorialCrumbs}
|
||||
<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>
|
||||
36
app/plugins/bookmarks/views/tutorials/firefox/pin.html
Normal file
36
app/plugins/bookmarks/views/tutorials/firefox/pin.html
Normal file
@ -0,0 +1,36 @@
|
||||
<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>
|
||||
{tutorialCrumbs}
|
||||
<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 settings icon, click this then select <strong>Pin to Toolbar</strong>
|
||||
</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>
|
||||
52
app/plugins/bookmarks/views/tutorials/firefox/settings.html
Normal file
52
app/plugins/bookmarks/views/tutorials/firefox/settings.html
Normal file
@ -0,0 +1,52 @@
|
||||
<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>
|
||||
{tutorialCrumbs}
|
||||
<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 is a breeze.
|
||||
</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/icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5>Step 2: Open the Add-on manage page</h5>
|
||||
<p class="card-text">
|
||||
From the dropdown menu that appears, select <strong>Manage Extension</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/manage.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 3: Open the extension setting page</h5>
|
||||
<p class="card-text">
|
||||
The extension management page should appear similar to this. In the top right, click these three dots and select <strong>Options</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/manage-select.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
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="/tutorials/firefox/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
247
app/plugins/bookmarks/views/tutorials/list.html
Normal file
247
app/plugins/bookmarks/views/tutorials/list.html
Normal file
@ -0,0 +1,247 @@
|
||||
<section class="container my-5">
|
||||
<h1 class="text-center mb-4">Mobile Tutorials</h1>
|
||||
<div class="row g-4 mb-4">
|
||||
<!-- Apple Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-apple fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title text-center">Apple</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush rounded">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/mobile/iphone" class="text-decoration-none atb-green">
|
||||
How to add the app to your iPhone home-screen.
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Opera Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-android fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title text-center">Android</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush rounded">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/mobile/android" class="text-decoration-none atb-green">
|
||||
How to add the app to your Android home-screen.
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-center mb-4">Browser Tutorials</h1>
|
||||
<div class="row g-4">
|
||||
<!-- Opera Section -->
|
||||
<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}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}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}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}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}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}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}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}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}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}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}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}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}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}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}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}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}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}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}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}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 aria-disabled="true" class="text-decoration-none atb-green disabled">
|
||||
How to pin the extension to your toolbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a aria-disabled="true" class="text-decoration-none atb-green disabled">
|
||||
How to Open the extension settings page
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a aria-disabled="true" class="text-decoration-none atb-green disabled">
|
||||
How to Import Bookmarks into the browser
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a aria-disabled="true" class="text-decoration-none atb-green disabled">
|
||||
How to export Bookmarks from the browser
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{LOGGEDIN}
|
||||
{BKMTUTS}
|
||||
<p class="px-2 text-muted text-center">
|
||||
The Main menu link to this page can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
|
||||
</p>
|
||||
{/BKMTUTS}
|
||||
{/LOGGEDIN}
|
||||
</div>
|
||||
</section>
|
||||
33
app/plugins/bookmarks/views/tutorials/mobile/android.html
Normal file
33
app/plugins/bookmarks/views/tutorials/mobile/android.html
Normal file
@ -0,0 +1,33 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to add the app to your Android home-screen.</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<h5 class="mt-4">Step 1: Open https://allthebookmarks.com in Chrome.</h5>
|
||||
<p class="card-text">
|
||||
from this page, tap the menu icon (three dots) in the top-right corner.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/android/add.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<h5>Step 2: Select "Add to Home screen" and a popup will let you choose the name.</h5>
|
||||
<p class="card-text">
|
||||
Next, tap "Add".
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/android/add2.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<h5>Step 3: A popup will let you drag the icon around or you can simply select "Add to Home screen". </h5>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/android/add3.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
The shortcut will now appear on your home screen.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/android/added.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
24
app/plugins/bookmarks/views/tutorials/mobile/iphone.html
Normal file
24
app/plugins/bookmarks/views/tutorials/mobile/iphone.html
Normal file
@ -0,0 +1,24 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to add the app to your iPhone home-screen</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<h5 class="mt-4">Step 1: Open https://allthebookmarks.com in Safari.</h5>
|
||||
<span class="text-muted">(this is required; Chrome doesn’t support adding shortcuts on iOS)</span>
|
||||
<h5>Step 2: Tap the Share icon (square with an upward arrow).</h5>
|
||||
<p class="card-text">
|
||||
Next, Scroll down and select "Add to Home Screen" then tap "Add".
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/iphone/add.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
The shortcut will appear on your home screen.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/iphone/added.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
28
app/plugins/bookmarks/views/tutorials/mobileCard.html
Normal file
28
app/plugins/bookmarks/views/tutorials/mobileCard.html
Normal file
@ -0,0 +1,28 @@
|
||||
<section class="container my-5">
|
||||
<h1 class="text-center mb-4">{pretty} Tutorials</h1>
|
||||
<div class="row g-4">
|
||||
<!-- Opera Section -->
|
||||
<div class="col-md-8 offset-2">
|
||||
{tutorialCrumbs}
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fa-solid fa-mobile fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title text-center">{pretty}</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush rounded">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/mobile/iphone" class="text-decoration-none atb-green">
|
||||
How to add the app to your iPhone home-screen.
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/mobile/android" class="text-decoration-none atb-green">
|
||||
How to add the app to your Android home-screen.
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
40
app/plugins/bookmarks/views/tutorials/opera/export.html
Normal file
40
app/plugins/bookmarks/views/tutorials/opera/export.html
Normal file
@ -0,0 +1,40 @@
|
||||
<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 Opera</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Exporting your bookmarks is lightning fast and simple inside of Opera.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
<p class="card-text">
|
||||
Simply left-click these three dots in the bottom left of the browser window.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/sidebar.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, click the icon next to <strong>Bookmarks</strong> and another window should open.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 4: Export your bookmarks</h5>
|
||||
<p class="card-text">
|
||||
In the bottom right of the page, click <strong>Import / Export</strong> and select <strong>Export Bookmarks</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/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>
|
||||
48
app/plugins/bookmarks/views/tutorials/opera/import.html
Normal file
48
app/plugins/bookmarks/views/tutorials/opera/import.html
Normal file
@ -0,0 +1,48 @@
|
||||
<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 Opera</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of Opera.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
<p class="card-text">
|
||||
Simply left-click these three dots in the bottom left of the browser window.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/sidebar.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, click the icon next to <strong>Bookmarks</strong> and another window should open.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 3: Open the Import Page</h5>
|
||||
<p class="card-text">
|
||||
In the bottom right of the page, click <strong>Import / Export</strong> and select <strong>Import Bookmarks</strong> and you should be taken to the import page.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 4: Begin Importing</h5>
|
||||
<p class="card-text">
|
||||
In this menu, click the dropdown and make sure to select <strong>Bookmarks HTML file</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/import-select.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>
|
||||
46
app/plugins/bookmarks/views/tutorials/opera/pin.html
Normal file
46
app/plugins/bookmarks/views/tutorials/opera/pin.html
Normal file
@ -0,0 +1,46 @@
|
||||
<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 Opera</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Opera extension, you can find it in the
|
||||
<a href="#" class="text-decoration-none text-primary" target="_blank">Opera Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Once installed, you can add the extension to your Opera 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/opera/extensions.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5 class="mt-4">Step 0: Reveal the extensions toolbar. ( This step may not be required for all users ).</h5>
|
||||
<p class="card-text">
|
||||
If you find that you are having trouble locating the extensions icon, double check that the additional toolbar is expanded.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/toolbar.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 an eye icon, click this.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/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/opera/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
37
app/plugins/bookmarks/views/tutorials/opera/settings.html
Normal file
37
app/plugins/bookmarks/views/tutorials/opera/settings.html
Normal file
@ -0,0 +1,37 @@
|
||||
<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 Opera</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Opera extension, you can find it in the
|
||||
<a href="#" class="text-decoration-none text-primary" target="_blank">Opera Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
With Opera, 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/opera/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/opera/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="/tutorials/opera/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user