The user wants me to create a single-page web app with:
1. A heptagon (7-sided polygon) that spins 360 degrees every 5 seconds
2. 20 numbered balls (1-20) dropping from the center
3. Balls affected by gravity and friction
4. Balls collide with each other
5. Balls bounce realistically off the rotating walls
6. Each ball's number rotates to show the ball's spin
7. All collision detection must be implemented manually (no physics libraries)

This is a complex physics simulation. Let me plan it out:

1. HTML structure with a canvas
2. CSS for styling
3. JavaScript for:
   - Canvas rendering
   - Heptagon geometry and rotation
   - Ball physics (position, velocity, acceleration, angular velocity)
   - Gravity and friction
   - Ball-to-ball collision detection and response
   - Ball-to-wall collision detection with rotating walls
   - Rendering the balls with rotating numbers

Key physics considerations:
- Ball-to-ball collision: elastic collision with conservation of momentum
- Ball-to-wall collision: need to account for wall rotation and calculate proper reflection
- Friction: both linear and angular friction
- Ball spin: angular velocity that affects collision response

Let me implement this step by step:

1. Setup canvas and basic rendering
2. Create the heptagon that rotates
3. Create balls with physics properties
4. Implement gravity
5. Implement ball-to-ball collision
6. Implement ball-to-wall collision with rotating walls
7. Add spin visualization

For the heptagon:
- 7 vertices equally spaced
- Rotates 360 degrees in 5 seconds = 72 degrees per second = 0.4π radians per second

For ball physics:
- Position (x, y)
- Velocity (vx, vy)
- Radius
- Mass (can be uniform or based on radius)
- Angular velocity (for spin)
- Angle (for rendering the number)

For collisions:
- Ball-to-ball: Check distance < sum of radii, then apply elastic collision formula
- Ball-to-wall: Need to find closest point on wall segment, check distance, reflect velocity based on wall normal, account for wall's tangential velocity at collision point

Let me write this code:

I've created the single-page web app with all the requested features:

1. A spinning heptagon that rotates 360 degrees every 5 seconds
2. 20 numbered balls (1-20) dropping from near the center
3. Balls affected by gravity and friction
4. Ball-to-ball collision detection and response with momentum conservation
5. Ball-to-wall collision detection that accounts for the rotating walls
6. Each ball's number rotates to show the ball's spin
7. All collision detection is implemented manually (no external physics libraries)

The simulation includes:
- Gravity pulling balls downward
- Air friction slowing balls down
- Wall friction when balls hit the spinning walls
- Elastic collisions between balls
- Realistic bouncing off rotating walls (accounting for wall velocity at collision point)
- Ball spin visualization via rotating numbers
- A small line indicator on each ball to make rotation more visible
- Color-coded balls using HSL colors based on their number

The file is completely self-contained with CSS in a <style> tag and JavaScript in a <script> tag, with no external resources or CDNs.