<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Chmood/pen/QbdyZZ?depth=everything&order=popularity&page=12&q=iframe&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">@import "https://fonts.googleapis.com/icon?family=Material+Icons";
@import "https://fonts.googleapis.com/css?family=Roboto:500,300,500italic,300italic";
* {
box-sizing: border-box;
}
html,
body {
min-height: 100vh;
font-family: Roboto;
font-weight: 300;
}
.site-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
width: 100%;
background: -webkit-radial-gradient(farthest-side ellipse, rgba(255, 255, 255, 0.95), #aaaaaa);
background: radial-gradient(farthest-side ellipse, rgba(255, 255, 255, 0.95), #aaaaaa);
}
.topbar {
padding: 8px;
background: #333;
box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.25);
}
.topbar article,
.topbar input {
display: inline-block;
vertical-align: top;
}
.topbar button {
vertical-align: top;
border: none;
background: transparent;
color: #aaa;
-webkit-transition: all 0.125s;
transition: all 0.125s;
padding: 12px 12px 8px;
margin-right: 4px;
line-height: 24px;
font-weight: 500;
}
.topbar button .material-icons {
font-size: 24px;
line-height: 1;
}
.topbar button:hover, .topbar button:focus {
color: white;
background: rgba(0, 0, 0, 0.25);
outline: none;
}
.topbar .navbar-right {
float: right;
}
.topbar .url-bar {
height: 48px;
margin-right: 8px;
background-color: #eee;
border-radius: 3px;
}
.topbar .url-bar button {
margin-right: 0;
}
input,
select {
color: #888;
border: none;
-webkit-transition: all 0.25s;
transition: all 0.25s;
background: transparent;
}
input {
padding: 0 8px;
font-size: 18px;
font-weight: 500;
line-height: 48px;
}
input:focus {
color: #333;
background: white;
outline: none;
}
select {
font-size: 18px;
padding: 14px 0;
}
select:focus {
color: white;
outline: none;
}
select option {
background: trnsparent;
}
.device-chooser {
margin: 0;
padding-left: 0;
}
.device-chooser li {
display: inline-block;
vertical-align: top;
}
.device-chooser .device-size {
min-width: 7em;
padding: 0 8px;
text-align: right;
font-size: 18px;
line-height: 48px;
color: #aaa;
}
.bottombar {
padding: 1em;
text-align: center;
}
.brand {
padding: 0 8px;
color: #ccc;
font-size: 1.5rem;
line-height: 48px;
}
.brand a {
display: block;
color: #aaa;
text-decoration: none;
}
.brand a:hover, .brand a:focus {
color: white;
}
.brand a .material-icons {
position: relative;
top: 4px;
}
.content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
}
.content article {
padding: 2em;
text-align: center;
}
.content article .device-wrapper {
display: inline-block;
position: relative;
padding: 2em;
padding-bottom: 4em;
background-color: #333;
border-radius: 1em;
box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.25);
}
.content article .device-wrapper:before {
content: "";
position: absolute;
bottom: 1.25em;
left: 50%;
margin-left: -1em;
width: 2em;
height: 2em;
border-radius: 50%;
background: rgba(0, 0, 0, 0.25);
}
.content article .device-wrapper:after {
position: absolute;
display: block;
display: none;
content: "";
left: 2em;
right: 2em;
top: 2em;
bottom: 4em;
background: rgba(255, 255, 255, 0.25);
z-index: 1000;
}
.content.content--maximized article {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
}
.content.content--maximized article .device-wrapper {
position: absolute;
display: block;
width: 100%;
height: 100%;
padding: 0;
border-radius: 0;
box-shadow: none;
}
.content.content--maximized article .device-wrapper:before {
display: none;
}
.content.content--maximized article .device-wrapper iframe {
position: absolute;
display: block;
min-width: 100%;
width: 100%;
height: 100% !important;
top: 0;
bottom: 0;
top: 0;
bottom: 0;
}
iframe {
border: none;
background: #ddd;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style></head><body>
<div class="site-wrapper">
<section class="topbar">
<article class="brand">
<a href="#"><i class="material-icons">polymer</i> BRAND</a>
</article>
<div class="navbar-right">
<!-- <article>
<select>
<option value="value1">Product</option>
<option value="value1">Product 1</option>
<option value="value1">Product 2</option>
</select>
<select>
<option value="value1">Theme</option>
<option value="value1">Theme 1</option>
<option value="value1">Theme 2</option>
</select>
</article>
--> <article class="url-bar">
<input type="url" value="https://chmood.github.io" autocomplete>
<button><i class="material-icons">arrow_forward</i></button>
</article>
<article>
<ul class="device-chooser">
<li class="device-size"></li>
</ul>
</article>
<article>
<button class="btn-maximize"><i class="material-icons">crop_free</i></button>
<button class="btn-fullscreen"><i class="material-icons">open_with</i></button>
<button class="btn-3d">3D</button>
<button class="btn-close"><i class="material-icons">close</i></button>
</article>
</div>
</section>
<section class="content">
<article>
<div class="device-wrapper">
<iframe src="https://chmood.github.io"></iframe>
</div>
</article>
</section>
<footer class="bottombar">
Copyright crap
</footer>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >(function($, window, document) {
var breakpoints = {
"xxs": {"width": 320, "height": 320, "icon" : "watch"},
"xs": {"width": 480, "height": 640, "icon" : "phone_iphone"},
"s": {"width": 768, "height": 1024, "icon" : "tablet_mac"},
"m": {"width": 1024, "height": 768, "icon" : "laptop_mac"},
"l": {"width": 1200, "height": 1024, "icon" : "desktop_windows"},
"xl": {"width": 1600, "height": 1200, "icon" : "tv"}
}
$(function() {
// The DOM is ready!
// Membas
var deviceCurrent;
// DOM cache
var $deviceChooser = $('.device-chooser'),
$deviceSize = $('.device-size'),
// $device = $('.device-wrapper'),
$content = $('.content'),
$iframe = $('iframe'),
$urlBar = $('.url-bar input'),
$btnMaximize = $('.btn-maximize');
// URL
$urlBar.on('change', function() {
$iframe.attr("src", $urlBar.val());
})
$iframe.on('change', function() { // TODO
console.log('foo');
$urlBar.val(this.attr('src'));
})
// DEVICES
$btnMaximize.on('click', function() {
$content.toggleClass('content--maximized')
});
for(key in breakpoints){if (window.CP.shouldStopExecution(1)){break;}
var btn = $(
'<li><button><i class="material-icons">' +
breakpoints[key]["icon"] +
'</i></button></li>');
btn.on('click', changeDevice(key, breakpoints[key]["width"], breakpoints[key]["height"]));
$deviceChooser.append(btn);
//console.log(breakpoints[key]);
}
window.CP.exitedLoop(1);
function changeDevice(key, w, h) {
return function() {
$iframe.css('width', w + 'px').css('height', h + 'px');
deviceCurrent = key;
$deviceSize.text(w + 'x' + h + 'px');
};
}
var initDeviceType = "s"
var initDevice = changeDevice(initDeviceType, breakpoints[initDeviceType]["width"], breakpoints[initDeviceType]["height"]);
initDevice();
});
}(window.jQuery, window, document));
//# sourceURL=pen.js
</script>
</body></html>
