Compare commits
No commits in common. "very-old" and "master" have entirely different histories.
56
.github/workflows/sitesmith.yml
vendored
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
# Simple workflow for deploying static content to GitHub Pages
|
||||||
|
name: Deploy static content to Pages
|
||||||
|
|
||||||
|
on:
|
||||||
|
# Runs on pushes targeting the default branch
|
||||||
|
push:
|
||||||
|
branches: ["master"]
|
||||||
|
|
||||||
|
# Allows you to run this workflow manually from the Actions tab
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
pages: write
|
||||||
|
id-token: write
|
||||||
|
|
||||||
|
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
|
||||||
|
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
|
||||||
|
concurrency:
|
||||||
|
group: "pages"
|
||||||
|
cancel-in-progress: false
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
# Build job
|
||||||
|
build:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
env:
|
||||||
|
MDBOOK_VERSION: 0.1.3
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
- name: Install sitesmith
|
||||||
|
run: |
|
||||||
|
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf -y | sh
|
||||||
|
rustup update
|
||||||
|
cargo install --version ${MDBOOK_VERSION} sitesmith
|
||||||
|
- name: Setup Pages
|
||||||
|
id: pages
|
||||||
|
uses: actions/configure-pages@v5
|
||||||
|
- name: Build with sitesmith
|
||||||
|
run: sitesmith --projects ./gen/projects.json --work ./gen/work.json --template ./gen/template.html --output index.html
|
||||||
|
- name: Upload artifact
|
||||||
|
uses: actions/upload-pages-artifact@v3
|
||||||
|
with:
|
||||||
|
path: ./
|
||||||
|
|
||||||
|
deploy:
|
||||||
|
environment:
|
||||||
|
name: github-pages
|
||||||
|
url: ${{ steps.deployment.outputs.page_url }}
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
needs: build
|
||||||
|
steps:
|
||||||
|
- name: Deploy to GitHub Pages
|
||||||
|
id: deployment
|
||||||
|
uses: actions/deploy-pages@v4
|
||||||
104
.gitignore
vendored
|
|
@ -1,104 +0,0 @@
|
||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
|
||||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
|
||||||
|
|
||||||
# Runtime data
|
|
||||||
pids
|
|
||||||
*.pid
|
|
||||||
*.seed
|
|
||||||
*.pid.lock
|
|
||||||
|
|
||||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
|
||||||
lib-cov
|
|
||||||
|
|
||||||
# Coverage directory used by tools like istanbul
|
|
||||||
coverage
|
|
||||||
*.lcov
|
|
||||||
|
|
||||||
# nyc test coverage
|
|
||||||
.nyc_output
|
|
||||||
|
|
||||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
|
||||||
.grunt
|
|
||||||
|
|
||||||
# Bower dependency directory (https://bower.io/)
|
|
||||||
bower_components
|
|
||||||
|
|
||||||
# node-waf configuration
|
|
||||||
.lock-wscript
|
|
||||||
|
|
||||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
|
||||||
build/Release
|
|
||||||
|
|
||||||
# Dependency directories
|
|
||||||
node_modules/
|
|
||||||
jspm_packages/
|
|
||||||
|
|
||||||
# TypeScript v1 declaration files
|
|
||||||
typings/
|
|
||||||
|
|
||||||
# TypeScript cache
|
|
||||||
*.tsbuildinfo
|
|
||||||
|
|
||||||
# Optional npm cache directory
|
|
||||||
.npm
|
|
||||||
|
|
||||||
# Optional eslint cache
|
|
||||||
.eslintcache
|
|
||||||
|
|
||||||
# Microbundle cache
|
|
||||||
.rpt2_cache/
|
|
||||||
.rts2_cache_cjs/
|
|
||||||
.rts2_cache_es/
|
|
||||||
.rts2_cache_umd/
|
|
||||||
|
|
||||||
# Optional REPL history
|
|
||||||
.node_repl_history
|
|
||||||
|
|
||||||
# Output of 'npm pack'
|
|
||||||
*.tgz
|
|
||||||
|
|
||||||
# Yarn Integrity file
|
|
||||||
.yarn-integrity
|
|
||||||
|
|
||||||
# dotenv environment variables file
|
|
||||||
.env
|
|
||||||
.env.test
|
|
||||||
|
|
||||||
# parcel-bundler cache (https://parceljs.org/)
|
|
||||||
.cache
|
|
||||||
|
|
||||||
# Next.js build output
|
|
||||||
.next
|
|
||||||
|
|
||||||
# Nuxt.js build / generate output
|
|
||||||
.nuxt
|
|
||||||
dist
|
|
||||||
|
|
||||||
# Gatsby files
|
|
||||||
.cache/
|
|
||||||
# Comment in the public line in if your project uses Gatsby and *not* Next.js
|
|
||||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
|
||||||
# public
|
|
||||||
|
|
||||||
# vuepress build output
|
|
||||||
.vuepress/dist
|
|
||||||
|
|
||||||
# Serverless directories
|
|
||||||
.serverless/
|
|
||||||
|
|
||||||
# FuseBox cache
|
|
||||||
.fusebox/
|
|
||||||
|
|
||||||
# DynamoDB Local files
|
|
||||||
.dynamodb/
|
|
||||||
|
|
||||||
# TernJS port file
|
|
||||||
.tern-port
|
|
||||||
3
.gitmodules
vendored
|
|
@ -1,3 +0,0 @@
|
||||||
[submodule "dlss"]
|
|
||||||
path = dlss
|
|
||||||
url = https://github.com/BuyMyMojo/dlss-versions
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
body{
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<table">
|
|
||||||
<tr>
|
|
||||||
<td><img src="./images/FSRoff-cropped.jpg"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><img src="./images/FSRoff.png"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><img src="./images/FSRon-cropped.jpg"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><img src="./images/FSRon.png"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><img src="./images/FullRes-cropped.jpg"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><img src="./images/FullRes.png"></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
Before Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 6.4 MiB |
|
Before Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 8.1 MiB |
|
Before Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 7.2 MiB |
|
|
@ -1,18 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Video test
|
|
||||||
</title>
|
|
||||||
<style>
|
|
||||||
body{
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div style="position: center; padding-top: 56.25%;"><iframe src="https://iframe.videodelivery.net/e38e9908b0866c26bd444a9d7aa0483c?preload=true" style="border: none; position: absolute; top: 0; left: 0; height: 720px; width: 1280px;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
BIN
DLSS_2.0.png
|
Before Width: | Height: | Size: 1.9 MiB |
|
|
@ -1,437 +0,0 @@
|
||||||
var APP_DATA = {
|
|
||||||
"scenes": [
|
|
||||||
{
|
|
||||||
"id": "0-agreatwitcherview1",
|
|
||||||
"name": "AGreatWitcherView1",
|
|
||||||
"levels": [
|
|
||||||
{
|
|
||||||
"tileSize": 256,
|
|
||||||
"size": 256,
|
|
||||||
"fallbackOnly": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 512
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 1024
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 2048
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"faceSize": 2048,
|
|
||||||
"initialViewParameters": {
|
|
||||||
"pitch": 0,
|
|
||||||
"yaw": 0,
|
|
||||||
"fov": 1.5707963267948966
|
|
||||||
},
|
|
||||||
"linkHotspots": [
|
|
||||||
{
|
|
||||||
"yaw": -0.31915087930061503,
|
|
||||||
"pitch": -0.1548990702370716,
|
|
||||||
"rotation": 0,
|
|
||||||
"target": "1-agreatwitcherview2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"yaw": -2.307842944507934,
|
|
||||||
"pitch": 0.34069758877293665,
|
|
||||||
"rotation": 0,
|
|
||||||
"target": "2-agreatwitcherview3"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"infoHotspots": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "1-agreatwitcherview2",
|
|
||||||
"name": "AGreatWitcherView2",
|
|
||||||
"levels": [
|
|
||||||
{
|
|
||||||
"tileSize": 256,
|
|
||||||
"size": 256,
|
|
||||||
"fallbackOnly": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 512
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 1024
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 2048
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"faceSize": 2048,
|
|
||||||
"initialViewParameters": {
|
|
||||||
"pitch": 0,
|
|
||||||
"yaw": 0,
|
|
||||||
"fov": 1.5707963267948966
|
|
||||||
},
|
|
||||||
"linkHotspots": [
|
|
||||||
{
|
|
||||||
"yaw": -2.9619540641615245,
|
|
||||||
"pitch": -0.07391349803553027,
|
|
||||||
"rotation": 0,
|
|
||||||
"target": "0-agreatwitcherview1"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"infoHotspots": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "2-agreatwitcherview3",
|
|
||||||
"name": "AGreatWitcherView3",
|
|
||||||
"levels": [
|
|
||||||
{
|
|
||||||
"tileSize": 256,
|
|
||||||
"size": 256,
|
|
||||||
"fallbackOnly": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 512
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 1024
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 2048
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"faceSize": 2048,
|
|
||||||
"initialViewParameters": {
|
|
||||||
"pitch": 0,
|
|
||||||
"yaw": 0,
|
|
||||||
"fov": 1.5707963267948966
|
|
||||||
},
|
|
||||||
"linkHotspots": [
|
|
||||||
{
|
|
||||||
"yaw": 1.1871219651316771,
|
|
||||||
"pitch": 0.217046025952655,
|
|
||||||
"rotation": 0,
|
|
||||||
"target": "0-agreatwitcherview1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"yaw": -3.07791414563048,
|
|
||||||
"pitch": 0.392697091904159,
|
|
||||||
"rotation": 0,
|
|
||||||
"target": "4-fancywitcherwindow1"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"infoHotspots": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "3-cultcavewitcher3",
|
|
||||||
"name": "CultCaveWitcher3",
|
|
||||||
"levels": [
|
|
||||||
{
|
|
||||||
"tileSize": 256,
|
|
||||||
"size": 256,
|
|
||||||
"fallbackOnly": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 512
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 1024
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 2048
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"faceSize": 2048,
|
|
||||||
"initialViewParameters": {
|
|
||||||
"pitch": 0,
|
|
||||||
"yaw": 0,
|
|
||||||
"fov": 1.5707963267948966
|
|
||||||
},
|
|
||||||
"linkHotspots": [],
|
|
||||||
"infoHotspots": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "4-fancywitcherwindow1",
|
|
||||||
"name": "FancyWitcherWindow1",
|
|
||||||
"levels": [
|
|
||||||
{
|
|
||||||
"tileSize": 256,
|
|
||||||
"size": 256,
|
|
||||||
"fallbackOnly": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 512
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 1024
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 2048
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"faceSize": 2048,
|
|
||||||
"initialViewParameters": {
|
|
||||||
"pitch": 0,
|
|
||||||
"yaw": 0,
|
|
||||||
"fov": 1.5707963267948966
|
|
||||||
},
|
|
||||||
"linkHotspots": [
|
|
||||||
{
|
|
||||||
"yaw": -3.0707449229600225,
|
|
||||||
"pitch": 0.35346957822890523,
|
|
||||||
"rotation": 0,
|
|
||||||
"target": "5-fancywitcherwindow2"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"infoHotspots": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "5-fancywitcherwindow2",
|
|
||||||
"name": "FancyWitcherWindow2",
|
|
||||||
"levels": [
|
|
||||||
{
|
|
||||||
"tileSize": 256,
|
|
||||||
"size": 256,
|
|
||||||
"fallbackOnly": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 512
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 1024
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 2048
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"faceSize": 2048,
|
|
||||||
"initialViewParameters": {
|
|
||||||
"pitch": 0,
|
|
||||||
"yaw": 0,
|
|
||||||
"fov": 1.5707963267948966
|
|
||||||
},
|
|
||||||
"linkHotspots": [
|
|
||||||
{
|
|
||||||
"yaw": 0.06317041379698018,
|
|
||||||
"pitch": -0.028068663326846988,
|
|
||||||
"rotation": 0,
|
|
||||||
"target": "4-fancywitcherwindow1"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"infoHotspots": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "6-agreatwitcherview3-restyle",
|
|
||||||
"name": "AGreatWitcherView3-restyle",
|
|
||||||
"levels": [
|
|
||||||
{
|
|
||||||
"tileSize": 256,
|
|
||||||
"size": 256,
|
|
||||||
"fallbackOnly": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 512
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"faceSize": 384,
|
|
||||||
"initialViewParameters": {
|
|
||||||
"yaw": -0.05038770559617056,
|
|
||||||
"pitch": -0.03205434549538211,
|
|
||||||
"fov": 1.3378744097411812
|
|
||||||
},
|
|
||||||
"linkHotspots": [],
|
|
||||||
"infoHotspots": [
|
|
||||||
{
|
|
||||||
"yaw": -0.06553892778552317,
|
|
||||||
"pitch": -0.06841864886111892,
|
|
||||||
"title": "Info",
|
|
||||||
"text": "An earlier image but put through an AI"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "7-4biomes",
|
|
||||||
"name": "4biomes",
|
|
||||||
"levels": [
|
|
||||||
{
|
|
||||||
"tileSize": 256,
|
|
||||||
"size": 256,
|
|
||||||
"fallbackOnly": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 512
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 1024
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 2048
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"faceSize": 2048,
|
|
||||||
"initialViewParameters": {
|
|
||||||
"pitch": 0,
|
|
||||||
"yaw": 0,
|
|
||||||
"fov": 1.5707963267948966
|
|
||||||
},
|
|
||||||
"linkHotspots": [],
|
|
||||||
"infoHotspots": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "8-airbaloonandlog",
|
|
||||||
"name": "AirbaloonAndLog",
|
|
||||||
"levels": [
|
|
||||||
{
|
|
||||||
"tileSize": 256,
|
|
||||||
"size": 256,
|
|
||||||
"fallbackOnly": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 512
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 1024
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 2048
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 4096
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"faceSize": 4096,
|
|
||||||
"initialViewParameters": {
|
|
||||||
"pitch": 0,
|
|
||||||
"yaw": 0,
|
|
||||||
"fov": 1.5707963267948966
|
|
||||||
},
|
|
||||||
"linkHotspots": [],
|
|
||||||
"infoHotspots": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "9-chestdensity",
|
|
||||||
"name": "ChestDensity",
|
|
||||||
"levels": [
|
|
||||||
{
|
|
||||||
"tileSize": 256,
|
|
||||||
"size": 256,
|
|
||||||
"fallbackOnly": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 512
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 1024
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 2048
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 4096
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"faceSize": 4096,
|
|
||||||
"initialViewParameters": {
|
|
||||||
"pitch": 0,
|
|
||||||
"yaw": 0,
|
|
||||||
"fov": 1.5707963267948966
|
|
||||||
},
|
|
||||||
"linkHotspots": [],
|
|
||||||
"infoHotspots": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "10-coolvillage1",
|
|
||||||
"name": "CoolVillage1",
|
|
||||||
"levels": [
|
|
||||||
{
|
|
||||||
"tileSize": 256,
|
|
||||||
"size": 256,
|
|
||||||
"fallbackOnly": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 512
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 1024
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 2048
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"faceSize": 2048,
|
|
||||||
"initialViewParameters": {
|
|
||||||
"pitch": 0,
|
|
||||||
"yaw": 0,
|
|
||||||
"fov": 1.5707963267948966
|
|
||||||
},
|
|
||||||
"linkHotspots": [],
|
|
||||||
"infoHotspots": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "11-underwatervillage",
|
|
||||||
"name": "UnderwaterVillage",
|
|
||||||
"levels": [
|
|
||||||
{
|
|
||||||
"tileSize": 256,
|
|
||||||
"size": 256,
|
|
||||||
"fallbackOnly": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 512
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 1024
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"tileSize": 512,
|
|
||||||
"size": 2048
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"faceSize": 2048,
|
|
||||||
"initialViewParameters": {
|
|
||||||
"pitch": 0,
|
|
||||||
"yaw": 0,
|
|
||||||
"fov": 1.5707963267948966
|
|
||||||
},
|
|
||||||
"linkHotspots": [],
|
|
||||||
"infoHotspots": []
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"name": "Game 360 Imgaes",
|
|
||||||
"settings": {
|
|
||||||
"mouseViewMode": "drag",
|
|
||||||
"autorotateEnabled": true,
|
|
||||||
"fullscreenButton": true,
|
|
||||||
"viewControlButtons": true
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
Before Width: | Height: | Size: 1 KiB |
|
Before Width: | Height: | Size: 586 B |
|
Before Width: | Height: | Size: 801 B |
|
Before Width: | Height: | Size: 538 B |
|
Before Width: | Height: | Size: 683 B |
|
Before Width: | Height: | Size: 995 B |
|
Before Width: | Height: | Size: 806 B |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 412 B |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 484 B |
|
Before Width: | Height: | Size: 765 B |
|
Before Width: | Height: | Size: 789 B |
|
Before Width: | Height: | Size: 737 B |
|
|
@ -1,131 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Game 360 Imgaes</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
|
|
||||||
<style> @-ms-viewport { width: device-width; } </style>
|
|
||||||
<link rel="stylesheet" href="vendor/reset.min.css">
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
|
|
||||||
<!-- twitter cards -->
|
|
||||||
<meta name="twitter:card" content="summary" />
|
|
||||||
<meta name="twitter:site" content="@OwenQuinlan7" />
|
|
||||||
<meta name="twitter:creator" content="@OwenQuinlan7" />
|
|
||||||
<meta property="og:url" content="https://buymymojo.net/Game%20360%20images/" />
|
|
||||||
<meta property="og:title" content="BuyMyMojo 360 images" />
|
|
||||||
<meta property="og:description" content="Just a collection of 360 images I have." />
|
|
||||||
<meta property="og:image" content="https://buymymojo.net/android-chrome-512x512.png" />
|
|
||||||
|
|
||||||
<!-- Open Graph Markup -->
|
|
||||||
<meta property="og:url" content="https://buymymojo.net/Game%20360%20images/" />
|
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<meta property="og:title" content="BuyMyMojo 360 images" />
|
|
||||||
<meta property="og:description" content="Just a collection of 360 images I have." />
|
|
||||||
<meta property="og:image" content="https://buymymojo.net/android-chrome-512x512.png" />
|
|
||||||
</head>
|
|
||||||
<body class="multiple-scenes view-control-buttons">
|
|
||||||
|
|
||||||
<div id="pano"></div>
|
|
||||||
|
|
||||||
<div id="sceneList">
|
|
||||||
<ul class="scenes">
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="scene" data-id="0-agreatwitcherview1">
|
|
||||||
<li class="text">AGreatWitcherView1</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="scene" data-id="1-agreatwitcherview2">
|
|
||||||
<li class="text">AGreatWitcherView2</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="scene" data-id="2-agreatwitcherview3">
|
|
||||||
<li class="text">AGreatWitcherView3</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="scene" data-id="3-cultcavewitcher3">
|
|
||||||
<li class="text">CultCaveWitcher3</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="scene" data-id="4-fancywitcherwindow1">
|
|
||||||
<li class="text">FancyWitcherWindow1</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="scene" data-id="5-fancywitcherwindow2">
|
|
||||||
<li class="text">FancyWitcherWindow2</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="scene" data-id="6-agreatwitcherview3-restyle">
|
|
||||||
<li class="text">AGreatWitcherView3-restyle</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="scene" data-id="7-4biomes">
|
|
||||||
<li class="text">4biomes</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="scene" data-id="8-airbaloonandlog">
|
|
||||||
<li class="text">AirbaloonAndLog</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="scene" data-id="9-chestdensity">
|
|
||||||
<li class="text">ChestDensity</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="scene" data-id="10-coolvillage1">
|
|
||||||
<li class="text">CoolVillage1</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="scene" data-id="11-underwatervillage">
|
|
||||||
<li class="text">UnderwaterVillage</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="titleBar">
|
|
||||||
<h1 class="sceneName"></h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" id="autorotateToggle">
|
|
||||||
<img class="icon off" src="img/play.png">
|
|
||||||
<img class="icon on" src="img/pause.png">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" id="fullscreenToggle">
|
|
||||||
<img class="icon off" src="img/fullscreen.png">
|
|
||||||
<img class="icon on" src="img/windowed.png">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" id="sceneListToggle">
|
|
||||||
<img class="icon off" src="img/expand.png">
|
|
||||||
<img class="icon on" src="img/collapse.png">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" id="viewUp" class="viewControlButton viewControlButton-1">
|
|
||||||
<img class="icon" src="img/up.png">
|
|
||||||
</a>
|
|
||||||
<a href="javascript:void(0)" id="viewDown" class="viewControlButton viewControlButton-2">
|
|
||||||
<img class="icon" src="img/down.png">
|
|
||||||
</a>
|
|
||||||
<a href="javascript:void(0)" id="viewLeft" class="viewControlButton viewControlButton-3">
|
|
||||||
<img class="icon" src="img/left.png">
|
|
||||||
</a>
|
|
||||||
<a href="javascript:void(0)" id="viewRight" class="viewControlButton viewControlButton-4">
|
|
||||||
<img class="icon" src="img/right.png">
|
|
||||||
</a>
|
|
||||||
<a href="javascript:void(0)" id="viewIn" class="viewControlButton viewControlButton-5">
|
|
||||||
<img class="icon" src="img/plus.png">
|
|
||||||
</a>
|
|
||||||
<a href="javascript:void(0)" id="viewOut" class="viewControlButton viewControlButton-6">
|
|
||||||
<img class="icon" src="img/minus.png">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<script src="vendor/screenfull.min.js" ></script>
|
|
||||||
<script src="vendor/bowser.min.js" ></script>
|
|
||||||
<script src="vendor/marzipano.js" ></script>
|
|
||||||
|
|
||||||
<script src="data.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,392 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright 2016 Google Inc. All rights reserved.
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
var Marzipano = window.Marzipano;
|
|
||||||
var bowser = window.bowser;
|
|
||||||
var screenfull = window.screenfull;
|
|
||||||
var data = window.APP_DATA;
|
|
||||||
|
|
||||||
// Grab elements from DOM.
|
|
||||||
var panoElement = document.querySelector('#pano');
|
|
||||||
var sceneNameElement = document.querySelector('#titleBar .sceneName');
|
|
||||||
var sceneListElement = document.querySelector('#sceneList');
|
|
||||||
var sceneElements = document.querySelectorAll('#sceneList .scene');
|
|
||||||
var sceneListToggleElement = document.querySelector('#sceneListToggle');
|
|
||||||
var autorotateToggleElement = document.querySelector('#autorotateToggle');
|
|
||||||
var fullscreenToggleElement = document.querySelector('#fullscreenToggle');
|
|
||||||
|
|
||||||
// Detect desktop or mobile mode.
|
|
||||||
if (window.matchMedia) {
|
|
||||||
var setMode = function() {
|
|
||||||
if (mql.matches) {
|
|
||||||
document.body.classList.remove('desktop');
|
|
||||||
document.body.classList.add('mobile');
|
|
||||||
} else {
|
|
||||||
document.body.classList.remove('mobile');
|
|
||||||
document.body.classList.add('desktop');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var mql = matchMedia("(max-width: 500px), (max-height: 500px)");
|
|
||||||
setMode();
|
|
||||||
mql.addListener(setMode);
|
|
||||||
} else {
|
|
||||||
document.body.classList.add('desktop');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Detect whether we are on a touch device.
|
|
||||||
document.body.classList.add('no-touch');
|
|
||||||
window.addEventListener('touchstart', function() {
|
|
||||||
document.body.classList.remove('no-touch');
|
|
||||||
document.body.classList.add('touch');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Use tooltip fallback mode on IE < 11.
|
|
||||||
if (bowser.msie && parseFloat(bowser.version) < 11) {
|
|
||||||
document.body.classList.add('tooltip-fallback');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Viewer options.
|
|
||||||
var viewerOpts = {
|
|
||||||
controls: {
|
|
||||||
mouseViewMode: data.settings.mouseViewMode
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Initialize viewer.
|
|
||||||
var viewer = new Marzipano.Viewer(panoElement, viewerOpts);
|
|
||||||
|
|
||||||
// Create scenes.
|
|
||||||
var scenes = data.scenes.map(function(data) {
|
|
||||||
var urlPrefix = "tiles";
|
|
||||||
var source = Marzipano.ImageUrlSource.fromString(
|
|
||||||
urlPrefix + "/" + data.id + "/{z}/{f}/{y}/{x}.jpg",
|
|
||||||
{ cubeMapPreviewUrl: urlPrefix + "/" + data.id + "/preview.jpg" });
|
|
||||||
var geometry = new Marzipano.CubeGeometry(data.levels);
|
|
||||||
|
|
||||||
var limiter = Marzipano.RectilinearView.limit.traditional(data.faceSize, 100*Math.PI/180, 120*Math.PI/180);
|
|
||||||
var view = new Marzipano.RectilinearView(data.initialViewParameters, limiter);
|
|
||||||
|
|
||||||
var scene = viewer.createScene({
|
|
||||||
source: source,
|
|
||||||
geometry: geometry,
|
|
||||||
view: view,
|
|
||||||
pinFirstLevel: true
|
|
||||||
});
|
|
||||||
|
|
||||||
// Create link hotspots.
|
|
||||||
data.linkHotspots.forEach(function(hotspot) {
|
|
||||||
var element = createLinkHotspotElement(hotspot);
|
|
||||||
scene.hotspotContainer().createHotspot(element, { yaw: hotspot.yaw, pitch: hotspot.pitch });
|
|
||||||
});
|
|
||||||
|
|
||||||
// Create info hotspots.
|
|
||||||
data.infoHotspots.forEach(function(hotspot) {
|
|
||||||
var element = createInfoHotspotElement(hotspot);
|
|
||||||
scene.hotspotContainer().createHotspot(element, { yaw: hotspot.yaw, pitch: hotspot.pitch });
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: data,
|
|
||||||
scene: scene,
|
|
||||||
view: view
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Set up autorotate, if enabled.
|
|
||||||
var autorotate = Marzipano.autorotate({
|
|
||||||
yawSpeed: 0.03,
|
|
||||||
targetPitch: 0,
|
|
||||||
targetFov: Math.PI/2
|
|
||||||
});
|
|
||||||
if (data.settings.autorotateEnabled) {
|
|
||||||
autorotateToggleElement.classList.add('enabled');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set handler for autorotate toggle.
|
|
||||||
autorotateToggleElement.addEventListener('click', toggleAutorotate);
|
|
||||||
|
|
||||||
// Set up fullscreen mode, if supported.
|
|
||||||
if (screenfull.enabled && data.settings.fullscreenButton) {
|
|
||||||
document.body.classList.add('fullscreen-enabled');
|
|
||||||
fullscreenToggleElement.addEventListener('click', function() {
|
|
||||||
screenfull.toggle();
|
|
||||||
});
|
|
||||||
screenfull.on('change', function() {
|
|
||||||
if (screenfull.isFullscreen) {
|
|
||||||
fullscreenToggleElement.classList.add('enabled');
|
|
||||||
} else {
|
|
||||||
fullscreenToggleElement.classList.remove('enabled');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
document.body.classList.add('fullscreen-disabled');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set handler for scene list toggle.
|
|
||||||
sceneListToggleElement.addEventListener('click', toggleSceneList);
|
|
||||||
|
|
||||||
// Start with the scene list open on desktop.
|
|
||||||
if (!document.body.classList.contains('mobile')) {
|
|
||||||
showSceneList();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set handler for scene switch.
|
|
||||||
scenes.forEach(function(scene) {
|
|
||||||
var el = document.querySelector('#sceneList .scene[data-id="' + scene.data.id + '"]');
|
|
||||||
el.addEventListener('click', function() {
|
|
||||||
switchScene(scene);
|
|
||||||
// On mobile, hide scene list after selecting a scene.
|
|
||||||
if (document.body.classList.contains('mobile')) {
|
|
||||||
hideSceneList();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// DOM elements for view controls.
|
|
||||||
var viewUpElement = document.querySelector('#viewUp');
|
|
||||||
var viewDownElement = document.querySelector('#viewDown');
|
|
||||||
var viewLeftElement = document.querySelector('#viewLeft');
|
|
||||||
var viewRightElement = document.querySelector('#viewRight');
|
|
||||||
var viewInElement = document.querySelector('#viewIn');
|
|
||||||
var viewOutElement = document.querySelector('#viewOut');
|
|
||||||
|
|
||||||
// Dynamic parameters for controls.
|
|
||||||
var velocity = 0.7;
|
|
||||||
var friction = 3;
|
|
||||||
|
|
||||||
// Associate view controls with elements.
|
|
||||||
var controls = viewer.controls();
|
|
||||||
controls.registerMethod('upElement', new Marzipano.ElementPressControlMethod(viewUpElement, 'y', -velocity, friction), true);
|
|
||||||
controls.registerMethod('downElement', new Marzipano.ElementPressControlMethod(viewDownElement, 'y', velocity, friction), true);
|
|
||||||
controls.registerMethod('leftElement', new Marzipano.ElementPressControlMethod(viewLeftElement, 'x', -velocity, friction), true);
|
|
||||||
controls.registerMethod('rightElement', new Marzipano.ElementPressControlMethod(viewRightElement, 'x', velocity, friction), true);
|
|
||||||
controls.registerMethod('inElement', new Marzipano.ElementPressControlMethod(viewInElement, 'zoom', -velocity, friction), true);
|
|
||||||
controls.registerMethod('outElement', new Marzipano.ElementPressControlMethod(viewOutElement, 'zoom', velocity, friction), true);
|
|
||||||
|
|
||||||
function sanitize(s) {
|
|
||||||
return s.replace('&', '&').replace('<', '<').replace('>', '>');
|
|
||||||
}
|
|
||||||
|
|
||||||
function switchScene(scene) {
|
|
||||||
stopAutorotate();
|
|
||||||
scene.view.setParameters(scene.data.initialViewParameters);
|
|
||||||
scene.scene.switchTo();
|
|
||||||
startAutorotate();
|
|
||||||
updateSceneName(scene);
|
|
||||||
updateSceneList(scene);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSceneName(scene) {
|
|
||||||
sceneNameElement.innerHTML = sanitize(scene.data.name);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSceneList(scene) {
|
|
||||||
for (var i = 0; i < sceneElements.length; i++) {
|
|
||||||
var el = sceneElements[i];
|
|
||||||
if (el.getAttribute('data-id') === scene.data.id) {
|
|
||||||
el.classList.add('current');
|
|
||||||
} else {
|
|
||||||
el.classList.remove('current');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showSceneList() {
|
|
||||||
sceneListElement.classList.add('enabled');
|
|
||||||
sceneListToggleElement.classList.add('enabled');
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideSceneList() {
|
|
||||||
sceneListElement.classList.remove('enabled');
|
|
||||||
sceneListToggleElement.classList.remove('enabled');
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleSceneList() {
|
|
||||||
sceneListElement.classList.toggle('enabled');
|
|
||||||
sceneListToggleElement.classList.toggle('enabled');
|
|
||||||
}
|
|
||||||
|
|
||||||
function startAutorotate() {
|
|
||||||
if (!autorotateToggleElement.classList.contains('enabled')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
viewer.startMovement(autorotate);
|
|
||||||
viewer.setIdleMovement(3000, autorotate);
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopAutorotate() {
|
|
||||||
viewer.stopMovement();
|
|
||||||
viewer.setIdleMovement(Infinity);
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleAutorotate() {
|
|
||||||
if (autorotateToggleElement.classList.contains('enabled')) {
|
|
||||||
autorotateToggleElement.classList.remove('enabled');
|
|
||||||
stopAutorotate();
|
|
||||||
} else {
|
|
||||||
autorotateToggleElement.classList.add('enabled');
|
|
||||||
startAutorotate();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createLinkHotspotElement(hotspot) {
|
|
||||||
|
|
||||||
// Create wrapper element to hold icon and tooltip.
|
|
||||||
var wrapper = document.createElement('div');
|
|
||||||
wrapper.classList.add('hotspot');
|
|
||||||
wrapper.classList.add('link-hotspot');
|
|
||||||
|
|
||||||
// Create image element.
|
|
||||||
var icon = document.createElement('img');
|
|
||||||
icon.src = 'img/link.png';
|
|
||||||
icon.classList.add('link-hotspot-icon');
|
|
||||||
|
|
||||||
// Set rotation transform.
|
|
||||||
var transformProperties = [ '-ms-transform', '-webkit-transform', 'transform' ];
|
|
||||||
for (var i = 0; i < transformProperties.length; i++) {
|
|
||||||
var property = transformProperties[i];
|
|
||||||
icon.style[property] = 'rotate(' + hotspot.rotation + 'rad)';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add click event handler.
|
|
||||||
wrapper.addEventListener('click', function() {
|
|
||||||
switchScene(findSceneById(hotspot.target));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Prevent touch and scroll events from reaching the parent element.
|
|
||||||
// This prevents the view control logic from interfering with the hotspot.
|
|
||||||
stopTouchAndScrollEventPropagation(wrapper);
|
|
||||||
|
|
||||||
// Create tooltip element.
|
|
||||||
var tooltip = document.createElement('div');
|
|
||||||
tooltip.classList.add('hotspot-tooltip');
|
|
||||||
tooltip.classList.add('link-hotspot-tooltip');
|
|
||||||
tooltip.innerHTML = findSceneDataById(hotspot.target).name;
|
|
||||||
|
|
||||||
wrapper.appendChild(icon);
|
|
||||||
wrapper.appendChild(tooltip);
|
|
||||||
|
|
||||||
return wrapper;
|
|
||||||
}
|
|
||||||
|
|
||||||
function createInfoHotspotElement(hotspot) {
|
|
||||||
|
|
||||||
// Create wrapper element to hold icon and tooltip.
|
|
||||||
var wrapper = document.createElement('div');
|
|
||||||
wrapper.classList.add('hotspot');
|
|
||||||
wrapper.classList.add('info-hotspot');
|
|
||||||
|
|
||||||
// Create hotspot/tooltip header.
|
|
||||||
var header = document.createElement('div');
|
|
||||||
header.classList.add('info-hotspot-header');
|
|
||||||
|
|
||||||
// Create image element.
|
|
||||||
var iconWrapper = document.createElement('div');
|
|
||||||
iconWrapper.classList.add('info-hotspot-icon-wrapper');
|
|
||||||
var icon = document.createElement('img');
|
|
||||||
icon.src = 'img/info.png';
|
|
||||||
icon.classList.add('info-hotspot-icon');
|
|
||||||
iconWrapper.appendChild(icon);
|
|
||||||
|
|
||||||
// Create title element.
|
|
||||||
var titleWrapper = document.createElement('div');
|
|
||||||
titleWrapper.classList.add('info-hotspot-title-wrapper');
|
|
||||||
var title = document.createElement('div');
|
|
||||||
title.classList.add('info-hotspot-title');
|
|
||||||
title.innerHTML = hotspot.title;
|
|
||||||
titleWrapper.appendChild(title);
|
|
||||||
|
|
||||||
// Create close element.
|
|
||||||
var closeWrapper = document.createElement('div');
|
|
||||||
closeWrapper.classList.add('info-hotspot-close-wrapper');
|
|
||||||
var closeIcon = document.createElement('img');
|
|
||||||
closeIcon.src = 'img/close.png';
|
|
||||||
closeIcon.classList.add('info-hotspot-close-icon');
|
|
||||||
closeWrapper.appendChild(closeIcon);
|
|
||||||
|
|
||||||
// Construct header element.
|
|
||||||
header.appendChild(iconWrapper);
|
|
||||||
header.appendChild(titleWrapper);
|
|
||||||
header.appendChild(closeWrapper);
|
|
||||||
|
|
||||||
// Create text element.
|
|
||||||
var text = document.createElement('div');
|
|
||||||
text.classList.add('info-hotspot-text');
|
|
||||||
text.innerHTML = hotspot.text;
|
|
||||||
|
|
||||||
// Place header and text into wrapper element.
|
|
||||||
wrapper.appendChild(header);
|
|
||||||
wrapper.appendChild(text);
|
|
||||||
|
|
||||||
// Create a modal for the hotspot content to appear on mobile mode.
|
|
||||||
var modal = document.createElement('div');
|
|
||||||
modal.innerHTML = wrapper.innerHTML;
|
|
||||||
modal.classList.add('info-hotspot-modal');
|
|
||||||
document.body.appendChild(modal);
|
|
||||||
|
|
||||||
var toggle = function() {
|
|
||||||
wrapper.classList.toggle('visible');
|
|
||||||
modal.classList.toggle('visible');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Show content when hotspot is clicked.
|
|
||||||
wrapper.querySelector('.info-hotspot-header').addEventListener('click', toggle);
|
|
||||||
|
|
||||||
// Hide content when close icon is clicked.
|
|
||||||
modal.querySelector('.info-hotspot-close-wrapper').addEventListener('click', toggle);
|
|
||||||
|
|
||||||
// Prevent touch and scroll events from reaching the parent element.
|
|
||||||
// This prevents the view control logic from interfering with the hotspot.
|
|
||||||
stopTouchAndScrollEventPropagation(wrapper);
|
|
||||||
|
|
||||||
return wrapper;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Prevent touch and scroll events from reaching the parent element.
|
|
||||||
function stopTouchAndScrollEventPropagation(element, eventList) {
|
|
||||||
var eventList = [ 'touchstart', 'touchmove', 'touchend', 'touchcancel',
|
|
||||||
'wheel', 'mousewheel' ];
|
|
||||||
for (var i = 0; i < eventList.length; i++) {
|
|
||||||
element.addEventListener(eventList[i], function(event) {
|
|
||||||
event.stopPropagation();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function findSceneById(id) {
|
|
||||||
for (var i = 0; i < scenes.length; i++) {
|
|
||||||
if (scenes[i].data.id === id) {
|
|
||||||
return scenes[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function findSceneDataById(id) {
|
|
||||||
for (var i = 0; i < data.scenes.length; i++) {
|
|
||||||
if (data.scenes[i].id === id) {
|
|
||||||
return data.scenes[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Display the initial scene.
|
|
||||||
switchScene(scenes[0]);
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|
@ -1,830 +0,0 @@
|
||||||
* {
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
-ms-text-size-adjust: none;
|
|
||||||
-moz-text-size-adjust: none;
|
|
||||||
-webkit-text-size-adjust: none;
|
|
||||||
text-size-adjust: none;
|
|
||||||
-webkit-user-drag: none;
|
|
||||||
-webkit-touch-callout: none;
|
|
||||||
-ms-content-zooming: none;
|
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
background-color: #000;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, a:hover, a:active, a:visited {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pano {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titleBar {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 40px;
|
|
||||||
height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #titleBar {
|
|
||||||
height: 50px;
|
|
||||||
right: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If there is a fullscreen button the title bar must make space for it */
|
|
||||||
body.fullscreen-enabled #titleBar {
|
|
||||||
right: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.fullscreen-enabled.mobile #titleBar {
|
|
||||||
right: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If there are multiple scenes the title bar must make space for the scene list toggle */
|
|
||||||
body.multiple-scenes #titleBar {
|
|
||||||
left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.multiple-scenes.mobile #titleBar {
|
|
||||||
left: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titleBar .sceneName {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 5px;
|
|
||||||
background-color: rgb(58,68,84);
|
|
||||||
background-color: rgba(58,68,84,0.8);
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
-moz-user-select: text;
|
|
||||||
-webkit-user-select: text;
|
|
||||||
-ms-user-select: text;
|
|
||||||
user-select: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #titleBar .sceneName {
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#fullscreenToggle {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
padding: 5px;
|
|
||||||
background-color: rgb(103,115,131);
|
|
||||||
background-color: rgba(103,115,131,0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #fullscreenToggle {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.fullscreen-enabled #fullscreenToggle {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#fullscreenToggle .icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #fullscreenToggle .icon {
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#fullscreenToggle .icon.on {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#fullscreenToggle .icon.off {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#fullscreenToggle.enabled .icon.on {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#fullscreenToggle.enabled .icon.off {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#autorotateToggle {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
padding: 5px;
|
|
||||||
background-color: rgb(103,115,131);
|
|
||||||
background-color: rgba(103,115,131,0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #autorotateToggle {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If there is a fullscreen button, autorotate must placed a bit to the left */
|
|
||||||
body.fullscreen-enabled #autorotateToggle {
|
|
||||||
right: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.fullscreen-enabled.mobile #autorotateToggle {
|
|
||||||
right: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#autorotateToggle .icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #autorotateToggle .icon {
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#autorotateToggle .icon.on {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#autorotateToggle .icon.off {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#autorotateToggle.enabled .icon.on {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#autorotateToggle.enabled .icon.off {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneListToggle {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
padding: 5px;
|
|
||||||
background-color: rgb(103,115,131);
|
|
||||||
background-color: rgba(103,115,131,0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #sceneListToggle {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneListToggle .text {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
left: 15px;
|
|
||||||
width: 100%;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneListToggle .icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #sceneListToggle .icon {
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneListToggle .icon.on {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneListToggle .icon.off {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneListToggle.enabled .icon.on {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneListToggle.enabled .icon.off {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneList {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -220px;
|
|
||||||
padding-top: 40px;
|
|
||||||
width: 220px;
|
|
||||||
max-height: 100%;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
margin-left: 0;
|
|
||||||
-webkit-transition: margin-left 0.5s ease-in-out;
|
|
||||||
transition: margin-left 0.5s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #sceneList {
|
|
||||||
padding-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneList .scenes {
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgb(58,68,84);
|
|
||||||
background-color: rgba(58,68,84,0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #sceneList {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: -100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #sceneList.enabled {
|
|
||||||
margin-left: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #sceneList .scenes {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneList.enabled {
|
|
||||||
margin-left: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneList .scene {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #sceneList .scene {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneList .scene .text {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 15px;
|
|
||||||
line-height: 30px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile #sceneList .scene .text {
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-touch #sceneList .scene:hover {
|
|
||||||
background-color: rgb(103,115,131);
|
|
||||||
background-color: rgba(103,115,131,0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
#sceneList .scene.current {
|
|
||||||
background-color: rgb(103,115,131);
|
|
||||||
background-color: rgba(103,115,131,0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide scene list when only a single scene exists */
|
|
||||||
body.single-scene #sceneList, body.single-scene #sceneListToggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Link hotspot */
|
|
||||||
|
|
||||||
.link-hotspot {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
margin-left: -30px;
|
|
||||||
margin-top: -30px;
|
|
||||||
opacity: 0.9;
|
|
||||||
-webkit-transition: opacity 0.2s;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-touch .link-hotspot:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile .link-hotspot {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-hotspot-icon {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-hotspot-tooltip {
|
|
||||||
position: absolute;
|
|
||||||
left: 100%;
|
|
||||||
top: 14px; /* ( 60 - (16 + 2*8) ) / 2 */
|
|
||||||
|
|
||||||
margin-left: 3px;
|
|
||||||
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
max-width: 300px;
|
|
||||||
|
|
||||||
padding: 8px 10px;
|
|
||||||
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
background-color: rgb(58,68,84);
|
|
||||||
background-color: rgba(58,68,84,0.8);
|
|
||||||
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
-ms-transform: translateX(-8px);
|
|
||||||
-webkit-transform: translateX(-8px);
|
|
||||||
transform: translateX(-8px);
|
|
||||||
|
|
||||||
-webkit-transition: -ms-transform 0.3s,
|
|
||||||
-webkit-transform 0.3s,
|
|
||||||
transform 0.3s,
|
|
||||||
opacity 0.3s;
|
|
||||||
transition: -ms-transform 0.3s,
|
|
||||||
-webkit-transform 0.3s,
|
|
||||||
transform 0.3s,
|
|
||||||
opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile .link-hotspot {
|
|
||||||
top: 19px; /* ( 70 - (16 + 2*8) ) / 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-touch .link-hotspot:hover .link-hotspot-tooltip {
|
|
||||||
opacity: 1;
|
|
||||||
-ms-transform: translateX(0);
|
|
||||||
-webkit-transform: translateX(0);
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Prevent tooltip from triggering */
|
|
||||||
.link-hotspot-tooltip {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.no-touch .link-hotspot:hover .link-hotspot-tooltip {
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fallback mode without pointer-events (IE8-10) */
|
|
||||||
.tooltip-fallback .link-hotspot-tooltip {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.no-touch .tooltip-fallback .link-hotspot:hover .link-hotspot-tooltip {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Info hotspot */
|
|
||||||
|
|
||||||
.info-hotspot {
|
|
||||||
line-height: 1.2em;
|
|
||||||
opacity: 0.9;
|
|
||||||
-webkit-transition: opacity 0.2s 0.2s;
|
|
||||||
transition: opacity 0.2s 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-touch .info-hotspot:hover {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transition: opacity 0.2s;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot.visible {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot .info-hotspot-header {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 20px;
|
|
||||||
background-color: rgb(103,115,131);
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-transition: width 0.3s ease-in-out 0.5s,
|
|
||||||
border-radius 0.3s ease-in-out 0.5s;
|
|
||||||
transition: width 0.3s ease-in-out 0.5s,
|
|
||||||
border-radius 0.3s ease-in-out 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile .info-hotspot .info-hotspot-header {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desktop.no-touch .info-hotspot .info-hotspot-header:hover {
|
|
||||||
width: 260px;
|
|
||||||
border-radius: 5px;
|
|
||||||
-webkit-transition: width 0.3s ease-in-out,
|
|
||||||
border-radius 0.3s ease-in-out;
|
|
||||||
transition: width 0.3s ease-in-out,
|
|
||||||
border-radius 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desktop .info-hotspot.visible .info-hotspot-header,
|
|
||||||
.desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {
|
|
||||||
width: 260px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
-webkit-transition: width 0.3s ease-in-out,
|
|
||||||
border-radius 0.3s ease-in-out;
|
|
||||||
transition: width 0.3s ease-in-out,
|
|
||||||
border-radius 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot .info-hotspot-icon-wrapper {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile .info-hotspot .info-hotspot-icon-wrapper {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot .info-hotspot-icon {
|
|
||||||
width: 90%;
|
|
||||||
height: 90%;
|
|
||||||
margin: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot .info-hotspot-title-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
left: 40px;
|
|
||||||
top: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 40px;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
-webkit-transition: width 0s 0.4s,
|
|
||||||
padding 0s 0.4s;
|
|
||||||
transition: width 0s 0.4s,
|
|
||||||
padding 0s 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desktop .info-hotspot.visible .info-hotspot-title-wrapper,
|
|
||||||
.desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
|
|
||||||
width: 220px;
|
|
||||||
padding: 0 5px;
|
|
||||||
-webkit-transition: width 0s 0.4s,
|
|
||||||
padding 0s 0.4s;
|
|
||||||
transition: width 0s 0.4s,
|
|
||||||
padding 0s 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot .info-hotspot-title-wrapper:before {
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot .info-hotspot-title {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
-moz-user-select: text;
|
|
||||||
-webkit-user-select: text;
|
|
||||||
-ms-user-select: text;
|
|
||||||
user-select: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot .info-hotspot-close-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
left: 260px;
|
|
||||||
top: 0;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
background-color: rgb(78,88,104);
|
|
||||||
visibility: hidden;
|
|
||||||
-ms-transform: perspective(200px) rotateY(90deg);
|
|
||||||
-webkit-transform: perspective(200px) rotateY(90deg);
|
|
||||||
transform: perspective(200px) rotateY(90deg);
|
|
||||||
-ms-transform-origin: 0 50% 0;
|
|
||||||
-webkit-transform-origin: 0 50% 0;
|
|
||||||
transform-origin: 0 50% 0;
|
|
||||||
-webkit-transition: -ms-transform 0.3s 0.3s,
|
|
||||||
-webkit-transform 0.3s 0.3s,
|
|
||||||
transform 0.3s 0.3s,
|
|
||||||
visibility 0s 0.6s;
|
|
||||||
transition: -ms-transform 0.3s 0.3s,
|
|
||||||
-webkit-transform 0.3s 0.3s,
|
|
||||||
transform 0.3s 0.3s,
|
|
||||||
visibility 0s 0.6s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desktop .info-hotspot.visible .info-hotspot-close-wrapper {
|
|
||||||
visibility: visible;
|
|
||||||
-ms-transform: perspective(200px) rotateY(0deg);
|
|
||||||
-webkit-transform: perspective(200px) rotateY(0deg);
|
|
||||||
transform: perspective(200px) rotateY(0deg);
|
|
||||||
-webkit-transition: -ms-transform 0.3s,
|
|
||||||
-webkit-transform 0.3s,
|
|
||||||
transform 0.3s,
|
|
||||||
visibility 0s 0s;
|
|
||||||
transition: -ms-transform 0.3s,
|
|
||||||
-webkit-transform 0.3s,
|
|
||||||
transform 0.3s,
|
|
||||||
visibility 0s 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot .info-hotspot-close-icon {
|
|
||||||
width: 70%;
|
|
||||||
height: 70%;
|
|
||||||
margin: 15%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot .info-hotspot-text {
|
|
||||||
position: absolute;
|
|
||||||
width: 300px;
|
|
||||||
height: auto;
|
|
||||||
max-height: 200px;
|
|
||||||
top: 40px;
|
|
||||||
left: 0;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(58,68,84);
|
|
||||||
border-bottom-right-radius: 5px;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
overflow-y: auto;
|
|
||||||
visibility: hidden;
|
|
||||||
/* rotate(90deg) causes transition flicker on Firefox 58 */
|
|
||||||
-ms-transform: perspective(200px) rotateX(-89.999deg);
|
|
||||||
-webkit-transform: perspective(200px) rotateX(-89.999deg);
|
|
||||||
transform: perspective(200px) rotateX(-89.999deg);
|
|
||||||
-ms-transform-origin: 50% 0 0;
|
|
||||||
-webkit-transform-origin: 50% 0 0;
|
|
||||||
transform-origin: 50% 0 0;
|
|
||||||
-webkit-transition: -ms-transform 0.3s,
|
|
||||||
-webkit-transform 0.3s,
|
|
||||||
transform 0.3s,
|
|
||||||
visibility 0s 0.3s;
|
|
||||||
transition: -ms-transform 0.3s,
|
|
||||||
-webkit-transform 0.3s,
|
|
||||||
transform 0.3s,
|
|
||||||
visibility 0s 0.3s;
|
|
||||||
|
|
||||||
-moz-user-select: text;
|
|
||||||
-webkit-user-select: text;
|
|
||||||
-ms-user-select: text;
|
|
||||||
user-select: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desktop .info-hotspot.visible .info-hotspot-text {
|
|
||||||
visibility: visible;
|
|
||||||
-ms-transform: perspective(200px) rotateX(0deg);
|
|
||||||
-webkit-transform: perspective(200px) rotateX(0deg);
|
|
||||||
transform: perspective(200px) rotateX(0deg);
|
|
||||||
-webkit-transition: -ms-transform 0.3s 0.3s,
|
|
||||||
-webkit-transform 0.3s 0.3s,
|
|
||||||
transform 0.3s 0.3s,
|
|
||||||
visibility 0s 0s;
|
|
||||||
transition: -ms-transform 0.3s 0.3s,
|
|
||||||
-webkit-transform 0.3s 0.3s,
|
|
||||||
transform 0.3s 0.3s,
|
|
||||||
visibility 0s 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Info hotspot modal */
|
|
||||||
|
|
||||||
.desktop .info-hotspot-modal {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 11000 !important;
|
|
||||||
background-color: rgba(0,0,0,.5);
|
|
||||||
line-height: 1.2em;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
-webkit-transition: opacity 0.2s ease-in-out 0.5s,
|
|
||||||
visibility 0s 0.7s;
|
|
||||||
transition: opacity 0.2s ease-in-out 0.5s,
|
|
||||||
visibility 0s 0.7s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal.visible {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
-webkit-transition: opacity 0.2s ease-in-out,
|
|
||||||
visibility 0s 0s;
|
|
||||||
transition: opacity 0.2s ease-in-out,
|
|
||||||
visibility 0s 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal .info-hotspot-header {
|
|
||||||
position: absolute;
|
|
||||||
top: 60px;
|
|
||||||
left: 10px;
|
|
||||||
right: 10px;
|
|
||||||
width: auto;
|
|
||||||
height: 50px;
|
|
||||||
background-color: rgb(103,115,131);
|
|
||||||
background-color: rgba(103,115,131,0.8);
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transition: opacity 0.3s ease-in-out 0.2s;
|
|
||||||
transition: opacity 0.3s ease-in-out 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal.visible .info-hotspot-header {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transition: opacity 0.3s ease-in-out 0.2s;
|
|
||||||
transition: opacity 0.3s ease-in-out 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal .info-hotspot-icon-wrapper {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal .info-hotspot-icon {
|
|
||||||
width: 90%;
|
|
||||||
height: 90%;
|
|
||||||
margin: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal .info-hotspot-title-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 50px;
|
|
||||||
right: 50px;
|
|
||||||
width: auto;
|
|
||||||
height: 50px;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal .info-hotspot-title-wrapper:before {
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal .info-hotspot-title {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
-moz-user-select: text;
|
|
||||||
-webkit-user-select: text;
|
|
||||||
-ms-user-select: text;
|
|
||||||
user-select: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal .info-hotspot-close-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
background-color: rgb(78,88,104);
|
|
||||||
background-color: rgba(78,88,104,0.8);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal .info-hotspot-close-icon {
|
|
||||||
width: 70%;
|
|
||||||
height: 70%;
|
|
||||||
margin: 15%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal .info-hotspot-text {
|
|
||||||
position: absolute;
|
|
||||||
top: 110px;
|
|
||||||
bottom: 10px;
|
|
||||||
left: 10px;
|
|
||||||
right: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(58,68,84);
|
|
||||||
background-color: rgba(58,68,84,0.8);
|
|
||||||
overflow-y: auto;
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transition: opacity 0.3s ease-in-out;
|
|
||||||
transition: opacity 0.3s ease-in-out;
|
|
||||||
|
|
||||||
-moz-user-select: text;
|
|
||||||
-webkit-user-select: text;
|
|
||||||
-ms-user-select: text;
|
|
||||||
user-select: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hotspot-modal.visible .info-hotspot-text {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transition: opacity 0.3s ease-in-out 0.4s;
|
|
||||||
transition: opacity 0.3s ease-in-out 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* View control buttons */
|
|
||||||
|
|
||||||
.viewControlButton {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
padding: 5px;
|
|
||||||
background-color: rgb(103,115,131);
|
|
||||||
background-color: rgba(103,115,131,0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.view-control-buttons .viewControlButton {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide controls when width is too small */
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
body.view-control-buttons .viewControlButton {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewControlButton .icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Center is at margin-left: -20px */
|
|
||||||
.viewControlButton-1 {
|
|
||||||
margin-left: -145px;
|
|
||||||
}
|
|
||||||
.viewControlButton-2 {
|
|
||||||
margin-left: -95px;
|
|
||||||
}
|
|
||||||
.viewControlButton-3 {
|
|
||||||
margin-left: -45px;
|
|
||||||
}
|
|
||||||
.viewControlButton-4 {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
.viewControlButton-5 {
|
|
||||||
margin-left: 55px;
|
|
||||||
}
|
|
||||||
.viewControlButton-6 {
|
|
||||||
margin-left: 105px;
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 71 KiB |
|
Before Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 71 KiB |
|
Before Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 12 KiB |