diff --git a/submissions/examples/pulse-active-tech-tooltips/README.md b/submissions/examples/pulse-active-tech-tooltips/README.md new file mode 100644 index 0000000000..6949173d68 --- /dev/null +++ b/submissions/examples/pulse-active-tech-tooltips/README.md @@ -0,0 +1,18 @@ +# Pure CSS Pulse-Active Minimalist Tech Tooltip + +A declarative, highly efficient, zero-JavaScript tooltip system designed specifically for telemetry arrays, technical operation readouts, and minimalist monitoring dashboards. + +## Features +- **Zero Scripting Threads:** Operates continuously using native CSS `@keyframes` properties paired safely with pseudo-interaction selectors. +- **Dual-Layer Active Pulse:** Combines a fluid component-level scale transformation loop with an external radiating lightwave expansion trace. +- **Cyber Minimalist Theme:** Styled around clean dark parameters, sharp structural borders, and standard monospace telemetry configurations. +- **Fully Accessible UI:** Integrates semantic labeling parameters and distinct target rings for fast accessibility tracking. + +## Configuration Tokens + +| Variable Flag Name | Utility Assignment Focus | Default Initialized Baseline | +| :--- | :--- | :--- | +| `--tech-accent` | Core focal glow and element border metrics | `#38bdf8` | +| `--tooltip-pulse-scale` | Maximal expansion factor during animation pulse | `1.05` | +| `--tooltip-pulse-duration` | Complete sequence loop timeline for the wave effect | `1.8s` | +| `--tooltip-fade-duration` | Entry phase transparency change duration | `0.25s` | \ No newline at end of file diff --git a/submissions/examples/pulse-active-tech-tooltips/demo.html b/submissions/examples/pulse-active-tech-tooltips/demo.html new file mode 100644 index 0000000000..25dd09c7e8 --- /dev/null +++ b/submissions/examples/pulse-active-tech-tooltips/demo.html @@ -0,0 +1,46 @@ + + + + + + CSS Pulse-Active Tooltip - Minimalist Tech Layout + + + + +
+
+
CORE_SYS: ONLINE
+

System Diagnostics

+

Hover or focus on the telemetry nodes to initiate the real-time CSS pulse-active tracking tooltips.

+
+ +
+
+
[LN-883]
+
CPU Memory Matrix
+ +
+ +
+
[LN-884]
+
Network Gateway Packets
+ +
+
+
+ + + \ No newline at end of file diff --git a/submissions/examples/pulse-active-tech-tooltips/style.css b/submissions/examples/pulse-active-tech-tooltips/style.css new file mode 100644 index 0000000000..f1952f4aae --- /dev/null +++ b/submissions/examples/pulse-active-tech-tooltips/style.css @@ -0,0 +1,232 @@ +/* ========================================================================== + CSS Custom Properties (Configurable Parameters) + ========================================================================== */ +:root { + /* Minimalist Tech Palette */ + --tech-bg: #030712; + --tech-surface: #0b1329; + --tech-border: #1e293b; + --tech-accent: #38bdf8; /* Cyber Sky Blue */ + --tech-text-main: #f8fafc; + --tech-text-dim: #64748b; + + /* Tooltip Specific Tokens */ + --tooltip-bg: #1e293b; + --tooltip-text: #38bdf8; + --tooltip-radius: 4px; + + /* Animation Configuration Metrics */ + --tooltip-fade-duration: 0.25s; + --tooltip-pulse-duration: 1.8s; + --tooltip-pulse-scale: 1.05; +} + +/* ========================================================================== + Tooltip Layout & Reveal Transitions + ========================================================================== */ +.tooltip-container { + position: relative; + outline: none; +} + +.tooltip { + position: absolute; + bottom: 140%; + left: 50%; + transform: translateX(-50%); + + background-color: var(--tooltip-bg); + color: var(--tooltip-text); + border: 1px solid var(--tech-accent); + padding: 8px 12px; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + font-size: 0.72rem; + font-weight: 600; + border-radius: var(--tooltip-radius); + white-space: nowrap; + box-shadow: 0 0 15px rgba(56, 189, 248, 0.15); + z-index: 100; + + /* Initial hidden matrix states */ + opacity: 0; + visibility: hidden; + pointer-events: none; + + /* Synchronized basic entry fade */ + transition: opacity var(--tooltip-fade-duration) ease, + visibility var(--tooltip-fade-duration) ease; +} + +/* Base structural down arrow indicator */ +.tooltip::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border-width: 5px; + border-style: solid; + border-color: var(--tech-accent) transparent transparent transparent; +} + +/* Reveal rules mapped to hover and focus states */ +.tooltip-container:hover .tooltip, +.tooltip-container:focus-within .tooltip { + opacity: 1; + visibility: visible; + /* Activates a persistent micro sizing pulse when visible */ + animation: tooltipPulse var(--tooltip-pulse-duration) infinite ease-in-out; +} + +/* ========================================================================== + Pure CSS Pulse Animation Mechanics + ========================================================================== */ +@keyframes tooltipPulse { + 0%, 100% { + transform: translateX(-50%) scale(1); + box-shadow: 0 0 15px rgba(56, 189, 248, 0.15); + } + 50% { + transform: translateX(-50%) scale(var(--tooltip-pulse-scale)); + box-shadow: 0 0 25px rgba(56, 189, 248, 0.35); + } +} + +/* Sub-layer radiating glow ring behind text canvas */ +.pulse-glow { + position: absolute; + top: -1px; + left: -1px; + right: -1px; + bottom: -1px; + border: 1px solid var(--tech-accent); + border-radius: var(--tooltip-radius); + z-index: -1; + opacity: 0; +} + +.tooltip-container:hover .pulse-glow, +.tooltip-container:focus-within .pulse-glow { + animation: radarWave var(--tooltip-pulse-duration) infinite linear; +} + +@keyframes radarWave { + 0% { + transform: scale(1); + opacity: 0.8; + } + 100% { + transform: scale(1.2, 1.4); + opacity: 0; + } +} + +/* ========================================================================== + Minimalist Tech Layout Structural Scaffold + ========================================================================== */ +body { + margin: 0; + font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; + background-color: var(--tech-bg); + color: var(--tech-text-main); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +.tech-container { + width: 90%; + max-width: 680px; + padding: 20px; +} + +.tech-header { + text-align: center; + margin-bottom: 40px; +} + +.status-indicator { + display: inline-block; + font-family: monospace; + font-size: 0.65rem; + font-weight: 700; + color: var(--tech-accent); + border: 1px solid rgba(56, 189, 248, 0.3); + background-color: rgba(56, 189, 248, 0.04); + padding: 4px 10px; + border-radius: 2px; + margin-bottom: 14px; + letter-spacing: 0.05em; +} + +.tech-header h1 { + margin: 0 0 10px 0; + font-size: 2rem; + font-weight: 800; + letter-spacing: -0.03em; +} + +.tech-header p { + margin: 0; + color: var(--tech-text-dim); + font-size: 0.9rem; +} + +.tech-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 24px; +} + +.tech-card { + background-color: var(--tech-surface); + border: 1px solid var(--tech-border); + padding: 24px; + border-radius: 6px; + position: relative; + transition: border-color 0.2s ease; +} + +.tech-card:hover { + border-color: rgba(56, 189, 248, 0.4); +} + +.node-id { + font-family: monospace; + font-size: 0.7rem; + color: var(--tech-accent); + margin-bottom: 4px; + font-weight: 600; +} + +.node-label { + font-size: 1.05rem; + font-weight: 600; + margin-bottom: 24px; +} + +/* Sharp Terminal Interactive Trigger Node */ +.action-trigger { + width: 100%; + background: transparent; + color: var(--tech-text-main); + border: 1px solid var(--tech-border); + padding: 10px; + font-size: 0.82rem; + font-weight: 600; + cursor: pointer; + border-radius: 4px; + transition: all 0.2s ease; +} + +.action-trigger:hover { + background-color: var(--tech-text-main); + color: var(--tech-bg); + border-color: var(--tech-text-main); +} + +.action-trigger:focus-visible { + outline: 2px solid var(--tech-accent); + outline-offset: 3px; +} \ No newline at end of file