现已上线！2025 年 Telegram 研究 — 年度关键洞察 
33 846
订阅者
-1224 小时
-1007 天
-48830 天
帖子存档
33 844
<script>
// Application State
let currentStep = 1;
let formData = {
name: '',
gender: '',
weight: '',
height: '',
age: '',
activityLevel: '',
bodyFat: ''
};
// Activity level data
const activityLevels = {
sedentary: { title: 'Sedentary', multiplier: 1.2 },
light: { title: 'Light Active', multiplier: 1.375 },
moderate: { title: 'Moderate', multiplier: 1.55 },
active: { title: 'Very Active', multiplier: 1.725 },
veryActive: { title: 'Extreme', multiplier: 1.9 }
};
// Initialize app
document.addEventListener('DOMContentLoaded', function() {
updateUI();
setupEventListeners();
});
function setupEventListeners() {
// Gender selection
document.querySelectorAll('[data-gender]').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('[data-gender]').forEach(b => b.classList.remove('selected', 'male', 'female'));
this.classList.add('selected', this.dataset.gender);
formData.gender = this.dataset.gender;
updateUI();
});
});
// Activity level selection
document.querySelectorAll('[data-activity]').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('[data-activity]').forEach(b => b.classList.remove('selected'));
this.classList.add('selected');
formData.activityLevel = this.dataset.activity;
updateUI();
});
});
// Body fat selection
document.querySelectorAll('[data-bodyfat]').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('[data-bodyfat]').forEach(b => b.classList.remove('selected'));
this.classList.add('selected');
formData.bodyFat = this.dataset.bodyfat;
document.getElementById('bodyFat').value = this.dataset.bodyfat;
updateUI();
});
});
// Form inputs
['name', 'weight', 'height', 'age', 'bodyFat'].forEach(field => {
const input = document.getElementById(field);
if (input) {
input.addEventListener('input', function() {
formData[field] = this.value;
// Update body fat selection visual when typing
if (field === 'bodyFat') {
document.querySelectorAll('[data-bodyfat]').forEach(b => b.classList.remove('selected'));
const matching = document.querySelector(
[data-bodyfat="${this.value}"]);
if (matching) matching.classList.add('selected');
}
updateUI();
});
}
});
}
function updateUI() {
updateProgressBar();
updateNavigationButtons();
updateReviewSection();
}
function updateProgressBar() {
const progress = (currentStep / 4) * 100;
document.getElementById('progressFill').style.width = progress + '%';
}33 844
function updateNavigationButtons() {
const backBtn = document.getElementById('backBtn');
const nextBtn = document.getElementById('nextBtn');
const nextBtnText = document.getElementById('nextBtnText');
// Update back button
backBtn.disabled = currentStep === 1;
backBtn.style.opacity = currentStep === 1 ? '0.5' : '1';
// Update next button
const isValid = isStepValid();
nextBtn.disabled = !isValid;
nextBtn.style.opacity = isValid ? '1' : '0.5';
if (currentStep === 4) {
nextBtnText.textContent = 'Calculate';
} else {
nextBtnText.textContent = 'Next';
}
// Update step indicators
document.querySelectorAll('.nav-dot').forEach((dot, index) => {
dot.classList.toggle('active', index + 1 <= currentStep);
});
// Hide navigation on results page
const navigation = document.getElementById('navigation');
navigation.style.display = currentStep === 5 ? 'none' : 'block';
}
function updateReviewSection() {
if (currentStep === 4) {
document.getElementById('reviewName').textContent = formData.name || 'Anonymous';
document.getElementById('reviewGender').textContent = formData.gender ? formData.gender.charAt(0).toUpperCase() + formData.gender.slice(1) : '-';
document.getElementById('reviewAge').textContent = formData.age ? formData.age + ' years' : '- years';
document.getElementById('reviewWeight').textContent = formData.weight ? formData.weight + ' kg' : '- kg';
document.getElementById('reviewHeight').textContent = formData.height ? formData.height + ' cm' : '- cm';
document.getElementById('reviewBodyFat').textContent = formData.bodyFat ? formData.bodyFat + '%' : '-%';
const activityTitle = formData.activityLevel ? activityLevels[formData.activityLevel].title : '-';
document.getElementById('reviewActivity').textContent = activityTitle;
}
}
function isStepValid() {
switch(currentStep) {
case 1:
return formData.weight && formData.height && formData.age && formData.gender;
case 2:
return formData.activityLevel;
case 3:
return formData.bodyFat;
case 4:
return true;
default:
return false;
}
}
function goNext() {
if (!isStepValid()) return;
if (currentStep < 4) {
showStep(currentStep + 1);
} else {
calculateResults();
showStep(5);
}
}
function goBack() {
if (currentStep > 1) {
showStep(currentStep - 1);
}
}
function showStep(step) {
// Hide all steps
document.querySelectorAll('.step-container').forEach(container => {
container.classList.remove('active');
});
// Show target step
document.getElementById(
step${step}).classList.add('active');
currentStep = step;
updateUI();
}
function calculateBMR(weight, height, age, gender) {33 844
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">🔥</div>
<div class="stat-title">Daily Calories</div>
</div>
<div class="stat-number" id="caloriesPerDay">0</div>
<div class="stat-label">for fat loss</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon" style="background: linear-gradient(135deg, #9333ea, #7c3aed);">🧮</div>
<div class="stat-title">TDEE</div>
</div>
<div class="stat-number" id="tdee">0</div>
<div class="stat-label">calories/day</div>
</div>
</div>
</div>
<!-- Already lean section -->
<div id="alreadyLeanSection" class="hidden">
<div class="already-lean">
<div class="already-lean-emoji">🏆</div>
<div class="already-lean-text" id="alreadyLeanText">
Congratulations! Your abs should already be visible.
</div>
<div class="already-lean-subtitle">
Focus on maintaining your current physique with strength training and proper nutrition.
</div>
</div>
</div>
<!-- Body Composition -->
<div class="body-composition">
<h3 class="composition-title">Body Composition</h3>
<div class="composition-grid">
<div class="composition-item">
<div class="stat-number" id="currentBodyFat">0%</div>
<div class="stat-label">Current BF</div>
</div>
<div class="composition-item">
<div class="stat-number" id="targetBodyFat">0%</div>
<div class="stat-label">Target BF</div>
</div>
<div class="composition-item">
<div class="stat-number" id="leanBodyMass">0</div>
<div class="stat-label">Lean Mass (kg)</div>
</div>
</div>
</div>
<button class="reset-button" onclick="resetCalculator()">Calculate Again</button>
</div>
</div>
<!-- Navigation -->
<div class="navigation" id="navigation">
<div class="nav-content">
<button class="nav-button" id="backBtn" onclick="goBack()">
← Back
</button>
<div class="nav-indicators">
<div class="nav-dot active" data-step="1"></div>
<div class="nav-dot" data-step="2"></div>
<div class="nav-dot" data-step="3"></div>
<div class="nav-dot" data-step="4"></div>
</div>
<button class="nav-button primary" id="nextBtn" onclick="goNext()">
<span id="nextBtnText">Next</span> →
</button>
</div>
</div>
</div>
33 844
<span class="review-value" id="reviewGender">-</span>
</div>
<div class="review-item">
<span class="review-label">Age:</span>
<span class="review-value" id="reviewAge">- years</span>
</div>
</div>
<div>
<div class="review-item">
<span class="review-label">Weight:</span>
<span class="review-value" id="reviewWeight">- kg</span>
</div>
<div class="review-item">
<span class="review-label">Height:</span>
<span class="review-value" id="reviewHeight">- cm</span>
</div>
<div class="review-item">
<span class="review-label">Body Fat:</span>
<span class="review-value" id="reviewBodyFat">-%</span>
</div>
</div>
</div>
<div class="review-divider">
<div class="review-item">
<span class="review-label">Activity Level:</span>
<span class="review-value" id="reviewActivity">-</span>
</div>
</div>
</div>
</div>
<!-- Step 5: Results -->
<div class="step-container" id="step5">
<div class="step-header">
<div class="step-icon" style="background: linear-gradient(135deg, #10b981, #3b82f6);">
🎯
</div>
<h2 class="step-title" id="resultsTitle">Your Abs Journey</h2>
<p class="step-subtitle" id="resultsSubtitle">Here's your personalized timeline</p>
</div>
<!-- Timeline for those who need to lose weight -->
<div id="timelineSection">
<div class="results-timeline">
<div class="results-icon">📅</div>
<div class="results-number" id="monthsToGoal">0</div>
<div class="results-label">months to abs</div>
<div class="results-sublabel">(<span id="weeksToGoal">0</span> weeks)</div>
</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">📉</div>
<div class="stat-title">Weight Loss</div>
</div>
<div class="stat-number" id="weightToLose">0</div>
<div class="stat-label">kg to lose</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon" style="background: linear-gradient(135deg, #10b981, #059669);">🎯</div>
<div class="stat-title">Target Weight</div>
</div>
<div class="stat-number" id="targetWeight">0</div>
<div class="stat-label">kg goal</div>
</div>
33 844
<div class="bodyfat-desc">Abs clearly visible, very lean</div>
</div>
<div class="bodyfat-option" data-bodyfat="18">
<div class="bodyfat-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">💪</div>
<div class="bodyfat-range">16-20%</div>
<div class="bodyfat-title">Athletic</div>
<div class="bodyfat-desc">Abs visible, fit appearance</div>
</div>
<div class="bodyfat-option" data-bodyfat="23">
<div class="bodyfat-icon" style="background: linear-gradient(135deg, #9333ea, #7c3aed);">🏃</div>
<div class="bodyfat-range">21-25%</div>
<div class="bodyfat-title">Lean</div>
<div class="bodyfat-desc">Some definition, healthy look</div>
</div>
<div class="bodyfat-option" data-bodyfat="28">
<div class="bodyfat-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">🚶</div>
<div class="bodyfat-range">26-30%</div>
<div class="bodyfat-title">Average</div>
<div class="bodyfat-desc">Slight softness, normal build</div>
</div>
<div class="bodyfat-option" data-bodyfat="33">
<div class="bodyfat-icon" style="background: linear-gradient(135deg, #ef4444, #dc2626);">🍔</div>
<div class="bodyfat-range">31-35%</div>
<div class="bodyfat-title">Above Average</div>
<div class="bodyfat-desc">Noticeable fat, rounder shape</div>
</div>
<div class="bodyfat-option" data-bodyfat="38">
<div class="bodyfat-icon" style="background: linear-gradient(135deg, #6b7280, #4b5563);">😴</div>
<div class="bodyfat-range">36-40%</div>
<div class="bodyfat-title">High</div>
<div class="bodyfat-desc">Significant fat storage</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Or enter exact percentage:</label>
<input type="number" class="form-input" id="bodyFat" placeholder="25" min="10" max="50" style="text-align: center; font-size: 1.25rem; font-weight: bold;">
</div>
</div>
<!-- Step 4: Review -->
<div class="step-container" id="step4">
<div class="step-header">
<div class="step-icon" style="background: linear-gradient(135deg, #3b82f6, #9333ea);">
ℹ️
</div>
<h2 class="step-title">Ready to calculate?</h2>
<p class="step-subtitle">Confirm your information</p>
</div>
<div class="review-card">
<div class="review-grid">
<div>
<div class="review-item">
<span class="review-label">Name:</span>
<span class="review-value" id="reviewName">Anonymous</span>
</div>
<div class="review-item">
<span class="review-label">Gender:</span>
33 844
<div class="activity-list">
<div class="activity-item" data-activity="sedentary">
<div class="activity-icon" style="background: linear-gradient(135deg, #6b7280, #4b5563);">💺</div>
<div style="flex: 1;">
<div class="option-title">Sedentary</div>
<div class="option-desc">Desk job, little exercise</div>
</div>
<div style="color: #9ca3af; font-size: 0.875rem;">1.2x</div>
</div>
<div class="activity-item" data-activity="light">
<div class="activity-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">🚶</div>
<div style="flex: 1;">
<div class="option-title">Light Active</div>
<div class="option-desc">Exercise 1-3 days/week</div>
</div>
<div style="color: #9ca3af; font-size: 0.875rem;">1.375x</div>
</div>
<div class="activity-item" data-activity="moderate">
<div class="activity-icon" style="background: linear-gradient(135deg, #10b981, #059669);">🏃</div>
<div style="flex: 1;">
<div class="option-title">Moderate</div>
<div class="option-desc">Exercise 3-5 days/week</div>
</div>
<div style="color: #9ca3af; font-size: 0.875rem;">1.55x</div>
</div>
<div class="activity-item" data-activity="active">
<div class="activity-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">💪</div>
<div style="flex: 1;">
<div class="option-title">Very Active</div>
<div class="option-desc">Exercise 6-7 days/week</div>
</div>
<div style="color: #9ca3af; font-size: 0.875rem;">1.725x</div>
</div>
<div class="activity-item" data-activity="veryActive">
<div class="activity-icon" style="background: linear-gradient(135deg, #ef4444, #dc2626);">🔥</div>
<div style="flex: 1;">
<div class="option-title">Extreme</div>
<div class="option-desc">Physical job + daily exercise</div>
</div>
<div style="color: #9ca3af; font-size: 0.875rem;">1.9x</div>
</div>
</div>
</div>
<!-- Step 3: Body Fat Percentage -->
<div class="step-container" id="step3">
<div class="step-header">
<div class="step-icon" style="background: linear-gradient(135deg, #f59e0b, #ef4444);">
👁️
</div>
<h2 class="step-title">Body Fat %</h2>
<p class="step-subtitle">Select your current physique</p>
</div>
<div class="bodyfat-grid">
<div class="bodyfat-option" data-bodyfat="13">
<div class="bodyfat-icon" style="background: linear-gradient(135deg, #10b981, #059669);">🏆</div>
<div class="bodyfat-range">12-15%</div>
<div class="bodyfat-title">Athletic Elite</div>
33 844
.reset-button:hover {
background: linear-gradient(90deg, #4b5563, #374151);
}
.hidden {
display: none;
}
/* Responsive Design */
@media (max-width: 480px) {
.input-grid-3 {
grid-template-columns: 1fr;
}
.bodyfat-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: 1fr;
}
.composition-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<div class="header-content">
<h1>💪 Abs Calculator</h1>
<p>When will I get abs?</p>
</div>
</div>
<!-- Progress Bar -->
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<!-- Content -->
<div class="content">
<!-- Step 1: Basic Information -->
<div class="step-container active" id="step1">
<div class="step-header">
<div class="step-icon" style="background: linear-gradient(135deg, #9333ea, #ec4899);">
👤
</div>
<h2 class="step-title">Let's get started</h2>
<p class="step-subtitle">Tell us about yourself</p>
</div>
<div class="form-group">
<input type="text" class="form-input" id="name" placeholder="Your name">
</div>
<div class="button-group">
<div class="option-button" data-gender="male">
<div class="option-emoji">👨</div>
<div class="option-title">Male</div>
</div>
<div class="option-button" data-gender="female">
<div class="option-emoji">👩</div>
<div class="option-title">Female</div>
</div>
</div>
<div class="input-grid-3">
<div class="form-group">
<label class="form-label">Weight</label>
<input type="number" class="form-input" id="weight" placeholder="70">
<div class="input-helper">kg</div>
</div>
<div class="form-group">
<label class="form-label">Height</label>
<input type="number" class="form-input" id="height" placeholder="175">
<div class="input-helper">cm</div>
</div>
<div class="form-group">
<label class="form-label">Age</label>
<input type="number" class="form-input" id="age" placeholder="25">
<div class="input-helper">years</div>
</div>
</div>
</div>
<!-- Step 2: Activity Level -->
<div class="step-container" id="step2">
<div class="step-header">
<div class="step-icon" style="background: linear-gradient(135deg, #10b981, #3b82f6);">
🏃
</div>
<h2 class="step-title">Activity Level</h2>
<p class="step-subtitle">How active are you?</p>
</div>
33 844
.stat-label {
color: #9ca3af;
font-size: 0.875rem;
}
.already-lean {
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 1.5rem;
padding: 2rem;
text-align: center;
box-shadow: 0 25px 50px rgba(16, 185, 129, 0.3);
}
.already-lean-emoji {
font-size: 3.75rem;
margin-bottom: 1rem;
}
.already-lean-text {
color: white;
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 1rem;
}
.already-lean-subtitle {
color: rgba(255, 255, 255, 0.8);
}
.body-composition {
background: rgba(31, 41, 55, 0.3);
backdrop-filter: blur(10px);
border-radius: 1rem;
padding: 1.5rem;
border: 1px solid #374151;
margin-bottom: 1.5rem;
}
.composition-title {
color: white;
font-weight: 600;
font-size: 1.125rem;
margin-bottom: 1rem;
}
.composition-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
text-align: center;
}
.composition-item .stat-number {
font-size: 1.5rem;
}
.navigation {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-width: 28rem;
margin: 0 auto;
background: rgba(17, 24, 39, 0.95);
backdrop-filter: blur(10px);
border-top: 1px solid #1f2937;
padding: 1rem;
}
.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-button {
padding: 0.75rem;
border-radius: 1rem;
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.nav-button:hover:not(:disabled) {
color: white;
background: #1f2937;
}
.nav-button:disabled {
color: #4b5563;
cursor: not-allowed;
}
.nav-button.primary {
background: linear-gradient(90deg, #9333ea, #ec4899);
color: white;
padding: 0.75rem 1.5rem;
box-shadow: 0 10px 25px rgba(147, 51, 234, 0.25);
}
.nav-button.primary:disabled {
background: #1f2937;
color: #6b7280;
box-shadow: none;
}
.nav-indicators {
display: flex;
gap: 0.5rem;
}
.nav-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: #374151;
transition: background 0.3s ease;
}
.nav-dot.active {
background: #9333ea;
}
.reset-button {
width: 100%;
background: linear-gradient(90deg, #374151, #1f2937);
color: white;
padding: 1rem 1.5rem;
border-radius: 1rem;
border: none;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
33 844
.bodyfat-option.selected {
border-color: #9333ea;
background: rgba(147, 51, 234, 0.1);
box-shadow: 0 0 20px rgba(147, 51, 234, 0.2);
}
.bodyfat-icon {
width: 3rem;
height: 3rem;
margin: 0 auto 1rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.bodyfat-range {
font-weight: 600;
margin-bottom: 0.25rem;
}
.bodyfat-title {
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
.bodyfat-desc {
font-size: 0.75rem;
color: #6b7280;
}
.review-card {
background: rgba(31, 41, 55, 0.5);
backdrop-filter: blur(10px);
border-radius: 1rem;
padding: 1.5rem;
border: 1px solid #374151;
}
.review-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.review-item {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.review-item:last-child {
margin-bottom: 0;
}
.review-label {
color: #9ca3af;
font-weight: 500;
}
.review-value {
color: white;
font-weight: 500;
}
.review-divider {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #374151;
}
.results-timeline {
background: linear-gradient(135deg, #9333ea, #ec4899);
border-radius: 1.5rem;
padding: 2rem;
text-align: center;
box-shadow: 0 25px 50px rgba(147, 51, 234, 0.3);
margin-bottom: 1.5rem;
}
.results-icon {
margin-bottom: 1rem;
}
.results-number {
font-size: 3.75rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.results-label {
color: rgba(255, 255, 255, 0.8);
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
.results-sublabel {
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
.stat-card {
background: rgba(31, 41, 55, 0.5);
backdrop-filter: blur(10px);
border-radius: 1rem;
padding: 1.5rem;
border: 1px solid #374151;
}
.stat-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.stat-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.stat-title {
color: white;
font-weight: 600;
}
.stat-number {
font-size: 1.875rem;
font-weight: bold;
color: white;
margin-bottom: 0.25rem;
}
33 844
.form-input::placeholder {
color: #6b7280;
}
.input-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.input-grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
.input-helper {
font-size: 0.75rem;
color: #6b7280;
margin-top: 0.25rem;
}
.button-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
.option-button {
padding: 1.5rem;
border-radius: 1rem;
border: 2px solid #374151;
background: rgba(31, 41, 55, 0.5);
color: white;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.option-button:hover {
border-color: #4b5563;
}
.option-button.selected {
border-color: #9333ea;
background: rgba(147, 51, 234, 0.1);
box-shadow: 0 0 20px rgba(147, 51, 234, 0.2);
}
.option-button.selected.male {
border-color: #3b82f6;
background: rgba(59, 130, 246, 0.1);
box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}
.option-button.selected.female {
border-color: #ec4899;
background: rgba(236, 72, 153, 0.1);
box-shadow: 0 0 20px rgba(236, 72, 153, 0.2);
}
.option-button.selected.activity {
border-color: #10b981;
background: rgba(16, 185, 129, 0.1);
box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}
.option-emoji {
font-size: 1.875rem;
margin-bottom: 0.5rem;
}
.option-title {
font-weight: 600;
margin-bottom: 0.25rem;
}
.option-desc {
font-size: 0.875rem;
color: #9ca3af;
}
.activity-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.activity-item {
padding: 1.5rem;
border-radius: 1rem;
border: 2px solid #374151;
background: rgba(31, 41, 55, 0.5);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 1rem;
}
.activity-item:hover {
border-color: #4b5563;
}
.activity-item.selected {
border-color: #10b981;
background: rgba(16, 185, 129, 0.1);
box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}
.activity-icon {
width: 3rem;
height: 3rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.bodyfat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
.bodyfat-option {
padding: 1.5rem;
border-radius: 1rem;
border: 2px solid #374151;
background: rgba(31, 41, 55, 0.5);
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.bodyfat-option:hover {
border-color: #4b5563;
}
33 844
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>💪 Abs Calculator - When Will I Get Abs?</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #1f2937 0%, #000000 50%, #1f2937 100%);
min-height: 100vh;
color: white;
}
.container {
max-width: 28rem;
margin: 0 auto;
background: rgba(17, 24, 39, 0.8);
backdrop-filter: blur(10px);
min-height: 100vh;
}
.header {
background: linear-gradient(90deg, #9333ea 0%, #ec4899 50%, #3b82f6 100%);
padding: 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
}
.header-content {
position: relative;
z-index: 1;
}
.header h1 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.25rem;
}
.header p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
}
.progress-bar {
background: #1f2937;
height: 4px;
}
.progress-fill {
background: linear-gradient(90deg, #9333ea, #ec4899);
height: 100%;
transition: width 0.5s ease;
}
.content {
padding: 1.5rem;
padding-bottom: 8rem;
}
.step-container {
display: none;
}
.step-container.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.step-header {
text-align: center;
margin-bottom: 2rem;
}
.step-icon {
width: 5rem;
height: 5rem;
margin: 0 auto 1.5rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
}
.step-title {
font-size: 1.875rem;
font-weight: bold;
margin-bottom: 0.75rem;
}
.step-subtitle {
color: #9ca3af;
font-size: 1.125rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
color: #9ca3af;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.form-input {
width: 100%;
padding: 1rem;
background: #1f2937;
border: 1px solid #374151;
border-radius: 1rem;
color: white;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #9333ea;
box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.2);
}
33 844
*Free Business Analytics Webinar + Certificate by Guvi & HCL!* 📊🚀
Learn Excel, SQL, Power BI, Python, & more – everything you need for Business Analytics! 📈
*Perfect for everyone* – No experience needed! ✅
Only *500 seats* left! 😳
*Register now (100% Free)!* 👇
https://link.guvi.in/codehubb02083
33 844
Advanced inventory management system FULL SOURCE CODE FREE 👇
https://inprogrammer.com/inventory-management-using-python/
33 844
Free Business Analytics Webinar + Certificate by Guvi - HCL!* 💻🚀
Learn Python, SQL, Excel, Power BI, & more! 📈
*Perfect for everyone* – No experience needed! ✅
Only *300 seats* left! 😳
*Register now (100% Free)* 👇
https://link.guvi.in/codehubb02075
33 844
Data Analyst Power BI and SQL Learning Resources🔥
https://bytebynote.site/product/data-analyst-power-bi-and-sql-learning-resources/
33 844
Stanford’s Machine Learning - by Andrew Ng
A complete lecture notes of 227 pages. Available Free.
33 844
FREE ML/Ai MASTER CLASSS WITH FREE CERTIFICATION 🎓🧑🎓
Link 👉 https://forms.gle/HJCXb1sUUcY2kEE3A
33 844
Bank management system python projects - complete source code
Features 🔥
User Authentication
Login and registration system
Password encryption using SHA-256
User profile management
Account Management
Create different account types (Savings, Checking, Fixed Deposit, Loan)
View account details and transactions
Close accounts
Transactions
Deposits and withdrawals
Account-to-account transfers
Transaction history with detailed views
Dashboard
Overview of accounts and balances
Recent transaction activity
Quick action buttons
UI Features
Modern design with custom colors
Animations for transitions
Icons for navigation
Responsive layout
Database
SQLite database for data persistence
Tables for users, accounts, and transactions
Source code ➡️ click here
