alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

Consistent styling for panel demos

Browse Source
This commit is contained in:
Philipp Rudiger
2022-04-27 12:41:43 +02:00
parent 67bfff6698
commit 31c5e1d59a
4 changed files with 62 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
pyscriptjs/examples/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

16
pyscriptjs/examples/panel_deckgl.html
View File

@@ -8,12 +8,11 @@
<meta name="name" content="Pyscript/Panel DeckGL Demo"> <meta name="name" content="Pyscript/Panel DeckGL Demo">
<title>Pyscript/Panel DeckGL Demo</title> <title>Pyscript/Panel DeckGL Demo</title>
<link rel="icon" type="image/x-icon" href="./favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css" type="text/css" /> <link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/markdown.css" type="text/css" /> <link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/markdown.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/loading.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/dataframe.css" type="text/css" />
<script type="text/javascript" src="https://unpkg.com/h3-js@3.7.2/dist/h3-js.umd.js"></script> <script type="text/javascript" src="https://unpkg.com/h3-js@3.7.2/dist/h3-js.umd.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/deck.gl@8.6.7/dist.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/deck.gl@8.6.7/dist.min.js"></script>
@@ -50,26 +49,27 @@
</py-env> </py-env>
<div class="container-fluid d-flex flex-column vh-100 overflow-hidden" id="container"> <div class="container-fluid d-flex flex-column vh-100 overflow-hidden" id="container">
<nav class="navbar navbar-expand-md navbar-dark sticky-top shadow" id="header" style="background-color: #0072b5;"> <nav class="navbar navbar-expand-md navbar-dark sticky-top shadow" id="header" style="background-color: #000000;">
<button type="button" class="navbar-toggle collapsed" id="sidebarCollapse"> <button type="button" class="navbar-toggle collapsed" id="sidebarCollapse">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="app-header"> <div class="app-header">
<a class="title" href="/" >&nbsp;Panel</a> <a class="navbar-brand app-logo" href="/">
<span class="title">&nbsp;-</span> <img src="./logo.png" class="app-logo">
<a class="title" href="" >&nbsp;Pyscript DeckGL NYC Taxi</a> </a>
<a class="title" href="" style="color: #f0ab3c;">Panel DeckGL NYC Taxi Demo</a>
</div> </div>
</nav> </nav>
<div class="row overflow-hidden" id="content"> <div class="row overflow-hidden" id="content">
<div class="sidenav" id="sidebar"> <div class="sidenav" id="sidebar">
<ul class="nav flex-column"> <ul class="nav flex-column">
<div class="bk-root" id="widgets" data-root-id="1021"></div> <div class="bk-root" id="widgets"></div>
<py-repl id="my-repl" auto-generate="true"> </py-repl> <py-repl id="my-repl" auto-generate="true"> </py-repl>
</ul> </ul>
</div> </div>
<div class="col mh-100 float-left" style="padding: 0;"> <div class="col mh-100 float-left" style="padding: 0;">
<div class="bk-root" id="plot" data-root-id="1008"></div> <div class="bk-root" id="plot"></div>
</div> </div>
</div> </div>
</div> </div>

50
pyscriptjs/examples/panel_kmeans.html
View File

@@ -2,16 +2,17 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Pyscript/Panel KMeans Demo</title> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="icon" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/icons/favicon.ico" type=""> <meta name="theme-color" content="#000000">
<meta name="name" content="PyScript/Panel KMeans Demo"> <meta name="name" content="PyScript/Panel KMeans Demo">
<title>Pyscript/Panel KMeans Demo</title>
<link rel="icon" type="image/x-icon" href="./favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css" type="text/css" /> <link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/markdown.css" type="text/css" /> <link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/markdown.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/loading.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/dataframe.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
@@ -41,40 +42,41 @@
<link rel="stylesheet" href="../build/pyscript.css" /> <link rel="stylesheet" href="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script> <script defer src="../build/pyscript.js"></script>
</head> </head>
<body>
<py-env>
- bokeh
- numpy
- pandas
- scikit-learn
- panel==0.13.1a2
- altair
</py-env>
<py-env>
- altair
- numpy
- pandas
- scikit-learn
- panel==0.13.1a2
</py-env>
<body>
<div class="container-fluid d-flex flex-column vh-100 overflow-hidden" id="container"> <div class="container-fluid d-flex flex-column vh-100 overflow-hidden" id="container">
<nav class="navbar navbar-expand-md navbar-dark sticky-top shadow" style="" id="header"> <nav class="navbar navbar-expand-md navbar-dark sticky-top shadow" id="header" style="background-color: #000000;">
<button type="button" class="navbar-toggle collapsed" id="sidebarCollapse"> <button type="button" class="navbar-toggle collapsed" id="sidebarCollapse">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="app-header"> <div class="app-header">
<a class="title" href="/" >&nbsp;Panel</a> <a class="navbar-brand app-logo" href="/">
<span class="title">&nbsp;-</span> <img src="./logo.png" class="app-logo">
<a class="title" href="" >&nbsp;Pyscript KMeans Clustering Demo</a> </a>
<a class="title" href="" style="color: #f0ab3c;">Panel KMeans Clustering Demo</a>
</div> </div>
</nav> </nav>
<div class="row overflow-hidden" id="content"> <div class="row overflow-hidden" id="content">
<div class="sidenav" id="sidebar"> <div class="sidenav" id="sidebar">
<ul class="nav flex-column"> <ul class="nav flex-column">
<div class="bk-root" id="x-widget" data-root-id="1021"></div> <div class="bk-root" id="x-widget"></div>
<div class="bk-root" id="y-widget" data-root-id="1026"></div> <div class="bk-root" id="y-widget"></div>
<div class="bk-root" id="n-widget" data-root-id="1031"></div> <div class="bk-root" id="n-widget"></div>
</ul> </ul>
</div> </div>
<div class="col mh-100 float-left" id="main"> <div class="col mh-100 float-left" id="main">
<div class="bk-root" id="intro" data-root-id="1008"></div> <div class="bk-root" id="intro"></div>
<div class="bk-root" id="cluster-plot" data-root-id="1009"></div> <div class="bk-root" id="cluster-plot"></div>
<div class="bk-root" id="table" data-root-id="1009"></div> <div class="bk-root" id="table"></div>
</div> </div>
</div> </div>
</div> </div>

56
pyscriptjs/examples/panel_stream.html
View File

@@ -2,16 +2,18 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>PyScript/Panel Streaming Demo</title> <meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="icon" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/icons/favicon.ico" type=""> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#000000">
<meta name="name" content="PyScript/Panel Streaming Demo"> <meta name="name" content="PyScript/Panel Streaming Demo">
<title>PyScript/Panel Streaming Demo</title>
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css" type="text/css" /> <link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/markdown.css" type="text/css" /> <link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/markdown.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/loading.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/dataframe.css" type="text/css" />
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js"></script> <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script> <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
@@ -26,44 +28,40 @@
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/bootstraptemplate/bootstrap.css"> <link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/bootstraptemplate/bootstrap.css">
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/defaulttheme/default.css"> <link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/defaulttheme/default.css">
<style>
#sidebar {
width: 350px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="build/pyscript.css" /> <link rel="stylesheet" href="build/pyscript.css" />
<script defer src="build/pyscript.js"></script> <script defer src="build/pyscript.js"></script>
</head> </head>
<body>
<py-env>
- bokeh
- numpy
- pandas
- panel
</py-env>
<py-env>
- bokeh
- numpy
- pandas
- panel
</py-env>
<body>
<div class="container-fluid d-flex flex-column vh-100 overflow-hidden" id="container"> <div class="container-fluid d-flex flex-column vh-100 overflow-hidden" id="container">
<nav class="navbar navbar-expand-md navbar-dark sticky-top shadow" style="" id="header"> <nav class="navbar navbar-expand-md navbar-dark sticky-top shadow" id="header" style="background-color: #000000;">
<button type="button" class="navbar-toggle collapsed" id="sidebarCollapse"> <button type="button" class="navbar-toggle collapsed" id="sidebarCollapse">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="app-header"> <div class="app-header">
<a class="title" href="/" >&nbsp;Panel</a> <a class="navbar-brand app-logo" href="/">
<span class="title">&nbsp;-</span> <img src="./logo.png" class="app-logo">
<a class="title" href="" >&nbsp;Pyscript Streaming Demo</a> </a>
</div> <a class="title" href="" style="color: #f0ab3c;">Panel Streaming Demo</a>
</div>
</nav> </nav>
<div class="row overflow-hidden" id="content"> <div class="row overflow-hidden" id="content">
<div class="col mh-100 float-left" id="main"> <div class="col mh-100 float-left" id="main">
<div class="bk-root" id="controls" data-root-id="1009"></div> <div class="bk-root" id="controls"></div>
<div class="row"> <div class="row">
<div class="bk-root" id="table" data-root-id="1010"></div> <div class="bk-root" id="table"></div>
<div class="bk-root" id="plot" data-root-id="1011"></div> <div class="bk-root" id="plot"></div>
</div> </div>
</div> </div>
</div> </div>