<html><head><hr>
<blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px;"><p style="text-align: left;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpcx88VJFQcM0xuSS7a2jsdfCP3nawrXjKiw" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="619" data-original-width="495" height="400" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpcx88VJFQcM0xuSS7a2jsdfCP3nawrXjKiw" width="320" /></a></div>&nbsp;<p></p></blockquote>


    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--    <meta name="author" content="Aldi Duzha" />
    <meta name="description" content="Free Bulma Event Participation Template, part of Awesome Bulma Templates" />
    <meta name="keywords" content="bulma, bulma-css, event, participation, template, free, awesome" />-->
    <link rel="canonical" href="https://aldi.github.io/bulma-event-participation-template/index.html" />
    <link href='https://iix60.idcloudhost.com:2083/cpsess3919593448/viewer/home%2fdartiwim%2feka.dartiwi.my.id%2frs/Rp.ico' rel='icon' type='image/x-icon'/>
    <title>Event Participation Form - Ramadhan's Month</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css" />
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma-checkradio@1.1.1/dist/css/bulma-checkradio.min.css"
    />
    <link rel="stylesheet" href="https://raw.githubusercontent.com/aldi/bulma-event-participation-template/master/css/styles.css" />
<style>
html,
body {
  font-family: 'Nanum Gothic', sans-serif;
  color: #fff;
  background: white;
}
.hero-body {
  padding: 0.5rem 0.5rem;
}
.m-0-auto {
  margin: 0 auto;
}
.nav {
  padding: 5px 0;
}
.hero-body {
  color: #000;
}
.nav-item {
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
}
.nav-item .button {
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
  padding: 5px 10px;
  height: 45px;
}
.checkboxes {
  text-align: center;
  padding-top: 5px;
}

.checkboxes input[type='checkbox']:checked + label::before {
  background-color: #00d1b2;
  border-color: #00d1b2;
}

.checkboxes input[type='checkbox']:checked + label::after {
  color: #fff;
}

.button.is-large {
  margin-bottom: 5px;
}
.columns.is-vcentered {
  margin-top: 5px;
}
.hero.is-dark {
  color: #333;
  background: white;
  display: table;
  width: 100%;
}
.button.is-success.is-outlined {
  background-color: #97cd76;
  border-color: #97cd76;
  color: #ffffff;
}

.button.is-danger.is-outlined {
  background-color: #ed6c63;
  border-color: #ed6c63;
  color: #ffffff;
}

.footer-text {
  font-size: 10px;
}

.table {
  margin-bottom: 0;
}

.is-3 {
  color: #3e3e3e !important;
}

.is-icon {
  text-align: center !important;
}

.is-checkradio[type='checkbox'] + label {
  padding-left: 0 !important;
}

tr:nth-child(odd) {
  background-color: #b3b3b311;
}

.panel-heading {
  background-color: #f7f7f7;
}

.footer-text {
  font-size: 12px;
}
</style>
  </head>
  <body>
    <section class="hero is-fullheight is-dark">
      <div class="hero-body">
        <div class="container has-text-centered">
          <figure class="image is-96x96 has-text-centered m-0-auto">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSskEUdozoygc5Boi8Wb1kJA-11j2h0LA-d9w" alt="Logo"/>
          </figure><br>
          <h2 class="title is-3">Ceklis 'Ibadah Ramadhan</h2>
          <p style="font-size: 15px">
            Alhamdulillah, Sholawat wa salam 'ala Rasuulillah wa aalih wa shohbih wa ba'du:<strong> Program SDAT TF </strong> di <i>rumah</i>,
            agenda selama libur sekolah.<br />
            Ada beberapa poin kegiatan murid untuk intensif belajar puasa yang dibimbing orang-tua.
          </p>
          <p class="is-subtitle mt-3" style="font-size: 15px">Ceklis kotak sebelah kanan, bila terlaksana.<br/>Standar Waktu Indonesia Bagian Barat</p>
          <div class="columns is-vcentered">
            <div class="column is-full-mobile">
              <section class="panel">
                <p class="panel-heading">Kegiatan Harian</p>
                <div class="panel-block">
                  <table class="table table is-fullwidth">
                    <thead>
                      <tr style="background-color: white;">
                        <th style="font-size: 14px">   ⏲️   </th>
                        <th>Jenis 'Ibadah</th>
                        <th style="text-align: center; font-size:12px">✓Cek</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td style="font-size: 11px">0:00</td>
                        <td> </td>
                        <td class="is-icon">
                          <div class="field">
                            <input
                              class="is-checkradio is-info"
                              type="checkbox"
                              id="zero"
                              name="zero"
                            />
                            <label for="zero"></label>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="font-size: 11px">4:00</td>
                        <td>Bangun Sahur</td>
                        <td class="is-icon">
                          <div class="field">
                            <input
                              class="is-checkradio is-info"
                              type="checkbox"
                              id="grandopening"
                              name="grandopening"
                            />
                            <label for="grandopening"></label>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="font-size: 11px">5:00</td>
                        <td>Sholat Shubuh</td>
                        <td class="is-icon">
                          <div class="field">
                            <input
                              class="is-checkradio is-info"
                              type="checkbox"
                              id="shubuh"
                              name="shubuh"
                            />
                            <label for="shubuh"></label>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="font-size: 11px">9:00</td>
                        <td>Kegiatan Dhuha</td>
                        <td class="is-icon">
                          <div class="field">
                            <input
                              class="is-checkradio is-info"
                              type="checkbox"
                              id="dhuha"
                              name="dhuha"
                            />
                            <label for="dhuha"></label>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="font-size: 11px">12:30</td>
                        <td>Jum'atan / Zhuhur</td>
                        <td class="is-icon">
                          <div class="field">
                            <input class="is-checkradio is-info" type="checkbox" id="dzuhur" name="dzuhur" />
                            <label for="dzuhur"></label>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="font-size: 11px">15:30</td>
                        <td>Sholat 'Ashar</td>
                        <td class="is-icon">
                          <div class="field">
                            <input class="is-checkradio is-info" type="checkbox" id="ashar" name="ashar" />
                            <label for="ashar"></label>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="font-size: 11px">18:17</td>
                        <td>Ifthor + Maghrib</td>
                        <td class="is-icon">
                          <div class="field">
                            <input class="is-checkradio is-info" type="checkbox" id="maghrib" name="maghrib" />
                            <label for="maghrib"></label>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="font-size: 11px">19:20</td>
                        <td>'Isya + Tarawih</td>
                        <td class="is-icon">
                          <div class="field">
                            <input
                              class="is-checkradio is-info"
                              type="checkbox"
                              id="isya"
                              name="isya"
                            />
                            <label for="isya"></label>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="font-size: 11px">22:00</td>
                        <td style="font-size: 15px">Tadarus &/ Tidur</td>
                        <td class="is-icon">
                          <div class="field">
                            <input
                              class="is-checkradio is-info"
                              type="checkbox"
                              id="grandclosing"
                              name="grandclosing"
                            />
                            <label for="grandclosing"></label>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td style="font-size: 11px">00:00</td>
                        <td style="font-size: 11px"><sub>....................................</sub></td>
                        <td class="is-icon">
                          <div class="field">
                            <input class="is-checkradio is-info" type="checkbox" id="lail" name="lail" />
                            <label for="lail"></label>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td></td>
                        <td style="text-align: right; vertical-align: middle;">الصّـِـيَامُ   Puasa <i>(full)</i></td>
                        <td class="is-icon">
                          <div class="field">
                            <input class="is-checkradio" type="checkbox" id="select-all" name="select-all" />
                            <label for="select-all"></label>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </section>
            </div>
          </div>
 
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>--> 
<link href='https://sourcecode28.site/css/responsive.css' rel='stylesheet'/>
  <link href='https://sourcecode28.site/css/css-circular-prog-bar.css' rel='stylesheet'/>  
  <link href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' rel='stylesheet' type='text/css'/> 
  <link href='https://sourcecode28.site/css/css-loader.css' rel='stylesheet' type='text/css'/>
  <script src='https://sourcecode28.site/js/jquery-3.4.1.min.js' type='text/javascript'/>
  <script>
    $(document).ready(function(){
      $(&quot;.loading&quot;).fadeOut();
    })
  </script>
          <div class="column has-text-centered">
            <p>
              <button class="button is-medium is-info is-outlined" type="submit" value="Submit">
                <span class="icon">
                  <i class="fa fa-paper" style="color:red"></i>
                </span>
                <span>Konfirmasi Pelaksanaan </span>
              </button>
            </p>
            <p class="mt-2">
              Silahkan hasil rekapnya dilaporkan kepada Guru, terima kasih.
              <a href="https://eka.dartiwi.my.id/rs">🙏🏻</a> 
            </p>
          </div>
        </div>
      </div>
      <div class="hero-foot">
        <div class="container has-text-centered">
          <p class="footer-text">
<!--            <a class="has-text-grey" href="https://www.aldiduzha.com?utm_source=Github"
              >Designed with <i class="fa fa-heart fa-fw" style="font-size: 10px; color: red;"></i> by AD</a
            >--><a href="https://why101955.github.io/" target="_blank"><strong> <i class="fa fa-heart fa-fw img-fluid animate__animated animate__pulse animate__infinite animate__slow; hero_img-container"  style="font-size: 18px; color: red;"></i></strong></a>
              
          </p>
        </div>
      </div>
    </section>
<audio src="https://ia800107.us.archive.org/19/items/LaguAnakIslam/Arti%20Puasa%20-%20Tasya%20%5Bsholawat.my.id%5D.mp3" autoplay="true" id="lagu" loop=""></audio>
		    

    <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
    <script>
      $(document).ready(function () {
        $('#select-all').click(function (event) {
          if (this.checked) {
            $(':checkbox').each(function () {
              this.checked = true;
            });
          } else {
            $(':checkbox').each(function () {
              this.checked = false;
            });
          }
        });
      });
    </script><hr>
  </body>
</html>