bolt panorama initial

halr9000 · Oct 31, 2024 · bc9a72f · bc9a72f
1 parent 6738cd2
commit bc9a72f
Show file tree

Hide file tree

Showing 8 changed files with 5,300 additions and 0 deletions.
diff --git a/bolt-panorama/index.html b/bolt-panorama/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>Photo Gallery</title>
+      <link rel="manifest" href="/manifest.json">
+    </head>
+    <body>
+      <div id="root"></div>
+      <script type="module" src="/src/main.jsx"></script>
+    </body>
+    </html>
diff --git a/bolt-panorama/package-lock.json b/bolt-panorama/package-lock.json
diff --git a/bolt-panorama/package.json b/bolt-panorama/package.json
@@ -0,0 +1,23 @@
+{
+      "name": "pwa-photo-gallery",
+      "private": true,
+      "version": "0.0.0",
+      "type": "module",
+      "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+      },
+      "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "photo-sphere-viewer": "^4.0.0"
+      },
+      "devDependencies": {
+        "@types/react": "^18.0.28",
+        "@types/react-dom": "^18.0.11",
+        "@vitejs/plugin-react": "^3.1.0",
+        "vite": "^4.2.0",
+        "vite-plugin-pwa": "^0.14.0"
+      }
+    }
diff --git a/bolt-panorama/public/manifest.json b/bolt-panorama/public/manifest.json
@@ -0,0 +1,20 @@
+{
+      "name": "Photo Gallery",
+      "short_name": "Gallery",
+      "start_url": ".",
+      "display": "standalone",
+      "background_color": "#ffffff",
+      "description": "A mobile-optimized photo gallery PWA",
+      "icons": [
+        {
+          "src": "icon-192x192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+        },
+        {
+          "src": "icon-512x512.png",
+          "sizes": "512x512",
+          "type": "image/png"
+        }
+      ]
+    }
diff --git a/bolt-panorama/src/App.jsx b/bolt-panorama/src/App.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+    import Gallery from './components/Gallery';
+
+    function App() {
+      return (
+        <div className="App">
+          <h1>Photo Gallery</h1>
+          <Gallery />
+        </div>
+      );
+    }
+
+    export default App;
diff --git a/bolt-panorama/src/components/Gallery.jsx b/bolt-panorama/src/components/Gallery.jsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+    import PhotoSphereViewer from 'photo-sphere-viewer';
+
+    const images = [
+      '/images/photo1.jpg',
+      '/images/photo2.jpg',
+      // Add more image paths here
+    ];
+
+    function Gallery() {
+      const [viewer, setViewer] = useState(null);
+
+      const openViewer = (image) => {
+        if (viewer) {
+          viewer.setPanorama(image);
+        } else {
+          const newViewer = new PhotoSphereViewer.Viewer({
+            container: document.querySelector('#viewer'),
+            panorama: image,
+            navbar: true,
+            defaultZoomLvl: 50,
+          });
+          setViewer(newViewer);
+        }
+      };
+
+      return (
+        <div>
+          <div className="gallery">
+            {images.map((image, index) => (
+              <img
+                key={index}
+                src={image}
+                alt={`Photo ${index + 1}`}
+                onClick={() => openViewer(image)}
+                className="thumbnail"
+              />
+            ))}
+          </div>
+          <div id="viewer" className="viewer"></div>
+        </div>
+      );
+    }
+
+    export default Gallery;
diff --git a/bolt-panorama/src/index.css b/bolt-panorama/src/index.css
@@ -0,0 +1,23 @@
+body {
+      margin: 0;
+      font-family: Arial, sans-serif;
+    }
+
+    .gallery {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .thumbnail {
+      width: 100px;
+      height: 100px;
+      margin: 5px;
+      cursor: pointer;
+    }
+
+    .viewer {
+      width: 100%;
+      height: 400px;
+      margin-top: 20px;
+    }
diff --git a/bolt-panorama/src/main.jsx b/bolt-panorama/src/main.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+    import ReactDOM from 'react-dom';
+    import App from './App';
+    import './index.css';
+
+    ReactDOM.render(<App />, document.getElementById('root'));