|
|
@@ -1,5 +1,6 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
+
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
@@ -53,7 +54,7 @@
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
.container {
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
+ grid-template-columns: repeat(1, 1fr);
|
|
|
gap: 3rem;
|
|
|
}
|
|
|
}
|
|
|
@@ -65,7 +66,7 @@
|
|
|
font-size: 2.8rem;
|
|
|
margin-bottom: 1.5rem;
|
|
|
font-weight: 700;
|
|
|
- text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
|
|
|
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
|
|
|
position: relative;
|
|
|
padding-bottom: 0.8rem;
|
|
|
}
|
|
|
@@ -96,7 +97,7 @@
|
|
|
padding: 2rem;
|
|
|
border-radius: var(--border-radius);
|
|
|
background: var(--bg-light);
|
|
|
- box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|
|
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
transition: var(--transition);
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
@@ -104,7 +105,7 @@
|
|
|
|
|
|
.section:hover {
|
|
|
transform: translateY(-5px);
|
|
|
- box-shadow: 0 8px 25px rgba(0,0,0,0.12);
|
|
|
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
|
|
}
|
|
|
|
|
|
.section:not(:last-child) {
|
|
|
@@ -140,7 +141,7 @@
|
|
|
color: var(--text-color);
|
|
|
font-size: 1rem;
|
|
|
transition: var(--transition);
|
|
|
- box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
|
|
|
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
|
|
|
input[type="number"]:focus {
|
|
|
@@ -157,7 +158,7 @@
|
|
|
background: linear-gradient(135deg, #f1f9ff 0%, #dcedff 100%);
|
|
|
padding: 2.2rem;
|
|
|
border-radius: var(--border-radius);
|
|
|
- box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|
|
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
border-left: 4px solid var(--accent-color);
|
|
|
@@ -201,7 +202,7 @@
|
|
|
}
|
|
|
|
|
|
.visualization-container {
|
|
|
- margin-top: 1.5rem;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
|
|
|
.square-coil {
|
|
|
@@ -210,15 +211,15 @@
|
|
|
margin: 2rem auto 1.5rem;
|
|
|
border-radius: var(--border-radius);
|
|
|
overflow: hidden;
|
|
|
- box-shadow: 0 8px 25px rgba(0,0,0,0.15);
|
|
|
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
|
background: linear-gradient(45deg, #f8f9fa, #ffffff);
|
|
|
- border: 1px solid rgba(0,0,0,0.05);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
transition: var(--transition);
|
|
|
}
|
|
|
|
|
|
.square-coil:hover {
|
|
|
transform: scale(1.02);
|
|
|
- box-shadow: 0 12px 30px rgba(0,0,0,0.18);
|
|
|
+ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
|
|
|
}
|
|
|
|
|
|
#squareCoil {
|
|
|
@@ -291,12 +292,15 @@
|
|
|
margin: 1.5rem auto 1rem;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
</style>
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<h1>NFC Coil Design Tool</h1>
|
|
|
- <form id="coilForm">
|
|
|
+ <form id="coilForm"
|
|
|
+ style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start;">
|
|
|
<div class="section">
|
|
|
<h3>Geometry</h3>
|
|
|
<label for="turns">Turns:</label>
|
|
|
@@ -324,26 +328,29 @@
|
|
|
</div>
|
|
|
</form>
|
|
|
|
|
|
- <div class="results">
|
|
|
- <h3>Antenna Results</h3>
|
|
|
- <div class="result-item">
|
|
|
- <p>Segmentation Mode:</p>
|
|
|
- <span class="result-value">Vertical</span>
|
|
|
+ <div class="results"
|
|
|
+ style="display: flex; justify-content: space-around; align-items: center;">
|
|
|
+ <div>
|
|
|
+ <h3>Antenna Results</h3>
|
|
|
+ <div class="result-item">
|
|
|
+ <p>Segmentation Mode:</p>
|
|
|
+ <span class="result-value">Vertical</span>
|
|
|
+ </div>
|
|
|
+ <div class="result-item">
|
|
|
+ <p>Segments:</p>
|
|
|
+ <span class="result-value" id="segments">0</span>
|
|
|
+ </div>
|
|
|
+ <div class="result-item">
|
|
|
+ <p>Equivalent Inductance:</p>
|
|
|
+ <span class="result-value" id="inductance">0 μH</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="result-item">
|
|
|
- <p>Segments:</p>
|
|
|
- <span class="result-value" id="segments">0</span>
|
|
|
- </div>
|
|
|
- <div class="result-item">
|
|
|
- <p>Equivalent Inductance:</p>
|
|
|
- <span class="result-value" id="inductance">0 μH</span>
|
|
|
+ <div class="visualization-container">
|
|
|
+ <h3>Coil Visualization</h3>
|
|
|
+ <div class="square-coil" id="squareCoil"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="visualization-container">
|
|
|
- <h3>Coil Visualization</h3>
|
|
|
- <div class="square-coil" id="squareCoil"></div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
@@ -360,7 +367,7 @@
|
|
|
}
|
|
|
|
|
|
const inductance = (Math.pow(turns, 2) * Math.PI * Math.pow((antennaLength + antennaWidth) / 2, 2)) /
|
|
|
- (9 * (antennaLength + antennaWidth) + 10 * conductorWidth);
|
|
|
+ (9 * (antennaLength + antennaWidth) + 10 * conductorWidth);
|
|
|
|
|
|
document.getElementById('inductance').textContent = `${inductance.toFixed(1)} μH`;
|
|
|
document.getElementById('segments').textContent = turns * 4;
|
|
|
@@ -440,4 +447,5 @@
|
|
|
calculate();
|
|
|
</script>
|
|
|
</body>
|
|
|
-</html>
|
|
|
+
|
|
|
+</html>
|
JY