module
Xssmaze::Assets
Overview
Static CSS/JS for the index page. Served separately from the catalog HTML so browsers can cache them independently.
Defined in:
assets.crConstant Summary
-
INDEX_CSS =
" body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #ffffff;\n }\n .header {\n max-width: 1200px;\n margin: 0 auto 20px;\n }\n h1 { color: #333; margin-bottom: 10px; }\n .description { color: #666; line-height: 1.6; margin-bottom: 10px; }\n .description code {\n background-color: #f4f4f4;\n color: #c7254e;\n padding: 2px 6px;\n border-radius: 3px;\n font-family: 'Courier New', monospace;\n }\n .stats {\n display: flex;\n gap: 18px;\n margin: 14px 0;\n flex-wrap: wrap;\n }\n .stats .stat {\n background: #f5f5f5;\n padding: 6px 12px;\n border-radius: 4px;\n font-size: 0.9em;\n color: #333;\n }\n .stats .stat strong { color: #0366d6; }\n .controls {\n display: flex;\n gap: 10px;\n margin-top: 16px;\n align-items: center;\n flex-wrap: wrap;\n }\n #search {\n flex: 1;\n min-width: 240px;\n padding: 8px 12px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 14px;\n }\n .map-links {\n margin-top: 14px;\n padding-top: 14px;\n border-top: 1px solid #e0e0e0;\n font-size: 0.92em;\n }\n .map-links a {\n color: #0366d6;\n text-decoration: none;\n margin-right: 12px;\n }\n .map-links a:hover { text-decoration: underline; }\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 30px 60px;\n background-color: #F5F5F5;\n border-radius: 8px;\n }\n .list {\n list-style: none;\n padding: 0;\n margin: 0;\n line-height: 1.1;\n }\n .list li {\n padding: 0.2em 0 0.2em 1.2em;\n margin: 0;\n position: relative;\n font-weight: 600;\n color: #333;\n }\n .list li:before {\n content: '';\n width: 0.5em;\n height: 0.5em;\n position: absolute;\n border-radius: 0.5em;\n background-color: #666;\n display: block;\n left: -0.2em;\n top: 0.4em;\n }\n .list li + li:after {\n content: '';\n display: block;\n width: 2px;\n height: 1em;\n padding: 0.2em 0;\n background-color: #666;\n position: absolute;\n left: 0;\n top: -0.75em;\n }\n .list li > .list { position: relative; }\n .list li > .list:before {\n content: '';\n display: block;\n width: 1.5em;\n height: 2px;\n background-color: #666;\n position: absolute;\n left: -1.35em;\n top: -0.1em;\n transform: rotate(45deg);\n }\n .list li > .list:after {\n content: '';\n display: block;\n width: 2px;\n height: 115%;\n background-color: #666;\n position: absolute;\n left: -1.2em;\n top: -0.5em;\n }\n .list li:last-of-type > .list:after { content: none; }\n .list li > .list li {\n font-weight: normal;\n font-size: 0.95em;\n }\n .list li > .list li a {\n color: #0366d6;\n text-decoration: none;\n }\n .list li > .list li a:hover { text-decoration: underline; }\n .count {\n color: #888;\n font-weight: normal;\n font-size: 0.85em;\n }\n .method {\n display: inline-block;\n font-size: 0.7em;\n font-weight: 700;\n color: #666;\n background: #e7e7e7;\n padding: 1px 6px;\n border-radius: 3px;\n margin-left: 4px;\n }\n .hidden { display: none !important; }\n @media (max-width: 768px) {\n .container { padding: 20px 16px; margin: 0 8px; }\n body { padding: 10px; }\n }" -
INDEX_JS =
" (function () {\n var input = document.getElementById('search');\n if (!input) return;\n var mazes = document.querySelectorAll('.maze');\n var cats = document.querySelectorAll('.cat');\n var totalEl = document.getElementById('stat-visible');\n input.addEventListener('input', function () {\n var q = input.value.toLowerCase().trim();\n var visible = 0;\n mazes.forEach(function (el) {\n var name = el.getAttribute('data-name') || '';\n var desc = el.getAttribute('data-desc') || '';\n var match = q === '' || name.indexOf(q) !== -1 || desc.indexOf(q) !== -1;\n el.classList.toggle('hidden', !match);\n if (match) visible++;\n });\n cats.forEach(function (cat) {\n var any = cat.querySelectorAll('.maze:not(.hidden)').length > 0;\n cat.classList.toggle('hidden', !any);\n });\n if (totalEl) totalEl.textContent = visible;\n });\n })();"