built with ai (cursor/claude)

tinder clone for rating bricks

16 brick images, swipe left/right functionality
match modal with profile pics auto-dismisses after 2s
background image fades in on swipe
end screen with youtube video link
styling and animations

complete joke website but functional

index.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RateMyBrick - Swipe on Bricks!</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧱</text></svg>">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="app-container">
+        <header>
+            <h1>🧱 RateMyBrick</h1>
+            <p class="subtitle">Swipe right if you like the brick, left if you don't</p>
+        </header>
+
+        <div class="card-container" id="cardContainer">
+            <div class="background-image-container">
+                <img src="images/background.jpg" alt="" class="background-image">
+            </div>
+            <div class="card" id="currentCard">
+                <div class="card-image-container">
+                    <img id="brickImage" src="" alt="Brick">
+                    <div class="card-overlay">
+                        <div class="like-badge">LIKE</div>
+                        <div class="nope-badge">NOPE</div>
+                    </div>
+                </div>
+                <div class="card-info">
+                    <h2 id="brickName"></h2>
+                    <p id="brickDescription"></p>
+                    <div class="brick-stats">
+                        <span id="brickColor"></span>
+                        <span id="brickTexture"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="actions">
+            <button class="action-btn nope-btn" id="nopeBtn">
+                <span>✕</span>
+            </button>
+            <button class="action-btn like-btn" id="likeBtn">
+                <span>♥</span>
+            </button>
+        </div>
+
+        <div class="stats">
+            <div class="stat-item">
+                <span class="stat-label">Liked:</span>
+                <span class="stat-value" id="likedCount">0</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-label">Remaining:</span>
+                <span class="stat-value" id="remainingCount">0</span>
+            </div>
+        </div>
+
+        <div class="match-popup" id="matchPopup">
+            <div class="match-content">
+                <h2>It's a Match! 🧱</h2>
+                <div class="match-profiles">
+                    <div class="profile-picture left-profile">
+                        <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.istockphoto.com%2Fid%2F184374333%2Fphoto%2Fcommon-house-brick.jpg%3Fs%3D612x612%26w%3D0%26k%3D20%26c%3D4P9EPMx6VNtTM6pmKY2N4hHQDACcVfylceJh5xrAcS4%3D&f=1&nofb=1&ipt=0e97069ed75431afcb0ab3f13d4c15e2fa92646092dd989e49f5e39d1a713c2d" alt="Brick" id="leftProfileImg">
+                    </div>
+                    <div class="profile-picture right-profile">
+                        <img src="" alt="Brick" id="rightProfileImg">
+                    </div>
+                </div>
+                <p>You liked this brick!</p>
+            </div>
+        </div>
+
+        <div class="end-screen" id="endScreen">
+            <h2>You've seen all the bricks! 🧱</h2>
+            <p>You liked <span id="finalLikedCount">0</span> bricks</p>
+            <div class="video-container">
+                <a href="https://www.youtube.com/watch?v=en-dhgSLddI&autoplay=1" target="_blank" class="video-link-container">
+                    <img src="https://img.youtube.com/vi/en-dhgSLddI/maxresdefault.jpg" alt="Video thumbnail" class="video-thumbnail">
+                    <div class="play-button">
+                        <svg width="68" height="48" viewBox="0 0 68 48">
+                            <path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.63-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path>
+                            <path d="M 45,24 27,14 27,34" fill="#fff"></path>
+                        </svg>
+                    </div>
+                </a>
+            </div>
+            <button class="restart-btn" id="restartBtn">Start Over</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
+