❗ [modify]: RenewablesLinked example no longer part of Website.

explorable-viz · Oct 20, 2024 · 0a28a81 · 0a28a81
1 parent 482d951
commit 0a28a81
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 26 deletions.
diff --git a/src/Standalone/RenewablesLinked.html b/src/Standalone/RenewablesLinked.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+   <title>Fluid: Data-Linked Visualisations</title>
+   <link href="/css/styles.css" rel="stylesheet" type="text/css">
+   <link href="/css/view-styles.css" rel="stylesheet" type="text/css">
+   <script src="https://use.fontawesome.com/1091715d00.js"></script>
+   <script>
+      // move to PureScript
+      function toggle(id) {
+         const elem = document.getElementById(id)
+         if (elem.style.visibility == 'hidden')
+            elem.style.visibility = 'visible'
+         else
+            elem.style.visibility = 'hidden'
+      }
+   </script>
+</head>
+<body class="standalone">
+<div class="grid-container double-size">
+   <div></div>
+   <div></div>
+   <div></div>
+   <div class="flex-left-align">
+      <h3>Title</h3>
+      <p>Explain your figure here</p>
+   </div>
+
+   <div></div>
+   <div id="fig-input" class="flex-right-align data-pane"></div>
+   <div>
+      <div onclick="toggle('fig-input')"><span class="data-pane-button toggle-button">◀▶</span></div>
+   </div>
+   <div class="flex-left-align">
+      <div id="fig"></div>
+      <p>Source code:</p>
+      <details>
+         <summary>bar-chart-line-chart.fld</summary>
+         <div id="codemirror-bar-chart-line-chart"></div>
+      </details>
+      <details>
+         <summary>renewables.fld</summary>
+         <div id="codemirror-renewables"></div>
+      </details>
+   </div>
+</div>
+
+<script src="fluid.js"></script>
+<script>
+   // move to PureScript
+   toggle('fig-input')
+</script>
+</body>
+</html>
diff --git a/web/index.html b/web/index.html
@@ -64,32 +64,6 @@ <h3 class="title lowercase">example 1</h3>
    <div class="flex-left-align">
       <div id="fig-4"></div>
    </div>
-
-   <div></div>
-   <div></div>
-   <div></div>
-   <div class="flex-left-align">
-      <h3 class="title lowercase">example 2</h3>
-      <p>Bar chart and line chart showing renewables data:</p>
-   </div>
-
-   <div></div>
-   <div id="fig-1-input" class="flex-right-align data-pane"></div>
-   <div>
-      <div onclick="toggle('fig-1-input')"><span class="data-pane-button toggle-button">◀▶</span></div>
-   </div>
-   <div class="flex-left-align">
-      <div id="fig-1" class="flex-bottom-align"></div>
-      <p>Source code:</p>
-      <details>
-         <summary>bar-chart-line-chart.fld</summary>
-         <div id="codemirror-bar-chart-line-chart"></div>
-      </details>
-      <details>
-         <summary>renewables.fld</summary>
-         <div id="codemirror-renewables"></div>
-      </details>
-   </div>
 </div>
 
 <script>