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">
<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://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/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://cdn.jsdelivr.net/npm/deck.gl@8.6.7/dist.min.js"></script>
@@ -50,26 +49,27 @@
</py-env>
<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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="app-header">
<a class="title" href="/" >&nbsp;Panel</a>
<span class="title">&nbsp;-</span>
<a class="title" href="" >&nbsp;Pyscript DeckGL NYC Taxi</a>
<a class="navbar-brand app-logo" href="/">
<img src="./logo.png" class="app-logo">
</a>
<a class="title" href="" style="color: #f0ab3c;">Panel DeckGL NYC Taxi Demo</a>
</div>
</nav>
<div class="row overflow-hidden" id="content">
<div class="sidenav" id="sidebar">
<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>
</ul>
</div>
<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>

50
pyscriptjs/examples/panel_kmeans.html
View File

@@ -2,16 +2,17 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pyscript/Panel KMeans Demo</title>
<link rel="icon" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/icons/favicon.ico" type="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#000000">
<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://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/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-lite@5"></script>
@@ -41,40 +42,41 @@
<link rel="stylesheet" href="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script>
</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">
<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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="app-header">
<a class="title" href="/" >&nbsp;Panel</a>
<span class="title">&nbsp;-</span>
<a class="title" href="" >&nbsp;Pyscript KMeans Clustering Demo</a>
<a class="navbar-brand app-logo" href="/">
<img src="./logo.png" class="app-logo">
</a>
<a class="title" href="" style="color: #f0ab3c;">Panel KMeans Clustering Demo</a>
</div>
</nav>
<div class="row overflow-hidden" id="content">
<div class="sidenav" id="sidebar">
<ul class="nav flex-column">
<div class="bk-root" id="x-widget" data-root-id="1021"></div>
<div class="bk-root" id="y-widget" data-root-id="1026"></div>
<div class="bk-root" id="n-widget" data-root-id="1031"></div>
<div class="bk-root" id="x-widget"></div>
<div class="bk-root" id="y-widget"></div>
<div class="bk-root" id="n-widget"></div>
</ul>
</div>
<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="cluster-plot" data-root-id="1009"></div>
<div class="bk-root" id="table" data-root-id="1009"></div>
<div class="bk-root" id="intro"></div>
<div class="bk-root" id="cluster-plot"></div>
<div class="bk-root" id="table"></div>
</div>
</div>
</div>

58
pyscriptjs/examples/panel_stream.html
View File

@@ -2,16 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>PyScript/Panel Streaming Demo</title>
<link rel="icon" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/icons/favicon.ico" type="">
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<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">
<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://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/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://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
@@ -21,49 +23,45 @@
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.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">
<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/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="build/pyscript.css" />
<script defer src="build/pyscript.js"></script>
</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">
<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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="app-header">
<a class="title" href="/" >&nbsp;Panel</a>
<span class="title">&nbsp;-</span>
<a class="title" href="" >&nbsp;Pyscript Streaming Demo</a>
</div>
<span class="navbar-toggler-icon"></span>
</button>
<div class="app-header">
<a class="navbar-brand app-logo" href="/">
<img src="./logo.png" class="app-logo">
</a>
<a class="title" href="" style="color: #f0ab3c;">Panel Streaming Demo</a>
</div>
</nav>
<div class="row overflow-hidden" id="content">
<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="bk-root" id="table" data-root-id="1010"></div>
<div class="bk-root" id="plot" data-root-id="1011"></div>
<div class="bk-root" id="table"></div>
<div class="bk-root" id="plot"></div>
</div>
</div>
</div>