dm1sh/timetable-generator
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

first design

Browse Source
This commit is contained in:
TUTOR03 2020-12-13 17:23:32 +05:00
parent 1417158c14
commit 3d82a01683
2 changed files with 166 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/HTML one.html Normal file
View File

@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="test_html.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<nav id="sidebar" class="active me-3">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<button type="button" id="sidebar-toggle" class="btn btn-secondary rounded-end">X</button>
</nav>
<div id="content" class="container mt-3">
<!-- <nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</nav> -->
<div class="row text-center">
<div class="col-md-4 rounded-2 shadow-sm">11</div>
<div class="col-md-4 rounded-2 shadow-sm">11</div>
<div class="col-md-4 rounded-2 shadow-sm">11</div>
</div>
<div class="row text-center border-bottom border-3">
<div class="col-md-2 rounded-2 shadow-sm">91</div>
<div class="col-md-2 rounded-2 shadow-sm">91</div>
<div class="col-md-2 rounded-2 shadow-sm">91</div>
<div class="col-md-2 rounded-2 shadow-sm">91</div>
<div class="col-md-2 rounded-2 shadow-sm">91</div>
<div class="col-md-2 rounded-2 shadow-sm">91</div>
</div>
<div class="row">
<div class="col-md-4 rounded-2 shadow-sm">
<div class="row">
<div class="col-md-6 text-center border-bottom border-start border-3">
<h6>Физика</h6>
<h6>505</h6>
<h6>Попов</h6>
</div>
<div class="col-md-6 d-flex align-items-center justify-content-center text-center border-bottom border-end border-start border-3">
<div class="dropdown">
<button class="btn btn-sm btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Выберите пару
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<div class="d-grid gap-2 my-2">
<button class="btn btn-outline-primary btn-sm" type="button">Новые Пары</button>
</div>
</div>
<div class="col-md-4 rounded-2 shadow-sm">
<div class="row">
<div class="col-md-6 text-center border-bottom border-3">
<h6>Физика</h6>
<h6>505</h6>
<h6>Попов</h6>
</div>
<div class="col-md-6 d-flex align-items-center justify-content-center text-center border-bottom border-end border-start border-3">
<div class="dropdown">
<button class="btn btn-sm btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Выберите пару
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<div class="d-grid gap-2 my-2">
<button class="btn btn-outline-primary btn-sm" type="button">Новые Пары</button>
</div>
</div>
<div class="col-md-4 rounded-2 shadow-sm">
<div class="row">
<div class="col-md-6 text-center border-bottom border-3">
<h6>Физика</h6>
<h6>505</h6>
<h6>Попов</h6>
</div>
<div class="col-md-6 d-flex align-items-center justify-content-center text-center border-bottom border-end border-start border-3">
<div class="dropdown">
<button class="btn btn-sm btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Выберите пару
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<div class="d-grid gap-2 my-2">
<button class="btn btn-outline-primary btn-sm" type="button">Новые Пары</button>
</div>
</div>
<!-- <div class="col-md-4 rounded-2 shadow-sm">dfsfsfesfs</div>
<div class="col-md-4 rounded-2 shadow-sm">dfsfsfesfs</div> -->
</div>
<div class="d-grid gap-2 my-2">
<button class="btn btn-outline-primary btn-sm" type="button">Новый День</button>
</div>
</div>
</div>
<script type="text/javascript">
document.querySelector('#sidebar-toggle').addEventListener('click', ()=>{
document.querySelector('#sidebar').classList.toggle('active')
})
</script>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</html>

38
src/test_html.css Normal file
View File

@ -0,0 +1,38 @@
.wrapper{
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar{
min-width: 18%;
max-width: 18%;
min-height: 100vh;
position: relative;
background-color: #ADB5BD;
transition: all 0.3s;
}
#sidebar{
margin-left: -18%;
}
#sidebar.active{
margin-left: 0px;
}
#sidebar-toggle{
position: absolute;
border-radius: 0;
top: 0;
left: 100%;
}
@media (max-width: 768px) {
#sidebar{
margin-left: -250px;
}
#sidebar.active{
margin-left: 0;
}
}