Feat: Home and Contact pages setup with Altcha bot protection and saving to database using alterntive layout.

static/js/pages/base.js

@@ -61,6 +61,7 @@ export default class BasePage {
         });
 
         this.hookupButtonsNavHome();
+        this.hookupButtonsNavContact();
         // this.hookupButtonsNavAdminHome();
         this.hookupButtonsNavUserAccount();
         this.hookupButtonsNavUserLogout();
@@ -94,6 +95,9 @@ export default class BasePage {
             this.router.navigateToHash(hashPageNav); 
         });
     }
+    hookupButtonsNavContact() {
+        this.hookupButtonsNav('.' + flagNavContact, hashPageContact);
+    }
     /*
     hookupButtonsNavAdminHome() {
         this.hookupButtonsNav('.' + flagNavAdminHome, hashPageAdminHome);

static/js/pages/core/contact-success.js

@@ -0,0 +1,16 @@
+// internal
+import BasePage from "../base.js";
+// vendor
+import { Altcha } from "../../vendor/altcha.js";
+
+export default class PageContactSuccess extends BasePage {
+    static hash = hashPageContactSuccess;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+}

static/js/pages/core/contact.js

@@ -0,0 +1,23 @@
+// internal
+import BasePage from "../base.js";
+// vendor
+import { Altcha } from "../../vendor/altcha.js";
+
+export default class PageContact extends BasePage {
+    static hash = hashPageContact;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        this.hookupButtonSubmitFormContactUs();
+    }
+
+    hookupButtonSubmitFormContactUs() {
+        const button = document.querySelector('form input[type="submit"]');
+        button.classList.add(flagButton);
+        button.classList.add(flagButtonPrimary);
+    }
+}

static/js/router.js

@@ -2,6 +2,8 @@
 // Pages
 // Core
 import PageHome from './pages/core/home.js';
+import PageContact from './pages/core/contact.js';
+import PageContactSuccess from './pages/core/contact-success.js';
 // Dog
 import PageDogHome from './pages/dog/home.js';
 import PageDogCommandCategories from './pages/dog/command_categories.js';
@@ -35,6 +37,8 @@ export default class Router {
         this.pages = {};
         // Core
         this.pages[hashPageHome] = { name: 'PageHome', module: PageHome };
+        this.pages[hashPageContact] = { name: 'PageContact', module: PageContact };
+        this.pages[hashPageContactSuccess] = { name: 'PageContactSuccess', module: PageContactSuccess };
         // Dog
         this.pages[hashPageDogHome] = { name: 'PageDogHome', module: PageDogHome };
         this.pages[hashPageDogCommandCategories] = { name: 'PageDogCommands', module: PageDogCommandCategories };
@@ -59,6 +63,8 @@ export default class Router {
         this.routes = {};
         // Core
         this.routes[hashPageHome] = (isPopState = false) => this.navigateToHash(hashPageHome, isPopState);
+        this.routes[hashPageContact] = (isPopState = false) => this.navigateToHash(hashPageContact, isPopState);
+        this.routes[hashPageContactSuccess] = (isPopState = false) => this.navigateToHash(hashPageContactSuccess, isPopState);
         // Dog
         this.routes[hashPageDogHome] = (isPopState = false) => this.navigateToHash(hashPageDogHome, isPopState);
         this.routes[hashPageDogCommandCategories] = (isPopState = false) => this.navigateToHash(hashPageDogCommandCategories, isPopState);

static/js/test.js

@@ -0,0 +1,23 @@
+document.querySelectorAll('#_r_j_ ul li.bg-card').forEach((li) => {
+    let ratingElement = li.querySelector('section.grid.gap-x-2.items-center.grid-cols-[60px_1fr].sm:flex.grid-rows-[15px_1fr_1fr].sm:grid-rows-1 span.[&>a]:font-semibold.font-semibold.flex.bg-secondary-soft.text-secondary-altFg.rounded-xl.max-w-fit-content.min-w-14.justify-center.p-2.shrink.text-lg.row-start-2.row-span-2');
+    let rating = ratingElement.innerText;
+
+    let nameElement = li.querySelector('section.grid.gap-x-2.items-center.grid-cols-[60px_1fr].sm:flex.grid-rows-[15px_1fr_1fr].sm:grid-rows-1 h3.text-text-neutral-primary.text-base.font-bold.row-span-2.row-start-2.col-start-2');
+    let name = nameElement.innerText
+
+    let postedOnElement = li.querySelector('section.grid.gap-x-2.items-center.grid-cols-[60px_1fr].sm:flex.grid-rows-[15px_1fr_1fr].sm:grid-rows-1 p.[&>a]:font-semibold.font-normal.text-neutral-strong.text-xxs.ml-auto.shrink-0.row-start-1.col-start-2');
+    let postedOn = contentElement.innerText;
+
+    let contentElement = li.querySelector('');
+
+    console.log("\nReview");
+    console.log(`Rating: ${rating}`);
+    console.log(`Rating: ${rating}`);
+    console.log(`Rating: ${rating}`);
+    console.log(`Rating: ${rating}`);
+    console.log(`Rating: ${rating}`);
+    console.log(`Rating: ${rating}`);
+});
+/*
+html body.flex.h-full.flex-col.bg-main.text-main-fg.antialiased.__variable_605d37.__variable_6549f3.__className_6549f3 main.flex.min-h-screen.flex-col.items-center.justify-between div.flex.size-full.min-h-screen.flex-col.items-center.justify-between.bg-neutral-0 div.fixed.inset-0.flex.z-20.overflow-hidden dialog.fixed.left-0.top-0.z-50.m-0.size-full.max-h-none.max-w-none.bg-main.p-0.backdrop:bg-[#000]/50.backdrop:backdrop-blur-sm.md:bg-transparent.md:px-10.md:py-5 div#_r_j_.max-w-full.max-h-full.self-center.mx-auto.z-40.flex.size-full.flex-col.md:rounded-lg.md:bg-main.md:shadow-xl div.flex.flex-1.overflow-hidden div.flex-1.overflow-y-auto div.flex.flex-1.flex-col.items-center.gap-4.rounded-b-lg.bg-[#F4F3F0].px-4.py-6 ul.grid.w-full.grid-cols-1.gap-4 li.bg-card.rounded-2xl.flex.flex-col.p-4.gap-3.border.border-neutral-200 section.grid.gap-x-2.items-center.grid-cols-[60px_1fr].sm:flex.grid-rows-[15px_1fr_1fr].sm:grid-rows-1 p.[&>a]:font-semibold.font-normal.text-neutral-strong.text-xxs.ml-auto.shrink-0.row-start-1.col-start-2
+*/