Merge pull request #8 from pyscript/add-splashscreens

madhur-tandon · web-flow · commit c81174d2d51f · 2023-12-14T19:57:52.000+05:30
add splashcreen to all examples
diff --git a/altair/index.html b/altair/index.html
@@ -14,11 +14,25 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>Altair</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/antigravity/index.html b/antigravity/index.html
@@ -14,11 +14,25 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>Antigravity</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/bokeh/index.html b/bokeh/index.html
@@ -14,6 +14,16 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>Bokeh Example</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
 
@@ -29,6 +39,10 @@
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/d3/index.html b/d3/index.html
@@ -14,6 +14,16 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>D3 Visualization</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
 
@@ -39,6 +49,10 @@
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/folium/index.html b/folium/index.html
@@ -14,11 +14,25 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>Folium</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/fractals_with_numpy_and_canvas/index.html b/fractals_with_numpy_and_canvas/index.html
@@ -14,6 +14,16 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>Fractals with NumPy and canvas</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
 
@@ -43,6 +53,10 @@
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/hello_world/index.html b/hello_world/index.html
@@ -14,11 +14,25 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>PyScript Hello World</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/icosahedron/index.html b/icosahedron/index.html
@@ -14,6 +14,16 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>Raycaster Icosahedron</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
 
@@ -25,6 +35,10 @@
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <div class="container-fluid fixed-top header disable-selection">
             <div class="row">
                 <div class="col"></div>
diff --git a/matplotlib/index.html b/matplotlib/index.html
@@ -14,11 +14,25 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>Matplotlib</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/pandas/index.html b/pandas/index.html
@@ -14,12 +14,26 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <!-- will be set via PyDom -->
         <title id="header-title"></title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/panel/index.html b/panel/index.html
@@ -14,6 +14,16 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>Panel Example</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
 
@@ -30,6 +40,10 @@
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/panel_deckgl/index.html b/panel_deckgl/index.html
@@ -14,6 +14,16 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>PyScript/Panel DeckGL Demo</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
 
@@ -51,6 +61,10 @@
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/panel_kmeans/index.html b/panel_kmeans/index.html
@@ -14,6 +14,16 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>Pyscript/Panel KMeans Demo</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
 
@@ -56,6 +66,10 @@
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/panel_streaming/index.html b/panel_streaming/index.html
@@ -14,6 +14,16 @@
         <!-- This script tag bootstraps PyScript -->
         <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
 
+        <!-- for splashscreen -->
+        <style>
+            #loading { outline: none; border: none; background: transparent }
+        </style>
+        <script type="module">
+            const loading = document.getElementById('loading');
+            addEventListener('py:ready', () => loading.close());
+            loading.showModal();
+        </script>
+
         <title>PyScript/Panel Streaming Demo</title>
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
 
@@ -44,6 +54,10 @@
     </head>
 
     <body>
+        <dialog id="loading">
+            <h1>Loading...</h1>
+        </dialog>
+
         <nav class="navbar" style="background-color: #000000">
             <div class="app-header">
                 <a href="/">
diff --git a/panel_with_hvplot/index.html b/panel_with_hvplot/index.html
diff --git a/py-jokes/index.html b/py-jokes/index.html
diff --git a/simple_clock/index.html b/simple_clock/index.html
diff --git a/todo/index.html b/todo/index.html
