zaal/index.html at master · IndieHum/zaal · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE HTML>
<html lang="fa" dir="rtl">

<head>
  <title>زال</title>
  <meta charset="utf-8">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <link rel="shortcut icon" href="./images/ico_2.png" type="image/x-icon">
  <link rel="stylesheet" href="./css/main-style.css">
  <link rel="stylesheet" href="./css/font.css">
  <!-- bootstrap css cdn -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="bg-dark text-white">
  <header class="d-flex justify-content-between align-items-center p-3 bg-secondary">

    <section>
      <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        🌍🌏
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href=".">فارسی</a></li>
        <li><a class="dropdown-item" href="./lang/en/index.html">English</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="https://github.com/IndieHum/zaal" target="_blank">زبان خود را بیافزایید.</a></li>
      </ul>
    </section>

    <section>
      <h1>زال |‌ میان‌بر موتورهای جست‌وجو</h1>
    </section>

    <section>
      <!-- Button trigger modal -->
      <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#warning">
        ⚠️
      </button>

      <!-- The Modal -->
      <div class="modal fade" id="warning" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5 text-info">هشدار و کمی آموزش</h1>
            </div>
            <div class="modal-body text-dark">
              <ul>
                <li>حتما اطمینان حاصل فرمایید که به این وب‌سایت اجازه باز کردن چندین سربرگ داده‌اید.</li>
                <li>گزینش همه گزینه‌‌ها برای جست‌وجو ممکن است برای سخت‌افزارتان سنگین باشد.</li>
                <li>برخی از سرویس‌ها ممکن است تحریم یا فیلتر باشد.</li>
                <li>زمانی که همه گزینه ها را گزینش کرده‌اید ممکن است برخی سرویس‌ها به شما بابت ربات بودن مشکوک شوند.</li>
              </ul>
            </div>
            <div class="modal-footer d-flex justify-content-between">
              <span class="text-success">نسخه پیش‌نمایش</span>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </header>

  <main class="d-flex justify-content-center align-items-center flex-column p-5">
    <!-- SearchBar -->
    <section class="d-flex justify-content-center mb-5 mt-5">
      <form onsubmit="event.preventDefault();" role="search" class="search-form">
        <input id="search" type="search" placeholder="بنویس..." autofocus required class="search-input" />
        <button type="submit" id="search-btn">برو</button>
      </form>
    </section>

    <div>
      <!-- Tab Navigation -->
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="SE-tab" data-bs-toggle="tab" data-bs-target="#SE" type="button" role="tab" aria-controls="home" aria-selected="true">
            موتورهای جست‌وجو
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="MSE-tab" data-bs-toggle="tab" data-bs-target="#MSE" type="button" role="tab" aria-controls="profile" aria-selected="false">
            موتورهای فرا جست‌وجو
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="TS-tab" data-bs-toggle="tab" data-bs-target="#TS" type="button" role="tab" aria-controls="profile" aria-selected="false">
            جست‌وجوی تلگرام
          </button>
        </li>
      </ul>

      <!-- Tab Content -->
      <div class="tab-content" id="myTabContent">
        <!-- موتورهای جست‌وجو -->
        <div class="tab-pane fade show active" id="SE" role="tabpanel" aria-labelledby="home-tab">
          <section class="common-width mt-3">
            <div class="mb-4">
              <input type="checkbox" id="selection" checked="false">
              <label for="selection" id="selection-text">گزینش همه</label>
            </div>
            <section id="se-container" class="d-flex flex-wrap gap-3">
            </section>
          </section>
        </div>
        <!-- موتورهای فراجست‌وجو -->
        <div class="tab-pane fade" id="MSE" role="tabpanel" aria-labelledby="profile-tab">
          <section class="common-width mt-3">
            <div class="mb-4">
              <input type="checkbox" id="selectionSecond" checked="false">
              <label for="selectionSecond" id="selection-text">گزینش همه</label>
            </div>
            <section id="mse-container" class="d-flex flex-wrap gap-3">
            </section>
          </section>
        </div>
        <!-- جست‌وجوی تلگرام -->
        <div class="tab-pane fade" id="TS" role="tabpanel" aria-labelledby="profile-tab">
          <p class="common-width">بزودی...</p>
        </div>
      </div>
    </div>

    <section id="alert" class="alert mt-5"></section>
  </main>

  <footer class="position-absolute bottom-0 start-50 translate-middle">
    <span>با زدن ⭐ در <a href="https://github.com/IndieHum/zaal" target="_blank">گیت‌هاب</a> از ما حمایت کنید.</span>
  </footer>

</body>
<script type="module" src="./js/main.js"></script>
<!-- bootstrap js cdn -->
<!-- <script src="./bootstrap-5.3.3-dist/js/bootstrap.bundle.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</html>