Save time building landing pages and articles. Ask AI to output html, css, and javascript according to your specifications.

AI Website Builder. Powered by a state-of-the-art AI models.

AI Website Wizard

Advanced

Improve Claude's intelligence score from 49 to 57

Enable Claude extended thinking

Set a limit on the number of tokens Claude can use for extended thinking. Claude is unlikely to use more than 30,000 even if you set this higher.

Claude thinking budget (in tokens)

AI model

i47 💰:1.8

i58 💰:4.5

🏆 i67 💰:62.5

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:37.5

i58 💰:62.5

i57 💰:5.4

i57 💰:37.5

i56 💰:45.0

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Generate privately

Your website request

Tip: Switch to high for best results. It will use more tokens thinking.

Reasoning effort

Simple questions

Intelligence: +2

Intelligence: +3

Upload a screenshot of a website you like. The AI will try to match the style.

Reference website image

System Message

Website Wizard

Generated Websites

Question Answerer

AI Researcher

Essay Writer

AI Chat

Writing Improver

Redraw Image

Paraphraser

Photo Analyzer

Fill in the Blanker

Image Trace

AI Image Generator

Grammar Checker

AI Tutor

AI Docs

AI Boards

Text Summarizer

Extract Text from Image

Inpaint

Chat PDF

Image to Prompt

Test Generator

Fix Hands

PDF to Text

Lesson Generator

Language Translator

Code Improver

Blog Post Writer

Email Writer

AI Game Generator

Magic Prompt

Remove Background

Image to Video

Change Photo Background

Upscale

Logo Art Generator

Photo Translator

Photo Object Remover

Cover Letter Writer

Function Writer

Code Generator

Selfie Refiner

Extract From Page

HTML to Image

Outcrop Image

Icon Maker

Code Translator

Product Requirements Document Writer

URL to Screenshots

Prompt Interpolator

Design to Code

Speech to Text

Infinite Zoom

Social Media Post Writer

Essay Grader

AI Actors

Video to MP3

Remove Video Background

CSV Analyzer

Plant Doctor

Video to Video

Portrait Maker

Website Improvement Suggester

LinkedIn Headshot Maker

AI Meeting Note Taker

AI Video Generator

AI Assistant

Browser Agent

Text to Music

Text to Speech

Google Ad Creator

AI Product Photo Generator

Google Ad Improver

Stock Image Search

Video Ad Maker

Video Ad Script Writer

Ad Headline Writer

HTML5 Display Ad Maker

Differentiated Offer Generator

Content Calendar Generator

Bulk Social Media Producer

Display Ad Improver

Syllable Counter

PDF to JPG

Here's a complete web app as a single HTML file containing a Flappy Bird clone game with the requested features, using Tailwind for styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy Bird Clone</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-blue-200 flex items-center justify-center h-screen">
    <div class="relative w-[300px] h-[300px] bg-blue-400 overflow-hidden">
        <div id="welcome" class="absolute inset-0 bg-blue-500 flex flex-col items-center justify-center">
            <h1 class="text-2xl font-bold text-white mb-4">Flappy Bird Clone</h1>
            <button id="startBtn" class="bg-yellow-400 text-blue-800 px-4 py-2 rounded-full font-bold">Start Game</button>
        </div>
        <div id="gameOver" class="absolute inset-0 bg-blue-500 bg-opacity-80 flex flex-col items-center justify-center hidden">
            <h2 class="text-2xl font-bold text-white mb-4">Game Over</h2>
            <button id="retryBtn" class="bg-yellow-400 text-blue-800 px-4 py-2 rounded-full font-bold">Retry</button>
        </div>
        <div id="bird" class="absolute w-8 h-8 bg-yellow-400 rounded-full"></div>
        <div id="score" class="absolute top-2 right-2 text-white font-bold">0</div>
        <div id="hits" class="absolute top-2 left-2 text-white font-bold">❤️❤️❤️</div>
    </div>

    <script>
        const bird = document.getElementById('bird');
        const gameArea = bird.parentElement;
        const welcome = document.getElementById('welcome');
        const gameOver = document.getElementById('gameOver');
        const startBtn = document.getElementById('startBtn');
        const retryBtn = document.getElementById('retryBtn');
        const scoreDisplay = document.getElementById('score');
        const hitsDisplay = document.getElementById('hits');

        let birdY = 150;
        let velocity = 0;
        let gravity = 0.5;
        let score = 0;
        let hits = 3;
        let gameLoop;
        let obstacles = [];

        function updateBird() {
            velocity += gravity;
            birdY += velocity;
            if (birdY > 268) birdY = 268;
            if (birdY < 0) birdY = 0;
            bird.style.top = `${birdY}px`;
        }

        function createObstacle() {
            const gap = 100;
            const topHeight = Math.random() * (200 - gap);
            const topObstacle = document.createElement('div');
            const bottomObstacle = document.createElement('div');

            topObstacle.className = 'absolute w-12 bg-green-600 right-0';
            bottomObstacle.className = 'absolute w-12 bg-green-600 right-0';

            topObstacle.style.height = `${topHeight}px`;
            bottomObstacle.style.height = `${300 - topHeight - gap}px`;
            bottomObstacle.style.top = `${topHeight + gap}px`;

            gameArea.appendChild(topObstacle);
            gameArea.appendChild(bottomObstacle);

            obstacles.push({ top: topObstacle, bottom: bottomObstacle, passed: false });
        }

        function moveObstacles() {
            obstacles.forEach((obstacle, index) => {
                const currentLeft = parseInt(obstacle.top.style.left || 300);
                const newLeft = currentLeft - 2;
                obstacle.top.style.left = `${newLeft}px`;
                obstacle.bottom.style.left = `${newLeft}px`;

                if (newLeft <= -48) {
                    gameArea.removeChild(obstacle.top);
                    gameArea.removeChild(obstacle.bottom);
                    obstacles.splice(index, 1);
                }

                if (!obstacle.passed && newLeft < 32) {
                    obstacle.passed = true;
                    score++;
                    scoreDisplay.textContent = score;
                }

                if (checkCollision(obstacle)) {
                    hits--;
                    hitsDisplay.textContent = '❤️'.repeat(hits);
                    if (hits === 0) endGame();
                }
            });
        }

        function checkCollision(obstacle) {
            const birdRect = bird.getBoundingClientRect();
            const topRect = obstacle.top.getBoundingClientRect();
            const bottomRect = obstacle.bottom.getBoundingClientRect();

            return (
                birdRect.right > topRect.left &&
                birdRect.left < topRect.right &&
                (birdRect.top < topRect.bottom || birdRect.bottom > bottomRect.top)
            );
        }

        function gameUpdate() {
            updateBird();
            moveObstacles();
            if (obstacles.length === 0 || obstacles[obstacles.length - 1].top.offsetLeft <= 150) {
                createObstacle();
            }
        }

        function startGame() {
            welcome.classList.add('hidden');
            birdY = 150;
            velocity = 0;
            score = 0;
            hits = 3;
            obstacles.forEach(obstacle => {
                gameArea.removeChild(obstacle.top);
                gameArea.removeChild(obstacle.bottom);
            });
            obstacles = [];
            scoreDisplay.textContent = '0';
            hitsDisplay.textContent = '❤️❤️❤️';
            gameLoop = setInterval(gameUpdate, 20);
        }

        function endGame() {
            clearInterval(gameLoop);
            gameOver.classList.remove('hidden');
        }

        startBtn.addEventListener('click', startGame);
        retryBtn.addEventListener('click', () => {
            gameOver.classList.add('hidden');
            startGame();
        });

        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space') {
                velocity = -8;
            }
        });

        document.addEventListener('keyup', (e) => {
            if (e.code === 'Space') {
                velocity = -4;
            }
        });
    </script>
</body>
</html>

Write_me_a_fully_complete_web_app_as_a_single_HTML_file_The_app_should_contain_a_simple_side_scrolling_300px_by_300px_flappy_bird_game_clone_where_I_press_and_hold_space_key_to_have_a_bird_fly_higher_and_avoid_obstacles_as_they_scroll_in_from_right_to_left_We_should_have_a_counter_in_the_top_right_to_keep_track_of_points_The_bird_can_take_3_hits_before_the_game_is_over_and_you_can_try_again_The_game_should_have_a_welcome_screen_with_a_start_button_After_the_game_ends__there_should_be_a_retry_button_You_should_make_the_website_very_aesthetic_and_use_Tailwind.html

This HTML file contains a complete Flappy Bird clone game with the following features:

1. A 300x300 pixel game area
2. A bird that flies higher when the space key is pressed and held
3. Obstacles that scroll from right to left
4. A score counter in the top-right corner
5. A health system where the bird can take 3 hits before the game ends
6. A welcome screen with a start button
7. A game over screen with a retry button
8. Aesthetic styling using Tailwind CSS

To play the game:

1. Open the HTML file in a web browser
2. Click the "Start Game" button on the welcome screen
3. Press and hold the space key to make the bird fly higher
4. Avoid obstacles as they scroll from right to left
5. The game ends when the bird's health reaches zero
6. Click the "Retry" button to play again

The game uses Tailwind CSS for styling, which is loaded from a CDN. The entire game logic is contained within the `<script>` tag at the end of the file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delicious Pizza - Your Favorite Pizza Restaurant</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Arial, sans-serif';
            background-color: #f8f8f8;
            color: #333;
        }
        header {
            background-color: #d32f2f;
            color: white;
            padding: 15px;
            text-align: center;
        }
        nav {
            display: flex;
            justify-content: space-around;
            padding: 15px;
            background-color: #444;
        }
        nav a {
            color: white;
            text-decoration: none;
            padding: 10px 20px;
        }
        nav a:hover {
            background-color: #d32f2f;
            border-radius: 4px;
        }
        .hero {
            background: url('https://example.com/hero-image.jpg') no-repeat center center/cover;
            height: 400px;
            color: white;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .hero h1 {
            font-size: 3rem;
            margin: 0;
        }
        .content-section {
            padding: 20px;
            text-align: center;
        }
        .menu {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .menu h2 {
            margin-top: 0;
        }
        .menu-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 5px;
            border-bottom: 1px solid #ddd;
        }
        .menu-item:last-child {
            border-bottom: none;
        }
        .menu-item span {
            font-weight: bold;
        }
        .order-now {
            border: none;
            padding: 10px 25px;
            background-color: #d32f2f;
            color: white;
            font-size: 1rem;
            cursor: pointer;
            border-radius: 4px;
            margin-top: 20px;
        }
        .order-now:hover {
            background-color: #ab2a1c;
        }
        footer {
            background-color: #444;
            color: white;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>
<body>

<header>
    <h1>Delicious Pizza</h1>
    <p>Your favorite pizza restaurant</p>
</header>

<nav>
    <a href="#menu">Menu</a>
    <a href="#order">Order Now</a>
    <a href="#contact">Contact</a>
</nav>

<div class="hero" id="hero">
    <h1>Welcome to Delicious Pizza</h1>
    <p>Serving the best pizza in town since 1990</p>
</div>

<div class="content-section" id="menu">
    <h2>Our Menu</h2>
    <div class="menu">
        <h2>Pizzas</h2>
        <div class="menu-item">
            <span>Margherita</span>
            <span>$12</span>
        </div>
        <div class="menu-item">
            <span>Pepperoni</span>
            <span>$15</span>
        </div>
        <div class="menu-item">
            <span>BBQ Chicken</span>
            <span>$18</span>
        </div>
    </div>
    <div class="menu">
        <h2>Sides</h2>
        <div class="menu-item">
            <span>Garlic Bread</span>
            <span>$5</span>
        </div>
        <div class="menu-item">
            <span>Chicken Wings</span>
            <span>$7</span>
        </div>
    </div>
</div>

<div class="content-section" id="order">
    <h2>Order Now</h2>
    <button class="order-now" onclick="alert('Your order has been placed!')">Place Your Order</button>
</div>

<div class="content-section" id="contact">
    <h2>Contact Us</h2>
    <p>123 Pizza St, Flavor Town, USA</p>
    <p>Phone: (123) 456-7890</p>
    <p>Email: contact@deliciouspizza.com</p>
</div>

<footer>
    <p>&copy; 2023 Delicious Pizza. All rights reserved.</p>
</footer>

</body>
</html>

Create_a_one_page_high_converting_website_in_html_for_a_pizza_restaurant.html

This HTML file creates a one-page website for a pizza restaurant called "Delicious Pizza". The website features a header, navigation, hero section, menu, order section, contact information, and a footer. The page includes inline CSS for styling and a simple JavaScript alert for the order button.

AI Website Wizard | AI Tools by WRKAI

Your website request

Recently Generated