<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlitzFury - Telegram Bot</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Kanit', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.phone-container {
width: 420px;
height: 960px;
background: #000;
border-radius: 40px;
padding: 10px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.phone-screen {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
border-radius: 30px;
overflow: hidden;
position: relative;
}
.status-bar {
height: 44px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
color: white;
font-size: 14px;
}
.app-header {
background: linear-gradient(90deg, #4a00e0, #8e2de2);
padding: 15px 20px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.pet-container {
position: relative;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.pet-image {
width: 200px;
height: 200px;
background: url('https://picsum.photos/seed/foxpet/200/200.jpg') center/cover;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
.crown {
position: absolute;
top: 80px;
font-size: 40px;
color: gold;
animation: sparkle 2s ease-in-out infinite;
}
@keyframes sparkle {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.1);
}
}
.level-badge {
position: absolute;
bottom: 20px;
background: linear-gradient(90deg, #f093fb, #f5576c);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.food-section {
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
margin: 0 20px;
}
.food-item {
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
padding: 15px;
margin-bottom: 15px;
display: flex;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
}
.food-item:hover {
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.food-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
margin-right: 15px;
}
.food-info {
flex: 1;
}
.food-name {
font-weight: 600;
color: #333;
margin-bottom: 5px;
}
.food-effect {
font-size: 12px;
color: #666;
}
.food-price {
font-weight: 600;
color: #4a00e0;
}
.bottom-section {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
padding: 20px;
border-radius: 30px 30px 0 0;
}
.feed-button {
background: linear-gradient(90deg, #4a00e0, #8e2de2);
color: white;
border: none;
padding: 15px 30px;
border-radius: 30px;
font-size: 18px;
font-weight: 600;
width: 100%;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(74, 0, 224, 0.4);
}
.feed-button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(74, 0, 224, 0.6);
}
.feed-button:active {
transform: translateY(0);
}
.coins-display {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
color: gold;
font-size: 20px;
font-weight: 600;
}
.background-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
.bg-element {
position: absolute;
opacity: 0.1;
color: white;
}
.lightning {
top: 20%;
right: 10%;
font-size: 60px;
transform: rotate(15deg);
animation: flash 4s infinite;
}
.rock {
bottom: 15%;
left: 5%;
font-size: 50px;
transform: rotate(-10deg);
}
.gift {
top: 40%;
left: 8%;
font-size: 40px;
animation: bounce 3s infinite;
}
@keyframes flash {
0%,
100% {
opacity: 0.1;
}
50% {
opacity: 0.3;
}
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.notification {
position: fixed;
top: 20px;
right: 20px;
background: white;
padding: 15px 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transform: translateX(400px);
transition: transform 0.3s ease;
z-index: 1000;
}
.notification.show {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="phone-container">
<div class="phone-screen">
<!-- Background Elements -->
<div class="background-elements">
<div class="bg-element lightning"><i class="fas fa-bolt"></i></div>
<div class="bg-element rock"><i class="fas fa-mountain"></i></div>
<div class="bg-element gift"><i class="fas fa-gift"></i></div>
</div>
<!-- Status Bar -->
<div class="status-bar">
<span>9:41</span>
<div>
<i class="fas fa-signal"></i>
<i class="fas fa-wifi"></i>
<i class="fas fa-battery-three-quarters"></i>
</div>
</div>
<!-- App Header -->
<div class="app-header">
<div>
<h1 class="text-xl font-bold">BlitzFury</h1>
<p class="text-xs opacity-80">EAZY - R</p>
</div>
<div class="text-right">
<div class="text-xs opacity-80">LEVEL</div>
<div class="text-lg font-bold">8/10</div>
</div>
</div>
<!-- Pet Container -->
<div class="pet-container">
<div class="crown"><i class="fas fa-crown"></i></div>
<div class="pet-image"></div>
<div class="level-badge">
<i class="fas fa-star"></i> Level 8
</div>
</div>
<!-- Food Section -->
<div class="food-section">
<h2 class="text-white text-lg font-semibold mb-3">เลือกอาหารสัตว์เลี้ยง</h2>
<div class="food-item" onclick="selectFood('Berry Jelly', 500)">
<div class="food-icon">
<i class="fas fa-cookie-bite"></i>
</div>
<div class="food-info">
<div class="food-name">Berry Jelly</div>
<div class="food-effect">+50 พลังงาน, +10 ความสุข</div>
</div>
<div class="food-price">500</div>
</div>
<div class="food-item" onclick="selectFood('Energy Drink', 300)">
<div class="food-icon">
<i class="fas fa-bolt"></i>
</div>
<div class="food-info">
<div class="food-name">Energy Drink</div>
<div class="food-effect">+30 พลังงาน, +5 ความสุข</div>
</div>
<div class="food-price">300</div>
</div>
<div class="food-item" onclick="selectFood('Super Meal', 1000)">
<div class="food-icon">
<i class="fas fa-drumstick-bite"></i>
</div>
<div class="food-info">
<div class="food-name">Super Meal</div>
<div class="food-effect">+100 พลังงาน, +30 ความสุข</div>
</div>
<div class="food-price">1000</div>
</div>
</div>
<!-- Bottom Section -->
<div class="bottom-section">
<div class="coins-display">
<i class="fas fa-coins mr-2"></i>
<span id="coins">3,733,000</span>
</div>
<button class="feed-button" onclick="feedPet()">
Feed your pet...
</button>
</div>
</div>
</div>
<!-- Notification -->
<div id="notification" class="notification">
<div id="notificationText"></div>
</div>
<script>
let selectedFood = null;
let coins = 3733000;
let petEnergy = 50;
let petHappiness = 50;
function selectFood(name, price) {
selectedFood = {name, price};
showNotification(`เลือก ${name} แล้ว`);
// Highlight selected food
document.querySelectorAll('.food-item').forEach(item => {
item.style.border = 'none';
});
event.currentTarget.style.border = '2px solid #4a00e0';
}
function feedPet() {
if (!selectedFood) {
showNotification('กรุณาเลือกอาหารก่อน!');
return;
}
if (coins < selectedFood.price) {
showNotification('เหรียญไม่เพียงพอ!');
return;
}
// Deduct coins
coins -= selectedFood.price;
document.getElementById('coins').textContent = coins.toLocaleString();
// Update pet stats
if (selectedFood.name === 'Berry Jelly') {
petEnergy += 50;
petHappiness += 10;
} else if (selectedFood.name === 'Energy Drink') {
petEnergy += 30;
petHappiness += 5;
} else if (selectedFood.name === 'Super Meal') {
petEnergy += 100;
petHappiness += 30;
}
// Cap stats at 100
petEnergy = Math.min(petEnergy, 100);
petHappiness = Math.min(petHappiness, 100);
showNotification(`ให้อาหาร ${selectedFood.name} แล้ว! พลังงาน: ${petEnergy}, ความสุข: ${petHappiness}`);
// Animate pet
const petImage = document.querySelector('.pet-image');
petImage.style.animation = 'none';
setTimeout(() => {
petImage.style.animation = 'float 3s ease-in-out infinite';
}, 10);
// Reset selection
selectedFood = null;
document.querySelectorAll('.food-item').forEach(item => {
item.style.border = 'none';
});
}
function showNotification(message) {
const notification = document.getElementById('notification');
const notificationText = document.getElementById('notificationText');
notificationText.textContent = message;
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}
// Add some initial animation
window.addEventListener('load', () => {
showNotification('ยินดีต้อนรับสู่ BlitzFury!');
});
</script>
</body>
</html>