all atb changes

This commit is contained in:
Joey Kimsey
2025-02-05 23:57:17 -05:00
parent 2ac64e5c49
commit ffb82b1192
328 changed files with 12384 additions and 2477 deletions

View File

@ -1,75 +1,354 @@
<div class="container">
<div id="myCarousel" class="carousel slide m-3" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{ROOT_URL}app/images/ttp.png" class="bd-placeholder-img" alt="First slide">
<div class="container">
<div class="carousel-caption text-start bg-dark px-4">
<h1>Powerful</h1>
<p>
The Tempus Project is built with expansion in mind. From a custom template engine to the simple to use MVC style, The Tempus Project is built to provide a powerful and stable foundation for web applications.
</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="{ROOT_URL}app/images/ttp-install.png" class="bd-placeholder-img" alt="Second slide">
<div class="container">
<div class="carousel-caption bg-dark px-4">
<h1>Quick and Simple Installation</h1>
<p>
Built with rapid deployment in mind you can have The Tempus Project installed in just minutes.
</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="{ROOT_URL}app/images/ttp-gitlab.png" class="bd-placeholder-img" alt="Third slide">
<div class="container">
<div class="carousel-caption text-end bg-dark px-4">
<h1>Open Source</h1>
<p>
The Tempus Project is completely open source and only utilizes other open-source components. The Project is provided under the MIT license.
</p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon text-dark" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon text-dark" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="row m-3">
<div class="col-lg-9 col-md-9 col-sm-12 col-centered">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h2>Welcome to The Tempus Project</h2>
<hr>
<p>The aim of The Tempus Project is to create an easy to use and implement CMS based
around the MVC style and build using php 5.6 and MySQL. Here are some of the features:</p>
<ul>
<li>Fully secured registration/login system</li>
<li>Automatic error handling</li>
<li>Built in debugging tools</li>
<li>Testing implements to help you expand it further</li>
<li>Customizable logging to ensure you are always up to date on whats going on</li>
<li>Simple administration panel</li>
<li>Bug reports and feedback forms included!</li>
<li>Drag and drop simple to install</li>
</ul>
<p>DISCLAIMER: as of January 1, 2025 this code is not production ready! Please use at your own risk! That being said, I am always trying to improve this system. If you have any suggestions or need to report a bug, you can do so on my <a href="https://github.com/TheTempusProject/TheTempusProject">GitHub</a>.</p>
</div>
</div>
</div>
</div>
<!-- AllTheBookmarks - In one place -->
<div class="px-4 pt-5 my-5 text-center border-bottom border-white">
<h1 class="display-4 fw-bold">AllTheBookmarks - In one place</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Quickly add and manage an internet worth of bookmarks with AllTheBookmarks, my personal favorite app for keeping track of dead memes long after they outlive their hilarity.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
<a href="#pricing" class="btn atb-green-bg btn-lg px-4 me-sm-3">
Buy Now (Too Fast)
</a>
<a href="#features" class="btn btn-outline-secondary btn-lg px-4 atb-green-outline">
Learn More
</a>
</div>
</div>
<div class="overflow-hidden" style="max-height: 30vh;">
<div class="container px-5">
<img src="{ROOT_URL}images/manage.png" class="img-fluid border border-white rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
</div>
</div>
</div>
<div class="b-example-divider"></div>
<!-- All the stuff you need -->
<div class="container px-4 py-5" id="features">
<h2 class="pb-2 border-bottom atb-green border-white">All the stuff you need, none of the stuff you don't!</h2>
<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
<div class="d-flex flex-column align-items-start gap-2">
<h3 class="fw-bold">I just wanted something cross-browser for storing bookmarks.</h3>
<p class="text-muted">KISS - Aside from making the interface nicer, this app is all I needed.</p>
</div>
<div class="row row-cols-1 row-cols-sm-2 g-4">
<div class="d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center atb-green-bg fs-4 rounded-3">
<i class="fa fa-fw fa-add"></i>
</div>
<h4 class="fw-semibold mb-0">Add</h4>
<p class="text-muted">Whether its through the web-interface or supported browser extensions, you can add bookmarks from (almost) anywhere.</p>
</div>
<div class="d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center atb-green-bg fs-4 rounded-3">
<i class="fa fa-fw fa-solid fa-list-check"></i>
</div>
<h4 class="fw-semibold mb-0">Manage</h4>
<p class="text-muted">Create folders, tag links, keep notes and create custom dashboards.</p>
</div>
<div class="d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center atb-green-bg fs-4 rounded-3">
<i class="fa fa-fw fa-share"></i>
</div>
<h4 class="fw-semibold mb-0">Share</h4>
<p class="text-muted">All links are kept private by default but if you need to share with a friend or co-worker you can change this setting individually or for entire folders.</p>
</div>
<div class="d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center atb-green-bg fs-4 rounded-3">
<i class="fa-solid fa-arrow-right-arrow-left"></i>
</div>
<h4 class="fw-semibold mb-0">Import / Export</h4>
<p class="text-muted">Sometimes you just want to dump everything out and see what you have, our import and export tools allow you to easily etch-a-sketch your bookmarks.</p>
</div>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<!-- It can be difficult -->
<div class="container col-xxl-8 px-4 py-5">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-lg-6">
<img src="{ROOT_URL}images/folders.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
</div>
<div class="col-lg-6">
<h1 class="display-5 fw-bold lh-1 mb-3">It can be difficult to keep track of... all of the internet</h1>
<p class="lead">With a million and one devices from all three companies, it can be a lot to manage. From work links, to Instagram stories, ticktocks for cooking, to Pinterest for Halloween; we consume a thousand different sources in a hundred different ways. Keep it all centralized with a new forth company!</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<a href="#pricing" class="btn btn-primary atb-green-bg btn-lg px-4 me-md-2">
Buy Now (Still too fast)
</a>
<a href="#darkmode" class="btn btn-outline-secondary btn-lg px-4 atb-green-outline">
Keep Learning?
</a>
</div>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<!-- Don't be afraid of the dark -->
<div class="bg-dark text-secondary px-4 py-5 text-center" id="darkmode">
<div class="py-5">
<h1 class="display-5 fw-bold text-white">Don't be afraid of the dark.</h1>
<div class="col-lg-6 mx-auto">
<p class="fs-5 mb-4">Not everyone is a night owl or dark dweller, and those people are... fine. But for the rest of us, dark mode rules them all. Dark mode is available site-wide, free of charge! (Its also included in all products!)</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-outline-light btn-lg px-4" id="dark-mode-toggle-button">Enable Now</button>
</div>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<!-- Never Browse without it -->
<div class="container px-4 py-5" id="extension">
<h2 class="pb-2 border-bottom border-white atb-green">Never Browse without it</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start">
<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<i class="fa fa-brands fa-fw fa-chrome text-primary"></i>
</div>
<div>
<h3 class="fs-2">Chrome Extension</h3>
<p>Quickly add new bookmarks to your "2017 Taxes" folder with ease! Keep them private or share it with the other haberdashers from any page.</p>
<a href="/extensions/chrome" class="btn btn-primary atb-green-bg">
Download Now
</a>
</div>
</div>
<div class="col d-flex align-items-start">
<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<i class="fa-brands fa-fw fa-firefox text-warning"></i>
</div>
<div>
<h3 class="fs-2">Firefox Extension</h3>
<p>Funny enough, Firefox is basically just chrome now.</p>
<a href="/extensions/firefox" class="btn btn-primary atb-green-bg">
Download Now
</a>
</div>
</div>
<div class="col d-flex align-items-start">
<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<i class="fa-brands fa-fw fa-opera text-danger"></i>
</div>
<div>
<h3 class="fs-2">Opera Extension</h3>
<p>This is also Chrome.</p>
<a href="/extensions/opera" class="btn btn-primary atb-green-bg">
Download Now
</a>
</div>
</div>
</div>
<p><a href="/extensions/brave"><i class="fa-brands fa-fw fa-brave text-danger"></i></a> and <a href="/extensions/edge"><i class="fa-brands fa-fw fa-edge text-info"></i></a> are Chrome too.</p>
</div>
<div class="b-example-divider"></div>
<!-- Pricing -->
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
<h1 class="display-4 fw-normal">Pricing</h1>
<p class="fs-5 text-muted">The pricing is very straight-forward: free, monthly, yearly.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<a href="#compare" class="btn btn-outline-secondary btn-lg px-4 atb-green-outline">
Compare
</a>
</div>
</div>
<div class="b-example-divider"></div>
<!-- Clean, Simple, Direct -->
<div class="container my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border border-white shadow-lg context-main-bg">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
<h1 class="display-4 fw-bold lh-1 atb-green">Clean, Simple, Direct</h1>
<p class="lead">An intuitive app with a sleep, modern design is the goal. There is no need for hundreds of bells in whistles, no bluetooth, no AII to tell you what your best bookmark is, just a simple app to make life easier.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
<a href="#pricing" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold atb-green-bg">
Buy Now
</a>
<a href="/register" class="btn btn-outline-secondary btn-lg px-4 atb-green-outline">
Sign-Up for Free
</a>
</div>
</div>
<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
<img class="rounded-lg-3" src="{ROOT_URL}images/dashboard.png" alt="" width="720">
</div>
</div>
</div>
<div class="b-example-divider"></div>
<!-- Built to.... work -->
<div class="container px-4 py-5" id="featured-3">
<h2 class="pb-2 border-bottom border-white">Built to.... work</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center atb-green-bg fs-2 mb-3">
<i class="fa-solid fa-bolt"></i>
</div>
<h3 class="fs-2">Versatile</h3>
<p>Built to be a responsive application, AllTheBookmarks can be easily accessed and used from any web-enabled device.</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center atb-green-bg fs-2 mb-3">
<i class="fa-solid fa-star"></i>
</div>
<h3 class="fs-2">Simple</h3>
<p>At the end of the day, you are managing a giant list of websites, lets not complicate that too much eh?</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center atb-green-bg fs-2 mb-3">
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<h3 class="fs-2">Robust</h3>
<p>This tool was built by a web-developer for a web-developer. Perfection not guaranteed, but it is built to last.</p>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<!-- Compare plans -->
<div class="table-responsive pricing-container container pb-4" id="compare">
<h1 class="display-6 text-center my-4">Compare plans</h1>
<table class="table text-center context-main border-white">
<thead>
<tr>
<th style="width: 34%;"></th>
<th style="width: 22%;">Free</th>
<th style="width: 22%;">Monthly</th>
<th style="width: 22%;">Yearly</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-start">Add and Manage Bookmarks</th>
<td><i class="fa fa-fw fa-check"></i></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
</tr>
<tr>
<th scope="row" class="text-start">Extensions for all major browsers</th>
<td><i class="fa fa-fw fa-check"></i></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
</tr>
<tr>
<th scope="row" class="text-start">Access from any device</th>
<td><i class="fa fa-fw fa-check"></i></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
</tr>
<tr>
<th scope="row" class="text-start">Share bookmarks and folders</th>
<td><i class="fa fa-fw fa-check"></i></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
</tr>
<tr>
<th scope="row" class="text-start">Import/Export Features</th>
<td></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
</tr>
<tr>
<th scope="row" class="text-start">Customizable Dashboards / Pages</th>
<td></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
</tr>
<tr>
<th scope="row" class="text-start">Request/Influence Development</th>
<td></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
</tr>
<tr>
<th scope="row" class="text-start">Early Access</th>
<td></td>
<td><i class="fa fa-fw fa-check atb-green"></i></td>
<td><i class="fa-solid fa-check atb-green"></i></td>
</tr>
<tr>
<th scope="row" class="text-start">Cheaper</th>
<td></td>
<td></td>
<td><i class="fa-solid fa-check atb-green"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="b-example-divider"></div>
<!-- Plan Choices -->
<div class="d-flex justify-content-center" id="pricing">
<div class="pricing-container container row row-cols-1 row-cols-md-3 my-5 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm h-100 context-main-bg">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Free</h4>
</div>
<div class="card-body d-flex flex-column">
<h1 class="card-title pricing-card-title">&#36;0<small class="text-muted fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Add / Manage your bookmarks</li>
<li>Extensions for all major browsers</li>
<li>Access from any device</li>
<li>Share access with anyone</li>
</ul>
<a href="/register" class="mt-auto w-100 btn btn-lg atb-green-outline">
Sign-Up for Free
</a>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm h-100 context-main-bg">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Monthly</h4>
</div>
<div class="card-body d-flex flex-column">
<h1 class="card-title pricing-card-title">&#36;4.99<small class="text-muted fw-light">/month</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Import/Export Features</li>
<li>Integration with TempusTools App (WIP)</li>
<li>Customizable Dashboards / Pages</li>
<li>Direct control of Feature Development</li>
<li>Early Access to new features</li>
</ul>
<a href="/member/signup/monthly" class="mt-auto w-100 btn btn-lg atb-green-bg">
Get started
</a>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm atb-green-outline-only h-100 context-main-bg">
<div class="card-header py-3 atb-green-bg">
<h4 class="my-0 fw-normal">Yearly</h4>
</div>
<div class="card-body d-flex flex-column">
<h1 class="card-title pricing-card-title">&#36;19.99<small class="text-muted fw-light">/year</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Its cheaper if you like the product</li>
</ul>
<a href="/member/signup/yearly" class="mt-auto w-100 btn btn-lg atb-green-bg">
Get started
</a>
</div>
</div>
</div>
</div>
</div>
<div class="text-center py-3">
<a href="#top" class="btn atb-green-outline">Back to Top</a>
</div>