Miku-Bot/index.html at master · FarelE/Miku-Bot · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="icon" href="https://getwaves.io/favicon-32x32.png?v=f13a1a2e88a9720e746d5561039d3f5f" />
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

    <!-- CSS -->
    <link rel="stylesheet" crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==">
<link href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="project.css" />

    <title>Miku Bot</title>
    <style>
      h1 {
        text-align: center;
        color: #ffffff;
      }
    </style>
  </head>
  <body id="home">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark shadow-sm fixed-top" style="background-color: #07a5a5">
      <div class="container">
        <a class="navbar-brand" href="#">MikuBot</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#fitur">Fitur Bot</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="http://wa.me/62882163353091" target="_blank">Pemilik MikuBot</a>
            </li>
          </ul>
        </div>
    </nav>
    <!-- End Navbar -->

    <!-- Jumbotron -->
    <div class="jumbotron text-center">
      <img src="img/MikuBot.jpg" alt="MikuBot" width="200" class="rounded-circle img-thumbnail" />
      <h1 class="display-4 text-black">MikuBot</h1>
      <p class="lead">Hai saya MikuBot 👋, saya adalah sebuah program otomatisasi yang dibuat untuk mempermudah suatu pekerjaan anda.</p>
      <a href="http://wa.me/6288216335309" target="_blank" class="style-btn style-btn-gray mt-4">CHAT BOT<span></span></a>
      <br>
      <br>
      <br>
      <p class="lead">Jika ingin lapor, request fitur, atau ingin membeli script bot-wa, silahkan hubungi nomor dibawah ini.</p>
      <a href="http://wa.me/62882163353091" target="_blank" class="style-btn style-btn-gray mt-4">Nomornya orang ganteng 🤗<span></span></a>
      <br>
      <br>
      <br>
    </div>
    <!-- End Jumbotron -->

    <!-- Fitur -->
    <section id="fitur">
      <div class="container">
        <div class="row text-center mb-3">
          <div class="col">
            <h2>🖥 Fitur MikuBot</h2>
          </div>
        </div>
        <div class="row justify-content-center fs-5 text-center">
          <div class="col-md-4">
            <p>Miku Bot memiliki banyak fitur seperti membuat sticker, download anime dan lainnya</p>
          </div>
          <div class="col-md-4">Miku Bot juga memiliki fitur game Epic Rpg yang seru untuk dimainkan bersama-sama</div>
        </div>
      </div>
      <br>
      <div class="row-plow mb-4 mt-6">
        <div class="col-md-6">
        <div class="border rounded-1 border-700 h-100 features-items">
        <div class="p-5"><img src="img/dashboardicon.png" alt="Dashboard" style="width:48px;height:48px;">
        <h3 class="pt-3 lh-base">📌 Tampilan</h3>
        <p class="mb-0">Tampilan MikuBot | Tampilannya sangat menarik dan juga mudah dipahami</p>
        </div>
        </div>
        </div>
        <div class="col-md-6">
        <div class="border rounded-1 border-700 h-100 features-items">
        <div class="p-5"><img src="img/comment.png" alt="Comment" style="width:48px;height:48px;">
        <h3 class="pt-3 lh-base">📌 Info Menarik</h3>
        <p class="mb-0">Info Menarik | Bot gratis masuk group kalian dengan cara kirim link groupnya ke nomor bot</p>
        </div>
        </div>
        </div>
        </div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#e2edff"
          fill-opacity="1"
          d="M0,128L48,138.7C96,149,192,171,288,165.3C384,160,480,128,576,96C672,64,768,32,864,42.7C960,53,1056,107,1152,138.7C1248,171,1344,181,1392,186.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
        ></path>
      </svg>
    </section>
    <!-- End Fitur -->

    <!-- Footer -->
    <footer class="footer text-white text-center pb-3">
        <p>Create with ❤️ By <a href="#" class="text-white" style="text-decoration: none;">MikuBot</a></p>
    </footer>
    <!-- End Footer -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script>
      const scriptURL = 'https://script.google.com/macros/s/AKfycbx0VFO3uDgJY_zI6K6FBJRd_l6VR4AlevAoOO6evoZGFCxDdn7m8gZRkmX91LydQGLb/exec'
      const form = document.forms['MikuBot-contact-form']
      const btnKirim = document.querySelector('.btn-kirim')
      const btnLoading = document.querySelector('.btn-loading')
      const myAlert = document.querySelector('.my-alert')

      form.addEventListener('submit', e => {
        e.preventDefault()
        btnLoading.classList.toggle('d-none');
        btnKirim.classList.toggle('d-none');
        fetch(scriptURL, { method: 'POST', body: new FormData(form)})
          .then(response => {
            // Tampil Kirim Button
            btnLoading.classList.toggle('d-none');
            btnKirim.classList.toggle('d-none');
            // Pemberitahuan
            myAlert.classList.toggle('d-none');
            // Reset Form
            form.reset()
            console.log('Success!', response)})
          .catch(error => console.error('Error!', error.message))
      })
    </script>
  </body>
</html>