ru
Feedback

Не попадитесь на канал ботавода! Telemetrio находит и помечает такие каналы 👉 Хотите видеть метку — оформите подписку

Codehub

Codehub

Открыть в Telegram

📈 Аналитический обзор Telegram-канала Codehub

Канал Codehub (@pythonadvisorai) языкового сегмента Английский является активным участником. Сейчас сообщество объединяет 31 547 подписчиков, занимая 4 204 место в категории Технологии и приложения и 1 033 место в регионе Малайзия.

📊 Показатели аудитории и динамика

С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 31 547 подписчиков.

Согласно последним данным от 25 октября, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -447, а за последние 24 часа — -18, при этом общий охват остаётся высоким.

  • Статус верификации: Не верифицирован
  • Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 7.53%. В первые 24 часа после публикации контент обычно набирает N/A% реакций от общего числа подписчиков.
  • Охват публикаций: В среднем каждый пост получает 0 просмотров. В течение первых суток публикация набирает 0 просмотров.
  • Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 0.

📝 Описание и контентная политика

Автор описывает ресурс как площадку для выражения субъективного мнения:
“Free Programming resources.”

Благодаря высокой частоте обновлений (последние данные получены 26 октября, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.

31 547
Подписчики
-1824 часа
-1067 дней
-44730 дней
Архив постов
\n \n","datePublished":"2025-06-30T08:42:16Z","dateModified":"2025-06-30T08:42:49Z","author":{"@type":"Organization","name":"Codehub","url":"https://telemetr.io/ru/channels/1320428598-pythonadvisorai","image":"https://img.telemetr.io/c/1rmnNs/6105153474644348728?ty=x"},"publisher":{"@type":"Organization","name":"Codehub","url":"https://telemetr.io/ru/channels/1320428598-pythonadvisorai","image":"https://img.telemetr.io/c/1rmnNs/6105153474644348728?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1320428598-pythonadvisorai/posts/1247","url":"https://telemetr.io/ru/channels/1320428598-pythonadvisorai/posts/1247","mainEntityOfPage":"https://telemetr.io/ru/channels/1320428598-pythonadvisorai/posts/1247","headline":"if (gender === 'male') { return 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age); } else { retur…","articleBody":"if (gender === 'male') {\n return 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age);\n } else {\n return 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age);\n }\n }\n\n function calculateResults() {\n const weight = parseFloat(formData.weight);\n const height = parseFloat(formData.height);\n const age = parseInt(formData.age);\n const bodyFatPercent = parseFloat(formData.bodyFat);\n const gender = formData.gender;\n const activityLevel = formData.activityLevel;\n\n // Calculate lean body mass\n const leanBodyMass = weight * (1 - bodyFatPercent / 100);\n\n // Target body fat for visible abs\n const targetBodyFat = gender === 'male' ? 12 : 16;\n\n // Calculate target weight for abs\n const targetWeight = leanBodyMass / (1 - targetBodyFat / 100);\n\n // Weight to lose\n const weightToLose = Math.max(0, weight - targetWeight);\n\n // Calculate BMR and TDEE\n const bmr = calculateBMR(weight, height, age, gender);\n const tdee = bmr * activityLevels[activityLevel].multiplier;\n\n // Time estimation (0.5 kg per week)\n const weeksToGoal = weightToLose > 0 ? Math.ceil(weightToLose / 0.5) : 0;\n const monthsToGoal = Math.ceil(weeksToGoal / 4.33);\n\n // Calories for fat loss (500 calorie deficit)\n const caloriesPerDay = tdee - 500;\n\n // Check if already lean enough\n const isAlreadyLean = bodyFatPercent <= targetBodyFat;\n\n // Update results display\n displayResults({\n currentWeight: weight,\n targetWeight: targetWeight.toFixed(1),\n weightToLose: weightToLose.toFixed(1),\n leanBodyMass: leanBodyMass.toFixed(1),\n currentBodyFat: bodyFatPercent,\n targetBodyFat: targetBodyFat,\n bmr: Math.round(bmr),\n tdee: Math.round(tdee),\n weeksToGoal: weeksToGoal,\n monthsToGoal: monthsToGoal,\n caloriesPerDay: Math.round(caloriesPerDay),\n isAlreadyLean: isAlreadyLean\n });\n }\n\n function displayResults(results) {\n // Update titles\n if (results.isAlreadyLean) {\n document.getElementById('resultsTitle').textContent = '🎉 You already have abs!';\n document.getElementById('resultsSubtitle').textContent =\n (formData.name ? formData.name + ', ' : '') + \"you're already lean enough to see abs!\";\n\n // Show already lean section, hide timeline\n document.getElementById('alreadyLeanSection').classList.remove('hidden');\n document.getElementById('timelineSection').classList.add('hidden');\n\n document.getElementById('alreadyLeanText').textContent =\n Congratulations! At ${results.currentBodyFat}% body fat, your abs should already be visible.;\n } else {\n document.getElementById('resultsTitle').textContent = '🎯 Your Abs Journey';\n document.getElementById('resultsSubtitle').textContent =\n (formData.name ? formData.name + ', ' : '') + \"here's your personalized timeline\";\n\n // Show timeline section, hide already lean\n document.getElementById('timelineSection').classList.remove('hidden');\n document.getElementById('alreadyLeanSection').classList.add('hidden');","datePublished":"2025-06-30T08:42:16Z","dateModified":"2025-06-30T08:42:49Z","author":{"@type":"Organization","name":"Codehub","url":"https://telemetr.io/ru/channels/1320428598-pythonadvisorai","image":"https://img.telemetr.io/c/1rmnNs/6105153474644348728?ty=x"},"publisher":{"@type":"Organization","name":"Codehub","url":"https://telemetr.io/ru/channels/1320428598-pythonadvisorai","image":"https://img.telemetr.io/c/1rmnNs/6105153474644348728?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1320428598-pythonadvisorai/posts/1246","url":"https://telemetr.io/ru/channels/1320428598-pythonadvisorai/posts/1246","mainEntityOfPage":"https://telemetr.io/ru/channels/1320428598-pythonadvisorai/posts/1246","headline":"
Codehub
31 547
+1
Pandas Part 1.pdf3.52 KB

Codehub
31 547
*Free Data Analytics Webinar + Certificate by Guvi & HCL!* 💻🚀 Learn Python, SQL, Excel, Power BI, & more! 📈 *Perfect for e
*Free Data Analytics Webinar + Certificate by Guvi & HCL!* 💻🚀 Learn Python, SQL, Excel, Power BI, & more! 📈 *Perfect for everyone* – No experience needed! ✅ Only *500 seats* left! 😳 *Register now (100% Free)* 👇 https://link.guvi.in/codehubb02217 *Join us on WhatsApp:* https://chat.whatsapp.com/JyQhFtCaaWKFRqDAzME1so?mode=ac_t

Codehub
31 547
*Free Data Analytics Webinar + Certificate by HCL & Guvi!* 💻🚀 Learn Python, SQL, Excel, Power BI, & more! 📈 *Perfect for e
*Free Data Analytics Webinar + Certificate by HCL & Guvi!* 💻🚀 Learn Python, SQL, Excel, Power BI, & more! 📈 *Perfect for everyone* – No experience needed! ✅ Only *500 seats* left! 😳 *Register now (100% Free)* 👇 https://link.guvi.in/codehubb02138 *Join us on WhatsApp!* 👇 https://chat.whatsapp.com/KKSJWFTklUyCnPD9MW2tKZ?mode=ac_t

Codehub
31 547
*Free Data Analytics Webinar + Certificate by HCL & Guvi!* 💻🚀 Learn Python, SQL, Excel, Power BI, & more! 📈 *Perfect for everyone* – No experience needed! ✅ Only *500 seats* left! 😳 *Register now (100% Free)* 👇 https://link.guvi.in/codehubb02138 *Join us on WhatsApp!* 👇 https://chat.whatsapp.com/KKSJWFTklUyCnPD9MW2tKZ?mode=ac_t

Codehub
31 547
index.html0.47 KB

Codehub
31 547
// Update timeline data document.getElementById('monthsToGoal').textContent = results.monthsToGoal; document.getElementById('weeksToGoal').textContent = results.weeksToGoal; document.getElementById('weightToLose').textContent = results.weightToLose; document.getElementById('targetWeight').textContent = results.targetWeight; document.getElementById('caloriesPerDay').textContent = results.caloriesPerDay; document.getElementById('tdee').textContent = results.tdee; } // Update body composition (shown for both cases) document.getElementById('currentBodyFat').textContent = results.currentBodyFat + '%'; document.getElementById('targetBodyFat').textContent = results.targetBodyFat + '%'; document.getElementById('leanBodyMass').textContent = results.leanBodyMass; } function resetCalculator() { currentStep = 1; formData = { name: '', gender: '', weight: '', height: '', age: '', activityLevel: '', bodyFat: '' }; // Clear all form inputs document.querySelectorAll('input').forEach(input => input.value = ''); // Clear all selections document.querySelectorAll('.selected').forEach(el => el.classList.remove('selected', 'male', 'female', 'activity') ); // Show first step showStep(1); } // API Integration Function (for when you want to connect to PHP backend) async function saveToDatabase(calculationData) { try { const response = await fetch('api/calculate.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ ...formData, session_id: getSessionId(), ...calculationData }) }); const result = await response.json(); if (result.success) { console.log('Calculation saved with ID:', result.calculation_id); } else { console.error('Failed to save calculation:', result.message); } } catch (error) { console.error('API Error:', error); } } function getSessionId() { let sessionId = localStorage.getItem('abs_calc_session'); if (!sessionId) { sessionId = 'session_' + Math.random().toString(36).substr(2, 9) + Date.now(); localStorage.setItem('abs_calc_session', sessionId); } return sessionId; } </script> </body> </html>

Codehub
31 547
if (gender === 'male') { return 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age); } else { return 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age); } } function calculateResults() { const weight = parseFloat(formData.weight); const height = parseFloat(formData.height); const age = parseInt(formData.age); const bodyFatPercent = parseFloat(formData.bodyFat); const gender = formData.gender; const activityLevel = formData.activityLevel; // Calculate lean body mass const leanBodyMass = weight * (1 - bodyFatPercent / 100); // Target body fat for visible abs const targetBodyFat = gender === 'male' ? 12 : 16; // Calculate target weight for abs const targetWeight = leanBodyMass / (1 - targetBodyFat / 100); // Weight to lose const weightToLose = Math.max(0, weight - targetWeight); // Calculate BMR and TDEE const bmr = calculateBMR(weight, height, age, gender); const tdee = bmr * activityLevels[activityLevel].multiplier; // Time estimation (0.5 kg per week) const weeksToGoal = weightToLose > 0 ? Math.ceil(weightToLose / 0.5) : 0; const monthsToGoal = Math.ceil(weeksToGoal / 4.33); // Calories for fat loss (500 calorie deficit) const caloriesPerDay = tdee - 500; // Check if already lean enough const isAlreadyLean = bodyFatPercent <= targetBodyFat; // Update results display displayResults({ currentWeight: weight, targetWeight: targetWeight.toFixed(1), weightToLose: weightToLose.toFixed(1), leanBodyMass: leanBodyMass.toFixed(1), currentBodyFat: bodyFatPercent, targetBodyFat: targetBodyFat, bmr: Math.round(bmr), tdee: Math.round(tdee), weeksToGoal: weeksToGoal, monthsToGoal: monthsToGoal, caloriesPerDay: Math.round(caloriesPerDay), isAlreadyLean: isAlreadyLean }); } function displayResults(results) { // Update titles if (results.isAlreadyLean) { document.getElementById('resultsTitle').textContent = '🎉 You already have abs!'; document.getElementById('resultsSubtitle').textContent = (formData.name ? formData.name + ', ' : '') + "you're already lean enough to see abs!"; // Show already lean section, hide timeline document.getElementById('alreadyLeanSection').classList.remove('hidden'); document.getElementById('timelineSection').classList.add('hidden'); document.getElementById('alreadyLeanText').textContent = Congratulations! At ${results.currentBodyFat}% body fat, your abs should already be visible.; } else { document.getElementById('resultsTitle').textContent = '🎯 Your Abs Journey'; document.getElementById('resultsSubtitle').textContent = (formData.name ? formData.name + ', ' : '') + "here's your personalized timeline"; // Show timeline section, hide already lean document.getElementById('timelineSection').classList.remove('hidden'); document.getElementById('alreadyLeanSection').classList.add('hidden');

Codehub
31 547
<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 + '%'; }

Codehub
31 547
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) {

Codehub
31 547
<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>

Codehub
31 547
<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>

Codehub
31 547
<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>

Codehub
31 547
<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>

Codehub
31 547
.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>

Codehub
31 547
.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); }

Codehub
31 547
.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; }

Codehub
31 547
.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; }

Codehub
31 547
<!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); }

Codehub
31 547
*Free Business Analytics Webinar + Certificate by Guvi & HCL!* 📊🚀 Learn Excel, SQL, Power BI, Python, & more – everything y
*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