/* ========================================================= */
/* 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: "active"
}
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: ""
}
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"
}
}
}
}
}
q-import { ../q-components/q-tech-panel.qhtml }
q-style projectPage {
min-height: 100vh
color: #ffffff
padding: 40px 24px
}
q-style projectShell {
max-width: 1180px
margin: 0 auto
}
q-style resourceLayout {
display: grid
grid-template-columns: 260px 1fr
gap: 24px
align-items: start
left: -10vw
}
q-style stickyPanel {
top: 24px
position: sticky
min-height: 50vh
left: 0px
}
q-style panel {
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08)
padding: 54px
color: #ffffff
}
q-style softPanel {
border: 1px solid #e2e8f0
border-radius: 18px
padding: 38px
}
q-style darkPanel {
color: #ffffff
border-radius: 22px
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10)
padding: 24px
}
q-style brand {
font-size: 22px
font-weight: 900
letter-spacing: -0.045em
margin: 0
}
q-style sidebarTitle {
font-size: 14px
font-weight: 900
letter-spacing: 0.12em
text-transform: uppercase
color: #ffffff
margin: 0 0 14px
}
q-style navList {
display: grid
gap: 8px
}
q-style navLink {
display: block
padding: 12px 14px
border-radius: 14px
color: #ffffff
font-weight: 750
font-size: 14px
cursor: pointer
}
q-style activeNavLink {
background: #dbeafe
color: #2563eb
}
q-style submenu {
display: grid
gap: 6px
margin: 4px 0 8px 16px
padding-left: 12px
border-left: 2px solid #e2e8f0
}
q-style subNavLink {
display: block
padding: 9px 12px
border-radius: 12px
color: #64748b
font-weight: 700
font-size: 13px
cursor: pointer
}
q-style mainContent {
display: grid
gap: 20px
}
q-style eyebrow {
color: #2563eb
font-size: 13px
font-weight: 900
letter-spacing: 0.12em
text-transform: uppercase
margin-top: -10px
margin-left: 0
margin-right: 0
margin-bottom: 12px
}
q-style pageTitle {
font-size: clamp(34px, 5vw, 54px)
line-height: 1
letter-spacing: -0.06em
margin-top: 46px
margin-left: 45px
}
q-style sectionTitle {
font-size: 26px
line-height: 1.1
letter-spacing: -0.045em
margin: 0 0 30px
}
q-style smallTitle {
font-size: 18px
line-height: 1.15
letter-spacing: -0.035em
margin: 0 0 8px
}
q-style bodyText {
color: #64748b
line-height: 1.7
margin: 0
}
q-style lightText {
color: #ffffff
line-height: 1.7
margin: 0
margin-left: 40px
margin-right: 40px
}
q-style divider {
height: 1px
margin: 18px 0
}
q-style stack {
display: grid
gap: 14px
}
q-style grid2 {
display: grid
grid-template-columns: repeat(2, 1fr)
gap: 16px
}
q-style metaList {
display: grid
gap: 10px
}
q-style metaItem {
display: grid
gap: 3px
}
q-style metaLabel {
color: #ffffff
font-size: 12px
font-weight: 900
letter-spacing: 0.09em
text-transform: uppercase
margin: 0
}
q-style metaValue {
color: #ffffff
font-size: 14px
font-weight: 750
margin: 0
}
q-style pill {
display: inline-flex
width: fit-content
border-radius: 999px
background: #dbeafe
color: #2563eb
padding: 8px 12px
font-size: 13px
font-weight: 900
}
q-theme projectInfoTheme {
div.project-page { projectPage }
div.project-shell { projectShell }
section.resource-layout { resourceLayout }
aside.sidebar-panel { panel stickyPanel }
aside.right-rail { stack stickyPanel }
div.panel { panel }
div.soft-panel { softPanel }
div.dark-panel { darkPanel }
h1.brand { brand }
h2.sidebar-title { sidebarTitle }
nav.nav-list { navList }
a.nav-link { navLink }
a.nav-link.active { navLink activeNavLink }
div.submenu { submenu }
a.subnav-link { subNavLink }
main.main-content { mainContent }
p.eyebrow { eyebrow }
h1.page-title { pageTitle }
h2.section-title { sectionTitle }
h3.small-title { smallTitle }
p.body-text { bodyText }
p.light-text { lightText }
div.divider { divider }
div.stack { stack }
div.grid2 { grid2 }
div.meta-list { metaList }
div.meta-item { metaItem }
p.meta-label { metaLabel }
p.meta-value { metaValue }
span.pill { pill }
}
projectInfoTheme {
div.project-page {
div.project-shell {
section.resource-layout {
aside.sidebar-panel {
h1.brand { text { QHTML Project } }
div.divider { }
h2.sidebar-title { text { Project Info } }
nav.nav-list {
a.nav-link.active {
text { General Information }
}
a.nav-link {
text { Features }
}
div.submenu {
a.subnav-link {
text { Planned }
}
a.subnav-link {
text { Completed }
}
}
a.nav-link {
text { Documentation }
}
a.nav-link {
text { Guides }
}
a.nav-link {
text { Best Practices }
}
a.nav-link {
text { Comparisons }
}
}
}
q-tech-panel {
borderWidth: "8px"
shadowColor: "#00ff99"
topRight: "40px"
bottomRight: "40px"
topDent: "18px"
topDentLength: "34%"
patternSize: "12px"
topLeft: "20px"
bottomLeft: "30px"
bottomDent: "64px"
div {
main.main-content,div.dark-panel {
p.eyebrow { text { Project Overview } }
h1.page-title {
text { Custom Integration Support }
}
p.light-text {
text { The goal is for q-html to provide 100% integration support
for all platforms.
The main goal is a drop-in replacement for HTML.}
}
aside.right-rail {
div.panel {
span.pill { text { Status } }
div.divider { }
div.meta-list {
div.meta-item {
p.meta-label { text { Version } }
p.meta-value { text { ${QHTML_VERSION} } }
}
div.meta-item {
p.meta-label { text { Stage } }
p.meta-value { text { Stable } }
}
div.meta-item {
p.meta-label { text { Owner } }
p.meta-value { text { mike@datafault.net } }
}
}
}
div.panel {
h3.small-title { text { Quick Notes } }
p.body-text {
text { Currently q-html integrates cleanly with vue, bootstrap, w3.css, and all other CSS frameworks. }
}
}
div.panel {
h3.small-title { text { Suggested Sections } }
div.stack {
p.body-text { text { Syntax Overview } }
p.body-text { text { Component Model } }
p.body-text { text { Theme System } }
p.body-text { text { Runtime Behavior } }
}
}
}
}
}
}
}
}
}
}