pas2js/demo/webwidget/widgets/widgetsdemo.html
2020-10-11 10:36:06 +00:00

63 lines
3.1 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<title>Web Widgets Demo</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="css/widgetsdemo.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="webwidgetsdemo.js"></script>
<script src="countrycodes.js"></script>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-dark bg-primary sticky-top">
<a class="navbar-brand" href="#">
<!-- <img src="images/freePascal.jpeg" height="30" class="d-inline-block align-top mr-2 " alt="" loading="lazy"> -->
<span class="font-weight-bold">Web Widgets Demo</span>
</a>
<img src="images/freePascal.jpeg" height="30" class="ml-auto d-inline-block align-top mr-2 " alt="" loading="lazy">
</nav>
<!-- end of navbar -->
<div class="container-fluid" />
<!-- toast -->
<div id="toastarea" aria-live="polite" aria-atomic="true" style="position: relative; top:0; right: 0; z-index: 99;">
<div id="toastarea-stack" style="position: absolute; top: 0; right: 0; z-index: 99;" data-ww-element-content="ww-1" >
</div>
</div>
<!-- end of toast -->
<div class="d-flex flex-column" style="height: 88vh;">
<div class="flex-fill mt-1 row h-100 overflow-auto" >
<!-- demo -->
<div id="demolist" class="col-auto h-100 overflow-auto"></div>
<div id="democontainer" class="col h-100 overflow-auto d-flex justify-content-center py-2"></div>
<div id="propertygrid" class="col-auto h-100 overflow-auto"></div>
<!-- end of demo -->
</div>
<div class="mt-2 border bg-light" style="max-height: 30vh;">
<!-- console -->
<div class="form-check ml-2 my-2">
<label class="form-check-label">
<input type="checkbox" id="showconsole" class="form-check-input" checked>Show pas2js console
</label>
</div>
<div id="pasjsconsole" class="democonsole h-100 overflow-auto mb-2"></div>
<!-- end of console -->
</div>
</div>
</div>
<script>
window.addEventListener("load", rtl.run);
</script>
</body>
</html>