AutoGineer
Generated banner for Glass Dark Mode Clock
Generated logo for Glass Dark Mode Clock

Glass Dark Mode Clock

Meng ToCommunityCreated by Meng To

  • Skill
  • Content generator
  • Design and creative
  • MIT
  • Medium risk
Download ZIP

From the author

Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a comprehensive design framework for building dark-mode interfaces that prioritize a precise, instrument-like aesthetic. It moves beyond generic glassmorphism by focusing on a cohesive system of frosted-black surfaces, subtle beam grids, and a central circular calibration dial. The guide emphasizes a monochrome palette, cinematic lighting, and controlled motion to create a meditative, high-end user experience suitable for technical or data-driven applications.

What it does

  • Defines a visual language for dark glass surfaces with frosted effects and thin, crisp highlights.
  • Provides structural patterns for integrating circular, clock-like calibration dials into web layouts.
  • Establishes a monochrome color palette using black, white, zinc, and smoky gray tones.
  • Offers guidance on implementing subtle, continuous motion for rings, beams, and interface elements.
  • Outlines layout strategies for balancing technical instrument framing with clean, sparse typography.
  • Sets rules for maintaining a premium, non-muddy glass aesthetic through controlled opacity and blur.

When to use it

  • When designing a high-end, dark-themed interface that requires a scientific or cinematic feel.
  • When you need to anchor a page layout around a central, functional-looking circular component.
  • When building dashboards or landing pages that benefit from a precise, instrument-panel aesthetic.
  • When you want to implement glassmorphism that feels engineered rather than decorative or pastel-heavy.

Advantages

  • Creates a distinct, professional visual identity that avoids common design tropes.
  • Provides clear, actionable constraints to ensure visual consistency across complex interfaces.
  • Promotes a meditative and stable user experience through slow, controlled motion and restrained lighting.
  • Ensures high readability by balancing dark glass layers with precise, high-contrast typography.

Usage examples

“Apply the glass dark mode clock system to a new dashboard landing page.”
The agent will structure the page with a fixed dark nav, a low-contrast grid background, and a central circular calibration dial, using frosted-black capsules for controls.
“How should I style the hero section for a sci-fi instrument interface?”
The agent will recommend a split layout featuring a central circular dial with degree labels and rotating rings, balanced by sparse, clean hero copy.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/mengto/glass-dark-mode-clock/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip glass-dark-mode-clock.zip -d .agents/skills

Documentation by Meng To

Glass Dark Mode Clock Skill

Use When

  • Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.

Workflow

Scope

  • Apply this as a full design-system direction across background, shells, navigation, hero layout, controls, circular focal components, and motion.

  • Use it when the interface should feel like a premium dark instrument panel with glassy surfaces and a clock, dial, or calibration-device centerpiece.

  • This is not generic glassmorphism and not just a standalone radial widget. The full interface should support the clock-like system aesthetic.

Visual target

  • Build the page on a black or near-black base with very subtle grid lines, vertical and horizontal beam guides, and faint structural crosshairs.

  • Use dark glass or frosted-black surfaces for nav bars, pills, and controls, with blur, thin white edge gradients, and restrained reflection.

  • Introduce a dominant circular focal element that feels like a clock, calibration dial, or resonance instrument with rings, ticks, degrees, or rotating text paths.

  • Keep the palette mostly monochrome: black, white, zinc, and smoky gray. Accent brightness should come from glass highlights and soft white glow rather than saturated color.

  • Let the result feel precise, scientific, and slightly cinematic, with the circular dial anchoring the page like a timekeeping or calibration device.

Implementation guidance

  • Use frosted shells with thin gradient borders, low-opacity fills, and soft backdrop blur for navigation, pills, and action controls.

  • Support the circular centerpiece with crosshair lines, calibration marks, mono labels, radial rings, and small interface cues so it feels engineered.

  • The clock or dial should be layered: outer ring, tick marks, rotating labels or text, central core, and optional hex or geometric inner frame.

  • Keep hero copy clean and sparse, placed beside the dial within a split layout or balanced two-column composition.

  • If motion is present, favor slow rotating rings, drifting beams, subtle wisps, and gentle reveal sequences. Motion should feel continuous and meditative rather than flashy.

  • Glass treatment should stay dark and premium. Avoid translucent white blobs; use controlled smoky fills with crisp highlights instead.

Recommended patterns

  • Fixed dark nav with backdrop blur and thin bottom border floating above a low-contrast grid field.

  • Eyebrow pills and buttons built as glass-dark capsules with 1px highlight wrappers and clean inner dark fill.

  • Circular hero dial with outer text path, degree labels, rotating tick groups, and a minimal center emblem.

  • Background beam lines and crosshairs that align with the circular module and typography to reinforce calibration logic.

  • Soft white wisps, fog, or radial highlight inside the dial zone to make the glass and clock surfaces feel alive.

Tuning knobs

  • Glass strength: tune blur, opacity, and highlight intensity so surfaces read premium without becoming muddy.

  • Dial complexity: add or reduce rings, ticks, labels, and technical markers depending on how instrument-like the system should feel.

  • Motion tempo: keep rotations and beam sweeps slow enough to feel stable and controlled.

  • Contrast: preserve strong readability between white text, gray support copy, and the dark glass layers.

  • Glow restraint: use soft white glow only near focal glass edges or inside the dial, not across the whole page.

Avoid

  • Generic pastel glassmorphism with bright translucent cards floating on colorful blobs.

  • Treating the clock motif as a decorative afterthought disconnected from the layout.

  • Overloading the dial with too many labels or motion until it becomes noisy.

  • Using strong accent colors that break the monochrome calibration aesthetic.

  • Flattening everything into plain black boxes with no glass depth, beam structure, or radial hierarchy.

Files

demo/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="neuform-sandboxed-demo" content="1">
  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'self'; frame-src 'self'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'; object-src 'none'">
  <title>Sandboxed Neuform demo</title>
  <style>
    html, body, iframe { width: 100%; height: 100%; margin: 0; border: 0; }
    body { overflow: hidden; background: #0b0b0b; }
    iframe { display: block; background: white; }
    .error { box-sizing: border-box; min-height: 100%; padding: 32px; color: #fff; font: 16px/1.5 system-ui, sans-serif; }
  </style>
</head>
<body>
  <iframe id="neuform-demo" title="Sandboxed Neuform design demo" sandbox="allow-scripts" referrerpolicy="no-referrer"></iframe>
  <script>
    const encodedHtml = "PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CjxtZXRhIGh0dHAtZXF1aXY9IkNvbnRlbnQtU2VjdXJpdHktUG9saWN5IiBjb250ZW50PSJkZWZhdWx0LXNyYyAnbm9uZSc7IGJhc2UtdXJpICdub25lJzsgY29ubmVjdC1zcmMgJ25vbmUnOyBmb250LXNyYyBkYXRhOiBodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tOyBmb3JtLWFjdGlvbiAnbm9uZSc7IGZyYW1lLXNyYyAnbm9uZSc7IGltZy1zcmMgYmxvYjo7IG1lZGlhLXNyYyBibG9iOjsgbmF2aWdhdGUtdG8gJ25vbmUnOyBvYmplY3Qtc3JjICdub25lJzsgc2NyaXB0LXNyYyAndW5zYWZlLWlubGluZScgX19ORVVGT1JNX1JVTlRJTUVfU09VUkNFU19fOyBzdHlsZS1zcmMgJ3Vuc2FmZS1pbmxpbmUnIGh0dHBzOi8vYXBpLmZvbnRzaGFyZS5jb20gaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbTsgd29ya2VyLXNyYyAnbm9uZSciPgo8c2NyaXB0IGRhdGEtbmV1Zm9ybS1hc3NldC1ib290c3RyYXA+CigoKSA9PiB7CiAgbGV0IHJlY2VpdmVkID0gZmFsc2U7CiAgY29uc3Qgb2JqZWN0VXJscyA9IFtdOwogIGNvbnN0IHJlcGxhY2VBbGwgPSAodmFsdWUsIHJlcGxhY2VtZW50cykgPT4gewogICAgbGV0IG5leHQgPSBTdHJpbmcodmFsdWUgfHwgIiIpOwogICAgZm9yIChjb25zdCBbZmlsZSwgb2JqZWN0VXJsXSBvZiByZXBsYWNlbWVudHMpIG5leHQgPSBuZXh0LnNwbGl0KGZpbGUpLmpvaW4ob2JqZWN0VXJsKTsKICAgIHJldHVybiBuZXh0OwogIH07CiAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoIm1lc3NhZ2UiLCAoZXZlbnQpID0+IHsKICAgIGlmIChyZWNlaXZlZCB8fCBldmVudC5zb3VyY2UgIT09IHBhcmVudCB8fCBldmVudC5kYXRhPy50eXBlICE9PSAibmV1Zm9ybS1hc3NldHMtdjEiKSByZXR1cm47CiAgICByZWNlaXZlZCA9IHRydWU7CiAgICBjb25zdCByZXBsYWNlbWVudHMgPSBbXTsKICAgIGZvciAoY29uc3QgYXNzZXQgb2YgZXZlbnQuZGF0YS5hc3NldHMgfHwgW10pIHsKICAgICAgaWYgKCFhc3NldCB8fCB0eXBlb2YgYXNzZXQuZmlsZSAhPT0gInN0cmluZyIgfHwgdHlwZW9mIGFzc2V0LmJhc2U2NCAhPT0gInN0cmluZyIpIGNvbnRpbnVlOwogICAgICBjb25zdCBiaW5hcnkgPSBhdG9iKGFzc2V0LmJhc2U2NCk7CiAgICAgIGNvbnN0IGJ5dGVzID0gVWludDhBcnJheS5mcm9tKGJpbmFyeSwgKGNoYXJhY3RlcikgPT4gY2hhcmFjdGVyLmNoYXJDb2RlQXQoMCkpOwogICAgICBjb25zdCBvYmplY3RVcmwgPSBVUkwuY3JlYXRlT2JqZWN0VVJMKG5ldyBCbG9iKFtieXRlc10sIHsgdHlwZTogYXNzZXQuY29udGVudFR5cGUgfHwgImFwcGxpY2F0aW9uL29jdGV0LXN0cmVhbSIgfSkpOwogICAgICBvYmplY3RVcmxzLnB1c2gob2JqZWN0VXJsKTsKICAgICAgcmVwbGFjZW1lbnRzLnB1c2goW2Fzc2V0LmZpbGUsIG9iamVjdFVybF0pOwogICAgfQogICAgZm9yIChjb25zdCBlbGVtZW50IG9mIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoIioiKSkgewogICAgICBmb3IgKGNvbnN0IG5hbWUgb2YgWyJzcmMiLCAicG9zdGVyIiwgInNyY3NldCIsICJzdHlsZSJdKSB7CiAgICAgICAgY29uc3QgdmFsdWUgPSBlbGVtZW50LmdldEF0dHJpYnV0ZShuYW1lKTsKICAgICAgICBpZiAodmFsdWUpIGVsZW1lbnQuc2V0QXR0cmlidXRlKG5hbWUsIHJlcGxhY2VBbGwodmFsdWUsIHJlcGxhY2VtZW50cykpOwogICAgICB9CiAgICB9CiAgICBmb3IgKGNvbnN0IHN0eWxlIG9mIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoInN0eWxlIikpIHsKICAgICAgc3R5bGUudGV4dENvbnRlbnQgPSByZXBsYWNlQWxsKHN0eWxlLnRleHRDb250ZW50LCByZXBsYWNlbWVudHMpOwogICAgfQogIH0pOwogIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCJwYWdlaGlkZSIsICgpID0+IHsKICAgIGZvciAoY29uc3Qgb2JqZWN0VXJsIG9mIG9iamVjdFVybHMpIFVSTC5yZXZva2VPYmplY3RVUkwob2JqZWN0VXJsKTsKICB9LCB7IG9uY2U6IHRydWUgfSk7Cn0pKCk7Cjwvc2NyaXB0PgoKPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiPgogICAgPHRpdGxlPkFsZXJ0IEludGVyZmFjZTwvdGl0bGU+CiAgICA8c2NyaXB0IHNyYz0iLi4vLi4vLi4vLi4vYXNzZXRzL3J1bnRpbWUvcnVudGltZS1jY2M4ODk0YjM0MTgtcnVudGltZS5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0iLi4vLi4vLi4vLi4vYXNzZXRzL3J1bnRpbWUvcnVudGltZS0xNjNlYmQwODdjZmMtaWNvbmlmeS1pY29uLW1pbi5qcyI+PC9zY3JpcHQ+CiAgICA8bGluayBocmVmPSJodHRwczovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2NzczI/ZmFtaWx5PUludGVyOndnaHRAMjAwOzMwMDs0MDA7NTAwOzYwMCZkaXNwbGF5PXN3YXAiIHJlbD0ic3R5bGVzaGVldCI+CjwvaGVhZD4KPGJvZHkgY2xhc3M9ImJnLXppbmMtMjAwIG1pbi1oLXNjcmVlbiBmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBwLTQgYW50aWFsaWFzZWQgdGV4dC1ibGFjayIgc3R5bGU9ImZvbnQtZmFtaWx5OiAnSW50ZXInLCAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmOyBvdmVyZmxvdzogaGlkZGVuOyI+CgogICAgPCEtLSBEZXZpY2UgRnJhbWUgLS0+CiAgICA8ZGl2IGNsYXNzPSJyZWxhdGl2ZSB3LWZ1bGwgbWF4LXctWzM5MHB4XSBoLVs4NDRweF0gYmctWyNlNGU0ZTJdIHJvdW5kZWQtWzMuNXJlbV0gc2hhZG93LTJ4bCBvdmVyZmxvdy1oaWRkZW4gYm9yZGVyLVs4cHhdIGJvcmRlci16aW5jLTgwMCBmbGV4IGZsZXgtY29sIHNjYWxlLVswLjg1XSBzbTpzY2FsZS0xMDAgb3JpZ2luLWNlbnRlciB0cmFuc2l0aW9uLXRyYW5zZm9ybSBkdXJhdGlvbi01MDAiPgogICAgICAgIAogICAgICAgIDwhLS0gU3RhdHVzIEJhciAtLT4KICAgICAgICA8ZGl2IGNsYXNzPSJmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWJldHdlZW4gcHgtNyBwdC00IHBiLTIgdGV4dC14cyBmb250LW1lZGl1bSB6LTIwIj4KICAgICAgICAgICAgPHNwYW4gY2xhc3M9InRyYWNraW5nLXdpZGVyIj45OjQxPC9zcGFuPgogICAgICAgICAgICA8IS0tIER5bmFtaWMgSXNsYW5kIE1vY2sgLS0+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9InctMzIgaC03IGJnLWJsYWNrIHJvdW5kZWQtZnVsbCBhYnNvbHV0ZSBsZWZ0LTEvMiAtdHJhbnNsYXRlLXgtMS8yIHRvcC0zIj48L2Rpdj4KICAgICAgICAgICAgPGRpdiBjbGFzcz0iZmxleCBnYXAtMS41IGl0ZW1zLWNlbnRlciI+CiAgICAgICAgICAgICAgICA8aWNvbmlmeS1pY29uIGljb249InNvbGFyOmNlbGx1bGFyLW5ldHdvcmstbGluZWFyIiBjbGFzcz0idGV4dC1zbSI+PC9pY29uaWZ5LWljb24+CiAgICAgICAgICAgICAgICA8aWNvbmlmeS1pY29uIGljb249InNvbGFyOndpZmktbGluZWFyIiBjbGFzcz0idGV4dC1zbSI+PC9pY29uaWZ5LWljb24+CiAgICAgICAgICAgICAgICA8aWNvbmlmeS1pY29uIGljb249InNvbGFyOmJhdHRlcnktY2hhcmdlLWxpbmVhciIgY2xhc3M9InRleHQtYmFzZSI+PC9pY29uaWZ5LWljb24+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgoKICAgICAgICA8IS0tIEhlYWRlciAtLT4KICAgICAgICA8ZGl2IGNsYXNzPSJweC03IHB0LTIgcGItNiBmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWJldHdlZW4gei0yMCI+CiAgICAgICAgICAgIDxoMSBjbGFzcz0idGV4dC0zeGwgZm9udC1zZW1pYm9sZCB0cmFja2luZy10aWdodGVyIiBzdHlsZT0ibGV0dGVyLXNwYWNpbmc6IC0wLjA1ZW07Ij5BbGVydHM8L2gxPgogICAgICAgICAgICA8aWNvbmlmeS1pY29uIGljb249InNvbGFyOmFsdC1hcnJvdy1kb3duLWxpbmVhciIgY2xhc3M9InRleHQteGwiPjwvaWNvbmlmeS1pY29uPgogICAgICAgIDwvZGl2PgoKICAgICAgICA8IS0tIE1haW4gRGlzcGxheSAtLT4KICAgICAgICA8ZGl2IGNsYXNzPSJmbGV4IGZsZXgtY29sIGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciB6LTIwIiBpZD0ibWFpbi10aW1lLWNvbnRhaW5lciIgc3R5bGU9Im9wYWNpdHk6IDA7IHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMHB4KTsiPgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJmbGV4IGl0ZW1zLWJhc2VsaW5lIGp1c3RpZnktY2VudGVyIGZvbnQtbGlnaHQgdHJhY2tpbmctdGlnaHRlciIgc3R5bGU9ImxldHRlci1zcGFjaW5nOiAtMC4wNmVtOyBsaW5lLWhlaWdodDogMC45OyI+CiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0idGV4dC04eGwgdGV4dC1ibGFjayI+MDc8L3NwYW4+CiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0idGV4dC04eGwgdGV4dC1bIzk0OTQ5NF0iPjoxNTwvc3Bhbj4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9Im10LTQgdGV4dC14cyBmb250LW1lZGl1bSB0ZXh0LVsjN2E3YTdhXSB0cmFja2luZy13aWRlIj4KICAgICAgICAgICAgICAgIFRoZSBuZXh0IGFsZXJ0IHJpbmdzIGluIDxzcGFuIGNsYXNzPSJ0ZXh0LWJsYWNrIGZvbnQtc2VtaWJvbGQiPjJoIDE1bTwvc3Bhbj4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CgogICAgICAgIDwhLS0gV2ViR0wgVmlzdWFsaXphdGlvbiAoQmFyY29kZSkgLS0+CiAgICAgICAgPGRpdiBjbGFzcz0ibXgtNiBtdC04IGgtNDAgYmctWyNkYmRiZDhdIHJvdW5kZWQtMnhsIHJlbGF0aXZlIG92ZXJmbG93LWhpZGRlbiBzaGFkb3ctaW5uZXIgei0xMCIgaWQ9ImJhcmNvZGUtY29udGFpbmVyIiBzdHlsZT0ib3BhY2l0eTogMDsiPgogICAgICAgICAgICA8Y2FudmFzIGlkPSJ3ZWJnbC1iYXJjb2RlIiBjbGFzcz0iYWJzb2x1dGUgaW5zZXQtMCB3LWZ1bGwgaC1mdWxsIj48L2NhbnZhcz4KICAgICAgICAgICAgPCEtLSBSZWQgSW5kaWNhdG9yIExpbmUgLS0+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9ImFic29sdXRlIGluc2V0LXktMCBsZWZ0LTEvMiB3LVsxcHhdIGJnLVsjZmYzYTFhXSB6LTIwIHNoYWRvdy1bMF8wXzEwcHhfcmdiYSgyNTUsNTgsMjYsMC42KV0iPjwvZGl2PgogICAgICAgIDwvZGl2PgoKICAgICAgICA8IS0tIERheXMgU2VsZWN0b3IgLS0+CiAgICAgICAgPGRpdiBjbGFzcz0iZmxleCBqdXN0aWZ5LWJldHdlZW4gaXRlbXMtY2VudGVyIHB4LTggbXQtOCB0ZXh0LXhzIGZvbnQtbWVkaXVtIHRleHQtWyM5NDk0OTRdIHotMjAiIGlkPSJkYXlzLWNvbnRhaW5lciIgc3R5bGU9Im9wYWNpdHk6IDA7Ij4KICAgICAgICAgICAgPHNwYW4+U3VuPC9zcGFuPgogICAgICAgICAgICA8c3Bhbj5Nb248L3NwYW4+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9InJlbGF0aXZlIGZsZXggaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIHctOSBoLTkiPgogICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iYWJzb2x1dGUgaW5zZXQtMCBiZy1bI2ZmM2ExYV0gcm91bmRlZC1mdWxsIC1yb3RhdGUtMTIgc2hhZG93LXNtIj48L2Rpdj4KICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPSJyZWxhdGl2ZSB6LTEwIHRleHQtYmxhY2sgZm9udC1zZW1pYm9sZCI+VHVlPC9zcGFuPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPHNwYW4+V2VkPC9zcGFuPgogICAgICAgICAgICA8c3Bhbj5UaHU8L3NwYW4+CiAgICAgICAgICAgIDxzcGFuPkZyaTwvc3Bhbj4KICAgICAgICAgICAgPHNwYW4+U2F0PC9zcGFuPgogICAgICAgIDwvZGl2PgoKICAgICAgICA8IS0tIEhvcml6b250YWwgU2Nyb2xsIENhcmRzIC0tPgogICAgICAgIDxkaXYgY2xhc3M9Im10LTggZmxleCBnYXAtMyBvdmVyZmxvdy14LWF1dG8gcHgtNiBwYi0yNCBzbmFwLXggei0yMCIgc3R5bGU9InNjcm9sbGJhci13aWR0aDogbm9uZTsgLW1zLW92ZXJmbG93LXN0eWxlOiBub25lOyIgaWQ9ImNhcmRzLWNvbnRhaW5lciI+CiAgICAgICAgICAgIDwhLS0gQ2FyZCAxIC0tPgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJtaW4tdy1bMjYwcHhdIGJnLVsjZDlkOWQ2XSByb3VuZGVkLVsyNHB4XSBwLTUgc25hcC1jZW50ZXIgZmxleCBqdXN0aWZ5LWJldHdlZW4gaXRlbXMtY2VudGVyIHJlbGF0aXZlIG92ZXJmbG93LWhpZGRlbiB0cmFuc2l0aW9uLXRyYW5zZm9ybSBkdXJhdGlvbi0zMDAgYWN0aXZlOnNjYWxlLTk1Ij4KICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImZsZXggZmxleC1jb2wgei0xMCI+CiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iZmxleCBpdGVtcy1iYXNlbGluZSBnYXAtMSB0cmFja2luZy10aWdodGVyIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9InRleHQtNXhsIGZvbnQtbGlnaHQgdGV4dC1ibGFjayI+MDc8L3NwYW4+CiAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPSJ0ZXh0LTV4bCBmb250LWxpZ2h0IHRleHQtWyM4YThhOGFdIj46MTU8L3NwYW4+CiAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPSJ0ZXh0LXhzIGZvbnQtc2VtaWJvbGQgdGV4dC1bIzY2Nl0gdXBwZXJjYXNlIG1iLTQgbWwtMSI+YW08L3NwYW4+CiAgICAgICAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0ibXQtMSB0ZXh0LXhzIGZvbnQtbWVkaXVtIHRleHQtYmxhY2siPgogICAgICAgICAgICAgICAgICAgICAgICBEZWVwIEZvY3VzIDxzcGFuIGNsYXNzPSJ0ZXh0LVsjNzc3XSBtbC0xIj7CtyBBbWJpZW50PC9zcGFuPgogICAgICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgICAgICA8aWNvbmlmeS1pY29uIGljb249InNvbGFyOnBsYXktYm9sZCIgY2xhc3M9InRleHQtMnhsIHRleHQtYmxhY2sgei0xMCI+PC9pY29uaWZ5LWljb24+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8IS0tIENhcmQgMiAtLT4KICAgICAgICAgICAgPGRpdiBjbGFzcz0ibWluLXctWzI2MHB4XSBiZy1bI2Q5ZDlkNl0gcm91bmRlZC1bMjRweF0gcC01IHNuYXAtY2VudGVyIGZsZXgganVzdGlmeS1iZXR3ZWVuIGl0ZW1zLWNlbnRlciByZWxhdGl2ZSBvdmVyZmxvdy1oaWRkZW4gdHJhbnNpdGlvbi10cmFuc2Zvcm0gZHVyYXRpb24tMzAwIGFjdGl2ZTpzY2FsZS05NSI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJmbGV4IGZsZXgtY29sIHotMTAiPgogICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImZsZXggaXRlbXMtYmFzZWxpbmUgZ2FwLTEgdHJhY2tpbmctdGlnaHRlciI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPSJ0ZXh0LTV4bCBmb250LWxpZ2h0IHRleHQtYmxhY2siPjA4PC9zcGFuPgogICAgICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0idGV4dC01eGwgZm9udC1saWdodCB0ZXh0LVsjOGE4YThhXSI+OjMwPC9zcGFuPgogICAgICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0idGV4dC14cyBmb250LXNlbWlib2xkIHRleHQtWyM2NjZdIHVwcGVyY2FzZSBtYi00IG1sLTEiPmFtPC9zcGFuPgogICAgICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9Im10LTEgdGV4dC14cyBmb250LW1lZGl1bSB0ZXh0LWJsYWNrIj4KICAgICAgICAgICAgICAgICAgICAgICAgRGFpbHkgU3RhbmR1cCA8c3BhbiBjbGFzcz0idGV4dC1bIzc3N10gbWwtMSI+wrcgTWVldGluZzwvc3Bhbj4KICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgPGljb25pZnktaWNvbiBpY29uPSJzb2xhcjpwbGF5LWJvbGQiIGNsYXNzPSJ0ZXh0LTJ4bCB0ZXh0LWJsYWNrIHotMTAgb3BhY2l0eS0zMCI+PC9pY29uaWZ5LWljb24+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgoKICAgICAgICA8IS0tIEJvdHRvbSBDb250cm9sIEJhciAtLT4KICAgICAgICA8ZGl2IGNsYXNzPSJhYnNvbHV0ZSBib3R0b20tNiBsZWZ0LTUgcmlnaHQtNSBoLVs3MnB4XSBiZy1bIzE0MTQxNF0gcm91bmRlZC1mdWxsIGZsZXggaXRlbXMtY2VudGVyIGp1c3RpZnktYmV0d2VlbiBweC01IHotMzAgc2hhZG93LTJ4bCI+CiAgICAgICAgICAgIDxidXR0b24gY2xhc3M9InctMTAgaC0xMCBmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciB0ZXh0LVsjNzc3XSBob3Zlcjp0ZXh0LXdoaXRlIHRyYW5zaXRpb24tY29sb3JzIj4KICAgICAgICAgICAgICAgIDxpY29uaWZ5LWljb24gaWNvbj0ic29sYXI6Y2FsZW5kYXItbGluZWFyIiBjbGFzcz0idGV4dC14bCI+PC9pY29uaWZ5LWljb24+CiAgICAgICAgICAgIDwvYnV0dG9uPgogICAgICAgICAgICAKICAgICAgICAgICAgPCEtLSBTY3JvbGxpbmcgUnVsZXIgQ2FudmFzIC0tPgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJmbGV4LTEgaC1mdWxsIG14LTIgcmVsYXRpdmUgb3ZlcmZsb3ctaGlkZGVuIGZsZXggZmxleC1jb2wganVzdGlmeS1lbmQgcGItMyI+CiAgICAgICAgICAgICAgICA8Y2FudmFzIGlkPSJydWxlci1jYW52YXMiIGNsYXNzPSJhYnNvbHV0ZSBpbnNldC0wIHctZnVsbCBoLWZ1bGwiPjwvY2FudmFzPgogICAgICAgICAgICAgICAgPCEtLSBDZW50cmFsIEluZGljYXRvciBvdmVybGF5IC0tPgogICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iYWJzb2x1dGUgaW5zZXQtMCBmbGV4IGZsZXgtY29sIGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWJldHdlZW4gcHQtMiBwYi1bMTBweF0gcG9pbnRlci1ldmVudHMtbm9uZSI+CiAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9InRleHQtd2hpdGUgdGV4dC14cyBmb250LXNlbWlib2xkIGRyb3Atc2hhZG93LW1kIj4wNzoxNTwvc3Bhbj4KICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJ3LVsxLjVweF0gaC00IGJnLVsjZmYzYTFhXSByb3VuZGVkLWZ1bGwiPjwvZGl2PgogICAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDwvZGl2PgoKICAgICAgICAgICAgPGJ1dHRvbiBjbGFzcz0idy0xMCBoLTEwIGZsZXggaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIHRleHQtWyM3NzddIGhvdmVyOnRleHQtd2hpdGUgdHJhbnNpdGlvbi1jb2xvcnMiPgogICAgICAgICAgICAgICAgPGljb25pZnktaWNvbiBpY29uPSJzb2xhcjphZGQtY2lyY2xlLWxpbmVhciIgY2xhc3M9InRleHQteGwiPjwvaWNvbmlmeS1pY29uPgogICAgICAgICAgICA8L2J1dHRvbj4KICAgICAgICA8L2Rpdj4KICAgIDwvZGl2PgoKICAgIDxzY3JpcHQ+CiAgICAgICAgLy8gLS0tIEludHJvIEFuaW1hdGlvbnMgLS0tCiAgICAgICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcigiRE9NQ29udGVudExvYWRlZCIsICgpID0+IHsKICAgICAgICAgICAgY29uc3QgYW5pbWF0ZUluID0gKGlkLCBkZWxheSkgPT4gewogICAgICAgICAgICAgICAgY29uc3QgZWwgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChpZCk7CiAgICAgICAgICAgICAgICBpZighZWwpIHJldHVybjsKICAgICAgICAgICAgICAgIGxldCBzdGFydCA9IG51bGw7CiAgICAgICAgICAgICAgICBjb25zdCBkdXJhdGlvbiA9IDgwMDsKICAgICAgICAgICAgICAgIGNvbnN0IGVhc2VPdXRRdWFydCA9IHQgPT4gMSAtICgtLXQpICogdCAqIHQgKiB0OwogICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICBjb25zdCBzdGVwID0gKHRpbWVzdGFtcCkgPT4gewogICAgICAgICAgICAgICAgICAgIGlmICghc3RhcnQpIHN0YXJ0ID0gdGltZXN0YW1wOwogICAgICAgICAgICAgICAgICAgIGNvbnN0IHByb2dyZXNzID0gTWF0aC5taW4oKHRpbWVzdGFtcCAtIHN0YXJ0KSAvIGR1cmF0aW9uLCAxKTsKICAgICAgICAgICAgICAgICAgICBjb25zdCBlYXNlID0gZWFzZU91dFF1YXJ0KHByb2dyZXNzKTsKICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICBlbC5zdHlsZS5vcGFjaXR5ID0gZWFzZTsKICAgICAgICAgICAgICAgICAgICBpZihlbC5pZCA9PT0gJ21haW4tdGltZS1jb250YWluZXInKSB7CiAgICAgICAgICAgICAgICAgICAgICAgIGVsLnN0eWxlLnRyYW5zZm9ybSA9IGB0cmFuc2xhdGVZKCR7KDEgLSBlYXNlKSAqIDIwfXB4KWA7CiAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIGlmIChwcm9ncmVzcyA8IDEpIHsKICAgICAgICAgICAgICAgICAgICAgICAgd2luZG93LnJlcXVlc3RBbmltYXRpb25GcmFtZShzdGVwKTsKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICB9OwogICAgICAgICAgICAgICAgc2V0VGltZW91dCgoKSA9PiB3aW5kb3cucmVxdWVzdEFuaW1hdGlvbkZyYW1lKHN0ZXApLCBkZWxheSk7CiAgICAgICAgICAgIH07CgogICAgICAgICAgICBhbmltYXRlSW4oJ21haW4tdGltZS1jb250YWluZXInLCAxMDApOwogICAgICAgICAgICBhbmltYXRlSW4oJ2JhcmNvZGUtY29udGFpbmVyJywgMzAwKTsKICAgICAgICAgICAgYW5pbWF0ZUluKCdkYXlzLWNvbnRhaW5lcicsIDUwMCk7CiAgICAgICAgICAgIAogICAgICAgICAgICAvLyBDYXJkcyBzdGFnZ2VyCiAgICAgICAgICAgIGNvbnN0IGNhcmRzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NhcmRzLWNvbnRhaW5lcicpLmNoaWxkcmVuOwogICAgICAgICAgICBBcnJheS5mcm9tKGNhcmRzKS5mb3JFYWNoKChjYXJkLCBpKSA9PiB7CiAgICAgICAgICAgICAgICBjYXJkLnN0eWxlLm9wYWNpdHkgPSAnMCc7CiAgICAgICAgICAgICAgICBjYXJkLnN0eWxlLnRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKDIwcHgpJzsKICAgICAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4gewogICAgICAgICAgICAgICAgICAgIGxldCBzdGFydCA9IG51bGw7CiAgICAgICAgICAgICAgICAgICAgY29uc3Qgc3RlcCA9ICh0aW1lc3RhbXApID0+IHsKICAgICAgICAgICAgICAgICAgICAgICAgaWYgKCFzdGFydCkgc3RhcnQgPSB0aW1lc3RhbXA7CiAgICAgICAgICAgICAgICAgICAgICAgIGNvbnN0IHAgPSBNYXRoLm1pbigodGltZXN0YW1wIC0gc3RhcnQpIC8gNjAwLCAxKTsKICAgICAgICAgICAgICAgICAgICAgICAgY29uc3QgZSA9IDEgLSBNYXRoLnBvdygxIC0gcCwgNCk7CiAgICAgICAgICAgICAgICAgICAgICAgIGNhcmQuc3R5bGUub3BhY2l0eSA9IGU7CiAgICAgICAgICAgICAgICAgICAgICAgIGNhcmQuc3R5bGUudHJhbnNmb3JtID0gYHRyYW5zbGF0ZVgoJHsoMSAtIGUpICogMjB9cHgpYDsKICAgICAgICAgICAgICAgICAgICAgICAgaWYgKHAgPCAxKSB3aW5kb3cucmVxdWVzdEFuaW1hdGlvbkZyYW1lKHN0ZXApOwogICAgICAgICAgICAgICAgICAgIH07CiAgICAgICAgICAgICAgICAgICAgd2luZG93LnJlcXVlc3RBbmltYXRpb25GcmFtZShzdGVwKTsKICAgICAgICAgICAgICAgIH0sIDYwMCArIChpICogMTUwKSk7CiAgICAgICAgICAgIH0pOwogICAgICAgIH0pOwoKICAgICAgICAvLyAtLS0gV2ViR0wgQmFyY29kZSBCYWNrZ3JvdW5kIC0tLQogICAgICAgIGNvbnN0IGluaXRXZWJHTCA9ICgpID0+IHsKICAgICAgICAgICAgY29uc3QgY2FudmFzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dlYmdsLWJhcmNvZGUnKTsKICAgICAgICAgICAgY29uc3QgZ2wgPSBjYW52YXMuZ2V0Q29udGV4dCgnd2ViZ2wnLCB7IGFudGlhbGlhczogZmFsc2UgfSk7CiAgICAgICAgICAgIGlmICghZ2wpIHJldHVybjsKCiAgICAgICAgICAgIGNvbnN0IHJlc2l6ZSA9ICgpID0+IHsKICAgICAgICAgICAgICAgIGNvbnN0IHJlY3QgPSBjYW52YXMucGFyZW50RWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTsKICAgICAgICAgICAgICAgIGNhbnZhcy53aWR0aCA9IHJlY3Qud2lkdGggKiB3aW5kb3cuZGV2aWNlUGl4ZWxSYXRpbzsKICAgICAgICAgICAgICAgIGNhbnZhcy5oZWlnaHQgPSByZWN0LmhlaWdodCAqIHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvOwogICAgICAgICAgICAgICAgZ2wudmlld3BvcnQoMCwgMCwgY2FudmFzLndpZHRoLCBjYW52YXMuaGVpZ2h0KTsKICAgICAgICAgICAgfTsKICAgICAgICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIHJlc2l6ZSk7CiAgICAgICAgICAgIHJlc2l6ZSgpOwoKICAgICAgICAgICAgY29uc3QgdnNTb3VyY2UgPSBgCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGUgdmVjMiBwb3NpdGlvbjsKICAgICAgICAgICAgICAgIHZvaWQgbWFpbigpIHsgZ2xfUG9zaXRpb24gPSB2ZWM0KHBvc2l0aW9uLCAwLjAsIDEuMCk7IH0KICAgICAgICAgICAgYDsKICAgICAgICAgICAgY29uc3QgZnNTb3VyY2UgPSBgCiAgICAgICAgICAgICAgICBwcmVjaXNpb24gbWVkaXVtcCBmbG9hdDsKICAgICAgICAgICAgICAgIHVuaWZvcm0gdmVjMiB1X3Jlc29sdXRpb247CiAgICAgICAgICAgICAgICB1bmlmb3JtIGZsb2F0IHVfdGltZTsKCiAgICAgICAgICAgICAgICAvLyBSYW5kb20gZnVuY3Rpb24KICAgICAgICAgICAgICAgIGZsb2F0IHJhbmRvbShmbG9hdCB4KSB7CiAgICAgICAgICAgICAgICAgICAgcmV0dXJuIGZyYWN0KHNpbih4KSAqIDQzNzU4LjU0NTMxMjMpOwogICAgICAgICAgICAgICAgfQoKICAgICAgICAgICAgICAgIHZvaWQgbWFpbigpIHsKICAgICAgICAgICAgICAgICAgICB2ZWMyIHV2ID0gZ2xfRnJhZ0Nvb3JkLnh5IC8gdV9yZXNvbHV0aW9uLnh5OwogICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgIC8vIFNsb3dlciBzY3JvbGwgc3BlZWQKICAgICAgICAgICAgICAgICAgICBmbG9hdCBzY3JvbGxYID0gdXYueCArIHVfdGltZSAqIDAuMDI7IAogICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgIC8vIERlbnNpdHkgb2YgYmFycwogICAgICAgICAgICAgICAgICAgIGZsb2F0IGRlbnNpdHkgPSAxNTAuMDsgCiAgICAgICAgICAgICAgICAgICAgZmxvYXQgaW5kZXggPSBmbG9vcihzY3JvbGxYICogZGVuc2l0eSk7CiAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgLy8gR2VuZXJhdGUgcmFuZG9tIHZhbHVlIHBlciBiYXIKICAgICAgICAgICAgICAgICAgICBmbG9hdCBybmQgPSByYW5kb20oaW5kZXgpOwogICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgIC8vIENyZWF0ZSBsaW5lczogdGhyZXNob2xkIHJhbmRvbSB2YWx1ZS4gCiAgICAgICAgICAgICAgICAgICAgLy8gSGlnaGVyIHRocmVzaG9sZCA9IGZld2VyIGxpbmVzCiAgICAgICAgICAgICAgICAgICAgZmxvYXQgbGluZSA9IHN0ZXAoMC4zNSwgcm5kKTsKICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAvLyBWYXJ5IG9wYWNpdHkgYmFzZWQgb24gcmFuZG9tIHZhbHVlLCBrZWVwIGl0IHN1YnRsZQogICAgICAgICAgICAgICAgICAgIGZsb2F0IGFscGhhID0gbGluZSAqIHJuZCAqIDAuNDsKICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAvLyBDb2xvciBpcyBibGFjay9kYXJrIGdyYXksIHJlbHlpbmcgb24gYWxwaGEgZm9yIHN1YnRsZXR5IGFnYWluc3QgYmcKICAgICAgICAgICAgICAgICAgICBnbF9GcmFnQ29sb3IgPSB2ZWM0KDAuMCwgMC4wLCAwLjAsIGFscGhhKTsKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgYDsKCiAgICAgICAgICAgIGNvbnN0IGNyZWF0ZVNoYWRlciA9ICh0eXBlLCBzb3VyY2UpID0+IHsKICAgICAgICAgICAgICAgIGNvbnN0IHNoYWRlciA9IGdsLmNyZWF0ZVNoYWRlcih0eXBlKTsKICAgICAgICAgICAgICAgIGdsLnNoYWRlclNvdXJjZShzaGFkZXIsIHNvdXJjZSk7CiAgICAgICAgICAgICAgICBnbC5jb21waWxlU2hhZGVyKHNoYWRlcik7CiAgICAgICAgICAgICAgICByZXR1cm4gc2hhZGVyOwogICAgICAgICAgICB9OwoKICAgICAgICAgICAgY29uc3QgcHJvZ3JhbSA9IGdsLmNyZWF0ZVByb2dyYW0oKTsKICAgICAgICAgICAgZ2wuYXR0YWNoU2hhZGVyKHByb2dyYW0sIGNyZWF0ZVNoYWRlcihnbC5WRVJURVhfU0hBREVSLCB2c1NvdXJjZSkpOwogICAgICAgICAgICBnbC5hdHRhY2hTaGFkZXIocHJvZ3JhbSwgY3JlYXRlU2hhZGVyKGdsLkZSQUdNRU5UX1NIQURFUiwgZnNTb3VyY2UpKTsKICAgICAgICAgICAgZ2wubGlua1Byb2dyYW0ocHJvZ3JhbSk7CiAgICAgICAgICAgIGdsLnVzZVByb2dyYW0ocHJvZ3JhbSk7CgogICAgICAgICAgICBjb25zdCB2ZXJ0aWNlcyA9IG5ldyBGbG9hdDMyQXJyYXkoWy0xLC0xLCAxLC0xLCAtMSwxLCAxLDFdKTsKICAgICAgICAgICAgY29uc3QgYnVmZmVyID0gZ2wuY3JlYXRlQnVmZmVyKCk7CiAgICAgICAgICAgIGdsLmJpbmRCdWZmZXIoZ2wuQVJSQVlfQlVGRkVSLCBidWZmZXIpOwogICAgICAgICAgICBnbC5idWZmZXJEYXRhKGdsLkFSUkFZX0JVRkZFUiwgdmVydGljZXMsIGdsLlNUQVRJQ19EUkFXKTsKCiAgICAgICAgICAgIGNvbnN0IHBvc0xvYyA9IGdsLmdldEF0dHJpYkxvY2F0aW9uKHByb2dyYW0sICdwb3NpdGlvbicpOwogICAgICAgICAgICBnbC5lbmFibGVWZXJ0ZXhBdHRyaWJBcnJheShwb3NMb2MpOwogICAgICAgICAgICBnbC52ZXJ0ZXhBdHRyaWJQb2ludGVyKHBvc0xvYywgMiwgZ2wuRkxPQVQsIGZhbHNlLCAwLCAwKTsKCiAgICAgICAgICAgIGNvbnN0IHRpbWVMb2MgPSBnbC5nZXRVbmlmb3JtTG9jYXRpb24ocHJvZ3JhbSwgJ3VfdGltZScpOwogICAgICAgICAgICBjb25zdCByZXNMb2MgPSBnbC5nZXRVbmlmb3JtTG9jYXRpb24ocHJvZ3JhbSwgJ3VfcmVzb2x1dGlvbicpOwoKICAgICAgICAgICAgY29uc3QgcmVuZGVyID0gKHRpbWUpID0+IHsKICAgICAgICAgICAgICAgIGdsLnVuaWZvcm0xZih0aW1lTG9jLCB0aW1lICogMC4wMDEpOwogICAgICAgICAgICAgICAgZ2wudW5pZm9ybTJmKHJlc0xvYywgY2FudmFzLndpZHRoLCBjYW52YXMuaGVpZ2h0KTsKICAgICAgICAgICAgICAgIGdsLmRyYXdBcnJheXMoZ2wuVFJJQU5HTEVfU1RSSVAsIDAsIDQpOwogICAgICAgICAgICAgICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKHJlbmRlcik7CiAgICAgICAgICAgIH07CiAgICAgICAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZShyZW5kZXIpOwogICAgICAgIH07CiAgICAgICAgaW5pdFdlYkdMKCk7CgogICAgICAgIC8vIC0tLSAyRCBDYW52YXMgU2Nyb2xsaW5nIFJ1bGVyIC0tLQogICAgICAgIGNvbnN0IGluaXRSdWxlciA9ICgpID0+IHsKICAgICAgICAgICAgY29uc3QgY2FudmFzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3J1bGVyLWNhbnZhcycpOwogICAgICAgICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgnMmQnLCB7IGFscGhhOiBmYWxzZSB9KTsgLy8gb3B0aW1pemUKICAgICAgICAgICAgaWYoIWN0eCkgcmV0dXJuOwoKICAgICAgICAgICAgbGV0IHcsIGg7CiAgICAgICAgICAgIGNvbnN0IHJlc2l6ZSA9ICgpID0+IHsKICAgICAgICAgICAgICAgIGNvbnN0IHJlY3QgPSBjYW52YXMucGFyZW50RWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTsKICAgICAgICAgICAgICAgIHcgPSByZWN0LndpZHRoOwogICAgICAgICAgICAgICAgaCA9IHJlY3QuaGVpZ2h0OwogICAgICAgICAgICAgICAgY2FudmFzLndpZHRoID0gdyAqIHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvOwogICAgICAgICAgICAgICAgY2FudmFzLmhlaWdodCA9IGggKiB3aW5kb3cuZGV2aWNlUGl4ZWxSYXRpbzsKICAgICAgICAgICAgICAgIGN0eC5zY2FsZSh3aW5kb3cuZGV2aWNlUGl4ZWxSYXRpbywgd2luZG93LmRldmljZVBpeGVsUmF0aW8pOwogICAgICAgICAgICB9OwogICAgICAgICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigncmVzaXplJywgcmVzaXplKTsKICAgICAgICAgICAgcmVzaXplKCk7CgogICAgICAgICAgICBjb25zdCB0aWNrU3BhY2luZyA9IDY7CiAgICAgICAgICAgIGNvbnN0IHNjcm9sbFNwZWVkID0gMTA7IC8vIHBpeGVscyBwZXIgc2Vjb25kCgogICAgICAgICAgICBsZXQgbGFzdFRpbWUgPSAwOwogICAgICAgICAgICBsZXQgb2Zmc2V0ID0gMDsKCiAgICAgICAgICAgIGNvbnN0IHJlbmRlclJ1bGVyID0gKHRpbWUpID0+IHsKICAgICAgICAgICAgICAgIGNvbnN0IGRlbHRhVGltZSA9ICh0aW1lIC0gbGFzdFRpbWUpIC8gMTAwMDsKICAgICAgICAgICAgICAgIGxhc3RUaW1lID0gdGltZTsKICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgb2Zmc2V0IC09IHNjcm9sbFNwZWVkICogZGVsdGFUaW1lOwogICAgICAgICAgICAgICAgaWYgKG9mZnNldCA8PSAtdGlja1NwYWNpbmcgKiAxMCkgewogICAgICAgICAgICAgICAgICAgIG9mZnNldCArPSB0aWNrU3BhY2luZyAqIDEwOwogICAgICAgICAgICAgICAgfQoKICAgICAgICAgICAgICAgIC8vIEZpbGwgYmFja2dyb3VuZAogICAgICAgICAgICAgICAgY3R4LmZpbGxTdHlsZSA9ICcjMTQxNDE0JzsKICAgICAgICAgICAgICAgIGN0eC5maWxsUmVjdCgwLCAwLCB3LCBoKTsKCiAgICAgICAgICAgICAgICBjdHgubGluZVdpZHRoID0gMTsKICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgY29uc3Qgc3RhcnRYID0gb2Zmc2V0ICUgdGlja1NwYWNpbmc7CiAgICAgICAgICAgICAgICBsZXQgdGlja0NvdW50ID0gMDsKCiAgICAgICAgICAgICAgICAvLyBEcmF3IHRpY2tzCiAgICAgICAgICAgICAgICBmb3IgKGxldCB4ID0gc3RhcnRYOyB4IDwgdzsgeCArPSB0aWNrU3BhY2luZykgewogICAgICAgICAgICAgICAgICAgIC8vIERldGVybWluZSB0aWNrIGhlaWdodCBiYXNlZCBvbiBpbnRlcnZhbCAoc2ltdWxhdGluZyAxMCB1bml0IGdyb3VwcykKICAgICAgICAgICAgICAgICAgICBjb25zdCBpc01ham9yID0gTWF0aC5hYnMoKHggLSBvZmZzZXQpICUgKHRpY2tTcGFjaW5nICogMTApKSA8IDAuMTsKICAgICAgICAgICAgICAgICAgICBjb25zdCBpc01pZCA9IE1hdGguYWJzKCh4IC0gb2Zmc2V0KSAlICh0aWNrU3BhY2luZyAqIDUpKSA8IDAuMSAmJiAhaXNNYWpvcjsKICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICBsZXQgdGlja0hlaWdodCA9IDY7IC8vIG1pbm9yCiAgICAgICAgICAgICAgICAgICAgaWYgKGlzTWFqb3IpIHRpY2tIZWlnaHQgPSAxNDsKICAgICAgICAgICAgICAgICAgICBpZiAoaXNNaWQpIHRpY2tIZWlnaHQgPSAxMDsKCiAgICAgICAgICAgICAgICAgICAgLy8gRHJhdyBmcm9tIGJvdHRvbSB1cAogICAgICAgICAgICAgICAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgICAgICAgICAgICAgICBjdHgubW92ZVRvKHgsIGggLSAxMCk7CiAgICAgICAgICAgICAgICAgICAgY3R4LmxpbmVUbyh4LCBoIC0gMTAgLSB0aWNrSGVpZ2h0KTsKICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAvLyBGYWRlIG91dCBlZGdlcwogICAgICAgICAgICAgICAgICAgIGNvbnN0IGRpc3RGcm9tQ2VudGVyID0gTWF0aC5hYnMoeCAtIHcvMik7CiAgICAgICAgICAgICAgICAgICAgY29uc3QgZmFkZVN0YXJ0ID0gdyAqIDAuMjsKICAgICAgICAgICAgICAgICAgICBsZXQgYWxwaGEgPSAxOwogICAgICAgICAgICAgICAgICAgIGlmKGRpc3RGcm9tQ2VudGVyID4gZmFkZVN0YXJ0KSB7CiAgICAgICAgICAgICAgICAgICAgICAgIGFscGhhID0gTWF0aC5tYXgoMCwgMSAtIChkaXN0RnJvbUNlbnRlciAtIGZhZGVTdGFydCkgLyAody8yIC0gZmFkZVN0YXJ0KSk7CiAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgIGN0eC5zdHJva2VTdHlsZSA9IGByZ2JhKDExOSwgMTE5LCAxMTksICR7YWxwaGEgKiAoaXNNYWpvciA/IDAuOCA6IDAuNCl9KWA7CiAgICAgICAgICAgICAgICAgICAgY3R4LnN0cm9rZSgpOwogICAgICAgICAgICAgICAgfQoKICAgICAgICAgICAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZShyZW5kZXJSdWxlcik7CiAgICAgICAgICAgIH07CiAgICAgICAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgodCkgPT4geyBsYXN0VGltZSA9IHQ7IHJlbmRlclJ1bGVyKHQpOyB9KTsKICAgICAgICB9OwogICAgICAgIGluaXRSdWxlcigpOwoKICAgIDwvc2NyaXB0Pgo8L2JvZHk+CjwvaHRtbD4K";
    const assetFiles = [];
    const runtimeFiles = ["../../../../assets/runtime/runtime-163ebd087cfc-iconify-icon-min.js","../../../../assets/runtime/runtime-ccc8894b3418-runtime.js"];
    const frame = document.getElementById("neuform-demo");
    const decodeBytes = (value) => Uint8Array.from(atob(value), (character) => character.charCodeAt(0));
    const decode = (value) => new TextDecoder().decode(decodeBytes(value));
    const encodeBytes = (bytes) => {
      let binary = "";
      for (let index = 0; index < bytes.length; index += 32768) {
        binary += String.fromCharCode(...bytes.subarray(index, index + 32768));
      }
      return btoa(binary);
    };
    const mediaTypes = {
      avif: "image/avif",
      gif: "image/gif",
      jpg: "image/jpeg",
      jpeg: "image/jpeg",
      mp4: "video/mp4",
      png: "image/png",
      webm: "video/webm",
      webp: "image/webp"
    };
    const loadAsset = async (file) => {
      const response = await fetch(file, { cache: "no-store", credentials: "omit", redirect: "error" });
      if (!response.ok) throw new Error("Could not load local demo asset: " + file);
      const extension = file.split(".").pop().toLowerCase();
      const contentType = mediaTypes[extension] || "application/octet-stream";
      const bytes = new Uint8Array(await response.arrayBuffer());
      return { base64: encodeBytes(bytes), contentType, file, kind: "asset" };
    };
    Promise.allSettled(assetFiles.map(loadAsset)).then((results) => {
      const runtimeSources = runtimeFiles.map((file) => new URL(file, location.href).href).join(" ");
      const source = decode(encodedHtml).replace("__NEUFORM_RUNTIME_SOURCES__", runtimeSources);
      const mediaAssets = [];
      for (const result of results) {
        if (result.status !== "fulfilled") continue;
        mediaAssets.push(result.value);
      }
      frame.addEventListener("load", () => {
        frame.contentWindow.postMessage({ type: "neuform-assets-v1", assets: mediaAssets }, "*");
      }, { once: true });
      frame.srcdoc = source;
    }).catch((error) => {
      document.body.innerHTML = '<div class="error">Unable to load this sandboxed demo.</div>';
      console.error(error);
    });
  </script>
</body>
</html>

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

  • Large base64-encoded blobs

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/glass-dark-mode-clock · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download glass-dark-mode-clock.zip