first commit
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
---
|
||||
name: web-design-guidelines
|
||||
description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
|
||||
metadata:
|
||||
author: vercel
|
||||
version: "1.0.0"
|
||||
argument-hint: <file-or-pattern>
|
||||
---
|
||||
|
||||
# Web Interface Guidelines
|
||||
|
||||
Review files for compliance with Web Interface Guidelines.
|
||||
|
||||
## How It Works
|
||||
|
||||
1. Fetch the latest guidelines from the source URL below
|
||||
2. Read the specified files (or prompt user for files/pattern)
|
||||
3. Check against all rules in the fetched guidelines
|
||||
4. Output findings in the terse `file:line` format
|
||||
|
||||
## Guidelines Source
|
||||
|
||||
Fetch fresh guidelines before each review:
|
||||
|
||||
```
|
||||
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
|
||||
```
|
||||
|
||||
Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
|
||||
|
||||
## Usage
|
||||
|
||||
When a user provides a file or pattern argument:
|
||||
1. Fetch guidelines from the source URL above
|
||||
2. Read the specified files
|
||||
3. Apply all rules from the fetched guidelines
|
||||
4. Output findings using the format specified in the guidelines
|
||||
|
||||
If no files specified, ask the user which files to review.
|
||||
@@ -0,0 +1 @@
|
||||
C:\Users\aaaaa\AppData\Roaming\uv\tools\graphifyy\Scripts\python.exe
|
||||
@@ -0,0 +1,108 @@
|
||||
# Graph Report - . (2026-06-02)
|
||||
|
||||
## Corpus Check
|
||||
- Corpus is ~1,452 words - fits in a single context window. You may not need a graph.
|
||||
|
||||
## Summary
|
||||
- 58 nodes · 57 edges · 12 communities (10 shown, 2 thin omitted)
|
||||
- Extraction: 82% EXTRACTED · 18% INFERRED · 0% AMBIGUOUS · INFERRED: 10 edges (avg confidence: 0.86)
|
||||
- Token cost: 3,200 input · 980 output
|
||||
|
||||
## Community Hubs (Navigation)
|
||||
- [[_COMMUNITY_Package Manifest Fields|Package Manifest Fields]]
|
||||
- [[_COMMUNITY_Background Visual Design|Background Visual Design]]
|
||||
- [[_COMMUNITY_Page & Component Architecture|Page & Component Architecture]]
|
||||
- [[_COMMUNITY_Project Config & Tooling|Project Config & Tooling]]
|
||||
- [[_COMMUNITY_Asset References|Asset References]]
|
||||
- [[_COMMUNITY_Astro Brand Assets|Astro Brand Assets]]
|
||||
- [[_COMMUNITY_Favicon & Dark Mode|Favicon & Dark Mode]]
|
||||
- [[_COMMUNITY_NPM Dev Scripts|NPM Dev Scripts]]
|
||||
- [[_COMMUNITY_TypeScript Config|TypeScript Config]]
|
||||
- [[_COMMUNITY_VSCode Extensions|VSCode Extensions]]
|
||||
- [[_COMMUNITY_VSCode Launch Config|VSCode Launch Config]]
|
||||
|
||||
## God Nodes (most connected - your core abstractions)
|
||||
1. `Astro Framework` - 6 edges
|
||||
2. `scripts` - 5 edges
|
||||
3. `../components/Welcome.astro` - 4 edges
|
||||
4. `Layout Component` - 4 edges
|
||||
5. `GenQBar README` - 4 edges
|
||||
6. `Favicon SVG Icon` - 4 edges
|
||||
7. `Welcome Component` - 3 edges
|
||||
8. `Index Page` - 3 edges
|
||||
9. `Dark Mode Color Adaptation` - 3 edges
|
||||
10. `Astro Logo SVG` - 3 edges
|
||||
|
||||
## Surprising Connections (you probably didn't know these)
|
||||
- `Astro Basics Starter Template` --conceptually_related_to--> `Astro Framework` [INFERRED]
|
||||
README.md → package.json
|
||||
- `GenQBar README` --references--> `Welcome Component` [EXTRACTED]
|
||||
README.md → src/components/Welcome.astro
|
||||
- `GenQBar README` --references--> `Layout Component` [EXTRACTED]
|
||||
README.md → src/layouts/Layout.astro
|
||||
- `GenQBar README` --references--> `Index Page` [EXTRACTED]
|
||||
README.md → src/pages/index.astro
|
||||
- `Astro defineConfig` --references--> `Astro Framework` [EXTRACTED]
|
||||
astro.config.mjs → package.json
|
||||
|
||||
## Hyperedges (group relationships)
|
||||
- **Astro Project Core Stack** — astro_config_defineConfig, package_json_genqbar, tsconfig_strict, concept_astro_framework [INFERRED 0.95]
|
||||
- **Page Slot Composition Pattern** — page_index, layout_layout, component_welcome [EXTRACTED 1.00]
|
||||
- **VSCode Dev Environment Configuration** — vscode_extensions, vscode_launch, concept_astro_framework [INFERRED 0.85]
|
||||
|
||||
## Communities (12 total, 2 thin omitted)
|
||||
|
||||
### Community 0 - "Package Manifest Fields"
|
||||
Cohesion: 0.25
|
||||
Nodes (7): dependencies, astro, engines, node, name, type, version
|
||||
|
||||
### Community 1 - "Background Visual Design"
|
||||
Cohesion: 0.47
|
||||
Nodes (6): Left Blob Shape (Blue-Purple Gradient), Right Blob Shape (Red-Magenta Gradient), Decorative Organic Blob Pattern, Linear Gradient A (Blue #3245FF to Purple #BC52EE), Linear Gradient B (Red #D83333 to Magenta #F041FF), Background SVG
|
||||
|
||||
### Community 2 - "Page & Component Architecture"
|
||||
Cohesion: 0.53
|
||||
Nodes (6): Welcome Component, Astro Basics Starter Template, Slot-Based Layout Composition, Layout Component, Index Page, GenQBar README
|
||||
|
||||
### Community 3 - "Project Config & Tooling"
|
||||
Cohesion: 0.40
|
||||
Nodes (6): Astro defineConfig, Astro Framework, GenQBar Package Manifest, TypeScript Strict Config, VSCode Extension Recommendations, VSCode Launch Config
|
||||
|
||||
### Community 4 - "Asset References"
|
||||
Cohesion: 0.33
|
||||
Nodes (4): ../assets/astro.svg, ../assets/background.svg, ../components/Welcome.astro, ../layouts/Layout.astro
|
||||
|
||||
### Community 5 - "Astro Brand Assets"
|
||||
Cohesion: 0.50
|
||||
Nodes (5): Astro Framework Brand, Astro Rocket/Flame Icon, Astro Logo SVG, Astro Wordmark Text, Linear Gradient Flame Effect (Red to Purple)
|
||||
|
||||
### Community 6 - "Favicon & Dark Mode"
|
||||
Cohesion: 0.60
|
||||
Nodes (5): Astro Logo Shape (Rocket/A Mark), Black Fill Color (#000), Dark Mode Color Adaptation, Favicon SVG Icon, White Fill Color (#FFF) for Dark Mode
|
||||
|
||||
### Community 7 - "NPM Dev Scripts"
|
||||
Cohesion: 0.40
|
||||
Nodes (5): scripts, astro, build, dev, preview
|
||||
|
||||
### Community 8 - "TypeScript Config"
|
||||
Cohesion: 0.50
|
||||
Nodes (3): exclude, extends, include
|
||||
|
||||
## Knowledge Gaps
|
||||
- **24 isolated node(s):** `name`, `type`, `version`, `node`, `dev` (+19 more)
|
||||
These have ≤1 connection - possible missing edges or undocumented components.
|
||||
- **2 thin communities (<3 nodes) omitted from report** — run `graphify query` to explore isolated nodes.
|
||||
|
||||
## Suggested Questions
|
||||
_Questions this graph is uniquely positioned to answer:_
|
||||
|
||||
- **Why does `Astro Framework` connect `Project Config & Tooling` to `Page & Component Architecture`?**
|
||||
_High betweenness centrality (0.024) - this node is a cross-community bridge._
|
||||
- **Why does `scripts` connect `NPM Dev Scripts` to `Package Manifest Fields`?**
|
||||
_High betweenness centrality (0.024) - this node is a cross-community bridge._
|
||||
- **Why does `Astro Basics Starter Template` connect `Page & Component Architecture` to `Project Config & Tooling`?**
|
||||
_High betweenness centrality (0.019) - this node is a cross-community bridge._
|
||||
- **Are the 2 inferred relationships involving `Layout Component` (e.g. with `Slot-Based Layout Composition` and `Welcome Component`) actually correct?**
|
||||
_`Layout Component` has 2 INFERRED edges - model-reasoned connections that need verification._
|
||||
- **What connects `name`, `type`, `version` to the rest of the system?**
|
||||
_26 weakly-connected nodes found - possible documentation gaps or missing edges._
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "c_users_aaaaa_documents_lakg_dev_genqbar_vscode_launch_json", "label": "launch.json", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\launch.json", "source_location": "L1"}, {"id": "vscode_launch_version", "label": "version", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\launch.json", "source_location": "L2"}, {"id": "vscode_launch_configurations", "label": "configurations", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\launch.json", "source_location": "L3"}], "edges": [{"source": "c_users_aaaaa_documents_lakg_dev_genqbar_vscode_launch_json", "target": "vscode_launch_version", "relation": "contains", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\launch.json", "source_location": "L2", "weight": 1.0}, {"source": "c_users_aaaaa_documents_lakg_dev_genqbar_vscode_launch_json", "target": "vscode_launch_configurations", "relation": "contains", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\launch.json", "source_location": "L3", "weight": 1.0}]}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "c_users_aaaaa_documents_lakg_dev_genqbar_src_pages_index_astro", "label": "index.astro", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\pages\\index.astro", "source_location": "L1"}, {"id": "c_users_aaaaa_documents_lakg_dev_genqbar_src_components_welcome_astro", "label": "../components/Welcome.astro", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\components\\Welcome.astro", "confidence": "EXTRACTED"}, {"id": "c_users_aaaaa_documents_lakg_dev_genqbar_src_layouts_layout_astro", "label": "../layouts/Layout.astro", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\layouts\\Layout.astro", "confidence": "EXTRACTED"}], "edges": [{"source": "c_users_aaaaa_documents_lakg_dev_genqbar_src_pages_index_astro", "target": "c_users_aaaaa_documents_lakg_dev_genqbar_src_layouts_layout_astro", "relation": "imports_from", "context": "import", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\pages\\index.astro", "source_location": "L3", "weight": 1.0}, {"source": "c_users_aaaaa_documents_lakg_dev_genqbar_src_pages_index_astro", "target": "c_users_aaaaa_documents_lakg_dev_genqbar_src_components_welcome_astro", "relation": "imports_from", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\pages\\index.astro"}, {"source": "c_users_aaaaa_documents_lakg_dev_genqbar_src_pages_index_astro", "target": "c_users_aaaaa_documents_lakg_dev_genqbar_src_layouts_layout_astro", "relation": "imports_from", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\pages\\index.astro"}], "raw_calls": []}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "c_users_aaaaa_documents_lakg_dev_genqbar_src_components_welcome_astro", "label": "Welcome.astro", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\components\\Welcome.astro", "source_location": "L1"}, {"id": "components_welcome_screen", "label": "screen()", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\components\\Welcome.astro", "source_location": "L180"}, {"id": "c_users_aaaaa_documents_lakg_dev_genqbar_src_assets_astro_svg", "label": "../assets/astro.svg", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\assets\\astro.svg", "confidence": "EXTRACTED"}, {"id": "c_users_aaaaa_documents_lakg_dev_genqbar_src_assets_background_svg", "label": "../assets/background.svg", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\assets\\background.svg", "confidence": "EXTRACTED"}], "edges": [{"source": "c_users_aaaaa_documents_lakg_dev_genqbar_src_components_welcome_astro", "target": "c_users_aaaaa_documents_lakg_dev_genqbar_src_assets_background_svg", "relation": "imports_from", "context": "import", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\components\\Welcome.astro", "source_location": "L3", "weight": 1.0}, {"source": "c_users_aaaaa_documents_lakg_dev_genqbar_src_components_welcome_astro", "target": "components_welcome_screen", "relation": "contains", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\components\\Welcome.astro", "source_location": "L180", "weight": 1.0}, {"source": "c_users_aaaaa_documents_lakg_dev_genqbar_src_components_welcome_astro", "target": "c_users_aaaaa_documents_lakg_dev_genqbar_src_assets_astro_svg", "relation": "imports_from", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\components\\Welcome.astro"}, {"source": "c_users_aaaaa_documents_lakg_dev_genqbar_src_components_welcome_astro", "target": "c_users_aaaaa_documents_lakg_dev_genqbar_src_assets_background_svg", "relation": "imports_from", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\components\\Welcome.astro"}], "raw_calls": []}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "c_users_aaaaa_documents_lakg_dev_genqbar_src_layouts_layout_astro", "label": "Layout.astro", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\layouts\\Layout.astro", "source_location": "L1"}], "edges": [], "raw_calls": []}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "c_users_aaaaa_documents_lakg_dev_genqbar_vscode_extensions_json", "label": "extensions.json", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\extensions.json", "source_location": "L1"}, {"id": "vscode_extensions_recommendations", "label": "recommendations", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\extensions.json", "source_location": "L2"}, {"id": "vscode_extensions_unwantedrecommendations", "label": "unwantedRecommendations", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\extensions.json", "source_location": "L3"}], "edges": [{"source": "c_users_aaaaa_documents_lakg_dev_genqbar_vscode_extensions_json", "target": "vscode_extensions_recommendations", "relation": "contains", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\extensions.json", "source_location": "L2", "weight": 1.0}, {"source": "vscode_extensions_recommendations", "target": "ref_astro_build_astro_vscode", "relation": "extends", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\extensions.json", "source_location": "L2", "weight": 1.0, "context": "import"}, {"source": "c_users_aaaaa_documents_lakg_dev_genqbar_vscode_extensions_json", "target": "vscode_extensions_unwantedrecommendations", "relation": "contains", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\extensions.json", "source_location": "L3", "weight": 1.0}]}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "c_users_aaaaa_documents_lakg_dev_genqbar_tsconfig_json", "label": "tsconfig.json", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json", "source_location": "L1"}, {"id": "genqbar_tsconfig_extends", "label": "extends", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json", "source_location": "L2"}, {"id": "genqbar_tsconfig_include", "label": "include", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json", "source_location": "L3"}, {"id": "genqbar_tsconfig_exclude", "label": "exclude", "file_type": "code", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json", "source_location": "L4"}], "edges": [{"source": "c_users_aaaaa_documents_lakg_dev_genqbar_tsconfig_json", "target": "genqbar_tsconfig_extends", "relation": "contains", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json", "source_location": "L2", "weight": 1.0}, {"source": "c_users_aaaaa_documents_lakg_dev_genqbar_tsconfig_json", "target": "ref_astro_tsconfigs_strict", "relation": "extends", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json", "source_location": "L2", "weight": 1.0, "context": "import"}, {"source": "c_users_aaaaa_documents_lakg_dev_genqbar_tsconfig_json", "target": "genqbar_tsconfig_include", "relation": "contains", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json", "source_location": "L3", "weight": 1.0}, {"source": "genqbar_tsconfig_include", "target": "ref_astro_types_d_ts", "relation": "extends", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json", "source_location": "L3", "weight": 1.0, "context": "import"}, {"source": "genqbar_tsconfig_include", "target": "ref", "relation": "extends", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json", "source_location": "L3", "weight": 1.0, "context": "import"}, {"source": "c_users_aaaaa_documents_lakg_dev_genqbar_tsconfig_json", "target": "genqbar_tsconfig_exclude", "relation": "contains", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json", "source_location": "L4", "weight": 1.0}, {"source": "genqbar_tsconfig_exclude", "target": "ref_dist", "relation": "extends", "confidence": "EXTRACTED", "source_file": "C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json", "source_location": "L4", "weight": 1.0, "context": "import"}]}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "astrosvg_astro_logo", "label": "Astro Logo SVG", "file_type": "image", "source_file": "src/assets/astro.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "astrosvg_astro_icon", "label": "Astro Rocket/Flame Icon", "file_type": "image", "source_file": "src/assets/astro.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "astrosvg_astro_wordmark", "label": "Astro Wordmark Text", "file_type": "image", "source_file": "src/assets/astro.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "astrosvg_gradient_flame", "label": "Linear Gradient Flame Effect (Red to Purple)", "file_type": "image", "source_file": "src/assets/astro.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "astrosvg_astro_brand", "label": "Astro Framework Brand", "file_type": "rationale", "source_file": "src/assets/astro.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}], "edges": [{"source": "astrosvg_astro_logo", "target": "astrosvg_astro_icon", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/assets/astro.svg", "source_location": null, "weight": 1.0}, {"source": "astrosvg_astro_logo", "target": "astrosvg_astro_wordmark", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/assets/astro.svg", "source_location": null, "weight": 1.0}, {"source": "astrosvg_astro_icon", "target": "astrosvg_gradient_flame", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/assets/astro.svg", "source_location": null, "weight": 1.0}, {"source": "astrosvg_astro_logo", "target": "astrosvg_astro_brand", "relation": "conceptually_related_to", "confidence": "INFERRED", "confidence_score": 0.95, "source_file": "src/assets/astro.svg", "source_location": null, "weight": 1.0}, {"source": "astrosvg_astro_wordmark", "target": "astrosvg_astro_brand", "relation": "conceptually_related_to", "confidence": "INFERRED", "confidence_score": 0.92, "source_file": "src/assets/astro.svg", "source_location": null, "weight": 1.0}], "hyperedges": []}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "package_json_genqbar", "label": "GenQBar Package Manifest", "file_type": "code", "source_file": "package.json", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "concept_astro_framework", "label": "Astro Framework", "file_type": "rationale", "source_file": "package.json", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null, "rationale": "Astro chosen as the sole framework dependency for this project, providing file-based routing, component-based architecture, and zero-JS-by-default rendering. This is the core architectural decision for GenQBar."}], "edges": [{"source": "package_json_genqbar", "target": "concept_astro_framework", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "package.json", "source_location": "dependencies.astro", "weight": 1.0}], "hyperedges": []}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "background_svg", "label": "Background SVG", "file_type": "image", "source_file": "src/assets/background.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "background_blob_left", "label": "Left Blob Shape (Blue-Purple Gradient)", "file_type": "image", "source_file": "src/assets/background.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "background_blob_right", "label": "Right Blob Shape (Red-Magenta Gradient)", "file_type": "image", "source_file": "src/assets/background.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "background_gradient_a", "label": "Linear Gradient A (Blue #3245FF to Purple #BC52EE)", "file_type": "image", "source_file": "src/assets/background.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "background_gradient_b", "label": "Linear Gradient B (Red #D83333 to Magenta #F041FF)", "file_type": "image", "source_file": "src/assets/background.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "background_decorative_pattern", "label": "Decorative Organic Blob Pattern", "file_type": "rationale", "source_file": "src/assets/background.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}], "edges": [{"source": "background_svg", "target": "background_blob_left", "relation": "implements", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/assets/background.svg", "source_location": null, "weight": 1.0}, {"source": "background_svg", "target": "background_blob_right", "relation": "implements", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/assets/background.svg", "source_location": null, "weight": 1.0}, {"source": "background_blob_left", "target": "background_gradient_a", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/assets/background.svg", "source_location": null, "weight": 1.0}, {"source": "background_blob_right", "target": "background_gradient_b", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/assets/background.svg", "source_location": null, "weight": 1.0}, {"source": "background_svg", "target": "background_decorative_pattern", "relation": "implements", "confidence": "INFERRED", "confidence_score": 0.9, "source_file": "src/assets/background.svg", "source_location": null, "weight": 1.0}, {"source": "background_gradient_a", "target": "background_gradient_b", "relation": "conceptually_related_to", "confidence": "INFERRED", "confidence_score": 0.8, "source_file": "src/assets/background.svg", "source_location": null, "weight": 0.8}, {"source": "background_blob_left", "target": "background_blob_right", "relation": "conceptually_related_to", "confidence": "INFERRED", "confidence_score": 0.85, "source_file": "src/assets/background.svg", "source_location": null, "weight": 0.85}], "hyperedges": []}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "vscode_launch", "label": "VSCode Launch Config", "file_type": "code", "source_file": ".vscode/launch.json", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}], "edges": [{"source": "vscode_launch", "target": "concept_astro_framework", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": ".vscode/launch.json", "source_location": "configurations[0].command", "weight": 1.0}, {"source": "vscode_launch", "target": "vscode_extensions", "relation": "semantically_similar_to", "confidence": "INFERRED", "confidence_score": 0.75, "source_file": ".vscode/launch.json", "source_location": null, "weight": 0.75}], "hyperedges": [{"id": "vscode_dev_environment", "label": "VSCode Dev Environment Configuration", "nodes": ["vscode_extensions", "vscode_launch", "concept_astro_framework"], "relation": "implement", "confidence": "INFERRED", "confidence_score": 0.85, "source_file": ".vscode/launch.json"}]}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "page_index", "label": "Index Page", "file_type": "code", "source_file": "src/pages/index.astro", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}], "edges": [{"source": "page_index", "target": "component_welcome", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/pages/index.astro", "source_location": "line 2", "weight": 1.0}, {"source": "page_index", "target": "layout_layout", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/pages/index.astro", "source_location": "line 3", "weight": 1.0}, {"source": "page_index", "target": "layout_layout", "relation": "calls", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/pages/index.astro", "source_location": "line 9", "weight": 1.0}, {"source": "page_index", "target": "component_welcome", "relation": "calls", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/pages/index.astro", "source_location": "line 10", "weight": 1.0}], "hyperedges": [{"id": "page_composition_pattern", "label": "Page Slot Composition Pattern", "nodes": ["page_index", "layout_layout", "component_welcome"], "relation": "participate_in", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/pages/index.astro"}]}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "component_welcome", "label": "Welcome Component", "file_type": "code", "source_file": "src/components/Welcome.astro", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}], "edges": [{"source": "component_welcome", "target": "layout_layout", "relation": "semantically_similar_to", "confidence": "INFERRED", "confidence_score": 0.65, "source_file": "src/components/Welcome.astro", "source_location": null, "weight": 0.65}], "hyperedges": []}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "favicon_svg", "label": "Favicon SVG Icon", "file_type": "image", "source_file": "public/favicon.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "favicon_astro_logo_shape", "label": "Astro Logo Shape (Rocket/A Mark)", "file_type": "image", "source_file": "public/favicon.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "favicon_dark_mode_support", "label": "Dark Mode Color Adaptation", "file_type": "rationale", "source_file": "public/favicon.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "favicon_black_fill", "label": "Black Fill Color (#000)", "file_type": "rationale", "source_file": "public/favicon.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "favicon_white_fill", "label": "White Fill Color (#FFF) for Dark Mode", "file_type": "rationale", "source_file": "public/favicon.svg", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}], "edges": [{"source": "favicon_svg", "target": "favicon_astro_logo_shape", "relation": "implements", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "public/favicon.svg", "source_location": "line 2", "weight": 1.0}, {"source": "favicon_svg", "target": "favicon_dark_mode_support", "relation": "implements", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "public/favicon.svg", "source_location": "lines 4-7", "weight": 1.0}, {"source": "favicon_dark_mode_support", "target": "favicon_black_fill", "relation": "rationale_for", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "public/favicon.svg", "source_location": "line 4", "weight": 1.0}, {"source": "favicon_dark_mode_support", "target": "favicon_white_fill", "relation": "rationale_for", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "public/favicon.svg", "source_location": "lines 5-7", "weight": 1.0}, {"source": "favicon_svg", "target": "favicon_black_fill", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "public/favicon.svg", "source_location": "line 4", "weight": 1.0}, {"source": "favicon_svg", "target": "favicon_white_fill", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "public/favicon.svg", "source_location": "line 6", "weight": 1.0}, {"source": "favicon_astro_logo_shape", "target": "favicon_svg", "relation": "conceptually_related_to", "confidence": "INFERRED", "confidence_score": 0.9, "source_file": "public/favicon.svg", "source_location": null, "weight": 0.9}], "hyperedges": []}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "readme_genqbar", "label": "GenQBar README", "file_type": "document", "source_file": "README.md", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "concept_astro_basics_template", "label": "Astro Basics Starter Template", "file_type": "rationale", "source_file": "README.md", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null, "rationale": "Project bootstrapped from the official Astro 'basics' template, establishing the initial folder structure: public, src/assets, src/components, src/layouts, src/pages."}], "edges": [{"source": "readme_genqbar", "target": "concept_astro_basics_template", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "README.md", "source_location": "line 1", "weight": 1.0}, {"source": "readme_genqbar", "target": "page_index", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "README.md", "source_location": "line 24", "weight": 1.0}, {"source": "readme_genqbar", "target": "component_welcome", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "README.md", "source_location": "line 22", "weight": 1.0}, {"source": "readme_genqbar", "target": "layout_layout", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "README.md", "source_location": "line 23", "weight": 1.0}, {"source": "concept_astro_basics_template", "target": "concept_astro_framework", "relation": "conceptually_related_to", "confidence": "INFERRED", "confidence_score": 0.95, "source_file": "README.md", "source_location": null, "weight": 0.95}], "hyperedges": []}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "layout_layout", "label": "Layout Component", "file_type": "code", "source_file": "src/layouts/Layout.astro", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}, {"id": "concept_slot_composition", "label": "Slot-Based Layout Composition", "file_type": "rationale", "source_file": "src/layouts/Layout.astro", "source_location": "line 12", "source_url": null, "captured_at": null, "author": null, "contributor": null, "rationale": "Layout.astro uses Astro's <slot/> mechanism to inject page-specific content into the shared HTML shell, enabling reusable layout composition without prop drilling."}], "edges": [{"source": "concept_slot_composition", "target": "layout_layout", "relation": "rationale_for", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "src/layouts/Layout.astro", "source_location": "line 12", "weight": 1.0}, {"source": "layout_layout", "target": "concept_slot_composition", "relation": "implements", "confidence": "INFERRED", "confidence_score": 0.95, "source_file": "src/layouts/Layout.astro", "source_location": "line 12", "weight": 1.0}], "hyperedges": []}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "astro_config_defineConfig", "label": "Astro defineConfig", "file_type": "code", "source_file": "astro.config.mjs", "source_location": "line 4", "source_url": null, "captured_at": null, "author": null, "contributor": null}], "edges": [{"source": "astro_config_defineConfig", "target": "concept_astro_framework", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "astro.config.mjs", "source_location": "line 2", "weight": 1.0}], "hyperedges": [{"id": "astro_project_core_stack", "label": "Astro Project Core Stack", "nodes": ["astro_config_defineConfig", "package_json_genqbar", "tsconfig_strict", "concept_astro_framework"], "relation": "implement", "confidence": "INFERRED", "confidence_score": 0.95, "source_file": "astro.config.mjs"}]}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "vscode_extensions", "label": "VSCode Extension Recommendations", "file_type": "code", "source_file": ".vscode/extensions.json", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}], "edges": [{"source": "vscode_extensions", "target": "concept_astro_framework", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": ".vscode/extensions.json", "source_location": "recommendations[0]", "weight": 1.0}], "hyperedges": []}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"nodes": [{"id": "tsconfig_strict", "label": "TypeScript Strict Config", "file_type": "code", "source_file": "tsconfig.json", "source_location": null, "source_url": null, "captured_at": null, "author": null, "contributor": null}], "edges": [{"source": "tsconfig_strict", "target": "concept_astro_framework", "relation": "references", "confidence": "EXTRACTED", "confidence_score": 1.0, "source_file": "tsconfig.json", "source_location": "extends", "weight": 1.0}], "hyperedges": []}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\package.json":{"size":281,"mtime_ns":1780432462319714400,"hash":"57fa154366ffddb831050efe8f13810decd5bb88b28cc5cbe5b4fe2b6e67819c"},"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json":{"size":109,"mtime_ns":1780413403000000000,"hash":"fdb4b8bd688e0c3e493d5ca0896553a44539fb500dea9ec5fe26bcc857ec2213"},"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\extensions.json":{"size":87,"mtime_ns":1780413403000000000,"hash":"f92a4d5dcf3216e3213800bd23720e7a5d2c1b57b4e9572efa7595ceafb7f568"},"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\launch.json":{"size":207,"mtime_ns":1780413403000000000,"hash":"7806d56c85626111becf92e28e1bf527486de533405fec6f2cec153aafe569b8"},"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\components\\Welcome.astro":{"size":4937,"mtime_ns":1780413403000000000,"hash":"b9f84eea92acd81e71e9da3e04319c55df9a58ecebf21bff6a9a4c261745c34b"},"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\layouts\\Layout.astro":{"size":438,"mtime_ns":1780413403000000000,"hash":"dc3705c9862877bf251973dc37fec23681b132685c2258e6ce0875fcc645fa60"},"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\pages\\index.astro":{"size":387,"mtime_ns":1780413403000000000,"hash":"8c6885c313af22b7b3a4ce197dd64b05a674b4509df44d9cbe0bb5ed38fe523e"},"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\astro.config.mjs":{"size":122,"mtime_ns":1780413403000000000,"hash":"e5dac689b173a2a3d25402bd6212b42bb646e69e514e6582c143393c395e1165"},"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\README.md":{"size":1657,"mtime_ns":1780432462311457800,"hash":"d621c6dcdca7f9ad88b80d4136d5e036cf140888aa0f476e6d2c1db97d2e4289"},"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\public\\favicon.svg":{"size":749,"mtime_ns":1780413403000000000,"hash":"c30971191b501b3b9dab6a9d9d6560e71ce2b94801920b5ff763e564d8352f0d"},"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\assets\\astro.svg":{"size":2914,"mtime_ns":1780413403000000000,"hash":"231c3e21f825601fdfe254ab0f1f6e183b59f31f2dfeae38e37c367fca4246c2"},"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\assets\\background.svg":{"size":1454,"mtime_ns":1780413403000000000,"hash":"6b41d8f6bccce531083921f1b18c028d6e9d2c031c6998310828925179cf6cbf"}}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"runs": [
|
||||
{
|
||||
"date": "2026-06-02T20:53:50.721278+00:00",
|
||||
"input_tokens": 3200,
|
||||
"output_tokens": 980,
|
||||
"files": 12
|
||||
}
|
||||
],
|
||||
"total_input_tokens": 3200,
|
||||
"total_output_tokens": 980
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,62 @@
|
||||
{
|
||||
"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\astro.config.mjs": {
|
||||
"mtime": 1780413403.0,
|
||||
"ast_hash": "7fce1873757c6836fb4b7880f219b5ca",
|
||||
"semantic_hash": "7fce1873757c6836fb4b7880f219b5ca"
|
||||
},
|
||||
"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\package.json": {
|
||||
"mtime": 1780432462.3197143,
|
||||
"ast_hash": "3e83e2871f1ca4cdf9b995c7e9681f39",
|
||||
"semantic_hash": "3e83e2871f1ca4cdf9b995c7e9681f39"
|
||||
},
|
||||
"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\tsconfig.json": {
|
||||
"mtime": 1780413403.0,
|
||||
"ast_hash": "1d3613ac08bdda17e2b82251613dbc21",
|
||||
"semantic_hash": "1d3613ac08bdda17e2b82251613dbc21"
|
||||
},
|
||||
"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\extensions.json": {
|
||||
"mtime": 1780413403.0,
|
||||
"ast_hash": "3adedb22d082dbd1ebb00b75d21403aa",
|
||||
"semantic_hash": "3adedb22d082dbd1ebb00b75d21403aa"
|
||||
},
|
||||
"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\.vscode\\launch.json": {
|
||||
"mtime": 1780413403.0,
|
||||
"ast_hash": "60493763dcbc2d109e57da86d997602a",
|
||||
"semantic_hash": "60493763dcbc2d109e57da86d997602a"
|
||||
},
|
||||
"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\components\\Welcome.astro": {
|
||||
"mtime": 1780413403.0,
|
||||
"ast_hash": "7274ef144fc0554f96f977626b0b96d4",
|
||||
"semantic_hash": "7274ef144fc0554f96f977626b0b96d4"
|
||||
},
|
||||
"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\layouts\\Layout.astro": {
|
||||
"mtime": 1780413403.0,
|
||||
"ast_hash": "544bdd418e59cd25c463e2b7a5056343",
|
||||
"semantic_hash": "544bdd418e59cd25c463e2b7a5056343"
|
||||
},
|
||||
"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\pages\\index.astro": {
|
||||
"mtime": 1780413403.0,
|
||||
"ast_hash": "ca7d752d7ba470cbc1c0fb25b2cb1396",
|
||||
"semantic_hash": "ca7d752d7ba470cbc1c0fb25b2cb1396"
|
||||
},
|
||||
"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\README.md": {
|
||||
"mtime": 1780432462.3114579,
|
||||
"ast_hash": "de76967202948d4f70d11f4b3d9e7674",
|
||||
"semantic_hash": "de76967202948d4f70d11f4b3d9e7674"
|
||||
},
|
||||
"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\public\\favicon.svg": {
|
||||
"mtime": 1780413403.0,
|
||||
"ast_hash": "8c13f40658976ea1dfb8ba37a8be0e8d",
|
||||
"semantic_hash": "8c13f40658976ea1dfb8ba37a8be0e8d"
|
||||
},
|
||||
"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\assets\\astro.svg": {
|
||||
"mtime": 1780413403.0,
|
||||
"ast_hash": "d26c3520f1f016bad745392df8b5fae5",
|
||||
"semantic_hash": "d26c3520f1f016bad745392df8b5fae5"
|
||||
},
|
||||
"C:\\Users\\aaaaa\\Documents\\LakG-Dev\\GenQBar\\src\\assets\\background.svg": {
|
||||
"mtime": 1780413403.0,
|
||||
"ast_hash": "c2eaad48507ad1ea41f586bd5c21858a",
|
||||
"semantic_hash": "c2eaad48507ad1ea41f586bd5c21858a"
|
||||
}
|
||||
}
|
||||
Generated
+1288
-1
File diff suppressed because it is too large
Load Diff
+10
-1
@@ -12,6 +12,15 @@
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^6.4.3"
|
||||
"astro": "^6.4.3",
|
||||
"jsbarcode": "^3.12.3",
|
||||
"qrcode": "^1.5.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/check": "^0.9.9",
|
||||
"@playwright/test": "^1.60.0",
|
||||
"@types/jsbarcode": "^3.11.4",
|
||||
"@types/qrcode": "^1.5.6",
|
||||
"typescript": "^6.0.3"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": 1,
|
||||
"skills": {
|
||||
"web-design-guidelines": {
|
||||
"source": "vercel-labs/agent-skills",
|
||||
"sourceType": "github",
|
||||
"skillPath": "skills/web-design-guidelines/SKILL.md",
|
||||
"computedHash": "f3bc47f890f42a44db1007ab390709ec368e4b8c089baee6b0007182236ac474"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,210 +0,0 @@
|
||||
---
|
||||
import astroLogo from '../assets/astro.svg';
|
||||
import background from '../assets/background.svg';
|
||||
---
|
||||
|
||||
<div id="container">
|
||||
<img id="background" src={background.src} alt="" fetchpriority="high" />
|
||||
<main>
|
||||
<section id="hero">
|
||||
<a href="https://astro.build"
|
||||
><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a
|
||||
>
|
||||
<h1>
|
||||
To get started, open the <code><pre>src/pages</pre></code> directory in your project.
|
||||
</h1>
|
||||
<section id="links">
|
||||
<a class="button" href="https://docs.astro.build">Read our docs</a>
|
||||
<a href="https://astro.build/chat"
|
||||
>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<a href="https://astro.build/blog/astro-6-beta/" id="news" class="box">
|
||||
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
|
||||
fill="#111827"></path></svg
|
||||
>
|
||||
<h2>What's New in Astro 6.0?</h2>
|
||||
<p>
|
||||
Redesigned dev server, fonts, live collections, built-in CSP support, and more! Click to
|
||||
explore Astro 6.0's new features.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
filter: blur(100px);
|
||||
}
|
||||
|
||||
#container {
|
||||
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#hero {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
#links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#links a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
color: #111827;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
#links a:hover {
|
||||
color: rgb(78, 80, 86);
|
||||
}
|
||||
|
||||
#links a svg {
|
||||
height: 1em;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
#links a.button {
|
||||
color: white;
|
||||
background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
|
||||
inset 0 -2px 0 rgba(0, 0, 0, 0.24);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#links a.button:hover {
|
||||
color: rgb(230, 230, 230);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family:
|
||||
ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
|
||||
monospace;
|
||||
font-weight: normal;
|
||||
background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 1em;
|
||||
font-weight: normal;
|
||||
color: #111827;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #4b5563;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.006em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
background:
|
||||
linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
|
||||
linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 16px;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
#news {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
max-width: 300px;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
backdrop-filter: blur(50px);
|
||||
}
|
||||
|
||||
#news:hover {
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
@media screen and (max-height: 368px) {
|
||||
#news {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#hero {
|
||||
display: block;
|
||||
padding-top: 10%;
|
||||
}
|
||||
|
||||
#links {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#links a.button {
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
#news {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
bottom: 2.5rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+20
-11
@@ -1,23 +1,32 @@
|
||||
---
|
||||
interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
}
|
||||
const {
|
||||
title = 'GenQBar — QR & Barcode Generator',
|
||||
description = 'Free client-side QR code and barcode generator. No server, no tracking.',
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content={description} />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro Basics</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
+273
-5
@@ -1,11 +1,279 @@
|
||||
---
|
||||
import Welcome from '../components/Welcome.astro';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
|
||||
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
|
||||
import '../styles/app.css';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Welcome />
|
||||
<nav class="nav">
|
||||
<span class="nav-logo">GenQBar</span>
|
||||
<a href="https://buglabs.dev" class="nav-back">← BugLabs.dev</a>
|
||||
</nav>
|
||||
|
||||
<main class="container">
|
||||
<h1 class="page-title">QR & Barcode Generator</h1>
|
||||
|
||||
<!-- Tab switcher -->
|
||||
<div class="tab-switcher" role="tablist">
|
||||
<button class="tab active" data-tab="qr" role="tab" aria-selected="true">
|
||||
QR Code
|
||||
</button>
|
||||
<button class="tab" data-tab="barcode" role="tab" aria-selected="false">
|
||||
Barcode
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ── QR Code Panel ── -->
|
||||
<section class="panel active" id="panel-qr" role="tabpanel">
|
||||
<div class="panel-inner">
|
||||
<div class="form-group">
|
||||
<label for="qr-text">Text or URL</label>
|
||||
<input
|
||||
type="text"
|
||||
id="qr-text"
|
||||
placeholder="https://buglabs.dev"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="qr-ecl">Error Correction</label>
|
||||
<div class="select-wrapper">
|
||||
<select id="qr-ecl">
|
||||
<option value="L">L — Low (7%)</option>
|
||||
<option value="M" selected>M — Medium (15%)</option>
|
||||
<option value="Q">Q — Quartile (25%)</option>
|
||||
<option value="H">H — High (30%)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="qr-size">Size</label>
|
||||
<div class="select-wrapper">
|
||||
<select id="qr-size">
|
||||
<option value="128">128 px</option>
|
||||
<option value="256" selected>256 px</option>
|
||||
<option value="512">512 px</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview" id="qr-preview">
|
||||
<span class="preview-placeholder">Enter text above to generate a QR code</span>
|
||||
</div>
|
||||
|
||||
<button class="btn-download" id="qr-download" disabled>Download SVG</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Barcode Panel ── -->
|
||||
<section class="panel" id="panel-barcode" role="tabpanel">
|
||||
<div class="panel-inner">
|
||||
<div class="form-group">
|
||||
<label for="bc-text">Value</label>
|
||||
<input
|
||||
type="text"
|
||||
id="bc-text"
|
||||
placeholder="123456789012"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<span class="error-msg" id="bc-error"></span>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="bc-format">Format</label>
|
||||
<div class="select-wrapper">
|
||||
<select id="bc-format">
|
||||
<option value="CODE128">CODE128 (auto)</option>
|
||||
<option value="CODE39">CODE39</option>
|
||||
<option value="EAN13">EAN-13</option>
|
||||
<option value="EAN8">EAN-8</option>
|
||||
<option value="UPC">UPC-A</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Show Value</label>
|
||||
<div class="toggle-row">
|
||||
<label class="toggle" aria-label="Toggle display value">
|
||||
<input type="checkbox" id="bc-display-value" checked />
|
||||
<span class="toggle-track">
|
||||
<span class="toggle-knob"></span>
|
||||
</span>
|
||||
</label>
|
||||
<span class="toggle-label-text" id="bc-display-label">On</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview" id="bc-preview">
|
||||
<span class="preview-placeholder">Enter a value above to generate a barcode</span>
|
||||
</div>
|
||||
|
||||
<button class="btn-download" id="bc-download" disabled>Download SVG</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
import QRCode from 'qrcode';
|
||||
import JsBarcode from 'jsbarcode';
|
||||
|
||||
// ── Element references ──────────────────────────────────────────────────
|
||||
|
||||
const qrText = document.getElementById('qr-text') as HTMLInputElement;
|
||||
const qrEcl = document.getElementById('qr-ecl') as HTMLSelectElement;
|
||||
const qrSize = document.getElementById('qr-size') as HTMLSelectElement;
|
||||
const qrPreview = document.getElementById('qr-preview') as HTMLElement;
|
||||
const qrDownload = document.getElementById('qr-download') as HTMLButtonElement;
|
||||
|
||||
const bcText = document.getElementById('bc-text') as HTMLInputElement;
|
||||
const bcFormat = document.getElementById('bc-format') as HTMLSelectElement;
|
||||
const bcDisplayValue = document.getElementById('bc-display-value') as HTMLInputElement;
|
||||
const bcDisplayLabel = document.getElementById('bc-display-label') as HTMLElement;
|
||||
const bcPreview = document.getElementById('bc-preview') as HTMLElement;
|
||||
const bcDownload = document.getElementById('bc-download') as HTMLButtonElement;
|
||||
const bcError = document.getElementById('bc-error') as HTMLElement;
|
||||
|
||||
// ── QR Code generation ──────────────────────────────────────────────────
|
||||
|
||||
async function generateQR(): Promise<void> {
|
||||
const text = qrText.value.trim();
|
||||
if (!text) {
|
||||
qrPreview.innerHTML =
|
||||
'<span class="preview-placeholder">Enter text above to generate a QR code</span>';
|
||||
qrDownload.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const size = parseInt(qrSize.value, 10);
|
||||
const ecl = qrEcl.value as 'L' | 'M' | 'Q' | 'H';
|
||||
|
||||
try {
|
||||
const svgString: string = await QRCode.toString(text, {
|
||||
type: 'svg',
|
||||
errorCorrectionLevel: ecl,
|
||||
width: size,
|
||||
margin: 2,
|
||||
});
|
||||
qrPreview.innerHTML = svgString;
|
||||
qrDownload.disabled = false;
|
||||
} catch {
|
||||
qrPreview.innerHTML =
|
||||
'<span class="preview-placeholder">Could not generate QR code for this input.</span>';
|
||||
qrDownload.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Barcode generation ──────────────────────────────────────────────────
|
||||
|
||||
function generateBarcode(): void {
|
||||
const text = bcText.value.trim();
|
||||
bcError.textContent = '';
|
||||
bcError.classList.remove('visible');
|
||||
|
||||
if (!text) {
|
||||
bcPreview.innerHTML =
|
||||
'<span class="preview-placeholder">Enter a value above to generate a barcode</span>';
|
||||
bcDownload.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
|
||||
try {
|
||||
JsBarcode(svgEl, text, {
|
||||
format: bcFormat.value,
|
||||
displayValue: bcDisplayValue.checked,
|
||||
lineColor: '#000000',
|
||||
background: '#ffffff',
|
||||
width: 2,
|
||||
height: 80,
|
||||
fontSize: 14,
|
||||
font: 'Space Grotesk, system-ui, sans-serif',
|
||||
textAlign: 'center',
|
||||
textPosition: 'bottom',
|
||||
textMargin: 4,
|
||||
margin: 10,
|
||||
});
|
||||
bcPreview.innerHTML = '';
|
||||
bcPreview.appendChild(svgEl);
|
||||
bcDownload.disabled = false;
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : 'Invalid value for this format';
|
||||
bcError.textContent = msg;
|
||||
bcError.classList.add('visible');
|
||||
bcPreview.innerHTML =
|
||||
'<span class="preview-placeholder">Fix the error above and try again.</span>';
|
||||
bcDownload.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Live preview with debounce ──────────────────────────────────────────
|
||||
|
||||
let qrDebounce: ReturnType<typeof setTimeout>;
|
||||
let bcDebounce: ReturnType<typeof setTimeout>;
|
||||
|
||||
qrText.addEventListener('input', () => {
|
||||
clearTimeout(qrDebounce);
|
||||
qrDebounce = setTimeout(generateQR, 300);
|
||||
});
|
||||
qrEcl.addEventListener('change', generateQR);
|
||||
qrSize.addEventListener('change', generateQR);
|
||||
|
||||
bcText.addEventListener('input', () => {
|
||||
clearTimeout(bcDebounce);
|
||||
bcDebounce = setTimeout(generateBarcode, 300);
|
||||
});
|
||||
bcFormat.addEventListener('change', generateBarcode);
|
||||
bcDisplayValue.addEventListener('change', () => {
|
||||
bcDisplayLabel.textContent = bcDisplayValue.checked ? 'On' : 'Off';
|
||||
generateBarcode();
|
||||
});
|
||||
|
||||
// ── Tab switching ───────────────────────────────────────────────────────
|
||||
|
||||
const tabs = document.querySelectorAll<HTMLButtonElement>('.tab');
|
||||
const panels = document.querySelectorAll<HTMLElement>('.panel');
|
||||
|
||||
tabs.forEach((tab) => {
|
||||
tab.addEventListener('click', () => {
|
||||
tabs.forEach((t) => {
|
||||
t.classList.remove('active');
|
||||
t.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
panels.forEach((p) => p.classList.remove('active'));
|
||||
|
||||
tab.classList.add('active');
|
||||
tab.setAttribute('aria-selected', 'true');
|
||||
|
||||
const targetId = `panel-${tab.dataset.tab}`;
|
||||
document.getElementById(targetId)?.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// ── SVG download ────────────────────────────────────────────────────────
|
||||
|
||||
function downloadSVG(container: HTMLElement, filename: string): void {
|
||||
const svg = container.querySelector('svg');
|
||||
if (!svg) return;
|
||||
|
||||
const serializer = new XMLSerializer();
|
||||
const svgStr = serializer.serializeToString(svg);
|
||||
const blob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
qrDownload.addEventListener('click', () => downloadSVG(qrPreview, 'qrcode.svg'));
|
||||
bcDownload.addEventListener('click', () => downloadSVG(bcPreview, 'barcode.svg'));
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,346 @@
|
||||
:root {
|
||||
--font-body: 'Space Grotesk', system-ui, sans-serif;
|
||||
--font-mono: 'Space Mono', 'Courier New', monospace;
|
||||
--color-bg: #ffffff;
|
||||
--color-text: #000000;
|
||||
--accent-red: #ff0000;
|
||||
--accent-green: #00522b;
|
||||
--border: 3px solid #000000;
|
||||
--shadow: 5px 5px #000000;
|
||||
--shadow-hover: 3px 3px #000000;
|
||||
--gap: 1.5rem;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── Nav ── */
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
display: inline-block;
|
||||
padding: 0.4rem 0.9rem;
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow-hover);
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
transition: box-shadow 0.1s, transform 0.1s;
|
||||
}
|
||||
|
||||
.nav-back:hover {
|
||||
box-shadow: none;
|
||||
transform: translate(3px, 3px);
|
||||
}
|
||||
|
||||
/* ── Main container ── */
|
||||
.container {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 2rem 4rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: clamp(1.6rem, 4vw, 2.4rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* ── Tab switcher ── */
|
||||
.tab-switcher {
|
||||
display: inline-flex;
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.7rem 1.6rem;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
|
||||
.tab + .tab {
|
||||
border-left: var(--border);
|
||||
}
|
||||
|
||||
.tab.active,
|
||||
.tab[aria-selected='true'] {
|
||||
background: var(--color-text);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
/* ── Panel ── */
|
||||
.panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panel-inner {
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* ── Form elements ── */
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.form-row .form-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
select {
|
||||
width: 100%;
|
||||
border: var(--border);
|
||||
padding: 0.65rem 0.9rem;
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
box-shadow: var(--shadow);
|
||||
outline: none;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
transition: box-shadow 0.1s, transform 0.1s;
|
||||
}
|
||||
|
||||
input[type='text']:focus,
|
||||
select:focus {
|
||||
box-shadow: var(--shadow-hover);
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
/* custom select arrow */
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select-wrapper::after {
|
||||
content: '▾';
|
||||
position: absolute;
|
||||
right: 0.9rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.select-wrapper select {
|
||||
padding-right: 2.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── Toggle ── */
|
||||
.toggle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 48px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.toggle-track {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: var(--border);
|
||||
background: var(--color-bg);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.toggle-knob {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--color-text);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
.toggle input:checked + .toggle-track {
|
||||
background: var(--color-text);
|
||||
}
|
||||
|
||||
.toggle input:checked + .toggle-track .toggle-knob {
|
||||
transform: translateX(22px);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.toggle-label-text {
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
|
||||
/* ── Preview ── */
|
||||
.preview {
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
min-height: 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
background: var(--color-bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.preview-placeholder {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* ── Error ── */
|
||||
.error-msg {
|
||||
display: none;
|
||||
color: var(--accent-red);
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
margin-top: 0.4rem;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.error-msg.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Buttons ── */
|
||||
.btn-download {
|
||||
display: inline-block;
|
||||
background: var(--accent-red);
|
||||
color: #ffffff;
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 0.75rem 1.8rem;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.1s, transform 0.1s;
|
||||
}
|
||||
|
||||
.btn-download:hover:not(:disabled) {
|
||||
box-shadow: var(--shadow-hover);
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
.btn-download:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 600px) {
|
||||
.nav {
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 1.5rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.panel-inner {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.6rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user