Rently Demo - Complete

by Jacob Pearlstein

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Rently UX Prototype</title>
    <script src="https://sightmap.com/embed/api.js">


    </script>

  </head>

  <body>
    <header>
      <h2>
        Designed Prototype: Rently // Engrain SightMap
      </h2>
    </header>
    <main>
      <div class="margin">
        <div class="frameContainer" id="left">
          <p class="titleHeading">
            Frame 1
          </p>
          <div class="frame">
            <div class="buffer">

            </div>
            <div id="imageContain">
              <image id="logo" src="https://i.imgur.com/PvaVS0e.png"></image>
              <image id="start" src="https://i.imgur.com/vTncN4n.png"></image>
            </div>
          </div>
        </div>
        <div class="frameContainer" id="right">
          <p class="titleHeading">
            Frame 2
          </p>
          <div class="frame">
            <div class="buffer">

            </div>
            <p class="heading">
              Directions to Unit 174
            </p>
            <iframe id="sightmap" src="https://sightmap.com/embed/05eveq01vqo?enable_api=1&origin=https://fiddle.jshell.net" frameborder="0"></iframe>
            <div class="copyContainer">
              <p class="mainCopy">
                Tap above
              </p>
            </div>
            <div class="buttonContainer">
              <form action="https://preview.uxpin.com/13f231d7b9343b11661301355fde38f1442e743b#/pages/116396854/simulate/sitemap?mode=i" method="get" target="_blank">
                <button type="submit">
                  Tour Complete
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>

</html>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  height: 75%;
  margin: auto;
  font-family: open sans, sans-serif;
  background: #1c2128;
}

header {
  height: 7%;
}

h2 {
  color: white;
  text-align: center;
}

image#start {
  width: 374px;
  height: 611px;
  margin: 10% auto;
  vertical-align: center;
}

image#logo {
  width: 149px;
  height: 93px;
  margin: auto;
  vertical-align: center;
}

#imageContain {
  vertical-align: center;
  margin: 10% auto;
}

.margin {
  text-align: center;
  width: 100%;
  height: 100%;
  position: relative;
}

#left {
  float: left;
  margin-left: 7%;
}

#right {
  float: right;
  margin-right: 7%;
}

.frame {
  height: 812px;
  width: 375px;
  display: block;
  background: #f9fbff;
  margin: 2% auto;
}

.frameContainer {
  text-align: center;
  vertical-align: center;
  margin: auto;
}

.copyContainer {
  margin: 0;
}

.buttonContainer {
  margin-top: 6%;
  margin-bottom: 20%;
  vertical-align: top;
}

.buffer {
  height: 1px;
}

iframe {
  margin: auto;
  width: 360px;
  height: 600px;
  display: flex;
}

p.heading {
  width: 270px;
  height: 33px;
  font-size: 24px;
  color: #474747;
  text-decoration: none solid rgb(71, 71, 71);
  margin: 5% auto;
}

p.mainCopy {
  width: 297px;
  height: 100%;
  font-size: 16px;
  color: #474747;
  text-decoration: none solid rgb(71, 71, 71);
  text-align: center;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

p.titleHeading {
  color: #fff;
  font-size: 24px;
  text-decoration: none solid rgb(255, 255, 255);
  margin: 3% auto;
}

button {
  width: 269px;
  height: 48px;
  padding: 6px 10px;
  border-radius: 5px;
  background-color: #ec6136;
  border: 0;
  background-size: cover;
  font-size: 14px;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none solid rgb(255, 255, 255);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

JavaScript

$('document').ready(function() {
  // Create a new embed instance, providing the IFrame id value:
  var embed = new SightMap.Embed('sightmap');

  console.log(embed);
  embed.disableUI(['filters', 'unitList', 'unitDetails']);

  embed.on('ready', function() {
    console.log('hello world');
    // embed.setFloor(11703);
  });
  $('#start').on('click', function() {
    console.log('Start Tour');

    var unitNumbers = [
      '173',
    ];

    embed.setUnitNumberMatches(unitNumbers);
    embed.locateUnitByUnitNumber(173);
  });

});