nasitra/Spyhole

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Spyhole</title>
  <style>
    * {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-text-size-adjust:none;
      -webkit-touch-callout:none;
    }

    body {
      -webkit-user-select: none;
      margin: 0;
      user-select: none;
      width: 100%;
    }

    #container {
      height: 420px;
      margin: auto 20px;
      width: 420px;
    }

    #url-text {
      width: 85%;
    }

    #top-bar {
      margin: 5px 0;
      text-align: center;
    }

    .inner-child-container {
      -webkit-background-clip: padding;
      height: 376px;
      overflow: hidden;
      width: 376px;
    }

    #inner-container {
      -moz-border-radius: 210px;
      border: solid 22px black;
      border-radius: 210px;
      position: relative;
      z-index: 10000;
    }

    #frame-container {
      -moz-border-radius: 188px;
      border: none;
      border-radius: 188px;
      position: absolute;
    }

    #inner-frame {
      -moz-border-radius: 188px;
      -webkit-background-clip: padding;
      border: none;
      border-radius: 188px;
      height: 376px;
      width: 376px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="top-bar">
      <input id="url-text" type="text" placeholder="URL" />
      <button id="launch-button">Peep</button>
    </div>
    <div id="inner-container" class="inner-child-container">
      <div id="frame-container" class="inner-child-container">
        <iframe id="inner-frame" src="about:blank"></iframe>
      </div>
    </div>
  </div>
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script>
    $(function() {
      $("#url-text").keypress(function(e) {
        if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
          $("#launch-button").click();
        }
      });
      $("#launch-button").click(function() {
        var innerFrame = document.getElementById("inner-frame");
        var frameURL = $("#url-text").val();
        innerFrame.setAttribute("src", frameURL);
      });
    });
  </script>
</body>
</html>

## Spyhole
Peep a web page through the spyhole!
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Spyhole</title>
	<style>
	* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-text-size-adjust:none;
	-webkit-touch-callout:none;
	}

	body {
	-webkit-user-select: none;
	margin: 0;
	user-select: none;
	width: 100%;
	}

	#container {
	height: 420px;
	margin: auto 20px;
	width: 420px;
	}

	#url-text {
	width: 85%;
	}

	#top-bar {
	margin: 5px 0;
	text-align: center;
	}

	.inner-child-container {
	-webkit-background-clip: padding;
	height: 376px;
	overflow: hidden;
	width: 376px;
	}

	#inner-container {
	-moz-border-radius: 210px;
	border: solid 22px black;
	border-radius: 210px;
	position: relative;
	z-index: 10000;
	}

	#frame-container {
	-moz-border-radius: 188px;
	border: none;
	border-radius: 188px;
	position: absolute;
	}

	#inner-frame {
	-moz-border-radius: 188px;
	-webkit-background-clip: padding;
	border: none;
	border-radius: 188px;
	height: 376px;
	width: 376px;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<div id="top-bar">
	<input id="url-text" type="text" placeholder="URL" />
	<button id="launch-button">Peep</button>
	</div>
	<div id="inner-container" class="inner-child-container">
	<div id="frame-container" class="inner-child-container">
	<iframe id="inner-frame" src="about:blank"></iframe>
	</div>
	</div>
	</div>
	<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
	<script>
	$(function() {
	$("#url-text").keypress(function(e) {
	if ((e.which && e.which === 13) \|\| (e.keyCode && e.keyCode === 13)) {
	$("#launch-button").click();
	}
	});
	$("#launch-button").click(function() {
	var innerFrame = document.getElementById("inner-frame");
	var frameURL = $("#url-text").val();
	innerFrame.setAttribute("src", frameURL);
	});
	});
	</script>
	</body>
	</html>