-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
138 lines (135 loc) · 9.24 KB
/
index.php
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Niliki API</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" integrity="sha256-PDJQdTN7dolQWDASIoBVrjkuOEaI137FI15sqI3Oxu8=" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/mystyle.css">
</head>
<body class="d-flex flex-column h-100 w-100 text-white bg-option">
<header class="header">
<nav class="navbar navbar-expand-lg navbar-dark bg-main">
<div class="container">
<h3 class="float-md-start mb-0">Niliki API</h3>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 nav-masthead">
<li class="nav-item">
<a class="nav-link active" href="index.php"><i class="bi bi-house-door"></i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="app/docs.php"><i class="bi bi-layout-text-sidebar"></i>Docs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="app/about.php"><i class="bi bi-info-circle"></i>About</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-fluid">
<div class="row g-3">
<div class="col-lg-6">
<form action="#" method="POST" id="formRequest">
<label for="url" class="form-label">Endpoint URL</label>
<div class="mb-3 input-group g-0">
<div class="input-group-prepend">
<select name="method" class="form-select" id="switchSelect">
<option value="get">Get</option>
<option value="post">Post</option>
</select>
</div>
<input type="text" class="form-control" id="url" name="url" placeholder="https://api.example.com" autocomplete="off">
<div class="input-group-append">
<button class="btn btn-primary" id="request" type="button"><i class="bi bi-cloud-upload"></i>Request</button>
</div>
</div>
<div id="formTable" class="hide">
<label for="body" class="form-label mt-2">Body (if method is post)</label>
<div class="row m-0 d-none d-lg-flex fillable text-center">
<div class="col-lg-4 py-1 px-2"><i class="bi bi-key-fill"></i>Key</div>
<div class="col-lg-8 py-1 px-2"><i class="bi bi-file-earmark-font-fill"></i>Value</div>
</div>
<?php for ($i = 1; $i <= 10; $i++) : ?>
<div class="row m-0 d-lg-flex fillable">
<div class="col-lg-4 p-0">
<label class="d-lg-none">Key <?= $i ?></label>
<input type="text" class="form-control form-control-sm" name="key[]" placeholder="Key <?= $i ?>">
</div>
<div class="col-lg-8 p-0">
<label class="d-lg-none">Value <?= $i ?></label>
<input type="text" class="form-control form-control-sm" name="value[]" placeholder="Value <?= $i ?>">
</div>
</div>
<?php endfor; ?>
</div>
</form>
</div>
<div class="col-lg-6">
<div class="mb-3">
<label for="result" class="form-label">Result</label>
<div id="result" class="bg-white text-dark p-2 rounded">
<p id="preholder">Result Sould Be Here..</p>
<div class="lds-dual-ring" id="loading">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col p-lg-5 p-2 border rounded">
<h4 class="border-bottom border-3 py-2 my-4">Wanna Try?</h4>
<p>Here are some examples of Endpoint</p>
<label class="form-label">GET</label>
<div class="input-group my-2">
<input type="text" class="form-control form-control-sm bg-main" readonly value="http://www.omdbapi.com/?apikey=a7ec2b75&s=harry potter" />
<div class="input-group-append">
<button class="btn btn-sm btn-primary" id="request" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy To Clipboard" onclick="copyToClipboard(this);"><i class="bi bi-clipboard-plus"></i></button>
</div>
</div>
<div class="input-group my-2">
<input type="text" class="form-control form-control-sm bg-main" readonly value="https://api.jikan.moe/v3/search/anime?q=tensei shitara" />
<div class="input-group-append">
<button class="btn btn-sm btn-primary" id="request" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy To Clipboard" onclick="copyToClipboard(this);"><i class="bi bi-clipboard-plus"></i></button>
</div>
</div>
<div class="input-group my-2">
<input type="text" class="form-control form-control-sm bg-main" readonly value="https://my-json-server.typicode.com/danz63/fake-rest-server/posts" />
<div class="input-group-append">
<button class="btn btn-sm btn-primary" id="request" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy To Clipboard" onclick="copyToClipboard(this);"><i class="bi bi-clipboard-plus"></i></button>
</div>
</div>
<label class="form-label mt-3">POST</label>
<div class="input-group my-2">
<input type="text" class="form-control form-control-sm bg-main" readonly value="https://my-json-server.typicode.com/danz63/fake-rest-server/posts" />
<div class="input-group-append">
<button class="btn btn-sm btn-primary" id="request" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy To Clipboard" onclick="copyToClipboard(this);"><i class="bi bi-clipboard-plus"></i></button>
</div>
</div>
<p class="mb-0"><small>Fill in <b>Key 1</b> With `id`, <b>Value 1</b> With `1`</small></p>
<p class="mb-0"><small>Fill in <b>Key 2</b> With `title`, <b>Value 2</b> With `Hello World`</small></p>
</div>
</div>
</div>
</main>
<footer class="mt-auto text-white-50 text-center bg-main py-2">
<p class="my-3">Made With <i class="bi bi-heart-fill"></i> by danz63</p>
<p class="my-3">
<a href="https://web.facebook.com/moch.dhannie/" target="_blank" class="text-white-50 fs-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Facebook"><i class="bi bi-facebook"></i></a>
<a href="https://github.com/danz63" target="_blank" class="text-white-50 fs-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Github"><i class="bi bi-github"></i></a>
<a href="https://www.linkedin.com/in/danz63/" target="_blank" class="text-white-50 fs-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Linkedin"><i class="bi bi-linkedin"></i></a>
<a href="mailto:hamdan.miftah63@gmail.com" target="_blank" class="text-white-50 fs-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Email"><i class="bi bi-envelope-fill"></i></a>
</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/json-formatter-js@2.3.4/dist/json-formatter.umd.js" integrity="sha256-jrQIudFON1sgGYJS9VH1D7aJ8K2s7hrZeLmhZ49d3Wc=" crossorigin="anonymous"></script>
<script src="assets/js/myscript.js"></script>
</body>
</html>