...

poc_project_mycelium/components/globe.html

@@ -0,0 +1,62 @@
+<div class="globe-container">
+  <canvas
+    id="cobe"
+    style="width: 500px; height: 500px"
+    width="1000"
+    height="1000"
+  ></canvas>
+</div>
+
+<style>
+.globe-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 20px 0;
+}
+</style>
+
+<script type="module">
+  import createGlobe from 'https://cdn.skypack.dev/cobe'
+
+  let phi = 0
+  let canvas = document.getElementById("cobe")
+
+  // Detect system dark mode
+  const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+
+  const globe = createGlobe(canvas, {
+    devicePixelRatio: 2,
+    width: 1000,
+    height: 1000,
+    phi: 0,
+    theta: 0.3,
+    dark: isDarkMode ? 1 : 0,
+    diffuse: 1.2,
+    scale: 1,
+    mapSamples: 16000,
+    mapBrightness: isDarkMode ? 15 : 4,
+    baseColor: isDarkMode ? [0.8, 0.8, 0.8] : [0.3, 0.3, 0.3],
+    markerColor: [0.1, 0.8, 1],
+    glowColor: isDarkMode ? [0.6, 0.6, 0.6] : [0.2, 0.2, 0.2],
+    offset: [0, 0],
+    markers: [
+      { location: [37.7595, -122.4367], size: 0.03 },
+      { location: [40.7128, -74.006], size: 0.1 },
+    ],
+    onRender: (state) => {
+      state.phi = phi
+      phi += 0.005
+    },
+  })
+
+  // Listen for system theme changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+    const newIsDarkMode = e.matches
+    globe.dark = newIsDarkMode ? 1 : 0
+    globe.baseColor = newIsDarkMode ? [0.8, 0.8, 0.8] : [0.3, 0.3, 0.3]
+    globe.mapBrightness = newIsDarkMode ? 15 : 4
+    globe.glowColor = newIsDarkMode ? [0.6, 0.6, 0.6] : [0.2, 0.2, 0.2]
+  })
+</script>