xTool Store
xTool Squad
Service Center
Product Support
Learning Resources
Q&A Community
xTool Store
Tags
MaintenanceMachineTech Support
Download SN Repair (for M1 Ultra)
Updated Sep 4,2025
Updated Sep 4,2025
      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laser Head SN Repair Tool</title>
    <style>
/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

/* Header Styles */
header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 2rem 0;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

header h1 {
    font-size: 2.5rem;
    color: #2d3748;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

header p {
    font-size: 1.1rem;
    color: #718096;
    font-weight: 300;
}

/* Main Content Styles */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Guide Section Styles */
.guide-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.guide-section h2 {
    color: #2d3748;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.8rem;
}

.guide-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-radius: 15px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.step-number {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.step-content h3 {
    color: #2d3748;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.step-content p {
    color: #718096;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Power Selection Section Styles */
.power-selection-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.power-selection-section h2 {
    color: #2d3748;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.8rem;
}

.power-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.power-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.power-option input[type="radio"] {
    display: none;
}

.power-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    justify-content: center;
}

.power-option input[type="radio"]:checked + .power-label {
    border-color: #667eea;
    background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.power-icon {
    font-size: 1.5rem;
}

.power-text {
    font-weight: 600;
    color: #2d3748;
}

/* Get SN Section Styles */
.get-sn-section {
    text-align: center;
}

.get-sn-button {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
}

.get-sn-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
}

.get-sn-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* SN Display Styles */
.sn-display {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
    border-radius: 12px;
    border: 2px solid #9ae6b4;
}

.sn-display label {
    display: block;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.sn-value {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #c6f6d5;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    text-align: center;
    word-break: break-all;
}

.use-sn-button {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(66, 153, 225, 0.3);
}

.use-sn-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(66, 153, 225, 0.4);
}

/* Input Section Styles */
.input-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.input-section h2 {
    color: #2d3748;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.8rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.input-group label {
    font-weight: 600;
    color: #2d3748;
    font-size: 1.1rem;
}

.input-group input {
    width: 100%;
    max-width: 400px;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
}

.input-group input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: scale(1.02);
}

.input-group input::placeholder {
    color: #a0aec0;
}

/* Repair Button Styles */
.repair-button {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(245, 101, 101, 0.3);
    min-width: 150px;
    justify-content: center;
}

.repair-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 101, 101, 0.4);
}

.repair-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Custom IP Section Styles */
.custom-ip-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.custom-ip-section h2 {
    color: #2d3748;
    margin-bottom: 0.5rem;
    text-align: center;
    font-size: 1.8rem;
}

.custom-ip-description {
    color: #718096;
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-style: italic;
}

.custom-ip-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
    max-width: 400px;
    margin: 0 auto;
}

.ip-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ip-input-group label {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.95rem;
}

.ip-input-group input {
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: white;
}

.ip-input-group input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.custom-ip-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.apply-button,
.reset-button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 120px;
}

.apply-button {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    box-shadow: 0 2px 10px rgba(72, 187, 120, 0.3);
}

.apply-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(72, 187, 120, 0.4);
}

.reset-button {
    background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
    color: white;
    box-shadow: 0 2px 10px rgba(160, 174, 192, 0.3);
}

.reset-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(160, 174, 192, 0.4);
}

.custom-ip-status {
    grid-column: 1 / -1;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    min-height: 20px;
    transition: all 0.3s ease;
}

.custom-ip-status.success {
    background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
    color: #22543d;
    border: 1px solid #9ae6b4;
}

.custom-ip-status.error {
    background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
    color: #742a2a;
    border: 1px solid #fc8181;
}

.custom-ip-status.info {
    background: linear-gradient(135deg, #bee3f8 0%, #90cdf4 100%);
    color: #2a4365;
    border: 1px solid #63b3ed;
}

/* Result Section Styles */
.result-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.result-section h2 {
    color: #2d3748;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.8rem;
}

.result-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.result-status {
    padding: 1rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    font-size: 1.1rem;
}

.result-status.success {
    background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
    color: #22543d;
    border: 1px solid #9ae6b4;
}

.result-status.error {
    background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
    color: #742a2a;
    border: 1px solid #fc8181;
}

.result-details {
    background: #f7fafc;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    line-height: 1.6;
}

.result-raw {
    background: #2d3748;
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
    overflow-y: auto;
}

/* System Info Section Styles */
.system-info-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.system-info-section h2 {
    color: #2d3748;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.8rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.info-label {
    font-weight: 600;
    color: #4a5568;
    font-size: 0.95rem;
}

.info-value {
    color: #2d3748;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: 'Courier New', monospace;
}

/* Footer Styles */
footer {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 2rem 0;
    text-align: center;
    margin-top: 3rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

footer p {
    color: #718096;
    margin-bottom: 1rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #5a67d8;
}

/* Responsive Design */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }
    
    main {
        padding: 0 1rem;
    }
    
    .guide-steps {
        grid-template-columns: 1fr;
    }
    
    .power-options {
        grid-template-columns: 1fr;
    }
    
    .custom-ip-form {
        grid-template-columns: 1fr;
    }
    
    .custom-ip-buttons {
        flex-direction: column;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    header {
        padding: 1.5rem 0;
    }
    
    header h1 {
        font-size: 1.8rem;
    }
    
    .guide-section,
    .power-selection-section,
    .input-section,
    .custom-ip-section,
    .result-section,
    .system-info-section {
        padding: 1.5rem;
    }
    
    .step {
        flex-direction: column;
        text-align: center;
    }
    
    .step-number {
        align-self: center;
    }
}
    </style>
</head>
<body>
    <header>
        <h1>🔧 Laser Head SN Repair Tool</h1>
        <p>Professional laser head serial number repair and configuration tool</p>
    </header>

    <main>
        <!-- Guide Steps Section -->
        <section class="guide-section">
            <h2>📋 Operation Guide</h2>
            <div class="guide-steps">
                <div class="step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3>Connect Device</h3>
                        <p>Connect your laser equipment to the system and ensure proper communication.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Select Laser Power</h3>
                        <p>Choose the appropriate laser power (5W/10W/20W) for your laser head.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Get Laser Head SN</h3>
                        <p>Retrieve the laser head serial number from the configuration system.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h3>Enter SN & Repair</h3>
                        <p>Enter the SN in the input box below and click the repair button to send the repair command.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Laser Power Selection Section -->
        <section class="power-selection-section">
            <h2>⚡ Laser Head Power Selection</h2>
            <div class="power-options">
                <div class="power-option">
                    <input type="radio" id="power-5w" name="power" value="5" checked>
                    <label for="power-5w" class="power-label">
                        <span class="power-icon">🔴</span>
                        <span class="power-text">5W Laser Head</span>
                    </label>
                </div>
                <div class="power-option">
                    <input type="radio" id="power-10w" name="power" value="10">
                    <label for="power-10w" class="power-label">
                        <span class="power-icon">🟠</span>
                        <span class="power-text">10W Laser Head</span>
                    </label>
                </div>
                <div class="power-option">
                    <input type="radio" id="power-20w" name="power" value="20">
                    <label for="power-20w" class="power-label">
                        <span class="power-icon">🟡</span>
                        <span class="power-text">20W Laser Head</span>
                    </label>
                </div>
            </div>
            <div class="get-sn-section">
                <button id="get-sn-btn" class="get-sn-button">
                    <span class="btn-text">🔍 Get Laser Head SN</span>
                    <span class="btn-loading" style="display: none;">
                        <div class="spinner"></div>
                        Getting...
                    </span>
                </button>
                <div class="sn-display" id="sn-display" style="display: none;">
                    <label>Retrieved SN:</label>
                    <div class="sn-value" id="sn-value"></div>
                    <button id="use-sn-btn" class="use-sn-button">✅ Use This SN</button>
                </div>
            </div>
        </section>

        <!-- SN Input Section -->
        <section class="input-section">
            <h2>🔢 Serial Number Input</h2>
            <div class="input-group">
                <label for="sn-input">Laser Head Serial Number (SN):</label>
                <input type="text" id="sn-input" placeholder="Enter the laser head SN here..." maxlength="50">
                <button id="repair-btn" class="repair-button">
                    <span class="btn-text">🔧 Repair</span>
                    <span class="btn-loading" style="display: none;">
                        <div class="spinner"></div>
                        Repairing...
                    </span>
                </button>
            </div>
        </section>

        <!-- Custom IP Configuration Section -->
        <section class="custom-ip-section">
            <h2>⚙️ Custom Server Settings</h2>
            <p class="custom-ip-description">If connecting via WiFi, please enter the IP address.</p>
            <div class="custom-ip-form">
                <div class="ip-input-group">
                    <label for="custom-ip">Server IP Address:</label>
                    <input type="text" id="custom-ip" placeholder="e.g., 192.168.1.100" maxlength="15">
                </div>
                <div class="custom-ip-buttons">
                    <button id="apply-custom-ip" class="apply-button">Apply Settings</button>
                    <button id="reset-custom-ip" class="reset-button">Reset to Default</button>
                </div>
                <div class="custom-ip-status" id="custom-ip-status"></div>
            </div>
        </section>

        <!-- Result Display Section -->
        <section class="result-section" id="result-section" style="display: none;">
            <h2>📊 Operation Result</h2>
            <div class="result-content">
                <div class="result-status" id="result-status"></div>
                <div class="result-details" id="result-details"></div>
                <div class="result-raw" id="result-raw"></div>
            </div>
        </section>

        <!-- System Information Section -->
        <section class="system-info-section">
            <h2>💻 System Information</h2>
            <div class="info-grid">
                <div class="info-item">
                    <span class="info-label">Operating System:</span>
                    <span class="info-value" id="os-info">Detecting...</span>
                </div>
                <div class="info-item">
                    <span class="info-label">API Server:</span>
                    <span class="info-value" id="api-info">Detecting...</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Current Time:</span>
                    <span class="info-value" id="current-time">Loading...</span>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Laser Head SN Repair Tool. Professional laser equipment maintenance solution.</p>
        <div class="footer-links">
            <a href="#" class="footer-link">Documentation</a>
            <a href="#" class="footer-link">Support</a>
            <a href="#" class="footer-link">Contact</a>
        </div>
    </footer>

    <script>
// Global variables
let currentOS = '';
let apiBaseUrl = '';

// DOM elements
const snInput = document.getElementById('sn-input');
const repairBtn = document.getElementById('repair-btn');
const resultSection = document.getElementById('result-section');
const resultStatus = document.getElementById('result-status');
const resultDetails = document.getElementById('result-details');
const resultRaw = document.getElementById('result-raw');
const osInfo = document.getElementById('os-info');
const apiInfo = document.getElementById('api-info');

// Custom IP related DOM elements
const customIpInput = document.getElementById('custom-ip');
const applyCustomIpBtn = document.getElementById('apply-custom-ip');
const resetCustomIpBtn = document.getElementById('reset-custom-ip');
const customIpStatus = document.getElementById('custom-ip-status');

// Power selection and get SN related DOM elements
const powerInputs = document.querySelectorAll('input[name="power"]');
const getSnBtn = document.getElementById('get-sn-btn');
const snDisplay = document.getElementById('sn-display');
const snValue = document.getElementById('sn-value');
const useSnBtn = document.getElementById('use-sn-btn');

// Initialize after page load
document.addEventListener('DOMContentLoaded', function() {
    detectOperatingSystem();
    setupEventListeners();
});

// Detect operating system
function detectOperatingSystem() {
    const userAgent = navigator.userAgent;
    
    // Check for saved custom IP settings
    const savedCustomIp = localStorage.getItem('customIp');
    
    if (userAgent.indexOf('Win') !== -1) {
        currentOS = 'Windows';
        apiBaseUrl = savedCustomIp ? `http://${savedCustomIp}:8080` : 'http://201.234.3.1:8080';
    } else if (userAgent.indexOf('Mac') !== -1) {
        currentOS = 'macOS';
        apiBaseUrl = savedCustomIp ? `http://${savedCustomIp}:8080` : 'http://201.234.4.1:8080';
    } else if (userAgent.indexOf('Linux') !== -1) {
        currentOS = 'Linux';
        apiBaseUrl = savedCustomIp ? `http://${savedCustomIp}:8080` : 'http://201.234.3.1:8080';
    } else {
        currentOS = 'Unknown';
        apiBaseUrl = savedCustomIp ? `http://${savedCustomIp}:8080` : 'http://201.234.3.1:8080';
    }
    
    // Update display
    osInfo.textContent = currentOS;
    apiInfo.textContent = apiBaseUrl;
    
    // If there are saved custom IP settings, fill them in the input fields
    if (savedCustomIp) {
        customIpInput.value = savedCustomIp;
        showCustomIpStatus('Loaded saved custom settings', 'info');
    }
}

// Setup event listeners
function setupEventListeners() {
    // Repair button click event
    repairBtn.addEventListener('click', handleRepair);
    
    // Input field enter key event
    snInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            handleRepair();
        }
    });
    
    // Input field input event (real-time validation)
    snInput.addEventListener('input', validateSNInput);
    
    // Custom IP related events
    applyCustomIpBtn.addEventListener('click', applyCustomIp);
    resetCustomIpBtn.addEventListener('click', resetCustomIp);
    
    // Custom IP input field enter key events
    customIpInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            applyCustomIp();
        }
    });
    
    // Real-time IP address format validation
    customIpInput.addEventListener('input', validateIpInput);
    
    // Power selection related events
    getSnBtn.addEventListener('click', handleGetSn);
    useSnBtn.addEventListener('click', handleUseSn);
    
    // Power selection change events
    powerInputs.forEach(input => {
        input.addEventListener('change', handlePowerChange);
    });
}

// Validate SN input
function validateSNInput() {
    const sn = snInput.value.trim();
    const isValid = sn.length > 0 && sn.length <= 50;
    
    if (isValid) {
        snInput.style.borderColor = '#48bb78';
        repairBtn.disabled = false;
    } else {
        snInput.style.borderColor = '#e2e8f0';
        repairBtn.disabled = true;
    }
}

// Handle repair request
async function handleRepair() {
    const sn = snInput.value.trim();
    
    if (!sn) {
        showError('Please enter SN number');
        return;
    }
    
    // Show loading state
    setLoadingState(true);
    
    try {
        // Build API URL
        const apiUrl = `${apiBaseUrl}/cmd?cmd=M81S2N1C${sn}&dest=35&wait=false`;
        
        console.log('Sending request to:', apiUrl);
        
        // Send HTTP request
        const response = await fetch(apiUrl, {
            method: 'GET',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
            },
            mode: 'cors' // Try CORS
        });
        
        if (response.ok) {
            const result = await response.text();
            showSuccess('Repair request sent successfully', result, apiUrl);
        } else {
            throw new Error(`HTTP Error: ${response.status} ${response.statusText}`);
        }
        
    } catch (error) {
        console.error('Request failed:', error);
        
        // If CORS fails, try using JSONP method or other methods
        if (error.name === 'TypeError' && error.message.includes('CORS')) {
            // Try using script tag method (JSONP)
            tryJSONPRequest(sn);
        } else {
            showError('Network request failed', error.message, apiUrl);
        }
    } finally {
        setLoadingState(false);
    }
}

// Try JSONP method to send request
function tryJSONPRequest(sn) {
    const apiUrl = `${apiBaseUrl}/cmd?cmd=M81S2N1C${sn}&dest=35&wait=false`;
    
    // Create a temporary script tag to send request
    const script = document.createElement('script');
    script.src = apiUrl;
    
    // Set timeout
    const timeout = setTimeout(() => {
        document.head.removeChild(script);
        showError('Request timeout', 'Please check network connection or server status', apiUrl);
    }, 10000);
    
    // Request completion or failure handling
    script.onload = function() {
        clearTimeout(timeout);
        document.head.removeChild(script);
        showSuccess('Repair request sent successfully (JSONP method)', 'Request sent, please check server logs', apiUrl);
    };
    
    script.onerror = function() {
        clearTimeout(timeout);
        document.head.removeChild(script);
        showError('JSONP request failed', 'Cannot connect to server, please check network connection', apiUrl);
    };
    
    document.head.appendChild(script);
}

// Set loading state
function setLoadingState(isLoading) {
    const btnText = repairBtn.querySelector('.btn-text');
    const btnLoading = repairBtn.querySelector('.btn-loading');
    
    if (isLoading) {
        btnText.style.display = 'none';
        btnLoading.style.display = 'flex';
        repairBtn.disabled = true;
        snInput.disabled = true;
    } else {
        btnText.style.display = 'inline';
        btnLoading.style.display = 'none';
        repairBtn.disabled = false;
        snInput.disabled = false;
    }
}

// Show success result
function showSuccess(message, details, apiUrl) {
    resultSection.style.display = 'block';
    resultStatus.className = 'result-status success';
    resultStatus.textContent = `✅ ${message}`;
    
    resultDetails.innerHTML = `
        <strong>Request Details:</strong><br>
        <strong>API Address:</strong> ${apiUrl}<br>
        <strong>SN Number:</strong> ${snInput.value.trim()}<br>
        <strong>Operating System:</strong> ${currentOS}<br>
        <strong>Response Content:</strong>
    `;
    
    resultRaw.textContent = details || 'No detailed response content';
    
    // Scroll to result area
    resultSection.scrollIntoView({ behavior: 'smooth' });
}

// Show error result
function showError(message, details = '', apiUrl = '') {
    resultSection.style.display = 'block';
    resultStatus.className = 'result-status error';
    resultStatus.textContent = `❌ ${message}`;
    
    if (apiUrl) {
        resultDetails.innerHTML = `
            <strong>Request Details:</strong><br>
            <strong>API Address:</strong> ${apiUrl}<br>
            <strong>SN Number:</strong> ${snInput.value.trim()}<br>
            <strong>Operating System:</strong> ${currentOS}<br>
            <strong>Error Information:</strong>
        `;
    } else {
        resultDetails.innerHTML = `
            <strong>Error Details:</strong><br>
            ${details}
        `;
    }
    
    resultRaw.textContent = details || 'No detailed error information';
    
    // Scroll to result area
    resultSection.scrollIntoView({ behavior: 'smooth' });
}

// Custom IP related functionality functions

// Validate IP address input
function validateIpInput() {
    const ip = customIpInput.value.trim();
    const isValid = /^(?🙁?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ip);
    
    if (isValid || ip === '') {
        customIpInput.style.borderColor = '#e2e8f0';
        applyCustomIpBtn.disabled = false;
    } else {
        customIpInput.style.borderColor = '#f56565';
        applyCustomIpBtn.disabled = true;
    }
}

// Apply custom IP settings
function applyCustomIp() {
    const ip = customIpInput.value.trim();
    
    if (!ip) {
        showCustomIpStatus('Please enter IP address', 'error');
        return;
    }
    
    if (!/^(?🙁?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ip)) {
        showCustomIpStatus('IP address format is incorrect', 'error');
        return;
    }
    
    // Save to local storage
    localStorage.setItem('customIp', ip);
    
    // Update API address
    apiBaseUrl = `http://${ip}:8080`;
    apiInfo.textContent = apiBaseUrl;
    
    showCustomIpStatus(`Custom settings applied: ${apiBaseUrl}`, 'success');
    
    // Clear input fields
    customIpInput.value = '';
    
    // Update button states
    validateIpInput();
}

// Reset custom IP settings
function resetCustomIp() {
    // Clear local storage
    localStorage.removeItem('customIp');
    
    // Re-detect operating system and set default API address
    detectOperatingSystem();
    
    // Clear input fields
    customIpInput.value = '';
    
    showCustomIpStatus('Reset to default settings', 'info');
    
    // Update button states
    validateIpInput();
}

// Show custom IP status information
function showCustomIpStatus(message, type = 'info') {
    customIpStatus.textContent = message;
    customIpStatus.className = `custom-ip-status ${type}`;
    
    // Auto-hide after 3 seconds
    setTimeout(() => {
        customIpStatus.textContent = '';
        customIpStatus.className = 'custom-ip-status';
    }, 3000);
}

// Power selection and get SN related functionality functions

// Handle power selection change
function handlePowerChange() {
    // Hide previously retrieved SN
    snDisplay.style.display = 'none';
    
    // Reset get SN button state
    getSnBtn.disabled = false;
    getSnBtn.querySelector('.btn-text').style.display = 'inline';
    getSnBtn.querySelector('.btn-loading').style.display = 'none';
}

// Get selected power value
function getSelectedPower() {
    const selectedPower = document.querySelector('input[name="power"]:checked');
    return selectedPower ? selectedPower.value : '10';
}

// Handle get SN request
async function handleGetSn() {
    const selectedPower = getSelectedPower();
    
    if (!apiBaseUrl) {
        showError('Please set API server address first');
        return;
    }
    
    // Show loading state
    setGetSnLoadingState(true);
    
    try {
        // Build API URL and request parameters
        const apiUrl = `${apiBaseUrl}/config/get`;
        const requestData = {
            kv: [`drivingLaser${selectedPower}WSN`]
        };
        
        console.log('Sending get SN request to:', apiUrl);
        console.log('Request parameters:', requestData);
        
        // Send POST request
        const response = await fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json, text/plain, */*',
                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
            },
            body: JSON.stringify(requestData),
            mode: 'cors'
        });
        
        if (response.ok) {
            const result = await response.json();
            console.log('Get SN response:', result);
            console.log('Response data type:', typeof result);
            console.log('Response data structure:', JSON.stringify(result, null, 2));
            
            // Parse response data, find corresponding SN value
            const snKey = `drivingLaser${selectedPower}WSN`;
            let snValue = '';
            
            // Try multiple possible data structures
            if (result.data && Array.isArray(result.data)) {
                console.log('Found data array, length:', result.data.length);
                // Find data item containing SN
                for (const item of result.data) {
                    console.log('Checking data item:', item);
                    if (item.key === snKey || item.k === snKey) {
                        snValue = item.value || item.v || '';
                        console.log('Found matching SN:', snValue);
                        break;
                    }
                }
            } else if (result.data && typeof result.data === 'object') {
                console.log('data is object, check direct properties');
                // Directly check properties in data object
                if (result.data[snKey]) {
                    snValue = result.data[snKey];
                    console.log('Found SN in data object:', snValue);
                }
            } else if (result[snKey]) {
                console.log('Found SN in root object');
                snValue = result[snKey];
            } else {
                console.log('Check all possible key-value pairs');
                // Traverse all top-level key-value pairs
                for (const [key, value] of Object.entries(result)) {
                    console.log(`Checking key: ${key}, value: ${value}`);
                    if (key === snKey) {
                        snValue = value;
                        console.log('Found SN at root level:', snValue);
                        break;
                    }
                }
            }
            
            if (snValue) {
                showSnResult(snValue, selectedPower, apiUrl);
            } else {
                console.log('SN not found, complete response:', result);
                showSnError(`SN information for ${selectedPower}W laser head not found`, JSON.stringify(result, null, 2), apiUrl);
            }
            
        } else {
            throw new Error(`HTTP Error: ${response.status} ${response.statusText}`);
        }
        
    } catch (error) {
        console.error('Get SN failed:', error);
        
        // If CORS fails, try using other methods
        if (error.name === 'TypeError' && error.message.includes('CORS')) {
            tryAlternativeGetSnMethod(selectedPower);
        } else {
            showSnError('Network request failed', error.message, `${apiBaseUrl}/config/get`);
        }
    } finally {
        setGetSnLoadingState(false);
    }
}

// Try alternative method to get SN
function tryAlternativeGetSnMethod(selectedPower) {
    const apiUrl = `${apiBaseUrl}/config/get`;
    const requestData = {
        kv: [`drivingLaser${selectedPower}WSN`]
    };
    
    // Try using XMLHttpRequest
    const xhr = new XMLHttpRequest();
    xhr.open('POST', apiUrl, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    
    xhr.onload = function() {
        if (xhr.status === 200) {
            try {
                const result = JSON.parse(xhr.responseText);
                console.log('XMLHttpRequest get SN response:', result);
                console.log('Response data type:', typeof result);
                console.log('Response data structure:', JSON.stringify(result, null, 2));
                
                const snKey = `drivingLaser${selectedPower}WSN`;
                let snValue = '';
                
                // Try multiple possible data structures
                if (result.data && Array.isArray(result.data)) {
                    console.log('Found data array, length:', result.data.length);
                    for (const item of result.data) {
                        console.log('Checking data item:', item);
                        if (item.key === snKey || item.k === snKey) {
                            snValue = item.value || item.v || '';
                            console.log('Found matching SN:', snValue);
                            break;
                        }
                    }
                } else if (result.data && typeof result.data === 'object') {
                    console.log('data is object, check direct properties');
                    if (result.data[snKey]) {
                        snValue = result.data[snKey];
                        console.log('Found SN in data object:', snValue);
                    }
                } else if (result[snKey]) {
                    console.log('Found SN in root object');
                    snValue = result[snKey];
                } else {
                    console.log('Check all possible key-value pairs');
                    for (const [key, value] of Object.entries(result)) {
                        console.log(`Checking key: ${key}, value: ${value}`);
                        if (key === snKey) {
                            snValue = value;
                            console.log('Found SN at root level:', snValue);
                            break;
                        }
                    }
                }
                
                if (snValue) {
                    showSnResult(snValue, selectedPower, apiUrl);
                } else {
                    console.log('SN not found, complete response:', result);
                    showSnError(`SN information for ${selectedPower}W laser head not found`, JSON.stringify(result, null, 2), apiUrl);
                }
                
            } catch (parseError) {
                console.error('Response data parsing failed:', parseError);
                console.log('Original response text:', xhr.responseText);
                showSnError('Response data parsing failed', `Parse error: ${parseError.message}\nOriginal response: ${xhr.responseText}`, apiUrl);
            }
        } else {
            showSnError(`HTTP Error: ${xhr.status}`, xhr.statusText, apiUrl);
        }
    };
    
    xhr.onerror = function() {
        showSnError('XMLHttpRequest request failed', 'Cannot connect to server', apiUrl);
    };
    
    xhr.ontimeout = function() {
        showSnError('Request timeout', 'Please check network connection or server status', apiUrl);
    };
    
    xhr.timeout = 10000;
    
    try {
        xhr.send(JSON.stringify(requestData));
    } catch (sendError) {
        showSnError('Send request failed', sendError.message, apiUrl);
    }
}

// Set get SN button loading state
function setGetSnLoadingState(isLoading) {
    const btnText = getSnBtn.querySelector('.btn-text');
    const btnLoading = getSnBtn.querySelector('.btn-loading');
    
    if (isLoading) {
        btnText.style.display = 'none';
        btnLoading.style.display = 'flex';
        getSnBtn.disabled = true;
    } else {
        btnText.style.display = 'inline';
        btnLoading.style.display = 'none';
        getSnBtn.disabled = false;
    }
}

// Show get SN success result
function showSnResult(sn, power, apiUrl) {
    snValue.textContent = sn;
    snDisplay.style.display = 'block';
    
    // Show success status
    showCustomIpStatus(`Successfully retrieved ${power}W laser head SN: ${sn}`, 'success');
    
    // Scroll to SN display area
    snDisplay.scrollIntoView({ behavior: 'smooth' });
}

// Show get SN error result
function showSnError(message, details, apiUrl) {
    snValue.textContent = 'Retrieval failed';
    snDisplay.style.display = 'block';
    
    // Show error status
    showCustomIpStatus(`Get SN failed: ${message}`, 'error');
    
    // Scroll to SN display area
    snDisplay.scrollIntoView({ behavior: 'smooth' });
    
    console.error('Get SN error details:', details);
    
    // Show detailed debug information in console
    if (typeof details === 'object') {
        console.log('Error details object:', details);
        console.log('Error details JSON:', JSON.stringify(details, null, 2));
    } else {
        console.log('Error details text:', details);
    }
}

// Handle using retrieved SN
function handleUseSn() {
    const sn = snValue.textContent;
    
    if (sn && sn !== 'Retrieval failed') {
        // Fill retrieved SN into input field
        snInput.value = sn;
        
        // Validate input
        validateSNInput();
        
        // Hide SN display area
        snDisplay.style.display = 'none';
        
        // Scroll to SN input area
        document.querySelector('.input-section').scrollIntoView({ behavior: 'smooth' });
        
        // Focus on SN input field
        snInput.focus();
        
        // Show success message
        showCustomIpStatus(`Using retrieved SN: ${sn}`, 'success');
    } else {
        showCustomIpStatus('Please retrieve SN successfully first', 'error');
    }
}

// Add some additional user experience features
document.addEventListener('DOMContentLoaded', function() {
    // Add input field focus effects
    snInput.addEventListener('focus', function() {
        this.parentElement.style.transform = 'scale(1.02)';
    });
    
    snInput.addEventListener('blur', function() {
        this.parentElement.style.transform = 'scale(1)';
    });
    
    // Add keyboard shortcut support
    document.addEventListener('keydown', function(e) {
        // Ctrl+Enter or Cmd+Enter for quick repair
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            e.preventDefault();
            handleRepair();
        }
        
        // ESC key to clear input
        if (e.key === 'Escape') {
            snInput.value = '';
            validateSNInput();
            snInput.focus();
        }
    });
    
    // Add input field auto-focus
    snInput.focus();
    
    // Add page visibility detection (auto-focus when user switches back to page)
    document.addEventListener('visibilitychange', function() {
        if (!document.hidden) {
            snInput.focus();
        }
    });
});
    </script>
</body>
</html>
Preview
Was this page helpful?
0 out of 0 found this helpful
Help Ticket
Use this help ticket to submit your issue. We will respond within 1 business day
Submit a Ticket
Tags
MaintenanceMachineTech Support
Help Ticket
Use this help ticket to submit your issue. We will respond within 1 business day
Submit a Ticket
xTool Logo

Services & Help

All ServicesxTool SquadProduct Support

Learn & Community

xTool AcademyQ&A CommunitySoftware Learning

Company

About xToolJoin xTool Squad CommunityPrivacy & Terms

Contact Us

Submit a Ticket
🇺🇸+1 (888) 528-2293
Service Live Chat

Copyright © 2025 xTool All Rights Reserved.