<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlitzFury Bot</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
:root {
--background-color: #1a1a1a;
--container-bg: #1c1c1e;
--card-bg: #2c2c2e;
--primary-orange: #ff9f0a;
--light-orange: #ffcc80;
--text-color: #ffffff;
--text-secondary: #a0a0a0;
--glow-color: rgba(255, 159, 10, 0.4);
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
background-size: cover;
background-position: center;
}
.mobile-frame {
width: 390px;
height: 844px;
background-color: #000;
border-radius: 50px;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
padding: 15px;
box-sizing: border-box;
overflow: hidden;
}
.screen {
background-color: var(--container-bg);
width: 100%;
height: 100%;
border-radius: 35px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.status-bar {
display: flex;
justify-content: space-between;
padding: 15px 25px 10px;
position: absolute;
top: 0;
width: 100%;
box-sizing: border-box;
z-index: 10;
}
.time {
font-weight: 600;
font-size: 15px;
}
.status-icons img {
height: 12px;
margin-left: 5px;
}
.island-notch {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 30px;
background-color: #000;
border-radius: 20px;
}
main {
padding: 70px 20px 20px;
flex-grow: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
/* Custom scrollbar */
main::-webkit-scrollbar {
width: 0px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.header a {
color: var(--text-secondary);
text-decoration: none;
font-size: 16px;
}
.header h1 {
font-size: 20px;
margin: 0;
font-weight: 600;
}
.profile-section {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(90deg, #3a3a3c, #2c2c2e);
border-radius: 15px;
padding: 10px 15px;
margin-bottom: 25px;
}
.profile-info {
display: flex;
flex-direction: column;
}
.profile-info .level {
font-size: 18px;
font-weight: 700;
color: var(--text-color);
}
.level-progress {
width: 80px;
height: 6px;
background-color: #555;
border-radius: 3px;
overflow: hidden;
margin-top: 5px;
}
.level-progress-bar {
width: 80%;
/* LVL 8/10 */
height: 100%;
background-color: var(--primary-orange);
border-radius: 3px;
}
.hourly-rate {
background-color: var(--card-bg);
padding: 5px 10px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
color: var(--primary-orange);
}
.rewards-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 25px;
}
.reward-card {
background-color: var(--card-bg);
border-radius: 15px;
padding: 15px 10px;
}
.reward-card,
.feed-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
}
.reward-card .title {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.2;
}
.reward-card .amount {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.food-icon,
.achievement-icon {
font-size: 24px;
}
.feed-section {
background-color: var(--card-bg);
border-radius: 20px;
padding: 20px;
position: relative;
}
.close-btn {
position: absolute;
top: 15px;
right: 15px;
width: 24px;
height: 24px;
background-color: #444;
color: var(--text-secondary);
border: none;
border-radius: 50%;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.feed-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.feed-item {
background-color: #3e3e40;
border-radius: 15px;
padding: 10px;
}
.feed-item .name {
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
}
.feed-item .level {
font-size: 12px;
color: var(--text-secondary);
}
.feed-info {
font-size: 14px;
color: var(--text-secondary);
text-align: center;
margin-top: 20px;
}
.footer {
margin-top: auto;
/* Pushes footer to the bottom */
padding: 15px 20px;
}
.total-score {
text-align: center;
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
text-shadow: 0 0 15px var(--glow-color);
}
.go-ahead-btn {
background: linear-gradient(180deg, var(--light-orange), var(--primary-orange));
color: var(--text-color);
font-size: 18px;
font-weight: 600;
border: none;
border-radius: 15px;
width: 100%;
padding: 15px;
cursor: pointer;
box-shadow: 0 5px 20px var(--glow-color);
}
</style>
</head>
<body>
<div class="mobile-frame">
<div class="screen">
<div class="status-bar">
<div class="time">1:31</div>
<div class="island-notch"></div>
<div class="status-icons">
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/cellular-network.png" alt="Cellular" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/wifi.png" alt="WiFi" />
<img src="https://img.icons8.com/ios-filled/50/ffffff/full-battery.png" alt="Battery" />
</div>
</div>
<main>
<header class="header">
<a href="#">Cancel</a>
<h1>Bot</h1>
<a href="#">
<img src="https://img.icons8.com/ios-glyphs/30/a0a0a0/settings.png" alt="Options" style="height: 24px;" />
</a>
</header>
<section class="profile-section">
<div class="profile-info">
<span class="level">EAZY-R</span>
<span>LVL 8/10</span>
<div class="level-progress">
<div class="level-progress-bar"></div>
</div>
</div>
<div class="hourly-rate">
+250 /hour
</div>
</section>
<section class="rewards-section">
<div class="reward-card">
<span class="achievement-icon">🏆</span>
<span class="title">Daily Reward</span>
<span class="amount">5,000</span>
</div>
<div class="reward-card">
<span class="achievement-icon">📜</span>
<span class="title">Daily Cipher</span>
<span class="amount">3x10</span>
</div>
<div class="reward-card">
<span class="achievement-icon">💰</span>
<span class="title">Total Earn</span>
<span class="amount">20,000</span>
</div>
</section>
<section class="feed-section">
<button class="close-btn">×</button>
<div class="feed-grid">
<div class="feed-item">
<div class="food-icon">🍇</div>
<div class="name">Berry Jelly</div>
<div class="level">Level 2</div>
</div>
<div class="feed-item">
<div class="food-icon">🍪</div>
<div class="name">Roasted Pine Cone</div>
<div class="level">Level 1</div>
</div>
<div class="feed-item">
<div class="food-icon">🍖</div>
<div class="name">Honey Nut Cake</div>
<div class="level">Level 3</div>
</div>
<div class="feed-item">
<div class="food-icon">🍎</div>
<div class="name">Berry Jelly</div>
<div class="level">Level 4</div>
</div>
</div>
<p class="feed-info">Feed your pet to earn points, unlock new upgrades and help level up.</p>
</section>
</main>
<footer class="footer">
<div class="total-score">3,733,000</div>
<button class="go-ahead-btn">Go Ahead</button>
</footer>
</div>
</div>
</body>
</html>