https://custom-2048-cupcakes.silkandpepper.com/

Scan-ID:
b18b8083-ad2a-4b51-9004-e85e73f587efBeendet
Eingereichte URL:
https://custom-2048-cupcakes.silkandpepper.com/
Bericht beendet:
LinkText
https://www.facebook.com/sharer/sharer.php?u=CURRENT_URL Share on Facebook
https://twitter.com/intent/tweet?text=Play%202048%20Cupcakes!&url=CURRENT_URL Share on Twitter
https://api.whatsapp.com/send?text=Play%202048%20Cupcakes!%20CURRENT_URL Share on WhatsApp

JavaScript-Variablen · 10 gefunden

NameTyp
0object
1object
2object
3object
4object
5object
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
loadGameIframefunction

Konsolenprotokoll-Meldungen · 0 gefunden

HTML

<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048 Cupcakes - The Ultimate Cupcake Puzzle Game | Play 2048 Cupcakes Unblocked</title>
<meta name="description" content="Play 2048 Cupcakes, the sweetest puzzle game! Combine delicious cupcakes in this addictive unblocked version. Try Christmas and Halloween editions of 2048 cupcakes game. Create your custom 2048 game with Taylor Swift, Minecraft themes and more!">
<meta name="keywords" content="2048 cupcakes, unblocked 2048 games, 2048 taylor swift, 2048 minecraft, cupcake game, christmas cupcakes 2048, halloween cupcakes 2048">
<style>
  :root {
    --primary: #ff9cd1;
    --secondary: #ffd4e5;
    --accent: #ff6b6b;
    --text: #4a4a4a;
  }

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

  body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text);
  }

  /* Navigation Menu */
  .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 15px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
  }

  .nav-menu a {
    color: var(--text);
    text-decoration: none;
    padding: 5px 15px;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
  }

  .nav-menu a:hover {
    background: var(--primary);
    color: white;
  }

  /* Hero Section */
  .hero {
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    padding: 100px 20px;
    text-align: center;
    margin-top: 60px;
  }

  .hero h1 {
    font-size: 3.5rem;
    color: white;
    margin-bottom: 20px;
  }

  .hero p {
    font-size: 1.2rem;
    color: white;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Game Section */
  .game-section {
    padding: 50px 20px;
    text-align: center;
  }

  .game-container {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
  }

  /* Features */
  .features {
    padding: 80px 20px;
    background: #f9f9f9;
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .feature-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    position: relative;
    overflow: hidden;
  }

  .feature-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,156,209,0.1), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
  }

  @keyframes shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
  }

  .feature-card:hover {
    transform: translateY(-5px);
  }

  /* How To Play */
  .how-to {
    padding: 80px 20px;
  }

  .steps {
    max-width: 800px;
    margin: 0 auto;
  }

  .step {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }

  .step-number {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 20px;
  }

  /* FAQ */
  .faq {
    padding: 80px 20px;
    background: #f9f9f9;
  }

  .faq-item {
    max-width: 800px;
    margin: 0 auto 20px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
  }

  .faq-question {
    font-weight: bold;
    margin-bottom: 10px;
  }

  .section-title {
    text-align: center;
    margin-bottom: 40px;
    color: var(--text);
  }

  /* Additional styling for better user experience */
  .strategy-tips {
    padding: 80px 20px;
    background: linear-gradient(135deg, #fff5f8, #fff);
  }

  .tips-container {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }

  .tip-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(255,156,209,0.2);
    border: 2px solid var(--primary);
    transition: all 0.3s ease;
  }

  .tip-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255,156,209,0.3);
  }

  .cupcake-values {
    padding: 80px 20px;
  }

  .values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .cupcake-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(255,156,209,0.2);
    border: 2px solid var(--primary);
    transition: all 0.3s ease;
    text-align: center;
  }

  .cupcake-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255,156,209,0.3);
  }

  .cupcake-card h3 {
    color: var(--text);
    margin-bottom: 10px;
  }

  .calories {
    font-size: 1.2rem;
    color: var(--accent);
    font-weight: bold;
    margin: 10px 0;
  }

  .faq-answer {
    display: none;
    padding: 15px;
    margin-top: 10px;
    background: #f9f9f9;
    border-radius: 5px;
  }

  .game-tips {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.9);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 250px;
    font-size: 0.9rem;
    display: none;
  }

  /* Add this to the existing CSS */
  .comparison {
    padding: 80px 20px;
    background: linear-gradient(135deg, #fff5f8, #fff);
  }

  .comparison-table {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
  }

  .comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #eee;
  }

  .comparison-row:last-child {
    border-bottom: none;
  }

  .comparison-cell {
    padding: 20px;
    display: flex;
    align-items: center;
  }

  .comparison-cell:first-child {
    background: var(--secondary);
    font-weight: bold;
  }

  .comparison-header {
    background: var(--primary) !important;
    color: white;
    font-weight: bold;
    text-align: center;
  }

  .unique-features {
    margin-top: 40px;
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }

  /* Video Tutorials Section */
  .video-tutorials {
    padding: 80px 20px;
    background: linear-gradient(135deg, #fff5f8, #fff);
  }

  .tutorials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .tutorial-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255,156,209,0.2);
    transition: transform 0.3s ease;
  }

  .tutorial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255,156,209,0.3);
  }

  .tutorial-card h3 {
    padding: 20px;
    color: var(--text);
    font-size: 1.1rem;
  }

  .tutorial-card p {
    padding: 20px;
    font-size: 0.9rem;
    color: var(--text);
  }

  .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
  }

  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Smooth scroll behavior */
  html {
    scroll-behavior: smooth;
  }

  /* Add these styles in the <style> section */
  .social-share {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
  }

  .share-button {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.3s;
  }

  .share-button:hover {
    opacity: 0.8;
  }

  .facebook { background: #3b5998; }
  .twitter { background: #1da1f2; }
  .whatsapp { background: #25d366; }

  .comments-section {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
  }

  .comment {
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }

  .comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
  }

  .comment-info {
    flex: 1;
  }

  .comment-author {
    font-weight: bold;
    color: var(--text);
  }

  .comment-date {
    font-size: 0.8rem;
    color: #888;
  }

  .comment-text {
    color: var(--text);
    line-height: 1.5;
  }

  /* Custom 2048 Game Creator */
  .game-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 400px;
    margin: 20px auto;
    background: #bbada0;
    padding: 10px;
    border-radius: 6px;
  }

  .tile {
    aspect-ratio: 1;
    background: #eee4da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    border-radius: 3px;
    transition: all 0.15s;
    background-size: cover;
    background-position: center;
  }

  .customize-panel {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background: #faf8ef;
    border-radius: 6px;
  }

  .custom-tile {
    width: 60px;
    height: 60px;
    margin: 5px;
    display: inline-block;
    border: 2px solid #bbada0;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    position: relative;
  }

  .custom-tile.selected {
    border: 2px solid var(--accent);
    box-shadow: 0 0 10px rgba(255,107,107,0.3);
  }

  .custom-tile::after {
    content: attr(data-value);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--text);
  }

  .controls {
    text-align: center;
    margin: 20px;
  }

  button {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 3px;
    background: #8f7a66;
    color: white;
    cursor: pointer;
  }

  #score {
    text-align: center;
    font-size: 24px;
    margin: 20px;
  }

  .game-over {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 48px;
  }

  .customize-panel {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin: 40px auto;
  }

  #imageUpload {
    margin: 15px 0;
    width: 100%;
    padding: 10px;
  }

  .site-footer {
    background: #f9f9f9;
    padding: 60px 20px;
    margin-top: 80px;
  }

  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
  }

  .footer-section h3 {
    color: var(--text);
    margin-bottom: 20px;
  }

  .footer-section a {
    display: block;
    color: var(--text);
    text-decoration: none;
    margin-bottom: 10px;
  }

  .create-custom {
    padding: 80px 20px;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
  }

  .custom-guide {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      background: white;
      padding: 40px;
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }

  .custom-guide h3 {
      color: var(--text);
      margin-bottom: 30px;
      font-size: 1.8rem;
  }

  .custom-guide .steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin: 30px 0;
  }

  .custom-guide .step {
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
  }

  .custom-guide .step-num {
      width: 40px;
      height: 40px;
      background: var(--primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      margin-bottom: 15px;
  }

  .cta-button {
      display: inline-block;
      padding: 15px 30px;
      background: var(--accent);
      color: white;
      text-decoration: none;
      border-radius: 25px;
      margin-top: 30px;
      transition: all 0.3s ease;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: 0 4px 15px rgba(255,107,107,0.3);
  }

  .cta-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(255,107,107,0.4);
  }
</style>
</head>
<body>
  <nav class="nav-menu">
    <a href="#hero">Home</a>
    <a href="/make">Create Custom Game</a>
    <a href="#features">Features</a>
    <a href="#collection">Cupcakes</a>
    <a href="#tips">Pro Tips</a>
    <a href="#howto">How to Play</a>
    <a href="#comparison">Why Choose Us</a>
    <a href="#faq">FAQ</a>
    <a href="#tutorials">Tutorials</a>
    <a href="#game">Play Game</a>

  </nav>

  <section class="hero" id="hero">
    <h1>2048 Cupcakes</h1>
    <p>Combine delicious frosted cupcakes in this sweet variant of the classic 2048 puzzle game! Merge tiles with matching calorie values to create even more delectable treats.</p>
  </section>

  <section class="game-section" id="game">
    <h2 class="section-title">Play Now!</h2>
    <div class="game-container"><iframe width="100%" height="100%" frameborder="0" src="https://unblocked-games-official.github.io/2048-CUPCAKES/"></iframe></div>
    <div class="game-tips">
      <h4>Quick Tips:</h4>
      <ul>
        <li>Use arrow keys or swipe to move</li>
        <li>Keep highest value in a corner</li>
        <li>Plan your moves carefully</li>
      </ul>
    </div>
    
    <div class="social-share">
      <a href="https://www.facebook.com/sharer/sharer.php?u=CURRENT_URL" class="share-button facebook" target="_blank">
        Share on Facebook
      </a>
      <a href="https://twitter.com/intent/tweet?text=Play%202048%20Cupcakes!&amp;url=CURRENT_URL" class="share-button twitter" target="_blank">
        Share on Twitter
      </a>
      <a href="https://api.whatsapp.com/send?text=Play%202048%20Cupcakes!%20CURRENT_URL" class="share-button whatsapp" target="_blank">
        Share on WhatsApp
      </a>
    </div>

    <div class="comments-section">
      <h3 class="section-title">Player Comments</h3>
      
      <div class="comment">
        <div class="comment-header">
          <div class="avatar">SK</div>
          <div class="comment-info">
            <div class="comment-author">Sarah K.</div>
            <div class="comment-date">2 hours ago</div>
          </div>
        </div>
        <div class="comment-text">
          This is such a fun twist on the classic 2048! Love the cupcake theme, makes it even more addictive. Just reached the mint chocolate cupcake! 🧁
        </div>
      </div>

      <div class="comment">
        <div class="comment-header">
          <div class="avatar">MJ</div>
          <div class="comment-info">
            <div class="comment-author">Mike Johnson</div>
            <div class="comment-date">5 hours ago</div>
          </div>
        </div>
        <div class="comment-text">
          The corner strategy really works! Finally made it to the Rainbow Sprinkles cupcake. Thanks for the helpful tips! 🌈
        </div>
      </div>

      <div class="comment">
        <div class="comment-header">
          <div class="avatar">AL</div>
          <div class="comment-info">
            <div class="comment-author">Amy Lee</div>
            <div class="comment-date">1 day ago</div>
          </div>
        </div>
        <div class="comment-text">
          Been playing this non-stop! The calorie-based progression is such a clever idea. Currently trying to beat my high score of 15,000! 🏆
        </div>
      </div>
    </div>
  </section>

  <section class="features" id="features">
    <h2 class="section-title">Game Features</h2>
    <div class="features-grid">
      <div class="feature-card">
        <h3>Delightful Cupcake Designs</h3>
        <p>From Vanilla Birthday (200 Kcal) to Rainbow Sprinkles (2048 Kcal), enjoy a variety of beautifully designed cupcake tiles!</p>
      </div>
      <div class="feature-card">
        <h3>Strategic Gameplay</h3>
        <p>Master the corner strategy and chain combinations to create higher-value cupcakes and achieve top scores.</p>
      </div>
      <div class="feature-card">
        <h3>Cross-Platform Play</h3>
        <p>Play seamlessly on desktop or mobile devices using arrow keys or swipe gestures.</p>
      </div>
    </div>
  </section>

  <section class="cupcake-values" id="collection">
    <h2 class="section-title">Complete Cupcake Collection</h2>
    <div class="values-grid">
      <div class="cupcake-card">
        <h3>Vanilla Birthday</h3>
        <p class="calories">200 Kcal</p>
        <p>Basic starter cupcake with vanilla frosting</p>
      </div>
      <div class="cupcake-card">
        <h3>Bubblegum Pink</h3>
        <p class="calories">400 Kcal</p>
        <p>Sweet pink frosting with candy pearls</p>
      </div>
      <div class="cupcake-card">
        <h3>Mint Chocolate</h3>
        <p class="calories">800 Kcal</p>
        <p>Mint frosting with chocolate chips</p>
      </div>
      <div class="cupcake-card">
        <h3>Red Velvet</h3>
        <p class="calories">1024 Kcal</p>
        <p>Classic red velvet with cream cheese</p>
      </div>
      <div class="cupcake-card">
        <h3>Chocolate Sundae</h3>
        <p class="calories">1500 Kcal</p>
        <p>Triple chocolate with fudge drizzle</p>
      </div>
      <div class="cupcake-card">
        <h3>Caramel Dream</h3>
        <p class="calories">1800 Kcal</p>
        <p>Caramel frosting with toffee bits</p>
      </div>
      <div class="cupcake-card">
        <h3>Unicorn Magic</h3>
        <p class="calories">2000 Kcal</p>
        <p>Pastel swirl with edible glitter</p>
      </div>
      <div class="cupcake-card">
        <h3>Rainbow Sprinkles</h3>
        <p class="calories">2048 Kcal</p>
        <p>Ultimate rainbow frosting victory cupcake!</p>
      </div>
    </div>
  </section>

  <section class="strategy-tips" id="tips">
    <h2 class="section-title">Pro Tips &amp; Strategies</h2>
    <div class="tips-container">
      <div class="tip-card">
        <h3>Corner Strategy</h3>
        <p>Keep your highest-value cupcake in one corner and build a pattern of descending values. Never move tiles in your chosen fixed direction.</p>
      </div>
      <div class="tip-card">
        <h3>Chain Reactions</h3>
        <p>Look for opportunities to merge multiple cupcakes in one move. This creates chain reactions that increase your score and free up space.</p>
      </div>
      <div class="tip-card">
        <h3>Space Management</h3>
        <p>Maintain open board space by merging lower-value cupcakes first. Avoid overcrowding to keep your options flexible.</p>
      </div>
      <div class="tip-card">
        <h3>Think Ahead</h3>
        <p>Plan your moves carefully and anticipate where new cupcakes will spawn. There's no time limit, so take your time!</p>
      </div>
    </div>
  </section>

  <section class="how-to" id="howto">
    <h2 class="section-title">How to Play</h2>
    <div class="steps">
      <div class="step">
        <div class="step-number">1</div>
        <p>Choose a fixed direction and keep your highest-value cupcake in one corner</p>
      </div>
      <div class="step">
        <div class="step-number">2</div>
        <p>Merge identical cupcakes to create higher calorie treats - start with Vanilla Birthday (200 Kcal)</p>
      </div>
      <div class="step">
        <div class="step-number">3</div>
        <p>Plan your moves carefully to create chain reactions and maintain open board space</p>
      </div>
    </div>
  </section>

  <section class="comparison" id="comparison">
    <h2 class="section-title">Why Choose 2048 Cupcakes?</h2>
    <div class="comparison-table">
      <div class="comparison-row">
        <div class="comparison-cell comparison-header">Feature</div>
        <div class="comparison-cell comparison-header">What Makes Us Special</div>
      </div>
      <div class="comparison-row">
        <div class="comparison-cell">Visual Appeal</div>
        <div class="comparison-cell">Delightful cupcake designs instead of plain numbers, making the game more engaging and fun</div>
      </div>
      <div class="comparison-row">
        <div class="comparison-cell">Progress Tracking</div>
        <div class="comparison-cell">Calorie-based values make it easier to remember and track your progress through delicious treats</div>
      </div>
      <div class="comparison-row">
        <div class="comparison-cell">Learning Curve</div>
        <div class="comparison-cell">Same addictive gameplay as classic 2048, but with an intuitive calorie-based progression system</div>
      </div>
      <div class="comparison-row">
        <div class="comparison-cell">Entertainment Value</div>
        <div class="comparison-cell">Combines puzzle-solving with a sweet dessert theme, adding an extra layer of enjoyment</div>
      </div>
    </div>
    
    <div class="unique-features">
      <h3>What Makes 2048 Cupcakes Special</h3>
      <p>While maintaining the beloved mechanics of the original 2048, our cupcake version adds a delicious twist that makes the game more enjoyable and memorable. The calorie-based progression system adds a fun educational element, helping players understand value relationships while having fun!</p>
    </div>
  </section>

  <section class="video-tutorials" id="tutorials">
    <h2 class="section-title">Video Tutorials</h2>
    <div class="tutorials-grid">
      <div class="tutorial-card">
        <h3>2048 Cupcakes - Gameplay Walkthrough</h3>
        <div class="video-container">
          <iframe width="100%" height="200" src="https://www.youtube.com/embed/example1" frameborder="0" allowfullscreen=""></iframe>
        </div>
        <p>Watch this gameplay walkthrough of 2048 Cupcakes, where strategies and tips are shared to help you achieve the highest score and reach the 2048 cupcake.</p>
      </div>
      
      <div class="tutorial-card">
        <h3>How to Play 2048 Cupcakes</h3>
        <div class="video-container">
          <iframe width="100%" height="200" src="https://www.youtube.com/embed/example2" frameborder="0" allowfullscreen=""></iframe>
        </div>
        <p>A beginner's guide to playing 2048 Cupcakes, explaining the rules, mechanics, and basic strategies for new players.</p>
      </div>
      
      <div class="tutorial-card">
        <h3>Tips and Tricks for 2048 Cupcakes</h3>
        <div class="video-container">
          <iframe width="100%" height="200" src="https://www.youtube.com/embed/example3" frameborder="0" allowfullscreen=""></iframe>
        </div>
        <p>This video provides essential tips and tricks for mastering 2048 Cupcakes, including advanced strategies for experienced players.</p>
      </div>
      
      <div class="tutorial-card">
        <h3>2048 Cupcakes Challenge</h3>
        <div class="video-container">
          <iframe width="100%" height="200" src="https://www.youtube.com/embed/example4" frameborder="0" allowfullscreen=""></iframe>
        </div>
        <p>Join this fun challenge as players compete to reach the 2048 cupcake in the least amount of moves possible. Watch their strategies unfold!</p>
      </div>
      
      <div class="tutorial-card">
        <h3>2048 Cupcakes Speedrun</h3>
        <div class="video-container">
          <iframe width="100%" height="200" src="https://www.youtube.com/embed/example5" frameborder="0" allowfullscreen=""></iframe>
        </div>
        <p>A speedrun of 2048 Cupcakes showcasing how quickly one can reach the 2048 cupcake using expert strategies.</p>
      </div>
    </div>
  </section>

  <section class="faq" id="faq">
    <h2 class="section-title">Frequently Asked Questions</h2>
    <div class="faq-item">
      <div class="faq-question">What's the best strategy to win?</div>
      <div class="faq-answer">Keep your highest-value cupcake in one corner and build a pattern of descending values. Avoid moving tiles in your chosen fixed direction to maintain control of the board.</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">What are the different cupcake values?</div>
      <div class="faq-answer">The game starts with Vanilla Birthday (200 Kcal) cupcakes and progresses through various delicious flavors until you reach the ultimate Rainbow Sprinkles (2048 Kcal) cupcake!</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">What common mistakes should I avoid?</div>
      <div class="faq-answer">Avoid overcrowding the board, making unnecessary moves, and focusing too much on a single tile. Take your time to plan moves and maintain flexible board space.</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">Can I play this game on mobile devices?</div>
      <div class="faq-answer">Yes! The game is fully responsive and can be played on mobile devices using swipe gestures, or on desktop using arrow keys.</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">How do I save my progress?</div>
      <div class="faq-answer">The game automatically saves your progress in your browser's local storage. Simply return to the same browser to continue where you left off.</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">Is there a time limit?</div>
      <div class="faq-answer">No, there's no time limit! You can take as long as you need to think through your moves and strategize.</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">What happens if the board fills up?</div>
      <div class="faq-answer">If no valid moves are available and the board is full, the game ends. You can then start a new game to try and beat your previous score.</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">How is the score calculated?</div>
      <div class="faq-answer">Your score increases each time you merge cupcakes. The value added to your score is equal to the calorie value of the new cupcake created from the merge.</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">Are there any keyboard shortcuts?</div>
      <div class="faq-answer">Yes! Use arrow keys for movements, 'R' to restart the game, and 'U' to undo your last move (if available in the version you're playing).</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">Can I compete with other players?</div>
      <div class="faq-answer">While the game doesn't have direct multiplayer features, you can compare your high scores with friends and challenge them to beat your best!</div>
    </div>
  </section>

  <section class="create-custom" id="create">
    <h2 class="section-title">Create Your Own 2048 Game</h2>
    <div class="custom-guide">
      <h3>Make It Your Own!</h3>
      <div class="steps">
        <div class="step">
          <span class="step-num">1</span>
          <p>Choose your theme (Taylor Swift, Minecraft, Custom Images)</p>
        </div>
        <div class="step">
          <span class="step-num">2</span>
          <p>Upload images for each tile value</p>
        </div>
        <div class="step">
          <span class="step-num">3</span>
          <p>Customize colors and styles</p>
        </div>
      </div>
      <a href="custom-2048.html" class="cta-button">Create Your Game Now</a>
    </div>
  </section>

  <footer class="site-footer">
    <div class="footer-content">
      <div class="footer-section">
        <h3>About 2048 Cupcakes</h3>
        <p>Experience the sweetest version of 2048 with our delicious cupcake-themed puzzle game. Combine matching treats to create even more delectable delights!</p>
      </div>
      <div class="footer-section">
        <h3>Quick Links</h3>
        <a href="privacy-policy.html">Privacy Policy</a>
        <a href="terms.html">Terms of Service</a>
        <a href="custom-2048.html">Create Custom Game</a>
      </div>
      <div class="footer-section">
        <h3>Popular 2048 Variants</h3>
        <a href="#">2048 Taylor Swift Edition</a>
        <a href="#">2048 Minecraft Edition</a>
        <a href="#">2048 Christmas Cupcakes</a>
        <a href="#">2048 Halloween Edition</a>
      </div>
    </div>
  </footer>

  <script>
    const GAME_URLS = [
      // 'https://wanghaisheng.github.io/custom-2048-cupcakes/food',
      'https://unblocked-games-official.github.io/2048-CUPCAKES/',
      // 'https://2048game.com/',
      // 'https://2048.io/'
    ];

    function loadGameIframe() {
      const gameContainer = document.querySelector('.game-container');
      if (!gameContainer) return;

      // Try to load each URL until one works
      let currentUrlIndex = 0;
      
      function tryLoadUrl() {
        if (currentUrlIndex >= GAME_URLS.length) {
          // If all URLs fail, show error message
          gameContainer.innerHTML = '<div style="padding: 20px; text-align: center;">Sorry, game is temporarily unavailable. Please try again later.</div>';
          return;
        }

        const iframe = document.createElement('iframe');
        iframe.width = '100%';
        iframe.height = '100%';
        iframe.frameBorder = '0';
        iframe.src = GAME_URLS[currentUrlIndex];

        // Handle load errors
        iframe.onerror = () => {
          currentUrlIndex++;
          tryLoadUrl();
        };

        // Handle load timeout
        const timeoutId = setTimeout(() => {
          currentUrlIndex++;
          tryLoadUrl();
        }, 5000); // 5 second timeout

        iframe.onload = () => {
          clearTimeout(timeoutId);
        };

        // Clear container and add new iframe
        gameContainer.innerHTML = '';
        gameContainer.appendChild(iframe);
      }

      tryLoadUrl();
    }

    // Wait for DOM to be fully loaded
    document.addEventListener('DOMContentLoaded', function() {
        loadGameIframe();
        let grid = Array(4).fill().map(() => Array(4).fill(0));
        let score = 0;
        let customImages = {};
        let selectedTile = null;

        // Initialize game
        function initGame() {
            const gridElement = document.getElementById('grid');
            if (gridElement) { // Only initialize if grid element exists
                createGrid();
                addNewTile();
                addNewTile();
                updateDisplay();
            }
        }

        // Create grid DOM elements - with null check
        function createGrid() {
            const gridElement = document.getElementById('grid');
            if (!gridElement) return; // Exit if grid element doesn't exist
            
            gridElement.innerHTML = '';
            for(let i = 0; i < 16; i++) {
                const tile = document.createElement('div');
                tile.className = 'tile';
                gridElement.appendChild(tile);
            }
        }

        // Add new tile (2 or 4)
        function addNewTile() {
            let available = [];
            grid.forEach((row, i) => {
                row.forEach((cell, j) => {
                    if(cell === 0) available.push({x: i, y: j});
                });
            });
            
            if(available.length) {
                let randomCell = available[Math.floor(Math.random() * available.length)];
                grid[randomCell.x][randomCell.y] = Math.random() < 0.9 ? 2 : 4;
            }
        }

        // Update display - with null checks
        function updateDisplay() {
            const tiles = document.querySelectorAll('.tile');
            const scoreElement = document.getElementById('score');
            
            if (tiles.length === 0) return; // Exit if no tiles exist

            grid.forEach((row, i) => {
                row.forEach((value, j) => {
                    const index = i * 4 + j;
                    if (tiles[index]) {
                        tiles[index].textContent = value || '';
                        if(value && customImages[value]) {
                            tiles[index].style.backgroundImage = `url(${customImages[value]})`;
                        } else {
                            tiles[index].style.backgroundImage = 'none';
                        }
                    }
                });
            });
            
            if (scoreElement) {
                scoreElement.textContent = `Score: ${score}`;
            }
        }

        // Handle moves
        function move(direction) {
            let moved = false;
            let merged = Array(4).fill().map(() => Array(4).fill(false));

            // Function to rotate matrix
            function rotate(matrix) {
                return matrix[0].map((_, i) => matrix.map(row => row[i]).reverse());
            }

            // Handle vertical moves by rotating the grid
            if (direction === 'up' || direction === 'down') {
                if (direction === 'up') {
                    grid = rotate(grid);
                    grid = rotate(grid);
                    grid = rotate(grid);
                } else {
                    grid = rotate(grid);
                }
            }

            // Process horizontal movement
            grid.forEach((row, i) => {
                let newRow = row.filter(cell => cell !== 0);
                if (direction === 'left' || direction === 'up') {
                    for (let i = 0; i < newRow.length - 1; i++) {
                        if (newRow[i] === newRow[i + 1]) {
                            newRow[i] *= 2;
                            score += newRow[i];
                            newRow.splice(i + 1, 1);
                            moved = true;
                        }
                    }
                    while (newRow.length < 4) newRow.push(0);
                } else {
                    for (let i = newRow.length - 1; i > 0; i--) {
                        if (newRow[i] === newRow[i - 1]) {
                            newRow[i] *= 2;
                            score += newRow[i];
                            newRow.splice(i - 1, 1);
                            newRow.unshift(0);
                            moved = true;
                        }
                    }
                    while (newRow.length < 4) newRow.unshift(0);
                }
                if (newRow.join(',') !== row.join(',')) moved = true;
                grid[i] = newRow;
            });

            // Rotate back for vertical moves
            if (direction === 'up') {
                grid = rotate(grid);
            } else if (direction === 'down') {
                grid = rotate(grid);
                grid = rotate(grid);
                grid = rotate(grid);
            }

            if (moved) {
                addNewTile();
                updateDisplay();
                checkGameOver();
            }
        }

        // Check game over - with null check
        function checkGameOver() {
            const gameOverElement = document.getElementById('gameOver');
            if (!gameOverElement) return false;

            // Check for any empty cells
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 4; j++) {
                    if (grid[i][j] === 0) return false;
                }
            }

            // Check for possible merges
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 4; j++) {
                    if (j < 3 && grid[i][j] === grid[i][j + 1]) return false;
                    if (i < 3 && grid[i][j] === grid[i + 1][j]) return false;
                }
            }

            // If we get here, game is over
            gameOverElement.style.display = 'flex';
            return true;
        }

        // Initialize FAQ toggles
        const faqItems = document.querySelectorAll('.faq-item');
        faqItems.forEach(item => {
            const question = item.querySelector('.faq-question');
            const answer = item.querySelector('.faq-answer');
            
            if (question && answer) {
                question.addEventListener('click', () => {
                    answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
                });
            }
        });

        // Initialize custom tile listeners if we're on the custom page
        const customTiles = document.querySelectorAll('.custom-tile');
        if (customTiles.length > 0) {
            initCustomTiles();
        }

        // Initialize image upload listener if element exists
        const imageUpload = document.getElementById('imageUpload');
        if (imageUpload) {
            imageUpload.addEventListener('change', handleImageUpload);
        }
        
        // Load custom images
        function loadCustomImages() {
            const saved = localStorage.getItem('2048-custom-images');
            if (saved) {
                customImages = JSON.parse(saved);
                updateCustomTileDisplay();
            }
        }

        // Initialize game with saved custom images
        loadCustomImages();
        initGame();
    });
  </script>


</body></html>