/* ========================================================= */
/* Concrete Top Navigation Bar via PHP data + q-components */
/* ========================================================= */
/* ========================================================= */
/* Component: brand */
/* ========================================================= */
q-component c5-navbar-brand {
q-property href: "#"
q-property text: ""
a.navbar-brand {
href: "${this.component.href}"
slot { logos }
span.c5-brand-text {
text { ${this.component.text} }
}
}
}
/* ========================================================= */
/* Component: normal nav link */
/* Slots: effects */
/* ========================================================= */
q-component c5-navbar-link {
q-property label: ""
q-property url: "#"
q-property target: "_self"
q-property classes: ""
li.nav-item {
a {
class: "nav-link ${this.component.classes}"
target: "${this.component.target}"
href: "${this.component.url}"
span.c5-nav-label {
text { ${this.component.label} }
}
span.c5-nav-effect {
slot { effects }
}
}
}
}
/* ========================================================= */
/* Component: dropdown nav link */
/* Slots: children, effects */
/* ========================================================= */
q-component c5-navbar-submenu {
q-property label: ""
q-property url: "#"
q-property target: "_self"
q-property classes: ""
li.nav-item.dropdown.w3-theme-d4 {
a {
class: "w3-theme-d4 nav-link dropdown-toggle ${this.component.classes}"
data-concrete-toggle: "dropdown"
target: "${this.component.target}"
href: "javascript:void(0)"
span.c5-nav-label {
text { ${this.component.label} }
}
span.c5-nav-effect {
slot { effects }
}
}
ul.dropdown-menu.w3-theme-d4 {
slot { children }
}
}
}
/* ========================================================= */
/* Component: dropdown child link */
/* ========================================================= */
q-component c5-navbar-dropdown-link {
q-property label: ""
q-property url: "#"
q-property target: "_self"
q-property classes: ""
li {
a {
class: "w3-theme-d3 dropdown-item ${this.component.classes}"
target: "${this.component.target}"
href: "${this.component.url}"
text { ${this.component.label} }
}
}
}
/* ========================================================= */
/* Component: search form */
/* ========================================================= */
q-component c5-navbar-search {
q-property action: ""
q-property searchLabel: "Search"
form {
method: "get"
action: "${this.component.action}"
input.form-control {
type: "search"
name: "query"
placeholder: "${this.component.searchLabel}"
aria-label: "${this.component.searchLabel}"
}
button.btn.btn-light.bg-white.ms-2 {
type: "submit"
i.fas.fa-search.text-secondary { }
}
}
}
/* ========================================================= */
/* Component: language switcher */
/* ========================================================= */
q-component c5-language-switcher {
q-property label: "Switch Language"
div.dropdown-center.ms-3.order-2 {
button.btn.btn-link.dropdown-toggle.d-block.mx-auto {
type: "button"
data-bs-toggle: "dropdown"
aria-expanded: "false"
i.fas.fa-globe { }
span.d-lg-none.ms-2 {
text { ${this.component.label} }
}
}
ul.dropdown-menu.dropdown-menu-lg-end.w-100 {
slot { items }
}
}
}
/* ========================================================= */
/* Component: global nav particles */
/* ========================================================= */
q-component c5-navbar-particles {
/* particle-emitter {
id: "t120-emitter"
emitrate: "74"
lifetime: "700"
lifetimevariation: "90"
xvelocity: "0"
yvelocity: "-1.75"
xacceleration: "0"
yacceleration: "0.0028"
startsize: "25"
endsize: "1"
startopacity: "0.5"
endopacity: "0.02"
startsizevariation: "7"
endsizevariation: "5"
startopacityvariation: "0.16"
endopacityvariation: "0.02"
x: "110"
y: "114"
xvariation: "845"
yvariation: "20"
xvelocityvariation: "0"
yvelocityvariation: "0.04"
xaccelerationvariation: "0"
yaccelerationvariation: "0.005"
maxactiveparticles: "166"
maxactiveparticlesvariation: "18"
running: "true"
interval: "10"
src: "/packages/qhtml6/dist/assets/particle.png"
color: "#08c473"
qhtml-unsynced: "1"
style {
position: absolute
inset: 0px
display: block
pointer-events: none
overflow: hidden
z-index: 1
}
} */
}
/* ========================================================= */
/* Render navbar */
/* ========================================================= */
div.ccm-block-top-navigation-bar.w3-theme-d4 {
nav.w3-theme-d4.navbar.navbar-expand-lg.navbar-dark {
/* html { } */
div.w3-theme-d4.container-fluid {
c5-navbar-brand {
href: "https://datafault.net/"
text: ""
logos {
img {
src: "https://datafault.net/application/files/3117/5788/1082/datafault-logo.png"
class: "logo"
}
}
}
button.navbar-toggler.collapsed {
type: "button"
data-bs-toggle: "collapse"
data-bs-target: "#top-navigation-bar-621"
aria-controls: "top-navigation-bar-621"
aria-expanded: "false"
aria-label: "Toggle Navigation"
span.icon-bar { }
span.icon-bar { }
span.icon-bar { }
}
div.w3-theme-d4.collapse.navbar-collapse.qhtml-navbar-menu {
id: "top-navigation-bar-621"
ul.navbar-nav.w3-theme-d4 {
c5-navbar-submenu {
label: "qhtml-js"
url: "https://datafault.net/"
target: "_self"
classes: ""
children {
c5-navbar-dropdown-link {
label: "QHTML6 Github Repo"
url: "https://github.com/qhtml/qhtml6"
target: "_blank"
classes: ""
}
c5-navbar-dropdown-link {
label: "qhtml6 documentation"
url: "https://qhtml.github.io/qhtml6/doc/"
target: "_blank"
classes: ""
}
c5-navbar-dropdown-link {
label: "Q-HTML Editor"
url: "https://datafault.net/qhtml-js/qhtml-editor"
target: "_self"
classes: ""
}
c5-navbar-dropdown-link {
label: "QHTML Drag and Drop Builder"
url: "https://qhtml.github.io/qhtml6/dist/page-builder.html"
target: "_blank"
classes: ""
}
}
}
c5-navbar-submenu {
label: "General Coding"
url: "https://datafault.net/general-coding"
target: "_self"
classes: "nav-path-selected"
children {
c5-navbar-dropdown-link {
label: "🔗 Custom Systems Integrations"
url: "https://datafault.net/general-coding/custom-systems-integrations"
target: "_self"
classes: ""
}
c5-navbar-dropdown-link {
label: "âš¡ Performance Optimization"
url: "https://datafault.net/general-coding/performance-optimization"
target: "_self"
classes: ""
}
c5-navbar-dropdown-link {
label: "🔒 Security Enhancements"
url: "https://datafault.net/general-coding/security-enhancements"
target: "_self"
classes: ""
}
c5-navbar-dropdown-link {
label: "🧩 CMS & Web Platform Extensions"
url: "https://datafault.net/general-coding/cms-and-web-platform-extensions"
target: "_self"
classes: ""
}
c5-navbar-dropdown-link {
label: "🎨 UI/UX Customization"
url: "https://datafault.net/general-coding/uiux-customization"
target: "_self"
classes: "active"
}
c5-navbar-dropdown-link {
label: "Artificial Intelligence"
url: "https://datafault.net/general-coding/ai-services"
target: "_self"
classes: ""
}
}
}
c5-navbar-link {
label: "Active Projects"
url: "https://datafault.net/active-projects"
target: "_self"
classes: ""
}
c5-navbar-link {
label: "RouteUI Demo"
url: "/tools/RouteUI/index.html"
target: "_blank"
classes: ""
}
c5-navbar-link {
label: "America Freedom Proposal"
url: "https://datafault.net/freedom"
target: "_self"
classes: ""
}
}
c5-navbar-search {
action: "https://datafault.net//search"
searchLabel: "Search"
}
}
}
}
}
section {
class: "uiux-wrap ghost-grid pad"
header { class: "header"
span { class: "emoji"; text: "🎨" }
div {
h2 { class: "title"; text: "UI/UX Customization" }
p { class: "sub"; text: "We extend front-end components with bespoke HTML, JS, and delightful micro-interactions — tuned to your brand, CMS, and performance goals." }
}
span { class: "chip"; text: "CMS, Web Apps, Design Systems" }
}
div { class: "hero pad"
canvas { id: "confetti"; class: "hero-canvas" }
div { class: "hero-inner pad"
div {
h3 { text: "Pixel-perfect meets production-ready" }
p { text: "From theme overhauls and interactive docs to high-performing component libraries, we craft interfaces that feel fast and alive." }
div { class: "cta"
button { class: "btn"; id: "sparkBtn"; text: "Trigger Delight ✨" }
button { class: "btn alt"; id: "themeBtn"; text: "Toggle Theme" }
span { class: "toggle"
html {
}
}
}
}
div { class: "ba"
div { class: "frame"
html {
}
div { class: "range"
html { }
}
}
}
}
}
div { class: "grid"
div { class: "card"
h4 { text: "Component Theming" }
p { text: "Tokens, dark mode, density, and motion tuned per brand." }
div { class: "mini"
span { text: "Design Tokens" }
span { text: "Dark/Light" }
span { text: "Motion Curves" }
}
}
div { class: "card"
h4 { text: "Interactive Patterns" }
p { text: "Tabs, drawers, riff-on-hover, type-ahead, live previews." }
div { class: "mini"
span { text: "ARIA+WCAG" }
span { text: "Micro-copy" }
span { text: "Latency < 100ms" }
}
}
div { class: "card"
h4 { text: "CMS-Ready Snippets" }
p { text: "Drop-in blocks for ConcreteCMS, WordPress, and headless." }
div { class: "mini"
span { text: "ConcreteCMS" } span { text: "WP/Gutenberg" } span { text: "Headless" }
}
}
}
section { class: "tabs"
div { class: "tabbar"
button { id: "tab-1"; class: "active"; text: "Playground" }
button { id: "tab-2"; text: "Patterns" }
button { id: "tab-3"; text: "Case Studies" }
button { id: "tab-4"; text: "Code & Copy" }
}
div { id: "panel-1"; class: "tab active"
div { class: "play"
div { class: "ctrls"
h4 { text: "Tune the look" }
label { html { Font size } }
label { html { Corner radius } }
label { html { Shadow depth } }
div { class: "mini"
span { text: "Live variables" }
span { id: "varDump"; text: "--radius: 16px" }
}
}
div { class: "demo"
h4 { text: "Live Preview" }
p { text: "Buttons, chips, and cards pick up your settings instantly." }
button { class: "sample-btn"; id: "boomBtn"; text: "Primary Button" }
div { class: "mini"
span { class: "chip"; text: "Chip" }
span { class: "chip"; text: "Badge" }
span { class: "chip"; text: "Tokenized" }
}
}
}
}
div { id: "panel-2"; class: "tab"
div { class: "grid"
div { class: "card"
h4 { text: "Accessible Tabs" }
p { text: "Roving tabindex, keyboard nav, and ARIA markup baked in." }
}
div { class: "card"
h4 { text: "Command Palette" }
p { text: "Cmd/Ctrl+K quick search and actions across your UI." }
}
div { class: "card"
h4 { text: "Async Feedback" }
p { text: "Optimistic updates, skeletons, and toasts for perceived speed." }
}
}
div { class: "marquee"
div { class: "row"
span { class: "chip"; text: "Tooltips" }
span { class: "chip"; text: "Drawers" }
span { class: "chip"; text: "Accordions" }
span { class: "chip"; text: "Context Menus" }
span { class: "chip"; text: "Data Grids" }
span { class: "chip"; text: "Onboarding" }
span { class: "chip"; text: "Loaders" }
span { class: "chip"; text: "Empty States" }
span { class: "chip"; text: "Undo" }
span { class: "chip"; text: "Locale" }
span { class: "chip"; text: "i18n" }
span { class: "chip"; text: "RTL" }
}
}
}
div { id: "panel-3"; class: "tab"
div { class: "carousel"
div { class: "slides"; id: "slides"
div { class: "slide"
h4 { text: "Design System Lift" }
p { text: "Scaled to 45+ apps with tokens, theming, and lintable patterns." }
}
div { class: "slide"
h4 { text: "Interactive Docs" }
p { text: "Live examples, copy-paste code, and automated QA previews." }
}
div { class: "slide"
h4 { text: "E-commerce UX" }
p { text: "Checkout drop-off cut 18% via micro-copy and layout refactors." }
}
}
div { class: "dots"
button { class: "dot active"; data-index: "0" }
button { class: "dot"; data-index: "1" }
button { class: "dot"; data-index: "2" }
}
}
}
div { id: "panel-4"; class: "tab"
h4 { text: "Grab a starter button" }
pre { id: "codeBlock"
html {
<button class="btn">Call to Action</button>
<style>
.btn{padding:12px 16px;border-radius:14px;background:linear-gradient(180deg,#72f3c5,#2dd4a5);color:#062317;border:0;font-weight:800}
</style>
}
}
button { class: "btn alt"; id: "copyBtn"; text: "Copy HTML" }
}
}
section { class: "cta-panel"
h4 { text: "Have a component or page in mind?" }
p { class: "sub"; text: "Send a quick note with your goals and a link or screenshot. We’ll reply with options and a starter mock." }
form { id: "ctaForm"
html {
}
}
}
}