176 lines
5.3 KiB
HTML
176 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Title</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="open-iconic-master/font/css/open-iconic-bootstrap.min.css">
|
|
<link rel="stylesheet" href="css/quill.snow.css">
|
|
<link rel="stylesheet" href="css/bludit.css">
|
|
|
|
<script src="js/jquery-3.3.1.min.js"></script>
|
|
<script src="js/bootstrap.bundle.min.js"></script>
|
|
<script src="js/quill.min.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<!-- Navbar -->
|
|
<div class="bg-light">
|
|
<div class="container">
|
|
<div class="row">
|
|
<nav class="navbar navbar-expand-lg navbar-light">
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
|
|
aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">
|
|
<img src="img/logo.svg" width="30" height="30" class="d-inline-block align-top" alt=""> Bludit
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- 25%/75% split on large devices, small, medium devices hide -->
|
|
<div class="row">
|
|
<!-- LEFT SIDEBAR - Display only on large devices -->
|
|
<div class="sidebar col-lg-2 d-none d-lg-block">
|
|
<!-- Use .flex-column to set a vertical direction -->
|
|
<ul class="nav flex-column pt-4">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><span class="oi oi-dashboard"></span>Dashboard</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><span class="oi oi-external-link"></span>Website</a>
|
|
</li>
|
|
<li class="nav-item mt-3">
|
|
<a class="nav-link" href="#"><span class="oi oi-plus"></span>New content</a>
|
|
</li>
|
|
|
|
<li class="nav-item mt-3">
|
|
<h4>Manage</h4>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Content</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Categories</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Users</a>
|
|
</li>
|
|
|
|
<li class="nav-item mt-3">
|
|
<h4>Settings</h4>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">General</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Plugins</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Themes</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">About</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- RIGHT MAIN -->
|
|
<div class="col-lg-10 pt-4">
|
|
|
|
<!-- TABS -->
|
|
<ul class="nav nav-tabs" id="dynamicTab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="content-tab" data-toggle="tab" href="#content" role="tab" aria-controls="content" aria-selected="true">Content</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="images-tab" data-toggle="tab" href="#images" role="tab" aria-controls="images" aria-selected="false">Images</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="options-tab" data-toggle="tab" href="#options" role="tab" aria-controls="options" aria-selected="false">Options</a>
|
|
</li>
|
|
</ul>
|
|
<form class="tab-content mt-3" id="dynamicTabContent">
|
|
|
|
<!-- TABS CONTENT -->
|
|
<div class="tab-pane" id="content" role="tabpanel" aria-labelledby="content-tab">
|
|
|
|
<div class="form-group">
|
|
<input type="text" class="form-control form-control-lg" aria-describedby="title" placeholder="Enter title">
|
|
</div>
|
|
|
|
<div class="form-group mt-2">
|
|
<div id="editor"></div>
|
|
</div>
|
|
|
|
<div class="form-group mt-2">
|
|
<button type="button" class="btn btn-primary">Save</button>
|
|
<button type="button" class="btn">Save as draft</button>
|
|
<button type="button" class="btn">Cancel</button>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- TABS IMAGES -->
|
|
<div class="tab-pane" id="images" role="tabpanel" aria-labelledby="images-tab">
|
|
IMAGES
|
|
</div>
|
|
<!-- TABS OPTIONS -->
|
|
<div class="tab-pane show active" id="options" role="tabpanel" aria-labelledby="options-tab">
|
|
<h4>General</h4>
|
|
<!-- Categories -->
|
|
<div class="form-group row">
|
|
<label for="jscategory" class="col-sm-2 col-form-label">Category</label>
|
|
<div class="col-sm-10">
|
|
<select class="custom-select">
|
|
<option selected>- No categoriezed -</option>
|
|
<option value="1">Music</option>
|
|
<option value="2">Videos</option>
|
|
<option value="3">General</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<h4>Advanced</h4>
|
|
<!-- Date -->
|
|
<div class="form-group row">
|
|
<label for="jsdate" class="col-sm-2 col-form-label">Date</label>
|
|
<div class="col-sm-10">
|
|
<select class="custom-select">
|
|
<option selected>- No categoriezed -</option>
|
|
<option value="1">Music</option>
|
|
<option value="2">Videos</option>
|
|
<option value="3">General</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var quill = new Quill('#editor', {
|
|
modules: {
|
|
toolbar: [
|
|
[{ header: [1, 2, false] }],
|
|
['bold', 'italic', 'underline'],
|
|
['image', 'code-block']
|
|
]
|
|
},
|
|
placeholder: 'Content, support Markdown and HTML.',
|
|
theme: 'snow' // or 'bubble'
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|