The objective is to create a single-page web app (`index.html`) with a physics simulation:
    *   20 numbered balls (1-20) dropping from the center.
    *   A spinning heptagon (7-sided polygon) container.
    *   Rotation: 360 degrees every 5 seconds.
    *   Physics: Gravity, friction, ball-ball collisions, ball-wall collisions.
    *   Visuals: Balls show their numbers, numbers rotate according to the ball's spin.
    *   Constraint: No external resources, everything in one file.

    *   *Canvas API*: Best for 2D physics simulations.
    *   *Physics Engine*: Since I must "implement all collision detection yourself", I'll build a simple rigid body physics engine.
    *   *Rotation*: Heptagon vertices calculated using trigonometry, updated every frame.

    *   `Ball` class:
        *   Position $(x, y)$, Velocity $(vx, vy)$, Angular Velocity $(\omega)$, Angle $(\theta)$.
        *   Radius, Mass (all equal for simplicity), Friction, Restitution (bounciness).
        *   Update method: Apply gravity, update position based on velocity.
    *   `Heptagon` class:
        *   Center, Radius, Rotation angle, Rotation speed.
        *   Vertices calculation.

    *   *Ball-Ball Collision*:
        *   Check distance between centers. If $dist < r1 + r2$, they collide.
        *   Resolve collision using impulse-based resolution.
        *   Handle overlapping by pushing balls apart along the collision normal.
        *   Add basic friction to affect rotation.

    *   *Ball-Wall Collision*:
        *   The heptagon consists of 7 line segments.
        *   For each ball and each segment:
            *   Find the closest point on the segment to the ball center.
            *   If distance $< radius$, they collide.
            *   The collision normal is the vector from the closest point to the center.
            *   The relative velocity includes the wall's velocity at the point of impact (since the wall is rotating).
            *   Apply impulse based on normal and friction.

    *   Gravity: Constant downward acceleration.
    *   Friction (Air): Small damping on velocity.
    *   Friction (Wall/Ball): Tangential impulse that affects angular velocity $\omega$.

    *   Setup canvas to fill the screen.
    *   `requestAnimationFrame` loop.
    *   Draw heptagon.
    *   Draw balls with text centered and rotated.

    *   *Collision Response Formulae*:
        *   Normal vector $\mathbf{n}$.
        *   Relative velocity $\mathbf{v}_{rel} = \mathbf{v}_1 - \mathbf{v}_2$.
        *   Impulse $j = \frac{-(1+e)(\mathbf{v}_{rel} \cdot \mathbf{n})}{\frac{1}{m_1} + \frac{1}{m_2}}$.
        *   Apply impulse to velocities.
    *   *Wall Velocity*: A point on a rotating body has velocity $\mathbf{v} = \mathbf{\omega} \times \mathbf{r}$, where $\mathbf{r}$ is the vector from rotation center to the point. In 2D, for a point $(px, py)$ relative to center $(cx, cy)$, $v_x = -\omega \cdot (py - cy)$ and $v_y = \omega \cdot (px - cx)$.
    *   *Spin (Angular Velocity)*:
        *   When a ball hits a surface, the friction force creates a torque.
        *   $\Delta \omega = \frac{r \times \text{Impulse}_{friction}}{I}$, where $I = \frac{2}{5}mr^2$ for a solid sphere.

    *   Single file `index.html`.
    *   Internal CSS for layout.
    *   JS for simulation.

    *   *Heptagon rotation*: 360 deg / 5s = $2\pi / 5$ rad/s.
    *   *Ball generation*: Start them slightly offset from the center to avoid perfect stacking/overlapping at frame 0.

Let's write the code.

The user wants to see the resulting file. I have already written it. I should confirm if there are any further requirements. The prompt asks to "Build a single-page web app... write it ALL into one self-contained file named index.html". I have done this.

Wait, I should check if the rotation speed is correct.
`ROTATION_SPEED = (2 * Math.PI) / (5 * 60);`
Wait, if the loop runs at 60fps, then `(2 * Math.PI) / (5 * 60)` per frame means $5 \times 60$ frames per full rotation, which is 5 seconds. That's correct.

One detail: "show each ball's spin via the rotation of its number".
In my `Ball.draw()` method:
```javascript
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
// ... draw ball and number ...
ctx.restore();
```
This correctly rotates the number relative to the center of the ball.

I'll double check the friction and bounce constants.
`GRAVITY = 0.25`
`FRICTION_AIR = 0.995`
`WALL_BOUNCE = 0.7`
`BALL_BOUNCE = 0.8`
`FRICTION_SURFACE = 0.1`
These seem reasonable for a visually appealing simulation.

The ball initialization:
```javascript
for (let i = 1; i <= NUM_BALLS; i++) {
    balls.push(new Ball(i, width / 2 + (Math.random() - 0.5) * 20, height / 2 + (Math.random() - 0.5) * 20));
}
```
Starting them in a tight cluster at the center ensures they "drop" and spread out as the heptagon spins.

I am confident in the implementation.