LFM2.5-2.6B (free)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kimchi Loco - Korean Taco Food Truck</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary: #e63946;
      --secondary: #f4a261;
      --accent: #2a9d8f;
      --dark: #1a1a1a;
      --light: #fff8f0;
      --gray: #555555;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Noto Sans KR', 'Roboto Mono', sans-serif;
      background: #1a1a1a;
      color: #fff;
      min-height: 800px;
    }

    /* Hero Section */
    .hero {
      position: relative;
      height: 80vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 20px;
    }

    .hero-badge {
      background: varifade;
      border: 2px solid varifade;
      padding: 8px 20px;
      border-radius: 50px;
      font-family: 'Roboto Mono', monospace;
      font-size: 14px;
      color: varifade;
      margin-bottom: 30px;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

    .hero h1 {
      font-family: 'Noto Sans KR', sans-serif;
      font-size: clamp(3rem, 8vw, 6rem);
      color: varifade;
      margin-bottom: 20px;
      text-shadow: 0 0 40px rgba(230, 57, 70, 0.5);
    }

    .hero p {
      font-size: 1.5rem;
      color: varifade;
      max-width: 600px;
      margin: 0 auto 40px;
    }

    /* Menu Section */
    .menu {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px;
    }

    .menu h2 {
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 2.5rem;
      color: varifade;
      margin-bottom: 30px;
    }

    .menu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
    }

    .menu-card {
      background: varifade;
      border: 2px solid varifade;
      border-radius: 16px;
      padding: 24px;
      transition: transform 0.3s, box-shadow 0.3s;
      cursor: pointer;
    }

    .menu-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    .menu-card .name {
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 1.3rem;
      color: varifade;
      margin-bottom: 8px;
    }

    .menu-card .description {
      font-size: 0.9rem;
      color: varifade;
      line-height: 1.5;
    }

    .menu-card .price {
      font-family: 'Roboto Mono', monospace;
      font-size: 1.2rem;
      color: varifade;
      margin-top: 12px;
    }

    /* Demo Section */
    .demo {
      position: relative;
      height: 50vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: varifade;
      border-radius: 20px;
      overflow: hidden;
    }

    .demo-container {
      display: flex;
      gap: 40px;
      padding: 40px;
      align-items: center;
    }

    .taco-player {
      width: 300px;
      height: 300px;
      background: varifade;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .taco-player canvas {
      width: 100%;
      height: 100%;
      border-radius: 20px;
    }

    .taco-player .controls {
      display: flex;
      gap: 16px;
      margin-top: 20px;
    }

    .control-btn {
      background: varifade;
      border: 2px solid varifade;
      color: varifade;
      padding: 12px 24px;
      border-radius: 8px;
      cursor: pointer;
      font-family: 'Roboto Mono', monospace;
      font-size: 1rem;
      transition: all 0.3s;
    }

    .control-btn:hover {
      background: varifade;
      transform: scale(1.05);
    }

    .control-btn:active {
      transform: scale(0.95);
    }

    .start-btn {
      background: varifade;
      border: 2px solid varifade;
      color: varifade;
      padding: 16px 48px;
      border-radius: 50px;
      font-family: 'Roboto Mono', monospace;
      font-size: 1.1rem;
      cursor: pointer;
      margin-top: 40px;
      transition: all 0.3s;
    }

    .start-btn:hover {
      background: varifade;
      transform: scale(1.05);
    }

    /* Start Prompt */
    .start-prompt {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s;
    }

    .start-prompt.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .start-prompt h2 {
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 2rem;
      color: varifade;
      margin-bottom: 10px;
    }

    .start-prompt p {
      font-size: 1.1rem;
      color: varifade;
    }

    /* Footer */
    .footer {
      text-align: center;
      padding: 40px;
      background: varifade;
      border-top: 1px solid rgba(255,255,255,0.1);
      color: varifade;
      font-size: 0.9rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .menu-grid {
        grid-template-columns: 1fr;
      }

      .hero h1 {
        font-size: 2.5rem;
      }

      .start-prompt {
        display: none;
      }
    }

    /* Animations */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .menu-card {
      animation: fadeIn 0.5s ease forwards;
    }

    .menu-card:nth-child(1) { animation-delay: 0.1s; }
    .menu-card:nth-child(2) { animation-delay: 0.2s; }
    .menu-card:nth-child(3) { animation-delay: 0.3s; }
  </style>
</head>
<body>

  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-badge">🔥 Hot & Fresh | 24/7</div>
    <h1>Kimchi Loco</h1>
    <p>Korean Taco Fusion | Authentic Flavors, Unbeatable Taste</p>
  </section>

  <!-- Menu Section -->
  <section class="menu">
    <h2>Our Menu</h2>
    <div class="menu-grid">
      <div class="menu-card">
        <div class="name">Classic Kimchi Taco</div>
        <div class="description">Spicy fermented kimchi wrapped in crispy corn tortilla with gochujang crema.</div>
        <div class="price">$8.99</div>
      </div>
      <div class="menu-card">
        <div class="name">Bulgogi Beef Taco</div>
        <div class="description">Marinated bulgogi beef, fresh lettuce, and sesame seeds in a tangy sauce.</div>
        <div class="price">$9.49</div>
      </div>
      <div class="menu-card">
        <div class="name">Miso Glazed Pork Taco</div>
        <div class="description">Pork belly with miso glaze, pickled radish, and toasted sesame.</div>
        <div class="price">$10.99</div>
      </div>
      <div class="menu-card">
        <div class="name">Seoul Squeeze</div>
        <div class="description">Spicy taco with kimchi, quail egg, and gochugaru aioli.</div>
        <div class="price">$7.99</div>
      </div>
      <div class="menu-card">
        <div class="name">Veggie Kimchi Taco</div>
        <div class="description">Grilled tofu, kimchi, avocado, and cilantro in a warm tortilla.</div>
        <div class="price">$8.49</div>
      </div>
      <div class="menu-card">
        <div class="name">Tteokbokki Taco</div>
        <div class="description">Spicy rice cake filling with spicy gochujang sauce.</div>
        <div class="price">$9.29</div>
      </div>
    </div>
  </section>

  <!-- Self-Playing Demo -->
  <section class="demo">
    <div class="demo-container">
      <div class="taco-player">
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <div class="controls">
          <button class="control-btn" id="leftBtn">←</button>
          <button class="control-btn" id="rightBtn">→</button>
          <button class="control-btn" id="jumpBtn">↑</button>
          <button class="start-btn" id="startBtn">Start Game</button>
        </div>
      </div>
    </div>
    <div class="start-prompt" id="startPrompt">
      <h2>Click or Press a Key to Start</h2>
      <p>Welcome to Kimchi Loco's self-play demo! Use the arrow keys or click buttons to control the taco.</p>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <p>Kimchi Loco | 123 Street Food Ave, Seoul | Open Daily 11AM-10PM</p>
  </footer>

  <script>
    // Game State
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    // Game variables
    let playerX = 200;
    let playerY = 300;
    let foodX = 200;
    let foodY = 300;
    let foodType = 0; // 0: kimchi, 1: beef, 2: pork, 3: veggie
    let score = 0;
    let gameRunning = false;

    // Controls
    const leftBtn = document.getElementById('leftBtn');
    const rightBtn = document.getElementById('rightBtn');
    const jumpBtn = document.getElementById('jumpBtn');
    const startBtn = document.getElementById('startBtn');
    const startPrompt = document.getElementById('startPrompt');

    // Keyboard controls
    const keys = {
      ArrowLeft: false,
      ArrowRight: false,
      ArrowUp: false
    };

    // Initialize game
    function initGame() {
      playerX = 200;
      playerY = 300;
      foodX = 200;
      foodY = 300;
      foodType = 0;
      score = 0;
      gameRunning = false;
      updateUI();
    }

    // Update UI
    function updateUI() {
      const startPrompt = document.getElementById('startPrompt');
      if (gameRunning) {
        startPrompt.classList.remove('visible');
      } else {
        startPrompt.classList.add('visible');
      }
    }

    // Draw game
    function draw() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw background
      ctx.fillStyle = '#1a1a1a';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // Draw food
      ctx.fillStyle = '#e63946';
      ctx.beginPath();
      ctx.arc(foodX, foodY, 25, 0, Math.PI * 2);
      ctx.fill();

      // Draw food type indicator
      ctx.fillStyle = '#fff';
      ctx.font = '10px "Roboto Mono"';
      ctx.fillText(foodType === 0 ? 'Kimchi' : foodType === 1 ? 'Beef' : foodType === 2 ? 'Pork' : 'Veggie', foodX + 5, foodY - 10);

      // Draw player taco
      ctx.fillStyle = '#2a9d8f';
      ctx.beginPath();
      ctx.arc(playerX, playerY, 18, 0, Math.PI * 2);
      ctx.fill();

      // Draw food type indicator for player
      ctx.fillStyle = '#fff';
      ctx.font = '10px "Roboto Mono"';
      ctx.fillText(foodType === 0 ? 'Kimchi' : foodType === 1 ? 'Beef' : foodType === 2 ? 'Pork' : 'Veggie', playerX + 5, playerY - 10);

      // Draw score
      ctx.fillStyle = '#fff';
      ctx.font = 'bold 20px "Noto Sans KR"';
      ctx.textAlign = 'center';
      ctx.fillText(`Score: ${score}`, canvas.width / 2, 30);

      // Draw instructions
      ctx.fillStyle = '#888';
      ctx.font = '12px "Roboto Mono"';
      ctx.fillText('Arrow Keys: Move | ↑: Jump | Click to Start', 20, canvas.height - 40);
    }

    // Game logic
    function update() {
      if (!gameRunning) return;

      // Player movement
      if (keys.ArrowLeft && playerX > 20) {
        playerX -= 5;
      }
      if (keys.ArrowRight && playerX < canvas.width - 80) {
        playerX += 5;
      }
      if (keys.ArrowUp) {
        playerY -= 5;
      }

      // Food movement
      foodX += 2;
      if (foodX > canvas.width + 50 || foodX < -50) {
        foodX = Math.random() * (canvas.width + 100) - 50;
      }

      // Collision detection
      const dx = foodX - playerX;
      const dy = foodY - playerY;
      const dist = Math.sqrt(dx * dx + dy * dy);

      if (dist < 30) {
        // Score point
        score += 10;
        updateUI();
        // Spawn new food
        foodX = 200;
        foodY = 300;
        foodType = Math.floor(Math.random() * 4);
      }

      // Draw again after update
      draw();
    }

    // Game loop
    function gameLoop() {
      update();
      requestAnimationFrame(gameLoop);
    }

    // Start game
    function startGame() {
      gameRunning = true;
      initGame();
      startBtn.disabled = true;
      startBtn.textContent = 'Playing...';
      gameLoop();
    }

    // Keyboard controls
    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowLeft') keys.ArrowLeft = true;
      if (e.key === 'ArrowRight') keys.ArrowRight = true;
      if (e.key === 'ArrowUp') keys.ArrowUp = true;
    });

    // Button controls
    leftBtn.addEventListener('click', () => {
      if (gameRunning) return;
      startGame();
    });

    rightBtn.addEventListener('click', () => {
      if (gameRunning) return;
      startGame();
    });

    jumpBtn.addEventListener('click', () => {
      if (gameRunning) return;
      startGame();
    });

    // Initialize
    initGame();
    requestAnimationFrame(gameLoop);
  </script>

</body>
</html>