Windows 10 Optik

Windows 10 Optik mit Browser Funktion
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete 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>