Windows 10 Optik mit Browser Funktion
Code
<!doctype html>
<html lang="de">
<head>
<style>
body {
overflow: hidden;
height:100vh;
display:flex;
flex-direction:column;
background-image: url('/image/Windows_Final_3840p_v10_opt.png');
color: white;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
overflow: hidden;
}
.icon-internet {
width: 60px;
margin: 10px;
cursor: pointer;
}
.icon-internet p {
text-shadow: 3px 3px 3px #000, -3px -3px 3px #000;
margin: 0;
color:white;
}
#icon-internet:hover {
background: rgba(3, 166, 255, 0.3);
outline: 2px solid rgba(3, 166, 255, 0.9);
border:2px solid red;
}
#overlay-internet{
width:60vw;
height:60vh;
margin:15vh 15vw;
display:none;
}
.right1{
float:right;
margin:3px 3px 0 0;
}
.app {
overflow: hidden;
z-index: 10;
border: 1px solid #000000;
height: 400px;
transform-origin: bottom left;
transition: opacity 0.2s ease-in-out;
}
.app.minimized {
opacity: 1;
display:block;
}
.app.open {
bottom: 550px;
left: 250px;
opacity: 1;
visibility: visible;
transition: opacity 0.2s ease-in-out;
}
.app .toolbar {
background: #999;
height: 30px;
font-size: 12px;
overflow: hidden;
}
.app .toolbar:before,
.app .toolbar:after {
content: "";
display: block;
width: 100%;
clear: both;
}
.app .toolbar .tab {
position: relative;
padding: 0 10px;
width: 100px;
line-height: 30px;
background: #aaa;
float: left;
}
.app .toolbar .tab:after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f067";
position: absolute;
right: -20px;
top: 10px;
}
.app .toolbar .tab span {
margin-left: 6px;
}
.app .toolbar .tab .fa-times {
float: right;
line-height: 30px;
}
.app .toolbar .tab .fa-times:hover {
color: #990000;
}
.app .addressbar {
line-height: 30px;
}
.app .addressbar i {
padding: 0 10px;
}
.app .addressbar span {
margin: 0 5px;
}
.app .addressbar span.divider {
border-right: 1px solid #777;
}
.app .addressbar input {
background: transparent;
border: 0;
outline: none;
}
.app.id-edge {
background: #aaa;
}
a {
cursor: default;
}
.ui-draggable-dragging iframe,
.ui-resizable-resizing iframe {
pointer-events: none;
}
.right1 i{
padding:7px;
}
.right1 i:hover {
background: #ddd;
}
.right1 i:active {
background:red;
}
#internetiframe{
height:100%;
}
.fluid-container {
height: 100%;
display: flex;
flex-direction: column;
}
.app.id-edge {
background: #aaa;
height: 100%;
}
div#first-row-win {
display: flex;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="icon-internet text-center" id="icon-internet">
<img src="data:image/jpeg;base64,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" class="img-responsive">
<p>Chrome</p>
</div>
<div class="ui-widget-content overlay-internet" id="overlay-internet">
<div class="fluid-container">
<div class="id-edge app minimized">
<div class="toolbar draggable">
<div class="right1">
<i class="fa fa-window-minimize" onclick="closeopencom1()"></i>
<i class="fa fa-window-restore" onclick="returncom1()" id="returncam1" style="display:none;"></i>
<i class="fa fa-window-maximize" onclick="upercom1()" id="upercam1"></i>
<i class="fa fa-times" onclick="closecom1()"></i>
</div>
<div class="tab"><i class="fa fa-list-alt"> </i><span>Start</span><i class="fa fa-times"></i>
</div>
</div>
<div class="addressbar draggable"><i class="fa fa-arrow-left"></i><i class="fa fa-arrow-right"></i><i class="fa fa-refresh"></i><span class="divider"></span>
<input id="newsite" class="edge-url" value="https://soforthilfe-forum.de"/>
</div>
<iframe id="internetiframe" class="edge-browser" src="https://soforthilfe-forum.de" frameborder="0" width="100%" height="100%"></iframe>
</div>
</div>
</div>
<script>
var ii=$('#icon-internet');
var oi=$("#overlay-internet");
var uc1=$('#upercam1');
var rc1=$('#returncam1');
ii.click(function(){
oi.css({display:'block'});
$('#internetiframe').css({display:'block'});
$('#newsite').keydown(function(e){
if(e.key=='Enter'){
$('#internetiframe').attr('src',$(this).val());
}
})
})
function closeopencom1() {
oi.css({display:'none'});
}
function upercom1() {
oi.css({
width:"100%",
top:"0",
left:"0",
position:"absolute",
margin:0,
height:"95.3vh"})
uc1.css({display:"none"});
rc1.css({display:"inline"});
}
function returncom1() {
oi.css({
width:"70%",
top:"20%",
left:"15%",
height:"60%"})
rc1.css({display:"none"});
uc1.css({display:"inline"});
}
oi.draggable({
cursor: "move",
}).resizable({
animated:true
});
function closecom1() {
oi.css({display:'none',
transition:"200ms all"});
}
</script>
</body>
</html>