https://iamharddrive.heytcm.com/

스캔 ID:
e0d72133-1e8d-418c-b018-18e14741c533완료
제출된 URL:
https://iamharddrive.heytcm.com/
보고서 완료:
링크텍스트
https://weight-to-storage-en.example.comEnglish
https://weight-to-storage-zh.example.com中文
이름유형
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
getRandomFunFactfunction
calculatePercentilefunction
calculateBrainCapacityfunction
calculateStoragefunction
showErrorfunction
typeTextfunction
generateMiniDrivesfunction
<html><head><base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weight to TB Hard Drive Calculator</title>
<meta name="description" content="A fun tool that converts your weight into hard drive storage capacity and provides interesting storage knowledge and comparisons.">
<meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large">

<!-- Open Graph Meta Tags -->
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:title" content="Weight to TB Hard Drive Calculator - Fun Tech">
<meta property="og:description" content="A fun tool that converts your weight into hard drive storage capacity and provides interesting storage knowledge and comparisons.">
<meta property="og:url" content="https://weight-to-storage-en.example.com">
<meta property="og:site_name" content="Fun Tech Tools">

<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Weight to TB Hard Drive Calculator - Fun Tech">
<meta name="twitter:description" content="A fun tool that converts your weight into hard drive storage capacity and provides interesting storage knowledge and comparisons.">

<!-- Schema.org Markup -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Weight to TB Hard Drive Calculator",
  "description": "A fun tool that converts your weight into hard drive storage capacity and provides interesting storage knowledge and comparisons.",
  "applicationCategory": "UtilityApplication",
  "operatingSystem": "Any",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  }
}
</script>

<style>
:root {
  --dark-grey: #333;
  --blue: #007bff;
  --light-blue: #4da6ff;
}

body {
  margin: 0;
  padding: 20px;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--dark-grey);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

.input-section {
  background: rgba(0,0,0,0.3);
  padding: 20px;
  border-radius: 10px;
  margin: 20px 0;
  width: 400px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.input-section::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

.weight-input {
  width: 120px;
  padding: 10px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  margin: 10px;
  text-align: center;
  background: rgba(255,255,255,0.9);
  transition: all 0.3s ease;
}

.weight-input:focus {
  outline: none;
  box-shadow: 0 0 10px var(--light-blue);
  transform: scale(1.05);
}

.calculate-btn {
  background: var(--blue);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.calculate-btn:hover {
  background: var(--light-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

.calculate-btn:active {
  transform: translateY(0);
}

.hard-drive {
  position: relative;
  width: 400px;
  height: 260px;
  background: linear-gradient(145deg, #444, #222);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  margin: 20px 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.platter {
  width: 200px;
  height: 200px;
  background: linear-gradient(145deg, #666, #333);
  border-radius: 50%;
  position: absolute;
  left: 40px;
  top: 30px;
  animation: spin 2s linear infinite;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.platter::before {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.platter::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background: radial-gradient(#999, #666);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.result-section {
  text-align: center;
  margin: 20px 0;
}

.result-text {
  font-size: 24px;
  margin: 10px 0;
}

.fun-fact {
  font-size: 16px;
  color: #aaa;
  margin: 10px 0;
}

.drives-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
  max-width: 800px;
}

.mini-drive {
  width: 60px;
  height: 40px;
  background: linear-gradient(145deg, #444, #222);
  border-radius: 5px;
  transform: scale(0);
  transition: transform 0.5s;
}

.storage-comparison {
  margin: 20px 0;
  padding: 15px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  max-width: 400px;
}

.comparison-item {
  display: flex;
  align-items: center;
  margin: 10px 0;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s ease-out;
}

.comparison-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.comparison-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  fill: #fff;
}

.share-section {
  margin-top: 20px;
}

.share-btn {
  background: #1da1f2;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  margin: 0 5px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.share-btn:hover {
  opacity: 0.8;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.roast-text {
  font-size: 18px;
  color: #ff6b6b;
  margin: 15px 0;
  padding: 10px;
  background: rgba(255,0,0,0.1);
  border-radius: 8px;
  animation: fadeIn 0.5s ease-out;
}

.stats-section {
  background: rgba(0,0,0,0.2);
  padding: 15px;
  border-radius: 8px;
  margin: 20px 0;
  width: 400px;
}

.percentage-bar {
  width: 100%;
  height: 20px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0;
}

.percentage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--light-blue));
  width: 0%;
  transition: width 1s ease-out;
  position: relative;
}

.percentage-text {
  color: #fff;
  font-size: 14px;
  margin: 5px 0;
}

.brain-section {
  background: rgba(0,0,0,0.2);
  padding: 20px;
  border-radius: 10px;
  margin: 20px 0;
  width: 400px;
  text-align: center;
}

.brain-icon {
  font-size: 48px;
  margin: 10px 0;
  animation: pulse 2s infinite;
}

.brain-stats {
  font-size: 18px;
  margin: 15px 0;
  color: #4da6ff;
}

.brain-fact {
  font-size: 16px;
  color: #aaa;
  margin: 10px 0;
  font-style: italic;
}

.gender-select {
  margin: 10px 0;
}

.gender-select label {
  margin: 0 10px;
  cursor: pointer;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.loading.active {
  opacity: 1;
  pointer-events: auto;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #fff;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.brain-visualization {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  transition: transform 0.5s;
}

.brain-visualization svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(77, 166, 255, 0.3));
}

.brain-visualization path {
  fill: var(--blue);
  animation: glow 2s infinite alternate;
}

.error-message {
  color: #ff6b6b;
  font-size: 14px;
  margin: 5px 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s;
}

.error-message.active {
  opacity: 1;
  transform: translateY(0);
}

@keyframes glow {
  from { filter: brightness(1); }
  to { filter: brightness(1.3); }
}

.brain-comparison {
  margin-top: 15px;
}

.brain-comp-item {
  font-size: 16px;
  color: #fff;
  margin: 5px 0;
}

.locale-nav {
  margin-top: 30px;
  padding: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}

.locale-link {
  display: inline-block;
  padding: 8px 15px;
  margin: 0 10px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 5px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.locale-link:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

.locale-link.active {
  background: var(--blue);
  border-color: var(--blue);
}
</style>
</head>
<body>

<h1>Weight to TB Hard Drive Calculator</h1>

<div class="input-section">
  <h2>Enter Your Weight</h2>
  <input type="number" class="weight-input" id="weightInput" placeholder="kg" min="1" max="300">
  <div class="error-message" id="errorMessage"></div>
  <div class="gender-select">
    <label>
      <input type="radio" name="gender" value="male" checked=""> Male
    </label>
    <label>
      <input type="radio" name="gender" value="female"> Female
    </label>
  </div>
  <button class="calculate-btn" onclick="calculateStorage()">Calculate</button>
</div>

<div class="loading" id="loadingOverlay">
  <div class="loading-spinner"></div>
</div>

<div class="hard-drive" id="mainDrive" style="transform: scale(1);">
  <div class="platter"></div>
</div>

<div class="result-section">
  <div class="result-text" id="resultText"></div>
  <div class="fun-fact" id="funFact"></div>
</div>

<div class="storage-comparison" id="storageComparison"></div>

<div class="drives-container" id="drivesContainer"></div>

<div class="stats-section" id="statsSection" style="display: none;">
  <h3>Statistics</h3>
  <div class="percentage-bar">
    <div class="percentage-fill" id="percentageFill"></div>
  </div>
  <div class="percentage-text" id="percentageText"></div>
  <div class="roast-text" id="roastText"></div>
</div>

<div class="brain-section" id="brainSection" style="display: none;">
  <h3>Brain Capacity Analysis</h3>
  <div class="brain-visualization">
    <svg viewBox="0 0 100 100">
      <path d="M50 10 C20 10 10 30 10 50 C10 70 30 90 50 90 C70 90 90 70 90 50 C90 30 80 10 50 10Z"></path>
    </svg>
  </div>
  <div class="brain-stats" id="brainStats"></div>
  <div class="brain-fact" id="brainFact"></div>
</div>

<div class="share-section">
  <button class="share-btn" onclick="shareOnTwitter()">Share on Twitter</button>
  <button class="share-btn" onclick="shareOnWeibo()">Share on Weibo</button>
</div>

<div class="locale-nav">
  <a href="https://weight-to-storage-en.example.com" class="locale-link">English</a>
  <a href="https://weight-to-storage-zh.example.com" class="locale-link active">中文</a>
</div>

<script>
const funFacts = [
  "A 4K movie requires about 100GB of storage",
  "1TB can store about 250,000 high-res photos",
  "A 1TB hard drive can store about 500 hours of HD video",
  "Modern games need an average of 100GB storage",
  "1TB equals 1,000,000MB",
  "The first hard drive was invented by IBM in 1956, with only 3.75MB",
  "The largest consumer hard drive today is 20TB",
  "A 1TB hard drive can store about 200,000 MP3 songs",
  "Data centers process over 2.5 exabytes daily", 
  "Global data created per minute exceeds 1.7MB",
  "Human brain storage capacity is about 2.5PB, equal to 300 years of TV",
  "The brain generates about 70,000 thoughts per day",
  "Global data centers consume power equal to 25 power plants",
  "If printed, human-created data would cover China four times"
];

const comparisons = [
  {
    icon: '📱',
    text: 'iPhone 13 Pro (1TB)'
  },
  {
    icon: '🎮',
    text: 'modern games (100GB)'
  },
  {
    icon: '🎬',
    text: '4K movies (100GB)'
  }
];

const BRAIN_COMPARISONS = [
  {
    icon: '🧠',
    text: 'average human brain capacity'
  },
  {
    icon: '💻',
    text: 'supercomputer'
  },
  {
    icon: '📚',
    text: 'library digital storage'
  }
];

const roastMessages = [
  "Your hard drive capacity is bigger than a data center! Maybe try some exercise~",
  "Wow! This much storage could hold the entire internet!",
  "Your storage capacity could backup all of Netflix!",
  "Such huge capacity, consider converting some to muscle!",
  "Amazing storage! But maybe cut down on junk food~",
  "Your storage is bigger than NASA's supercomputer! Consider losing weight?",
  "Your storage could hold a million movies! But maybe exercise more!"
];

const BRAIN_FACTS = [
  "Average human brain weighs about 1.4kg",
  "Brain processes about 110,000GB per second",
  "Brain storage capacity estimated at 2.5PB",
  "One neuron can connect with up to 10,000 others",
  "Brain has about 86 billion neurons",
];

const BRAIN_ROASTS = [
  "Your brain storage is stronger than a supercomputer! Don't let it get rusty though~",
  "With such brain capacity, why not learn something new!",
  "Your brain processing power is amazing! Use that potential!",
  "With such computing power, why not solve world problems?",
];

function getRandomFunFact() {
  return funFacts[Math.floor(Math.random() * funFacts.length)];
}

function calculatePercentile(tbStorage) {
  const averageStorage = 350; 
  const stdDev = 100;
  
  const zScore = (tbStorage - averageStorage) / stdDev;
  
  const percentile = Math.min(99.9, Math.max(0.1, 
    (1 - Math.exp(-zScore * 0.7)) * 100
  ));
  
  return percentile;
}

function calculateBrainCapacity(weight, gender) {
  const maleRatio = 0.02; 
  const femaleRatio = 0.023; 
  
  const ratio = gender === 'female' ? femaleRatio : maleRatio;
  const brainWeight = weight * ratio;
  
  const brainStorageCapacity = brainWeight * 1800; 
  
  const neuronCount = brainWeight * 86000000000 / 1.4; // Based on average brain having 86B neurons
  const synapseCount = neuronCount * 1000; // Each neuron has ~1000 synapses
  
  return {
    weight: brainWeight.toFixed(2),
    storage: brainStorageCapacity.toFixed(2),
    neurons: neuronCount.toExponential(2),
    synapses: synapseCount.toExponential(2)
  };
}

async function calculateStorage() {
  const weightInput = document.getElementById('weightInput');
  const errorMessage = document.getElementById('errorMessage');
  const loading = document.getElementById('loadingOverlay');
  
  // Input validation
  if (!weightInput.value) {
    showError('Please enter weight');
    return;
  }
  
  const weight = parseFloat(weightInput.value);
  if (weight <= 0 || weight > 300) {
    showError('Please enter a valid weight between 1-300kg');
    return;
  }

  try {
    // Show loading
    loading.classList.add('active');
    
    // Artificial delay for effect
    await new Promise(resolve => setTimeout(resolve, 800));
    
    const tbStorage = weight * 5;
    const gender = document.querySelector('input[name="gender"]:checked').value;
    const brainCapacity = calculateBrainCapacity(weight, gender);
    
    const brainSection = document.getElementById('brainSection');
    brainSection.style.display = 'block';
    
    updateBrainSection(brainCapacity);
    
    const statsSection = document.getElementById('statsSection');
    statsSection.style.display = 'block';
    
    const percentageFill = document.getElementById('percentageFill');
    const percentageText = document.getElementById('percentageText');
    const roastText = document.getElementById('roastText');
    
    const percentile = calculatePercentile(tbStorage);
    percentageFill.style.width = `${percentile}%`;
    percentageText.textContent = `Your storage capacity exceeds ${percentile.toFixed(1)}% of users!`;
    
    const roastIndex = Math.floor(percentile / 15); 
    const roastMessage = roastMessages[Math.min(roastIndex, roastMessages.length - 1)];
    roastText.textContent = roastMessage;

    const inputSection = document.querySelector('.input-section');
    inputSection.style.transform = 'scale(0.98)';
    setTimeout(() => inputSection.style.transform = 'scale(1)', 200);

    const mainDrive = document.getElementById('mainDrive');
    mainDrive.style.transform = 'scale(1.1) rotate(5deg)';
    setTimeout(() => mainDrive.style.transform = 'scale(1) rotate(0deg)', 500);
    
    const resultText = document.getElementById('resultText');
    const finalText = `Your weight of ${weight}kg is equivalent to ${tbStorage}TB of storage space!`;
    typeText(resultText, finalText);
    
    const funFact = document.getElementById('funFact');
    funFact.style.opacity = '0';
    setTimeout(() => {
      funFact.textContent = getRandomFunFact();
      funFact.style.opacity = '1';
    }, 500);
    
    updateStorageComparison(tbStorage);
    generateMiniDrives(tbStorage);
  } catch (error) {
    showError('Error calculating storage');
    console.error(error);
  } finally {
    loading.classList.remove('active');
  }
}

function showError(message) {
  const errorMessage = document.getElementById('errorMessage');
  errorMessage.textContent = message;
  errorMessage.classList.add('active');
  
  setTimeout(() => {
    errorMessage.classList.remove('active');
  }, 3000);
}

function typeText(element, text, index = 0) {
  if (index < text.length) {
    element.textContent = text.substring(0, index + 1);
    setTimeout(() => typeText(element, text, index + 1), 30);
  }
}

function generateMiniDrives(tbStorage) {
  const container = document.getElementById('drivesContainer');
  container.innerHTML = '';
  const driveCount = Math.min(Math.ceil(tbStorage / 10), 50);
  
  for (let i = 0; i < driveCount; i++) {
    const miniDrive = document.createElement('div');
    miniDrive.className = 'mini-drive';
    container.appendChild(miniDrive);
    
    setTimeout(() => {
      miniDrive.style.transform = 'scale(1) rotate(' + (Math.random() * 10 - 5) + 'deg)';
    }, i * 100);
  }
}

function updateStorageComparison(tbStorage) {
  const comparisonContainer = document.getElementById('storageComparison');
  comparisonContainer.innerHTML = '<h3>Storage Comparison</h3>';
  
  comparisons.forEach((comparison, index) => {
    const div = document.createElement('div');
    div.className = 'comparison-item';
    
    const amount = calculateComparison(tbStorage, comparison.text);
    div.innerHTML = `
      <span class="comparison-icon">${comparison.icon}</span>
      <span>Equivalent to ${amount} ${comparison.text}</span>
    `;
    
    comparisonContainer.appendChild(div);
    
    setTimeout(() => {
      div.classList.add('visible');
    }, index * 200);
  });
}

function calculateComparison(tbStorage, type) {
  switch(type) {
    case 'iPhone 13 Pro (1TB)':
      return Math.floor(tbStorage);
    case 'modern games (100GB)':
      return Math.floor(tbStorage * 10);
    case '4K movies (100GB)':
      return Math.floor(tbStorage * 10);
    default:
      return 0;
  }
}

function shareOnTwitter() {
  const resultText = document.getElementById('resultText').textContent;
  const text = encodeURIComponent(`${resultText} Come check how much data your weight can store!`);
  window.open(`https://twitter.com/intent/tweet?text=${text}`, '_blank');
}

function shareOnWeibo() {
  const resultText = document.getElementById('resultText').textContent;
  const text = encodeURIComponent(`${resultText} Come check how much data your weight can store!`);
  window.open(`https://service.weibo.com/share/share.php?text=${text}`, '_blank');
}

document.getElementById('weightInput').addEventListener('input', function(e) {
  const value = parseFloat(e.target.value);
  if (value > 300) {
    e.target.value = 300;
    showError('Maximum input value is 300kg');
  }
});

document.addEventListener('DOMContentLoaded', () => {
  const mainDrive = document.getElementById('mainDrive');
  mainDrive.style.transform = 'scale(0)';
  setTimeout(() => {
    mainDrive.style.transform = 'scale(1)';
  }, 300);

  // Get current locale from URL or default to 'en'
  const currentLocale = window.location.hostname.includes('-en') ? 'en' : 'zh';
  
  // Update active state of locale links
  const localeLinks = document.querySelectorAll('.locale-link');
  localeLinks.forEach(link => {
    if ((link.textContent === 'English' && currentLocale === 'en') ||
        (link.textContent === '中文' && currentLocale === 'zh')) {
      link.classList.add('active');
    } else {
      link.classList.remove('active');
    }
  });
});

function updateBrainSection(brainCapacity) {
  const brainStats = document.getElementById('brainStats');
  brainStats.innerHTML = `
    <p>Estimated brain weight: ${brainCapacity.weight}kg</p>
    <p>Brain storage capacity: ${brainCapacity.storage}TB</p>
    <p>Number of neurons: ${brainCapacity.neurons}</p>
    <p>Number of synapses: ${brainCapacity.synapses}</p>
  `;

  // Add brain comparison visualization
  const brainComparison = document.createElement('div');
  brainComparison.className = 'brain-comparison';
  BRAIN_COMPARISONS.forEach(comparison => {
    const compItem = document.createElement('div');
    compItem.className = 'brain-comp-item';
    compItem.innerHTML = `${comparison.icon} = ${calculateBrainComparison(brainCapacity.storage, comparison.text)}`;
    brainComparison.appendChild(compItem);
  });
  
  document.getElementById('brainSection').appendChild(brainComparison);
}

function calculateBrainComparison(brainStorage, type) {
  switch(type) {
    case 'average human brain capacity':
      return Math.floor(brainStorage / 2.5); // Assuming average brain storage is about 2.5TB
    case 'supercomputer':
      return Math.floor(brainStorage / 500); // Assuming average supercomputer has around 500TB
    case 'library digital storage':
      return Math.floor(brainStorage / 100); // Assuming average library digital storage is around 100TB
    default:
      return 0;
  }
}
</script>


</body></html>