Commit 74362f7a authored by Gavin Brown's avatar Gavin Brown

use bootstrap

parent d09f5061
$enable-shadows: true;
$enable-gradients: true;
$enable-hover-media-query: true;
$enable-responsive-font-sizes: true;
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>RDAP Web Client</title> <title>RDAP Web Client</title>
<style> <meta charset="utf-8" />
html,body,p,table,tr,td,th,ul,ol,li,input,select,input,button { <meta name="viewport" content="width=device-width, initial-scale=1" />
font-family: "Helvetica", "Arial", sans; <link rel="stylesheet" href="/assets/bootstrap.min.css" />
line-height: 1.5em;
font-size: 11pt;
color: #444;
}
td,th {
vertical-align:top;
}
ul,ol {
margin:0;
padding: 0 0 0 1em;
}
td,th {
padding:0.25em;
}
fieldset {
margin:0 0 1em 0;
border:1px solid grey;
border-radius:1em;
}
legend {
padding:0 0.5em;
font-weight:bold;
}
pre {
margin:0;
}
.error {
color:red;
}
</style>
<script> <script>
var RDAP_MEDIA_TYPE = 'application/rdap+json'; var RDAP_MEDIA_TYPE = 'application/rdap+json';
...@@ -169,7 +139,7 @@ function handleError(error) { ...@@ -169,7 +139,7 @@ function handleError(error) {
function createErrorNode(error) { function createErrorNode(error) {
el = document.createElement('p'); el = document.createElement('p');
el.classList.add('error'); el.classList.add('error', 'alert', 'alert-warning');
el.appendChild(document.createTextNode(error)); el.appendChild(document.createTextNode(error));
return el; return el;
...@@ -202,7 +172,7 @@ function processObject(object) { ...@@ -202,7 +172,7 @@ function processObject(object) {
if (!object) return false; if (!object) return false;
var table = document.createElement('table'); var table = document.createElement('table');
table.classList.add('rdap-object'); table.classList.add('table', 'table-sm', 'table-borderless', 'rdap-object');
switch (object.objectClassName) { switch (object.objectClassName) {
case 'domain': case 'domain':
...@@ -288,6 +258,7 @@ function processCommonObjectProperties(object, table) { ...@@ -288,6 +258,7 @@ function processCommonObjectProperties(object, table) {
div.id = 'element-' + ++elementCounter; div.id = 'element-' + ++elementCounter;
var button = document.createElement('button'); var button = document.createElement('button');
button.classList.add('btn', 'btn-secondary');
button.appendChild(document.createTextNode('Show')); button.appendChild(document.createTextNode('Show'));
button.onclick = new Function('showRawData("' + div.id + '");return false'); button.onclick = new Function('showRawData("' + div.id + '");return false');
div.appendChild(button); div.appendChild(button);
...@@ -339,7 +310,7 @@ function processStatus(status, table) { ...@@ -339,7 +310,7 @@ function processStatus(status, table) {
// add a table row listing the object's events // add a table row listing the object's events
function processEvents(events, table) { function processEvents(events, table) {
var stable = document.createElement('table'); var stable = document.createElement('table');
stable.classList.add('event-table'); stable.classList.add('table', 'table-sm', 'table-borderless', 'event-table');
for (var i = 0 ; i < events.length ; i++) { for (var i = 0 ; i < events.length ; i++) {
if (events[i].eventActor) { if (events[i].eventActor) {
...@@ -431,6 +402,7 @@ function processRemarksOrNotices(things) { ...@@ -431,6 +402,7 @@ function processRemarksOrNotices(things) {
if (things[i].links) { if (things[i].links) {
var ltable = document.createElement('table'); var ltable = document.createElement('table');
ltable.classList.add('table', 'table-sm', 'table-borderless');
processLinks(things[i].links, ltable); processLinks(things[i].links, ltable);
tdiv.appendChild(ltable); tdiv.appendChild(ltable);
} }
...@@ -517,6 +489,7 @@ function processEntity(object, table) { ...@@ -517,6 +489,7 @@ function processEntity(object, table) {
// process an entity's vCard // process an entity's vCard
function processVCardArray(vcard) { function processVCardArray(vcard) {
var vtable = document.createElement('table'); var vtable = document.createElement('table');
vtable.classList.add('table', 'table-sm', 'table-borderless');
for (var i = 0 ; i < vcard.length ; i++) { for (var i = 0 ; i < vcard.length ; i++) {
var node = vcard[i]; var node = vcard[i];
...@@ -632,13 +605,19 @@ function ucfirst(string) { ...@@ -632,13 +605,19 @@ function ucfirst(string) {
</script> </script>
</head> </head>
<body> <body>
<h1>RDAP Web Client</h1>
<form onsubmit="doQuery();return false"> <nav class="navbar navbar-dark bg-dark shadow-sm">
<fieldset id="input"> <span class="text-white font-weight-bold" style="font-size:larger">RDAP Web Client</span>
<legend>RDAP Query</legend> </nav>
<p>
<select id="type" name="type" onchange="updatePlaceHolder(this.options[this.selectedIndex].value)"> <br/>
<div class="container">
<form onsubmit="doQuery();return false" class="form-inline">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<select id="type" name="type" onchange="updatePlaceHolder(this.options[this.selectedIndex].value)" xclass="custom-select">
<option value="domain">Domain Name</option> <option value="domain">Domain Name</option>
<option value="tld">Top-level domain</option> <option value="tld">Top-level domain</option>
<option value="ip">IP Address or CIDR</option> <option value="ip">IP Address or CIDR</option>
...@@ -648,17 +627,22 @@ function ucfirst(string) { ...@@ -648,17 +627,22 @@ function ucfirst(string) {
<option value="url">URL</option> <option value="url">URL</option>
<option value="json">JSON</option> <option value="json">JSON</option>
</select> </select>
<input id="object" type="text" name="object" placeholder="example.com" style="width:32em"/> </div>
<input id="button" type="button" value="Submit" onclick="doQuery()"/>
</p> <input id="object" type="text" name="object" placeholder="example.com" style="width:32em" class="form-control" />
</fieldset> <div class="input-group-append">
<input id="button" type="button" value="Submit" onclick="doQuery()" class="btn btn-primary"/>
</div>
</div>
<div id="output-div"> <div id="output-div" class="container">
<!-- output will go here --> <!-- output will go here -->
</div> </div>
</form> </form>
<br/>
<p><strong>Note:</strong></p> <p><strong>Note:</strong></p>
<ul> <ul>
...@@ -671,5 +655,8 @@ function ucfirst(string) { ...@@ -671,5 +655,8 @@ function ucfirst(string) {
<script> <script>
document.getElementById('object').focus(); document.getElementById('object').focus();
</script> </script>
</div>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment