mirror of
https://github.com/cheveguerra/whatsapp-api-tutorial.git
synced 2026-04-17 19:36:59 +00:00
86 lines
2.4 KiB
HTML
86 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Whatsapp API by Ngekoding</title>
|
|
<style>
|
|
.client {
|
|
border: 1px solid #ccc;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
margin: 10px;
|
|
}
|
|
.hide {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="app">
|
|
<h1>Whatsapp API</h1>
|
|
<p>Powered by Ngekoding</p>
|
|
<div class="form-container">
|
|
<label for="client-id">ID</label><br>
|
|
<input type="text" id="client-id" placeholder="Masukkan ID">
|
|
<br><br>
|
|
<label for="client-description">Deskripsi</label><br>
|
|
<textarea rows="3" id="client-description" placeholder="Masukkan deskripsi"></textarea>
|
|
<br><br>
|
|
<button class="add-client-btn">Tambah Client</button>
|
|
</div>
|
|
<hr>
|
|
<div class="client-container">
|
|
<div class="client hide">
|
|
<h3 class="title"></h3>
|
|
<p class="description"></p>
|
|
<img src="" alt="QR Code" id="qrcode">
|
|
<h3>Logs:</h3>
|
|
<ul class="logs"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.min.js" integrity="sha512-/WwtKR6NnHomLo0O4w9QKc1INTPEJs7ko6u2aBTA1paPldhPl8LtXsi7a35iEZ69+9P5dcgVNESG8hrP4Y2t3w==" crossorigin="anonymous"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
var socket = io();
|
|
|
|
// Ketika button tambah diklik
|
|
$('.add-client-btn').click(function() {
|
|
var clientId = $('#client-id').val();
|
|
var clientDescription = $('#client-description').val();
|
|
var template = $('.client').first().clone()
|
|
.removeClass('hide')
|
|
.addClass(clientId);
|
|
template.find('.title').html(clientId);
|
|
template.find('.description').html(clientDescription);
|
|
$('.client-container').append(template);
|
|
|
|
socket.emit('create-session', {
|
|
id: clientId,
|
|
description: clientDescription
|
|
});
|
|
});
|
|
|
|
socket.on('message', function(data) {
|
|
$(`.client.${data.id} .logs`).append($('<li>').text(data.text));
|
|
});
|
|
|
|
socket.on('qr', function(data) {
|
|
$(`.client.${data.id} #qrcode`).attr('src', data.src);
|
|
$(`.client.${data.id} #qrcode`).show();
|
|
});
|
|
|
|
socket.on('ready', function(data) {
|
|
$(`.client.${data.id} #qrcode`).hide();
|
|
});
|
|
|
|
socket.on('authenticated', function(data) {
|
|
$(`.client.${data.id} #qrcode`).hide();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |