Spectacle Proving Grounds

Spectacle mobile configuration app in development (MOVED TO GITHUB)

by Nicholas Poole

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>
  <button class="hamburger">&#9776;</button>
  <button class="cross">&#735;</button>
  <div align="center" class="top-bar"><img class="logo" src="http://www.nickpoole.me/spectacle/splogotype_50.png"></div>
</header>

<body>

  <div class="menu">
    <ul>
      <a href="#">
        <li>NEW PROJECT</li>
      </a>
      <a href="#">
        <li>OPEN PROJECT</li>
      </a>
      <a href="#">
        <li>SAVE PROJECT</li>
      </a>
      <a href="#">
        <li>SETTINGS</li>
      </a>
      <a href="#">
        <li>OH FUCK HELP ME</li>
      </a>
    </ul>
  </div>

  <div class="module-list">
    ADD A MODULE
    <div class="bar-lit"></div>    
    <div class="bar-drk"></div>
    <div class="light-module-prev"><img class="mod-label" src="http://www.nickpoole.me/spectacle/rect12976.png"> </div>
    <div class="bar-drk"></div>
    <div class="bar-lit"></div>
    <div class="bar-drk"></div>
    <div class="button-module-prev"><img class="mod-label" src="http://www.nickpoole.me/spectacle/rect12207b.png"> </div>
    <div class="bar-drk"></div>
  </div>

  <div class="canvas">
    <div align="center" id="project-name-block" class="project-name-block">
      <div id="project-name" class="project-name">Project Name&nbsp;<input type="image" class="edit-icon click-to-edit" src="http://www.nickpoole.me/spectacle/edit-icon.png" height="10px"></div>
    </div>
    <div class="project-info-module"><img class="mod-label" src="http://www.nickpoole.me/spectacle/rect12207a.png">
      <br>
      <div class="project-info-module">
      <div class="chunk"><label for="photo-input"><img id="project-photo" class="project-photo" height="100px" src="http://www.nickpoole.me/spectacle/placeholder.png"></label><input id="photo-input" type="file"/></div>
      <div class="chunk">
      <textarea class="project-text" rows="2">Click here to write a little bit about your project!</textarea>
      <br>
...

CSS

body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  width: 100%;
  height: 100vh;
  background-color: #efefef;
}

.project-text{
  width: 80%;
  border: 0px;
  background-color: rgba(255,255,255,0);
  resize: none;
  overflow: hidden;
}

header {
  width: 100%;
  position: fixed;
  background: #1c2727;
  height: 50px;
  line-height: 60px;
  z-index: 100000;
}

.logo {
  position: relative;
}

.hamburger {
  background: none;
  position: absolute;
  top: 0px;
  right: 100;
  line-height: 45px;
  padding: 5px 15px 0px 15px;
  color: #fff;
  border: 0;
  font-size: 1.4em;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 10000000000000;
}

.cross {
  background: none;
  position: absolute;
  top: 0px;
  right: 100;
  padding: 13px 15px 0px 15px;
  color: #fff;
  border: 0;
  font-size: 3em;
  line-height: 65px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 10000000000000;
}

.menu {
  z-index: 1000000;
  font-weight: bold;
  font-size: 0.8em;
  top: 50px;
  width: 100%;
  background: #131313;
  position: fixed;
  text-align: center;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}

.menu li {
  display: block;
  padding: 15px 0 15px 0;
  border-bottom: #1d1f20 1px solid;
}

.menu li:hover {
  display: block;
  background: #181818;
  padding: 15px 0 15px 0;
  border-bottom: #1d1f20 1px solid;
}

.menu ul li a {
  text-decoration: none;
  margin: 0px;
  color: #fff;
}

.menu ul li a:hover {
  color: #fff;
  text-decoration: none;
}

.menu a {
  text-decoration: none;
  color: white;
}

.menu a:hover {
  text-decoration: none;
  color: white;
}

.module-list {
  position: fixed;
  z-index: 10000;
  font-weight: bold;
  font-size: 0.8em;
  top: 50px;
  width: 100%;
  height: 85%;
  background: #ffffff;
  text-align: center;
}

.glyphicon-home {
  color: white;
  font-size: 1.5em;
  margin-top: 5px;
  margin: 0 auto;
}

.project-name-block {
  cursor: pointer;
  position:...

JavaScript

function changeName(newName){
var ProjectName = document.getElementById('project-name');
ProjectName.innerHTML = newName + "&nbsp;<input type=\"image\" class=\"edit-icon click-to-edit\" src=\"http://www.nickpoole.me/spectacle/edit-icon.png\" height=\"10px\">";
}

var el = document.getElementById("project-name-block");
  el.addEventListener("click", function(){
		var NewProjectName = prompt("What would you like to call your project?");
    while(NewProjectName == ""){
    	if(NewProjectName == ""){alert("You have to pick a name");}
    	NewProjectName = prompt("What would you like to call your project?");
    }
    changeName(NewProjectName);
  }, false);

// Scuddle away all of the hidden elements at app start
$("exit-foot").hide();
$(".module-list").hide();
$(".cross").hide();
$(".menu").hide();

// Handler for opening the hamburger menu
$(".hamburger").click(function() {
  $(".menu").slideToggle("slow", function() {
    $(".hamburger").hide();
    $(".cross").show();
  });
});

// Handler for closing the hamburger menu
$(".cross").click(function() {
  $(".menu").slideToggle("slow", function() {
    $(".cross").hide();
    $(".hamburger").show();
  });
});

// Handler for "Add Module" navigation action
$(".add-module").click(function() {
  $(".module-list").slideToggle("slow", function() {
    $("footer").hide();
    $("exit-foot").show();
  });
});

// Module list exit handler
$(".mod-list-exit").click(function() {
  $(".module-list").slideToggle("slow", function() {
    $("footer").show();
    $("exit-foot").hide();
  });
});

function showImage(src,target) {
  var fr=new FileReader();
  // when image is loaded, set the src of the image where you want to display it
  fr.onload = function(e) { target.src = this.result; };
  src.addEventListener("change",function() {
    // fill fr with image data    
    fr.readAsDataURL(src.files[0]);
  });
}

var src = document.getElementById("photo-input");
var target =...