Hugging Face's logo

Spaces:
r2d209
/
ncss1
Running

App Files Community
ncss1 / index.html
r2d209's picture
r2d209
undefined - Initial Deployment
c1b37ee verified
raw
history blame contribute delete
25.4 kB
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>OTT ์„ธ๊ธˆ๊ณ„์‚ฐ์„œ ์ •์‚ฐ ์‹œ์Šคํ…œ</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .sidebar {
 transition: all 0.3s ease;
 }
 .dropdown-content {
 display: none;
 transition: all 0.3s ease;
 }
 .dropdown:hover .dropdown-content {
 display: block;
 }
 .checkbox-custom {
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 width: 20px;
 height: 20px;
 border: 2px solid #3b82f6;
 border-radius: 4px;
 outline: none;
 cursor: pointer;
 position: relative;
 }
 .checkbox-custom:checked {
 background-color: #3b82f6;
 }
 .checkbox-custom:checked::after {
 content: "\2713";
 font-size: 14px;
 color: white;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 .service-tab {
 transition: all 0.3s ease;
 }
 .service-tab:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 .mapping-highlight {
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0% { background-color: #f0f9ff; }
 50% { background-color: #e0f2fe; }
 100% { background-color: #f0f9ff; }
 }
 </style>
</head>
<body class="bg-gray-50">
 <!-- ์ƒ๋‹จ ๋„ค๋น„๊ฒŒ์ด์…˜ -->
 <nav class="bg-blue-600 text-white shadow-lg">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="flex items-center space-x-4">
 <i class="fas fa-video text-2xl"></i>
 <span class="text-xl font-bold">OTT ์ •์‚ฐ ์‹œ์Šคํ…œ</span>
 </div>
 <div class="flex items-center space-x-6">
 <div class="dropdown relative">
 <button class="flex items-center space-x-2 focus:outline-none">
 <img src="https://ui-avatars.com/api/?name=๊ด€๋ฆฌ์ž" alt="User" class="w-8 h-8 rounded-full">
 <span>๊น€๋‹ด๋‹น์ž</span>
 <i class="fas fa-chevron-down"></i>
 </button>
 <div class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden">
 <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">ํ”„๋กœํ•„ ์„ค์ •</a>
 <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">๋กœ๊ทธ์•„์›ƒ</a>
 </div>
 </div>
 </div>
 </div>
 </nav>
<div class="flex">
 <!-- ์‚ฌ์ด๋“œ๋ฐ” -->
 <div class="sidebar bg-white w-64 min-h-screen shadow-md p-4 flex flex-col">
 <div class="mb-8 mt-4">
 <h2 class="text-lg font-semibold text-gray-700">Main Menu</h2>
 </div>
 <ul class="space-y-2">
 <li>
 <a href="#" class="flex items-center p-2 text-gray-600 rounded-lg hover:bg-blue-50 hover:text-blue-600">
 <i class="fas fa-home mr-3"></i>
 <span>๋Œ€์‹œ๋ณด๋“œ</span>
 </a>
 </li>
 <li>
 <a href="#" class="flex items-center p-2 text-blue-600 bg-blue-50 rounded-lg">
 <i class="fas fa-file-invoice-dollar mr-3"></i>
 <span>์„ธ๊ธˆ๊ณ„์‚ฐ์„œ ๊ด€๋ฆฌ</span>
 </a>
 </li>
 <li>
 <a href="#" class="flex items-center p-2 text-gray-600 rounded-lg hover:bg-blue-50 hover:text-blue-600">
 <i class="fas fa-calculator mr-3"></i>
 <span>์ •์‚ฐ ๊ด€๋ฆฌ</span>
 </a>
 </li>
 <li>
 <a href="#" class="flex items-center p-2 text-gray-600 rounded-lg hover:bg-blue-50 hover:text-blue-600">
 <i class="fas fa-file-alt mr-3"></i>
 <span>์ „ํ‘œ ๊ด€๋ฆฌ</span>
 </a>
 </li>
 <li>
 <a href="#" class="flex items-center p-2 text-gray-600 rounded-lg hover:bg-blue-50 hover:text-blue-600">
 <i class="fas fa-chart-bar mr-3"></i>
 <span>๋ถ„์„ ๋ฆฌํฌํŠธ</span>
 </a>
 </li>
 </ul>
 <div class="mt-auto p-4 text-sm text-gray-500">
 <p>ยฉ 2023 OTT ์ •์‚ฐํŒ€</p>
 </div>
 </div>
<!-- ๋ฉ”์ธ ์ฝ˜ํ…์ธ  -->
 <div class="flex-1 p-8">
 <div class="mb-6">
 <h1 class="text-2xl font-bold text-gray-800">์„ธ๊ธˆ๊ณ„์‚ฐ์„œ ๊ด€๋ฆฌ</h1>
 <p class="text-gray-600">๋ฐœํ–‰๋œ ์„ธ๊ธˆ๊ณ„์‚ฐ์„œ๋ฅผ ์กฐํšŒํ•˜๊ณ  ์ •์‚ฐ ๊ฒฐ๊ณผ์™€ ๋งคํ•‘ํ•˜์—ฌ ์ „ํ‘œ๋ฅผ ๋ฐœํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</p>
 </div>
<!-- ์ •์‚ฐ ๊ธฐ๊ฐ„ ์„ ํƒ -->
 <div class="bg-white rounded-lg shadow p-6 mb-6">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-lg font-semibold text-gray-800">์กฐํšŒ ์กฐ๊ฑด ์„ค์ •</h2>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">์ •์‚ฐ ๊ธฐ๊ฐ„</label>
 <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
 <option>2023๋…„ 10์›”</option>
 <option>2023๋…„ 9์›”</option>
 <option>2023๋…„ 8์›”</option>
 <option>2023๋…„ 7์›”</option>
 </select>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">OTT ์„œ๋น„์Šค</label>
 <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
 <option>์ „์ฒด ์„œ๋น„์Šค</option>
 <option>OTT ์„œ๋น„์Šค A</option>
 <option>OTT ์„œ๋น„์Šค B</option>
 <option>OTT ์„œ๋น„์Šค C</option>
 </select>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">CP ์‚ฌ์—…์ž</label>
 <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
 <option>์ „์ฒด CP</option>
 <option>ABC ์ปจํ…์ธ </option>
 <option>XYZ ๋ฏธ๋””์–ด</option>
 <option>DEF ์—”ํ„ฐํ…Œ์ธ๋จผํŠธ</option>
 </select>
 </div>
 <div class="flex items-end">
 <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300">
 ์กฐํšŒํ•˜๊ธฐ
 </button>
 </div>
 </div>
 </div>
<!-- ์„œ๋น„์Šค๋ณ„ ํƒญ -->
 <div class="flex space-x-4 mb-6">
 <div class="service-tab bg-white rounded-lg shadow p-4 cursor-pointer w-1/3 text-center border-b-4 border-blue-500">
 <div class="text-sm font-medium text-gray-500">OTT ์„œ๋น„์Šค A</div>
 <div class="text-2xl font-bold text-blue-600">15๊ฑด</div>
 <div class="text-sm text-green-600">100% ๋งคํ•‘ ์™„๋ฃŒ</div>
 </div>
 <div class="service-tab bg-white rounded-lg shadow p-4 cursor-pointer w-1/3 text-center border-b-4 border-yellow-500">
 <div class="text-sm font-medium text-gray-500">OTT ์„œ๋น„์Šค B</div>
 <div class="text-2xl font-bold text-yellow-600">8๊ฑด</div>
 <div class="text-sm text-red-600">50% ๋งคํ•‘ ํ•„์š”</div>
 </div>
 <div class="service-tab bg-white rounded-lg shadow p-4 cursor-pointer w-1/3 text-center border-b-4 border-purple-500">
 <div class="text-sm font-medium text-gray-500">OTT ์„œ๋น„์Šค C</div>
 <div class="text-2xl font-bold text-purple-600">12๊ฑด</div>
 <div class="text-sm text-green-600">100% ๋งคํ•‘ ์™„๋ฃŒ</div>
 </div>
 </div>
<!-- ์„ธ๊ธˆ๊ณ„์‚ฐ์„œ ๋ฆฌ์ŠคํŠธ -->
 <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
 <div class="px-6 py-4 border-b flex justify-between items-center">
 <h2 class="text-lg font-semibold text-gray-800">์„ธ๊ธˆ๊ณ„์‚ฐ์„œ ๋ชฉ๋ก (์ด 35๊ฑด)</h2>
 <div class="flex space-x-2">
 <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 py-1 px-3 rounded-md text-sm">
 <i class="fas fa-download mr-1"></i> ์—‘์…€ ๋‹ค์šด๋กœ๋“œ
 </button>
 <button class="bg-blue-50 hover:bg-blue-100 text-blue-600 py-1 px-3 rounded-md text-sm">
 <i class="fas fa-sync-alt mr-1"></i> ์ƒˆ๋กœ๊ณ ์นจ
 </button>
 </div>
 </div>
 <div class="overflow-x-auto">
 <table class="min-w-full divide-y divide-gray-200">
 <thead class="bg-gray-50">
 <tr>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">์„ ํƒ</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">๋ฐœํ–‰์ผ์ž</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">์„ธ๊ธˆ๊ณ„์‚ฐ์„œ ๋ฒˆํ˜ธ</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CP ์‚ฌ์—…์ž</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">๊ธˆ์•ก (VAT ํฌํ•จ)</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">๋ฐฐ์ • ์„œ๋น„์Šค</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">์ƒํƒœ</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">์•ก์…˜</th>
 </tr>
 </thead>
 <tbody class="bg-white divide-y divide-gray-200">
 <tr class="hover:bg-gray-50">
 <td class="px-6 py-4 whitespace-nowrap">
 <input type="checkbox" class="checkbox-custom">
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-15</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">TAX-20231015-001</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">ABC ์ปจํ…์ธ </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">12,550,000 ์›</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="flex space-x-1">
 <span class="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">์„œ๋น„์Šค A</span>
 <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">์„œ๋น„์Šค B</span>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">๋งคํ•‘ ์™„๋ฃŒ</span>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
 <button class="text-blue-600 hover:text-blue-800">์ƒ์„ธ๋ณด๊ธฐ</button>
 </td>
 </tr>
 <tr class="hover:bg-gray-50 mapping-highlight">
 <td class="px-6 py-4 whitespace-nowrap">
 <input type="checkbox" class="checkbox-custom">
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-10-14</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">TAX-20231014-003</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">XYZ ๋ฏธ๋””์–ด</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">8,750,000 ์›</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="flex space-x-1">
 <span class="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">์„œ๋น„์Šค A</span>
 <span class="px-2 py-1 text-xs bg-purple-100 text-purple-800 rounded-full">์„œ๋น„์Šค C</span>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">๋งคํ•‘ ํ•„์š”</span>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
 <button class="text-blue-600 hover:text-blue-800">์ƒ์„ธ๋ณด๊ธฐ</button>
 </td>
 </tr>
 <!-- ์ถ”๊ฐ€ ํ–‰๋“ค... -->
 </tbody>
 </table>
 </div>
 <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between bg-gray-50">
 <div class="text-sm text-gray-500">
 <span>1-10 of 35 items</span>
 </div>
 <div class="flex space-x-2">
 <button class="px-3 py-1 border rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50">
 Previous
 </button>
 <button class="px-3 py-1 border rounded-md text-sm bg-blue-600 text-white">
 1
 </button>
 <button class="px-3 py-1 border rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50">
 2
 </button>
 <button class="px-3 py-1 border rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50">
 Next
 </button>
 </div>
 </div>
 </div>
<!-- ์ผ๊ด„ ์•ก์…˜ ๋ฒ„ํŠผ -->
 <div class="flex justify-end space-x-3 mb-6">
 <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 text-sm">
 <i class="fas fa-file-export mr-2"></i>์ผ๊ด„ ๋‚ด๋ณด๋‚ด๊ธฐ
 </button>
 <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm">
 <i class="fas fa-file-invoice mr-2"></i>SAP ์ „ํ‘œ ๋ฐœํ–‰
 </button>
 </div>
 </div>
 </div>
<!-- ์ƒ์„ธ ๋งคํ•‘ ๋ชจ๋‹ฌ -->
 <div id="mappingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl">
 <div class="px-6 py-4 border-b flex justify-between items-center">
 <h2 class="text-xl font-semibold text-gray-800">์„ธ๊ธˆ๊ณ„์‚ฐ์„œ ์ƒ์„ธ ๋ฐ ๋งคํ•‘</h2>
 <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="p-6">
 <div class="grid grid-cols-2 gap-6 mb-8">
 <div>
 <h3 class="text-lg font-medium text-gray-900 mb-4">์„ธ๊ธˆ๊ณ„์‚ฐ์„œ ์ •๋ณด</h3>
 <div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-500">CP ์‚ฌ์—…์ž</label>
 <p class="mt-1 text-sm text-gray-900">XYZ ๋ฏธ๋””์–ด</p>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-500">์„ธ๊ธˆ๊ณ„์‚ฐ์„œ ๋ฒˆํ˜ธ</label>
 <p class="mt-1 text-sm text-gray-900">TAX-20231014-003</p>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-500">๋ฐœํ–‰ ๊ธˆ์•ก (VAT ํฌํ•จ)</label>
 <p class="mt-1 text-sm text-gray-900">8,750,000 ์›</p>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-500">๋ฐœํ–‰ ์ผ์ž</label>
 <p class="mt-1 text-sm text-gray-900">2023-10-14</p>
 </div>
 </div>
 </div>
 <div>
 <h3 class="text-lg font-medium text-gray-900 mb-4">์ •์‚ฐ ์ •๋ณด ๋งคํ•‘</h3>
 <div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-500 mb-1">์ •์‚ฐ ๊ธฐ๊ฐ„</label>
 <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
 <option>2023๋…„ 10์›”</option>
 <option>2023๋…„ 9์›”</option>
 </select>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-500">์ „์ฒด ์ •์‚ฐ ๊ธˆ์•ก</label>
 <p class="mt-1 text-sm font-bold text-gray-900">8,750,000 ์›</p>
 </div>
 <div class="border-t pt-4">
 <h4 class="text-sm font-medium text-gray-700 mb-3">์„œ๋น„์Šค๋ณ„ ์ •์‚ฐ ๊ธˆ์•ก ๋งคํ•‘</h4>
 <div class="space-y-3">
 <div class="flex items-center">
 <input type="checkbox" id="serviceA" class="checkbox-custom mr-3">
 <label for="serviceA" class="flex-1 text-sm text-gray-900">OTT ์„œ๋น„์Šค A</label>
 <input type="number" class="w-32 border border-gray-300 rounded-md py-1 px-2 focus:outline-none focus:ring-1 focus:ring-blue-500 text-sm" placeholder="๊ธˆ์•ก ์ž…๋ ฅ" value="5,250,000">
 </div>
 <div class="flex items-center">
 <input type="checkbox" id="serviceB" class="checkbox-custom mr-3" checked>
 <label for="serviceB" class="flex-1 text-sm text-gray-900">OTT ์„œ๋น„์Šค B</label>
 <input type="number" class="w-32 border border-gray-300 rounded-md py-1 px-2 focus:outline-none focus:ring-1 focus:ring-blue-500 text-sm" placeholder="๊ธˆ์•ก ์ž…๋ ฅ" value="0">
 </div>
 <div class="flex items-center">
 <input type="checkbox" id="serviceC" class="checkbox-custom mr-3" checked>
 <label for="serviceC" class="flex-1 text-sm text-gray-900">OTT ์„œ๋น„์Šค C</label>
 <input type="number" class="w-32 border border-gray-300 rounded-md py-1 px-2 focus:outline-none focus:ring-1 focus:ring-blue-500 text-sm" placeholder="๊ธˆ์•ก ์ž…๋ ฅ" value="3,500,000">
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="bg-blue-50 p-4 rounded-md mb-6">
 <div class="flex items-start">
 <div class="flex-shrink-0 pt-1">
 <i class="fas fa-info-circle text-blue-500"></i>
 </div>
 <div class="ml-3">
 <h3 class="text-sm font-medium text-blue-800">๋งคํ•‘ ์•ˆ๋‚ด</h3>
 <div class="mt-2 text-sm text-blue-700">
 <p>
 ํ•ด๋‹น ์„ธ๊ธˆ๊ณ„์‚ฐ์„œ๊ฐ€ ์–ด๋–ค OTT ์„œ๋น„์Šค์— ํ•ด๋‹นํ•˜๋Š”์ง€ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ์„ ํƒํ•˜๊ณ  ๊ธˆ์•ก์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.
์—ฌ๋Ÿฌ ์„œ๋น„์Šค์— ๊ฑธ์ณ ์žˆ๋Š” ๊ฒฝ์šฐ ๊ฐ ์„œ๋น„์Šค๋ณ„ ๊ธˆ์•ก์„ ๋ถ„ํ• ํ•˜์—ฌ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
 ์ •์‚ฐ ์‹œ์Šคํ…œ์˜ ์ „์ฒด ์ •์‚ฐ ๊ธˆ์•ก๊ณผ ์„ธ๊ธˆ๊ณ„์‚ฐ์„œ ๊ธˆ์•ก์ด ์ผ์น˜ํ•ด์•ผ ์ „ํ‘œ ๋ฐœํ–‰์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
 </p>
 </div>
 </div>
 </div>
 </div>
 <div class="flex justify-end space-x-3">
 <button onclick="closeModal()" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200">
 ์ทจ์†Œ
 </button>
 <button onclick="verifyAndSubmit()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
 ๊ฒ€์ฆ ๋ฐ SAP ์ „ํ‘œ ๋ฐœํ–‰
 </button>
 </div>
 </div>
 </div>
 </div>
<script>
 // ๋ชจ๋‹ฌ ์—ด๊ธฐ ํ•จ์ˆ˜
 function openModal() {
 document.getElementById('mappingModal').classList.remove('hidden');
 }
 // ๋ชจ๋‹ฌ ๋‹ซ๊ธฐ ํ•จ์ˆ˜
 function closeModal() {
 document.getElementById('mappingModal').classList.add('hidden');
 }
 // ๊ฒ€์ฆ ๋ฐ ์ „ํ‘œ ๋ฐœํ–‰ ํ•จ์ˆ˜
 function verifyAndSubmit() {
 // ๊ฐ„๋‹จํžˆ ํ™•์ธ ๋ฉ”์‹œ์ง€๋งŒ ํ‘œ์‹œ (์‹ค์ œ ๊ตฌํ˜„์—์„œ๋Š” API ํ˜ธ์ถœ ๋“ฑ ์ฒ˜๋ฆฌ)
 alert('์ •์‚ฐ ๊ธˆ์•ก์ด ์ผ์น˜ํ•˜์—ฌ SAP ์ž„์‹œ์ „ํ‘œ๊ฐ€ ๋ฐœํ–‰๋˜์—ˆ์Šต๋‹ˆ๋‹ค.');
 closeModal();
 }
 // ํŽ˜์ด์ง€ ๋กœ๋“œ ์‹œ ์ดˆ๊ธฐํ™”
 document.addEventListener('DOMContentLoaded', function() {
 // ํ…Œ์ด๋ธ” ํ–‰ ํด๋ฆญ ์ด๋ฒคํŠธ (์ƒ์„ธ ๋ชจ๋‹ฌ ์—ด๊ธฐ)
 document.querySelectorAll('tbody tr').forEach(row => {
 row.addEventListener('click', function(e) {
 if (!e.target.classList.contains('checkbox-custom')) {
 openModal();
 }
 });
 });
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - ๐Ÿงฌ <a href="https://enzostvs-deepsite.hf.space?remix=r2d209/ncss1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>