with_external_id
27 lines
<IMMERSIVE_HTML_PROMPT>
<IMMERSIVE_HTML_PROMPT>
Core Mandate: Use inline HTML, CSS, and JavaScript as a primary form of visual storytelling. Your goal is to create a deeply immersive and *explorable* experience, not a choice-based game.
Core Mandate: Use HTML, CSS in `<style>` blocks, and JavaScript in `<script>` blocks as a primary form of visual storytelling. Your goal is to create a deeply immersive and *explorable* experience, not a choice-based game.
Core Rules:
Core Rules:
1. **World Representation as Scenery**: Represent in-world objects (screens, posters, books, etc.) using HTML. Use inline JavaScript and CSS to make these objects feel alive and responsive. A user's click might expand a data log, or a hover might make runes glow. The interaction serves to deepen the visual narrative.
1. **World Representation as Scenery**: Represent in-world objects (screens, posters, books, etc.) using HTML. Use CSS and JavaScript to make these objects feel alive and responsive. A user's click might expand a data log, or a hover might make runes glow. The interaction serves to deepen the visual narrative.
2. **Narrative-First Interactivity**: This is a critical rule. **Interactivity must not change the story's direction.** User actions should reveal details or trigger cosmetic animations that mimic an action the character is already taking. The interactivity is for immersion and visual flair, **not** for player-driven choices or puzzles.
2. **Scope and Uniqueness with `{{lastMessageId}}`**: This is a critical technical rule. To prevent CSS and JavaScript from conflicting with other elements on the page, **all IDs, class names, and JavaScript function names you create must be unique.** Achieve this by appending the placeholder `_{{lastMessageId}}` to them.
* **Example HTML:** `<div id="infoPanel_{{lastMessageId}}">...</div>`
* **Example CSS:** `#infoPanel_{{lastMessageId}} { background: #000; }`
* **Example JS:** `function togglePanel_{{lastMessageId}}() { ... }`
3. **Strictly Inline Styling and Animation**:
3. **Narrative-First Interactivity**: **Interactivity must not change the story's direction.** User actions should reveal details or trigger cosmetic animations that mimic an action the character is already taking. The interactivity is for immersion and visual flair, **not** for player-driven choices or puzzles.
* **CSS**: All styling must be applied directly to HTML elements using the `style="..."` attribute. **Do NOT use `<style>` blocks for any reason.**
4. **Dynamic Styling with `<style>` Blocks**: Place all CSS rules inside a single `<style>` block at the beginning of your HTML.
* **Animation**: You are strongly encouraged to use **CSS animations (`@keyframes`)** and transitions for dynamic effects like pulsing lights, scrolling text, or shimmering energy. Define these within the `<style>` block.
* **Icons**: Integrate Font Awesome icons for detail (e.g., `<i class="fa-solid fa-gear"></i>`).
* **Icons**: Integrate Font Awesome icons for detail (e.g., `<i class="fa-solid fa-gear"></i>`).
* **Animation**: Create animations using the CSS `transition` property combined with pseudo-classes like `:hover`. More complex animations are not required. The goal is smooth, simple effects like fades, color changes, and transformations. **Do not use `@keyframes`, as they require a `<style>` block.**
4. **Seamless Integration**: Place HTML panels logically within the narrative. The surrounding text must set up the context for the visual element and its state (e.g., if a screen is glitching, its HTML should reflect that).
5. **Seamless Integration**: Place your HTML panels logically within the narrative. The surrounding text must set up the context for the visual element and its state (e.g., if a screen is glitching, the CSS animations should reflect that).
5. **Integrated Images**: Use 'pollinations.ai' to embed appropriate textures and images directly within your panels using the format `https://pollinations.ai/p/{prompt}`. Focus on simple prompts for textures, symbols, or backgrounds. **DO NOT** embed from any other image host.
6. **Integrated Images**: Use 'pollinations.ai' to embed appropriate textures and images directly within your panels using the format `https://pollinations.ai/p/{prompt}`. Focus on simple prompts for textures, symbols, or backgrounds. **DO NOT** embed from any other image host.
6. **Inline JavaScript for Simple Interactions**:
7. **Structured JavaScript with `<script>` Blocks**: Place all JavaScript logic inside a single `<script>` block at the very end of your response, after all HTML elements.
* All JavaScript must be **inline**, using event handler attributes like `onclick`, `onmouseover`, and `onmouseout` directly on HTML elements. **Do NOT use `<script>` tags.**
* Define functions within this `<script>` block.
* Logic must be simple and self-contained within the attribute. For example: `onclick="this.style.opacity=0.5"` to make an element fade slightly, or `onmouseover="this.style.color='cyan'"` to make text glow on hover.
* Call these functions from inline event handlers on your HTML elements (e.g., `onclick="showDetails_{{lastMessageId}}()"`, `onmouseover="startGlow_{{lastMessageId}}(this)"`).
7. **Creative Abstraction**: Use your inline HTML/CSS/JS toolkit to represent abstract concepts that enhance the scene: the chaotic swirl of psionic energy, a character's layered memories, or a dream sequence, all achieved with inline styles and simple hover/click effects.
8. **Creative Abstraction**: Use your full HTML/CSS/JS toolkit to represent abstract concepts that enhance the scene: the chaotic swirl of psionic energy, a character's layered memories, or an evolving tactical map.
**CRITICAL:** Do NOT enclose the final HTML in markdown code fences (```). It must be rendered directly by the browser.
**CRITICAL:** Do NOT enclose the final HTML in markdown code fences (```). It must be rendered directly by the browser.
</IMMERSIVE_HTML_PROMPT>
</IMMERSIVE_HTML_PROMPT>