belowjs 1.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/LICENSE +689 -0
- package/README.md +218 -0
- package/dist/belowjs.css +1 -0
- package/dist/belowjs.js +8428 -0
- package/package.json +60 -0
package/README.md
ADDED
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
# BelowJS
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/belowjs)
|
|
4
|
+
[](https://www.npmjs.com/package/belowjs)
|
|
5
|
+
[](https://www.gnu.org/licenses/gpl-3.0)
|
|
6
|
+
|
|
7
|
+
> **Note:** This is a pre-release version (`1.0.0-rc.1`). The API is stable, but please be aware that minor changes may occur before the final 1.0.0 release.
|
|
8
|
+
|
|
9
|
+
**Dive Shipwrecks in Virtual Reality**
|
|
10
|
+
|
|
11
|
+
Setup virtual dives in minutes. Full control over your underwater photogrammetry models. Web and virtual reality as first class technologies.
|
|
12
|
+
|
|
13
|
+
## About
|
|
14
|
+
|
|
15
|
+
BelowJS is a 3D model viewer built on Three.js that allows communities to share their underwater photogrammetry models on the web and in VR.
|
|
16
|
+
|
|
17
|
+
Virtual reality and desktop modes are tightly integrated with a measurement system, so archaeologists can research sites with confidence. An optional dive mode lets audiences feel the wrecks as they are - optimised for the Meta Quest 3 headset.
|
|
18
|
+
|
|
19
|
+
BelowJS can be deployed statically or as part of a system. A simple GitHub page can share optimised models for free, and will last forever with little maintenance. Conversely, it can power dynamic systems like BelowVR, which lets teams virtually dive together.
|
|
20
|
+
|
|
21
|
+
Sensible defaults make your work look beautiful. We have tools to help you optimise, scale and annotate them.
|
|
22
|
+
|
|
23
|
+
The code is yours, as long as you share what you do with it.
|
|
24
|
+
|
|
25
|
+
## Quick Start
|
|
26
|
+
|
|
27
|
+
### With npm
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm install belowjs three
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
```javascript
|
|
34
|
+
import { ModelViewer } from 'belowjs';
|
|
35
|
+
import 'belowjs/dist/belowjs.css';
|
|
36
|
+
|
|
37
|
+
const config = {
|
|
38
|
+
models: {
|
|
39
|
+
'kxi': {
|
|
40
|
+
url: 'shipwreck.glb'
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const viewer = new ModelViewer('body', config);
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### With CDN
|
|
49
|
+
|
|
50
|
+
This gives you a complete VR-ready 3D viewer with dive lighting, measurement tools, and mode switching enabled by default.
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<!DOCTYPE html>
|
|
54
|
+
<html>
|
|
55
|
+
<head>
|
|
56
|
+
<script type="importmap">
|
|
57
|
+
{
|
|
58
|
+
"imports": {
|
|
59
|
+
"three": "https://cdn.jsdelivr.net/npm/three@0.179.1/+esm",
|
|
60
|
+
"belowjs": "https://cdn.jsdelivr.net/npm/belowjs@1.0.0-rc.1/dist/belowjs.js"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
</script>
|
|
64
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/belowjs@1.0.0-rc.1/dist/belowjs.css">
|
|
65
|
+
<style>
|
|
66
|
+
body, html { margin: 0; padding: 0; overflow: hidden; }
|
|
67
|
+
</style>
|
|
68
|
+
</head>
|
|
69
|
+
<body>
|
|
70
|
+
<script type="module">
|
|
71
|
+
import { ModelViewer } from 'belowjs';
|
|
72
|
+
|
|
73
|
+
const config = {
|
|
74
|
+
models: {
|
|
75
|
+
'kxi': {
|
|
76
|
+
url: 'shipwreck.glb'
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
const viewer = new ModelViewer('body', config);
|
|
82
|
+
</script>
|
|
83
|
+
</body>
|
|
84
|
+
</html>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## What it does
|
|
88
|
+
|
|
89
|
+
- Loads and displays GLB 3D models in a web browser
|
|
90
|
+
- Works with VR headsets through WebXR, optimised for Quest 3
|
|
91
|
+
- Provides measurement tools for both desktop and VR environments
|
|
92
|
+
- Includes underwater lighting simulation and particle effects
|
|
93
|
+
- Supports multiple models with dropdown switching
|
|
94
|
+
- Can be embedded in iframes with URL parameter configuration
|
|
95
|
+
|
|
96
|
+
## Examples
|
|
97
|
+
|
|
98
|
+
Three different examples are included:
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
git clone https://github.com/patrick-morrison/belowjs
|
|
102
|
+
cd belowjs
|
|
103
|
+
npm install && npm run build
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
- `npm run dev` — Full-featured viewer with model selection and all systems enabled
|
|
107
|
+
- `npm run dev:dragdrop` — File loader with drag-and-drop GLB support and custom UI elements
|
|
108
|
+
- `npm run dev:embed` — Lightweight viewer designed for iframe embedding
|
|
109
|
+
|
|
110
|
+
### Live Examples
|
|
111
|
+
|
|
112
|
+
- [Basic Viewer](https://patrick-morrison.github.io/belowjs/examples/basic/) — Full-featured multi-model viewer
|
|
113
|
+
- [Drag & Drop](https://patrick-morrison.github.io/belowjs/examples/dragdrop/) — File loader with custom UI
|
|
114
|
+
- [Embed Viewer](https://patrick-morrison.github.io/belowjs/examples/embed/) — Lightweight iframe-ready viewer
|
|
115
|
+
- [CDN Test](https://patrick-morrison.github.io/belowjs/examples/cdn-test/) — Minimal CDN implementation
|
|
116
|
+
|
|
117
|
+
## Installation
|
|
118
|
+
|
|
119
|
+
### npm
|
|
120
|
+
```bash
|
|
121
|
+
npm install belowjs three
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Manual Installation
|
|
125
|
+
If you prefer to install manually, clone the repository and build the distribution files:
|
|
126
|
+
```bash
|
|
127
|
+
git clone https://github.com/patrick-morrison/belowjs
|
|
128
|
+
cd belowjs
|
|
129
|
+
npm install
|
|
130
|
+
npm run build
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
This builds the necessary files into the `/dist` directory:
|
|
134
|
+
- `belowjs.js` (~419 KB) — ES modules version
|
|
135
|
+
- `belowjs.css` (~20 KB) — Complete stylesheet
|
|
136
|
+
|
|
137
|
+
## Deployment
|
|
138
|
+
|
|
139
|
+
Deploy statically on your server, integrate with JS/ES modules in an app, or simplest of all - GitHub Pages:
|
|
140
|
+
|
|
141
|
+
```
|
|
142
|
+
shipwrecks-vr/
|
|
143
|
+
├── index.html # Main HTML with BelowJS
|
|
144
|
+
├── belowjs.js # Download from releases
|
|
145
|
+
├── belowjs.css # Download from releases
|
|
146
|
+
└── models/
|
|
147
|
+
├── kxi.glb
|
|
148
|
+
└── kozvii.glb
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
Push to GitHub, enable Pages in Settings → live in minutes.
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
## Usage
|
|
155
|
+
|
|
156
|
+
### Basic Setup
|
|
157
|
+
```javascript
|
|
158
|
+
import { ModelViewer } from 'belowjs';
|
|
159
|
+
import 'belowjs/dist/belowjs.css';
|
|
160
|
+
|
|
161
|
+
new ModelViewer('#container', {
|
|
162
|
+
models: { 'ship': { url: 'model.glb', name: 'Historic Ship' } }
|
|
163
|
+
});
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### With Camera Positioning and All Features
|
|
167
|
+
```javascript
|
|
168
|
+
new ModelViewer(document.body, {
|
|
169
|
+
models: {
|
|
170
|
+
'wreck': {
|
|
171
|
+
url: 'shipwreck.glb',
|
|
172
|
+
name: 'Historic Shipwreck',
|
|
173
|
+
initialPositions: {
|
|
174
|
+
desktop: {
|
|
175
|
+
camera: { x: 10, y: 5, z: 15 },
|
|
176
|
+
target: { x: 0, y: 0, z: 0 }
|
|
177
|
+
},
|
|
178
|
+
vr: {
|
|
179
|
+
dolly: { x: 0, y: 2, z: 10 },
|
|
180
|
+
rotation: { x: 0, y: 0, z: 0 }
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
enableVR: true,
|
|
186
|
+
enableMeasurement: true,
|
|
187
|
+
enableDiveSystem: true
|
|
188
|
+
});
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
### URL Parameter Integration
|
|
192
|
+
The embed example supports URL parameters for dynamic configuration:
|
|
193
|
+
|
|
194
|
+
```html
|
|
195
|
+
<iframe
|
|
196
|
+
src="viewer.html?model=wreck.glb&name=Historic%20Wreck&cx=10&cy=5&cz=15"
|
|
197
|
+
width="800" height="600">
|
|
198
|
+
</iframe>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## Development
|
|
202
|
+
|
|
203
|
+
```bash
|
|
204
|
+
npm run build # Build distribution files
|
|
205
|
+
npm run dev # Start development server
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
The examples load from `/dist/`. Run `npm run build` once before first testing to generate `/dist/`. During `npm run dev`, source edits will auto-rebuild the library.
|
|
209
|
+
|
|
210
|
+
## License
|
|
211
|
+
|
|
212
|
+
GPL-3.0-or-later — See [LICENSE](LICENSE) file.
|
|
213
|
+
|
|
214
|
+
---
|
|
215
|
+
|
|
216
|
+
Created by [Patrick Morrison](https://padmorrison.com).
|
|
217
|
+
|
|
218
|
+
Built for underwater archaeology. Models courtesy of [WreckSploration](https://wrecksploration.com).
|
package/dist/belowjs.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--below-bg-color: #0a0a0a;--below-text-color: #e8e8e8;--below-accent-color: #64B5F6;--below-panel-bg: rgba(255, 255, 255, .08);--below-panel-border: rgba(255, 255, 255, .12);--below-panel-backdrop: blur(20px);--below-panel-shadow: 0 8px 32px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2);--below-font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--below-bg-color);color:var(--below-text-color);font-family:var(--below-font-family)}.below-viewer-container{width:100%;height:100%;position:relative}.below-viewer-container canvas{display:block;width:100%;height:100%}.below-panel{background:var(--below-panel-bg);-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);border:1px solid var(--below-panel-border);border-radius:16px;box-shadow:var(--below-panel-shadow)}.model-selector{position:absolute;top:20px;right:20px;z-index:50;background:var(--below-panel-bg);-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);border:1px solid var(--below-panel-border);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:20px;min-width:220px;box-shadow:var(--below-panel-shadow);transition:all .3s ease}.model-selector:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0006,0 4px 12px #0000004d}.model-selector__dropdown{background:linear-gradient(145deg,#ffffff14,#ffffff0a);color:var(--below-text-color);border:1px solid rgba(255,255,255,.1);padding:16px 20px;font-size:23px;font-weight:500;font-family:inherit;cursor:pointer;outline:none;transition:all .3s ease;min-width:100%;border-radius:12px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 1px 3px #0000001a}.model-selector__dropdown:focus{border-color:var(--below-accent-color);box-shadow:0 0 0 2px #64b5f633,inset 0 1px 3px #0000001a}.model-selector__dropdown:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.model-selector__dropdown:disabled{cursor:not-allowed;opacity:.5}.model-selector__dropdown option{background:#1a1a1a;color:var(--below-text-color);padding:12px;font-size:14px}.loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#000000e6,#000000b3);color:var(--below-accent-color);padding:20px 40px;border-radius:16px;font-size:18px;font-weight:500;z-index:1000;display:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(100,181,246,.2);box-shadow:0 8px 32px #0006,0 0 20px #64b5f61a;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:.9}50%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}}.status{position:absolute;bottom:20px;right:20px;background:#000000b3;padding:10px 15px;border-radius:8px;font-size:12px;z-index:10}.fullscreen-button{position:absolute;bottom:90px;right:20px;width:36px;height:36px;border-radius:50%;background:var(--below-panel-bg);border:1px solid var(--below-panel-border);color:var(--below-text-color);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:120;-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);box-shadow:0 4px 16px #0003;-webkit-user-select:none;user-select:none;transition:transform .3s ease,box-shadow .3s ease}.fullscreen-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.fullscreen-button.light-theme{background:#000c!important;border:1px solid rgba(0,0,0,.2)!important;color:#fffffff2!important;box-shadow:0 2px 12px #00000040!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;top:20px!important;bottom:auto!important;right:20px!important}.fullscreen-button.light-theme:hover{background:#000000e6!important;border-color:#0000004d!important;color:#fff!important;transform:translateY(-2px) scale(1.02)!important;box-shadow:0 4px 20px #00000059!important}.fullscreen-button.no-measurement{bottom:20px!important}.info-panel{position:absolute;top:20px;left:20px;z-index:10;padding:20px 24px;max-width:340px;-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);background:var(--below-panel-bg);border:1px solid var(--below-panel-border);border-radius:16px;box-shadow:var(--below-panel-shadow);transition:all .3s ease}.info-panel:hover{transform:translateY(-1px);box-shadow:0 12px 40px #0006,0 4px 12px #0000004d}.info-panel__title{color:#fff;font-size:22px;font-weight:800;margin-bottom:12px;text-transform:uppercase;letter-spacing:1.2px;background:linear-gradient(135deg,#fff,#f5f5f5);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}.info-panel__controls{margin-top:8px;font-size:13px;line-height:1.5;color:#b0b0b0}.info-panel__controls strong{color:var(--below-text-color);font-weight:600}@media (max-width: 768px){.info-panel{top:10px;left:10px;padding:16px;max-width:280px}}.vr-button--glass,.vr-button-glass,[style*="position: absolute"][style*=bottom]{position:fixed!important;bottom:80px!important;left:50%!important;transform:translate(-50%)!important;z-index:100!important;padding:16px 32px!important;min-width:160px!important;height:56px!important;background:#ffffff1a!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important;backdrop-filter:blur(20px) saturate(140%)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:16px!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif!important;font-size:14px!important;font-weight:300!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:.1em!important;white-space:nowrap!important;text-align:center!important;line-height:1.2!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;box-shadow:0 8px 32px #0000004d,0 2px 8px #4ec3ff0d,inset 0 1px #ffffff0d!important;cursor:pointer!important;transition:all .4s cubic-bezier(.4,0,.2,1)!important;outline:none!important;text-decoration:none!important;position:relative!important;overflow:hidden!important}.vr-button--glass:before,.vr-button-glass:before,.vr-button-available:before,[style*="position: absolute"][style*=bottom]:before{content:""!important;position:absolute!important;top:0!important;left:-100%!important;width:100%!important;height:100%!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),rgba(255,255,255,.3),rgba(255,255,255,.15),transparent)!important;animation:vrShimmerInviting 4s ease-in-out infinite!important;border-radius:16px!important;pointer-events:none!important}@keyframes vrShimmerInviting{0%,80%{left:-100%!important;opacity:0!important}85%{left:-50%!important;opacity:.5!important}90%{left:0!important;opacity:1!important}95%{left:50%!important;opacity:.5!important}to{left:100%!important;opacity:0!important}}.vr-button--glass:hover,.vr-button-glass:hover,.vr-button-available:hover{background:#ffffff26!important;border-color:#ffffff4d!important;transform:translate(-50%) translateY(-2px)!important;box-shadow:0 12px 40px #0006,0 4px 12px #4ec3ff1a,inset 0 1px #ffffff14!important}.vr-button--glass:hover:before,.vr-button-glass:hover:before,.vr-button-available:hover:before,[style*="position: absolute"][style*=bottom]:hover:before{animation:vrShimmer 1.5s ease-in-out infinite!important}.vr-button--glass:active,.vr-button-glass:active,.vr-button-available:active{transform:translate(-50%) translateY(-1px)!important;background:#fff3!important;box-shadow:0 6px 20px #0006,0 2px 6px #4ec3ff1a,inset 0 1px #ffffff1a!important;transition:all .1s ease!important}.vr-button-disabled,button.vr-button-disabled{background:#9ca3af1a!important;border:1px solid rgba(156,163,175,.3)!important;color:#9ca3af!important;cursor:not-allowed!important;opacity:.6!important;box-shadow:0 4px 16px #0003!important;pointer-events:none!important}.vr-button-disabled:before,button.vr-button-disabled:before{display:none!important}@keyframes vrShimmer{0%{left:-100%!important;opacity:0!important}50%{left:0!important;opacity:1!important}to{left:100%!important;opacity:0!important}}@media (max-width: 768px){.vr-button--glass,.vr-button-glass,[style*="position: absolute"][style*=bottom]{bottom:60px!important;padding:12px 24px!important;min-width:140px!important;height:48px!important;font-size:12px!important}.vr-icon{font-size:14px!important}.info-panel{display:none}}.vr-mode .info-panel{display:none!important}.vr-mode .model-selector{pointer-events:none;opacity:.5}.vr-controller{pointer-events:none}.vr-loading{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;color:#fff;padding:20px;border-radius:10px;font-size:18px;z-index:1000}.vr-measurement-panel{position:fixed;top:20px;right:20px;background:#000c;color:#fff;padding:15px;border-radius:10px;border:2px solid #87cefa;z-index:100;font-family:monospace}.vr-reticle{position:fixed;top:50%;left:50%;width:4px;height:4px;background:#fffc;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:999}.vr-teleport-indicator{position:absolute;width:2px;height:2px;background:#0f0;border-radius:50%;pointer-events:none;opacity:.8}.vr-hand-model{pointer-events:none}.vr-spotlight-indicator{position:fixed;bottom:80px;left:50%;transform:translate(-50%);color:#fffc;font-size:14px;text-align:center;pointer-events:none;z-index:90}@supports (-webkit-appearance: none){.vr-button--glass,.vr-button-glass,[style*="position: absolute"][style*=bottom]{backdrop-filter:blur(20px) saturate(140%)!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important}}.mode-toggle-container{display:flex;flex-direction:column;gap:20px}.semantic-toggle{position:relative;width:180px;height:60px;margin:0 auto;background:#ffffff0f;border-radius:30px;border:1px solid rgba(255,255,255,.1);overflow:hidden}.semantic-toggle input{position:absolute;opacity:0;width:0;height:0}.toggle-option{position:absolute;top:0;width:90px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.toggle-option.left{left:0}.toggle-option.right{right:0}.toggle-icon{font-size:20px;margin-bottom:4px;transition:all .3s ease}.toggle-text{color:#888;transition:all .3s ease;font-size:12px}.toggle-slider-bg{position:absolute;top:4px;left:4px;width:82px;height:52px;background:linear-gradient(135deg,#4caf50,#388e3c);border-radius:26px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #4caf5066,0 2px 8px #0003}.semantic-toggle input:checked+.toggle-slider-bg{transform:translate(90px);background:linear-gradient(135deg,#64b5f6,#42a5f5);box-shadow:0 4px 16px #64b5f666,0 2px 8px #0003}.semantic-toggle input:not(:checked)~.toggle-option.left .toggle-icon{color:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.5))}.semantic-toggle input:not(:checked)~.toggle-option.left .toggle-text{color:#fff;font-weight:700}.semantic-toggle input:checked~.toggle-option.right .toggle-icon{color:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.5))}.semantic-toggle input:checked~.toggle-option.right .toggle-text{color:#fff;font-weight:700}.semantic-toggle:hover .toggle-slider-bg{box-shadow:0 6px 20px #4caf5080,0 2px 12px #0000004d}.semantic-toggle input:checked:hover+.toggle-slider-bg{box-shadow:0 6px 20px #64b5f680,0 2px 12px #0000004d}.dive-mode-indicator{position:absolute;top:20px;right:20px;z-index:15;background:#64b5f61a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(100,181,246,.3);border-radius:12px;padding:8px 16px;font-size:12px;font-weight:600;color:#64b5f6;text-transform:uppercase;letter-spacing:.5px;opacity:0;transform:translateY(-10px);transition:all .3s ease}.dive-mode-indicator.active{opacity:1;transform:translateY(0)}.survey-mode-indicator{position:absolute;top:20px;right:20px;z-index:15;background:#4caf501a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(76,175,80,.3);border-radius:12px;padding:8px 16px;font-size:12px;font-weight:600;color:#4caf50;text-transform:uppercase;letter-spacing:.5px;opacity:0;transform:translateY(-10px);transition:all .3s ease}.survey-mode-indicator.active{opacity:1;transform:translateY(0)}.dive-control-panel{position:absolute;top:20px;right:20px;z-index:10;background:#ffffff14;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:20px;min-width:220px;box-shadow:0 8px 32px #0000004d}.dive-control-title{color:#64b5f6;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-align:center;margin-bottom:8px}@keyframes diveTransition{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes surveyTransition{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.dive-mode-active .dive-control-panel{animation:diveTransition .3s ease-out}.survey-mode-active .dive-control-panel{animation:surveyTransition .3s ease-out}.measurement-panel{position:absolute;bottom:20px;right:20px;background:#ffffff0f;color:#ffffffe6;padding:12px 16px;border-radius:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:14px;font-weight:500;z-index:100;cursor:pointer;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .4s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;min-width:100px;text-align:center;box-shadow:0 2px 8px #00000026}.measurement-panel:hover{background:#ffffff1a;border-color:#fff3;color:#fff;transform:scale(1.02);box-shadow:0 4px 16px #0003}.measurement-panel .disabled{color:#fff6;border-color:#ffffff0d;background:#ffffff05}.measurement-panel .active{color:#4ade80;border-color:#4ade804d;background:#4ade801a;box-shadow:0 0 20px #4ade801a}.measurement-panel .measured{color:#60a5fa;border-color:#60a5fa4d;background:#60a5fa1a;box-shadow:0 0 20px #60a5fa1a}.measurement-panel.light-theme{background:#000c;color:#fffffff2;border:1px solid rgba(0,0,0,.2);box-shadow:0 2px 12px #00000040}.measurement-panel.light-theme:hover{background:#000000e6;border-color:#0000004d;color:#fff;transform:scale(1.02);box-shadow:0 4px 20px #00000059}.measurement-panel.light-theme.disabled{color:#ffffff80;border-color:#0000001a;background:#0009}.measurement-panel.light-theme.active{color:#10b981;border-color:#10b98166;background:#000000d9;box-shadow:0 0 24px #10b98133}.measurement-panel.light-theme.measured{color:#3b82f6;border-color:#3b82f666;background:#000000d9;box-shadow:0 0 24px #3b82f633}.vr-comfort-glyph{position:absolute;width:40px;height:40px;border-radius:50%;background:#0009;border:2px solid #666;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-size:20px;z-index:10000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:manipulation;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.vr-comfort-glyph:hover{transform:scale(1.1);background:#000c}.vr-comfort-glyph:focus{outline:3px solid #4ade80;outline-offset:2px}.vr-comfort-glyph.comfort-off{color:#666;border-color:#666;background:#0009;box-shadow:none}.vr-comfort-glyph.comfort-on{color:#4ade80;border-color:#4ade80;background:#4ade801a;box-shadow:0 0 20px #4ade804d}.vr-comfort-glyph.position-bottom-right{bottom:var(--vr-comfort-offset-y, 70px);right:var(--vr-comfort-offset-x, 20px)}.vr-comfort-glyph.position-bottom-left{bottom:var(--vr-comfort-offset-y, 70px);left:var(--vr-comfort-offset-x, 20px)}.vr-comfort-glyph.position-top-right{top:var(--vr-comfort-offset-y, 20px);right:var(--vr-comfort-offset-x, 260px)}.vr-comfort-glyph.position-top-left{top:var(--vr-comfort-offset-y, 20px);left:var(--vr-comfort-offset-x, 20px)}.vr-mode *{box-sizing:border-box!important}.vr-mode body{background:#000!important;color:#fff!important;margin:0!important;padding:0!important}.vr-mode,.vr-mode *{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;line-height:1.5!important}.vr-mode input,.vr-mode select,.vr-mode button,.vr-mode textarea{font-size:18px!important;padding:12px 16px!important;border-radius:6px!important;border:2px solid #4a9eff!important;background:#101828f2!important;color:#fff!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;transition:all .2s ease!important}.vr-mode input:focus,.vr-mode select:focus,.vr-mode button:focus,.vr-mode textarea:focus{outline:none!important;border-color:#60a5fa!important;box-shadow:0 0 0 3px #60a5fa4d!important;background:#101828!important}.vr-mode button:hover{background:#4a9eff33!important;border-color:#60a5fa!important}.vr-mode .vr-comfort-glyph{background:#000000e6!important;border-width:3px!important;-webkit-backdrop-filter:blur(15px)!important;backdrop-filter:blur(15px)!important;font-size:22px!important;width:44px!important;height:44px!important}.vr-mode .vr-comfort-glyph:hover{transform:scale(1.15)!important;background:#000000f2!important}.vr-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;padding:12px 20px;font-size:16px;font-weight:700;font-family:system-ui,-apple-system,sans-serif;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;-webkit-user-select:none;user-select:none;touch-action:manipulation}.vr-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.vr-button:focus{outline:3px solid #4ade80;outline-offset:2px}.vr-button:active{transform:translateY(0)}.vr-mode .vr-button{font-size:18px!important;padding:14px 24px!important;border-radius:10px!important}.vr-status{position:fixed;bottom:20px;right:20px;background:#000c;color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;font-family:system-ui,-apple-system,sans-serif;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;transition:all .3s ease}.vr-status.vr-active{background:#4ade8033;border:2px solid #4ade80;color:#4ade80}.vr-mode .vr-status{font-size:16px!important;padding:10px 16px!important;border-radius:8px!important}.vr-panel{background:#101828f2;border:2px solid #374151;border-radius:12px;padding:20px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 8px 32px #0006}.vr-mode .vr-panel{border-width:3px!important;padding:24px!important;border-radius:16px!important}.vr-panel h1,.vr-panel h2,.vr-panel h3{margin-top:0;color:#f9fafb}.vr-panel p{color:#d1d5db;line-height:1.6}@media (max-width: 768px){.vr-comfort-glyph{width:48px!important;height:48px!important;font-size:24px!important}.vr-comfort-glyph.position-bottom-right{bottom:var(--vr-comfort-offset-y-mobile, 80px);right:var(--vr-comfort-offset-x-mobile, 15px)}.vr-comfort-glyph.position-bottom-left{bottom:var(--vr-comfort-offset-y-mobile, 80px);left:var(--vr-comfort-offset-x-mobile, 15px)}.vr-button{font-size:18px!important;padding:14px 24px!important}.vr-status{font-size:16px!important;padding:10px 16px!important}.vr-panel{padding:16px!important;margin:10px!important}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.vr-comfort-glyph{border-width:2.5px}.vr-mode .vr-comfort-glyph{border-width:3.5px!important}.vr-button{box-shadow:0 6px 20px #00000040}}.vr-mode-active{--vr-css-loaded: true;opacity:.999}.vr-hidden{display:none!important}.vr-visible{display:block!important}.vr-flex{display:flex!important}.vr-center{align-items:center!important;justify-content:center!important}.vr-text-center{text-align:center!important}.vr-text-white{color:#fff!important}.vr-bg-dark{background:#000c!important}.vr-rounded{border-radius:8px!important}.vr-shadow{box-shadow:0 4px 15px #0003!important}
|