<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Cosmo - Responsive Dashboard Admin Template">
<meta name="author" content="Akshay Kumar">
<link rel="icon" href="assets/images/favicon.ico">
<link rel="stylesheet" href="assets/css/basestyle/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/css/codemirror/codemirror.css">
<link rel="stylesheet" href="assets/js/codemirror/addon/hint/show-hint.css">
<title>
Cosmo - Responsive Dashboard Admin Template
</title>
</head>
<body>
<div class="loader-wrapper" style="opacity: 0.99999;">
<div class="spinner">
<svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="length" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="28"></circle></svg><svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="28"></circle></svg><svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="28"></circle></svg><svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="28"></circle></svg>
</div>
</div>
<section class="wrapper">
<aside class="sidebar">
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand m-0 py-2 brand-title" href="#">Cosmo Admin</a><span></span><a class="navbar-brand py-2 material-icons toggle-sidebar" href="#">menu</a>
</nav>
<nav class="navigation">
<ul>
<li class="">
<a href="index.html" title="Dashboard"><span class="nav-icon material-icons">public</span>Dashboard</a>
</li>
<li>
<a href="theme-setting.html" title="Theme Settings"><span class="nav-icon material-icons">color_lens</span>Theme Settings</a>
</li>
<li>
<a href="#" title="Layout Options"><span class="nav-icon material-icons">dashboard</span>Layout Options<span class="toogle-sub-nav material-icons">keyboard_arrow_right</span></a>
<ul class="sub-nav">
<li>
<a href="top-navigation.html" title="Top Navigation">Top Navigation</a>
</li>
<li>
<a href="fixed-layout.html" title="Fixed Layout">Fixed Layout</a>
</li>
<li>
<a href="sidebar-variations.html" title="Compact Menu">Compact Menu</a>
</li>
<li>
<a href="fluid-content.html" title="Fluid Content">Fluid Content</a>
</li>
<li>
<a href="fixed-content.html" title="Fixed Content">Fixed Content</a>
</li>
<li>
<a href="tabded-header.html" title="Tabded Header">Tabded Header</a>
</li>
</ul>
</li>
</ul><label title="UI Elements & Widgets"><span>UI Elements & Widgets</span></label>
<ul>
<li>
<a href="#" title="UI Componets"><span class="nav-icon material-icons">extension</span>UI Componets <span class="toogle-sub-nav material-icons">keyboard_arrow_right</span></a>
<ul class="sub-nav">
<li>
<a href="general-elements.html" title="">General Elements</a>
</li>
<li>
<a href="buttons.html" title="Buttons">Buttons</a>
</li>
<li>
<a href="modals.html" title="Modals">Modals</a>
</li>
<li>
<a href="tabs-navs.html" title="Tabs & Navs">Tabs & Navs</a>
</li>
<li>
<a href="full-calendar.html" title="Full Calendar">Full Calendar</a>
</li>
<li>
<a href="icons.html" title="Icons">Icons</a>
</li>
<li>
<a href="typography.html" title="Typography">Typography</a>
</li>
<li>
<a href="tree-view.html" title="Tree View">Tree View</a>
</li>
<li>
<a href="bootstrap-grid.html" title="Bootstrap Grid">Bootstrap Grid</a>
</li>
<li>
<a href="loaders.html" title="Loaders">Loaders</a>
</li>
</ul>
</li>
<li class="open active">
<a href="#" title="Form Stuff"><span class="nav-icon material-icons">assignment</span>Form Stuff <span class="toogle-sub-nav material-icons">keyboard_arrow_right</span></a>
<ul class="sub-nav">
<li>
<a href="form-styling.html" title="Form Styling">Form Styling</a>
</li>
<li>
<a href="form-validation.html" title="Form Validation">Form Validation</a>
</li>
<li>
<a href="pickers.html" title="Pickers">Pickers</a>
</li>
<li>
<a href="form-wizard.html" title="Form Wizard">Form Wizard</a>
</li>
<li class="active">
<a href="code-editor.html" title="Code Editor">Code Editor</a>
</li>
<li>
<a href="wysihtml-editor.html" title="Wysihtml Editor">Wysihtml Editor</a>
</li>
<li>
<a href="file-uploder.html" title="File Uploader">File Uploader</a>
</li>
<li>
<a href="image-croping.html" title="Image Croping">Image Croping</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Data Grid"><span class="nav-icon material-icons">apps</span>Data Grid <span class="toogle-sub-nav material-icons">keyboard_arrow_right</span></a>
<ul class="sub-nav">
<li>
<a href="basic-tables.html" title="Basic Tables">Basic Tables</a>
</li>
<li>
<a href="static-data-grid.html" title="Data Grid">Static Data Grid</a>
</li>
<li>
<a href="data-grid.html" title="Data Grid">Data Grid</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Charts"><span class="nav-icon material-icons">equalizer</span>Charts <span class="toogle-sub-nav material-icons">keyboard_arrow_right</span></a>
<ul class="sub-nav">
<li>
<a href="basic-charts.html" title="Basic Charts">Basic Charts</a>
</li>
<li>
<a href="advanced-charts.html" title="Advanced Charts">Advanced Charts</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Google Maps"><span class="nav-icon material-icons">place</span>Google Maps <span class="toogle-sub-nav material-icons">keyboard_arrow_right</span></a>
<ul class="sub-nav">
<li>
<a href="general-maps.html" title="Maps">General Maps</a>
</li>
<li>
<a href="advanced-maps.html" title="Maps">Advanced Maps</a>
</li>
</ul>
</li>
</ul><label title="Applications and Pages"><span>Applications and Pages</span></label>
<ul>
<li>
<a href="#" title="eCommerce"><span class="nav-icon material-icons">shopping_cart</span>eCommerce <span class="toogle-sub-nav material-icons">keyboard_arrow_right</span></a>
<ul class="sub-nav">
<li>
<a href="ecommerce-dashboard.html" title="Dashboard">Dashboard</a>
</li>
<li>
<a href="ecommerce-orders.html" title="Orders">Orders</a>
</li>
<li>
<a href="ecommerce-products.html" title="Products">Products</a>
</li>
<li>
<a href="ecommerce-customers.html" title="Customers">Customers</a>
</li>
</ul>
</li>
<li>
<a href="#" title=""><span class="nav-icon material-icons">widgets</span>Applications <span class="toogle-sub-nav material-icons">keyboard_arrow_right</span></a>
<ul class="sub-nav">
<li>
<a href="mailbox.html" title="MailBox">MailBox</a>
</li>
<li>
<a href="messages.html" title="Messages">Messages</a>
</li>
<li>
<a href="task-manager.html" title="Task Manager">Task Manager</a>
</li>
<li>
<a href="notes.html" title="Notes">Notes</a>
</li>
<li>
<a href="calendar.html" title="Calendar">Calendar</a>
</li>
<li>
<a href="photos-videos.html" title="Photos & Videos">Photos & Videos</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Blogger"><span class="nav-icon material-icons">comment</span>Blogger <span class="toogle-sub-nav material-icons">keyboard_arrow_right</span></a>
<ul class="sub-nav">
<li>
<a href="blogger-feed-list.html" title="Feed List">Feed List</a>
</li>
<li>
<a href="blogger-post.html" title="Post">Post</a>
</li>
<li>
<a href="blogger-add-post.html" title="Add Post">Add Post</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Genral Pages"><span class="nav-icon material-icons">school</span>Genral Pages <span class="toogle-sub-nav material-icons">keyboard_arrow_right</span></a>
<ul class="sub-nav">
<li>
<a href="http://cosmoadmin.com/" target="_blank" title="Landing Page">Landing Page</a>
</li>
<li>
<a href="timeline.html" title="Timeline">Timeline</a>
</li>
<li>
<a href="profile.html" title="Profile">Profile</a>
</li>
<li>
<a href="invoice.html" title="Invoice">Invoice</a>
</li>
<li>
<a href="search.html" title="Search">Search</a>
</li>
<li>
<a href="faq.html" title="FAQ">FAQ</a>
</li>
<li>
<a href="about-us.html" title="About Us">About Us</a>
</li>
<li>
<a href="conatct-us.html" title="Contact Us">Contact Us</a>
</li>
<li>
<a href="full-screen.html" title="Full Screen">Full Screen</a>
</li>
<li>
<a href="blank-page.html" title="Blank Page">Blank Page</a>
</li>
</ul>
</li>
<li>
<a href="#" title="System Pages"><span class="nav-icon material-icons">settings</span>System Pages <span class="toogle-sub-nav material-icons">keyboard_arrow_right</span></a>
<ul class="sub-nav">
<li>
<a href="sign-in.html" title="Signin">Signin</a>
</li>
<li>
<a href="sign-up.html" title="Signup">Signup</a>
</li>
<li>
<a href="coming-soon.html" title="Coming Soon">Coming Soon</a>
</li>
<li>
<a href="404-page.html" title="404 Page">404 Page</a>
</li>
<li>
<a href="500-page.html" title="500 Page">500 Page</a>
</li>
</ul>
</li>
</ul><label title="Knowlage Center"><span>Knowlage Center<span></span></span><span></span></label>
<ul>
<li>
<span><a href="documentation.html" title="Documentation"><span class="nav-icon material-icons">school</span>Documentation</a></span>
</li>
<li>
<a target="_blank" href="http://www.dedemao.com/support" title="Help & Support"><span class="nav-icon material-icons">help</span>Help & Support</a>
</li>
<li>
<a href="utilities.html" title="Utilities"><span class="nav-icon material-icons">build</span>Utilities</a>
</li>
</ul>
</nav>
</aside>
<div class="content-area">
<header class="header sticky-top">
<nav class="navbar navbar-light bg-white px-sm-4">
<a class="navbar-brand py-2 d-md-none m-0 material-icons toggle-sidebar" href="#">menu</a>
<ul class="navbar-nav flex-row ml-auto">
<li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Switch Application">
<a data-toggle="modal" href="#" data-target="#switchApp" class="nav-link"><span class="material-icons align-middle">apps</span></a>
</li>
<li class="nav-item notification">
<a href="#" id="notificationDropdown" data-toggle="dropdown" class="nav-link"><span class="material-icons align-middle">notifications_none</span></a>
<div class="dropdown-menu p-0 dropdown-lg notificationDropdown dropdown-menu-right" aria-labelledby="notificationDropdown">
<a class="dropdown-item py-3 border-bottom" href="#">
<p class="text-muted mb-1">
<small>John Doe Application</small>
</p>
<div class="progress" style="height:8px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div></a><a class="dropdown-item py-3 border-bottom" href="#">
<p class="text-muted mb-1">
<small>Akshay Application</small>
</p>
<div class="progress" style="height:8px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div></a><a class="dropdown-item whitespace-normal py-3 border-bottom" href="#">
<div class="media">
<img class="mr-3 rounded" width="26" src="assets/images/user.png">
<div class="media-body">
<h6 class="m-0 weight-400">
Media heading
</h6><small class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante.</small>
</div>
</div></a><a class="dropdown-item py-3 border-bottom" href="#">
<p class="text-muted mb-1">
<small>Uploading Documents</small>
</p>
<div class="progress" style="height:8px;">
<div class="progress-bar-animated bg-primary progress-bar-striped" role="progressbar" style="width: 40%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div></a><a class="dropdown-item py-3 border-bottom" href="#"><span class="badge badge-pill badge-danger mr-2">Warning</span><small class="text-muted">Somthing went wrong !</small></a><button type="button" class="btn btn-light btn-sm btn-block">View All</button>
</div>
</li>
<li class="nav-item ml-sm-3 user-logedin dropdown">
<a href="#" id="userLogedinDropdown" data-toggle="dropdown" class="nav-link weight-400 dropdown-toggle"><img src="assets/images/user.png" class="mr-2 rounded" width="28">Akshay kumar</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userLogedinDropdown">
<a class="dropdown-item" href="profile.html">My Account</a><a class="dropdown-item" href="profile.html">Account Settings</a><a class="dropdown-item" target="_blank" href="https://themeforest.net/item/brio-web-app-bootstrap-admin-template-dashboard/9529051/support">Help & Support</a>
<div class="dropdown-divider"></div><a class="dropdown-item" href="sign-in.html">Log Out</a>
</div>
</li>
</ul>
</nav>
</header>
<div class="content-wrapper">
<div class="row page-tilte align-items-center">
<div class="col-md-auto">
<a href="#" class="mt-3 d-md-none float-right toggle-controls"><span class="material-icons">keyboard_arrow_down</span></a>
<h1 class="weight-300 h3 title">
Code Editor
</h1>
<p class="text-muted m-0 desc">
Javascript, HTML, PHP etc code
</p>
</div>
<div class="col controls-wrapper mt-3 mt-md-0 d-none d-md-block">
<div class="controls d-flex justify-content-center justify-content-md-end">
<button class="btn btn-secondary">Save Code</button>
</div>
</div>
</div>
<div class="content">
<div id="code" class="card"></div>
</div>
<footer class="footer">
<p class="text-muted m-0">
<small class="float-right">Made with <span class="material-icons md-16 text-danger align-middle">favorite</span>by Akshay Kumar</small> <small>FreakPixels © 2017–2018 - freakpixels.com</small>
</p>
</footer>
</div>
</div>
</section>
<div class="modal fade" id="switchApp" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header px-4">
<h5 class="modal-title" id="exampleModalLabel">
Select Application
</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="material-icons">close</span></button>
</div>
<div class="modal-body p-4">
<div class="row align-items-stretch app-switcher">
<div class="col-lg-3 col-6 mb-4">
<a href="index.html" class="text-dark">
<div class="card h-100">
<div class="card-body text-center">
<span class="material-icons md-48" style="color:#21C3E0;">bubble_chart</span>
<p class="weight-400 m-0">
Dashboard
</p><small class="weight-300 text-muted">This is some text within a card body.</small>
</div>
</div></a>
</div>
<div class="col-lg-3 col-6 mb-4">
<a href="ecommerce-dashboard.html" class="text-dark">
<div class="card h-100">
<div class="card-body text-center">
<span class="material-icons md-48 text-primary">security</span>
<p class="weight-400 m-0">
Ecommerce
</p><small class="weight-300 text-muted">This is some text within a card body.</small>
</div>
</div></a>
</div>
<div class="col-lg-3 col-6 mb-4">
<a href="mailbox.html" class="text-dark">
<div class="card h-100 active-app">
<div class="card-body text-center">
<span class="material-icons md-48 text-danger">blur_on</span>
<p class="weight-400 m-0">
Mail Box
</p><small class="weight-300 text-muted">This is some text within a card body.</small><span class="material-icons app-selected md-16">check</span>
</div>
</div></a>
</div>
<div class="col-lg-3 col-6 mb-4">
<a href="blogger-feed-list.html" class="text-dark">
<div class="card h-100">
<div class="card-body text-center">
<span class="material-icons md-48 text-warning">camera</span>
<p class="weight-400 m-0">
Blogger
</p><small class="weight-300 text-muted">This is some text within a card body.</small>
</div>
</div></a>
</div>
<div class="col-lg-3 col-6 mb-lg-0 mb-4">
<a href="task-manager.html" class="text-dark">
<div class="card h-100">
<div class="card-body text-center">
<span class="material-icons md-48" style="color:#f98e69;">leak_add</span>
<p class="weight-400 m-0">
Task Manager
</p><small class="weight-300 text-muted">This is some text within a card body.</small>
</div>
</div></a>
</div>
<div class="col-lg-3 col-6 mb-lg-0 mb-4">
<a href="notes.html" class="text-dark">
<div class="card h-100">
<div class="card-body text-center">
<span class="material-icons md-48 text-success">color_lens</span>
<p class="weight-400 m-0">
Notes
</p><small class="weight-300 text-muted">This is some text within a card body.</small>
</div>
</div></a>
</div>
<div class="col-lg-3 col-6">
<a href="file-uploder.html" class="text-dark">
<div class="card h-100">
<div class="card-body text-center">
<span class="material-icons md-48" style="color:#9b84fb">category</span>
<p class="weight-400 m-0">
File Manager
</p><small class="weight-300 text-muted">This is some text within a card body.</small>
</div>
</div></a>
</div>
<div class="col-lg-3 col-6">
<a href="photos-videos.html" class="text-dark">
<div class="card h-100">
<div class="card-body text-center">
<span class="material-icons md-48 text-muted">layers</span>
<p class="weight-400 m-0">
Videos & Photos
</p><small class="weight-300 text-muted">This is some text within a card body.</small>
</div>
</div></a>
</div>
</div>
</div>
<div class="modal-footer px-4">
<div class="custom-control custom-checkbox mr-auto">
<input type="checkbox" class="custom-control-input" id="customCheck1"><label class="custom-control-label" for="customCheck1">Default open this application</label>
</div><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Switch Application</button>
</div>
</div>
</div>
</div><a target="_blank" href="http://www.dedemao.com" class="buynow-btn btn btn-success text-white"><span class="material-icons mr-2 align-middle">shopping_cart</span><span class="text">Buy Now $23</span></a>
<script src="assets/js/lib/moment.min.js"></script>
<script src="assets/js/lib/jquery.min.js"></script>
<script src="assets/js/lib/popper.min.js"></script>
<script src="assets/js/bootstrap/bootstrap.min.js"></script>
<script src="assets/js/chosen-js/chosen.jquery.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/codemirror/codemirror.js"></script>
<script src="assets/js/codemirror/addon/hint/show-hint.js"></script>
<script src="assets/js/codemirror/addon/hint/xml-hint.js"></script>
<script src="assets/js/codemirror/addon/hint/html-hint.js"></script>
<script src="assets/js/codemirror/mode/xml/xml.js"></script>
<script src="assets/js/codemirror/mode/javascript/javascript.js"></script>
<script src="assets/js/codemirror/mode/css/css.js"></script>
<script src="assets/js/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="assets/js/pages/codemirror.js"></script>
<script></script>
</body>