diff --git a/README.md b/README.md index e9209cb..4f69620 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ When the page loads, the media is embedded normally with an entry button over it - Control icons are embedded from [Lucide](https://lucide.dev/) SVG definitions, so no PNG icon assets are required. ## Demo -Run `npm run build`, then open this repository's `index.html` through a local web server and switch `data-projection` between `vr180` and `plane` to test both modes. +Run `npm run build`, then open this repository's `index.html` through a local web server. The index page links to focused test pages for flat 3D image, VR180 3D image, flat 3D video, and VR180 3D video. For local experimentation, run: diff --git a/demo.css b/demo.css new file mode 100644 index 0000000..4599998 --- /dev/null +++ b/demo.css @@ -0,0 +1,139 @@ +:root { + color-scheme: light; + font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.5; + color: #151515; + background: #f4f4f2; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +} + +a { + color: inherit; +} + +.demo-page { + min-height: 100vh; + padding: 32px; +} + +.demo-shell { + width: min(100%, 1040px); + margin: 0 auto; +} + +.demo-topbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + margin-bottom: 24px; +} + +.demo-brand { + margin: 0; + font-size: 2.5rem; + line-height: 1; +} + +.demo-kicker { + margin: 8px 0 0; + max-width: 700px; + color: #555; + font-size: 1rem; +} + +.demo-back { + display: inline-flex; + align-items: center; + min-height: 40px; + padding: 0 14px; + border: 1px solid #c7c7c0; + border-radius: 6px; + background: #fff; + text-decoration: none; + font-weight: 650; +} + +.demo-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 16px; + margin-top: 28px; +} + +.demo-card { + display: grid; + gap: 10px; + min-height: 150px; + padding: 18px; + border: 1px solid #d5d5cf; + border-radius: 8px; + background: #fff; + text-decoration: none; + transition: transform 0.15s ease, border-color 0.15s ease; +} + +.demo-card:hover { + transform: translateY(-2px); + border-color: #83837a; +} + +.demo-card h2 { + margin: 0; + font-size: 1.125rem; +} + +.demo-card p, +.demo-meta { + margin: 0; + color: #5c5c55; +} + +.demo-meta { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: auto; + color: #66665f; + font-size: 0.875rem; + font-weight: 650; +} + +.demo-player { + display: grid; + gap: 14px; +} + +.demo-player-frame { + width: min(100%, 960px); +} + +.demo-note { + max-width: 760px; + margin: 18px 0 0; + color: #606058; + font-size: 0.95rem; +} + +@media (max-width: 640px) { + .demo-page { + padding: 20px; + } + + .demo-topbar { + align-items: flex-start; + flex-direction: column; + } + + .demo-brand { + font-size: 2rem; + } +} diff --git a/index.html b/index.html index b118586..f60822f 100644 --- a/index.html +++ b/index.html @@ -3,29 +3,44 @@ - VR Web Player - - + VR Web Player Test Pages + -
-

VR Web Player

-

This is a web-based player for side-by-side stereoscopic media.

-
- Demo SBS image +
+
+
+
+

VR Web Player Tests

+

Open a focused page for each media and projection combination.

+
+
+ + + +

Image tests use media/169_3d_test.png. Video tests expect media/sbs-video.mp4.

- diff --git a/test-3d-image.html b/test-3d-image.html new file mode 100644 index 0000000..591fec7 --- /dev/null +++ b/test-3d-image.html @@ -0,0 +1,28 @@ + + + + + + 3D Image Test + + + + +
+
+
+
+

3D Image

+

Projection: plane. Media: side-by-side image.

+
+ Back +
+ +
+ Demo SBS image +
+
+
+ + + diff --git a/test-3d-video.html b/test-3d-video.html new file mode 100644 index 0000000..2087902 --- /dev/null +++ b/test-3d-video.html @@ -0,0 +1,30 @@ + + + + + + 3D Video Test + + + + +
+
+
+
+

3D Video

+

Projection: plane. Media: side-by-side video.

+
+ Back +
+ +
+ +
+
+
+ + + diff --git a/test-vr180-3d-image.html b/test-vr180-3d-image.html new file mode 100644 index 0000000..21a8a6b --- /dev/null +++ b/test-vr180-3d-image.html @@ -0,0 +1,28 @@ + + + + + + VR180 3D Image Test + + + + +
+
+
+
+

VR180 3D Image

+

Projection: VR180. Media: side-by-side image.

+
+ Back +
+ +
+ Demo VR180 SBS image +
+
+
+ + + diff --git a/test-vr180-3d-video.html b/test-vr180-3d-video.html new file mode 100644 index 0000000..f2b394a --- /dev/null +++ b/test-vr180-3d-video.html @@ -0,0 +1,30 @@ + + + + + + VR180 3D Video Test + + + + +
+
+
+
+

VR180 3D Video

+

Projection: VR180. Media: side-by-side video.

+
+ Back +
+ +
+ +
+
+
+ + +