Okay, the user wants a single-page Tetris game in HTML with all the features mentioned. Let me break down what needs to be done.

First, I need to create an HTML file that includes everything inline: CSS, JavaScript, and the canvas element. Since it's a single file, I can't use external resources, so all styles and scripts must be embedded.

Starting with the structure. The HTML will have a canvas for rendering the game, a div for the next piece preview, and maybe a score display. The CSS should style the canvas and layout the elements. The JavaScript will handle the game logic.

For the tetrominoes, there are seven types. Each should have shapes and colors. I'll represent them as arrays of coordinates relative to their origin. Rotation will require rotating these coordinates, probably using matrix math or a rotation function.

The game loop needs to handle movement, rotation, line clearing, and speed increases. The canvas will need to be cleared and redrawn each frame. Collision detection is crucial to prevent pieces from going out of bounds or overlapping existing blocks.

Line clearing involves checking rows that are completely filled and removing them, then shifting the above rows down. Scoring should increase based on the number of lines cleared at once.

The next-piece preview can be a separate canvas or a section where the upcoming tetromino is displayed. The game should randomly select pieces from a pool, ensuring all seven are used over time.

I need to manage the game state: current piece, grid, score, level, and speed. The speed increases as the player clears lines, which affects how often the piece falls.

Testing the code in the browser is important. I'll have to make sure all elements are correctly positioned, the game runs smoothly, and all features work as expected. Also, handling keyboard input for movement and rotation.

Putting it all together, the HTML file will include the necessary scripts and styles. I'll write the JavaScript functions for creating pieces, drawing them, handling user input, updating the game state, and rendering the canvas. The CSS will ensure the layout is responsive and the game is visually appealing.

Wait, the user specified no external resources, so I need to make sure all code is self-contained. No images or fonts, just pure HTML, CSS, and JS. Also, the game should be playable immediately without any setup.

Let me outline the steps again:

1. Create the HTML structure with canvas and preview area.
2. Write CSS for styling the canvas and layout.
3. Define the tetromino shapes and colors.
4. Implement the game loop with requestAnimationFrame.
5. Handle user input for movement and rotation.
6. Implement collision detection.
7. Add line clearing and scoring.
8. Manage the next piece and piece queue.
9. Increase speed based on score/lines cleared.
10. Ensure the game resets when the player loses.

Now, translating this into code. The JavaScript will need variables for the grid, current piece, next piece, score, etc. The draw function will clear the canvas and render the grid and current piece. The update function will move the piece down, check for collisions, and handle line clears.

For rotation, each tetromino has a rotation state. Rotating changes the shape, and I need to check if the new position is valid. If not, maybe adjust the position or prevent rotation.

Testing edge cases, like when the game is over, and the player can restart. Also, ensuring the preview updates correctly when a new piece is selected.

Once all parts are implemented, I'll write the complete code into the index.html file, making sure it's all self-contained and works as expected.

Okay, the user wanted a playable Tetris game in a single HTML file. I created the index.html with all the necessary code embedded. Let me check if everything is covered.

The HTML includes a canvas for the game, a next piece preview canvas, and a score display. The CSS styles the elements and sets up the layout. The JavaScript handles the game logic: tetromino shapes, rotation, movement, line clearing, scoring, and increasing speed. 

I defined the TETROMINOS object with all seven pieces. The game loop uses requestAnimationFrame for smooth animation. Collision detection ensures pieces don't go out of bounds. Line clearing checks for full rows and shifts the grid accordingly. The score and level increase as lines are cleared, affecting the drop interval for the pieces.

I also added event listeners for keyboard input to control the pieces. The next piece is randomly selected and displayed in the preview canvas. The game resets when the player loses by merging a piece that can't move down.

Testing this code in a browser should allow the user to play Tetris with all the requested features. Since everything is self-contained, there are no external dependencies. The code should work as expected without any additional setup.