Mathieu Moran
0072e57abc
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
97 lines
4.4 KiB
HTML
97 lines
4.4 KiB
HTML
<!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>
|
|
|