salat/persiapan.html at main · arnantoakbar/salat · 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Persiapan Sebelum Salat — Salat by Flavida</title>
<meta name="description" content="Lima syarat yang perlu disiapkan sebelum salat: bersuci, masuk waktu, menghadap kiblat, menutup aurat, dan niat — lengkap dengan dalilnya.">
<meta name="theme-color" content="#FFF8F0">
<link rel="icon" href="assets/mark-color.svg">
<link rel="stylesheet" href="css/font.css?v=15">
<link rel="stylesheet" href="css/tokens.css?v=15">
<link rel="stylesheet" href="css/base.css?v=15">
<link rel="stylesheet" href="css/app.css?v=15">
</head>
<body>
<a class="skip-link" href="#utama">Lompat ke isi</a>

<script src="js/sprite.js?v=15"></script>

<nav class="nav">
  <div class="wrap nav-inner">
    <a class="nav-brand" href="index.html">
      <img src="assets/mark-color.svg" alt="">
      <span class="nav-brand-teks">
        <span class="nav-brand-nama">Salat</span>
        <span class="nav-brand-sub">by Flavida</span>
      </span>
    </a>
    <button class="nav-toggle" type="button" id="nav-toggle"
            aria-expanded="false" aria-controls="nav-menu" aria-label="Buka menu">
      <span class="nav-toggle-garis"></span>
    </button>
    <div class="nav-menu" id="nav-menu">
      <a href="index.html">Beranda</a>
      <a href="gerakan.html">Gerakan</a>
      <a href="lengkap.html">Salat Lengkap</a>
      <a href="persiapan.html">Persiapan</a>
      <a href="dzikir.html">Dzikir</a>
      <a href="rujukan.html">Rujukan</a>
    </div>
  </div>
</nav>

<main id="utama" class="section" style="padding-top: var(--space-8)">
  <div class="wrap wrap-narrow">

    <span class="overline">Sebelum salat</span>
    <h1 class="flav-display-l">Lima hal yang disiapkan dulu.</h1>
    <p class="flav-body" style="margin-top: var(--space-4)">
      Sebelum takbir pertama, ada beberapa syarat yang perlu terpenuhi. Kalau salah satunya
      belum, salatnya belum sah &mdash; bukan karena dipersulit, tapi karena memang begitu
      aturannya sejak awal.
    </p>

    <div class="langkah-kartu">
      <div class="langkah-nomor">1</div>
      <div>
        <h2 class="flav-heading-m">Bersuci dari hadas</h2>
        <p class="flav-body-sm">
          Berwudu kalau kamu berhadas kecil, dan mandi wajib kalau berhadas besar. Kalau
          tidak ada air atau kamu sakit sehingga tidak boleh terkena air, gantinya tayamum
          dengan debu yang bersih &mdash; ini pun disebutkan langsung dalam ayat yang sama.
        </p>
        <div data-dalil="qs5-6"></div>
        <div data-dalil="tirmidzi-3" data-sorot="kunci"></div>
      </div>
    </div>

    <div class="langkah-kartu">
      <div class="langkah-nomor">2</div>
      <div>
        <h2 class="flav-heading-m">Menunggu waktunya masuk</h2>
        <p class="flav-body-sm">
          Salat wajib punya waktu masing-masing dan tidak sah kalau dikerjakan sebelum
          waktunya. Untuk mengetahui jadwalnya, pakai jadwal salat setempat atau aplikasi
          yang mengikuti perhitungan Kementerian Agama.
        </p>
        <div data-dalil="qs4-103"></div>
      </div>
    </div>

    <div class="langkah-kartu">
      <div class="langkah-nomor">3</div>
      <div>
        <h2 class="flav-heading-m">Menghadap kiblat</h2>
        <p class="flav-body-sm">
          Menghadap ke arah Ka&#39;bah di Masjidil Haram. Di Indonesia arahnya ke barat agak
          ke utara; kompas kiblat di ponsel sudah cukup untuk memastikannya. Kalau kamu
          benar-benar tidak tahu arah dan tidak ada yang bisa ditanya, berusahalah
          memperkirakan &mdash; salatmu tetap sah.
        </p>
        <div data-dalil="qs2-144"></div>
      </div>
    </div>

    <div class="langkah-kartu">
      <div class="langkah-nomor">4</div>
      <div>
        <h2 class="flav-heading-m">Menutup aurat dan tempat yang bersih</h2>
        <p class="flav-body-sm">
          Bagi laki-laki, sekurang-kurangnya dari pusar sampai lutut &mdash; tetapi menutup
          bahu lebih baik. Bagi perempuan, seluruh badan kecuali wajah dan telapak tangan.
          Pakaian dan tempat salatnya juga harus bersih dari najis.
        </p>
      </div>
    </div>

    <div class="langkah-kartu">
      <div class="langkah-nomor">5</div>
      <div>
        <h2 class="flav-heading-m">Berniat</h2>
        <p class="flav-body-sm">
          Niat itu ketetapan hati untuk mengerjakan salat tertentu &mdash; misalnya
          &quot;sekarang aku salat Zuhur&quot;. Tempatnya di hati, bukan di lisan. Sebagian
          ulama menganjurkan melafalkannya pelan sebagai pembantu hati, sebagian tidak; dua
          duanya tidak mempengaruhi sahnya salat.
        </p>
        <div data-dalil="bukhari-1" data-sorot="niat"></div>
      </div>
    </div>

    <h2 class="flav-heading-l" style="margin-top: var(--space-12)">Untuk apa semua ini?</h2>
    <p class="flav-body-sm" style="margin-top: var(--space-3)">
      Syarat-syarat di atas bukan formalitas. Semuanya menyiapkan satu hal: hadirnya hati
      saat berdiri di hadapan Allah. Itulah yang membedakan salat dari sekadar rangkaian
      gerakan.
    </p>
    <div data-dalil="qs20-14"></div>
    <div data-dalil="qs23-1"></div>

    <div class="note note-green" style="margin-top: var(--space-8)">
      <div class="note-title">Baru belajar dan belum hafal semuanya?</div>
      Kerjakan yang kamu bisa dulu. Nabi mengajari orang yang salatnya masih keliru dengan
      sabar, tiga kali berturut-turut, tanpa memarahinya. Belajar sedikit demi sedikit itu
      normal, dan salat yang kamu kerjakan sambil belajar tetap terhitung.
    </div>

    <div class="btn-row" style="margin-top: var(--space-8)">
      <a class="btn btn-primary" href="gerakan.html">
        Lanjut ke gerakannya
        <svg class="ic ic-sm" aria-hidden="true"><use href="#i-kanan"></use></svg>
      </a>
    </div>
  </div>
</main>

<footer class="footer">
  <div class="wrap footer-inner">
    <div>
      <p class="footer-note">
        Situs ini alat bantu belajar, <strong>bukan pengganti guru</strong>. Kalau ada yang
        masih membingungkan, tanyakan kepada ustadz atau ulama yang kamu percaya.
      </p>
      <p style="margin-top: var(--space-4)">
        <a href="rujukan.html">Semua rujukan</a> &nbsp;&middot;&nbsp;
        <a href="https://github.com/arnantoakbar/salat" target="_blank" rel="noopener noreferrer">Kode sumber di GitHub</a>
      </p>
    </div>
    <div class="footer-made">
      Kodenya terbuka &mdash; silakan diperiksa dan dikoreksi.<br>
      Made with &#128293; in Indonesia
    </div>
  </div>
</footer>

<script src="data/dalil.js?v=15"></script>
<script src="data/bacaan.js?v=15"></script>
<script src="data/gerakan.js?v=15"></script>
<script src="js/ui-dalil.js?v=15"></script>
<script src="js/ui-sisip.js?v=15"></script>
<script src="js/ui-nav.js?v=15"></script>
</body>
</html>