Got it, let's create a Tetris game in a single index.html file. First, I need to structure everything: HTML canvas, CSS for styling, JavaScript for the game logic. Let's start by outlining the main components.

First, the HTML will have two canvases: one for the main game board, one for the next piece preview. Then the style tag to style the page, center everything, make it look nice. Then the JavaScript to handle all the game logic: tetromino shapes, colors, spawning, rotation, collision detection, line clearing, scoring, increasing speed, input handling.

Wait, the tetrominoes are the seven standard ones: I, O, T, L, J, S, Z. Each needs their shape matrix and color. Let's list those correctly. The game board is 10 columns wide, 20 rows tall, standard Tetris size. The next piece preview is a small canvas, like 4x4 to fit any piece.

Input handling: arrow keys to move left/right, up to rotate, down to soft drop, space to hard drop? Or just arrow keys, that's standard. Also, need to handle the game loop that updates the piece falling every certain interval, which decreases as the level increases to make it faster.

Collision detection: check if moving or rotating the piece would go out of bounds or overlap with existing blocks on the board. Rotation needs wall kicks? Maybe simple rotation for now, just check if the rotated position is valid, if not, don't rotate, or try to shift if possible? Wait, keep it simple but functional.

Line clears: when a row is full, clear it, add to the score, shift all rows above down. Scoring system: 100 points per line, 300 for two, 500 for three, 800 for four (Tetris), multiply by level, that's standard. Level increases every 10 lines, speed increases each level.

Next piece preview: generate the next piece beforehand, draw it on the small canvas, then when the current piece is placed, spawn the next one and generate a new next.

Let's structure the code step by step. First the HTML: create a container that holds the game canvas and the side panel with the preview, score, level. Then CSS to style that, make it look clean, dark background, colorful blocks.

Wait, the canvas for the main game: each block is 30px, so 10*30=300px wide, 20*30=600px tall. The preview canvas is 120x120, 4*30, that fits any piece.

In JavaScript, first get the canvas contexts. Then define the tetrominoes:

const TETROMINOS = {
  I: { shape: [[1,1,1,1]], color: '#00f0f0' },
  O: { shape: [[1,1],[1,1]], color: '#f0f000' },
  T: { shape: [[0,1,0],[1,1,1]], color: '#a000f0' },
  L: { shape: [[0,0,1],[1,1,1]], color: '#0000f0' },
  J: { shape: [[1,0,0],[1,1,1]], color: '#0000a0' },
  S: { shape: [[0,1,1],[1,1,0]], color: '#00f000' },
  Z: { shape: [[1,1,0],[0,1,1]], color: '#f00000' },
};

Then create the board array, which is a 2D array of 20 rows, 10 columns, filled with 0 or the color of the block. The current piece: position (x,y), shape, color. Next piece same.

Game state: score, level, lines, game over. The game loop uses setInterval, but we can adjust the interval time as level increases, like starting at 1000ms, decreasing by 100ms each level until it's 100ms, that's a good speed curve.

Collision function: takes the piece, offset x and y, checks every cell in the piece's shape, if it's filled, check if the board position is out of bounds or already filled. If any collision returns true, else false.

Rotate function: transpose the matrix, reverse each row to rotate clockwise, that's the standard way to rotate a matrix. Then check if the rotated position is valid, if yes apply it.

When a piece can't fall further, lock it into the board, check for full lines, clear them, update score, then spawn a new current piece from the next piece, generate a new next. If spawning the new piece collides immediately, game over.

Input event listeners: keydown event, handle arrow left, right, down, up. Left: move x-1 if no collision. Right: x+1. Down: y+1, add 1 point for soft drop. Up: rotate.

Draw function: every frame, clear the main canvas, draw the board's existing blocks, draw the current piece, draw the preview canvas with the next piece, update the score and level displays.

Wait, let's put all this together into one index.html file. Let's write the code, make sure everything is self-contained, no external resources. Let's test that all features are there: all seven tetrominoes, rotation, line clears, increasing speed, next preview, score. That's all the user asked for.

Let me write the full index.html now. Start with <!DOCTYPE html>, html, head with style, body with the container, canvases, score displays, then script tag with all the JS.

The Tetris game is fully written into index.html. Let me just verify all requirements are met:
1. All seven tetrominoes included (I, O, T, L, J, S, Z) ✔️
2. Rotation functionality ✔️
3. Line clears with standard scoring ✔️
4. Increasing speed as level increases (every 10 lines, speed increases) ✔️
5. Next piece preview canvas ✔️
6. Score, lines, level tracking displayed ✔️
7. All code is self-contained in one HTML file, no external resources ✔️
8. Game over and restart functionality ✔️
9. Standard controls for movement/rotation ✔️

The game is ready to play. I can confirm the file is present in the correct directory.