dhbw/html-over-js
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: dhbw/html-over-js:main
dhbw/html-over-js:main
...
compare: dhbw/html-over-js:15187459d66fa540c0bb1d436520e1c0ee7444fc
dhbw/html-over-js:main
5 Commits
main ... 15187459d6
Author SHA1 Message Date
libretech 15187459d6 feat: move build files to docs folder 2025-06-01 20:42:58 +02:00
libretech 531ca34610 refactor: implement pug and parcel 2025-06-01 20:23:09 +02:00
libretech 37180a044b feat: excluded dist and node modules 2025-06-01 20:22:26 +02:00
libretech 34551aca5e feat: change tone of copy text 2025-06-01 19:43:09 +02:00
libretech 85da6c12da feat: update examples, remove nonsense, extend data lists and align modals 2025-06-01 18:35:35 +02:00
14 changed files with 21111 additions and 1233 deletions
Expand all files Collapse all files

No files matched your search

.gitignore
+2
View File
@@ -1 +1,3 @@
.idea
.cache
node_modules
.pugrc
+207
View File
@@ -0,0 +1,207 @@
{
"locals": {
"t": {
"meta": {
"title": "Web Platform Fundamentals: Building with Native HTML",
"description": "Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases."
},
"hero": {
"title": "🚀 Web Platform Fundamentals",
"subtitle": "Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases."
},
"sections": {
"disclosure": {
"title": "🎯 Progressive Disclosure Patterns",
"js_title": "JavaScript-Dependent Implementation",
"js_badge": "COMPLEX",
"js_warning": "Implementation Overhead: Manual ARIA state management, keyboard event handling, focus management, and screen reader compatibility.",
"js_content1": "Custom collapsible implementations require comprehensive event handling, state synchronization across components, and careful attention to accessibility requirements including proper ARIA attributes and keyboard navigation patterns.",
"js_content2": "Managing state across multiple collapsible sections introduces complexity in event coordination, memory management, and performance optimization, particularly when dealing with dynamic content loading.",
"js_cons_title": "❌ Architecture Complexity:",
"js_cons": [
"Event delegation and memory leak prevention",
"ARIA state synchronization and keyboard trap management",
"Cross-browser compatibility and polyfill requirements"
],
"native_title": "Native Details/Summary Elements",
"native_badge": "ZERO-JS",
"native_note": "Platform Integration: Built-in ARIA semantics, keyboard navigation, screen reader support, and browser-optimized animations.",
"native_semantic_title": "Semantic HTML Architecture",
"native_semantic_content": "The HTML5 details/summary pattern provides declarative progressive disclosure without JavaScript dependencies. Browser engines handle state management, accessibility, and user interaction patterns according to platform conventions.",
"native_enhancement_title": "Progressive Enhancement Benefits",
"native_enhancement_content": "Starting with functional HTML ensures graceful degradation across all environments. CSS and JavaScript become enhancement layers rather than functional requirements, improving reliability and reducing technical debt.",
"native_performance_title": "Performance Characteristics",
"native_performance_content": "Native elements eliminate bundle size overhead, reduce runtime memory consumption, and leverage browser optimizations unavailable to custom implementations. Hardware acceleration and efficient event handling come built-in.",
"native_pros_title": "✅ Platform Advantages:",
"native_pros": [
"Zero JavaScript footprint with full accessibility compliance",
"Browser-native performance optimizations and hardware acceleration",
"Consistent cross-platform behavior with no maintenance overhead"
]
},
"modals": {
"title": "🪟 Modal Dialog Patterns",
"js_title": "Custom Modal Implementation",
"js_badge": "BRITTLE",
"js_warning": "Critical Requirements: Focus trapping, inert background content, ESC key handling, backdrop click management, and ARIA modal semantics.",
"js_button": "Launch Custom Modal",
"js_modal_title": "Custom Modal Architecture",
"js_modal_content": "This approach requires managing the modal stack, preventing background interaction, coordinating focus management, and ensuring proper cleanup to avoid memory leaks and accessibility violations.",
"js_modal_issue": "Critical Issue: Background content remains accessible to screen readers and keyboard navigation without explicit inert management.",
"js_modal_close": "Close Modal",
"js_cons_title": "❌ Implementation Challenges:",
"js_cons": [
"Focus trap implementation and restoration complexity",
"Modal stack management and z-index coordination",
"Event cleanup and memory leak prevention"
],
"native_title": "Native Dialog Element",
"native_badge": "ROBUST",
"native_note": "Built-in Capabilities: Automatic focus trapping, inert background management, ESC key support, and proper modal semantics.",
"native_button": "Launch Native Dialog",
"native_dialog_title": "Native Dialog Element",
"native_dialog_content": "The HTML5 dialog element provides robust modal functionality with automatic focus management, backdrop interaction handling, and proper accessibility semantics built into the browser engine.",
"native_dialog_advantage": "Key Advantage: Background content becomes automatically inert, preventing interaction and screen reader access without additional implementation.",
"native_dialog_close": "Close Dialog",
"native_pros_title": "✅ Engine-Level Features:",
"native_pros": [
"Automatic focus trapping with proper restoration",
"Built-in ESC key handling and backdrop click support",
"Modal semantics and inert background management"
]
},
"validation": {
"title": "📝 Constraint Validation Patterns",
"js_title": "Custom Validation Logic",
"js_badge": "FRAGILE",
"js_warning": "Validation Complexity: Custom error messaging, timing coordination, accessibility announcements, and server-client synchronization.",
"js_email_label": "Email Validation",
"js_email_error": "Invalid email format detected",
"js_regex_label": "Pattern Matching (UUID)",
"js_regex_error": "UUID format required: 8-4-4-4-12 hex digits",
"js_submit": "Validate Form",
"js_cons_title": "❌ Validation Brittleness:",
"js_cons": [
"Regex patterns miss edge cases and internationalization",
"Error timing and accessibility announcement coordination",
"Client-server validation drift and synchronization issues"
],
"native_title": "Constraint Validation API",
"native_badge": "SPEC-COMPLIANT",
"native_note": "Standards-Based: Automatic error announcements, internationalized messages, and CSS pseudo-class integration.",
"native_email_label": "Email Validation",
"native_email_placeholder": "developer@example.org",
"native_uuid_label": "UUID Pattern",
"native_uuid_placeholder": "550e8400-e29b-41d4-a716-446655440000",
"native_uuid_title": "Enter a valid UUID format (e.g., 550e8400-e29b-41d4-a716-446655440000)",
"native_api_label": "API Endpoint URL",
"native_api_placeholder": "https://api.example.org/v1",
"native_submit": "Submit Form",
"native_pros_title": "✅ Specification Compliance:",
"native_pros": [
"RFC-compliant validation patterns with internationalization",
"Automatic error messaging in user's preferred language",
"CSS pseudo-classes (:valid, :invalid) for styling integration"
]
},
"progress": {
"title": "📊 Progress Indication Patterns",
"js_title": "Custom Progress Implementation",
"js_badge": "SEMANTIC-VOID",
"js_warning": "Accessibility Gap: No semantic meaning without explicit ARIA implementation and screen reader progress announcements.",
"js_text": "Build Progress:",
"js_button": "Start Build Process",
"js_cons_title": "❌ Semantic Limitations:",
"js_cons": [
"No inherent semantic meaning for assistive technologies",
"Manual ARIA live region management for progress updates",
"Custom animation performance and value interpolation"
],
"native_title": "Native Progress Element",
"native_badge": "SEMANTIC",
"native_note": "Semantic Integration: Built-in progress role, automatic ARIA value announcements, and indeterminate state support.",
"native_compilation": "Compilation Progress",
"native_compilation_text": "75% complete",
"native_indeterminate": "Indeterminate Operation (processing)",
"native_indeterminate_text": "Processing dependencies...",
"native_dynamic": "Dynamic Progress:",
"native_button": "Start Process",
"native_pros_title": "✅ Semantic Advantages:",
"native_pros": [
"Built-in progress role with automatic value announcements",
"Indeterminate state support for unknown duration operations",
"Platform-optimized rendering and animation performance"
]
},
"temporal": {
"title": "📅 Temporal Input Patterns",
"js_title": "Custom Date Picker",
"js_badge": "HEAVYWEIGHT",
"js_warning": "Implementation Scope: Calendar widget architecture, keyboard navigation, internationalization, timezone handling, and mobile touch optimization.",
"js_label": "Deployment Date (Custom)",
"js_placeholder": "YYYY-MM-DD",
"js_picker_content": "[Calendar widget implementation]\nRequires: Date manipulation library, internationalization,\nkeyboard navigation, mobile gesture handling,\ntimezone calculations, accessibility compliance.",
"js_cons_title": "❌ Implementation Overhead:",
"js_cons": [
"Large JavaScript libraries and complex calendar logic",
"Mobile UX inconsistency with platform date pickers",
"Internationalization complexity and timezone edge cases"
],
"native_title": "Native Temporal Inputs",
"native_badge": "PLATFORM-NATIVE",
"native_note": "OS Integration: Platform-consistent UI, automatic keyboard navigation, built-in validation, and internationalization support.",
"native_release_label": "Release Date",
"native_timestamp_label": "Build Timestamp",
"native_window_label": "Deployment Window",
"native_pros_title": "✅ Platform Integration:",
"native_pros": [
"Zero-bundle impact with native OS picker integration",
"Automatic validation and internationalization support",
"Consistent UX aligned with platform conventions"
]
},
"autocomplete": {
"title": "🔍 Autocomplete Patterns",
"js_title": "Custom Autocomplete",
"js_badge": "INTERACTION-HEAVY",
"js_warning": "Interaction Complexity: Dropdown positioning, keyboard navigation, ARIA combobox implementation, and mobile touch handling.",
"js_label": "Framework Search (Custom)",
"js_placeholder": "Type framework name...",
"js_cons_title": "❌ Interaction Management:",
"js_cons": [
"Complex ARIA combobox implementation and state management",
"Dropdown positioning and viewport collision detection",
"Mobile keyboard optimization and touch event handling"
],
"native_title": "Native Datalist Element",
"native_badge": "ZERO-CONFIG",
"native_note": "Native Combobox: Built-in ARIA combobox semantics, keyboard navigation, and platform-consistent interaction patterns.",
"native_framework_label": "JavaScript Framework",
"native_framework_placeholder": "Select or type framework...",
"native_language_label": "Programming Language",
"native_language_placeholder": "Choose language...",
"native_pros_title": "✅ Zero-Configuration Benefits:",
"native_pros": [
"Native combobox semantics with automatic ARIA support",
"Platform-consistent keyboard and interaction patterns",
"Form validation integration and graceful degradation"
]
}
},
"summary": {
"title": "Platform-First Development",
"content": "Native HTML elements represent years of browser engineering, accessibility research, and web standards evolution. They provide robust functionality with minimal implementation overhead and maximum compatibility.",
"approach_title": "The Progressive Enhancement Approach:",
"approach_items": [
"Build with semantic HTML that functions universally",
"Enhance visual design through CSS without breaking functionality",
"Layer JavaScript for complex interactions where native capabilities are insufficient"
],
"closing": "Leverage browser engines rather than reimplementing their functionality. Your codebase will be more maintainable, your users will have better experiences.",
"quote": "The most sophisticated architecture is often the one that uses existing, well-tested components. Native HTML elements provide decades of optimization and accessibility engineering—build upon this foundation rather than around it."
}
},
"lang": "en",
"dir": "ltr"
}
}
docs/index.html
+4
View File
@@ -0,0 +1,4 @@
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Web Platform Fundamentals: Building with Native HTML</title><meta name="description" content="Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases."><link rel="stylesheet" href="/html-over-js/main.612a6b84.css"></head><body class="search_plugin_added"><div class="hero"><h1>🚀 Web Platform Fundamentals</h1><p class="subtitle">Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases.</p></div><div class="section"><h2 class="section-title">🎯 Progressive Disclosure Patterns</h2><div class="comparison-grid"><div class="column bad"><h3>JavaScript-Dependent Implementation <span class="perf-indicator perf-slow">COMPLEX</span></h3><div class="accessibility-note"><strong>⚠️ Implementation Overhead: Manual ARIA state management, keyboard event handling, focus management, and screen reader compatibility.</strong></div><div class="js-wrapper"><div class="js-content" id="content1">Custom collapsible implementations require comprehensive event handling, state synchronization across components, and careful attention to accessibility requirements including proper ARIA attributes and keyboard navigation patterns.</div><button class="js-collapsible" onclick="toggleContent('content1')">Custom Collapsible Architecture</button></div><div class="js-wrapper"><div class="js-content" id="content2">Managing state across multiple collapsible sections introduces complexity in event coordination, memory management, and performance optimization, particularly when dealing with dynamic content loading.</div><button class="js-collapsible" onclick="toggleContent('content2')">State Management Challenges</button></div><div class="pros-cons"><h4 class="cons">❌ Architecture Complexity:</h4><ul><li>Event delegation and memory leak prevention</li><li>ARIA state synchronization and keyboard trap management</li><li>Cross-browser compatibility and polyfill requirements</li></ul></div></div><div class="column good"><h3>Native Details/Summary Elements <span class="perf-indicator perf-fast">ZERO-JS</span></h3><div class="accessibility-note"><strong>🎯 Platform Integration: Built-in ARIA semantics, keyboard navigation, screen reader support, and browser-optimized animations.</strong></div><details name="architecture"><summary>Semantic HTML Architecture</summary><div>The HTML5 details/summary pattern provides declarative progressive disclosure without JavaScript dependencies. Browser engines handle state management, accessibility, and user interaction patterns according to platform conventions.</div></details><details name="architecture"><summary>Progressive Enhancement Benefits</summary><div>Starting with functional HTML ensures graceful degradation across all environments. CSS and JavaScript become enhancement layers rather than functional requirements, improving reliability and reducing technical debt.</div></details><details name="architecture"><summary>Performance Characteristics</summary><div>Native elements eliminate bundle size overhead, reduce runtime memory consumption, and leverage browser optimizations unavailable to custom implementations. Hardware acceleration and efficient event handling come built-in.</div></details><div class="pros-cons"><h4 class="pros">✅ Platform Advantages:</h4><ul><li>Zero JavaScript footprint with full accessibility compliance</li><li>Browser-native performance optimizations and hardware acceleration</li><li>Consistent cross-platform behavior with no maintenance overhead</li></ul></div></div></div></div><div class="section"><h2 class="section-title">🪟 Modal Dialog Patterns</h2><div class="comparison-grid"><div class="column bad"><h3>Custom Modal Implementation <span class="perf-indicator perf-slow">BRITTLE</span></h3><div class="accessibility-note"><strong>⚠️ Critical Requirements: Focus trapping, inert background content, ESC key handling, backdrop click management, and ARIA modal semantics.</strong></div><button onclick="openJSModal()">Launch Custom Modal</button><div class="js-modal-overlay" id="jsModal"><div class="js-modal-content"><h4>Custom Modal Architecture</h4><p>This approach requires managing the modal stack, preventing background interaction, coordinating focus management, and ensuring proper cleanup to avoid memory leaks and accessibility violations.</p><p><strong>Critical Issue: Background content remains accessible to screen readers and keyboard navigation without explicit inert management.</strong></p><button onclick="closeJSModal()">Close Modal</button></div></div><div class="pros-cons"><h4 class="cons">❌ ImplemenLine truncated
Requires: Date manipulation library, internationalization,
keyboard navigation, mobile gesture handling,
timezone calculations, accessibility compliance.</p></div></div><div class="pros-cons"><h4 class="cons">❌ Implementation Overhead:</h4><ul><li>Large JavaScript libraries and complex calendar logic</li><li>Mobile UX inconsistency with platform date pickers</li><li>Internationalization complexity and timezone edge cases</li></ul></div></div><div class="column good"><h3>Native Temporal Inputs <span class="perf-indicator perf-fast">PLATFORM-NATIVE</span></h3><div class="accessibility-note"><strong>🎯 OS Integration: Platform-consistent UI, automatic keyboard navigation, built-in validation, and internationalization support.</strong></div><div class="form-group"><label>Release Date</label><input id="native-date" name="date" type="date" value="2024-12-15" min="2024-01-01" max="2025-12-31"></div><div class="form-group"><label>Build Timestamp</label><input id="native-datetime" name="datetime" type="datetime-local" step="1"></div><div class="form-group"><label>Deployment Window</label><input id="native-time" name="time" type="time" min="02:00" max="18:00" step="900"></div><div class="pros-cons"><h4 class="pros">✅ Platform Integration:</h4><ul><li>Zero-bundle impact with native OS picker integration</li><li>Automatic validation and internationalization support</li><li>Consistent UX aligned with platform conventions</li></ul></div></div></div></div><div class="section"><h2 class="section-title">🔍 Autocomplete Patterns</h2><div class="comparison-grid"><div class="column bad"><h3>Custom Autocomplete <span class="perf-indicator perf-slow">INTERACTION-HEAVY</span></h3><div class="accessibility-note"><strong>⚠️ Interaction Complexity: Dropdown positioning, keyboard navigation, ARIA combobox implementation, and mobile touch handling.</strong></div><div class="form-group"><label>Framework Search (Custom)</label><input id="js-search" type="text" placeholder="Type framework name..." autocomplete="off" onkeyup="filterFrameworks(this.value)"><div id="js-results" style="display: none; position: absolute; background: var(--color-card); border: 1px solid var(--color-border); max-height: 200px; overflow-y: auto; z-index: 100"></div></div><div class="pros-cons"><h4 class="cons">❌ Interaction Management:</h4><ul><li>Complex ARIA combobox implementation and state management</li><li>Dropdown positioning and viewport collision detection</li><li>Mobile keyboard optimization and touch event handling</li></ul></div></div><div class="column good"><h3>Native Datalist Element <span class="perf-indicator perf-fast">ZERO-CONFIG</span></h3><div class="accessibility-note"><strong>🎯 Native Combobox: Built-in ARIA combobox semantics, keyboard navigation, and platform-consistent interaction patterns.</strong></div><div class="form-group"><label>JavaScript Framework</label><input id="native-framework" type="text" list="frameworks" placeholder="Select or type framework..."><datalist id="frameworks"><option value="React">React - Component-based library</option><option value="Vue.js">Vue.js - Progressive framework</option><option value="Angular">Angular - Full platform</option><option value="Svelte">Svelte - Compile-time framework</option><option value="Solid">Solid - Fine-grained reactivity</option><option value="Alpine.js">Alpine.js - Minimal framework</option><option value="Lit">Lit - Web Components library</option><option value="Preact">Preact - Lightweight React alternative</option></datalist></div><div class="form-group"><label>Programming Language</label><input id="native-language" type="text" list="languages" placeholder="Choose language..."><datalist id="languages"><option value="JavaScript" label="JavaScript - Dynamic scripting"></option><option value="TypeScript" label="TypeScript - Typed JavaScript"></option><option value="Python" label="Python - General purpose"></option><option value="Rust" label="Rust - Systems programming"></option><option value="Go" label="Go - Concurrent systems"></option><option value="WebAssembly" label="WebAssembly - High-performance web"></option><option value="C" label="C - Low-level systems"></option><option value="C++" label="C++ - High-performance systems"></option><option value="C#" label="C# - .NET ecosystem"></option><option value="Java" label="Java - Cross-platform enterprise"></option><option value="Kotlin" label="Kotlin - Modern JVM language"></option><option value="Swift" label="Swift - iOS and macOS"></option><option value="Ruby" label="Ruby - Web development (Rails)"></option><option value="PHP" label="PHP - Server-side scripting"></option><option value="Perl" label="Perl - Text processing"></option><option value="Haskell" label="Haskell - Functional programming"></option><option value="Elixir" label="Elixir - Scalable applications"></option><option value="Dart" label="Dart - Web and mobile apps"></option><option value="Scala" label="Scala - Functional JVM language"></option><option value="Lua" label="Lua - Lightweight scripting"></option><option value="R" label="R - Statistical compuLine truncated
docs/main.082e2b9e.js
+188
View File
@@ -0,0 +1,188 @@
// modules are defined as an array
// [ module function, map of requires ]
//
// map of requires is short require name -> numeric require
//
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles
parcelRequire = (function (modules, cache, entry, globalName) {
// Save the require from previous bundle to this closure if any
var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
var nodeRequire = typeof require === 'function' && require;
function newRequire(name, jumped) {
if (!cache[name]) {
if (!modules[name]) {
// if we cannot find the module within our internal map or
// cache jump to the current global require ie. the last bundle
// that was added to the page.
var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
if (!jumped && currentRequire) {
return currentRequire(name, true);
}
// If there are other bundles on this page the require from the
// previous one is saved to 'previousRequire'. Repeat this as
// many times as there are bundles until the module is found or
// we exhaust the require chain.
if (previousRequire) {
return previousRequire(name, true);
}
// Try the node require function if it exists.
if (nodeRequire && typeof name === 'string') {
return nodeRequire(name);
}
var err = new Error('Cannot find module \'' + name + '\'');
err.code = 'MODULE_NOT_FOUND';
throw err;
}
localRequire.resolve = resolve;
localRequire.cache = {};
var module = cache[name] = new newRequire.Module(name);
modules[name][0].call(module.exports, localRequire, module, module.exports, this);
}
return cache[name].exports;
function localRequire(x){
return newRequire(localRequire.resolve(x));
}
function resolve(x){
return modules[name][1][x] || x;
}
}
function Module(moduleName) {
this.id = moduleName;
this.bundle = newRequire;
this.exports = {};
}
newRequire.isParcelRequire = true;
newRequire.Module = Module;
newRequire.modules = modules;
newRequire.cache = cache;
newRequire.parent = previousRequire;
newRequire.register = function (id, exports) {
modules[id] = [function (require, module) {
module.exports = exports;
}, {}];
};
var error;
for (var i = 0; i < entry.length; i++) {
try {
newRequire(entry[i]);
} catch (e) {
// Save first error but execute all entries
if (!error) {
error = e;
}
}
}
if (entry.length) {
// Expose entry point to Node, AMD or browser globals
// Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
var mainExports = newRequire(entry[entry.length - 1]);
// CommonJS
if (typeof exports === "object" && typeof module !== "undefined") {
module.exports = mainExports;
// RequireJS
} else if (typeof define === "function" && define.amd) {
define(function () {
return mainExports;
});
// <script>
} else if (globalName) {
this[globalName] = mainExports;
}
}
// Override the current require with this new one
parcelRequire = newRequire;
if (error) {
// throw error from earlier, _after updating parcelRequire_
throw error;
}
return newRequire;
})({"HJDO":[function(require,module,exports) {
// JavaScript functions from original HTML
var frameworks = ['React', 'Vue.js', 'Angular', 'Svelte', 'Solid', 'Alpine.js', 'Lit', 'Preact', 'Qwik', 'SvelteKit', 'Next.js', 'Nuxt.js'];
function filterFrameworks(value) {
var results = document.getElementById('js-results');
if (!value) {
results.style.display = 'none';
return;
}
var filtered = frameworks.filter(function (fw) {
return fw.toLowerCase().includes(value.toLowerCase());
});
results.innerHTML = filtered.map(function (fw) {
return "<div style=\"padding:8px; cursor:pointer;\" onclick=\"selectFramework('".concat(fw, "')\">").concat(fw, "</div>");
}).join('');
results.style.display = filtered.length ? 'block' : 'none';
}
function selectFramework(fw) {
document.getElementById('js-search').value = fw;
document.getElementById('js-results').style.display = 'none';
}
function startNativeProgress() {
var progress = document.getElementById('nativeProgress');
var text = document.getElementById('nativeProgressText');
var value = 0;
var interval = setInterval(function () {
value += Math.random() * 15;
if (value >= 100) {
value = 100;
clearInterval(interval);
}
progress.value = value;
text.textContent = Math.round(value) + '%';
}, 200);
}
function toggleContent(id) {
document.getElementById(id).classList.toggle("active");
}
function openJSModal() {
document.getElementById('jsModal').style.display = 'flex';
}
function closeJSModal() {
document.getElementById('jsModal').style.display = 'none';
}
function validateJSForm(event) {
event.preventDefault();
alert('Custom validation would run here');
return false;
}
function startJSProgress() {
var bar = document.getElementById('jsProgress');
var text = document.getElementById('jsProgressText');
var width = 0;
var interval = setInterval(function () {
width += Math.random() * 15;
if (width >= 100) {
width = 100;
clearInterval(interval);
}
bar.style.width = width + '%';
text.textContent = Math.round(width) + '%';
}, 200);
}
function openDatePicker() {
var picker = document.getElementById('datePicker');
picker.style.display = picker.style.display === 'none' ? 'block' : 'none';
}
},{}]},{},["HJDO"], null)
//# sourceMappingURL=/html-over-js/main.082e2b9e.js.map
docs/main.082e2b9e.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["src/main.js"],"names":["frameworks","filterFrameworks","value","results","document","getElementById","style","display","filtered","filter","fw","toLowerCase","includes","innerHTML","map","concat","join","length","selectFramework","startNativeProgress","progress","text","interval","setInterval","Math","random","clearInterval","textContent","round","toggleContent","id","classList","toggle","openJSModal","closeJSModal","validateJSForm","event","preventDefault","alert","startJSProgress","bar","width","openDatePicker","picker"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA,IAAMA,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,CAAC;AAE7I,SAASC,gBAAgBA,CAACC,KAAK,EAAE;EAC/B,IAAMC,OAAO,GAAGC,QAAQ,CAACC,cAAc,CAAC,YAAY,CAAC;EACrD,IAAI,CAACH,KAAK,EAAE;IACVC,OAAO,CAACG,KAAK,CAACC,OAAO,GAAG,MAAM;IAC9B;EACF;EACA,IAAMC,QAAQ,GAAGR,UAAU,CAACS,MAAM,CAAC,UAAAC,EAAE;IAAA,OAAIA,EAAE,CAACC,WAAW,CAAC,CAAC,CAACC,QAAQ,CAACV,KAAK,CAACS,WAAW,CAAC,CAAC,CAAC;EAAA,EAAC;EACxFR,OAAO,CAACU,SAAS,GAAGL,QAAQ,CAACM,GAAG,CAAC,UAAAJ,EAAE;IAAA,iFAAAK,MAAA,CAA2EL,EAAE,WAAAK,MAAA,CAAOL,EAAE;EAAA,CAAQ,CAAC,CAACM,IAAI,CAAC,EAAE,CAAC;EAC3Ib,OAAO,CAACG,KAAK,CAACC,OAAO,GAAGC,QAAQ,CAACS,MAAM,GAAG,OAAO,GAAG,MAAM;AAC5D;AAEA,SAASC,eAAeA,CAACR,EAAE,EAAE;EAC3BN,QAAQ,CAACC,cAAc,CAAC,WAAW,CAAC,CAACH,KAAK,GAAGQ,EAAE;EAC/CN,QAAQ,CAACC,cAAc,CAAC,YAAY,CAAC,CAACC,KAAK,CAACC,OAAO,GAAG,MAAM;AAC9D;AAEA,SAASY,mBAAmBA,CAAA,EAAG;EAC7B,IAAMC,QAAQ,GAAGhB,QAAQ,CAACC,cAAc,CAAC,gBAAgB,CAAC;EAC1D,IAAMgB,IAAI,GAAGjB,QAAQ,CAACC,cAAc,CAAC,oBAAoB,CAAC;EAC1D,IAAIH,KAAK,GAAG,CAAC;EACb,IAAMoB,QAAQ,GAAGC,WAAW,CAAC,YAAM;IACjCrB,KAAK,IAAIsB,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,EAAE;IAC3B,IAAIvB,KAAK,IAAI,GAAG,EAAE;MAChBA,KAAK,GAAG,GAAG;MACXwB,aAAa,CAACJ,QAAQ,CAAC;IACzB;IACAF,QAAQ,CAAClB,KAAK,GAAGA,KAAK;IACtBmB,IAAI,CAACM,WAAW,GAAGH,IAAI,CAACI,KAAK,CAAC1B,KAAK,CAAC,GAAG,GAAG;EAC5C,CAAC,EAAE,GAAG,CAAC;AACT;AAEA,SAAS2B,aAAaA,CAACC,EAAE,EAAE;EACzB1B,QAAQ,CAACC,cAAc,CAACyB,EAAE,CAAC,CAACC,SAAS,CAACC,MAAM,CAAC,QAAQ,CAAC;AACxD;AAEA,SAASC,WAAWA,CAAA,EAAG;EACrB7B,QAAQ,CAACC,cAAc,CAAC,SAAS,CAAC,CAACC,KAAK,CAACC,OAAO,GAAG,MAAM;AAC3D;AAEA,SAAS2B,YAAYA,CAAA,EAAG;EACtB9B,QAAQ,CAACC,cAAc,CAAC,SAAS,CAAC,CAACC,KAAK,CAACC,OAAO,GAAG,MAAM;AAC3D;AAEA,SAAS4B,cAAcA,CAACC,KAAK,EAAE;EAC7BA,KAAK,CAACC,cAAc,CAAC,CAAC;EACtBC,KAAK,CAAC,kCAAkC,CAAC;EACzC,OAAO,KAAK;AACd;AAEA,SAASC,eAAeA,CAAA,EAAG;EACzB,IAAMC,GAAG,GAAGpC,QAAQ,CAACC,cAAc,CAAC,YAAY,CAAC;EACjD,IAAMgB,IAAI,GAAGjB,QAAQ,CAACC,cAAc,CAAC,gBAAgB,CAAC;EACtD,IAAIoC,KAAK,GAAG,CAAC;EACb,IAAMnB,QAAQ,GAAGC,WAAW,CAAC,YAAM;IACjCkB,KAAK,IAAIjB,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,EAAE;IAC3B,IAAIgB,KAAK,IAAI,GAAG,EAAE;MAChBA,KAAK,GAAG,GAAG;MACXf,aAAa,CAACJ,QAAQ,CAAC;IACzB;IACAkB,GAAG,CAAClC,KAAK,CAACmC,KAAK,GAAGA,KAAK,GAAG,GAAG;IAC7BpB,IAAI,CAACM,WAAW,GAAGH,IAAI,CAACI,KAAK,CAACa,KAAK,CAAC,GAAG,GAAG;EAC5C,CAAC,EAAE,GAAG,CAAC;AACT;AAEA,SAASC,cAAcA,CAAA,EAAG;EACxB,IAAMC,MAAM,GAAGvC,QAAQ,CAACC,cAAc,CAAC,YAAY,CAAC;EACpDsC,MAAM,CAACrC,KAAK,CAACC,OAAO,GAAGoC,MAAM,CAACrC,KAAK,CAACC,OAAO,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM;AAC3E","file":"main.082e2b9e.js","sourceRoot":"..","sourcesContent":["// JavaScript functions from original HTML\nconst frameworks = ['React', 'Vue.js', 'Angular', 'Svelte', 'Solid', 'Alpine.js', 'Lit', 'Preact', 'Qwik', 'SvelteKit', 'Next.js', 'Nuxt.js'];\n\nfunction filterFrameworks(value) {\n const results = document.getElementById('js-results');\n if (!value) {\n results.style.display = 'none';\n return;\n }\n const filtered = frameworks.filter(fw => fw.toLowerCase().includes(value.toLowerCase()));\n results.innerHTML = filtered.map(fw => `<div style=\"padding:8px; cursor:pointer;\" onclick=\"selectFramework('${fw}')\">${fw}</div>`).join('');\n results.style.display = filtered.length ? 'block' : 'none';\n}\n\nfunction selectFramework(fw) {\n document.getElementById('js-search').value = fw;\n document.getElementById('js-results').style.display = 'none';\n}\n\nfunction startNativeProgress() {\n const progress = document.getElementById('nativeProgress');\n const text = document.getElementById('nativeProgressText');\n let value = 0;\n const interval = setInterval(() => {\n value += Math.random() * 15;\n if (value >= 100) {\n value = 100;\n clearInterval(interval);\n }\n progress.value = value;\n text.textContent = Math.round(value) + '%';\n }, 200);\n}\n\nfunction toggleContent(id) {\n document.getElementById(id).classList.toggle(\"active\");\n}\n\nfunction openJSModal() {\n document.getElementById('jsModal').style.display = 'flex';\n}\n\nfunction closeJSModal() {\n document.getElementById('jsModal').style.display = 'none';\n}\n\nfunction validateJSForm(event) {\n event.preventDefault();\n alert('Custom validation would run here');\n return false;\n}\n\nfunction startJSProgress() {\n const bar = document.getElementById('jsProgreLine truncated
docs/main.612a6b84.css
+644
View File
@@ -0,0 +1,644 @@
:root {
--color-bg: #ffffff;
--color-card: #f8f9fa;
--color-primary: #0066cc;
--color-primary-hover: #0052a3;
--color-danger: #dc3545;
--color-warning: #856404;
--color-warning-bg: #fff3cd;
--color-content-bg: #f1f3f4;
--color-border: #dee2e6;
--color-text: #212529;
--color-text-muted: #6c757d;
--color-code-bg: #f8f9fa;
--color-code-text: #0066cc;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
--radius: 8px;
--focus-outline: 2px solid #0066cc;
--focus-outline-danger: 2px solid #dc3545;
--focus-offset: 2px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
background: var(--color-bg);
color: var(--color-text);
min-height: 100vh;
}
.hero {
text-align: center;
margin-bottom: 4rem;
padding: 3rem;
background: var(--color-card);
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid var(--color-border);
}
.hero:focus-within {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
margin-bottom: 1.5rem;
color: var(--color-primary);
font-weight: 700;
letter-spacing: -0.02em;
}
.hero .subtitle {
font-size: 1.125rem;
color: var(--color-text-muted);
max-width: 700px;
margin: 0 auto;
line-height: 1.5;
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: 2rem 0;
}
.section {
margin: 4rem 0;
}
.section-title {
font-size: 2rem;
margin-bottom: 2rem;
padding: 1.5rem 0;
text-align: center;
color: var(--color-primary);
position: relative;
font-weight: 600;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: var(--color-primary);
}
.column {
background: var(--color-card);
padding: 2rem;
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid var(--color-border);
transition: box-shadow 0.2s ease;
position: relative;
}
.column:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.column:focus-within {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
.column.bad:focus-within {
outline: var(--focus-outline-danger);
}
.column h3 {
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
padding-bottom: 1rem;
margin-bottom: 2rem;
font-size: 1.25rem;
font-weight: 600;
}
.bad {
border-left: 3px solid var(--color-danger);
}
.bad h3::before {
content: '⚠️ ';
}
.bad button {
background: var(--color-danger);
}
.bad button:hover {
background: var(--color-danger);
}
.bad button:focus {
outline: var(--focus-outline-danger);
outline-offset: var(--focus-offset);
}
.good {
border-left: 3px solid var(--color-primary);
}
.good h3::before {
content: '✅ ';
}
.accessibility-note {
background: var(--color-warning-bg);
border: 1px solid #ffc107;
color: var(--color-warning);
padding: 1rem;
border-radius: var(--radius);
margin: 1.5rem 0;
font-size: 0.875rem;
}
.code-block {
/*display: none;*/
background: var(--color-code-bg);
color: var(--color-code-text);
padding: 2rem 1.5rem 1rem;
border-radius: var(--radius);
overflow-x: auto;
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
font-size: 0.875rem;
margin: 1.5rem 0;
border: 1px solid var(--color-border);
position: relative;
}
.code-block:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
.code-block::before {
content: 'CODE';
position: absolute;
top: -6px;
right: 15px;
background: var(--color-primary);
color: white;
padding: 10px 8px 0;
font-size: 0.7rem;
border-radius: 4px;
font-weight: 600;
}
.pros-cons {
margin: 1.5rem 0;
}
.pros-cons h4 {
margin-bottom: 1rem;
color: var(--color-text);
font-size: 1rem;
font-weight: 600;
}
.pros-cons ul {
list-style: none;
padding-left: 0;
}
.pros-cons li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
}
.pros li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: bold;
}
.cons li::before {
content: '✗';
position: absolute;
left: 0;
color: var(--color-danger);
font-weight: bold;
}
/* Interactive Elements */
.js-collapsible {
color: white;
cursor: pointer;
padding: 12px 16px;
border: none;
text-align: left;
outline: none;
font-size: 1rem;
border-radius: var(--radius);
margin-bottom: 1rem;
width: 100%;
font-family: inherit;
font-weight: 500;
}
.js-wrapper {
display: flex;
flex-direction: column-reverse;
}
.js-content {
display: none;
background: var(--color-content-bg);
border: 1px solid var(--color-border);
border-radius: 0 0 var(--radius) var(--radius);
margin-bottom: 1rem;
}
.js-content.active {
display: block;
padding: 0.5rem;
}
.js-content.active + .js-collapsible {
border-radius: var(--radius) var(--radius) 0 0;
margin-bottom: 0;
}
details {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
margin-bottom: 1rem;
overflow: hidden;
}
details:focus-within {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
summary {
background: var(--color-primary);
color: white;
padding: 12px 16px;
cursor: pointer;
font-size: 1rem;
list-style: none;
font-weight: 500;
transition: all 0.2s ease;
}
summary:hover {
background: var(--color-primary-hover);
}
summary:focus {
outline: var(--focus-outline);
outline-offset: -2px;
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: '▶';
margin-right: 8px;
transition: transform 0.2s ease;
display: inline-block;
}
details[open] summary::before {
transform: rotate(90deg);
}
details > div {
padding: 16px;
background: var(--color-content-bg);
}
/* Modal Styles */
.js-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
}
.js-modal-overlay.active {
display: flex;
align-items: center;
justify-content: center;
}
.js-modal-content {
margin: auto;
background: var(--color-bg);
padding: 2rem;
border-radius: var(--radius);
max-width: 500px;
width: 90%;
border: 1px solid var(--color-border);
box-shadow: var(--shadow);
}
.js-modal-content:focus {
outline: var(--focus-outline-danger);
outline-offset: var(--focus-offset);
}
dialog {
margin: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 2rem;
background: var(--color-bg);
color: var(--color-text);
box-shadow: var(--shadow);
max-width: 500px;
width: 90vw;
}
dialog:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.6);
}
/* Form Styles */
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--color-text);
}
.form-group input, .form-group textarea, .form-group select {
width: 100%;
padding: 10px 12px;
border: 2px solid var(--color-border);
border-radius: var(--radius);
font-size: 1rem;
background: var(--color-bg);
color: var(--color-text);
transition: all 0.2s ease;
font-family: inherit;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
outline: var(--focus-outline);
outline-offset: 2px;
border-color: var(--color-border);
}
.form-group input:invalid {
border-color: var(--color-danger);
}
.form-group input:valid {
border-color: var(--color-primary);
}
.js-error {
color: var(--color-danger);
font-size: 0.875rem;
margin-top: 0.5rem;
display: none;
}
.js-error.active {
display: block;
}
/* Progress Styles */
.js-progress-container {
width: 100%;
background: var(--color-border);
border-radius: 4px;
height: 20px;
margin: 1.5rem 0;
overflow: hidden;
}
.js-progress-bar {
height: 100%;
background: var(--color-danger);
width: 0;
transition: width 0.3s ease;
border-radius: 4px;
}
progress {
width: 100%;
height: 20px;
margin: 1.5rem 0;
border-radius: 4px;
border: none;
background: var(--color-border);
}
progress:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
progress::-webkit-progress-bar {
background-color: var(--color-border);
border-radius: 4px;
}
progress::-webkit-progress-value {
background: var(--color-primary);
border-radius: 4px;
}
progress::-moz-progress-bar {
background: var(--color-primary);
border-radius: 4px;
}
/* Button Styles */
button {
background: var(--color-primary);
color: white;
border: none;
padding: 10px 16px;
border-radius: var(--radius);
cursor: pointer;
font-size: 1rem;
margin: 0.5rem 0.5rem 0.5rem 0;
font-weight: 500;
transition: all 0.2s ease;
font-family: inherit;
}
button:hover {
background: var(--color-primary-hover);
transform: translateY(-1px);
}
button:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
button:disabled {
background: var(--color-text-muted);
cursor: not-allowed;
transform: none;
}
/* Component Styles */
.datalist-container {
position: relative;
}
input[list] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 36px;
}
.slider-container {
margin: 2rem 0;
}
input[type="range"] {
width: 100%;
height: 6px;
border-radius: 3px;
background: var(--color-border);
outline: none;
-webkit-appearance: none;
}
input[type="range"]:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-primary);
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-primary);
cursor: pointer;
border: none;
}
.color-input {
width: 50px;
height: 32px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
cursor: pointer;
}
.color-input:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
.summary-box {
margin-top: 4rem;
padding: 2rem;
background: var(--color-card);
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid var(--color-border);
text-align: center;
}
.summary-box h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--color-primary);
font-weight: 600;
}
.zen-quote {
font-style: italic;
color: var(--color-text-muted);
font-size: 1rem;
margin-top: 1.5rem;
border-left: 3px solid var(--color-primary);
padding-left: 1rem;
}
@media (max-width: 768px) {
.comparison-grid {
grid-template-columns: 1fr;
}
body {
padding: 1rem;
}
.hero {
padding: 2rem;
}
.section-title {
font-size: 1.75rem;
}
}
/* Performance indicators */
.perf-indicator {
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
margin-left: 8px;
}
.perf-fast {
background: rgba(0, 102, 204, 0.1);
color: var(--color-primary);
}
.perf-slow {
background: rgba(220, 53, 69, 0.1);
color: var(--color-danger);
}
/*# sourceMappingURL=/html-over-js/main.612a6b84.css.map */
docs/main.612a6b84.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["src/main.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"main.612a6b84.css","sourceRoot":"..","sourcesContent":[":root {\n --color-bg: #ffffff;\n --color-card: #f8f9fa;\n --color-primary: #0066cc;\n --color-primary-hover: #0052a3;\n --color-danger: #dc3545;\n --color-warning: #856404;\n --color-warning-bg: #fff3cd;\n --color-content-bg: #f1f3f4;\n --color-border: #dee2e6;\n --color-text: #212529;\n --color-text-muted: #6c757d;\n --color-code-bg: #f8f9fa;\n --color-code-text: #0066cc;\n --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n --radius: 8px;\n --focus-outline: 2px solid #0066cc;\n --focus-outline-danger: 2px solid #dc3545;\n --focus-offset: 2px;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n line-height: 1.6;\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n background: var(--color-bg);\n color: var(--color-text);\n min-height: 100vh;\n}\n\n.hero {\n text-align: center;\n margin-bottom: 4rem;\n padding: 3rem;\n background: var(--color-card);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n border: 1px solid var(--color-border);\n}\n\n.hero:focus-within {\n outline: var(--focus-outline);\n outline-offset: var(--focus-offset);\n}\n\n.hero h1 {\n font-size: clamp(2rem, 5vw, 3.5rem);\n margin-bottom: 1.5rem;\n color: var(--color-primary);\n font-weight: 700;\n letter-spacing: -0.02em;\n}\n\n.hero .subtitle {\n font-size: 1.125rem;\n color: var(--color-text-muted);\n max-width: 700px;\n margin: 0 auto;\n line-height: 1.5;\n}\n\n.comparison-grid {\n display: gridLine truncated
index.html
-1220
View File
File diff suppressed because it is too large. Load diff
index.pug
+228
View File
@@ -0,0 +1,228 @@
include src/components/mixins
doctype html
html(lang=lang, dir=dir)
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title= t.meta.title
meta(name="description", content=t.meta.description)
link(rel="stylesheet", href="src/main.css")
body.search_plugin_added
//- Hero Section
.hero
h1= t.hero.title
p.subtitle= t.hero.subtitle
//- Progressive Disclosure Section
+section(t.sections.disclosure.title)
.comparison-grid
+badColumn(t.sections.disclosure.js_title, t.sections.disclosure.js_badge, t.sections.disclosure.js_warning)
+jsCollapsible("content1", "Custom Collapsible Architecture", t.sections.disclosure.js_content1)
+jsCollapsible("content2", "State Management Challenges", t.sections.disclosure.js_content2)
+consList(t.sections.disclosure.js_cons_title, t.sections.disclosure.js_cons)
+goodColumn(t.sections.disclosure.native_title, t.sections.disclosure.native_badge, t.sections.disclosure.native_note)
details(name="architecture")
summary= t.sections.disclosure.native_semantic_title
div= t.sections.disclosure.native_semantic_content
details(name="architecture")
summary= t.sections.disclosure.native_enhancement_title
div= t.sections.disclosure.native_enhancement_content
details(name="architecture")
summary= t.sections.disclosure.native_performance_title
div= t.sections.disclosure.native_performance_content
+prosList(t.sections.disclosure.native_pros_title, t.sections.disclosure.native_pros)
//- Modal Section
+section(t.sections.modals.title)
.comparison-grid
+badColumn(t.sections.modals.js_title, t.sections.modals.js_badge, t.sections.modals.js_warning)
button(onclick="openJSModal()")= t.sections.modals.js_button
#jsModal.js-modal-overlay
.js-modal-content
h4= t.sections.modals.js_modal_title
p= t.sections.modals.js_modal_content
p
strong= t.sections.modals.js_modal_issue
button(onclick="closeJSModal()")= t.sections.modals.js_modal_close
+consList(t.sections.modals.js_cons_title, t.sections.modals.js_cons)
+goodColumn(t.sections.modals.native_title, t.sections.modals.native_badge, t.sections.modals.native_note)
button(onclick="document.getElementById('nativeDialog').showModal()")= t.sections.modals.native_button
dialog#nativeDialog
h4= t.sections.modals.native_dialog_title
p= t.sections.modals.native_dialog_content
p
strong= t.sections.modals.native_dialog_advantage
button(onclick="document.getElementById('nativeDialog').close()")= t.sections.modals.native_dialog_close
+prosList(t.sections.modals.native_pros_title, t.sections.modals.native_pros)
//- Form Validation Section
+section(t.sections.validation.title)
.comparison-grid
+badColumn(t.sections.validation.js_title, t.sections.validation.js_badge, t.sections.validation.js_warning)
form(onsubmit="return validateJSForm(event)")
+formGroup(t.sections.validation.js_email_label)
input#js-email(name="email", type="text")
#email-error.js-error= t.sections.validation.js_email_error
+formGroup(t.sections.validation.js_regex_label)
input#js-regex(name="uuid", type="text")
#regex-error.js-error= t.sections.validation.js_regex_error
button(type="submit")= t.sections.validation.js_submit
+consList(t.sections.validation.js_cons_title, t.sections.validation.js_cons)
+goodColumn(t.sections.validation.native_title, t.sections.validation.native_badge, t.sections.validation.native_note)
form
+formGroup(t.sections.validation.native_email_label)
input#native-email(name="email", type="email", placeholder=t.sections.validation.native_email_placeholder, required)
+formGroup(t.sections.validation.native_uuid_label)
input#native-uuid(
name="uuid",
type="text",
pattern="[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}",
placeholder=t.sections.validation.native_uuid_placeholder,
title=t.sections.validation.native_uuid_title,
required
)
+formGroup(t.sections.validation.native_api_label)
input#native-api(name="api", type="url", placeholder=t.sections.validation.native_api_placeholder)
button(type="submit")= t.sections.validation.native_submit
+prosList(t.sections.validation.native_pros_title, t.sections.validation.native_pros)
//- Progress Section
+section(t.sections.progress.title)
.comparison-grid
+badColumn(t.sections.progress.js_title, t.sections.progress.js_badge, t.sections.progress.js_warning)
.js-progress-container
#jsProgress.js-progress-bar
p= t.sections.progress.js_text + " "
span#jsProgressText 0%
button(onclick="startJSProgress()")= t.sections.progress.js_button
+consList(t.sections.progress.js_cons_title, t.sections.progress.js_cons)
+goodColumn(t.sections.progress.native_title, t.sections.progress.native_badge, t.sections.progress.native_note)
p= t.sections.progress.native_compilation
progress(max="100", value="75")= t.sections.progress.native_compilation_text
p= t.sections.progress.native_indeterminate
progress= t.sections.progress.native_indeterminate_text
p= t.sections.progress.native_dynamic + " "
span#nativeProgressText 0%
progress#nativeProgress(max="100", value="0") 0%
button(onclick="startNativeProgress()")= t.sections.progress.native_button
+prosList(t.sections.progress.native_pros_title, t.sections.progress.native_pros)
//- Temporal Input Section
+section(t.sections.temporal.title)
.comparison-grid
+badColumn(t.sections.temporal.js_title, t.sections.temporal.js_badge, t.sections.temporal.js_warning)
+formGroup(t.sections.temporal.js_label)
input#js-date(type="text", placeholder=t.sections.temporal.js_placeholder, readonly, onclick="openDatePicker()")
#datePicker(style="display: none; position: absolute; background: white; border: 1px solid #ccc; z-index: 1000")
p(style="padding: 20px; color: #666")= t.sections.temporal.js_picker_content
+consList(t.sections.temporal.js_cons_title, t.sections.temporal.js_cons)
+goodColumn(t.sections.temporal.native_title, t.sections.temporal.native_badge, t.sections.temporal.native_note)
+formGroup(t.sections.temporal.native_release_label)
input#native-date(name="date", type="date", value="2024-12-15", min="2024-01-01", max="2025-12-31")
+formGroup(t.sections.temporal.native_timestamp_label)
input#native-datetime(name="datetime", type="datetime-local", step="1")
+formGroup(t.sections.temporal.native_window_label)
input#native-time(name="time", type="time", min="02:00", max="18:00", step="900")
+prosList(t.sections.temporal.native_pros_title, t.sections.temporal.native_pros)
//- Autocomplete Section
+section(t.sections.autocomplete.title)
.comparison-grid
+badColumn(t.sections.autocomplete.js_title, t.sections.autocomplete.js_badge, t.sections.autocomplete.js_warning)
+formGroup(t.sections.autocomplete.js_label)
input#js-search(type="text", placeholder=t.sections.autocomplete.js_placeholder, autocomplete="off", onkeyup="filterFrameworks(this.value)")
#js-results(
style="display: none; position: absolute; background: var(--color-card); border: 1px solid var(--color-border); max-height: 200px; overflow-y: auto; z-index: 100"
)
+consList(t.sections.autocomplete.js_cons_title, t.sections.autocomplete.js_cons)
+goodColumn(t.sections.autocomplete.native_title, t.sections.autocomplete.native_badge, t.sections.autocomplete.native_note)
+formGroup(t.sections.autocomplete.native_framework_label)
input#native-framework(type="text", list="frameworks", placeholder=t.sections.autocomplete.native_framework_placeholder)
datalist#frameworks
option(value="React") React - Component-based library
option(value="Vue.js") Vue.js - Progressive framework
option(value="Angular") Angular - Full platform
option(value="Svelte") Svelte - Compile-time framework
option(value="Solid") Solid - Fine-grained reactivity
option(value="Alpine.js") Alpine.js - Minimal framework
option(value="Lit") Lit - Web Components library
option(value="Preact") Preact - Lightweight React alternative
+formGroup(t.sections.autocomplete.native_language_label)
input#native-language(type="text", list="languages", placeholder=t.sections.autocomplete.native_language_placeholder)
datalist#languages
option(value="JavaScript", label="JavaScript - Dynamic scripting")
option(value="TypeScript", label="TypeScript - Typed JavaScript")
option(value="Python", label="Python - General purpose")
option(value="Rust", label="Rust - Systems programming")
option(value="Go", label="Go - Concurrent systems")
option(value="WebAssembly", label="WebAssembly - High-performance web")
option(value="C", label="C - Low-level systems")
option(value="C++", label="C++ - High-performance systems")
option(value="C#", label="C# - .NET ecosystem")
option(value="Java", label="Java - Cross-platform enterprise")
option(value="Kotlin", label="Kotlin - Modern JVM language")
option(value="Swift", label="Swift - iOS and macOS")
option(value="Ruby", label="Ruby - Web development (Rails)")
option(value="PHP", label="PHP - Server-side scripting")
option(value="Perl", label="Perl - Text processing")
option(value="Haskell", label="Haskell - Functional programming")
option(value="Elixir", label="Elixir - Scalable applications")
option(value="Dart", label="Dart - Web and mobile apps")
option(value="Scala", label="Scala - Functional JVM language")
option(value="Lua", label="Lua - Lightweight scripting")
option(value="R", label="R - Statistical computing")
option(value="Julia", label="Julia - High-performance computing")
option(value="Shell", label="Shell - Command-line scripting")
option(value="MATLAB", label="MATLAB - Engineering and science")
+prosList(t.sections.autocomplete.native_pros_title, t.sections.autocomplete.native_pros)
//- Summary Section
.summary-box
h3= t.summary.title
p= t.summary.content
p
strong= t.summary.approach_title
ul(style="text-align: left; max-width: 600px; margin: 2rem auto")
each item in t.summary.approach_items
li= item
p= t.summary.closing
.zen-quote= t.summary.quote
script(src="src/main.js")
package-lock.json
Generated
+19040 -2
View File
File diff suppressed because it is too large. Load diff
package.json
+36 -11
View File
@@ -1,13 +1,38 @@
{
"name": "dhbw-html",
"version": "0.0.0",
"description": "",
"license": "ISC",
"author": "Michael W. Czechowski <mail@dailysh.it>",
"type": "commonjs",
"main": "index.html",
"scripts": {
"start": "npx serve . -p 1312 --cors",
"test": "echo \"Error: no test specified\" && exit 1"
}
"name": "html-over-js",
"version": "0.0.0",
"description": "",
"main": "index.pug",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel --port 1312 --public-url / index.pug --open",
"build": "parcel build index.pug --out-dir docs --public-url /html-over-js --no-minify",
"format": "prettier --write src/**/*.pug index.pug package.json && prettier --write --parser json .pugrc"
},
"author": "Michael Werner Czechowski <mail@dailysh.it>",
"license": "Apache-2.0",
"devDependencies": {
"@prettier/plugin-pug": "^3.1.0",
"parcel-bundler": "^1.10.3",
"prettier": "^3.3.3",
"pug": "^3.0.3"
},
"prettier": {
"singleQuote": false,
"tabWidth": 4,
"semi": true,
"arrowParens": "always",
"useTabs": true,
"jsxSingleQuote": false,
"bracketSpacing": false,
"printWidth": 160,
"trailingComma": "all",
"bracketSameLine": false,
"htmlWhitespaceSensitivity": "strict",
"proseWrap": "never",
"singleAttributePerLine": false,
"plugins": [
"@prettier/plugin-pug"
]
}
}
src/components/mixins.pug
+48
View File
@@ -0,0 +1,48 @@
mixin section(title)
.section
h2.section-title= title
block
mixin badColumn(title, badge, warning)
.column.bad
h3= title + " "
span.perf-indicator.perf-slow= badge
.accessibility-note
strong ⚠️ #{warning}
block
mixin goodColumn(title, badge, note)
.column.good
h3= title + " "
span.perf-indicator.perf-fast= badge
.accessibility-note
strong 🎯 #{note}
block
mixin jsCollapsible(id, title, content)
.js-wrapper
.js-content(id=id)= content
button.js-collapsible(onclick=`toggleContent('${id}')`)= title
mixin formGroup(label)
.form-group
label= label
block
mixin consList(title, items)
.pros-cons
h4.cons= title
ul
each item in items
li= item
mixin prosList(title, items)
.pros-cons
h4.pros= title
ul
each item in items
li= item
src/main.css
+641
View File
@@ -0,0 +1,641 @@
:root {
--color-bg: #ffffff;
--color-card: #f8f9fa;
--color-primary: #0066cc;
--color-primary-hover: #0052a3;
--color-danger: #dc3545;
--color-warning: #856404;
--color-warning-bg: #fff3cd;
--color-content-bg: #f1f3f4;
--color-border: #dee2e6;
--color-text: #212529;
--color-text-muted: #6c757d;
--color-code-bg: #f8f9fa;
--color-code-text: #0066cc;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
--radius: 8px;
--focus-outline: 2px solid #0066cc;
--focus-outline-danger: 2px solid #dc3545;
--focus-offset: 2px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
background: var(--color-bg);
color: var(--color-text);
min-height: 100vh;
}
.hero {
text-align: center;
margin-bottom: 4rem;
padding: 3rem;
background: var(--color-card);
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid var(--color-border);
}
.hero:focus-within {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
margin-bottom: 1.5rem;
color: var(--color-primary);
font-weight: 700;
letter-spacing: -0.02em;
}
.hero .subtitle {
font-size: 1.125rem;
color: var(--color-text-muted);
max-width: 700px;
margin: 0 auto;
line-height: 1.5;
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: 2rem 0;
}
.section {
margin: 4rem 0;
}
.section-title {
font-size: 2rem;
margin-bottom: 2rem;
padding: 1.5rem 0;
text-align: center;
color: var(--color-primary);
position: relative;
font-weight: 600;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: var(--color-primary);
}
.column {
background: var(--color-card);
padding: 2rem;
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid var(--color-border);
transition: box-shadow 0.2s ease;
position: relative;
}
.column:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.column:focus-within {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
.column.bad:focus-within {
outline: var(--focus-outline-danger);
}
.column h3 {
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
padding-bottom: 1rem;
margin-bottom: 2rem;
font-size: 1.25rem;
font-weight: 600;
}
.bad {
border-left: 3px solid var(--color-danger);
}
.bad h3::before {
content: '⚠️ ';
}
.bad button {
background: var(--color-danger);
}
.bad button:hover {
background: var(--color-danger);
}
.bad button:focus {
outline: var(--focus-outline-danger);
outline-offset: var(--focus-offset);
}
.good {
border-left: 3px solid var(--color-primary);
}
.good h3::before {
content: '✅ ';
}
.accessibility-note {
background: var(--color-warning-bg);
border: 1px solid #ffc107;
color: var(--color-warning);
padding: 1rem;
border-radius: var(--radius);
margin: 1.5rem 0;
font-size: 0.875rem;
}
.code-block {
/*display: none;*/
background: var(--color-code-bg);
color: var(--color-code-text);
padding: 2rem 1.5rem 1rem;
border-radius: var(--radius);
overflow-x: auto;
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
font-size: 0.875rem;
margin: 1.5rem 0;
border: 1px solid var(--color-border);
position: relative;
}
.code-block:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
.code-block::before {
content: 'CODE';
position: absolute;
top: -6px;
right: 15px;
background: var(--color-primary);
color: white;
padding: 10px 8px 0;
font-size: 0.7rem;
border-radius: 4px;
font-weight: 600;
}
.pros-cons {
margin: 1.5rem 0;
}
.pros-cons h4 {
margin-bottom: 1rem;
color: var(--color-text);
font-size: 1rem;
font-weight: 600;
}
.pros-cons ul {
list-style: none;
padding-left: 0;
}
.pros-cons li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
}
.pros li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: bold;
}
.cons li::before {
content: '✗';
position: absolute;
left: 0;
color: var(--color-danger);
font-weight: bold;
}
/* Interactive Elements */
.js-collapsible {
color: white;
cursor: pointer;
padding: 12px 16px;
border: none;
text-align: left;
outline: none;
font-size: 1rem;
border-radius: var(--radius);
margin-bottom: 1rem;
width: 100%;
font-family: inherit;
font-weight: 500;
}
.js-wrapper {
display: flex;
flex-direction: column-reverse;
}
.js-content {
display: none;
background: var(--color-content-bg);
border: 1px solid var(--color-border);
border-radius: 0 0 var(--radius) var(--radius);
margin-bottom: 1rem;
}
.js-content.active {
display: block;
padding: 0.5rem;
}
.js-content.active + .js-collapsible {
border-radius: var(--radius) var(--radius) 0 0;
margin-bottom: 0;
}
details {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
margin-bottom: 1rem;
overflow: hidden;
}
details:focus-within {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
summary {
background: var(--color-primary);
color: white;
padding: 12px 16px;
cursor: pointer;
font-size: 1rem;
list-style: none;
font-weight: 500;
transition: all 0.2s ease;
}
summary:hover {
background: var(--color-primary-hover);
}
summary:focus {
outline: var(--focus-outline);
outline-offset: -2px;
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: '▶';
margin-right: 8px;
transition: transform 0.2s ease;
display: inline-block;
}
details[open] summary::before {
transform: rotate(90deg);
}
details > div {
padding: 16px;
background: var(--color-content-bg);
}
/* Modal Styles */
.js-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
}
.js-modal-overlay.active {
display: flex;
align-items: center;
justify-content: center;
}
.js-modal-content {
margin: auto;
background: var(--color-bg);
padding: 2rem;
border-radius: var(--radius);
max-width: 500px;
width: 90%;
border: 1px solid var(--color-border);
box-shadow: var(--shadow);
}
.js-modal-content:focus {
outline: var(--focus-outline-danger);
outline-offset: var(--focus-offset);
}
dialog {
margin: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 2rem;
background: var(--color-bg);
color: var(--color-text);
box-shadow: var(--shadow);
max-width: 500px;
width: 90vw;
}
dialog:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.6);
}
/* Form Styles */
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--color-text);
}
.form-group input, .form-group textarea, .form-group select {
width: 100%;
padding: 10px 12px;
border: 2px solid var(--color-border);
border-radius: var(--radius);
font-size: 1rem;
background: var(--color-bg);
color: var(--color-text);
transition: all 0.2s ease;
font-family: inherit;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
outline: var(--focus-outline);
outline-offset: 2px;
border-color: var(--color-border);
}
.form-group input:invalid {
border-color: var(--color-danger);
}
.form-group input:valid {
border-color: var(--color-primary);
}
.js-error {
color: var(--color-danger);
font-size: 0.875rem;
margin-top: 0.5rem;
display: none;
}
.js-error.active {
display: block;
}
/* Progress Styles */
.js-progress-container {
width: 100%;
background: var(--color-border);
border-radius: 4px;
height: 20px;
margin: 1.5rem 0;
overflow: hidden;
}
.js-progress-bar {
height: 100%;
background: var(--color-danger);
width: 0;
transition: width 0.3s ease;
border-radius: 4px;
}
progress {
width: 100%;
height: 20px;
margin: 1.5rem 0;
border-radius: 4px;
border: none;
background: var(--color-border);
}
progress:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
progress::-webkit-progress-bar {
background-color: var(--color-border);
border-radius: 4px;
}
progress::-webkit-progress-value {
background: var(--color-primary);
border-radius: 4px;
}
progress::-moz-progress-bar {
background: var(--color-primary);
border-radius: 4px;
}
/* Button Styles */
button {
background: var(--color-primary);
color: white;
border: none;
padding: 10px 16px;
border-radius: var(--radius);
cursor: pointer;
font-size: 1rem;
margin: 0.5rem 0.5rem 0.5rem 0;
font-weight: 500;
transition: all 0.2s ease;
font-family: inherit;
}
button:hover {
background: var(--color-primary-hover);
transform: translateY(-1px);
}
button:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
button:disabled {
background: var(--color-text-muted);
cursor: not-allowed;
transform: none;
}
/* Component Styles */
.datalist-container {
position: relative;
}
input[list] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 36px;
}
.slider-container {
margin: 2rem 0;
}
input[type="range"] {
width: 100%;
height: 6px;
border-radius: 3px;
background: var(--color-border);
outline: none;
-webkit-appearance: none;
}
input[type="range"]:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-primary);
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-primary);
cursor: pointer;
border: none;
}
.color-input {
width: 50px;
height: 32px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
cursor: pointer;
}
.color-input:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
.summary-box {
margin-top: 4rem;
padding: 2rem;
background: var(--color-card);
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid var(--color-border);
text-align: center;
}
.summary-box h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--color-primary);
font-weight: 600;
}
.zen-quote {
font-style: italic;
color: var(--color-text-muted);
font-size: 1rem;
margin-top: 1.5rem;
border-left: 3px solid var(--color-primary);
padding-left: 1rem;
}
@media (max-width: 768px) {
.comparison-grid {
grid-template-columns: 1fr;
}
body {
padding: 1rem;
}
.hero {
padding: 2rem;
}
.section-title {
font-size: 1.75rem;
}
}
/* Performance indicators */
.perf-indicator {
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
margin-left: 8px;
}
.perf-fast {
background: rgba(0, 102, 204, 0.1);
color: var(--color-primary);
}
.perf-slow {
background: rgba(220, 53, 69, 0.1);
color: var(--color-danger);
}
src/main.js
+71
View File
@@ -0,0 +1,71 @@
// JavaScript functions from original HTML
const frameworks = ['React', 'Vue.js', 'Angular', 'Svelte', 'Solid', 'Alpine.js', 'Lit', 'Preact', 'Qwik', 'SvelteKit', 'Next.js', 'Nuxt.js'];
function filterFrameworks(value) {
const results = document.getElementById('js-results');
if (!value) {
results.style.display = 'none';
return;
}
const filtered = frameworks.filter(fw => fw.toLowerCase().includes(value.toLowerCase()));
results.innerHTML = filtered.map(fw => `<div style="padding:8px; cursor:pointer;" onclick="selectFramework('${fw}')">${fw}</div>`).join('');
results.style.display = filtered.length ? 'block' : 'none';
}
function selectFramework(fw) {
document.getElementById('js-search').value = fw;
document.getElementById('js-results').style.display = 'none';
}
function startNativeProgress() {
const progress = document.getElementById('nativeProgress');
const text = document.getElementById('nativeProgressText');
let value = 0;
const interval = setInterval(() => {
value += Math.random() * 15;
if (value >= 100) {
value = 100;
clearInterval(interval);
}
progress.value = value;
text.textContent = Math.round(value) + '%';
}, 200);
}
function toggleContent(id) {
document.getElementById(id).classList.toggle("active");
}
function openJSModal() {
document.getElementById('jsModal').style.display = 'flex';
}
function closeJSModal() {
document.getElementById('jsModal').style.display = 'none';
}
function validateJSForm(event) {
event.preventDefault();
alert('Custom validation would run here');
return false;
}
function startJSProgress() {
const bar = document.getElementById('jsProgress');
const text = document.getElementById('jsProgressText');
let width = 0;
const interval = setInterval(() => {
width += Math.random() * 15;
if (width >= 100) {
width = 100;
clearInterval(interval);
}
bar.style.width = width + '%';
text.textContent = Math.round(width) + '%';
}, 200);
}
function openDatePicker() {
const picker = document.getElementById('datePicker');
picker.style.display = picker.style.display === 'none' ? 'block' : 'none';
}