q-import { /q-components/q-tech-panel.qhtml } /* ========================================================= */ /* Concrete Top Navigation Bar via q-var data + q-components */ /* ========================================================= */ q-var navbarData { {"blockId":"535","includeTransparency":false,"includeStickyNav":true,"includeNavigation":true,"includeSearchInput":true,"includeLanguages":false,"toggleLabel":"Toggle Navigation","searchLabel":"Search","switchLanguageLabel":"Switch Language","searchAction":"https://datafault.net/","brand":{"href":"https://datafault.net/","text":"","logos":[{"src":"https://datafault.net/application/files/3117/5788/1082/datafault-logo.png","className":"logo","transparent":false}]},"nav":[{"name":"qhtml-js","url":"https://datafault.net/qhtml-js","target":"_self","active":false,"activeParent":false,"children":[{"name":"qhtml.js about info","url":"https://datafault.net/packages/qhtml6/doc/index.html","target":"_self","active":false,"activeParent":false},{"name":"LCARS Builder Demo","url":"/builder/index.html","target":"_blank","active":false,"activeParent":false},{"name":"Q-HTML Editor","url":"https://datafault.net/qhtml-js/qhtml-editor","target":"_self","active":false,"activeParent":false}]},{"name":"General Coding","url":"https://datafault.net/general-coding","target":"_self","active":false,"activeParent":false,"children":[{"name":"\ud83d\udd17 Custom Systems Integrations","url":"https://datafault.net/general-coding/custom-systems-integrations","target":"_self","active":false,"activeParent":false},{"name":"\u26a1 Performance Optimization","url":"https://datafault.net/general-coding/performance-optimization","target":"_self","active":false,"activeParent":false},{"name":"\ud83d\udd12 Security Enhancements","url":"https://datafault.net/general-coding/security-enhancements","target":"_self","active":false,"activeParent":false},{"name":"\ud83e\udde9 CMS \u0026 Web Platform Extensions","url":"https://datafault.net/general-coding/cms-and-web-platform-extensions","target":"_self","active":false,"activeParent":false},{"name":"\ud83c\udfa8 UI/UX Customization","url":"https://datafault.net/general-coding/uiux-customization","target":"_self","active":false,"activeParent":false},{"name":"Artificial Intelligence","url":"https://datafault.net/general-coding/ai-services","target":"_self","active":false,"activeParent":false}]},{"name":"Active Projects","url":"https://datafault.net/active-projects","target":"_self","active":false,"activeParent":false,"children":[]},{"name":"RouteUI Demo","url":"/tools/RouteUI/index.html","target":"_blank","active":false,"activeParent":false,"children":[]},{"name":"America Freedom Proposal","url":"https://datafault.net/freedom","target":"_self","active":false,"activeParent":false,"children":[]}],"languages":[]}} q-var navdata { navbarData.nav || [] } q-var languageData { navbarData.languages || [] } q-var qstr { function(value) { if (value === null || value === undefined) { return JSON.stringify(""); } return JSON.stringify(String(value)); } } q-var navStateClass { function(item) { var cls = ""; if (item.activeParent) { cls += " nav-path-selected"; } if (item.active) { cls += " active"; } return cls.trim(); } } q-var dropdownItemQhtml { function(item) { return "" + "c5-navbar-dropdown-link {\n" + " label: " + qstr(item.name) + "\n" + " url: " + qstr(item.url) + "\n" + " target: " + qstr(item.target || "_self") + "\n" + " classes: " + qstr(navStateClass(item)) + "\n" + "}\n"; } } q-var dropdownChildrenQhtml { function(children) { var output = ""; var i = 0; children = children || []; for (i = 0; i < children.length; i++) { output += dropdownItemQhtml(children[i]); } return output; } } q-var navItemQhtml { function(item) { var classes = navStateClass(item); var hasChildren = item.children && item.children.length > 0; if (hasChildren) { return "" + "c5-navbar-submenu {\n" + " label: " + qstr(item.name) + "\n" + " url: " + qstr(item.url) + "\n" + " target: " + qstr(item.target || "_self") + "\n" + " classes: " + qstr(classes) + "\n" + " children {\n" + dropdownChildrenQhtml(item.children) + " }\n" + "}\n"; } return "" + "c5-navbar-link {\n" + " label: " + qstr(item.name) + "\n" + " url: " + qstr(item.url) + "\n" + " target: " + qstr(item.target || "_self") + "\n" + " classes: " + qstr(classes) + "\n" + "}\n"; } } q-var languageItemQhtml { function(language) { var classes = language.active ? "active" : ""; return "" + "li {\n" + " a {\n" + " class: " + qstr("dropdown-item " + classes) + "\n" + " href: " + qstr(language.url) + "\n" + " text { " + language.name + " }\n" + " }\n" + "}\n"; } } /* ========================================================= */ /* Component: brand */ /* ========================================================= */ q-component c5-navbar-brand { q-var brand { navbarData.brand || { href: "#", text: "", logos: [] } } a.navbar-brand { href: "${brand.href}" for (logo in brand.logos) { img { src: "${logo.src}" class: "${logo.className}" } } span.c5-brand-text { text { ${brand.text} } } } } /* ========================================================= */ /* Component: normal nav link */ /* Slots: effects */ /* ========================================================= */ q-component c5-navbar-link { q-var label { this.getAttribute("label") || "" } q-var url { this.getAttribute("url") || "#" } q-var target { this.getAttribute("target") || "_self" } q-var classes { this.getAttribute("classes") || "" } li.nav-item { a { class: "nav-link ${classes}" target: "${target}" href: "${url}" span.c5-nav-label { text { ${label} } } span.c5-nav-effect { slot { effects } } } } } /* ========================================================= */ /* Component: dropdown nav link */ /* Slots: children, effects */ /* ========================================================= */ q-component c5-navbar-submenu { q-var label { this.getAttribute("label") || "" } q-var url { this.getAttribute("url") || "#" } q-var target { this.getAttribute("target") || "_self" } q-var classes { this.getAttribute("classes") || "" } li.nav-item.dropdown.w3-theme-d4 { a { class: "w3-theme-d4 nav-link dropdown-toggle ${classes}" data-concrete-toggle: "dropdown" target: "${target}" href: "${url}" span.c5-nav-label { text { ${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-var label { this.getAttribute("label") || "" } q-var url { this.getAttribute("url") || "#" } q-var target { this.getAttribute("target") || "_self" } q-var classes { this.getAttribute("classes") || "" } li { a { class: "w3-theme-d3 dropdown-item ${classes}" target: "${target}" href: "${url}" text { ${label} } } } } /* ========================================================= */ /* Component: search form */ /* ========================================================= */ q-component c5-navbar-search { q-var action { this.getAttribute("action") || "" } q-var searchLabel { navbarData.searchLabel || "Search" } form { method: "get" action: "${action}" input.form-control { type: "search" name: "query" placeholder: "${searchLabel}" aria-label: "${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-var label { navbarData.switchLanguageLabel || "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 { ${label} } } } ul.dropdown-menu.dropdown-menu-lg-end.w-100 { for (language in languageData) { q-var languageMarkup { languageItemQhtml(language) } qhtml(languageMarkup) } } } } /* ========================================================= */ /* 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.fixed-top { html { } div.w3-theme-d4.container-fluid { c5-navbar-brand { } button.navbar-toggler.collapsed { type: "button" data-bs-toggle: "collapse" data-bs-target: "#top-navigation-bar-535" aria-controls: "top-navigation-bar-535" aria-expanded: "false" aria-label: "Toggle Navigation" span.icon-bar { } span.icon-bar { } span.icon-bar { } } div.w3-theme-d4.collapse.navbar-collapse { id: "top-navigation-bar-535" ul.navbar-nav.w3-theme-d4 { for (item in navdata) { q-var itemMarkup { navItemQhtml(item) } qhtml(itemMarkup) } } c5-navbar-search { action: "https://datafault.net//search" } } } } }
q-import { /q-components/q-tech-panel.qhtml } /* ========================================================= */ /* DATAFAULT HOME PAGE STYLES */ /* No background/background-color/background-image rules here. */ /* q-tech-panel/q-painter owns the visual panel background. */ /* ========================================================= */ q-style homePanelShell { position: relative width: 100% min-height: 640px overflow: hidden box-sizing: border-box } q-style homeParticleLayer { position: absolute inset: 0px display: block pointer-events: none overflow: hidden z-index: 1 } q-style homePanelContent { position: relative z-index: 2 display: grid gap: 36px width: 100% max-width: 1180px margin: 0 auto padding: clamp(34px, 5vw, 64px) box-sizing: border-box } q-style homeHero { display: grid grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr) gap: 28px align-items: stretch } q-style homeHeroMain { display: grid align-content: center gap: 18px min-width: 0 } q-style homeEyebrow { color: #00ff99 font-size: 13px font-weight: 900 letter-spacing: 0.16em text-transform: uppercase margin: 0 } q-style homeHeadline { color: #ffffff font-size: clamp(42px, 7vw, 76px) line-height: 0.92 letter-spacing: -0.075em margin: 0 text-shadow: 0 10px 34px rgba(0, 0, 0, 0.72) } q-style homeLead { color: #dbeafe max-width: 760px font-size: clamp(16px, 2vw, 20px) line-height: 1.65 margin: 0 text-shadow: 0 4px 18px rgba(0, 0, 0, 0.62) } q-style homeActions { display: flex gap: 12px flex-wrap: wrap align-items: center margin-top: 8px } q-style homeButton { display: inline-flex align-items: center justify-content: center min-height: 44px padding: 0 28px border-radius: 999px border: 1px solid rgba(0, 255, 153, 0.68) color: #00ff99 font-weight: 900 text-decoration: none text-shadow: 0 4px 14px rgba(0, 0, 0, 0.70) box-shadow: 0 0 24px rgba(0, 255, 153, 0.20) } q-style homeButtonGhost { color: #dbeafe border: 1px solid rgba(203, 213, 225, 0.36) box-shadow: none } q-style homeSignalCard { display: grid gap: 16px align-content: center min-width: 0 padding: 24px border-radius: 24px border: 1px solid rgba(0, 255, 153, 0.32) box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045) } q-style homeSignalGrid { display: grid grid-template-columns: repeat(2, minmax(0, 1fr)) gap: 12px } q-style homeMetric { display: grid gap: 4px padding: 26px border-radius: 18px border: 1px solid rgba(148, 163, 184, 0.28) } q-style homeMetricValue { color: #ffffff font-size: 28px font-weight: 950 letter-spacing: -0.06em line-height: 1 margin: 0 text-shadow: 0 5px 18px rgba(0, 0, 0, 0.70) } q-style homeMetricLabel { color: #cbd5e1 font-size: 13px line-height: 1.42 margin: 0 } q-style homeSection { display: grid gap: 18px } q-style homeSectionHead { display: grid gap: 8px max-width: 780px } q-style homeSectionTitle { color: #ffffff font-size: clamp(28px, 4vw, 42px) line-height: 1 letter-spacing: -0.055em margin: 0 text-shadow: 0 7px 26px rgba(0, 0, 0, 0.68) } q-style homeMuted { color: #cbd5e1 line-height: 1.7 margin: 0 } q-style homeGrid { display: grid grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)) gap: 18px } q-style homeGridTwo { display: grid grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)) gap: 18px } q-style homeCard { display: grid gap: 13px min-width: 0 padding: 22px border-radius: 22px border: 1px solid rgba(148, 163, 184, 0.30) box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34) box-sizing: border-box } q-style homeCardAccent { border-color: rgba(0, 255, 153, 0.44) box-shadow: 0 18px 54px rgba(0, 255, 153, 0.11) } q-style homeIcon { inline-size: 42px block-size: 42px display: inline-grid place-items: center border-radius: 14px border: 1px solid rgba(0, 255, 153, 0.46) color: #00ff99 font-weight: 950 box-shadow: inset 0 0 16px rgba(0, 255, 153, 0.18) } q-style homeTitle { color: #ffffff font-size: 21px font-weight: 950 letter-spacing: -0.04em line-height: 1.12 margin: 0 } q-style homeSmallTitle { color: #ffffff font-size: 17px font-weight: 900 letter-spacing: -0.035em margin: 0 } q-style homeQuoteSection { display: grid grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr) gap: 18px align-items: stretch } q-style homeQuote { display: grid gap: 12px padding: 24px border-radius: 22px border: 1px solid rgba(0, 255, 153, 0.32) box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34) } q-style homeBlockquote { color: #ffffff margin: 0 font-size: clamp(18px, 2.2vw, 25px) line-height: 1.45 letter-spacing: -0.035em text-shadow: 0 6px 24px rgba(0, 0, 0, 0.70) } q-style homeFigcaption { color: #94a3b8 font-size: 14px } q-style homeChecklist { display: grid gap: 10px } q-style homeCheck { display: grid grid-template-columns: 22px 1fr gap: 10px align-items: start color: #cbd5e1 line-height: 1.55 } q-style homeCheckMark { width: 22px height: 22px display: grid place-items: center border-radius: 999px border: 1px solid rgba(0, 255, 153, 0.45) color: #00ff99 font-size: 13px font-weight: 950 } q-style homeFooterCta { display: flex justify-content: space-between align-items: center gap: 18px flex-wrap: wrap padding: 24px border-radius: 24px border: 1px solid rgba(0, 255, 153, 0.34) box-shadow: 0 18px 54px rgba(0, 255, 153, 0.09) } q-style homeCtaText { display: grid gap: 6px max-width: 760px } q-style homeTiny { color: #94a3b8 font-size: 13px line-height: 1.5 margin: 0 } /* ========================================================= */ /* THEME MAP */ /* ========================================================= */ q-theme homePanelTheme { div.home-panel-shell { homePanelShell } particle-emitter.home-particle-layer { homeParticleLayer } div.home-panel-content { homePanelContent } section.home-hero { homeHero } div.home-hero-main { homeHeroMain } p.home-eyebrow { homeEyebrow } h1.home-headline { homeHeadline } p.home-lead { homeLead } div.home-actions { homeActions } a.home-button { homeButton } a.home-button.ghost { homeButton homeButtonGhost } aside.home-signal-card { homeSignalCard } div.home-signal-grid { homeSignalGrid } div.home-metric { homeMetric } p.home-metric-value { homeMetricValue } p.home-metric-label { homeMetricLabel } section.home-section { homeSection } div.home-section-head { homeSectionHead } h2.home-section-title { homeSectionTitle } p.home-muted { homeMuted } div.home-grid { homeGrid } div.home-grid-two { homeGridTwo } article.home-card { homeCard } article.home-card.accent { homeCard homeCardAccent } span.home-icon { homeIcon } h3.home-title { homeTitle } h4.home-small-title { homeSmallTitle } section.home-quote-section { homeQuoteSection } figure.home-quote { homeQuote } blockquote.home-blockquote { homeBlockquote } figcaption.home-figcaption { homeFigcaption } div.home-checklist { homeChecklist } div.home-check { homeCheck } span.home-check-mark { homeCheckMark } section.home-footer-cta { homeFooterCta } div.home-cta-text { homeCtaText } p.home-tiny { homeTiny } } /* ========================================================= */ /* HOME PAGE CONTENT */ /* ========================================================= */ homePanelTheme { div.home-panel-shell { particle-emitter.home-particle-layer { id: "t121-emitter" emitrate: "74" lifetime: "2700" lifetimevariation: "390" xvelocity: "0.15" yvelocity: "-0.75" xacceleration: "0" yacceleration: "0" startsize: "1" endsize: "15" startopacity: "0.9" endopacity: "0.02" startsizevariation: "4" endsizevariation: "10" startopacityvariation: "0.16" endopacityvariation: "0.022" x: "110" y: "114" xvariation: "845" yvariation: "600" xvelocityvariation: "0.75" yvelocityvariation: "0.75" xaccelerationvariation: "0" yaccelerationvariation: "0" maxactiveparticles: "66" maxactiveparticlesvariation: "20" running: "true" interval: "30" src: "/packages/qhtml6/dist/assets/particle.png" color: "#FFFFFFAA" qhtml-unsynced: "1" } div.home-panel-content { section.home-hero { div.home-hero-main { p.home-eyebrow { text { datafault.net } } h1.home-headline { text { Secure systems. Custom software. Practical engineering. } } p.home-lead { text { datafault.net is a technology studio and engineering lab for custom web systems, automation, search tools, QHTML components, and security-conscious infrastructure. The purpose is simple: build tools that are clean enough to maintain, strong enough to trust, and flexible enough to evolve. } } div.home-actions { a.home-button { href: "/tools/search/" text { Explore Tools } } a.home-button.ghost { href: "/" text { View Projects } } } } aside.home-signal-card { p.home-eyebrow { text { Operating Principles } } q-tech-panel { borderWidth: "8px" shadowColor: "#00ff99" topRight: "40px" bottomRight: "40px" topDent: "18px" topDentLength: "34%" patternSize: "12px" topLeft: "20px" bottomLeft: "30px" bottomDent: "64px" div.home-signal-grid { div.home-metric { p.home-metric-value { text { Secure } } p.home-metric-label { text { Security-first defaults, smaller attack surfaces, and controlled dependencies. } } } div.home-metric { p.home-metric-value { text { Fast } } p.home-metric-label { text { Lightweight systems that avoid unnecessary framework weight. } } } div.home-metric { p.home-metric-value { text { Clear } } p.home-metric-label { text { Interfaces and code paths designed to be understood after launch. } } } div.home-metric { p.home-metric-value { text { Custom } } p.home-metric-label { text { Purpose-built tooling instead of fragile one-size-fits-all glue. } } } } } } } section.home-section { div.home-section-head { p.home-eyebrow { text { What DataFault Builds } } h2.home-section-title { text { Professional tools with engineering depth under the hood. } } p.home-muted { text { DataFault focuses on systems that combine practical business presentation with technical substance: searchable static sites, custom components, secure deployment patterns, visual tooling, automation, and infrastructure-aware web applications. } } } div.home-grid { article.home-card.accent { span.home-icon { text { AI } } h3.home-title { text { Data-aware automation } } p.home-muted { text { Search utilities, indexing pipelines, analysis layers, and AI-assisted workflows that help turn existing content and operational data into useful decisions. } } } article.home-card { span.home-icon { text { UI } } h3.home-title { text { Custom web interfaces } } p.home-muted { text { QHTML components, business pages, dashboards, editors, and internal tools built around reusable layouts instead of disposable page clutter. } } } article.home-card { span.home-icon { text { OPS } } h3.home-title { text { Infrastructure-minded delivery } } p.home-muted { text { Web output is designed with deployment, routing, static generation, server boundaries, and long-term maintainability in mind. } } } } } section.home-section { div.home-section-head { p.home-eyebrow { text { Why It Stands Out } } h2.home-section-title { text { Senior-level problem solving without enterprise theater. } } } div.home-grid-two { article.home-card { h3.home-title { text { Security-focused engineering } } p.home-muted { text { Dependency review, minimized public surfaces, careful server/client boundaries, and safer defaults are treated as part of the design instead of an afterthought. } } } article.home-card { h3.home-title { text { Practical architecture } } p.home-muted { text { Systems are planned around data flow, runtime behavior, operational constraints, failure modes, and what it will take to safely change things later. } } } article.home-card { h3.home-title { text { Deep technical range } } p.home-muted { text { Projects can span QHTML, JavaScript, static site tooling, search indexing, Linux services, Nginx routing, automation scripts, and custom UI systems. } } } article.home-card { h3.home-title { text { Controlled complexity } } p.home-muted { text { The goal is not to avoid complexity. The goal is to put complexity in the right layer, make it reusable, and prevent it from leaking everywhere else. } } } } } section.home-quote-section { q-tech-panel { borderWidth: "8px" shadowColor: "#00ff99" topRight: "40px" bottomRight: "40px" topDent: "18px" topDentLength: "34%" patternSize: "12px" topLeft: "20px" bottomLeft: "30px" bottomDent: "64px" figure.home-quote { blockquote.home-blockquote { cite: "#" text { "We do not build disposable web clutter. We build systems that can be inspected, understood, tuned, and trusted." } } figcaption.home-figcaption { text { — DataFault engineering philosophy } } } article.home-card { h3.home-title { text { Built for serious projects } } div.home-checklist { div.home-check { span.home-check-mark { text { ✓ } } p.home-muted { text { Custom components and layouts for professional sites and tools. } } } div.home-check { span.home-check-mark { text { ✓ } } p.home-muted { text { Search, indexing, and automation workflows for real content. } } } div.home-check { span.home-check-mark { text { ✓ } } p.home-muted { text { Security-minded development and infrastructure awareness. } } } div.home-check { span.home-check-mark { text { ✓ } } p.home-muted { text { Clean deployment patterns with fewer unnecessary moving parts. } } } } } } } section.home-footer-cta { div.home-cta-text { h2.home-section-title { text { Need a sharper technical foundation? } } p.home-tiny { text { A business website, internal tool, or automation system should be more than a skin over fragile code. It should be a controlled system with a clear purpose, clean structure, and room to grow. } } } div.home-actions { a.home-button { href: "/search/" text { Try the Search Tool } } a.home-button.ghost { href: "/contact" text { Start a Conversation } } } } } } }

Build faster with clean, customized solutions.

Collaborate in a careful and objective manner to design, build, implement, and scale your platform to achieve your desired results.