metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon"> <link rel="icon" href="../../favicon.ico" type="image/x-icon"> <link href="../../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="descktop.css" rel="stylesheet"> <title>Desktop demo - Metro 4 :: Popular HTML, CSS and JS library</title> <style> .window-area { background: url("../../images/anime-background-images-1.jpg") center center no-repeat; background-size: cover; } #charm { height: calc(100vh - 40px); width: 396px; background-color: #1F4F5D; } </style> </head> <body> <div data-role="charms" data-position="right" id="charm" class="p-4"> <div class="h-100 d-flex flex-column"> <div class="charm-top"> <div class="text-center m-4"> <span>Google Chrome</span> </div> <div class="charm-notify"> <img class="icon" src="../../images/me.jpg"> <div class="title">About Author</div> <div class="content">The hornpipe fears with endurance, vandalize the galley until it waves.</div> <div class="secondary">14:17 • www.facebook.com</div> </div> <div class="charm-notify"> <img class="icon" src="../../images/me.jpg"> <div class="title">About Author</div> <div class="content">The hornpipe fears with endurance, vandalize the galley until it waves.</div> <div class="secondary">14:17 • www.facebook.com</div> </div> <div class="charm-notify"> <img class="icon" src="../../images/me.jpg"> <div class="title">About Author</div> <div class="content">The hornpipe fears with endurance, vandalize the galley until it waves.</div> <div class="secondary">14:17 • www.facebook.com</div> </div> <div class="text-center m-4"> <span>Information</span> </div> <div class="charm-notify"> <span class="icon mif-info"></span> <div class="title">You have a news</div> <div class="content">The hornpipe fears with endurance, vandalize the galley until it waves.</div> </div> <div class="clear mt-4 reduce-1"> <span class="place-left c-pointer">Collapse</span> <span class="place-right c-pointer">Clear notifies</span> </div> </div> <div class="charm-bottom mt-auto"> <div class="d-flex"> <div class="charm-tile"> <span class="icon mif-tablet-landscape"></span> <span class="caption">Tablet mode</span> </div> <div class="charm-tile"> <span class="icon mif-wifi-full"></span> <span class="caption">Network</span> </div> <div class="charm-tile"> <span class="icon mif-cog"></span> <span class="caption">Preferences</span> </div> <div class="charm-tile active"> <span class="icon mif-rocket"></span> <span class="caption">Fly mode</span> </div> </div> <div class="d-flex"> <div class="charm-tile active"> <span class="icon mif-target"></span> <span class="caption">Position</span> </div> <div class="charm-tile"> <span class="icon mif-bluetooth"></span> <span class="caption">Not connected</span> </div> </div> </div> </div> </div> <div class="desktop"> <div class="window-area"></div> <div class="task-bar"> <div class="task-bar-section"> <button class="task-bar-item" id="start-menu-toggle"><span class="mif-windows"></span></button> <div class="start-menu" data-role="dropdown" data-toggle-element="#start-menu-toggle"> <div class="start-menu-inner h-100"> <div class="explorer"> <ul class="v-menu w-100 bg-brandColor2 fg-white"> <li><a onclick="createWindowYoutube()">Youtube window</a></li> <li><a onclick="createWindow()">New window</a></li> <li><a onclick="createWindowWithCustomButtons()">Custom buttons</a></li> <li><a onclick="createWindowModal()">Modal window</a></li> </ul> </div> </div> </div> </div> <div class="task-bar-section tasks"></div> <div class="task-bar-section system-tray ml-auto"> <button class="task-bar-item" id="open-charm" onclick="openCharm()"><span class="mif-comment"></span></button> <span style="line-height: 40px;" class="pr-4"> <span data-role="clock" class="w-auto fg-white reduce-1" data-show-date="false"></span> </span> </div> </div> </div> <script src="../../js/jquery-3.3.1.min.js"></script> <script src="../../metro/js/metro.js"></script> <script src="desktop.js"></script> <script> </script>  </body> </html>