<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/4.0/examples/signin/signin.css" rel="stylesheet">
<script src="clipboard.min.js"></script>
<script src="upload/server/php/files/usersdb.js"></script>
</head>
<style>
body { background-color: transparent; }
#email, #sms {
font-size: xx-large;
}
</style>
<body>
<img src="productlogo.png">
<script>
var tickMark = "✔";
var uploadedURL = "upload/server/php/files/";
var images = []
var url = "/"
var urlParameters = "?customimages="
function generateURL(){
//var url = "https://learnwebvr.xyz/importer.html"
for (var image of images){
urlParameters += image + ","
}
console.log ("URL", urlParameters );
var encodedURL = url + urlParameters
encodedURL += "&environment=" + document.querySelector("#environment").value
document.querySelector("#link").href = encodedURL
document.querySelector("#copyBtn").setAttribute("data-clipboard-text", encodedURL)
document.querySelector("#generateURL").style.display = "block"
document.querySelector("#email").href = "mailto:?&subject=session&body=" + encodeURIComponent( encodedURL )
// tested on iPhone 6S and Pixel2 and desktop
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
}
else {
document.querySelector("#copydiv").className = "cold-md-6"
document.querySelector("#emaildiv").className = "cold-md-6"
}
}
</script>
<div class="container">
<form class="form-signin">
Environment:
<select id="environment">
<option name="contact">contact</option>
<option name="egypt">egypt</option>
<option name="checkerboard">checkerboard</option>
<option name="forest" selected="selected">forest</option>
<option name="goaland">goaland</option>
<option name="yavapai">yavapai</option>
<option name="goldmine">goldmine</option>
<option name="threetowers">threetowers</option>
<option name="poison">poison</option>
<option name="arches">arches</option>
<option name="tron">tron</option>
<option name="japan">japan</option>
<option name="dream">dream</option>
<option name="volcano">volcano</option>
<option name="starry">starry</option>
<option name="osiris">osiris</option>
</select>
<button style="margin-top:2px;" type="button" onclick="unhide('#fileupload2');" class="btn btn-primary btn-block">Upload your office photos<br/>(post-its, white board, etc)</button>
No content available? Try <a target="_blank" href="https://learnwebvr.xyz/?customimages=upload/server/php/files/photo6035074301452988871.jpg,upload/server/php/files/photo6035074301452988870.jpg,upload/server/php/files/IMG_6496 (1).jpg"> this example instead</a>!
<input style="display:none;" id="fileupload2" type="file" name="files[]" data-url="upload/server/php/" multiple>
<div style="display:none;" id="fileuploaded2">Files uploaded: </div>
<div style="opacity:0.7;" id="uploadrate"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="upload/js/vendor/jquery.ui.widget.js"></script>
<script src="upload/js/jquery.iframe-transport.js"></script>
<script src="upload/js/jquery.fileupload.js"></script>
<script>
function unhide( element ){
document.querySelector(element).style.display = "block";
}
$(function () {
$('#fileupload2').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
var imageURL = uploadedURL + (file.name)
images.push(imageURL)
var uploaded = document.querySelector("#fileuploaded2");
uploaded.style.display = "block";
uploaded.innerHTML += tickMark;
});
}
});
});
</script>
<button style="margin-top:2px;" type="button" onclick="generateURL()" id="generate-simulation" class="btn btn-lg btn-primary btn-block">Generate your<br/>relax+think space</button>
</form>
</div>
<div id="generateURL" style="display:none; text-align:center;" class="container">
<div class="container">
<a id="link" target="_blank" href=""><button type="button" class="btn btn-lg btn-primary btn-block">Launch relax+think space</button></a>
</div>
<br/>
<div class="container">
<div class="row">
<div class="col-md-4" id="copydiv">
<button class="btn" data-clipboard-text="" id="copyBtn">Copy to clipboard</button>
<script>
new Clipboard('.btn');
</script>
</div>
<div class="col-md-4" id="emaildiv">
<a id="email" href="" target="_blank">email link</a>
</div>
</div>
</div>
</div>
<script>
function login(){
document.querySelector("#login").style.display = "block"
}
function loginViaEmail(){
var email = document.querySelector("#useremail").value
var userspace = database[email]
if (!userspace){
document.querySelector("#nouser").style.display = "block"
return
}
document.querySelector("#spacesholder").style.display = "block"
var spaces = document.querySelector("#spaces")
var space = document.createElement("li")
var spacelink = document.createElement("a")
var images = userspace.files
for (var image of images){
urlParameters += image.filename + ","
}
spacelink.href = url + urlParameters
spacelink.target = "_blank"
spacelink.innerHTML = userspace.last_login
space.appendChild(spacelink)
console.log(space)
spaces.appendChild(space)
console.log("userspace", userspace)
}
</script>
<div>Already have an account? <span onclick="login()" style="text-decoration: underline;">Log-in</span>
<form>
<div id="login" style="display:none"><input id="useremail"/>
<button style="margin-top:2px;" type="button" onclick="loginViaEmail()" id="loginemail" class="btn btn-lg btn-primary btn-block">Login</button>
</div>
</form>
<div style="display:none" id="nouser">User not found. Double check your email address then contact fabien@iterative-explorations.com</a></div>
<div style="display:none" id="spacesholder">Your spaces:
<ul id="spaces"></ul>
</div>
</div>
<h3 style="position:absolute; bottom:0px; right:0px;">A product by <a href="https://iterative-explorations.com"><img width="200px" src="https://iterative-explorations.com/logo.svg"></a>.</h3>
</body>
</html>