We are building a single-page web app in one file: index.html.
 The app will have:
   - A full-screen canvas for the fluid simulation.
   - When the user drags the mouse, it should push the fluid and add colored dye.
   - We'll use a WebGL-based fluid simulation for performance.

 Approach:
   We can use an existing WebGL fluid simulation library that is self-contained and can be included inline.
   However, the requirement is to have everything in one file and no external resources.

   There is a known compact fluid simulation by Pavel Dobryakov: 
     https://github.com/PavelDoGreat/WebGL-Fluid-Simulation

   We can use the minified version of that, but we must inline it. However, the minified version is over 1MB, which is too big?

   Alternatively, we can use a simpler simulation. Since the user wants a full-screen interactive simulation, we need something efficient.

   We'll use a simplified version of the WebGL fluid simulation. The entire simulation code is available as a single HTML file in the examples of the above project.

   Let's take the example from: 
     https://github.com/PavelDoGreat/WebGL-Fluid-Simulation/blob/master/index.html

   We can use that as a starting point and make it self-contained in our index.html.

   Steps for our index.html:
     1. We'll create an HTML5 document with a canvas that covers the entire viewport.
     2. We'll include the necessary shaders inside <script> tags of type x-shader/x-vertex and x-shader/x-fragment.
     3. We'll write the JavaScript code for the simulation, including the WebGL context setup, shader compilation, and simulation update.

   However, the original example uses external images and the minified bundle. We must remove any external dependencies.

   Instead, we can use the non-minified source from the same repository? But we are constrained to one file.

   Alternatively, we can use the minified bundle and inline it? But then we have to remove the external image.

   Looking at the example, it uses an image for the background and for splashes. We can remove the background and make the fluid colorful.

   The user wants colored dye. The example already supports multiple colors.

   We can remove the background image and set a solid color background? Then we remove the image loading.

   Actually, the example already works without the background image. It just draws the fluid.

   So, we can take the index.html from the above repository and remove the part that loads the background image.

   How to get the code? We can fetch the minified version? But we are not allowed to use network. So we must rely on tools.

   Since I can't fetch from the web, I will write the code from memory? But that's error prone.

   Alternatively, we have the tool `bash` and `read`? But we are in a sandbox without network.

   We are in a sandboxed environment without network access. So we must write the simulation from scratch? Or use a simpler one.

   Let's reconsider: the user might not require the exact same simulation. We can do a simplified version.

   Another idea: use a canvas 2D fluid simulation, but that might be not as performant as WebGL for real-time.

   Since the problem requires a full-screen simulation, we should use WebGL for performance.

   Plan: 
     We'll write a WebGL fluid simulation based on the Navier-Stokes equations and the algorithm from Jos Stam.

   However, this is complex. There's a tutorial by Martin Laxre: 
        https://marcelbruckner.github.io/tutorial/Real-time-Fluid-Simulation/

   We can adapt that? But we have one file.

   Alternatively, we can use the following approach:

     We will create a grid (e.g., 128x128) and simulate the fluid with a velocity field and a dye density field.

     Steps for the simulation:
        1. Advection: moving the dye and velocity by the velocity field.
        2. Diffusing the velocity (viscosity) and dye.
        3. Projection: to maintain incompressibility.
        4. Adding forces from mouse movement.

     We can do it on the GPU with WebGL fragment shaders? 

   We'll write the simulation using WebGL and three fragment shaders (for advection, diffusion, projection, etc.) as per standard approach.

   Given the complexity, I will use the approach from the WebGL-Fluid-Simulation and simplify it to be included in one file without dependencies.

   However, the WebGL-Fluid-Simulation index.html is self-contained? Actually, the minified version is in one script tag.

   The minified code is available at:
        https://raw.githubusercontent.com/PavelDoGreat/WebGL-Fluid-Simulation/master/dist.min.js

   But we can't access it. So we have to write it ourselves? 

   Since we are an assistant and we have the code for the WebGL-Fluid-Simulation in our knowledge? No, we don't.

   We'll have to generate a simpler fluid simulation.

   Alternatively, we can use the "mini" version that is about 30KB? But without network we can't.

   I found a compact fluid simulation in a single file from the project "WebGL-Fluid-Simulation" but the index.html is 3MB? We don't want that.

   After reconsideration, we can do:

   We write a fragment shader that draws the fluid effect and use mouse position to add forces.

   But we need to compute the fluid dynamics. We need multiple passes.

   We'll create two framebuffers to swap between for the fluid state.

   We'll have the following shaders:
     - Advection
     - Diffusion (using Jacobi iteration)
     - Adding forces
     - Projection (divergence, pressure solve, gradient)

   This is complex, but we can copy from known examples and adapt to be self-contained.

   We are going to create an index.html with:
     - A canvas that covers the entire window.
     - WebGL context setup.
     - Fullscreen support.
     - Shader sources as strings.
     - Mouse interaction.

   Steps:

   1. HTML structure: body with canvas and a loading message? Then remove the message.

   2. Initialize WebGL and framebuffers.

   3. Compile shaders and create programs.

   4. Set initial uniform values.

   5. Render loop: update the fluid simulation with multiple passes and then draw to screen.

   6. Mouse events: on mousemove and mousedown, record the position and add force.

   We'll simplify the simulation: use the approach from "WebGL-Fluid-Simulation" but without the extra textures for background. 

   We'll have:
     - Two textures for velocity (double buffering)
     - Two textures for density (double buffering)
     - One texture for pressure (and two for swapping in the pressure solve)

   However, the complete code is long.

   Due to the complexity, I will write a minimal version based on the tutorial: 
        https://github.com/mharrys/fluids-2d

   But that is also multiple files. We can combine into one.

   Given the time, I'll write a simpler one that only simulates the dye (density) without velocity? No, we need velocity for the swirl.

   Alternatively, we can simulate the velocity in a single pass? 

   Decision: We'll use the WebGL-Fluid-Simulation approach but without the unnecessary parts. We'll remove the background image and replace with a fixed background.

   We'll write the shaders as multiline strings in JavaScript.

   We'll follow the structure:

   <!DOCTYPE html>
   <html>
   <head>
     <style>
       body { margin: 0; }
       canvas { display: block; }
     </style>
   </head>
   <body>
   <canvas id="canvas"></canvas>

   <script>
     // WebGL context initialization
     const canvas = document.getElementById('canvas');
     const gl = canvas.getContext('webgl');
     if (!gl) { ... }

     // Shader functions and setup

     // Simulation variables: resolution, timestep, etc.

     // Create framebuffers and textures for velocity, density, pressure.

     // Shader programs: clear, advection, diffusion, ... 

     // Initialize simulation

     // Mouse interaction

     // Render loop

   </script>
   </body>
   </html>

   The complete simulation code is lengthy. We must be cautious to not exceed token limits.

   We can use the minified version of the simulation if we have it? But we don't have network.

   Instead, we will write a simplified version. I will provide a reduced code for the simulation.

   Steps:

   We are inspired by the example: 
        https://github.com/PavelDoGreat/WebGL-Fluid-Simulation/blob/master/index.html

   We'll remove the GUI and the background image, and only keep the core simulation.

   We don't need the minify step, so we can use the unminified code? But we don't have it.

   I will reconstruct the core algorithm.

   Here is the plan:

     We create a class for the fluid simulation.

     It will have:
       - constructor: sets up WebGL, framebuffers, shaders.
       - update: steps the simulation.

     The simulation steps for one frame:
       1. Advect velocity and density.
       2. Diffuse velocity (viscosity) and density (diffusion).
       3. Project (divergence and pressure solve) for velocity to enforce incompressibility.
       4. Add forces (from mouse).

   We'll break down the shaders: each step is a fragment shader that we run on a fullscreen quad.

   We'll use a vertex shader that draws a quad (2 triangles).

   Given the time, we'll write as much as we can.

   IMPORTANT: This will be a substantial amount of code. Let's proceed step by step.

   We'll write the vertex shader and fragment shaders as strings.

   We'll create a function to compile shaders.

   We'll create multiple programs for each step.

   We'll use two pairs of textures for velocity and density (double buffer) and one for pressure (with double buffer for the pressure solve).

   Given the complexity and the fact that the entire code for the simulation can be very long (over 500 lines), we must be cautious.

   We decide to proceed and write the code.

   However, due to the length, we may have to leave out some details? But we must be complete.

   Alternatively, we can use a more simplistic particle system? The user wants a fluid simulation.

   We decide to write a less accurate but visually pleasing version that uses a single advection step for the dye and curl for velocity.

   We found a simpler example:

        https://observablehq.com/@tmcw/fluids-webgl

   This example is in one file. We can adapt it.

   The code from the above link is:

   ```javascript
   import regl from "regl";
   import glsl from "glslify";

   // ... but we can't use external libraries.

   So we write a pure WebGL version.

   We'll take the shaders from that example and adapt them.

   Since we are not using regl, we write raw WebGL.

   Due to the complexity and the fact that we are in a single file, we will have to write a lot of boilerplate.

   Let's start.

   Structure of index.html:

We are creating a self-contained index.html file for the real-time fluid simulation.
 The simulation will use WebGL for high-performance fluid dynamics and rendering.
 The key components:
   - A full-screen canvas for WebGL rendering.
   - JavaScript WebGL code for fluid simulation based on the Navier-Stokes equations.
   - Mouse interaction to add force and dye to the fluid.

 We will implement a classic fluid simulation with:
   - Velocity and density (dye) fields.
   - Advection, diffusion (using dissipation), and pressure projection.
   - Multiple passes: advection, divergence, pressure solve, subtract gradient.

 We use two resolutions: one for simulation (velocity, pressure) and one for dye (which can be higher for visual quality).

 Steps in the render loop:
   1. Advect velocity and dye using the current velocity field.
   2. Apply forces (from mouse) to the velocity and add dye.
   3. Compute divergence of the velocity field.
   4. Solve for pressure using Jacobi iterations.
   5. Subtract the pressure gradient from the velocity to make it divergence-free.
   6. Render the dye to the screen, with optional visual effects (like curl for vortex visualization).

 We'll use a floating-point texture for velocity and pressure to maintain precision.

 The code will be structured with:
   - Shaders for each step (written as strings).
   - Framebuffers and textures for multiple render targets.
   - A full-screen quad for rendering.

 Since we are writing everything in one file, we put the CSS in a <style> tag and JavaScript in a <script> tag.

 Let's write the index.html accordingly.

 Note: The simulation parameters are configurable at the top of the script.

 Important: We use a low simulation resolution (256x256) for performance, but a higher dye resolution (512x512) for visual quality.

 We'll use the following textures and framebuffers:
   - velocity: two (for ping-pong)
   - dye: two (for ping-pong)
   - pressure: two (for ping-pong in the pressure solver)
   - divergence: one

 Steps in the render loop in detail:

   1. Start with current state in velocity0 and dye0.
   2. If there's a mouse force, splat it to velocity and dye (writing to velocity1 and dye1). Then swap so that velocity1 becomes velocity0, etc.
   3. Advect velocity: read from velocity0, advect using itself, write to velocity1.
   4. Advect dye: read from dye0, advect using velocity (from velocity1), write to dye1.
   5. Compute divergence from velocity1.
   6. Solve pressure: for several iterations, compute pressure from divergence and the previous pressure.
   7. Subtract the pressure gradient from the velocity (using pressure and velocity1) to get a divergence-free velocity, write to velocity0 (so it becomes the new velocity for the next frame).
   8. Swap dye buffers so that dye1 becomes the current dye for display.
   9. Render the dye: use the dye texture, and possibly enhance with curl (vorticity) for visual appeal.

 We'll include mouse interaction to add force and dye, and also reset functionality.

 Let's write the index.html now.