JingYun
/
Site_Tools


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NFC Coil Design Tool</title>
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-light: #4895ef;
            --primary-dark: #3f37c9;
            --secondary-color: #f72585;
            --accent-color: #4cc9f0;
            --text-color: #2b2d42;
            --text-light: #555b6e;
            --bg-color: #f8f9fa;
            --bg-light: #ffffff;
            --border-radius: 12px;
            --box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            --transition: all 0.3s ease;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
            color: var(--text-color);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            width: 95%;
            padding: 2.5rem;
            background: var(--bg-light);
            box-shadow: var(--box-shadow);
            border-radius: var(--border-radius);
            display: grid;
            grid-template-columns: 1fr;
            gap: 2.5rem;
            margin: 2rem 0;
        }

        @media (min-width: 768px) {
            .container {
                grid-template-columns: repeat(1, 1fr);
                gap: 3rem;
            }
        }

        h1 {
            grid-column: 1 / -1;
            text-align: center;
            color: var(--primary-color);
            font-size: 2.8rem;
            margin-bottom: 1.5rem;
            font-weight: 700;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
            position: relative;
            padding-bottom: 0.8rem;
        }

        h1:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            border-radius: 2px;
        }

        h3 {
            color: var(--primary-dark);
            font-size: 1.4rem;
            margin-bottom: 1.2rem;
            font-weight: 600;
            position: relative;
            display: inline-block;
        }

        .section {
            border: none;
            padding: 2rem;
            border-radius: var(--border-radius);
            background: var(--bg-light);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .section:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .section:not(:last-child) {
            margin-bottom: 2rem;
        }

        .section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
        }

        label {
            display: block;
            margin-bottom: 0.8rem;
            color: var(--text-light);
            font-weight: 500;
            font-size: 1rem;
            transition: var(--transition);
        }

        input[type="number"] {
            width: 100%;
            padding: 0.9rem 1.2rem;
            margin-bottom: 1.5rem;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            background: var(--bg-light);
            color: var(--text-color);
            font-size: 1rem;
            transition: var(--transition);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        input[type="number"]:focus {
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
            outline: none;
        }

        input[type="number"]:hover {
            border-color: #ced4da;
        }

        .results {
            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);
            position: relative;
            overflow: hidden;
            border-left: 4px solid var(--accent-color);
        }

        .results h3 {
            color: var(--primary-dark);
            margin-bottom: 1.5rem;
        }

        .results p {
            margin-bottom: 0.5rem;
            font-size: 1.05rem;
            color: var(--text-light);
        }

        .result-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding: 0.8rem 1rem;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 8px;
            transition: var(--transition);
        }

        .result-item:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateX(5px);
        }

        .result-value {
            font-weight: 600;
            color: var(--primary-color);
            font-size: 1.1rem;
            background: rgba(76, 201, 240, 0.1);
            padding: 0.3rem 0.8rem;
            border-radius: 6px;
            border-left: 3px solid var(--accent-color);
        }

        .visualization-container {
            margin: 0;
        }

        .square-coil {
            width: 100%;
            max-width: 800px;
            margin: 2rem auto 1.5rem;
            border-radius: var(--border-radius);
            overflow: hidden;
            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);
            transition: var(--transition);
        }

        .square-coil:hover {
            transform: scale(1.02);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
        }

        #squareCoil {
            padding-top: 100%;
            position: relative;
        }

        .coil-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* 移动端优化 */
        @media (max-width: 767px) {
            .container {
                width: 92%;
                padding: 1.8rem;
                grid-template-columns: 1fr;
                gap: 1.8rem;
                margin: 1rem 0;
            }

            h1 {
                font-size: 2.2rem;
                margin-bottom: 1.2rem;
            }

            .section {
                padding: 1.5rem;
            }

            label {
                margin-bottom: 0.6rem;
                font-size: 0.95rem;
            }

            input[type="number"] {
                padding: 0.8rem 1rem;
                font-size: 0.95rem;
                margin-bottom: 1.2rem;
            }

            .results {
                padding: 1.5rem;
            }

            .results p {
                font-size: 0.95rem;
            }

            .result-item {
                padding: 0.6rem 0.8rem;
                margin-bottom: 0.8rem;
            }

            .result-value {
                font-size: 1rem;
                padding: 0.2rem 0.6rem;
            }

            .visualization-container h3 {
                font-size: 1.3rem;
                margin-bottom: 1rem;
            }

            .square-coil {
                margin: 1.5rem auto 1rem;
            }
        }

    </style>
</head>

<body>
    <div class="container">
        <h1>NFC Coil Design Tool</h1>
        <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>
                <input type="number" id="turns" min="1" value="3">
                <label for="antennaLength">Antenna Length (mm):</label>
                <input type="number" id="antennaLength" step="0.1" value="75">
                <label for="antennaWidth">Antenna Width (mm):</label>
                <input type="number" id="antennaWidth" step="0.1" value="45">
            </div>
            <div class="section">
                <h3>Conductor</h3>
                <label for="conductorWidth">Width (mm):</label>
                <input type="number" id="conductorWidth" step="0.1" value="0.6">
                <label for="spacing">Spacing (mm):</label>
                <input type="number" id="spacing" step="0.1" value="0.6">
                <label for="thickness">Thickness (mm):</label>
                <input type="number" id="thickness" step="0.1" value="0.1">
            </div>
            <div class="section">
                <h3>Substrate</h3>
                <label for="substrateThickness">Thickness (mm):</label>
                <input type="number" id="substrateThickness" step="0.1" value="1">
                <label for="relativePermittivity">Relative Electrical Permittivity (εr):</label>
                <input type="number" id="relativePermittivity" step="0.1" value="4.6">
            </div>
        </form>

        <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="visualization-container">
                <h3>Coil Visualization</h3>
                <div class="square-coil" id="squareCoil"></div>
            </div>
        </div>

    </div>

    <script>
        function calculate() {
            const turns = parseInt(document.getElementById('turns').value) || 1;
            const antennaLength = parseFloat(document.getElementById('antennaLength').value) || 75;
            const antennaWidth = parseFloat(document.getElementById('antennaWidth').value) || 45;
            const conductorWidth = parseFloat(document.getElementById('conductorWidth').value) || 0.6;
            const spacing = parseFloat(document.getElementById('spacing').value) || 0.6;

            if (isNaN(turns) || isNaN(antennaLength) || isNaN(antennaWidth) || isNaN(conductorWidth) || isNaN(spacing)) {
                alert("Please enter valid values for all parameters.");
                return;
            }

            const inductance = (Math.pow(turns, 2) * Math.PI * Math.pow((antennaLength + antennaWidth) / 2, 2)) /
                (9 * (antennaLength + antennaWidth) + 10 * conductorWidth);

            document.getElementById('inductance').textContent = `${inductance.toFixed(1)} μH`;
            document.getElementById('segments').textContent = turns * 4;

            drawSquareCoil(turns, antennaLength, antennaWidth, conductorWidth, spacing);
        }

        function drawSquareCoil(turns, length, width, conductorWidth, spacing) {
            const coilDiv = document.getElementById('squareCoil');
            const canvas = document.createElement('canvas');
            canvas.className = 'coil-canvas';
            coilDiv.innerHTML = '';
            coilDiv.appendChild(canvas);

            const parentWidth = coilDiv.offsetWidth;
            const parentHeight = coilDiv.offsetHeight;
            canvas.width = parentWidth;
            canvas.height = parentHeight;
            const ctx = canvas.getContext('2d');

            const coilSize = Math.min(parentWidth, parentHeight) * 0.666;
            const centerX = parentWidth / 2;
            const centerY = parentHeight / 2;
            const halfSize = coilSize / 2;

            ctx.clearRect(0, 0, parentWidth, parentHeight);

            const gradient = ctx.createLinearGradient(0, 0, coilDiv.offsetWidth, coilDiv.offsetHeight);
            gradient.addColorStop(0, 'rgba(67, 97, 238, 0.9)');
            gradient.addColorStop(0.5, 'rgba(76, 201, 240, 0.8)');
            gradient.addColorStop(1, 'rgba(67, 97, 238, 0.7)');

            // 添加阴影效果
            ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
            ctx.shadowBlur = 8;
            ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 2;

            ctx.lineWidth = conductorWidth * (coilSize / (length + width)) * 1.2;
            ctx.strokeStyle = gradient;

            let x = centerX - halfSize;
            let y = centerY - halfSize;
            let dx = coilSize;
            let dy = coilSize;

            for (let i = 0; i < turns; i++) {
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(x + dx, y);
                ctx.lineTo(x + dx, y + dy);
                ctx.lineTo(x, y + dy);
                ctx.lineTo(x, y);
                ctx.stroke();

                const offset = (conductorWidth + spacing) * (coilSize / (length + width));
                x += offset;
                y += offset;
                dx -= 2 * offset;
                dy -= 2 * offset;

                if (dx <= 0 || dy <= 0) break;
            }
        }

        // 自动计算
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', calculate);
        });

        // 自适应窗口大小
        window.addEventListener('resize', () => {
            calculate();
        });

        // 初始化显示
        calculate();
    </script>
</body>

</html>