update to bootstrap 5.2.3 continued

This commit is contained in:
Joey Kimsey
2024-12-10 09:00:49 -05:00
parent f3f323d30f
commit a0726e6578
23 changed files with 584 additions and 345 deletions

View File

@ -0,0 +1,11 @@
<div class="col-8 mx-auto">
<p>
AllTheBookmarks was built out of a need to manage my own bookmarks better. As a web developer, I would not only use urls for every aspect of my job, but i also needed to switch browsers, operating systems, or devices. For years I had a version of this tool that I used on my own local network. In 2025 I'm bringing it to anyone who wants it.
</p>
<p>
Right now this entire system was built and managed by myself. As stated, I have used my own version of this for years but translating it to publicly available is not a 1 to 1 job. There may be bugs or issues encountered while you use the produxct. I can't guarantee a fix for every need in every case immidiately, but I do actively keep track of bugs and work hard to ensure everyone has a great experiience usiing the app.
</p>
<p>
If you encounter any bugs, feel free to report it here. Likewise, there are forms for feedback, reviews, suggestions, and a general contact form. Thanks for taking the time to check out the product!
</p>
</div>

67
app/views/faq.html Normal file
View File

@ -0,0 +1,67 @@
<div class="container py-5">
<h1 class="mb-4">Frequently Asked Questions</h1>
<!-- Table of Contents -->
<div class="mb-5">
<h2 class="h4">Table of Contents</h2>
<ul class="list-unstyled">
<li><a href="#question1" class="text-decoration-none">Does this work on mobile?</a></li>
<li><a href="#question2" class="text-decoration-none">Does this work on Mac/PC/Linux?</a></li>
<li><a href="#question3" class="text-decoration-none">How do I use the extension on my mobile device?</a></li>
<li><a href="#question4" class="text-decoration-none">How do I add this to my phone like an app?</a></li>
</ul>
</div>
<!-- Accordion for Questions -->
<div class="accordion" id="faqAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="heading1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
Does this work on mobile?
</button>
</h2>
<div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1" data-bs-parent="#faqAccordion">
<div class="accordion-body" id="question1">
Yes, this works seamlessly on mobile devices.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
Does this work on Mac/PC/Linux?
</button>
</h2>
<div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#faqAccordion">
<div class="accordion-body" id="question2">
Yes, it is compatible with Mac, PC, and Linux platforms.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
How do I use the extension on my mobile device?
</button>
</h2>
<div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#faqAccordion">
<div class="accordion-body" id="question3">
To use the extension on mobile, open your browser, install the extension, and follow the setup instructions.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
How do I add this to my phone like an app?
</button>
</h2>
<div id="collapse4" class="accordion-collapse collapse" aria-labelledby="heading4" data-bs-parent="#faqAccordion">
<div class="accordion-body" id="question4">
You can add it to your phone by installing the app or creating a shortcut from your browser to your home screen.
</div>
</div>
</div>
</div>
</div>

View File

@ -1,13 +1,11 @@
<div class="container border-top mt-4">
<footer class="py-5">
<footer class="pt-4">
<div class="row">
{FOOTER_LEFT}
{FOOTER_CENTER}
{FOOTER_RIGHT}
{FOOTER_LEFT}
{FOOTER_CENTER}
{FOOTER_RIGHT}
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<div class="d-flex flex-column flex-sm-row justify-content-between py-3 mt-2 border-top">
{COPY}
{SOCIAL}
</div>

View File

@ -1,6 +1,7 @@
<div class="col-6 col-md-2 mb-3 d-flex">
<div class="material-switch mt-5 mx-auto">
<div class="col-6 col-md-2 mb-3">
<h5>Dark Mode</h5>
<div class="material-switch px-4">
<input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" />
<label for="dark-mode-toggle" class="label-default"></label>
</div>
</div>
</div>

View File

@ -1,5 +1,5 @@
<ul class="nav nav-tabs" role="tablist">
<ul class="nav nav-tabs justify-content-center" role="tablist">
{LOOP}
<li><a href="{url}" class="nav-link">{name}</a></li>
<li class="nav-item"><a href="{url}" class="nav-link">{name}</a></li>
{/LOOP}
</ul>

View File

@ -1,60 +1,73 @@
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-8 col-sm-offset-0 col-md-offset-3 col-lg-offset-2 top-pad" >
<div class="card panel-primary">
<div class="card-header">
<h3 class="card-title">{username}</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-3 col-lg-3 " align="center">
<img alt="User Pic" src="{ROOT_URL}{avatar}" class="img-circle img-responsive">
</div>
<div class=" col-md-9 col-lg-9 ">
<table class="table table-user-primary">
<tbody>
{ADMIN}
<tr>
<td>Confirmed:</td>
<td>{confirmedText}</td>
</tr>
{/ADMIN}
<tr>
<td>registered:</td>
<td>{DTC}{registered}{/DTC}</td>
</tr>
<tr>
<td>Last seen</td>
<td>{DTC}{lastLogin}{/DTC}</td>
</tr>
<tr>
<td>Gender</td>
<td>{gender}</td>
</tr>
{ADMIN}
<tr>
<td>Email</td>
<td><a href="mailto:{email}">{email}</a></td>
</tr>
<td>User ID</td>
<td>{ID}</td>
</tr>
{/ADMIN}
</tbody>
</table>
</div>
</div>
</div>
<div class="card-footer">
<a href="{ROOT_URL}messages/create?prepopuser={USERNAME}" data-original-title="Broadcast Message" data-bs-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="fa fa-fw fa-envelope"></i></a>
{ADMIN}
<span class="float-right">
<a href="{ROOT_URL}admin/users/edit/{ID}" data-original-title="Edit this user" data-bs-toggle="tooltip" type="button" class="btn btn-sm btn-warning"><i class="fa fa-fw fa-pencil-square"></i></a>
<a href="{ROOT_URL}admin/users/delete/{ID}" data-original-title="Remove this user" data-bs-toggle="tooltip" type="button" class="btn btn-sm btn-danger"><i class="fa fa-fw fa-times"></i></a>
</span>
{/ADMIN}
</div>
</div>
</div>
</div>
</div>
<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">{username}</h3>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="row align-items-center">
<!-- User Image -->
<div class="col-md-4 text-center">
<img src="{ROOT_URL}{avatar}" alt="User Pic" class="rounded-circle img-fluid" style="max-width: 150px;">
</div>
<!-- User Details -->
<div class="col-md-8">
<table class="table table-borderless">
<tbody>
{ADMIN}
<tr>
<th scope="row">Confirmed:</th>
<td>{confirmedText}</td>
</tr>
{/ADMIN}
<tr>
<th scope="row">Registered:</th>
<td>{DTC}{registered}{/DTC}</td>
</tr>
<tr>
<th scope="row">Last Seen:</th>
<td>{DTC}{lastLogin}{/DTC}</td>
</tr>
<tr>
<th scope="row">Gender:</th>
<td>{gender}</td>
</tr>
{ADMIN}
<tr>
<th scope="row">Email:</th>
<td><a href="mailto:{email}">{email}</a></td>
</tr>
<tr>
<th scope="row">User ID:</th>
<td>{ID}</td>
</tr>
{/ADMIN}
</tbody>
</table>
</div>
</div>
</div>
<!-- Admin Controls -->
<div class="card-footer text-center">
<a href="{ROOT_URL}messages/create?prepopuser={USERNAME}" class="btn btn-primary btn-sm me-2" data-bs-toggle="tooltip" title="Broadcast Message">
<i class="fa fa-envelope"></i> Message
</a>
{ADMIN}
<a href="{ROOT_URL}admin/users/edit/{ID}" class="btn btn-warning btn-sm me-2" data-bs-toggle="tooltip" title="Edit User">
<i class="fa fa-pencil-square"></i> Edit
</a>
<a href="{ROOT_URL}admin/users/delete/{ID}" class="btn btn-danger btn-sm" data-bs-toggle="tooltip" title="Delete User">
<i class="fa fa-times"></i> Delete
</a>
{/ADMIN}
</div>
</div>
</div>
</div>
</div>

View File

@ -1,46 +1,65 @@
<form action="" method="post" class="form-horizontal">
<legend>Register</legend>
<form action="" method="post" class="container py-4">
<h2 class="text-center mb-4">Create an Account</h2>
<fieldset>
<div class="form-group">
<label for="username" class="col-lg-6 control-label">Username:</label>
<!-- Username -->
<div class="mb-3 row">
<label for="username" class="col-lg-6 col-form-label text-end">Username:</label>
<div class="col-lg-2">
<input class="form-control" type="text" name="username" id="username">
<input type="text" class="form-control" name="username" id="username" required>
</div>
</div>
<div class="form-group">
<label for="email" class="col-lg-6 control-label">Email:</label>
<!-- Email -->
<div class="mb-3 row">
<label for="email" class="col-lg-6 col-form-label text-end">Email:</label>
<div class="col-lg-2">
<input class="form-control" type="email" name="email" id="email">
<input type="email" class="form-control" name="email" id="email" required>
</div>
</div>
<div class="form-group">
<label for="email2" class="col-lg-6 control-label">Re-Enter Email:</label>
<!-- Re-enter Email -->
<div class="mb-3 row">
<label for="email2" class="col-lg-6 col-form-label text-end">Re-Enter Email:</label>
<div class="col-lg-2">
<input class="form-control" type="email" name="email2" id="email2">
<input type="email" class="form-control" name="email2" id="email2" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-6 control-label">Password:</label>
<!-- Password -->
<div class="mb-3 row">
<label for="password" class="col-lg-6 col-form-label text-end">Password:</label>
<div class="col-lg-2">
<input class="form-control" type="password" name="password" id="password">
<input type="password" class="form-control" name="password" id="password" required>
</div>
</div>
<div class="form-group">
<label for="password2" class="col-lg-6 control-label">Re-Enter Password:</label>
<!-- Re-enter Password -->
<div class="mb-3 row">
<label for="password2" class="col-lg-6 col-form-label text-end">Re-Enter Password:</label>
<div class="col-lg-2">
<input class="form-control" type="password" name="password2" id="password2">
<input type="password" class="form-control" name="password2" id="password2" required>
</div>
</div>
<div class="form-group">
<center>
I have read and agree to the Terms of Service
<input type="checkbox" name="terms" id="terms" value="1"/>
<div class="terms">
{TERMS}
</div>
</center>
<!-- Terms of Service -->
<div class="mb-3 text-center">
<div class="">
<input type="checkbox" class="form-check-input" name="terms" id="terms" value="1" required>
<label for="terms" class="form-check-label">
I have read and agree to the <a href="/home/terms" class="text-primary">Terms of Service</a>
</label>
</div>
<div class="terms mt-2 mx-auto">
{TERMS}
</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 btn-primary btn-lg">Sign up</button>
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<button name="submit" value="submit" type="submit" class="btn btn-lg btn-primary center-block">Sign up</button><br>
</form>
</form>

View File

@ -1,19 +1,21 @@
<form action="" method="post" class="form-horizontal">
<legend>Email Settings</legend>
<fieldset>
<div class="form-group">
<label for="email" class="col-lg-3 control-label">New Email:</label>
<div class="col-lg-2">
<input class="form-control" type="email" name="email" id="email">
</div>
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-md-4">
<form action="" method="post">
<legend>Email Settings</legend>
<fieldset>
<div class="mb-3">
<label for="email" class="form-label">New Email:</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Enter new email">
</div>
<div class="mb-3">
<label for="email2" class="form-label">Re-type Email:</label>
<input type="email" class="form-control" name="email2" id="email2" placeholder="Re-enter new email">
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<button name="submit" value="submit" type="submit" class="btn btn-primary">Update</button>
</form>
</div>
<div class="form-group">
<label for="email2" class="col-lg-3 control-label">Re-type email:</label>
<div class="col-lg-2">
<input class="form-control" type="email" name="email2" id="email2">
</div>
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<button name="submit" value="submit" type="submit" class="btn btn-lg btn-primary center-block">Update</button><br>
</form>
</div>
</div>

View File

@ -1,25 +1,25 @@
<form action="" method="post" class="form-horizontal">
<legend>Change Password</legend>
<fieldset>
<div class="form-group">
<label for="curpass" class="col-lg-3 control-label">Current Password:</label>
<div class="col-lg-3">
<input class="form-control" type="password" name="curpass" id="curpass">
</div>
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-md-4">
<form action="" method="post">
<legend>Change Password</legend>
<fieldset>
<div class="mb-3">
<label for="curpass" class="form-label">Current Password:</label>
<input type="password" class="form-control" name="curpass" id="curpass" placeholder="Enter current password">
</div>
<div class="mb-3">
<label for="password" class="form-label">New Password:</label>
<input type="password" class="form-control" name="password" id="password" placeholder="Enter new password">
</div>
<div class="mb-3">
<label for="password2" class="form-label">Re-type New Password:</label>
<input type="password" class="form-control" name="password2" id="password2" placeholder="Re-enter new password">
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<button name="submit" value="submit" type="submit" class="btn btn-primary">Update</button>
</form>
</div>
<div class="form-group">
<label for="password" class="col-lg-3 control-label">New Password:</label>
<div class="col-lg-3">
<input class="form-control" type="password" name="password" id="password">
</div>
</div>
<div class="form-group">
<label for="password2" class="col-lg-3 control-label">Re-Type New Password:</label>
<div class="col-lg-3">
<input class="form-control" type="password" name="password2" id="password2">
</div>
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<button name="submit" value="submit" type="submit" class="btn btn-lg btn-primary center-block">Update</button><br>
</form>
</div>
</div>

View File

@ -1,6 +1,14 @@
<form action="" method="post" class="form-horizontal" enctype="multipart/form-data">
<legend>Preferences</legend>
{PREFERENCES_FORM}
<input type="hidden" name="token" value="{TOKEN}">
<button name="submit" value="submit" type="submit" class="btn btn-lg btn-primary center-block">Update</button><br>
</form>
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-md-4">
<form action="" method="post" class="form-horizontal" enctype="multipart/form-data">
<legend>Preferences</legend>
<fieldset>
{PREFERENCES_FORM}
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<button name="submit" value="submit" type="submit" class="btn btn-primary">Update</button>
</form>
</div>
</div>
</div>