ux improvements
This commit is contained in:
overcuriousity
parent
d2970d42f4
commit
eb04e071c3
412
index.html
412
index.html
@ -1,5 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
@ -311,7 +312,7 @@
|
|||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calc-input input {
|
.calc-input input {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -485,7 +486,7 @@
|
|||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||||
font-family: 'Consolas', monospace;
|
font-family: 'Consolas', monospace;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
@ -496,7 +497,7 @@
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-value {
|
.result-value {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
min-width: auto;
|
min-width: auto;
|
||||||
@ -568,16 +569,16 @@
|
|||||||
.main-content {
|
.main-content {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formula-box {
|
.formula-box {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
font-size: 0.85em;
|
font-size: 0.85em;
|
||||||
@ -596,6 +597,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="header-content">
|
<div class="header-content">
|
||||||
@ -623,11 +625,13 @@
|
|||||||
<h2>Konstanten</h2>
|
<h2>Konstanten</h2>
|
||||||
<div class="input-grid">
|
<div class="input-grid">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="baseOffset1216">Base Offset <span class="unit-indicator">(Bytes)</span>:</label>
|
<label for="baseOffset1216">Base Offset <span
|
||||||
|
class="unit-indicator">(Bytes)</span>:</label>
|
||||||
<input type="text" id="baseOffset1216" value="0x0" placeholder="0x0">
|
<input type="text" id="baseOffset1216" value="0x0" placeholder="0x0">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="sectorSize1216">Größe eines Sektors <span class="unit-indicator">(Bytes)</span>:</label>
|
<label for="sectorSize1216">Größe eines Sektors <span
|
||||||
|
class="unit-indicator">(Bytes)</span>:</label>
|
||||||
<input type="text" id="sectorSize1216" value="0x200" placeholder="0x200">
|
<input type="text" id="sectorSize1216" value="0x200" placeholder="0x200">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -713,7 +717,8 @@
|
|||||||
<h2>Eingabeparameter</h2>
|
<h2>Eingabeparameter</h2>
|
||||||
<div class="input-grid">
|
<div class="input-grid">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="reservedSectors1216">Anzahl reservierter Sektoren <span class="unit-indicator">(Sektoren)</span>:</label>
|
<label for="reservedSectors1216">Anzahl reservierter Sektoren <span
|
||||||
|
class="unit-indicator">(Sektoren)</span>:</label>
|
||||||
<input type="text" id="reservedSectors1216" placeholder="0x1">
|
<input type="text" id="reservedSectors1216" placeholder="0x1">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
@ -721,23 +726,28 @@
|
|||||||
<input type="text" id="numFATs1216" placeholder="0x2">
|
<input type="text" id="numFATs1216" placeholder="0x2">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="fatSizeBytes1216">Größe einer FAT <span class="unit-indicator">(Bytes)</span>:</label>
|
<label for="fatSizeBytes1216">Größe einer FAT <span
|
||||||
|
class="unit-indicator">(Bytes)</span>:</label>
|
||||||
<input type="text" id="fatSizeBytes1216" placeholder="0x1000">
|
<input type="text" id="fatSizeBytes1216" placeholder="0x1000">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="maxRootEntries1216">Max. Wurzelverzeichnis-Einträge <span class="unit-indicator">(Anzahl)</span>:</label>
|
<label for="maxRootEntries1216">Max. Wurzelverzeichnis-Einträge <span
|
||||||
|
class="unit-indicator">(Anzahl)</span>:</label>
|
||||||
<input type="text" id="maxRootEntries1216" placeholder="0x200">
|
<input type="text" id="maxRootEntries1216" placeholder="0x200">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="partitionSizeInSectors1216">Größe Partition <span class="unit-indicator">(Sektoren)</span>:</label>
|
<label for="partitionSizeInSectors1216">Größe Partition <span
|
||||||
|
class="unit-indicator">(Sektoren)</span>:</label>
|
||||||
<input type="text" id="partitionSizeInSectors1216" placeholder="0x4015">
|
<input type="text" id="partitionSizeInSectors1216" placeholder="0x4015">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="clusterSizeSectors1216">Größe eines Clusters <span class="unit-indicator">(Sektoren)</span>:</label>
|
<label for="clusterSizeSectors1216">Größe eines Clusters <span
|
||||||
|
class="unit-indicator">(Sektoren)</span>:</label>
|
||||||
<input type="text" id="clusterSizeSectors1216" placeholder="0x1">
|
<input type="text" id="clusterSizeSectors1216" placeholder="0x1">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="clusterNumber1216">Cluster Nummer für Position <span class="unit-indicator">(Nummer)</span>:</label>
|
<label for="clusterNumber1216">Cluster Nummer für Position <span
|
||||||
|
class="unit-indicator">(Nummer)</span>:</label>
|
||||||
<input type="text" id="clusterNumber1216" placeholder="0x2">
|
<input type="text" id="clusterNumber1216" placeholder="0x2">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -747,66 +757,89 @@
|
|||||||
<h2>Berechnete Werte</h2>
|
<h2>Berechnete Werte</h2>
|
||||||
<div id="results1216">
|
<div id="results1216">
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="reservedSectors × sectorSize + baseOffset">Beginn FAT-Bereich:</span>
|
<span class="result-label" data-formula="reservedSectors × sectorSize + baseOffset">Beginn
|
||||||
|
FAT-Bereich:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="fatStart1216" data-result-formula="">-</span>
|
<span class="result-value" id="fatStart1216" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('fatStart1216')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('fatStart1216')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="numFATs × fatSizeBytes">Größe FAT-Bereich:</span>
|
<span class="result-label" data-formula="numFATs × fatSizeBytes">Größe FAT-Bereich:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="fatSize1216" data-result-formula="">-</span>
|
<span class="result-value" id="fatSize1216" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('fatSize1216')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('fatSize1216')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="fatStart + fatSize">Ende FAT-Bereich:</span>
|
<span class="result-label" data-formula="fatStart + fatSize">Ende FAT-Bereich:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="fatEnd1216" data-result-formula="">-</span>
|
<span class="result-value" id="fatEnd1216" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('fatEnd1216')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('fatEnd1216')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="maxRootEntries × 0x20">Größe Wurzelverzeichnis:</span>
|
<span class="result-label" data-formula="fatEnd">Beginn Wurzelverzeichnis:</span>
|
||||||
|
<div class="result-value-container">
|
||||||
|
<span class="result-value" id="rootDirStart1216" data-result-formula="">-</span>
|
||||||
|
<button class="copy-btn" onclick="copyToClipboard('rootDirStart1216')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="result-item">
|
||||||
|
<span class="result-label" data-formula="maxRootEntries × 0x20">Größe
|
||||||
|
Wurzelverzeichnis:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="rootDirSize1216" data-result-formula="">-</span>
|
<span class="result-value" id="rootDirSize1216" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('rootDirSize1216')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('rootDirSize1216')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="fatEnd + rootDirSize">Beginn Daten-Bereich:</span>
|
<span class="result-label" data-formula="fatEnd + rootDirSize">Beginn Daten-Bereich:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="dataStart1216" data-result-formula="">-</span>
|
<span class="result-value" id="dataStart1216" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('dataStart1216')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('dataStart1216')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="(partitionSizeInSectors × sectorSize) - (dataStart - baseOffset)">Größe Daten-Bereich:</span>
|
<span class="result-label"
|
||||||
|
data-formula="(partitionSizeInSectors × sectorSize) - (dataStart - baseOffset)">Größe
|
||||||
|
Daten-Bereich:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="dataSize1216" data-result-formula="">-</span>
|
<span class="result-value" id="dataSize1216" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('dataSize1216')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('dataSize1216')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="sectorSize × clusterSizeSectors">Größe eines Clusters:</span>
|
<span class="result-label" data-formula="sectorSize × clusterSizeSectors">Größe eines
|
||||||
|
Clusters:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="clusterSize1216" data-result-formula="">-</span>
|
<span class="result-value" id="clusterSize1216" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('clusterSize1216')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('clusterSize1216')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="dataSize ÷ clusterSize">Anzahl Cluster:</span>
|
<span class="result-label" data-formula="dataSize ÷ clusterSize">Anzahl Cluster:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="numClusters1216" data-result-formula="">-</span>
|
<span class="result-value" id="numClusters1216" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('numClusters1216')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('numClusters1216')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="dataStart + (clusterNumber - 0x2) × clusterSize">Beginn Cluster:</span>
|
<span class="result-label"
|
||||||
|
data-formula="dataStart + (clusterNumber - 0x2) × clusterSize">Beginn Cluster:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="clusterStart1216" data-result-formula="">-</span>
|
<span class="result-value" id="clusterStart1216" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('clusterStart1216')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('clusterStart1216')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -815,15 +848,24 @@
|
|||||||
<div class="section formulas">
|
<div class="section formulas">
|
||||||
<h2>Berechnungsformeln FAT12/16</h2>
|
<h2>Berechnungsformeln FAT12/16</h2>
|
||||||
<div class="formula-box">
|
<div class="formula-box">
|
||||||
<div class="formula"><span class="calculated">Beginn FAT-Bereich</span> = Anzahl reservierter Sektoren × Größe eines Sektors + Base Offset</div>
|
<div class="formula"><span class="calculated">Beginn FAT-Bereich</span> = Anzahl reservierter
|
||||||
<div class="formula"><span class="calculated">Größe FAT-Bereich</span> = Anzahl FATs × Größe einer FAT</div>
|
Sektoren × Größe eines Sektors + Base Offset</div>
|
||||||
<div class="formula"><span class="calculated">Ende FAT-Bereich</span> = Beginn FAT-Bereich + Größe FAT-Bereich</div>
|
<div class="formula"><span class="calculated">Größe FAT-Bereich</span> = Anzahl FATs × Größe
|
||||||
<div class="formula"><span class="calculated">Größe Wurzelverzeichnis</span> = Anzahl max. Wurzelverzeichnis-Einträge × 0x20</div>
|
einer FAT</div>
|
||||||
<div class="formula"><span class="calculated">Beginn Daten-Bereich</span> = Ende FAT-Bereich + Größe Wurzelverzeichnis</div>
|
<div class="formula"><span class="calculated">Ende FAT-Bereich</span> = Beginn FAT-Bereich +
|
||||||
<div class="formula"><span class="calculated">Größe Daten-Bereich</span> = (Größe Partition in Sektoren × Größe eines Sektors) - (Beginn Daten-Bereich - Base Offset)</div>
|
Größe FAT-Bereich</div>
|
||||||
<div class="formula"><span class="calculated">Größe eines Clusters</span> = Größe eines Sektors × Größe eines Clusters in Sektoren</div>
|
<div class="formula"><span class="calculated">Größe Wurzelverzeichnis</span> = Anzahl max.
|
||||||
<div class="formula"><span class="calculated">Anzahl Cluster</span> = Größe Daten-Bereich ÷ Größe eines Clusters</div>
|
Wurzelverzeichnis-Einträge × 0x20</div>
|
||||||
<div class="formula"><span class="calculated">Beginn Cluster</span> = Beginn Daten-Bereich + (Cluster - 0x2) × Größe eines Clusters</div>
|
<div class="formula"><span class="calculated">Beginn Daten-Bereich</span> = Ende FAT-Bereich +
|
||||||
|
Größe Wurzelverzeichnis</div>
|
||||||
|
<div class="formula"><span class="calculated">Größe Daten-Bereich</span> = (Größe Partition in
|
||||||
|
Sektoren × Größe eines Sektors) - (Beginn Daten-Bereich - Base Offset)</div>
|
||||||
|
<div class="formula"><span class="calculated">Größe eines Clusters</span> = Größe eines Sektors
|
||||||
|
× Größe eines Clusters in Sektoren</div>
|
||||||
|
<div class="formula"><span class="calculated">Anzahl Cluster</span> = Größe Daten-Bereich ÷
|
||||||
|
Größe eines Clusters</div>
|
||||||
|
<div class="formula"><span class="calculated">Beginn Cluster</span> = Beginn Daten-Bereich +
|
||||||
|
(Cluster - 0x2) × Größe eines Clusters</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -835,11 +877,13 @@
|
|||||||
<h2>Konstanten</h2>
|
<h2>Konstanten</h2>
|
||||||
<div class="input-grid">
|
<div class="input-grid">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="baseOffset32">Base Offset <span class="unit-indicator">(Bytes)</span>:</label>
|
<label for="baseOffset32">Base Offset <span
|
||||||
|
class="unit-indicator">(Bytes)</span>:</label>
|
||||||
<input type="text" id="baseOffset32" value="0x0" placeholder="0x0">
|
<input type="text" id="baseOffset32" value="0x0" placeholder="0x0">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="sectorSize32">Größe eines Sektors <span class="unit-indicator">(Bytes)</span>:</label>
|
<label for="sectorSize32">Größe eines Sektors <span
|
||||||
|
class="unit-indicator">(Bytes)</span>:</label>
|
||||||
<input type="text" id="sectorSize32" value="0x200" placeholder="0x200">
|
<input type="text" id="sectorSize32" value="0x200" placeholder="0x200">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -880,25 +924,32 @@
|
|||||||
<button class="calc-btn number" onclick="calcInput('B', 'fat32')">B</button>
|
<button class="calc-btn number" onclick="calcInput('B', 'fat32')">B</button>
|
||||||
<button class="calc-btn number" onclick="calcInput('C', 'fat32')">C</button>
|
<button class="calc-btn number" onclick="calcInput('C', 'fat32')">C</button>
|
||||||
<button class="calc-btn number" onclick="calcInput('D', 'fat32')">D</button>
|
<button class="calc-btn number" onclick="calcInput('D', 'fat32')">D</button>
|
||||||
<button class="calc-btn operation" onclick="calcOperation('<<', 'fat32')"><<</button>
|
<button class="calc-btn operation"
|
||||||
|
onclick="calcOperation('<<', 'fat32')"><<</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="calc-row">
|
<div class="calc-row">
|
||||||
<button class="calc-btn number" onclick="calcInput('E', 'fat32')">E</button>
|
<button class="calc-btn number" onclick="calcInput('E', 'fat32')">E</button>
|
||||||
<button class="calc-btn number" onclick="calcInput('F', 'fat32')">F</button>
|
<button class="calc-btn number" onclick="calcInput('F', 'fat32')">F</button>
|
||||||
<button class="calc-btn number" onclick="calcInput('7', 'fat32')">7</button>
|
<button class="calc-btn number" onclick="calcInput('7', 'fat32')">7</button>
|
||||||
<button class="calc-btn number" onclick="calcInput('8', 'fat32')">8</button>
|
<button class="calc-btn number" onclick="calcInput('8', 'fat32')">8</button>
|
||||||
<button class="calc-btn operation" onclick="calcOperation('>>', 'fat32')">>></button>
|
<button class="calc-btn operation"
|
||||||
|
onclick="calcOperation('>>', 'fat32')">>></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="calc-row">
|
<div class="calc-row">
|
||||||
<button class="calc-btn operation" onclick="calcOperation('AND', 'fat32')">AND</button>
|
<button class="calc-btn operation"
|
||||||
<button class="calc-btn operation" onclick="calcOperation('OR', 'fat32')">OR</button>
|
onclick="calcOperation('AND', 'fat32')">AND</button>
|
||||||
|
<button class="calc-btn operation"
|
||||||
|
onclick="calcOperation('OR', 'fat32')">OR</button>
|
||||||
<button class="calc-btn number" onclick="calcInput('9', 'fat32')">9</button>
|
<button class="calc-btn number" onclick="calcInput('9', 'fat32')">9</button>
|
||||||
<button class="calc-btn operation" onclick="calcOperation('/', 'fat32')">/</button>
|
<button class="calc-btn operation" onclick="calcOperation('/', 'fat32')">/</button>
|
||||||
<button class="calc-btn operation" onclick="calcOperation('MOD', 'fat32')">MOD</button>
|
<button class="calc-btn operation"
|
||||||
|
onclick="calcOperation('MOD', 'fat32')">MOD</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="calc-row">
|
<div class="calc-row">
|
||||||
<button class="calc-btn operation" onclick="calcOperation('XOR', 'fat32')">XOR</button>
|
<button class="calc-btn operation"
|
||||||
<button class="calc-btn operation" onclick="calcOperation('NOT', 'fat32')">NOT</button>
|
onclick="calcOperation('XOR', 'fat32')">XOR</button>
|
||||||
|
<button class="calc-btn operation"
|
||||||
|
onclick="calcOperation('NOT', 'fat32')">NOT</button>
|
||||||
<button class="calc-btn number" onclick="calcInput('4', 'fat32')">4</button>
|
<button class="calc-btn number" onclick="calcInput('4', 'fat32')">4</button>
|
||||||
<button class="calc-btn number" onclick="calcInput('5', 'fat32')">5</button>
|
<button class="calc-btn number" onclick="calcInput('5', 'fat32')">5</button>
|
||||||
<button class="calc-btn number" onclick="calcInput('6', 'fat32')">6</button>
|
<button class="calc-btn number" onclick="calcInput('6', 'fat32')">6</button>
|
||||||
@ -925,7 +976,8 @@
|
|||||||
<h2>Eingabeparameter</h2>
|
<h2>Eingabeparameter</h2>
|
||||||
<div class="input-grid">
|
<div class="input-grid">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="reservedSectors32">Anzahl reservierter Sektoren <span class="unit-indicator">(Sektoren)</span>:</label>
|
<label for="reservedSectors32">Anzahl reservierter Sektoren <span
|
||||||
|
class="unit-indicator">(Sektoren)</span>:</label>
|
||||||
<input type="text" id="reservedSectors32" placeholder="0x20">
|
<input type="text" id="reservedSectors32" placeholder="0x20">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
@ -933,23 +985,28 @@
|
|||||||
<input type="text" id="numFATs32" placeholder="0x2">
|
<input type="text" id="numFATs32" placeholder="0x2">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="fatSizeBytes32">Größe einer FAT <span class="unit-indicator">(Bytes)</span>:</label>
|
<label for="fatSizeBytes32">Größe einer FAT <span
|
||||||
|
class="unit-indicator">(Bytes)</span>:</label>
|
||||||
<input type="text" id="fatSizeBytes32" placeholder="0x10000">
|
<input type="text" id="fatSizeBytes32" placeholder="0x10000">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="rootDirCluster32">Root Directory Cluster <span class="unit-indicator">(Nummer)</span>:</label>
|
<label for="rootDirCluster32">Root Directory Cluster <span
|
||||||
|
class="unit-indicator">(Nummer)</span>:</label>
|
||||||
<input type="text" id="rootDirCluster32" placeholder="0x2">
|
<input type="text" id="rootDirCluster32" placeholder="0x2">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="partitionSizeInSectors32">Größe Partition <span class="unit-indicator">(Sektoren)</span>:</label>
|
<label for="partitionSizeInSectors32">Größe Partition <span
|
||||||
|
class="unit-indicator">(Sektoren)</span>:</label>
|
||||||
<input type="text" id="partitionSizeInSectors32" placeholder="0x20000">
|
<input type="text" id="partitionSizeInSectors32" placeholder="0x20000">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="clusterSizeSectors32">Größe eines Clusters <span class="unit-indicator">(Sektoren)</span>:</label>
|
<label for="clusterSizeSectors32">Größe eines Clusters <span
|
||||||
|
class="unit-indicator">(Sektoren)</span>:</label>
|
||||||
<input type="text" id="clusterSizeSectors32" placeholder="0x8">
|
<input type="text" id="clusterSizeSectors32" placeholder="0x8">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="clusterNumber32">Cluster Nummer für Position <span class="unit-indicator">(Nummer)</span>:</label>
|
<label for="clusterNumber32">Cluster Nummer für Position <span
|
||||||
|
class="unit-indicator">(Nummer)</span>:</label>
|
||||||
<input type="text" id="clusterNumber32" placeholder="0x2">
|
<input type="text" id="clusterNumber32" placeholder="0x2">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -959,66 +1016,82 @@
|
|||||||
<h2>Berechnete Werte</h2>
|
<h2>Berechnete Werte</h2>
|
||||||
<div id="results32">
|
<div id="results32">
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="reservedSectors × sectorSize + baseOffset">Beginn FAT-Bereich:</span>
|
<span class="result-label" data-formula="reservedSectors × sectorSize + baseOffset">Beginn
|
||||||
|
FAT-Bereich:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="fatStart32" data-result-formula="">-</span>
|
<span class="result-value" id="fatStart32" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('fatStart32')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('fatStart32')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="numFATs × fatSizeBytes">Größe FAT-Bereich:</span>
|
<span class="result-label" data-formula="numFATs × fatSizeBytes">Größe FAT-Bereich:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="fatSize32" data-result-formula="">-</span>
|
<span class="result-value" id="fatSize32" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('fatSize32')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('fatSize32')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="fatStart + fatSize">Ende FAT-Bereich:</span>
|
<span class="result-label" data-formula="fatStart + fatSize">Ende FAT-Bereich:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="fatEnd32" data-result-formula="">-</span>
|
<span class="result-value" id="fatEnd32" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('fatEnd32')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('fatEnd32')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="fatEnd">Beginn Daten-Bereich:</span>
|
<span class="result-label" data-formula="fatEnd">Beginn Daten-Bereich:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="dataStart32" data-result-formula="">-</span>
|
<span class="result-value" id="dataStart32" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('dataStart32')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('dataStart32')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="(partitionSizeInSectors × sectorSize) - (dataStart - baseOffset)">Größe Daten-Bereich:</span>
|
<span class="result-label"
|
||||||
|
data-formula="(partitionSizeInSectors × sectorSize) - (dataStart - baseOffset)">Größe
|
||||||
|
Daten-Bereich:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="dataSize32" data-result-formula="">-</span>
|
<span class="result-value" id="dataSize32" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('dataSize32')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('dataSize32')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="sectorSize × clusterSizeSectors">Größe eines Clusters:</span>
|
<span class="result-label" data-formula="sectorSize × clusterSizeSectors">Größe eines
|
||||||
|
Clusters:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="clusterSize32" data-result-formula="">-</span>
|
<span class="result-value" id="clusterSize32" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('clusterSize32')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('clusterSize32')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="dataSize ÷ clusterSize">Anzahl Cluster:</span>
|
<span class="result-label" data-formula="dataSize ÷ clusterSize">Anzahl Cluster:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="numClusters32" data-result-formula="">-</span>
|
<span class="result-value" id="numClusters32" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('numClusters32')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('numClusters32')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="dataStart + (clusterNumber - 0x2) × clusterSize">Beginn Cluster:</span>
|
<span class="result-label"
|
||||||
|
data-formula="dataStart + (clusterNumber - 0x2) × clusterSize">Beginn Cluster:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="clusterStart32" data-result-formula="">-</span>
|
<span class="result-value" id="clusterStart32" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('clusterStart32')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('clusterStart32')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-item">
|
<div class="result-item">
|
||||||
<span class="result-label" data-formula="dataStart + (rootDirCluster - 0x2) × clusterSize">Root Directory Position:</span>
|
<span class="result-label"
|
||||||
|
data-formula="dataStart + (rootDirCluster - 0x2) × clusterSize">Root Directory
|
||||||
|
Position:</span>
|
||||||
<div class="result-value-container">
|
<div class="result-value-container">
|
||||||
<span class="result-value" id="rootDirPos32" data-result-formula="">-</span>
|
<span class="result-value" id="rootDirPos32" data-result-formula="">-</span>
|
||||||
<button class="copy-btn" onclick="copyToClipboard('rootDirPos32')" title="Copy to clipboard">📋</button>
|
<button class="copy-btn" onclick="copyToClipboard('rootDirPos32')"
|
||||||
|
title="Copy to clipboard">📋</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1027,15 +1100,24 @@
|
|||||||
<div class="section formulas">
|
<div class="section formulas">
|
||||||
<h2>Berechnungsformeln FAT32</h2>
|
<h2>Berechnungsformeln FAT32</h2>
|
||||||
<div class="formula-box">
|
<div class="formula-box">
|
||||||
<div class="formula"><span class="calculated">Beginn FAT-Bereich</span> = Anzahl reservierter Sektoren × Größe eines Sektors + Base Offset</div>
|
<div class="formula"><span class="calculated">Beginn FAT-Bereich</span> = Anzahl reservierter
|
||||||
<div class="formula"><span class="calculated">Größe FAT-Bereich</span> = Anzahl FATs × Größe einer FAT</div>
|
Sektoren × Größe eines Sektors + Base Offset</div>
|
||||||
<div class="formula"><span class="calculated">Ende FAT-Bereich</span> = Beginn FAT-Bereich + Größe FAT-Bereich</div>
|
<div class="formula"><span class="calculated">Größe FAT-Bereich</span> = Anzahl FATs × Größe
|
||||||
<div class="formula"><span class="calculated">Beginn Daten-Bereich</span> = Ende FAT-Bereich (kein festes Root Directory)</div>
|
einer FAT</div>
|
||||||
<div class="formula"><span class="calculated">Größe Daten-Bereich</span> = (Größe Partition in Sektoren × Größe eines Sektors) - (Beginn Daten-Bereich - Base Offset)</div>
|
<div class="formula"><span class="calculated">Ende FAT-Bereich</span> = Beginn FAT-Bereich +
|
||||||
<div class="formula"><span class="calculated">Größe eines Clusters</span> = Größe eines Sektors × Größe eines Clusters in Sektoren</div>
|
Größe FAT-Bereich</div>
|
||||||
<div class="formula"><span class="calculated">Anzahl Cluster</span> = Größe Daten-Bereich ÷ Größe eines Clusters</div>
|
<div class="formula"><span class="calculated">Beginn Daten-Bereich</span> = Ende FAT-Bereich
|
||||||
<div class="formula"><span class="calculated">Beginn Cluster</span> = Beginn Daten-Bereich + (Cluster - 0x2) × Größe eines Clusters</div>
|
(kein festes Root Directory)</div>
|
||||||
<div class="formula"><span class="calculated">Root Directory Position</span> = Beginn Daten-Bereich + (Root Directory Cluster - 0x2) × Größe eines Clusters</div>
|
<div class="formula"><span class="calculated">Größe Daten-Bereich</span> = (Größe Partition in
|
||||||
|
Sektoren × Größe eines Sektors) - (Beginn Daten-Bereich - Base Offset)</div>
|
||||||
|
<div class="formula"><span class="calculated">Größe eines Clusters</span> = Größe eines Sektors
|
||||||
|
× Größe eines Clusters in Sektoren</div>
|
||||||
|
<div class="formula"><span class="calculated">Anzahl Cluster</span> = Größe Daten-Bereich ÷
|
||||||
|
Größe eines Clusters</div>
|
||||||
|
<div class="formula"><span class="calculated">Beginn Cluster</span> = Beginn Daten-Bereich +
|
||||||
|
(Cluster - 0x2) × Größe eines Clusters</div>
|
||||||
|
<div class="formula"><span class="calculated">Root Directory Position</span> = Beginn
|
||||||
|
Daten-Bereich + (Root Directory Cluster - 0x2) × Größe eines Clusters</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1104,19 +1186,19 @@
|
|||||||
const currentTab = tab || getCurrentTab();
|
const currentTab = tab || getCurrentTab();
|
||||||
const state = getCalculatorState(currentTab);
|
const state = getCalculatorState(currentTab);
|
||||||
const suffix = currentTab === 'fat32' ? '32' : '';
|
const suffix = currentTab === 'fat32' ? '32' : '';
|
||||||
|
|
||||||
const inputElement = document.getElementById(`calcInput${suffix}`);
|
const inputElement = document.getElementById(`calcInput${suffix}`);
|
||||||
const hexElement = document.getElementById(`hexValue${suffix}`);
|
const hexElement = document.getElementById(`hexValue${suffix}`);
|
||||||
const decElement = document.getElementById(`decValue${suffix}`);
|
const decElement = document.getElementById(`decValue${suffix}`);
|
||||||
const binElement = document.getElementById(`binValue${suffix}`);
|
const binElement = document.getElementById(`binValue${suffix}`);
|
||||||
|
|
||||||
// Ensure value is within JavaScript's safe integer range
|
// Ensure value is within JavaScript's safe integer range
|
||||||
const value = Math.max(0, Math.min(state.currentValue, Number.MAX_SAFE_INTEGER));
|
const value = Math.max(0, Math.min(state.currentValue, Number.MAX_SAFE_INTEGER));
|
||||||
|
|
||||||
const hexStr = '0x' + value.toString(16).toUpperCase();
|
const hexStr = '0x' + value.toString(16).toUpperCase();
|
||||||
const decStr = value.toString(10);
|
const decStr = value.toString(10);
|
||||||
const binStr = '0b' + value.toString(2);
|
const binStr = '0b' + value.toString(2);
|
||||||
|
|
||||||
inputElement.value = hexStr;
|
inputElement.value = hexStr;
|
||||||
hexElement.textContent = hexStr;
|
hexElement.textContent = hexStr;
|
||||||
decElement.textContent = decStr;
|
decElement.textContent = decStr;
|
||||||
@ -1126,40 +1208,40 @@
|
|||||||
function calcInput(digit, tab = null) {
|
function calcInput(digit, tab = null) {
|
||||||
const currentTab = tab || getCurrentTab();
|
const currentTab = tab || getCurrentTab();
|
||||||
const state = getCalculatorState(currentTab);
|
const state = getCalculatorState(currentTab);
|
||||||
|
|
||||||
if (state.waitingForOperand) {
|
if (state.waitingForOperand) {
|
||||||
state.currentValue = 0;
|
state.currentValue = 0;
|
||||||
state.waitingForOperand = false;
|
state.waitingForOperand = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Convert hex digit to number
|
// Convert hex digit to number
|
||||||
const digitValue = parseInt(digit, 16);
|
const digitValue = parseInt(digit, 16);
|
||||||
if (isNaN(digitValue)) return;
|
if (isNaN(digitValue)) return;
|
||||||
|
|
||||||
// Prevent overflow by limiting to a reasonable hex value
|
// Prevent overflow by limiting to a reasonable hex value
|
||||||
const newValue = state.currentValue * 16 + digitValue;
|
const newValue = state.currentValue * 16 + digitValue;
|
||||||
if (newValue <= 0xFFFFFFFFFFFFFF) { // Limit to 56 bits for safety
|
if (newValue <= 0xFFFFFFFFFFFFFF) { // Limit to 56 bits for safety
|
||||||
state.currentValue = newValue;
|
state.currentValue = newValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
updateCalculatorDisplay(currentTab);
|
updateCalculatorDisplay(currentTab);
|
||||||
}
|
}
|
||||||
|
|
||||||
function calcOperation(operation, tab = null) {
|
function calcOperation(operation, tab = null) {
|
||||||
const currentTab = tab || getCurrentTab();
|
const currentTab = tab || getCurrentTab();
|
||||||
const state = getCalculatorState(currentTab);
|
const state = getCalculatorState(currentTab);
|
||||||
|
|
||||||
if (operation === 'NOT') {
|
if (operation === 'NOT') {
|
||||||
// Unary operation - apply immediately
|
// Unary operation - apply immediately
|
||||||
state.currentValue = (~state.currentValue) >>> 0; // Use unsigned 32-bit
|
state.currentValue = (~state.currentValue) >>> 0; // Use unsigned 32-bit
|
||||||
updateCalculatorDisplay(currentTab);
|
updateCalculatorDisplay(currentTab);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (state.previousValue !== 0 && !state.waitingForOperand) {
|
if (state.previousValue !== 0 && !state.waitingForOperand) {
|
||||||
calcEquals(currentTab, false);
|
calcEquals(currentTab, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
state.previousValue = state.currentValue;
|
state.previousValue = state.currentValue;
|
||||||
state.operation = operation;
|
state.operation = operation;
|
||||||
state.waitingForOperand = true;
|
state.waitingForOperand = true;
|
||||||
@ -1168,11 +1250,11 @@
|
|||||||
function calcEquals(tab = null, updateDisplay = true) {
|
function calcEquals(tab = null, updateDisplay = true) {
|
||||||
const currentTab = tab || getCurrentTab();
|
const currentTab = tab || getCurrentTab();
|
||||||
const state = getCalculatorState(currentTab);
|
const state = getCalculatorState(currentTab);
|
||||||
|
|
||||||
if (state.operation && state.previousValue !== null) {
|
if (state.operation && state.previousValue !== null) {
|
||||||
const prev = state.previousValue;
|
const prev = state.previousValue;
|
||||||
const curr = state.currentValue;
|
const curr = state.currentValue;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
switch (state.operation) {
|
switch (state.operation) {
|
||||||
case '+':
|
case '+':
|
||||||
@ -1214,22 +1296,22 @@
|
|||||||
state.currentValue = (prev >> curr) >>> 0;
|
state.currentValue = (prev >> curr) >>> 0;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ensure positive value
|
// Ensure positive value
|
||||||
if (state.currentValue < 0) {
|
if (state.currentValue < 0) {
|
||||||
state.currentValue = 0;
|
state.currentValue = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
alert('Calculation error: ' + error.message);
|
alert('Calculation error: ' + error.message);
|
||||||
state.currentValue = 0;
|
state.currentValue = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
state.operation = null;
|
state.operation = null;
|
||||||
state.previousValue = 0;
|
state.previousValue = 0;
|
||||||
state.waitingForOperand = true;
|
state.waitingForOperand = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (updateDisplay) {
|
if (updateDisplay) {
|
||||||
updateCalculatorDisplay(currentTab);
|
updateCalculatorDisplay(currentTab);
|
||||||
}
|
}
|
||||||
@ -1238,19 +1320,19 @@
|
|||||||
function calcClear(tab = null) {
|
function calcClear(tab = null) {
|
||||||
const currentTab = tab || getCurrentTab();
|
const currentTab = tab || getCurrentTab();
|
||||||
const state = getCalculatorState(currentTab);
|
const state = getCalculatorState(currentTab);
|
||||||
|
|
||||||
state.currentValue = 0;
|
state.currentValue = 0;
|
||||||
state.previousValue = 0;
|
state.previousValue = 0;
|
||||||
state.operation = null;
|
state.operation = null;
|
||||||
state.waitingForOperand = false;
|
state.waitingForOperand = false;
|
||||||
|
|
||||||
updateCalculatorDisplay(currentTab);
|
updateCalculatorDisplay(currentTab);
|
||||||
}
|
}
|
||||||
|
|
||||||
function calcBackspace(tab = null) {
|
function calcBackspace(tab = null) {
|
||||||
const currentTab = tab || getCurrentTab();
|
const currentTab = tab || getCurrentTab();
|
||||||
const state = getCalculatorState(currentTab);
|
const state = getCalculatorState(currentTab);
|
||||||
|
|
||||||
if (!state.waitingForOperand) {
|
if (!state.waitingForOperand) {
|
||||||
state.currentValue = Math.floor(state.currentValue / 16);
|
state.currentValue = Math.floor(state.currentValue / 16);
|
||||||
updateCalculatorDisplay(currentTab);
|
updateCalculatorDisplay(currentTab);
|
||||||
@ -1260,7 +1342,7 @@
|
|||||||
function calcMemory(operation, tab = null) {
|
function calcMemory(operation, tab = null) {
|
||||||
const currentTab = tab || getCurrentTab();
|
const currentTab = tab || getCurrentTab();
|
||||||
const state = getCalculatorState(currentTab);
|
const state = getCalculatorState(currentTab);
|
||||||
|
|
||||||
switch (operation) {
|
switch (operation) {
|
||||||
case 'MC':
|
case 'MC':
|
||||||
state.memory = 0;
|
state.memory = 0;
|
||||||
@ -1294,13 +1376,13 @@
|
|||||||
createTooltip();
|
createTooltip();
|
||||||
tooltip.innerHTML = text;
|
tooltip.innerHTML = text;
|
||||||
tooltip.style.display = 'block';
|
tooltip.style.display = 'block';
|
||||||
|
|
||||||
const rect = element.getBoundingClientRect();
|
const rect = element.getBoundingClientRect();
|
||||||
const tooltipRect = tooltip.getBoundingClientRect();
|
const tooltipRect = tooltip.getBoundingClientRect();
|
||||||
|
|
||||||
let left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
|
let left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
|
||||||
let top = rect.top - tooltipRect.height - 8;
|
let top = rect.top - tooltipRect.height - 8;
|
||||||
|
|
||||||
// Keep tooltip within viewport
|
// Keep tooltip within viewport
|
||||||
if (left < 10) left = 10;
|
if (left < 10) left = 10;
|
||||||
if (left + tooltipRect.width > window.innerWidth - 10) {
|
if (left + tooltipRect.width > window.innerWidth - 10) {
|
||||||
@ -1309,7 +1391,7 @@
|
|||||||
if (top < 10) {
|
if (top < 10) {
|
||||||
top = rect.bottom + 8;
|
top = rect.bottom + 8;
|
||||||
}
|
}
|
||||||
|
|
||||||
tooltip.style.left = left + 'px';
|
tooltip.style.left = left + 'px';
|
||||||
tooltip.style.top = top + 'px';
|
tooltip.style.top = top + 'px';
|
||||||
}
|
}
|
||||||
@ -1325,7 +1407,7 @@
|
|||||||
const filesystems = {
|
const filesystems = {
|
||||||
fat1216: {
|
fat1216: {
|
||||||
requiredFields: ['reservedSectors1216', 'numFATs1216', 'fatSizeBytes1216', 'maxRootEntries1216', 'partitionSizeInSectors1216', 'clusterSizeSectors1216'],
|
requiredFields: ['reservedSectors1216', 'numFATs1216', 'fatSizeBytes1216', 'maxRootEntries1216', 'partitionSizeInSectors1216', 'clusterSizeSectors1216'],
|
||||||
calculate: function() {
|
calculate: function () {
|
||||||
const baseOffset = parseHex(document.getElementById('baseOffset1216').value);
|
const baseOffset = parseHex(document.getElementById('baseOffset1216').value);
|
||||||
const sectorSize = parseHex(document.getElementById('sectorSize1216').value);
|
const sectorSize = parseHex(document.getElementById('sectorSize1216').value);
|
||||||
const reservedSectors = parseHex(document.getElementById('reservedSectors1216').value);
|
const reservedSectors = parseHex(document.getElementById('reservedSectors1216').value);
|
||||||
@ -1339,6 +1421,7 @@
|
|||||||
const fatStart = reservedSectors * sectorSize + baseOffset;
|
const fatStart = reservedSectors * sectorSize + baseOffset;
|
||||||
const fatSize = numFATs * fatSizeBytes;
|
const fatSize = numFATs * fatSizeBytes;
|
||||||
const fatEnd = fatStart + fatSize;
|
const fatEnd = fatStart + fatSize;
|
||||||
|
const rootDirStart = fatEnd;
|
||||||
const rootDirSize = maxRootEntries * 0x20;
|
const rootDirSize = maxRootEntries * 0x20;
|
||||||
const dataStart = fatEnd + rootDirSize;
|
const dataStart = fatEnd + rootDirSize;
|
||||||
const dataSize = partitionSizeInSectors * sectorSize - (dataStart - baseOffset);
|
const dataSize = partitionSizeInSectors * sectorSize - (dataStart - baseOffset);
|
||||||
@ -1346,11 +1429,11 @@
|
|||||||
const numClusters = clusterSize > 0 ? Math.floor(dataSize / clusterSize) : 0;
|
const numClusters = clusterSize > 0 ? Math.floor(dataSize / clusterSize) : 0;
|
||||||
const clusterStart = dataStart + (clusterNumber - 0x2) * clusterSize;
|
const clusterStart = dataStart + (clusterNumber - 0x2) * clusterSize;
|
||||||
|
|
||||||
// Store calculation formulas with actual values
|
|
||||||
const calculations = {
|
const calculations = {
|
||||||
fatStart: `${reservedSectors.toString(16)} × ${sectorSize.toString(16)} + ${baseOffset.toString(16)} = ${fatStart.toString(16)}`,
|
fatStart: `${reservedSectors.toString(16)} × ${sectorSize.toString(16)} + ${baseOffset.toString(16)} = ${fatStart.toString(16)}`,
|
||||||
fatSize: `${numFATs.toString(16)} × ${fatSizeBytes.toString(16)} = ${fatSize.toString(16)}`,
|
fatSize: `${numFATs.toString(16)} × ${fatSizeBytes.toString(16)} = ${fatSize.toString(16)}`,
|
||||||
fatEnd: `${fatStart.toString(16)} + ${fatSize.toString(16)} = ${fatEnd.toString(16)}`,
|
fatEnd: `${fatStart.toString(16)} + ${fatSize.toString(16)} = ${fatEnd.toString(16)}`,
|
||||||
|
rootDirStart: `${fatEnd.toString(16)}`,
|
||||||
rootDirSize: `${maxRootEntries.toString(16)} × 0x20 = ${rootDirSize.toString(16)}`,
|
rootDirSize: `${maxRootEntries.toString(16)} × 0x20 = ${rootDirSize.toString(16)}`,
|
||||||
dataStart: `${fatEnd.toString(16)} + ${rootDirSize.toString(16)} = ${dataStart.toString(16)}`,
|
dataStart: `${fatEnd.toString(16)} + ${rootDirSize.toString(16)} = ${dataStart.toString(16)}`,
|
||||||
dataSize: `(${partitionSizeInSectors.toString(16)} × ${sectorSize.toString(16)}) - (${dataStart.toString(16)} - ${baseOffset.toString(16)}) = ${dataSize.toString(16)}`,
|
dataSize: `(${partitionSizeInSectors.toString(16)} × ${sectorSize.toString(16)}) - (${dataStart.toString(16)} - ${baseOffset.toString(16)}) = ${dataSize.toString(16)}`,
|
||||||
@ -1360,14 +1443,14 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
fatStart, fatSize, fatEnd, rootDirSize, dataStart, dataSize,
|
fatStart, fatSize, fatEnd, rootDirStart, rootDirSize, dataStart, dataSize,
|
||||||
clusterSize, numClusters, clusterStart, calculations
|
clusterSize, numClusters, clusterStart, calculations
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fat32: {
|
fat32: {
|
||||||
requiredFields: ['reservedSectors32', 'numFATs32', 'fatSizeBytes32', 'rootDirCluster32', 'partitionSizeInSectors32', 'clusterSizeSectors32'],
|
requiredFields: ['reservedSectors32', 'numFATs32', 'fatSizeBytes32', 'rootDirCluster32', 'partitionSizeInSectors32', 'clusterSizeSectors32'],
|
||||||
calculate: function() {
|
calculate: function () {
|
||||||
const baseOffset = parseHex(document.getElementById('baseOffset32').value);
|
const baseOffset = parseHex(document.getElementById('baseOffset32').value);
|
||||||
const sectorSize = parseHex(document.getElementById('sectorSize32').value);
|
const sectorSize = parseHex(document.getElementById('sectorSize32').value);
|
||||||
const reservedSectors = parseHex(document.getElementById('reservedSectors32').value);
|
const reservedSectors = parseHex(document.getElementById('reservedSectors32').value);
|
||||||
@ -1401,7 +1484,7 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
fatStart, fatSize, fatEnd, dataStart, dataSize,
|
fatStart, fatSize, fatEnd, dataStart, dataSize,
|
||||||
clusterSize, numClusters, clusterStart, rootDirPos, calculations
|
clusterSize, numClusters, clusterStart, rootDirPos, calculations
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -1428,11 +1511,11 @@
|
|||||||
function copyToClipboard(elementId) {
|
function copyToClipboard(elementId) {
|
||||||
const element = document.getElementById(elementId);
|
const element = document.getElementById(elementId);
|
||||||
const text = element.textContent.trim();
|
const text = element.textContent.trim();
|
||||||
|
|
||||||
if (text === '-' || text.includes('Fehler')) {
|
if (text === '-' || text.includes('Fehler')) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
navigator.clipboard.writeText(text).then(() => {
|
navigator.clipboard.writeText(text).then(() => {
|
||||||
const btn = element.parentElement.querySelector('.copy-btn');
|
const btn = element.parentElement.querySelector('.copy-btn');
|
||||||
const originalText = btn.textContent;
|
const originalText = btn.textContent;
|
||||||
@ -1451,14 +1534,14 @@
|
|||||||
document.querySelectorAll('.tab-content').forEach(content => {
|
document.querySelectorAll('.tab-content').forEach(content => {
|
||||||
content.classList.remove('active');
|
content.classList.remove('active');
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('.tab').forEach(tab => {
|
document.querySelectorAll('.tab').forEach(tab => {
|
||||||
tab.classList.remove('active');
|
tab.classList.remove('active');
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById(tabId).classList.add('active');
|
document.getElementById(tabId).classList.add('active');
|
||||||
event.target.classList.add('active');
|
event.target.classList.add('active');
|
||||||
|
|
||||||
// Update calculator display when switching tabs
|
// Update calculator display when switching tabs
|
||||||
updateCalculatorDisplay(tabId);
|
updateCalculatorDisplay(tabId);
|
||||||
}
|
}
|
||||||
@ -1472,12 +1555,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const results = fs.calculate();
|
const results = fs.calculate();
|
||||||
|
|
||||||
if (fsType === 'fat1216') {
|
if (fsType === 'fat1216') {
|
||||||
const mapping = {
|
const mapping = {
|
||||||
'fatStart1216': ['fatStart', 'fatStart'],
|
'fatStart1216': ['fatStart', 'fatStart'],
|
||||||
'fatSize1216': ['fatSize', 'fatSize'],
|
'fatSize1216': ['fatSize', 'fatSize'],
|
||||||
'fatEnd1216': ['fatEnd', 'fatEnd'],
|
'fatEnd1216': ['fatEnd', 'fatEnd'],
|
||||||
|
'rootDirStart1216': ['rootDirStart', 'rootDirStart'],
|
||||||
'rootDirSize1216': ['rootDirSize', 'rootDirSize'],
|
'rootDirSize1216': ['rootDirSize', 'rootDirSize'],
|
||||||
'dataStart1216': ['dataStart', 'dataStart'],
|
'dataStart1216': ['dataStart', 'dataStart'],
|
||||||
'dataSize1216': ['dataSize', 'dataSize'],
|
'dataSize1216': ['dataSize', 'dataSize'],
|
||||||
@ -1485,7 +1569,6 @@
|
|||||||
'numClusters1216': ['numClusters', 'numClusters'],
|
'numClusters1216': ['numClusters', 'numClusters'],
|
||||||
'clusterStart1216': ['clusterStart', 'clusterStart']
|
'clusterStart1216': ['clusterStart', 'clusterStart']
|
||||||
};
|
};
|
||||||
|
|
||||||
Object.entries(mapping).forEach(([elementId, [resultKey, calcKey]]) => {
|
Object.entries(mapping).forEach(([elementId, [resultKey, calcKey]]) => {
|
||||||
const element = document.getElementById(elementId);
|
const element = document.getElementById(elementId);
|
||||||
element.innerHTML = formatHex(results[resultKey]);
|
element.innerHTML = formatHex(results[resultKey]);
|
||||||
@ -1503,7 +1586,7 @@
|
|||||||
'clusterStart32': ['clusterStart', 'clusterStart'],
|
'clusterStart32': ['clusterStart', 'clusterStart'],
|
||||||
'rootDirPos32': ['rootDirPos', 'rootDirPos']
|
'rootDirPos32': ['rootDirPos', 'rootDirPos']
|
||||||
};
|
};
|
||||||
|
|
||||||
Object.entries(mapping).forEach(([elementId, [resultKey, calcKey]]) => {
|
Object.entries(mapping).forEach(([elementId, [resultKey, calcKey]]) => {
|
||||||
const element = document.getElementById(elementId);
|
const element = document.getElementById(elementId);
|
||||||
element.innerHTML = formatHex(results[resultKey]);
|
element.innerHTML = formatHex(results[resultKey]);
|
||||||
@ -1518,19 +1601,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Add event listeners
|
// Add event listeners
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
// Initialize calculator displays
|
// Initialize calculator displays
|
||||||
updateCalculatorDisplay('fat1216');
|
updateCalculatorDisplay('fat1216');
|
||||||
updateCalculatorDisplay('fat32');
|
updateCalculatorDisplay('fat32');
|
||||||
|
|
||||||
// Real-time calculation
|
// Real-time calculation for required fields
|
||||||
Object.keys(filesystems).forEach(fsType => {
|
Object.keys(filesystems).forEach(fsType => {
|
||||||
const fs = filesystems[fsType];
|
const fs = filesystems[fsType];
|
||||||
fs.requiredFields.forEach(fieldId => {
|
fs.requiredFields.forEach(fieldId => {
|
||||||
const input = document.getElementById(fieldId);
|
const input = document.getElementById(fieldId);
|
||||||
if (input) {
|
if (input) {
|
||||||
input.addEventListener('input', function() {
|
input.addEventListener('input', function () {
|
||||||
const allFilled = fs.requiredFields.every(id =>
|
const allFilled = fs.requiredFields.every(id =>
|
||||||
document.getElementById(id).value.trim() !== ''
|
document.getElementById(id).value.trim() !== ''
|
||||||
);
|
);
|
||||||
if (allFilled) {
|
if (allFilled) {
|
||||||
@ -1541,14 +1624,45 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add separate listeners for cluster number fields (optional but affect results)
|
// Real-time calculation for constants fields
|
||||||
|
['baseOffset1216', 'sectorSize1216'].forEach(fieldId => {
|
||||||
|
const input = document.getElementById(fieldId);
|
||||||
|
if (input) {
|
||||||
|
input.addEventListener('input', function () {
|
||||||
|
const fs = filesystems.fat1216;
|
||||||
|
const allFilled = fs.requiredFields.every(id =>
|
||||||
|
document.getElementById(id).value.trim() !== ''
|
||||||
|
);
|
||||||
|
if (allFilled) {
|
||||||
|
calculate('fat1216');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
['baseOffset32', 'sectorSize32'].forEach(fieldId => {
|
||||||
|
const input = document.getElementById(fieldId);
|
||||||
|
if (input) {
|
||||||
|
input.addEventListener('input', function () {
|
||||||
|
const fs = filesystems.fat32;
|
||||||
|
const allFilled = fs.requiredFields.every(id =>
|
||||||
|
document.getElementById(id).value.trim() !== ''
|
||||||
|
);
|
||||||
|
if (allFilled) {
|
||||||
|
calculate('fat32');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add separate listeners for cluster number fields
|
||||||
['clusterNumber1216', 'clusterNumber32'].forEach(fieldId => {
|
['clusterNumber1216', 'clusterNumber32'].forEach(fieldId => {
|
||||||
const input = document.getElementById(fieldId);
|
const input = document.getElementById(fieldId);
|
||||||
if (input) {
|
if (input) {
|
||||||
input.addEventListener('input', function() {
|
input.addEventListener('input', function () {
|
||||||
const fsType = fieldId.includes('32') ? 'fat32' : 'fat1216';
|
const fsType = fieldId.includes('32') ? 'fat32' : 'fat1216';
|
||||||
const fs = filesystems[fsType];
|
const fs = filesystems[fsType];
|
||||||
const allFilled = fs.requiredFields.every(id =>
|
const allFilled = fs.requiredFields.every(id =>
|
||||||
document.getElementById(id).value.trim() !== ''
|
document.getElementById(id).value.trim() !== ''
|
||||||
);
|
);
|
||||||
if (allFilled) {
|
if (allFilled) {
|
||||||
@ -1558,8 +1672,61 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Keyboard input support for calculator
|
||||||
|
document.addEventListener('keydown', function (e) {
|
||||||
|
// Only handle keyboard input when not in an input field
|
||||||
|
if (e.target.tagName === 'INPUT') return;
|
||||||
|
|
||||||
|
const currentTab = getCurrentTab();
|
||||||
|
const key = e.key.toUpperCase();
|
||||||
|
|
||||||
|
// Handle hex digits
|
||||||
|
if (/^[0-9A-F]$/.test(key)) {
|
||||||
|
e.preventDefault();
|
||||||
|
calcInput(key, currentTab);
|
||||||
|
}
|
||||||
|
// Handle operations
|
||||||
|
else if (key === '+') {
|
||||||
|
e.preventDefault();
|
||||||
|
calcOperation('+', currentTab);
|
||||||
|
}
|
||||||
|
else if (key === '-') {
|
||||||
|
e.preventDefault();
|
||||||
|
calcOperation('-', currentTab);
|
||||||
|
}
|
||||||
|
else if (key === '*') {
|
||||||
|
e.preventDefault();
|
||||||
|
calcOperation('*', currentTab);
|
||||||
|
}
|
||||||
|
else if (key === '/') {
|
||||||
|
e.preventDefault();
|
||||||
|
calcOperation('/', currentTab);
|
||||||
|
}
|
||||||
|
else if (key === 'ENTER' || key === '=') {
|
||||||
|
e.preventDefault();
|
||||||
|
calcEquals(currentTab);
|
||||||
|
}
|
||||||
|
else if (key === 'ESCAPE' || key === 'C') {
|
||||||
|
e.preventDefault();
|
||||||
|
calcClear(currentTab);
|
||||||
|
}
|
||||||
|
else if (key === 'BACKSPACE') {
|
||||||
|
e.preventDefault();
|
||||||
|
calcBackspace(currentTab);
|
||||||
|
}
|
||||||
|
// Handle shift operations
|
||||||
|
else if (e.shiftKey && key === ',') { // < key
|
||||||
|
e.preventDefault();
|
||||||
|
calcOperation('<<', currentTab);
|
||||||
|
}
|
||||||
|
else if (e.shiftKey && key === '.') { // > key
|
||||||
|
e.preventDefault();
|
||||||
|
calcOperation('>>', currentTab);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Tooltip event listeners
|
// Tooltip event listeners
|
||||||
document.addEventListener('mouseover', function(e) {
|
document.addEventListener('mouseover', function (e) {
|
||||||
if (e.target.classList.contains('result-label')) {
|
if (e.target.classList.contains('result-label')) {
|
||||||
const formula = e.target.getAttribute('data-formula');
|
const formula = e.target.getAttribute('data-formula');
|
||||||
if (formula) {
|
if (formula) {
|
||||||
@ -1573,7 +1740,7 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener('mouseout', function(e) {
|
document.addEventListener('mouseout', function (e) {
|
||||||
if (e.target.classList.contains('result-label') || e.target.classList.contains('result-value')) {
|
if (e.target.classList.contains('result-label') || e.target.classList.contains('result-value')) {
|
||||||
hideTooltip();
|
hideTooltip();
|
||||||
}
|
}
|
||||||
@ -1584,4 +1751,5 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user