<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Popup</title>
    <style>
        @font-face {
            font-family: IRANSans-light;
            font-style: normal;
            font-weight: 300;
            src: url('./iransans/eot/IRANSansWeb(FaNum)_Light.eot');
            src: url('./iransans/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),
                url('./iransans/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),
                url('./iransans/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'),
                url('./iransans/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
        }

        body {
            margin: 0;
            font-family: IRANSans-light;

        }

        .msf-title {
            font-size: 14px;
        }

        .msf-title-subtitle {
            font-size: 80%;
            opacity: 0.8;
        }

        .msf-container {
            direction: rtl;
            width: 800px;
            height: 500px;
            font-family: IRANSans-Light;
            display: flex;
            flex-direction: column;
            background: #690039;
            color: #fff;
            overflow: hidden
        }

        .msf-container * {
            box-sizing: border-box;
        }

        .msf-container-header {
            display: flex;
            align-items: center;
            padding: 12px;
            background: rgba(0, 0, 0, 0.4);
            gap: 12px;
        }

        .msf-container-body {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .msf-container-footer {
            height: 48px;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            padding: 0 12px;
            justify-content: flex-end;
            gap: 12px;
            width: 100%;
        }

        .rows-table-container {
            flex: 1;
            overflow: auto;
        }

        .msf-cards {
            padding: 6px;
            display: grid;
            grid-template-columns: 30% 30% 30%;
            gap: 6px;
        }

        .msf-card {
            background: rgba(0, 0, 0, 0.2);
            padding: 6px;
            border-radius: 6px;
            color: #ccc;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .msf-card-icon {
            padding: 6px;
            display: flex;
            align-items: center;
            background: rgba(0, 0, 0, 0.1);
            position: absolute;
            left: -36px;
            top: 6px;
            transition: left 0.3s;
            cursor: pointer;
        }

        .msf-card:hover .msf-card-icon {
            left: 6px;
            transition: left 0.3s;
        }

        .msf-key-value {
            display: flex;
            gap: 6px;
            font-size: 10px;
        }

        .msf-key {}

        .msf-value {
            font-weight: bold;
        }

        .msf-upload {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .msf-upload input[type=file] {
            display: none;
        }

        .msf-button-1 {
            cursor: pointer;
            background: #dd3352;
            border: 1px solid #dd3352;
            padding: 3px 12px;
            border-radius: 4px;
            color: #fff;
            border: none;
            height: 24px;
            margin: 0;
            display: flex;
            font-family: inherit;
            font-size: 12px;
        }

        .msf-button-3 {
            cursor: pointer;
            background: none;
            border: 4px dashed #dd3352;
            padding: 3px 12px;
            border-radius: 36px;
            color: #dd3352;
            height: 160px;
            width: 160px;
            margin: 0;
            align-items: center;
            display: flex;
            justify-content: center;
            font-family: inherit;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
        }

        .msf-button-2 {
            cursor: pointer;
            background: none;
            border: 1px solid #dd3352;
            padding: 3px 12px;
            border-radius: 4px;
            color: #fff;
            height: 24px;
            margin: 0;
            display: flex;
            font-family: inherit;
            font-size: 12px;
        }

        .msf-container th {
            font-size: 10px;
        }

        .msf-container tbody tr {
            border-bottom: 6px solid rgba(0, 0, 0, 0.3);
        }

        .msf-container th,
        .msf-container td {
            padding: 6px 12px;
            white-space: nowrap;
            text-align: center;
        }

        #msf-fixed-table th {
            padding: 6px 26px !important;
            color: #a14d89;
        }

        .msf-flex-1 {
            flex: 1;
        }

        .msf-table-title {
            background: rgba(0, 0, 0, 0.6);
        }

        #msf-container-footer {
            display: none;
        }

        #msf-exit {
            display: none
        }

        #msf-upload-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
        }

        #setting-modal-container {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            align-items: center;
            justify-content: center;
        }

        #setting-modal-container input {
            height: 36px;
            background: none;
            border: 1px solid #bbb;
            border-left: none;
            border-radius: 0 6px 6px 0;
            color: #fff;
            font-family: inherit;
            text-align: center;
        }

        .setting-modal-input {
            display: flex;
            align-items: center;
        }

        .setting-modal-unit {
            background: rgba(255, 255, 255, 0.5);
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px 0 0 6px;
            padding: 0 6px;
            border: 1px solid #bbb;
            border-right: none;
        }

        .setting-modal-label {
            margin-bottom: 6px;
        }

        *::-webkit-scrollbar {
            width: 10px !important;
            height: 10px !important;
        }

        *::-webkit-scrollbar-track {
            background-color: transparent;
        }

        *::-webkit-scrollbar-thumb {
            background-color: #cdd4e0;
            border-radius: 20px;
            border: 3px solid transparent;
            background-clip: content-box;
        }

        *::-webkit-scrollbar-thumb {
            background-color: #7a0c49;
        }

        *::-webkit-scrollbar-thumb:hover {
            background-color: #ac5d9e;
        }

        .msf-icon-container {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #msf-setting-close {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 12px;
            top: 12px;
        }
    </style>
</head>

<body>
    <div class="msf-container">
        <div class="msf-container-header">
            <div class="msf-title">
                <div class="msf-title-title">ثبت اتوماتیک مرسولات پستی</div>
                <div class="msf-title-subtitle" id="msf-subtitle"></div>
            </div>
            <div class="msf-flex-1"></div>
            <!-- <div class="msf-icon-container" id="msf-setting">
                <svg viewBox="0 0 24 24" width="24" height="24">
                    <path fill="currentColor"
                        d="M13.54 22H10C9.75 22 9.54 21.82 9.5 21.58L9.13 18.93C8.5 18.68 7.96 18.34 7.44 17.94L4.95 18.95C4.73 19.03 4.46 18.95 4.34 18.73L2.34 15.27C2.21 15.05 2.27 14.78 2.46 14.63L4.57 12.97L4.5 12L4.57 11L2.46 9.37C2.27 9.22 2.21 8.95 2.34 8.73L4.34 5.27C4.46 5.05 4.73 4.96 4.95 5.05L7.44 6.05C7.96 5.66 8.5 5.32 9.13 5.07L9.5 2.42C9.54 2.18 9.75 2 10 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12V12.19C19 12.07 18.5 12 18 12C17.83 12 17.66 12 17.5 12.03C17.5 11.41 17.4 10.79 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25L10.88 6.61C9.68 6.86 8.62 7.5 7.85 8.39L5.44 7.35L4.69 8.65L6.8 10.2C6.4 11.37 6.4 12.64 6.8 13.8L4.68 15.36L5.43 16.66L7.86 15.62C8.63 16.5 9.68 17.14 10.87 17.38L11.24 20H12.35C12.61 20.75 13 21.42 13.54 22M15.96 12.36C16 12.24 16 12.12 16 12C16 9.79 14.21 8 12 8S8 9.79 8 12 9.79 16 12 16C12.12 16 12.24 16 12.36 15.96C12.97 14.29 14.29 12.97 15.96 12.36M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14M16 15V21L21 18L16 15Z">
                    </path>
                </svg>
            </div> -->
            <button class="msf-button-1" id="msf-exit">خروج</button>
        </div>
        <div class="msf-container-body" id="msf-container-body"></div>
        <div id="msf-upload-container"></div>
        <div class="msf-container-footer" id="msf-container-footer">
            <button class="msf-button-2" id="msf-next">جدول بعدی</button>
            <div id="msf-table-number"></div>
            <button class="msf-button-2" id="msf-prev">جدول قبلی</button>
            <div class="msf-flex-1"></div>
            <div id="msf-is-exe"></div>
            <button class="msf-button-1" id="msf-start">شروع عملیات</button>
        </div>
        <div id="setting-modal-container">
            <div id="msf-setting-close">
                <svg viewBox="0 0 24 24" width="24" height="24">
                    <path fill="currentColor"
                        d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z">
                    </path>
                </svg>
            </div>
            <div class="setting-modal">
                <div class="setting-modal-label">وقفه ورود اطلاعات به ازای هر ردیف</div>
                <div class="setting-modal-input">
                    <input type="number" id="setting-modal-delay" value="2500" />
                    <div class="setting-modal-unit">میلی ثانیه</div>
                </div>
            </div>
        </div>
    </div>

    <script src="libs/msf.js"></script>
    <script src="libs/msf1.js"></script>
    <script type="module" src="popup.js"></script>

</body>

</html>