Add background grid and random pixels

ome · Oct 3, 2024 · df37e12 · df37e12
1 parent 712131e
commit df37e12
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 6 deletions.
diff --git a/ome2024-ngff-challenge/index.html b/ome2024-ngff-challenge/index.html
@@ -5,8 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ome2024-ngff-challenge</title>
   </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+  <body id="app"></body>
+  <script type="module" src="/src/main.js"></script>
 </html>
diff --git a/ome2024-ngff-challenge/src/App.svelte b/ome2024-ngff-challenge/src/App.svelte
@@ -2,6 +2,7 @@
   import { ngffTable } from "./tableStore";
   import ThumbGallery from "./ThumbGallery.svelte";
   import Thumbnail from "./Thumbnail.svelte";
+  import Pixel from "./Pixel.svelte";
 
   import { SAMPLES_HOME, filesizeformat, loadCsv, lookupImagingModality, lookupOrganism } from "./util";
 
@@ -100,8 +101,11 @@
   }
 </script>
 
+<Pixel/><Pixel/><Pixel/><Pixel/><Pixel/>
+<Pixel/><Pixel/><Pixel/><Pixel/><Pixel/>
+
 <main>
-  <h1>OME 2024 NGFF Challenge</h1>
+  <h1 class="title">OME 2024 NGFF Challenge</h1>
 
   <ThumbGallery {csvUrl} />
 
@@ -222,12 +226,20 @@
 </main>
 
 <style>
+
+  .title {
+    margin-top: 0;
+    padding-top: 20px;
+    z-index: 10;
+    position: relative;
+  }
   .summary {
     margin-bottom: 2em;
   }
   table {
     border-collapse: collapse;
     width: 100%;
+    background-color: white;
   }
   td, th {
     border: lightgrey 1px solid;

diff --git a/ome2024-ngff-challenge/src/Pixel.svelte b/ome2024-ngff-challenge/src/Pixel.svelte
@@ -0,0 +1,50 @@
+
+<script>
+
+  import { fade } from 'svelte/transition';
+
+  function getRandomInt(max) {
+    return Math.floor(Math.random() * max);
+  }
+
+  let innerWidth = 0;
+  let innerHeight = 0;
+  let x = 0;
+  let y = 0;
+  let show = false;
+  let duration = getRandomInt(5000);
+
+  function update() {
+    x = getRandomInt(innerWidth / 20) * 20;
+    y = getRandomInt(innerHeight / 20) * 20;
+    show = true;
+  }
+
+  function fadeOut() {
+    duration = 2000 + getRandomInt(5000);
+    setTimeout(() => {
+      show = false;
+    }, duration);
+  }
+
+  setTimeout(update, getRandomInt(10000));
+</script>
+
+<svelte:window bind:innerWidth bind:innerHeight />
+
+{#if show}
+  <div transition:fade={{ duration: 5000 }}
+    on:introend={fadeOut}
+    on:outroend={update}
+    style:left="{x}px" style:top="{y}px" class="pixel"></div>
+{/if}
+
+<style>
+  .pixel {
+    height: 20px;
+    width: 20px;
+    background-color: rgb(227, 227, 227);
+    position: absolute;
+    z-index: 0;
+  }
+</style>
diff --git a/ome2024-ngff-challenge/src/ThumbGallery.svelte b/ome2024-ngff-challenge/src/ThumbGallery.svelte
@@ -123,7 +123,11 @@
     border: 1px solid #ccc;
     padding: 5px;
     border-radius: 5px;
+    background-color: white;
     color: black;
+    -webkit-box-shadow: 7px 6px 20px -8px rgba(115,115,115,1);
+    -moz-box-shadow: 7px 6px 20px -8px rgba(115,115,115,1);
+    box-shadow: 7px 6px 20px -8px rgba(115,115,115,1);
   }
 
   .source_icon {

diff --git a/ome2024-ngff-challenge/src/app.css b/ome2024-ngff-challenge/src/app.css
@@ -35,6 +35,38 @@ body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
+
+  width: 100%;
+  height: 100%;
+  background-image: repeating-linear-gradient(
+      180deg,
+      rgb(255, 149, 0, 0.3) 0px,
+      rgb(255, 149, 0, 0.3) 1px,
+      transparent 1px,
+      transparent 100px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      rgb(255, 149, 0, 0.3) 0px,
+      rgb(255, 149, 0, 0.3) 1px,
+      transparent 1px,
+      transparent 100px
+    ),
+    repeating-linear-gradient(
+      180deg,
+      rgba(70, 70, 70, 0.1) 0px,
+      rgba(70, 70, 70, 0.1) 1px,
+      transparent 1px,
+      transparent 20px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      rgba(70, 70, 70, 0.1) 0px,
+      rgba(70, 70, 70, 0.1) 1px,
+      transparent 1px,
+      transparent 20px
+    ),
+    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
 }
 
 p,
@@ -57,7 +89,7 @@ h1 {
   padding: 2em;
 }
 
-#app {
+main {
   max-width: 1280px;
   margin: 0 auto;
   text-align: center;