<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="project" content="Create Panorama">
<meta name="description" content="Create Panorama is a project developed and maintained by Matt Strong. You can make a panorama made of different website for yourself. Let's create a panorama & make fun">
<meta name="dev" content="https://www.upwork.com/freelancers/~01bf7eb8a79da171c6">
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-analytics.js"></script>
<!-- SWIPER JS CDN LINKS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- DOWNLOADJS CDN LINKS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.8/download.min.js" integrity="sha512-WiGQZv8WpmQVRUFXZywo7pHIO0G/o3RyiAJZj8YXNN4AV7ReR1RYWVmZJ6y3H06blPcjJmG/sBpOVZjTSFFlzQ==" crossorigin="anonymous"></script>
<title>Your Panorama | Made of Create Panorama </title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
background: rgb(246,246,246);
background: radial-gradient(circle, rgba(246,246,246,0.938813025210084) 0%, rgba(173,173,173,0.9724264705882353) 100%);
color: #ffffff;
}
.swiper-slide {
width: 100%;
height: 100vh;
background: #284243
}
.swiper-slide iframe {
width: 100%;
height: 100%;
}
.download-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: #284243;
position: absolute;
bottom: 100px;
right: 50px;
display: flex;
justify-content: center;
align-items: center;
z-index: 999999;
cursor: pointer;
transition: all .25s ease-in;
}
.download-btn:hover {
transform: scale(1.2);
}
.download-btn img {
width: 30px;
height: 30px;
transform: rotate(90deg);
}
.frame-trackpad {
width: 100%;
height: 150px;
position: absolute;
bottom: 0;
left: 0;
z-index: 9999;
cursor: url('http://profoundbe.com/img/computer-mosue.png'), auto;
}
</style>
<script src="https://www.googletagmanager.com/gtag/js?l=dataLayer" async=""></script></head>
<body>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<iframe class="frame" id="frame-1" frameborder="0"></iframe>
</div>
<div class="swiper-slide">
<iframe class="frame" id="frame-2" frameborder="0"></iframe>
</div>
<div class="swiper-slide">
<iframe class="frame" id="frame-3" frameborder="0"></iframe>
</div>
<div class="swiper-slide">
<iframe class="frame" id="frame-4" frameborder="0"></iframe>
</div>
</div>
<div class="frame-trackpad"></div>
</div>
<div class="panorama-id 1pjRWCQM5yleMvnNCFZd" style="display: none"></div>
<!-- download js integration -->
<!-- <script src="js/download.js"></script> -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAPcrQe941-24rL4l_htjUyeytw2eonQtM",
authDomain: "panorama-creator.firebaseapp.com",
databaseURL: "https://panorama-creator.firebaseio.com",
projectId: "panorama-creator",
storageBucket: "panorama-creator.appspot.com",
messagingSenderId: "359116879453",
appId: "1:359116879453:web:2b54fd92d7ea3755f13fb4",
measurementId: "G-P0F6XFV75B"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
const db = firebase.firestore();
// DOM Manipulation
const documentSTR = document.documentElement.outerHTML.replace('panorama-id', `panorama-id ${localStorage.getItem('panorama_id')}`);
const isDownloaded = document.querySelector(".panorama-id").classList.length === 1 ? false : true;
let sources = {};
// IF THE PANORAMA IS DOWNLOADED THEN HIDE DOWNLOAD BUTTON AND SET FRAME SOURCE FROM FIREBASE
if(isDownloaded) {
// GETTING SOURCES FROM FIREBASE
let doc_id = document.querySelector('.panorama-id').classList[1];
// let sources = {};
db.collection('urls').doc(doc_id).get().then(snapshot => {
sources = snapshot.data();
}).then(() => {
// INTEGRATING SOURCES FROM FIREBASE TO FRAME SRC
for(let i = 0; i < 4; i++) {
let frame = document.querySelector(`#frame-${i + 1}`);
let source = sources[`horizontal_${i + 1}`];
frame.src = source;
}
})
} else {
// CONDITIONALY RENDERING DOWNLOAD BUTTON
const container = document.querySelector('.swiper-container');
const download_btn = document.createElement('DIV')
const download_btn_img = document.createElement('IMG')
download_btn.setAttribute('class', 'download-btn');
download_btn_img.setAttribute('src', 'img/back-arrow.png');
download_btn.appendChild(download_btn_img);
container.appendChild(download_btn);
// ADD EVENT LISTENER TO DOWNLOAD BUTTON
download_btn.addEventListener('click', function() {
download(documentSTR, 'panorama.html', 'text/html')
})
// GETTING SOURCES FROM LOCAL STORAGE
let srcs = localStorage.getItem('frame_sources').split(',');
for(let i = 0; i < 4; i++) {
let frame = document.querySelector(`#frame-${i + 1}`);
frame.src = srcs[i];
}
}
// SWIPER JS CONFIG
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal',
spaceBetween: 50,
loop: true,
speed: 1500,
effect: "coverflow",
coverflowEffect: {
slideShadows: true,
rotate: 25,
stretch: 2,
depth: 50,
modifier: 1
},
//mousewheel configuration
mousewheel: {
invert: false
}
})
// HERE WE ARE CHECKING WETHER EVERY FRAME HAS SOURCE AFTER BEING DOWNLOADED
if(isDownloaded) {
// RUNNING A FUNCTION ON SLIDE CHANGE EVENT
mySwiper.on('slideChange', function() {
// GETTING INSTANCE OF SLIDE FRAME AND IT'S SOURCE
let slide_frame = mySwiper.slides[mySwiper.activeIndex].children[0];
let slide_frame_src = mySwiper.slides[mySwiper.activeIndex].children[0].src;
// IF THE SLIDE FRAME SOURCE IS EMPTY
if(slide_frame_src === "") {
// IF SLIDER ACTIVE INDEX IS EQUAL TO 5
if(mySwiper.activeIndex === 5) {
// ASSIGNING FRAME SOURCE TO THE REQUIRED ONE
slide_frame.src = sources[`horizontal_${1}`]
} else if(mySwiper.activeIndex === 4) {
// ASSIGNING FRAME SOURCE TO THE REQUIRED ONE
slide_frame.src = sources[`horizontal_${mySwiper.activeIndex}`]
}
} else {
//JUST ANOTHER MESSAGE ON THE CONSOLE
console.log(slide_frame_src)
}
})
}
</script></body></html>