wip

app/views/about.html

@@ -1,11 +1,16 @@
-<div class="col-8 mx-auto">
+<div class="col-8 mx-auto p-4 rounded shadow-sm mb-5 context-main-bg">
-    <p>
+    <h2 class="text-center text-primary mb-4">Welcome to AllTheBookmarks</h2>
-        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 class="lead">
+        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 class="text-muted">
+        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 a publicly available product is not a 1-to-1 job. There may be bugs or issues encountered while you use the product. I can't guarantee a fix for every need in every case immediately, but I do actively keep track of bugs and work hard to ensure everyone has a great experience using the app.
     </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.
+        If you encounter any bugs, feel free to report them <a href="#" class="text-primary text-decoration-underline">here</a>. Likewise, there are forms for feedback, reviews, suggestions, and a general contact form. Thanks for taking the time to check out the product!
-    </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 class="text-center mt-4 pb-4">
+        <a href="#" class="btn btn-primary btn-lg px-5">Report a Bug</a>
+        <a href="#" class="btn btn-outline-secondary btn-lg px-5 ms-3">Give Feedback</a>
+    </div>
 </div>

app/views/extensions/brave.html

@@ -10,7 +10,7 @@
     <div class="row g-4">
         <!-- Feature: Add and Manage Bookmarks -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -21,7 +21,7 @@
 
         <!-- Feature: Create Folders -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -32,7 +32,7 @@
 
         <!-- Feature: Set Colors -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -43,7 +43,7 @@
 
         <!-- Feature: Privacy Settings -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>

app/views/extensions/chrome.html

@@ -10,7 +10,7 @@
     <div class="row g-4">
         <!-- Feature: Add and Manage Bookmarks -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -21,7 +21,7 @@
 
         <!-- Feature: Create Folders -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -32,7 +32,7 @@
 
         <!-- Feature: Set Colors -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -43,7 +43,7 @@
 
         <!-- Feature: Privacy Settings -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>

app/views/extensions/edge.html

@@ -10,7 +10,7 @@
     <div class="row g-4">
         <!-- Feature: Add and Manage Bookmarks -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -21,7 +21,7 @@
 
         <!-- Feature: Create Folders -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -32,7 +32,7 @@
 
         <!-- Feature: Set Colors -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -43,7 +43,7 @@
 
         <!-- Feature: Privacy Settings -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>

app/views/extensions/firefox.html

@@ -10,7 +10,7 @@
     <div class="row g-4">
         <!-- Feature: Add and Manage Bookmarks -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -21,7 +21,7 @@
 
         <!-- Feature: Create Folders -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -32,7 +32,7 @@
 
         <!-- Feature: Set Colors -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -43,7 +43,7 @@
 
         <!-- Feature: Privacy Settings -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>

app/views/extensions/index.html

@@ -9,7 +9,7 @@
     <div class="row g-4">
         <!-- Chrome Extension -->
         <div class="col-md-4">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -21,7 +21,7 @@
 
         <!-- Firefox Extension -->
         <div class="col-md-4">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -33,7 +33,7 @@
 
         <!-- Opera Extension -->
         <div class="col-md-4">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -45,7 +45,7 @@
 
         <!-- Brave Extension -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -57,7 +57,7 @@
 
         <!-- Edge Extension -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>

app/views/extensions/opera.html

@@ -10,7 +10,7 @@
     <div class="row g-4">
         <!-- Feature: Add and Manage Bookmarks -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -21,7 +21,7 @@
 
         <!-- Feature: Create Folders -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -32,7 +32,7 @@
 
         <!-- Feature: Set Colors -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>
@@ -43,7 +43,7 @@
 
         <!-- Feature: Privacy Settings -->
         <div class="col-md-6">
-            <div class="card shadow-sm h-100">
+            <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>

app/views/index.html

@@ -156,7 +156,7 @@
 	<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-dark btn-lg px-4">
+		<a href="#compare" class="btn btn-outline-secondary btn-lg px-4">
 			Compare
 		</a>
 	</div>
@@ -166,7 +166,7 @@
 
 <!-- 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 shadow-lg">
+	<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border 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">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>
@@ -220,7 +220,7 @@
 <!-- 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">
+	<table class="table text-center context-main">
 		<thead>
 			<tr>
 				<th style="width: 34%;"></th>
@@ -290,7 +290,7 @@
 <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">
+			<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>
@@ -308,7 +308,7 @@
 			</div>
 		</div>
 		<div class="col">
-			<div class="card mb-4 rounded-3 shadow-sm h-100">
+			<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>
@@ -326,7 +326,7 @@
 			</div>
 		</div>
 		<div class="col">
-			<div class="card mb-4 rounded-3 shadow-sm border-primary h-100">
+			<div class="card mb-4 rounded-3 shadow-sm border-primary h-100 context-main-bg">
 				<div class="card-header py-3 text-bg-primary border-primary">
 					<h4 class="my-0 fw-normal">Yearly</h4>
 				</div>