Fa_Docs/Sidebar.html at main · wr3yth/Fa_Docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>شماره‌گذار</title>
<style>
  body {
    background: #202124;
    color: #fff;
    font-family: system-ui, sans-serif;
    direction: rtl;
    margin: 0;
    padding: 12px;
  }
  .wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  label {
    font-size: 12px;
    color: #bbb;
  }
  input, select, button {
    background: #303134;
    color: #fff;
    border: 1px solid #555;
    border-radius: 8px;
    font-size: 13px;
    padding: 6px 8px;
    transition: background 0.2s;
  }
  input { width: 160px; text-align: center; }
  select { width: 170px; text-align: center; }
  button {
    background: #3c4043;
    cursor: pointer;
    width: 120px;
    transition: background 0.2s;
  }
  button:hover { background: #5f6368; }
  #status {
    font-size: 12px;
    color: #ccc;
    margin-top: 6px;
    text-align: center;
    height: 14px;
  }
</style>
</head>
<body>
  <div class="wrap">
    <div>
      <label for="prefix">پیشوند:</label><br>
      <input id="prefix" type="text" placeholder="مثلاً (« یا () )" value="">
    </div>

    <div>
      <label for="style">شیوه فهرست‌بندی:</label><br>
      <select id="style">
        <option value="persian">۱,۲,۳</option>
        <option value="faAlpha">ا,ب,پ</option>
        <option value="arAlpha">الف,ب,ج</option>
      </select>
    </div>

    <div>
      <label for="suffix">پسوند:</label><br>
      <input id="suffix" type="text" value="." placeholder=".">
    </div>

    <button id="apply">اعمال</button>
    <div id="status"></div>
  </div>

<script>
document.getElementById('apply').onclick = () => {
  const data = {
    style:  document.getElementById('style').value,
    prefix: document.getElementById('prefix').value,
    suffix: document.getElementById('suffix').value
  };
  const status = document.getElementById('status');
  status.textContent = 'در حال اعمال...';
  const start = Date.now();

  google.script.run
    .withSuccessHandler(msg => {
      const elapsed = Date.now() - start;
      status.textContent = msg + ` (${elapsed}ms)`;
      setTimeout(() => { status.textContent = ''; }, 2000);
    })
    .withFailureHandler(err => {
      status.textContent = 'خطا: ' + err.message;
    })
    .applyPersianNumbering(data);
};
</script>
</body>
</html>