creylopez
/
AppsPy
1
1
Fork 0
Code Issues 2 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Empiezo parte admin

politica
Celestino Rey 1 year ago
parent
e2aea2aa23
commit
5ab870c070
3 changed files with 330 additions and 0 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -0
      WebServer/README.md
  2. +280
    -0
      WebServer/nginx/admin/index.html
  3. +48
    -0
      WebServer/nginx/admin/styles.css

+ 2
- 0
WebServer/README.md View File

@ -1,4 +1,6 @@
# Instrucciones # Instrucciones
https://www.blog.duomly.com/how-to-crate-simple-web-page-using-bootstrap-5/ https://www.blog.duomly.com/how-to-crate-simple-web-page-using-bootstrap-5/
# Para la parte admin
https://www.blog.duomly.com/how-to-build-bootstrap-admin-template-tutorial/

+ 280
- 0
WebServer/nginx/admin/index.html View File

@ -0,0 +1,280 @@
<!DOCTYPE >
<html>
<head>
<meta charset="UTF-8" />
<title>Admin Panel UI</title>
<!-- CSS only -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./styles.css" />
<!-- JavaScript and dependencies -->
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- Top Nav -->
<nav class="py-3 px-4 navbar navbar-expand-lg auto-hiding-navbar fixed-top">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex" id="navbarSupportedContent">
<form class="search-form d-flex ml-auto mt-1 mb-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">
Search
</button>
</form>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Hello Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">User Settings</a>
<a class="dropdown-item" href="#">Create New Account</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Logout</a>
</li>
</ul>
</div>
</nav>
<!-- End Top Nav -->
<div class="row">
<!-- Sidebar -->
<div class="col-1">
<nav id="sidebar" class="col sidebar">
<a class="navbar-brand" href="#">
<img src="./assets/logo.png" alt="logo" class="logo" />
</a>
<ul class="nav flex-column vertical-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<svg
width="1em"
height="1em"
viewBox="0 0 16 16"
class="bi bi-house-door-fill"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.5 10.995V14.5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V11c0-.25-.25-.5-.5-.5H7c-.25 0-.5.25-.5.495z"
/>
<path
fill-rule="evenodd"
d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"
/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg
width="1em"
height="1em"
viewBox="0 0 16 16"
class="bi bi-file-post"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4z"
/>
<path
d="M4 5.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-7z"
/>
<path
fill-rule="evenodd"
d="M4 3.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"
/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg
width="1em"
height="1em"
viewBox="0 0 16 16"
class="bi bi-pencil"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z"
/>
<path
fill-rule="evenodd"
d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z"
/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg
width="1em"
height="1em"
viewBox="0 0 16 16"
class="bi bi-bar-chart-line-fill"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="4" height="5" x="1" y="10" rx="1" />
<rect width="4" height="9" x="6" y="6" rx="1" />
<rect width="4" height="14" x="11" y="1" rx="1" />
<path
fill-rule="evenodd"
d="M0 14.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z"
/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg
width="1em"
height="1em"
viewBox="0 0 16 16"
class="bi bi-chat-left-dots"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M14 1H2a1 1 0 0 0-1 1v11.586l2-2A2 2 0 0 1 4.414 11H14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"
/>
<path
d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
/>
</svg>
</a>
</li>
</ul>
</nav>
</div>
<!-- End Sidebar -->
</div>
<div class="main col-11">
<div class="row first-row">
<div class="col-4">
<section id="recently-posted">
<div class="card">
<div class="card-header">Recently Published Posts</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row g-0">
<div class="col-md-3">
<img
src="./assets/post1.jpeg"
alt="Post One Photo"
class="img-fluid rounded-lg"
/>
</div>
<div class="col-md-9">
<div class="card-body">
<h6 class="card-title">Lorem ipsum dolor sit amet...</h6>
<p class="card-text">
This is a wider card with supporting text below as a
natural lead-in to additional content.
</p>
<p class="card-text">
<small class="text-muted">Added 3 days ago</small>
</p>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row g-0">
<div class="col-md-3">
<img
src="./assets/post1.jpeg"
alt="Post One Photo"
class="img-fluid rounded-lg"
/>
</div>
<div class="col-md-9">
<div class="card-body">
<h6 class="card-title">Lorem ipsum dolor sit amet...</h6>
<p class="card-text">
This is a wider card with supporting text below as a
natural lead-in to additional content.
</p>
<p class="card-text">
<small class="text-muted">Added 3 days ago</small>
</p>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row g-0">
<div class="col-md-3">
<img
src="./assets/post1.jpeg"
alt="Post One Photo"
class="img-fluid rounded-lg"
/>
</div>
<div class="col-md-9">
<div class="card-body">
<h6 class="card-title">Lorem ipsum dolor sit amet...</h6>
<p class="card-text">
This is a wider card with supporting text below as a
natural lead-in to additional content.
</p>
<p class="card-text">
<small class="text-muted">Added 3 days ago</small>
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</body>
</html>

+ 48
- 0
WebServer/nginx/admin/styles.css View File

@ -0,0 +1,48 @@
body {
background: #f6f6f6;
height: 100vh;
}
nav {
background-color: white;
}
.search-form {
width: 50%;
}
#sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 9999;
box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1);
max-width: 10vw;
}
#sidebar .nav-item {
text-align: center;
padding: 25px 0;
}
#sidebar .nav-item a {
color: rgba(0, 0, 0, 0.2);
}
#sidebar .nav-item a.active {
color: #0d6efd;
}
.vertical-nav {
margin-top: 20vh;
}
.logo {
max-height: 30px;
margin: 15px 25px;
}
a.navbar-brand {
text-align: center;
width: 100%;
display: block;
}

Write Preview
Loading…
Cancel
Save