exported_code/Q55_Build a Pattern Lock Screen component using HTML_/q_thinking_55.txt

 The user wants a single, unique, creative, and detailed UI coding problem using HTML, CSS, and JavaScript. It must be mid-difficulty, self-contained, under 1000 words, and output ONLY the problem description with no greetings/numbering/formatting.

 Let me think of a good mid-difficulty UI problem that covers HTML/CSS/JS:

 Ideas:
 1. Custom file explorer/tree view with drag and drop
 2. Interactive kanban board
 3. Virtualized spreadsheet with formula evaluation
 4. Audio waveform visualizer with playback controls
 5. CSS-only masonry layout with filtering (but needs JS for filtering)
 6. Image comparison slider with multiple modes
 7. Command palette / spotlight search
 8. Resizable split pane with collapsible sidebar
 9. Toast notification system with queue management
 10. Color palette generator with contrast checker

 Let's go with something visual and interactive but not too complex. Maybe a "Command Palette" or "Spotlight Search" - that's practical, tests DOM manipulation, keyboard events, filtering, and accessibility.

 Actually, let's do something more visual: A "Photo Mosaic Editor" where you upload images and arrange them in a grid? No, too complex.

 How about: A "Resizable Dashboard Grid" like a simplified version of widget dashboards. Users can add widgets, drag to reposition, resize, and remove. That's classic but might be too complex for mid-difficulty.

 Let's do: **Interactive Image Annotation Tool**. User uploads an image, can click to add pin markers, each marker opens a note/editor, can drag markers, delete them, and export the annotations as JSON. That's good but maybe too complex.

 Better: **Virtualized Data Table with Inline Editing**. Too enterprise-y.

 Let's go with: **Custom Range Slider with Dual Handles for Price Filtering**. But that's been done.

 How about: **Dynamic CSS Grid Generator with Live Preview**. User can adjust rows/columns/gap via controls and see a grid of colored items respond, with ability to toggle auto-fill vs fixed. Maybe too simple.

 Let's think of something unique: **"Interactive Timeline Component"**. A horizontal timeline where events are placed by date. Users can zoom in/out, click events to expand details, and filter by category. Requires generating sample data, CSS positioning based on dates, JS for zoom/pan.

 Another idea: **"Pattern Lock Screen"** like Android's 3x3 dot lock. User sets a pattern, it draws SVG lines between dots, validates against stored pattern. That's creative, self-contained, visual, and mid-difficulty.

 Yes! Pattern Lock Screen is great:
 - HTML: 3x3 grid of dots
 - CSS: styling dots, lines, active states
 - JS: mouse/touch event handling, SVG line drawing between dots, pattern recording, validation, reset
 - Mid-difficulty: handling mouseenter vs click, SVG overlay, coordinate math, touch support, visual feedback

 Let me draft the problem description:

 Build a Pattern Lock Screen interface similar to those found on Android devices. The UI should consist of a 3x3 grid of circular nodes arranged in a square container. When the user presses and holds on a node (mouse or touch), then drags across other nodes, the system should record the sequence of visited nodes and draw a visible line connecting them in order. The line should follow the user's finger/cursor if the current position is between nodes. If the user drags over a node that was already visited, it should be ignored (no duplicates in sequence). When the user releases, the drawn pattern should be compared against a hardcoded correct sequence (e.g., [1,2,3,6,9]). If correct, display a success message in green; if incorrect, display an error message in red and briefly highlight the wrong path. Include a "Reset" button to clear the current attempt. The component must be responsive, work with both mouse and touch events, prevent page scrolling during touch interaction, and use an SVG overlay for the connecting lines so they render crisply beneath the user's finger.

 That's specific, self-contained, mid-difficulty. Let me check word count... probably around 150-200 words. Need to make sure it's detailed enough but under 1000 words.

 Let me refine to make it very clear and detailed:

 Build a Pattern Lock Screen component using HTML, CSS, and JavaScript. The interface must display a 3×3 grid of circular nodes centered on the screen inside a square container. Each node should be numbered 1–9 internally but not necessarily display the number to the user (or maybe show them? Actually pattern locks usually don't show numbers until after, but for debugging/testing it's fine either way. Better to say nodes are indexed 1-9 left-to-right, top-to-bottom).

 Interaction requirements:
 - On mousedown/touchstart on a node, begin a pattern and mark that node as active.
 - While dragging, if the cursor enters a new unvisited node, add it to the sequence and mark it active.
 - An SVG line should connect all active nodes in sequence, plus a "trailing line" from the last active node to the current cursor/finger position.
 - Already visited nodes cannot be added to the sequence again.
 - On mouseup/touchend, finalize the pattern.
 - Compare the recorded sequence against the hardcoded correct pattern: [1, 5, 9, 6, 3] (or whatever). If matched exactly, show "Access Granted" in green below the grid. If not, show "Access Denied" in red, keep the lines visible for 1 second with a red color, then clear.
 - A "Reset" button must clear the current pattern, all lines, and messages immediately.
 - Touch events must not scroll the page.
 - The grid and nodes must be responsive and remain square and centered.

 Technical constraints:
 - Use vanilla JS, no libraries.
 - Use SVG for drawing lines (not canvas).
 - Lines must appear behind the nodes (z-index/SVG ordering).
 - Nodes must have visual states: default, active (filled), and error (red).

 I should write this out smoothly as a single paragraph or clean text. No bullet points? The user said "Output ONLY the problem description". Bullet points are formatting but usually acceptable in problem descriptions. However, to be safe and clean, I can write it as a cohesive text with clear sections, or just flowing paragraphs. Actually, many coding problems use bullet points for clarity. But the user said "no other formatting" - I should probably avoid markdown headers, bold, lists if possible? Or minimal formatting? "no greetings, numbering, or any other formatting" - this likely means no markdown like `###` or `1.`, but plain text with line breaks is fine. I'll use clean paragraphs and maybe simple dashes if needed. Actually, to be safest, I'll write it as a single cohesive description with line breaks between paragraphs but no special markdown syntax like headers or bold. Wait, the user said "no other formatting" which could mean no markdown. I'll just use plain text with line breaks for readability.

 Let me write it:

 Build a Pattern Lock Screen component using HTML, CSS, and vanilla JavaScript. Create a 3x3 grid of circular nodes arranged inside a square container that remains centered on the page. The nodes are indexed 1 through 9 from left to right, top to bottom. When a user presses down on a node with a mouse or finger, begin recording a pattern entry. As the user drags across the grid, if the pointer enters a node that has not yet been visited, add that node's index to the sequence and activate its visual state. Draw an SVG line connecting all visited nodes in order, and draw an additional trailing line from the last visited node to the current pointer position. If the user drags over an already visited node, ignore it and do not add it to the sequence again. The connecting lines must render beneath the nodes using an absolutely positioned SVG layer. When the user releases the pointer, stop recording and compare the captured sequence to the hardcoded correct pattern of 1, 2, 3, 6, 9. If the sequences match exactly, display the text Access Granted below the grid in green. If they do not match, display Access Denied in red, change the color of all active nodes and connecting lines to red for one second, then automatically clear the pattern. Include a Reset button that immediately clears any active pattern, removes all lines, and hides the result message. The component must support both mouse and touch events, prevent default touch scrolling during interaction, and be fully responsive so the grid scales down on smaller viewports while maintaining its square aspect ratio.

 Word count check: roughly 250 words. Good.
 Detail check: specific enough? Yes. Hardcoded pattern? Yes. SVG? Yes. Touch/mouse? Yes. Visual feedback? Yes. Reset? Yes.
 Difficulty: Mid-level. Requires event handling, coordinate math, SVG manipulation, state management.

 One thing: "pointer enters a node" - with mouse/touch, how to detect entering a node while dragging? Since browsers don't fire mouseenter while holding down mouse button (dragging), they need to use document-level mousemove and calculate collision detection between cursor position and node positions. That's a key algorithmic part. I should make sure this is implied. The problem says "if the pointer enters a node" which implies they need to detect that. Good.

 Also, "trailing line" requires updating SVG line's x2/y2 on every mousemove. Good.

 I think this is solid. I'll output exactly this text.