Avatarnet: A Digital Parallel Universe
Reimagining the Internet
From the ground up to last for eternity
Reimagining the Internet from the ground up to last for eternity
Lorem ipsum dolor amet consectetur Quisque nisl risus blandit atlorem arcu venenatis Ultricies tincidunt mialiquam nibh urna neque purus.
Tectron Gave ingenious ideas infusing your brand with the essence of success
AI Integration Services
Lorem ipsum dolor sit amet consectetur Molestie ullamcorp elit non diam at pharetra integer non fringilla. Non cras sapien rutrum Maecenas tellus posuere faucibus tincidunt.
The Road to Transcendence Starts Here.
From Humanity To Avatarnity.
From Humanity To Avatarnity
For 100,000 years, humans have pursued immortality: from preserving bodies with ochre to building pyramids, from brewing elixirs to offering prayers, all in the hope of defeating death. Today, we can leverage decentralization and AI to face the same challenge. Your biological body will age, fail, and eventually die, but your identity, essence, and thoughts can persist forever inside an avatar. Create your avatar and be with anyone, anywhere, anytime, forever.
<div id="avatarnet-simulator-root"></div>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.8.1/prop-types.min.js"></script>
<script src="https://unpkg.com/d3-scale@4.0.2/dist/d3-scale.min.js"></script>
<script src="https://unpkg.com/d3-shape@3.1.0/dist/d3-shape.min.js"></script>
<script src="https://unpkg.com/d3-array@3.2.0/dist/d3-array.min.js"></script>
<script src="https://unpkg.com/d3-path@3.0.1/dist/d3-path.min.js"></script>
<script src="https://unpkg.com/recharts@2.6.2/umd/Recharts.js"></script>
<style>
.slider-container{width:100%;height:20px;position:relative;margin:16px 0}
.slider-track{height:4px;background:#afaec6;width:100%;position:absolute;top:50%;transform:translateY(-50%);border-radius:2px;cursor:pointer}
.slider-range{height:4px;background:linear-gradient(90deg,#6645EB,#D445EB);position:absolute;border-radius:2px;top:0}
.slider-thumb{width:20px;height:20px;background:linear-gradient(to right,#6645EB,#D445EB);border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);cursor:grab;border:2px solid white;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.slider-thumb:active{cursor:grabbing}
.card{background:#020817;color:#afaec6;border:1px solid rgba(175,174,198,0.2);border-radius:8px;padding:24px;margin:auto;max-width:1230px;width:100%}
.card-header{margin-bottom:24px}
.card-title{color:white;font-size:24px;font-weight:600;margin:0}
.card-content>div{margin-bottom:24px}
.label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}
.box{background:#090922;padding:16px;border-radius:8px;border:1px solid rgba(175,174,198,0.2)}
.box h3{margin-top:0}
.box-title{color:white;font-size:18px;font-weight:600;margin-bottom:8px}
.input-container{margin-bottom:16px}
.input-container-wrapper{position:relative;display:inline-block}
.input-field{background:#090922;border:1px solid rgba(175,174,198,0.2);border-radius:4px;color:#afaec6;padding:8px 30px 8px 12px;width:120px;font-size:14px}
.input-field:focus{outline:none;border-color:#6645EB}
.input-arrows{position:absolute;right:4px;top:4px;bottom:4px;width:20px;display:flex;flex-direction:column;gap:1px}
.input-arrow{flex:1;background:linear-gradient(to right,#6645EB,#D445EB);border:none;color:white;cursor:pointer;font-size:10px;font-weight:bold;display:flex;align-items:center;justify-content:center;user-select:none;min-height:0;height:auto}
.input-arrow:first-child{border-radius:2px 2px 0 0}
.input-arrow:last-child{border-radius:0 0 2px 2px}
.input-arrow:hover{opacity:0.8}
.input-arrow:active{opacity:0.6}
.level-indicator{display:inline-block;background:linear-gradient(to right,#6645eb,#d445eb);color:white;padding:4px 8px;border-radius:4px;font-weight:600;margin-right:8px;font-size:14px}
.split-container{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;align-items:stretch}
@media (max-width:768px){.split-container{grid-template-columns:1fr;gap:16px}.card{padding:16px}.split-section{padding:16px}}
.split-section{background:#090922;border:1px solid rgba(175,174,198,0.2);border-radius:8px;padding:20px}
.split-title{color:white;font-size:18px;font-weight:600;margin-bottom:16px;position:relative}
.slider-group{margin-bottom:20px}
.slider-group:last-child{margin-bottom:0}
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:16px}
.metric-card{background:#090922;border:1px solid rgba(175,174,198,0.2);border-radius:8px;padding:16px;position:relative}
.metric-label{font-size:12px;color:#afaec6;margin-bottom:4px}
.metric-value{font-size:18px;font-weight:600;color:white}
.info-icon{display:inline-block;width:16px;height:16px;background:linear-gradient(to right,#6645eb,#d445eb);border-radius:50%;color:white;text-align:center;line-height:16px;font-size:12px;font-weight:600;margin-left:8px;cursor:help;position:relative}
.tooltip{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);background:#0f172a;border:1px solid #334155;border-radius:6px;padding:8px 12px;color:#afaec6;font-size:12px;font-weight:normal;white-space:normal;z-index:1000;opacity:0;visibility:hidden;transition:opacity 0.2s,visibility 0.2s;pointer-events:none;max-width:280px;min-width:200px;text-align:left;line-height:1.4}
.tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#334155}
.info-icon:hover .tooltip{opacity:1;visibility:visible}
.metric-card .tooltip{bottom:100%;left:50%;transform:translate(-50%,-8px);margin-bottom:5px}
.metric-card .tooltip::after{top:100%;left:50%;transform:translateX(-50%);border-top-color:#334155;border-bottom-color:transparent}
@media (max-width:768px){
.tooltip{position:fixed;bottom:auto;top:40%;left:50%;transform:translate(-50%,-50%);max-width:280px;min-width:250px;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.tooltip::after{display:none}
.metric-card .tooltip{position:absolute;top:-60px;left:50%;transform:translateX(-50%);bottom:auto;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
}
.recommendation{background:linear-gradient(to right,#6645eb,#d445eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.scenarios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.scenario-card{padding:12px;border-radius:8px;background:#090922;border:1px solid rgba(175,174,198,0.2)}
.scenario-title{font-size:14px;font-weight:500;color:#afaec6;margin-bottom:8px}
.probability-excellent{font-size:18px;font-weight:700;color:#4ade80}
.probability-good{font-size:18px;font-weight:700;color:#60a5fa}
.probability-fair{font-size:18px;font-weight:700;color:#facc15}
.probability-risk{font-size:18px;font-weight:700;color:#f87171}
.small-text{font-size:12px;margin-top:4px}
.chart-container{height:300px;margin:0;padding:0}
@media (max-width:768px){.scenarios-grid{grid-template-columns:repeat(2,1fr)}.card{padding:16px}.chart-container{height:280px}}
@media (max-width:480px){.scenarios-grid{grid-template-columns:1fr}.card{padding:12px}.chart-container{height:260px}}
@keyframes pulse{0%{opacity:1}50%{opacity:0.5}100%{opacity:1}}
</style>
<script>
const { useState, useMemo, useRef, useEffect } = React;
const { LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } = window.Recharts;
const Slider = ({ value, onChange, min, max }) => {
const sliderRef = useRef(null);
const [isDragging, setIsDragging] = useState(false);
const getValueFromPosition = clientX => {
if (!sliderRef.current) return value;
const rect = sliderRef.current.getBoundingClientRect();
const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
return Math.round(min + percent * (max - min));
};
const handleMouseDown = e => {
e.preventDefault();
setIsDragging(true);
const newValue = getValueFromPosition(e.clientX);
onChange(newValue);
};
const handleMouseMove = e => {
if (!isDragging) return;
e.preventDefault();
const newValue = getValueFromPosition(e.clientX);
onChange(newValue);
};
const handleMouseUp = () => setIsDragging(false);
const handleTouchStart = e => {
e.preventDefault();
setIsDragging(true);
const touch = e.touches[0];
const newValue = getValueFromPosition(touch.clientX);
onChange(newValue);
};
const handleTouchMove = e => {
if (!isDragging) return;
e.preventDefault();
const touch = e.touches[0];
const newValue = getValueFromPosition(touch.clientX);
onChange(newValue);
};
const handleTouchEnd = () => setIsDragging(false);
useEffect(() => {
if (isDragging) {
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('touchmove', handleTouchMove);
document.addEventListener('touchend', handleTouchEnd);
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
document.removeEventListener('touchmove', handleTouchMove);
document.removeEventListener('touchend', handleTouchEnd);
};
}
}, [isDragging]);
const percent = (value - min) / (max - min);
return React.createElement('div', { className: 'slider-container' },
React.createElement('div', {
ref: sliderRef,
className: 'slider-track',
onMouseDown: handleMouseDown,
onTouchStart: handleTouchStart
},
React.createElement('div', {
className: 'slider-range',
style: { width: `${percent * 100}%` }
}),
React.createElement('div', {
className: 'slider-thumb',
style: { left: `${percent * 100}%` }
})
)
);
};
const calculateTimeBasedRatios = currentYear => {
const baseYear = 2025;
const yearsElapsed = currentYear - baseYear;
const centuriesPassed = Math.floor(yearsElapsed / 100);
const improvement = Math.min(centuriesPassed * 0.5, 3);
return {
L1: Math.round((3 + improvement) * 10) / 10,
L2: Math.round((4 + improvement) * 10) / 10,
L3: Math.round((5 + improvement) * 10) / 10,
L4: Math.round((6 + improvement) * 10) / 10,
L5: Math.round((7 + improvement) * 10) / 10
};
};
const BackupSimulator = () => {
const [currentYear, setCurrentYear] = useState(2025);
const [calendarSystem, setCalendarSystem] = useState('holocene');
const [timeRange, setTimeRange] = useState('10Y');
const [yearInputValue, setYearInputValue] = useState('12025');
const [nodeCounts, setNodeCounts] = useState([3500, 3000, 2500, 700, 300]);
const [averageReplications, setAverageReplications] = useState([6, 18, 38, 63, 88]);
const [averageStorage, setAverageStorage] = useState([3000, 7000, 15000, 35000, 75000]);
const [ratiosLocked, setRatiosLocked] = useState(true);
const [manualRatios, setManualRatios] = useState([3, 4, 5, 6, 7]);
const [replicationFactor, setReplicationFactor] = useState(3);
const [artificialMindSize, setArtificialMindSize] = useState(3);
const [inputValue, setInputValue] = useState('3');
const [isMobile, setIsMobile] = useState(false);
const [realGraphData, setRealGraphData] = useState([]);
const [ancestorMaintenance, setAncestorMaintenance] = useState(80);
const [storageDeclineRate, setStorageDeclineRate] = useState(10);
const [currentGenFreeRiders, setCurrentGenFreeRiders] = useState(25);
const [maintenanceMode, setMaintenanceMode] = useState('global');
const SURPLUS_USER_ALLOCATION = 0.8;
const SURPLUS_BURDEN_ALLOCATION = 0.2;
useEffect(() => {
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
useEffect(() => {
const interval = setInterval(() => {
if (networkMetrics && typeof networkMetrics.networkHealth === 'number') {
const now = new Date();
const networkHealth = networkMetrics.networkHealth;
const timeStr = now.toLocaleTimeString('en-US', { minute: '2-digit', second: '2-digit' });
const variation = (Math.random() - 0.5) * 0.4;
const actualValue = networkHealth + variation;
const newPoint = {
time: now.getTime(),
value: Math.max(0, Math.min(100, actualValue)),
timeDisplay: timeStr
};
setRealGraphData(prev => {
const updated = [...prev, newPoint];
if (updated.length > 600) {
return updated.slice(-600);
}
const paddedData = [];
const totalSlots = 600;
const emptySlots = totalSlots - updated.length;
for (let i = 0; i < emptySlots; i++) {
const pastTime = new Date(now.getTime() - ((emptySlots - i) * 100));
paddedData.push({
time: pastTime.getTime(),
value: null,
timeDisplay: pastTime.toLocaleTimeString('en-US', { minute: '2-digit', second: '2-digit' })
});
}
return [...paddedData, ...updated];
});
}
}, 100);
return () => clearInterval(interval);
}, [currentYear, nodeCounts, averageReplications, averageStorage, ratiosLocked, manualRatios, ancestorMaintenance, currentGenFreeRiders, maintenanceMode]);
const baseRatios = { L1: 3, L2: 4, L3: 5, L4: 6, L5: 7 };
const getDisplayYear = () => currentYear + (calendarSystem === 'holocene' ? 10000 : 0);
const getCalendarSuffix = () => calendarSystem === 'holocene' ? 'HE' : 'CE';
const getMaxYear = () => {
const baseYear = 2025;
const rangeYears = { '10Y': 10, '100Y': 100, '1000Y': 1000, '10000Y': 10000 };
return baseYear + rangeYears[timeRange] - 1;
};
const getMaxDisplayYear = () => getMaxYear() + (calendarSystem === 'holocene' ? 10000 : 0);
const getMinDisplayYear = () => calendarSystem === 'holocene' ? 12025 : 2025;
const networkMetrics = useMemo(() => {
const activeRatios = ratiosLocked ? calculateTimeBasedRatios(currentYear) : {
L1: manualRatios[0], L2: manualRatios[1], L3: manualRatios[2], L4: manualRatios[3], L5: manualRatios[4]
};
const totalNodes = nodeCounts.reduce((s, c) => s + c, 0);
let totalCollectiveOwnStorage = 0;
let totalCollectiveSurplusStorage = 0;
let weightedReplication = 0;
let weightedTolerance = 0;
const actualCurrentYear = new Date().getFullYear();
const currentGeneration = Math.floor((currentYear - actualCurrentYear) / 50) + 1;
let cumulativeAbandonedLoad = 0;
if (maintenanceMode === 'global') {
cumulativeAbandonedLoad = currentGeneration * (100 - ancestorMaintenance);
} else {
for (let gen = 1; gen <= currentGeneration; gen++) {
const generationsElapsed = currentGeneration - gen;
const maintenanceRate = Math.max(0, 100 - (ancestorMaintenance * generationsElapsed));
cumulativeAbandonedLoad += (100 - maintenanceRate);
}
}
const totalNetworkBurden = cumulativeAbandonedLoad + currentGenFreeRiders;
nodeCounts.forEach((nodeCount, index) => {
const levelRatio = activeRatios[`L${index + 1}`];
const levelReplication = averageReplications[index];
const levelStorage = averageStorage[index];
const levelTolerance = 1 - (3 / (levelReplication * levelRatio));
const levelWeight = totalNodes > 0 ? nodeCount / totalNodes : 0;
const levelOwnStorage = nodeCount * levelStorage;
totalCollectiveOwnStorage += levelOwnStorage;
const levelSurplusStorage = nodeCount * levelReplication * levelRatio * levelStorage;
totalCollectiveSurplusStorage += levelSurplusStorage;
weightedReplication += levelReplication * levelWeight;
weightedTolerance += (levelTolerance * 100) * levelWeight;
});
const maxBurdenCapacity = totalCollectiveSurplusStorage * SURPLUS_BURDEN_ALLOCATION;
const burdenUtilization = maxBurdenCapacity > 0 ?
Math.min(1, totalNetworkBurden / (maxBurdenCapacity / totalCollectiveOwnStorage * 100)) : 0;
const networkHealth = Math.max(0, 100 - (burdenUtilization * 100));
const totalCapacity = totalCollectiveOwnStorage + totalCollectiveSurplusStorage;
const ownStoragePercentage = totalCapacity > 0 ? (totalCollectiveOwnStorage / totalCapacity) * 100 : 0;
const surplusStoragePercentage = totalCapacity > 0 ? (totalCollectiveSurplusStorage / totalCapacity) * 100 : 0;
return {
totalNodes,
avgReplication: weightedReplication,
universalAccessTolerance: weightedTolerance,
networkHealth,
burdenUtilization,
totalNetworkBurden,
ratios: activeRatios,
totalCollectiveOwnStorage,
totalCollectiveSurplusStorage,
totalCapacity,
ownStoragePercentage,
surplusStoragePercentage
};
}, [currentYear, nodeCounts, averageReplications, averageStorage, ratiosLocked, manualRatios, ancestorMaintenance, currentGenFreeRiders, maintenanceMode]);
const calculateLevel = f => {
const activeRatios = networkMetrics.ratios;
if (f >= 3 && f <= 10) return { level: 1, ratio: activeRatios.L1, maxRep: 10 };
if (f >= 11 && f <= 25) return { level: 2, ratio: activeRatios.L2, maxRep: 25 };
if (f >= 26 && f <= 50) return { level: 3, ratio: activeRatios.L3, maxRep: 50 };
if (f >= 51 && f <= 75) return { level: 4, ratio: activeRatios.L4, maxRep: 75 };
if (f >= 76 && f <= 100) return { level: 5, ratio: activeRatios.L5, maxRep: 100 };
return { level: 1, ratio: activeRatios.L1, maxRep: 10 };
};
const calculateStorageMetrics = (s, l, r, f) => {
const own = s;
const net = s * r * f;
const total = own + net;
const guaranteed = f;
const surplus = Math.max(0, net - guaranteed * s);
return { ownStorage: own, networkStorage: net, totalStorage: total, guaranteedBackup: guaranteed, surplus, ratio: r };
};
const enhancedMetrics = useMemo(() => {
const actualCurrentYear = new Date().getFullYear();
const currentGeneration = Math.floor((currentYear - actualCurrentYear) / 50) + 1;
const generationStart = (currentGeneration - 1) * 50 + actualCurrentYear;
const generationEnd = currentGeneration * 50 + actualCurrentYear - 1;
const yearsElapsed = currentYear - actualCurrentYear;
let cumulativeAbandonedLoad = 0;
if (maintenanceMode === 'global') {
cumulativeAbandonedLoad = currentGeneration * (100 - ancestorMaintenance);
} else {
for (let gen = 1; gen <= currentGeneration; gen++) {
const generationsElapsed = currentGeneration - gen;
const maintenanceRate = Math.max(0, 100 - (ancestorMaintenance * generationsElapsed));
cumulativeAbandonedLoad += (100 - maintenanceRate);
}
}
const totalNetworkBurden = cumulativeAbandonedLoad + currentGenFreeRiders;
const baseCurrentYearCost = 10;
const declineMultiplier = (100 - storageDeclineRate) / 100;
const currentStorageCost = baseCurrentYearCost * Math.pow(declineMultiplier, yearsElapsed);
const storageEfficiency = ((baseCurrentYearCost - currentStorageCost) / baseCurrentYearCost) * 100;
return {
currentGeneration, generationStart, generationEnd, cumulativeAbandonedLoad,
totalNetworkBurden, currentStorageCost, storageEfficiency, actualCurrentYear
};
}, [currentYear, ancestorMaintenance, currentGenFreeRiders, storageDeclineRate, maintenanceMode]);
const calculateProbabilities = (f, totalNodes) =>
[10, 20, 30, 40, 50, 60, 70, 80, 90].map(d => {
const p = d / 100;
const s = (1 - Math.pow(p, f)) * 100;
return {
destruction: d,
probability: Math.floor(s * 100) / 100,
surviving_nodes: Math.floor(totalNodes * (1 - p)),
status: s > 99 ? 'Excellent' : s > 95 ? 'Good' : s > 90 ? 'Fair' : 'Risk'
};
});
const scenarios = useMemo(() => calculateProbabilities(replicationFactor, networkMetrics.totalNodes), [replicationFactor, networkMetrics.totalNodes]);
const currentLevel = useMemo(() => calculateLevel(replicationFactor), [replicationFactor, networkMetrics.ratios]);
const storageMetrics = useMemo(() => calculateStorageMetrics(artificialMindSize, currentLevel.level, currentLevel.ratio, replicationFactor), [artificialMindSize, currentLevel, replicationFactor]);
const getRecommendation = s => {
const l = s[s.length - 1].probability;
return l > 99 ? "Maximum protection. Network can survive most catastrophic scenarios." :
l > 95 ? "Very good protection. High survival probability." :
l > 90 ? "Moderate protection. Consider increasing replication." :
"Basic protection. Increase replication for better resilience.";
};
const getStatusColorClass = p =>
p > 99 ? 'probability-excellent' :
p > 95 ? 'probability-good' :
p > 90 ? 'probability-fair' : 'probability-risk';
const getNetworkHealthColor = h =>
h >= 90 ? '#4ade80' :
h >= 80 ? '#34d399' :
h >= 70 ? '#facc15' :
h >= 60 ? '#fb7185' :
h >= 50 ? '#f87171' : '#ef4444';
const getNetworkHealthStatus = h =>
h >= 90 ? 'Excellent' :
h >= 80 ? 'Good' :
h >= 70 ? 'Stressed' :
h >= 60 ? 'Critical' :
h >= 50 ? 'Danger' : 'Failing';
const getChartMargins = () =>
window.innerWidth <= 480 ? { top: 10, right: 8, left: 0, bottom: 20 } :
window.innerWidth <= 768 ? { top: 10, right: 10, left: 0, bottom: 22 } :
{ top: 10, right: 10, left: 0, bottom: 25 };
const getLabelOffsets = () =>
window.innerWidth <= 480 ? { xOffset: -8, yOffset: 4 } :
window.innerWidth <= 768 ? { xOffset: -12, yOffset: 6 } :
{ xOffset: -15, yOffset: 5 };
const offsets = getLabelOffsets();
return React.createElement('div', { className: 'card' },
React.createElement('div', { className: 'card-header' },
React.createElement('h2', { className: 'card-title' }, 'Avatarnet Simulator')
),
// Network Health Monitor
realGraphData.length > 0 && networkMetrics && typeof networkMetrics.networkHealth === 'number' &&
React.createElement('div', {
style: { border: '1px solid rgba(175,174,198,0.2)', borderRadius: '8px', padding: '16px', marginBottom: '24px' }
},
React.createElement('div', {
style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }
},
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '12px' } },
React.createElement('div', {
style: {
width: '12px', height: '12px', backgroundColor: getNetworkHealthColor(networkMetrics.networkHealth),
borderRadius: '50%', animation: 'pulse 2s infinite'
}
}),
React.createElement('h3', { style: { margin: 0, color: 'white', fontSize: '16px', fontWeight: '600' } }, 'Network Health Monitor'),
React.createElement('span', { style: { fontSize: '12px', color: '#afaec6' } }, 'Live')
),
React.createElement('div', { style: { textAlign: 'right' } },
React.createElement('div', {
style: { fontSize: '24px', fontWeight: '700', color: getNetworkHealthColor(networkMetrics.networkHealth) }
}, `${networkMetrics.networkHealth.toFixed(1)}%`),
React.createElement('div', {
style: { fontSize: '12px', color: '#afaec6' }
}, `${getNetworkHealthStatus(networkMetrics.networkHealth)} • ${(networkMetrics.universalAccessTolerance * 0.8 * (1 - networkMetrics.burdenUtilization)).toFixed(1)}% surplus available • ${(networkMetrics.universalAccessTolerance * 0.2 * networkMetrics.burdenUtilization).toFixed(1)}% burden`)
)
),
React.createElement('div', { style: { height: '160px' } },
React.createElement(ResponsiveContainer, { width: "100%", height: "100%" },
React.createElement(AreaChart, { data: realGraphData, margin: { top: 8, right: 8, left: 4, bottom: 8 } },
React.createElement('defs', null,
React.createElement('linearGradient', { id: "toleranceGradient", x1: "0", y1: "0", x2: "0", y2: "1" },
React.createElement('stop', { offset: "0%", stopColor: getNetworkHealthColor(networkMetrics.networkHealth), stopOpacity: 0.3 }),
React.createElement('stop', { offset: "100%", stopColor: getNetworkHealthColor(networkMetrics.networkHealth), stopOpacity: 0.05 })
)
),
React.createElement(CartesianGrid, { strokeDasharray: "2 2", stroke: "#475569", opacity: 0.3 }),
React.createElement(XAxis, { dataKey: "timeDisplay", stroke: "#94a3b8", fontSize: 10, interval: 29 }),
React.createElement(YAxis, { domain: [0, 100], stroke: "#94a3b8", fontSize: 10, width: 20 }),
React.createElement(Area, {
type: "monotone", dataKey: "value", stroke: getNetworkHealthColor(networkMetrics.networkHealth),
strokeWidth: 2, fill: "url(#toleranceGradient)", connectNulls: false
})
)
)
)
),
// Visual Separator
React.createElement('div', { style: { borderBottom: '2px solid rgba(175,174,198,0.3)', margin: '32px 0' } }),
// Network Evolution with Icon
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '24px' } },
React.createElement('div', {
style: {
width: '32px', height: '32px', background: 'linear-gradient(45deg, #6645EB, #D445EB)',
borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center',
fontSize: '16px', color: 'white'
}
}, '⚙️'),
React.createElement('h3', { style: { color: 'white', fontSize: '18px', fontWeight: '600', margin: '0' } }, 'Network Evolution')
),
React.createElement('div', { className: 'card-content' },
// Enhanced Section 1: 4 Inputs + 5 Cards
React.createElement('div', { className: 'split-container', style: { marginTop: '24px' } },
React.createElement('div', { className: 'split-section' },
React.createElement('div', { className: 'split-title' }, 'Time Travel Controls'),
React.createElement('div', { className: 'slider-group' },
React.createElement('label', { className: 'label' }, 'Time Travel',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Navigate through different time periods to see how network evolution and storage costs change over decades and millennia.')
)
),
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' } },
React.createElement('div', { className: 'input-container-wrapper' },
React.createElement('input', {
type: 'text',
inputMode: 'decimal',
value: yearInputValue,
placeholder: enhancedMetrics.actualCurrentYear.toString(),
onChange: e => {
const v = e.target.value;
if (v === '' || /^[0-9]*$/.test(v)) {
const n = parseInt(v);
const maxDisplayYear = getMaxDisplayYear();
const maxLength = maxDisplayYear.toString().length;
if (v !== '' && !isNaN(n) && (n > maxDisplayYear || v.length > maxLength)) return;
setYearInputValue(v);
if (v === '') setCurrentYear(enhancedMetrics.actualCurrentYear);
else if (isNaN(n)) setCurrentYear(enhancedMetrics.actualCurrentYear);
else {
const ceYear = calendarSystem === 'holocene' ? Math.max(enhancedMetrics.actualCurrentYear, n - 10000) : Math.max(enhancedMetrics.actualCurrentYear, n);
setCurrentYear(ceYear);
}
}
},
className: 'input-field'
}),
React.createElement('div', { className: 'input-arrows' },
React.createElement('button', {
className: 'input-arrow',
onMouseDown: e => {
e.preventDefault();
const cv = yearInputValue === '' ? getMinDisplayYear().toString() : yearInputValue;
const nv = parseInt(cv);
if (isNaN(nv)) return;
const maxDisplayYear = getMaxDisplayYear();
const newVal = Math.min(maxDisplayYear, nv + 1).toString();
setYearInputValue(newVal);
const ceYear = calendarSystem === 'holocene' ? Math.max(enhancedMetrics.actualCurrentYear, parseInt(newVal) - 10000) : Math.max(enhancedMetrics.actualCurrentYear, parseInt(newVal));
setCurrentYear(ceYear);
}
}, '▲'),
React.createElement('button', {
className: 'input-arrow',
onMouseDown: e => {
e.preventDefault();
const cv = yearInputValue === '' ? getMinDisplayYear().toString() : yearInputValue;
const nv = parseInt(cv);
if (isNaN(nv)) return;
const minDisplayYear = getMinDisplayYear();
const newVal = Math.max(minDisplayYear, nv - 1).toString();
setYearInputValue(newVal);
const ceYear = calendarSystem === 'holocene' ? Math.max(enhancedMetrics.actualCurrentYear, parseInt(newVal) - 10000) : Math.max(enhancedMetrics.actualCurrentYear, parseInt(newVal));
setCurrentYear(ceYear);
}
}, '▼')
)
),
React.createElement('div', { style: { display: 'flex', border: '1px solid rgba(175,174,198,0.2)', borderRadius: '4px', overflow: 'hidden' } },
React.createElement('button', {
onClick: () => {
if (calendarSystem === 'gregorian') {
setYearInputValue('12025');
setCurrentYear(enhancedMetrics.actualCurrentYear);
}
setCalendarSystem('holocene');
},
style: {
background: calendarSystem === 'holocene' ? 'linear-gradient(to right,#6645EB,#D445EB)' : '#1e293b',
color: calendarSystem === 'holocene' ? 'white' : '#afaec6',
border: 'none', padding: '6px 12px', fontSize: '12px',
fontWeight: calendarSystem === 'holocene' ? '600' : '400',
cursor: 'pointer', transition: 'all 0.2s',
borderRight: calendarSystem === 'holocene' ? 'none' : '1px solid rgba(175,174,198,0.2)'
}
}, 'Holocene'),
React.createElement('button', {
onClick: () => {
if (calendarSystem === 'holocene') {
setYearInputValue(enhancedMetrics.actualCurrentYear.toString());
setCurrentYear(enhancedMetrics.actualCurrentYear);
}
setCalendarSystem('gregorian');
},
style: {
background: calendarSystem === 'gregorian' ? 'linear-gradient(to right,#6645EB,#D445EB)' : '#1e293b',
color: calendarSystem === 'gregorian' ? 'white' : '#afaec6',
border: 'none', padding: '6px 12px', fontSize: '12px',
fontWeight: calendarSystem === 'gregorian' ? '600' : '400',
cursor: 'pointer', transition: 'all 0.2s'
}
}, 'Gregorian')
),
React.createElement('div', { style: { display: 'flex', border: '1px solid rgba(175,174,198,0.2)', borderRadius: '4px', overflow: 'hidden' } },
['10Y', '100Y', '1000Y', '10000Y'].map(range =>
React.createElement('button', {
key: range,
onClick: () => {
setTimeRange(range);
const baseYear = enhancedMetrics.actualCurrentYear;
const rangeYears = { '10Y': 10, '100Y': 100, '1000Y': 1000, '10000Y': 10000 };
const newMaxYear = baseYear + rangeYears[range] - 1;
const minDisplayYear = calendarSystem === 'holocene' ? baseYear + 10000 : baseYear;
if (currentYear > newMaxYear) {
setYearInputValue(minDisplayYear.toString());
setCurrentYear(baseYear);
}
},
style: {
background: timeRange === range ? 'linear-gradient(to right,#6645EB,#D445EB)' : '#1e293b',
color: timeRange === range ? 'white' : '#afaec6',
border: 'none', padding: '6px 8px', fontSize: '12px',
fontWeight: timeRange === range ? '600' : '400',
cursor: 'pointer', transition: 'all 0.2s',
borderRight: timeRange === range ? 'none' : '1px solid rgba(175,174,198,0.2)'
}
}, range)
)
)
),
React.createElement('div', { style: { marginTop: '12px' } },
React.createElement(Slider, {
value: parseInt(yearInputValue) || getMinDisplayYear(),
onChange: newYear => {
setYearInputValue(newYear.toString());
const ceYear = calendarSystem === 'holocene' ? Math.max(enhancedMetrics.actualCurrentYear, newYear - 10000) : Math.max(enhancedMetrics.actualCurrentYear, newYear);
setCurrentYear(ceYear);
},
min: getMinDisplayYear(),
max: getMaxDisplayYear()
}),
React.createElement('div', { style: { fontSize: '12px', color: '#afaec6', marginTop: '4px' } },
`Present Year: ${getDisplayYear()} ${getCalendarSuffix()}`
)
)
),
React.createElement('div', { className: 'slider-group' },
React.createElement('label', { className: 'label' }, 'Storage Cost Decline (%/year)',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Annual percentage decline in storage costs due to technological advancement. Higher values show more rapid cost reduction over time.')
)
),
React.createElement(Slider, {
value: storageDeclineRate,
onChange: setStorageDeclineRate,
min: 1,
max: 15
}),
React.createElement('div', { style: { fontSize: '12px', color: '#afaec6', marginTop: '4px' } },
`Currently: ${storageDeclineRate}% decline per year`
)
)
),
React.createElement('div', { className: 'split-section' },
React.createElement('div', { className: 'split-title' }, 'Network Parameters'),
React.createElement('div', { className: 'slider-group' },
React.createElement('label', { className: 'label' }, 'Ancestor Maintenance (%)',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' },
maintenanceMode === 'global' ?
'Uniform: Same maintenance rate applied to all generations. Example: 80% means all ancestors get 80% maintenance regardless of age.' :
'Decay: Maintenance decreases by slider amount per generation. Example: 15% decay means Gen1 gets 85%, Gen2 gets 70%, Gen3 gets 55%, etc. Ancient generations naturally become forgotten.'
)
)
),
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', marginBottom: '8px' } },
React.createElement('div', { style: { display: 'flex', border: '1px solid rgba(175,174,198,0.2)', borderRadius: '4px', overflow: 'hidden' } },
React.createElement('button', {
onClick: () => {
setMaintenanceMode('global');
if (ancestorMaintenance < 0 || ancestorMaintenance > 100) setAncestorMaintenance(80);
},
style: {
background: maintenanceMode === 'global' ? 'linear-gradient(to right,#6645EB,#D445EB)' : '#1e293b',
color: maintenanceMode === 'global' ? 'white' : '#afaec6',
border: 'none', padding: '6px 12px', fontSize: '12px',
fontWeight: maintenanceMode === 'global' ? '600' : '400',
cursor: 'pointer', transition: 'all 0.2s',
borderRight: maintenanceMode === 'global' ? 'none' : '1px solid rgba(175,174,198,0.2)'
}
}, 'Uniform'),
React.createElement('button', {
onClick: () => {
setMaintenanceMode('decay');
if (ancestorMaintenance < 5 || ancestorMaintenance > 25) setAncestorMaintenance(15);
},
style: {
background: maintenanceMode === 'decay' ? 'linear-gradient(to right,#6645EB,#D445EB)' : '#1e293b',
color: maintenanceMode === 'decay' ? 'white' : '#afaec6',
border: 'none', padding: '6px 12px', fontSize: '12px',
fontWeight: maintenanceMode === 'decay' ? '600' : '400',
cursor: 'pointer', transition: 'all 0.2s'
}
}, 'Decay')
)
),
React.createElement(Slider, {
value: ancestorMaintenance,
onChange: value => {
const newValue = maintenanceMode === 'global' ?
(value > 100 ? 100 : value < 0 ? 0 : value) :
(value > 25 ? 25 : value < 5 ? 5 : value);
setAncestorMaintenance(newValue);
},
min: maintenanceMode === 'global' ? 0 : 5,
max: maintenanceMode === 'global' ? 100 : 25
}),
React.createElement('div', { style: { fontSize: '12px', color: '#afaec6', marginTop: '4px' } },
maintenanceMode === 'global' ?
`Families maintaining: ${ancestorMaintenance}%` :
`Decay rate: ${ancestorMaintenance}% per generation`
)
),
React.createElement('div', { className: 'slider-group' },
React.createElement('label', { className: 'label' }, 'Current Gen Free Riders (%)',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Percentage of current generation users who access the network without contributing storage. Universal access users who benefit from the network without storage obligations.')
)
),
React.createElement(Slider, {
value: currentGenFreeRiders,
onChange: setCurrentGenFreeRiders,
min: 0,
max: 95
}),
React.createElement('div', { style: { fontSize: '12px', color: '#afaec6', marginTop: '4px' } },
`Universal access users: ${currentGenFreeRiders}%`
)
)
)
),
React.createElement('div', {
className: 'metrics-grid',
style: { gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : 'repeat(5,1fr)', marginTop: '24px', marginBottom: '32px' }
},
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Current Generation',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'The generation period you\'re currently viewing, with each generation spanning 50 years. Shows the time range and generation number.')
)
),
React.createElement('div', { className: 'metric-value' }, `Gen ${enhancedMetrics.currentGeneration}`),
React.createElement('div', { style: { fontSize: '10px', color: '#afaec6', marginTop: '2px' } },
`${calendarSystem === 'holocene' ? enhancedMetrics.generationStart + 10000 : enhancedMetrics.generationStart}-${calendarSystem === 'holocene' ? enhancedMetrics.generationEnd + 10000 : enhancedMetrics.generationEnd} ${calendarSystem === 'holocene' ? 'HE' : 'CE'}`
)
),
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Ancestor Load',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Storage burden from abandoned ancestor data. Affected by maintenance mode and percentage.')
)
),
React.createElement('div', { className: 'metric-value' }, `${enhancedMetrics.cumulativeAbandonedLoad.toFixed(1)}%`),
React.createElement('div', { style: { fontSize: '10px', color: '#afaec6', marginTop: '2px' } },
`over ${enhancedMetrics.currentGeneration} generation${enhancedMetrics.currentGeneration > 1 ? 's' : ''}`
)
),
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Total Network Burden',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Combined load from abandoned ancestors and free riders. Affects network tolerance.')
)
),
React.createElement('div', { className: 'metric-value' }, `${enhancedMetrics.totalNetworkBurden.toFixed(1)}%`),
React.createElement('div', { style: { fontSize: '10px', color: '#afaec6', marginTop: '2px' } },
`in ${getDisplayYear()} ${getCalendarSuffix()}`
)
),
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Storage Cost',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Cost per GB in selected year based on decline rate.')
)
),
React.createElement('div', { className: 'metric-value' }, `$${enhancedMetrics.currentStorageCost.toFixed(2)}/GB`),
React.createElement('div', { style: { fontSize: '10px', color: '#afaec6', marginTop: '2px' } },
`in ${getDisplayYear()} ${getCalendarSuffix()}`
)
),
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Storage Efficiency',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Percentage improvement in storage cost efficiency compared to the baseline year. Positive values indicate lower costs due to technological advancement.')
)
),
React.createElement('div', {
className: 'metric-value',
style: { color: enhancedMetrics.storageEfficiency > 0 ? '#4ade80' : '#f87171' }
}, `${enhancedMetrics.storageEfficiency > 0 ? '+' : ''}${enhancedMetrics.storageEfficiency.toFixed(1)}%`),
React.createElement('div', { style: { fontSize: '10px', color: '#afaec6', marginTop: '2px' } },
`vs ${calendarSystem === 'holocene' ? enhancedMetrics.actualCurrentYear + 10000 : enhancedMetrics.actualCurrentYear} ${calendarSystem === 'holocene' ? 'HE' : 'CE'}`
)
)
),
// Visual Separator
React.createElement('div', { style: { borderBottom: '2px solid rgba(175,174,198,0.3)', margin: '32px 0' } }),
// Section 2 Title with Icon
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '24px' } },
React.createElement('div', {
style: {
width: '32px', height: '32px', background: 'linear-gradient(45deg, #6645EB, #D445EB)',
borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center',
fontSize: '16px', color: 'white'
}
}, '🔧'),
React.createElement('h3', { style: { color: 'white', fontSize: '18px', fontWeight: '600', margin: '0' } }, 'Network Configuration')
),
// Section 2: Current Network Metrics
React.createElement('div', { className: 'split-container' },
React.createElement('div', { className: 'split-section' },
React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: '16px' } },
React.createElement('div', { style: { display: 'flex', alignItems: 'baseline' } },
React.createElement('h3', { className: 'split-title', style: { margin: '0 8px 0 0' } }, 'Level Ratios'),
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Storage contribution ratios per level. Can be time-locked (evolves with years) or manually set.', React.createElement('br'), '• Time-locked: Ratios improve every 100 years', React.createElement('br'), '• Manual: Set custom ratios for each level')
)
),
React.createElement('button', {
onClick: () => {
if (!ratiosLocked) {
const timeRatios = calculateTimeBasedRatios(currentYear);
setManualRatios([timeRatios.L1, timeRatios.L2, timeRatios.L3, timeRatios.L4, timeRatios.L5]);
}
setRatiosLocked(!ratiosLocked);
},
style: {
background: ratiosLocked ? 'linear-gradient(to right,#6645EB,#D445EB)' : '#1e293b',
color: 'white', border: '1px solid rgba(175,174,198,0.2)',
borderRadius: '4px', padding: '6px 12px', fontSize: '12px',
cursor: 'pointer', fontWeight: '600'
}
}, ratiosLocked ? '🔒 Time-Locked' : '🔓 Manual Override')
),
[1, 2, 3, 4, 5].map((level, index) => {
const ratio = networkMetrics.ratios[`L${level}`];
return React.createElement('div', { key: level, className: 'slider-group' },
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' } },
React.createElement('span', { style: { minWidth: '60px', fontSize: '14px', fontWeight: '600', color: '#afaec6' } },
`L${level}(1:${ratio})`
),
React.createElement('div', { style: { flex: 1, position: 'relative' } },
React.createElement(Slider, {
value: manualRatios[index],
onChange: newValue => {
const adjustment = newValue - manualRatios[index];
const newRatios = manualRatios.map((currentRatio, i) => {
const levelMin = i + 1;
const levelMax = i + 100;
const adjustedValue = currentRatio + adjustment;
return Math.max(levelMin, Math.min(levelMax, adjustedValue));
});
setManualRatios(newRatios);
},
min: index + 1,
max: index + 100
}),
ratiosLocked &&
React.createElement('div', {
style: {
position: 'absolute', top: '-15px', left: '-15px', right: '-15px', bottom: '-15px',
background: '#090922', display: 'flex', alignItems: 'center',
fontSize: '14px', fontWeight: '600', color: '#6645EB',
paddingLeft: '27px', overflow: 'hidden', zIndex: 10, borderRadius: '4px'
}
}, '(Time-based)')
),
React.createElement('span', {
style: { minWidth: '180px', fontSize: '14px', fontWeight: '700', color: '#6645EB', textAlign: 'right' }
}, `1:${ratio} ratio`)
)
);
})
),
React.createElement('div', { className: 'split-section' },
React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', marginBottom: '16px' } },
React.createElement('h3', { className: 'split-title', style: { margin: '0 8px 0 0' } }, 'Node Distribution'),
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Distribution of nodes across network levels. Each level can have 0-10,000 nodes independently.', React.createElement('br'), '• Percentage = (nodes at this level / total network nodes) × 100', React.createElement('br'), '• Total network nodes = sum of all level nodes')
)
),
nodeCounts.map((nodeCount, index) => {
const totalNodes = networkMetrics.totalNodes;
const percentage = totalNodes > 0 ? ((nodeCount / totalNodes) * 100).toFixed(1) : 0;
return React.createElement('div', { key: index, className: 'slider-group' },
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' } },
React.createElement('span', { style: { minWidth: '60px', fontSize: '14px', fontWeight: '600', color: '#afaec6' } },
`L${index + 1}(1:${networkMetrics.ratios[`L${index + 1}`]})`
),
React.createElement('div', { style: { flex: 1 } },
React.createElement(Slider, {
value: nodeCount,
onChange: newNodeCount => {
const newCounts = [...nodeCounts];
newCounts[index] = newNodeCount;
setNodeCounts(newCounts);
},
min: 0,
max: 10000
})
),
React.createElement('span', {
style: { minWidth: '160px', fontSize: '14px', fontWeight: '700', color: '#6645EB', textAlign: 'right' }
}, `${nodeCount.toLocaleString()} nodes • ${percentage}%`)
)
);
})
)
),
React.createElement('div', { className: 'split-container' },
React.createElement('div', { className: 'split-section' },
React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', marginBottom: '16px' } },
React.createElement('h3', { className: 'split-title', style: { margin: '0 8px 0 0' } }, 'Average Storage'),
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Average storage used by nodes at each level. Storage limits:', React.createElement('br'), '• L1: 1-5GB • L2: 1-10GB • L3: 1-25GB • L4: 1-50GB • L5: 1-100GB', React.createElement('br'), '• Users can store up to limit, slider shows network average')
)
),
averageStorage.map((storage, index) => {
const limits = [5000, 10000, 25000, 50000, 100000];
const storageGB = (storage / 1000).toFixed(1);
const ratio = networkMetrics.ratios[`L${index + 1}`];
const nodeCount = nodeCounts[index];
const levelStorage = nodeCount * storage;
const totalNetworkStorage = nodeCounts.reduce((sum, count, i) => sum + (count * averageStorage[i]), 0);
const storagePercentage = totalNetworkStorage > 0 ? ((levelStorage / totalNetworkStorage) * 100).toFixed(1) : 0;
return React.createElement('div', { key: index, className: 'slider-group' },
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' } },
React.createElement('span', { style: { minWidth: '60px', fontSize: '14px', fontWeight: '600', color: '#afaec6' } },
`L${index + 1}(1:${ratio})`
),
React.createElement('div', { style: { flex: 1 } },
React.createElement(Slider, {
value: storage,
onChange: newValue => {
const newStorage = [...averageStorage];
newStorage[index] = newValue;
setAverageStorage(newStorage);
},
min: 1000,
max: limits[index]
})
),
React.createElement('span', {
style: { minWidth: '180px', fontSize: '14px', fontWeight: '700', color: '#6645EB', textAlign: 'right' }
}, `${storageGB}GB storage • ${storagePercentage}%`)
)
);
})
),
React.createElement('div', { className: 'split-section' },
React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', marginBottom: '16px' } },
React.createElement('h3', { className: 'split-title', style: { margin: '0 8px 0 0' } }, 'Average Replication'),
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Replication factor for each network level. Each level has different ranges:', React.createElement('br'), '• L1: 3-10x replication • L2: 11-25x • L3: 26-50x • L4: 51-75x • L5: 76-100x', React.createElement('br'), '• Percentage = (nodes × replication factor) / total network replication × 100', React.createElement('br'), '• Shows what % of network\'s replication capacity this level provides')
)
),
averageReplications.map((replication, index) => {
const ranges = [{ min: 3, max: 10 }, { min: 11, max: 25 }, { min: 26, max: 50 }, { min: 51, max: 75 }, { min: 76, max: 100 }];
const currentRange = ranges[index];
const nodeCount = nodeCounts[index];
const levelReplication = nodeCount * replication;
const totalNetworkReplication = nodeCounts.reduce((sum, count, i) => sum + (count * averageReplications[i]), 0);
const replicationPercentage = totalNetworkReplication > 0 ? ((levelReplication / totalNetworkReplication) * 100).toFixed(1) : 0;
return React.createElement('div', { key: index, className: 'slider-group' },
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' } },
React.createElement('span', { style: { minWidth: '60px', fontSize: '14px', fontWeight: '600', color: '#afaec6' } },
`L${index + 1}(1:${networkMetrics.ratios[`L${index + 1}`]})`
),
React.createElement('div', { style: { flex: 1 } },
React.createElement(Slider, {
value: replication,
onChange: newValue => {
const newReps = [...averageReplications];
newReps[index] = newValue;
setAverageReplications(newReps);
},
min: currentRange.min,
max: currentRange.max
})
),
React.createElement('span', {
style: { minWidth: '180px', fontSize: '14px', fontWeight: '700', color: '#6645EB', textAlign: 'right' }
}, `${replication}x backup • ${replicationPercentage}%`)
)
);
})
)
),
React.createElement('div', { className: 'metrics-grid' },
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Total Nodes',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Total number of nodes in the network based on current node distribution.')
)
),
React.createElement('div', { className: 'metric-value' }, networkMetrics.totalNodes.toLocaleString())
),
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Avg Replication',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Weighted average replication factor across all network levels.')
)
),
React.createElement('div', { className: 'metric-value' }, `${networkMetrics.avgReplication.toFixed(1)}x`)
),
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Collective Own Storage',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Total storage used by all users for their own avatar data.')
)
),
React.createElement('div', { className: 'metric-value' },
networkMetrics.totalCollectiveOwnStorage >= 1000000 ?
`${(networkMetrics.totalCollectiveOwnStorage / 1000000).toFixed(1)}TB` :
`${(networkMetrics.totalCollectiveOwnStorage / 1000).toFixed(1)}GB`
)
),
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Collective Surplus Storage',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Total redundant backup storage provided by the network for all users.')
)
),
React.createElement('div', { className: 'metric-value' },
networkMetrics.totalCollectiveSurplusStorage >= 1000000 ?
`${(networkMetrics.totalCollectiveSurplusStorage / 1000000).toFixed(1)}TB` :
`${(networkMetrics.totalCollectiveSurplusStorage / 1000).toFixed(1)}GB`
)
),
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Universal Access Tolerance',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Percentage of users who can access the network without contributing storage.')
)
),
React.createElement('div', { className: 'metric-value' }, `${networkMetrics.universalAccessTolerance.toFixed(1)}%`)
)
),
// Visual Separator
React.createElement('div', { style: { borderBottom: '2px solid rgba(175,174,198,0.3)', margin: '32px 0' } }),
// Section 3 Title with Icon
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '24px' } },
React.createElement('div', {
style: {
width: '32px', height: '32px', background: 'linear-gradient(45deg, #6645EB, #D445EB)',
borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center',
fontSize: '16px', color: 'white'
}
}, '𖦹'),
React.createElement('h3', { style: { color: 'white', fontSize: '18px', fontWeight: '600', margin: '0' } }, 'Personal Configuration')
),
React.createElement('div', { className: 'input-container' },
React.createElement('label', { className: 'label' }, 'Artificial Mind Size (MB)'),
React.createElement('div', { className: 'input-container-wrapper' },
React.createElement('input', {
type: 'text',
inputMode: 'decimal',
value: inputValue,
placeholder: '3',
onChange: e => {
const newValue = e.target.value;
if (newValue === '' || /^[0-9]*\.?[0-9]*$/.test(newValue)) {
const numValue = parseFloat(newValue);
if (newValue !== '' && !isNaN(numValue) && numValue > 100000) return;
if (newValue.includes('.')) {
const parts = newValue.split('.');
if (parts[0].length > 6) return;
} else {
if (newValue.length > 6) return;
}
setInputValue(newValue);
if (newValue === '') {
setArtificialMindSize(3);
} else if (isNaN(numValue)) {
setArtificialMindSize(3);
} else {
setArtificialMindSize(numValue);
}
}
},
onBlur: e => {
const value = e.target.value;
if (value === '') {
setInputValue('3');
setArtificialMindSize(3);
} else {
const numValue = parseFloat(value);
if (isNaN(numValue) || numValue < 0) {
setInputValue('3');
setArtificialMindSize(3);
} else if (numValue > 100000) {
setInputValue('100000');
setArtificialMindSize(100000);
}
}
},
onPaste: e => {
e.preventDefault();
const paste = e.clipboardData.getData('text');
const numValue = parseFloat(paste);
if (!isNaN(numValue) && numValue >= 0 && numValue <= 100000) {
if (/^[0-9]*\.?[0-9]*$/.test(paste)) {
setInputValue(paste);
setArtificialMindSize(numValue);
}
}
},
onKeyDown: e => {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.preventDefault();
e.stopPropagation();
const currentValue = inputValue === '' ? '3' : inputValue;
const numValue = parseFloat(currentValue);
if (isNaN(numValue)) return;
let newValue;
if (currentValue.includes('.')) {
const decimalPlaces = currentValue.split('.')[1].length;
const increment = Math.pow(10, -decimalPlaces);
if (e.key === 'ArrowUp') {
newValue = Math.min(100000, numValue + increment).toFixed(decimalPlaces);
} else {
newValue = Math.max(0, numValue - increment).toFixed(decimalPlaces);
}
} else {
if (e.key === 'ArrowUp') {
newValue = Math.min(100000, numValue + 1).toString();
} else {
newValue = Math.max(0, numValue - 1).toString();
}
}
setInputValue(newValue);
setArtificialMindSize(parseFloat(newValue));
}
},
className: 'input-field'
}),
React.createElement('div', { className: 'input-arrows' },
React.createElement('button', {
className: 'input-arrow',
onMouseDown: e => {
e.preventDefault();
const currentValue = inputValue === '' ? '3' : inputValue;
const numValue = parseFloat(currentValue);
if (isNaN(numValue)) return;
let newValue;
if (currentValue.includes('.')) {
const decimalPlaces = currentValue.split('.')[1].length;
const increment = Math.pow(10, -decimalPlaces);
newValue = Math.min(100000, numValue + increment).toFixed(decimalPlaces);
} else {
newValue = Math.min(100000, numValue + 1).toString();
}
setInputValue(newValue);
setArtificialMindSize(parseFloat(newValue));
}
}, '▲'),
React.createElement('button', {
className: 'input-arrow',
onMouseDown: e => {
e.preventDefault();
const currentValue = inputValue === '' ? '3' : inputValue;
const numValue = parseFloat(currentValue);
if (isNaN(numValue)) return;
let newValue;
if (currentValue.includes('.')) {
const decimalPlaces = currentValue.split('.')[1].length;
const increment = Math.pow(10, -decimalPlaces);
newValue = Math.max(0, numValue - increment).toFixed(decimalPlaces);
} else {
newValue = Math.max(0, numValue - 1).toString();
}
setInputValue(newValue);
setArtificialMindSize(parseFloat(newValue));
}
}, '▼')
)
)
),
React.createElement('div', null,
React.createElement('label', { className: 'label' },
React.createElement('span', { className: 'level-indicator' }, `L${currentLevel.level} (1:${currentLevel.ratio})`),
`Replication Factor: ${replicationFactor}x`,
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Levels determine your storage contribution ratio. Higher levels require more storage but allow greater replication for your data. L1=1:3 ratio, L2=1:4, L3=1:5, L4=1:6, L5=1:7 (Group C default).')
)
),
React.createElement(Slider, {
value: replicationFactor,
onChange: setReplicationFactor,
min: 3,
max: 100
})
),
React.createElement('div', { className: 'metrics-grid' },
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Own Storage',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Storage space for your own artificial mind data. Always 1x your mind size.')
)
),
React.createElement('div', { className: 'metric-value' },
`1x (${storageMetrics.ownStorage >= 1000 ? `${(storageMetrics.ownStorage / 1000).toFixed(1)}GB` : `${storageMetrics.ownStorage.toFixed(1)}MB`})`
)
),
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Network Storage',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Storage you contribute to the network for other users\' data. Calculated as: level ratio × replication factor × mind size.')
)
),
React.createElement('div', { className: 'metric-value' },
`${(storageMetrics.networkStorage / artificialMindSize).toFixed(0)}x (${storageMetrics.networkStorage >= 1000 ? `${(storageMetrics.networkStorage / 1000).toFixed(1)}GB` : `${storageMetrics.networkStorage.toFixed(1)}MB`})`
)
),
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Total Storage Required',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Your complete storage commitment: own storage + network storage. This is what you need to provide to participate.')
)
),
React.createElement('div', { className: 'metric-value' },
`${(storageMetrics.totalStorage / artificialMindSize).toFixed(0)}x (${storageMetrics.totalStorage >= 1000 ? `${(storageMetrics.totalStorage / 1000).toFixed(1)}GB` : `${storageMetrics.totalStorage.toFixed(1)}MB`})`
)
),
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Guaranteed Backup',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Minimum number of copies of your data guaranteed to be stored across the network. Same as your replication factor.')
)
),
React.createElement('div', { className: 'metric-value' }, `${storageMetrics.guaranteedBackup}x`)
),
React.createElement('div', { className: 'metric-card' },
React.createElement('div', { className: 'metric-label' }, 'Non-Guaranteed/Surplus',
React.createElement('span', { className: 'info-icon' }, 'i',
React.createElement('div', { className: 'tooltip' }, 'Additional storage beyond guaranteed backup. Provides extra redundancy but may be reduced during network stress.')
)
),
React.createElement('div', { className: 'metric-value' }, `${(storageMetrics.surplus / artificialMindSize).toFixed(0)}x`)
)
),
React.createElement('div', { className: 'chart-container' },
React.createElement(ResponsiveContainer, { width: "100%", height: "100%" },
React.createElement(LineChart, { data: scenarios, margin: getChartMargins() },
React.createElement('defs', null,
React.createElement('linearGradient', { id: "lineGradient", x1: "0", y1: "0", x2: "1", y2: "0" },
React.createElement('stop', { offset: "0%", stopColor: "#6645EB" }),
React.createElement('stop', { offset: "100%", stopColor: "#D445EB" })
)
),
React.createElement(CartesianGrid, { strokeDasharray: "3 3", stroke: "#475569", opacity: 0.1 }),
React.createElement(XAxis, {
dataKey: "destruction", stroke: "#94a3b8",
label: { value: 'Network Destruction %', position: 'insideBottom', offset: offsets.xOffset, fill: '#94a3b8' }
}),
React.createElement(YAxis, {
stroke: "#94a3b8", domain: [0, 100],
label: { value: 'Recovery Probability %', angle: -90, position: 'insideLeft', offset: offsets.yOffset, style: { textAnchor: 'middle' }, fill: '#94a3b8' }
}),
React.createElement(Tooltip, {
contentStyle: { backgroundColor: '#0f172a', borderColor: '#334155' },
formatter: value => [`${value.toFixed(2)}%`, 'Recovery Chance'],
labelFormatter: label => `${label}% Destruction`
}),
React.createElement(Line, {
type: "monotone", dataKey: "probability", stroke: "url(#lineGradient)",
strokeWidth: 2, dot: { fill: '#6645EB', strokeWidth: 2 }, activeDot: { r: 6, fill: '#D445EB' }
})
)
)
),
React.createElement('div', { className: 'box' },
React.createElement('h3', { className: 'box-title' }, 'Recommendation:'),
React.createElement('p', { className: 'recommendation' }, getRecommendation(scenarios))
),
React.createElement('div', null,
React.createElement('h3', { className: 'box-title' }, 'Survival Probabilities:'),
React.createElement('div', { className: 'scenarios-grid' },
scenarios.map(scenario =>
React.createElement('div', { key: scenario.destruction, className: 'scenario-card' },
React.createElement('div', { className: 'scenario-title' }, `${scenario.destruction}% Destruction`),
React.createElement('div', { className: getStatusColorClass(scenario.probability) }, `${scenario.probability.toFixed(2)}%`),
React.createElement('div', { className: 'small-text' }, 'Recovery Chance'),
React.createElement('div', { className: 'small-text' }, `${scenario.surviving_nodes.toLocaleString()} Nodes`)
)
)
)
)
)
);
};
window.addEventListener('load', () =>
setTimeout(() =>
window.Recharts && window.React && window.ReactDOM &&
ReactDOM.render(React.createElement(BackupSimulator), document.getElementById('avatarnet-simulator-root')), 100
)
);
</script>
.svg){kind=small}
.svg){kind=icon}