108 lines
5.5 KiB
HTML
108 lines
5.5 KiB
HTML
<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> |