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 |