VENOM-10 : added design (first step)
This commit is contained in:
engineerTrooper
parent
8b87c7d2f7
commit
162cc4b0a4
10 changed files with 155 additions and 4 deletions
1
public/theme/admin/css/admin-panel.css
Normal file
1
public/theme/admin/css/admin-panel.css
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
:focus{outline:0}*{box-sizing:border-box}body,html{width:100vw;height:100vh;overflow:hidden;padding:0;margin:0;background:#1f2857;background:linear-gradient(144deg,#1f2954 25%,#000 50%,#5e002c 80%);background-attachment:fixed;color:#fff;font-family:sans-serif;font-size:16px}.hide{display:none!important}main{display:flex;height:100vh;overflow:hidden}.menu{width:220px;background-color:#1b1b1b;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);flex-shrink:0;display:flex;flex-direction:column}.menu .logo{text-align:center;font-family:monospace}.menu div[data-link]{padding:.75rem .5rem;position:relative}.menu div[data-link]:after{background-color:#3949ab;content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transition:transform .4s;transform-origin:left}.menu div[data-link]:hover:after{transform:scaleX(1)}.menu div[data-link]:last-child{margin-top:auto}.menu div[data-link].active{font-weight:700}.content-area{padding:0 1rem;margin:1rem 1.5rem;flex-grow:1;overflow-y:auto;max-height:100%;background:RGBA(27,27,27,.5)}.content-area .max-width{max-width:300px}.content-area hr{border:.5px solid #e9e9e9;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23)}.content-area .text{display:flex;position:relative;padding:5px 0}.content-area .icon{display:inline-block;width:18px;height:18px;background-size:cover;margin:0 10px 0 auto;fill:#fff}.content-area .icon-add{background-image:url(../images/icon/ic_add_circle_outline_24px.svg)}.content-area .icon-edit{background-image:url(../images/icon/ic_edit_24px.svg)}.content-area .icon-visibility{background-image:url(../images/icon/ic_visibility_24px.svg)}.content-area .add-new-role{display:flex;position:relative;align-items:center;padding:0 0 5px 0}
|
||||||
|
|
@ -1 +1 @@
|
||||||
*{box-sizing:border-box}:focus{outline:0}body,html{width:100vw;height:100vh;overflow:hidden;color:#fff;display:flex;justify-content:center;align-items:center;margin:0;padding:0;background:#1f2857;background:linear-gradient(144deg,#1f2954 25%,#000 50%,#5e002c 80%);background-attachment:fixed}.hide{display:none!important}#login-background{background-color:rgba(31,31,31,.25);-webkit-filter:blur(10px);filter:blur(10px);position:absolute;top:0;left:0;width:100%;height:100%}login{display:flex;position:relative;max-width:860px;width:90%;height:400px;padding:1rem;border-radius:10px 40px;overflow:hidden;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23)}#login{z-index:1;display:flex;flex-direction:column;align-items:center;width:100%}#login .logo{width:50%;margin-bottom:20px}#login .error-message{background-color:#c51162;padding:1rem;font-size:.7rem;display:block;width:50%}#login .input-group{width:50%}#login a{text-decoration:none;color:#fff}#login a:hover{color:#3949ab}
|
body,html{display:flex;justify-content:center;align-items:center}.hide{display:none!important}#login-background{background-color:rgba(31,31,31,.25);-webkit-filter:blur(10px);filter:blur(10px);position:absolute;top:0;left:0;width:100%;height:100%}login{display:flex;position:relative;max-width:860px;width:90%;height:400px;padding:1rem;border-radius:10px 40px;overflow:hidden;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23)}#login{z-index:1;display:flex;flex-direction:column;align-items:center;width:100%}#login .logo{width:50%;margin-bottom:20px}#login .error-message{background-color:#c51162;padding:1rem;font-size:.7rem;display:block;width:50%}#login .input-group{width:50%}#login a{text-decoration:none;color:#fff}#login a:hover{color:#3949ab}
|
||||||
|
|
@ -1 +1 @@
|
||||||
:focus{outline:0}*{box-sizing:border-box}body,html{padding:0;margin:0;background-color:#303030;color:#fff;font-family:sans-serif;font-size:16px}.hide{display:none!important}.btn{border:none;background:#3949ab radial-gradient(circle at 0 0,#3949ab 0,rgba(0,0,0,.2) 100%) no-repeat;color:#fff;padding:5px 15px;margin:10px 0;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:4px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);overflow:hidden;display:flex;justify-content:center;align-items:center;transition:.5s}.btn--outline{background:0 0;border:1px solid #3949ab}.btn:focus{box-shadow:0 3px 8px 1px rgba(0,0,0,.4)}.btn--accent{background:#ff0089 radial-gradient(circle at 0 0,#ff0089 0,rgba(0,0,0,.2) 100%) no-repeat}.btn--warn{background:#f87229 radial-gradient(circle at 0 0,#f87229 0,rgba(0,0,0,.2) 100%) no-repeat}.btn-fab{border-radius:2rem;width:2em;height:2em;padding:5px}.btn-ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:0 0}.btn-ripple__effect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:1;width:200%;height:0;padding-bottom:200%;border-radius:50%;background:rgba(190,190,190,.3);-webkit-animation:a-ripple .4s ease-in;animation:a-ripple .4s ease-in}.btn-ripple__effect.to-remove{-webkit-animation:remove-ripple .2s linear;animation:remove-ripple .2s linear}.btn--outline .btn-ripple__effect{background:rgba(57,73,171,.5);z-index:-1}.btn__content{z-index:1;font-weight:400;pointer-events:none}@-webkit-keyframes remove-ripple{from{opacity:1}to{opacity:0}}@keyframes remove-ripple{from{opacity:1}to{opacity:0}}@-webkit-keyframes a-ripple{0%{opacity:0;padding-bottom:0;width:0}25%{opacity:1}100%{width:200%;padding-bottom:200%}}@keyframes a-ripple{0%{opacity:0;padding-bottom:0;width:0}25%{opacity:1}100%{width:200%;padding-bottom:200%}}.input-group input{background-color:rgba(0,0,0,.4);border:none;border-bottom:2px solid #3949ab;color:#fff;padding:6px}.input-group input:focus,.input-group.focus input{border-color:#ff0089}.input-group.valid input{border-color:#39ab48}.input-group.invalid input{border-color:#cf1b1b}.input-group{display:flex;flex-direction:column;margin-bottom:3px;position:relative;padding-top:.7rem}.input-group label{font-size:.7rem;position:absolute;top:.7rem;left:6px;height:1rem;vertical-align:middle;transform:translateY(50%);color:#dcdcdc;transition:all .2s ease-out}.input-group input:focus~label,.input-group.focus label{top:0;left:0;transform:translateY(0);font-size:.6rem}.input-group .error{display:none}.input-group.invalid .error{margin-top:2px;display:block;font-size:.5rem;color:#ff3232}
|
:focus{outline:0}*{box-sizing:border-box}body,html{width:100vw;height:100vh;overflow:hidden;padding:0;margin:0;background:#1f2857;background:linear-gradient(144deg,#1f2954 25%,#000 50%,#5e002c 80%);background-attachment:fixed;color:#fff;font-family:sans-serif;font-size:16px}.hide{display:none!important}.btn{border:none;background:#3949ab radial-gradient(circle at 0 0,#3949ab 0,rgba(0,0,0,.2) 100%) no-repeat;color:#fff;padding:5px 15px;margin:10px 0;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:4px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);overflow:hidden;display:flex;justify-content:center;align-items:center;transition:.5s}.btn--outline{background:0 0;border:1px solid #3949ab}.btn:focus{box-shadow:0 3px 8px 1px rgba(0,0,0,.4)}.btn--accent{background:#ff0089 radial-gradient(circle at 0 0,#ff0089 0,rgba(0,0,0,.2) 100%) no-repeat}.btn--warn{background:#f87229 radial-gradient(circle at 0 0,#f87229 0,rgba(0,0,0,.2) 100%) no-repeat}.btn-fab{border-radius:2rem;width:2em;height:2em;padding:5px}.btn-ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:0 0}.btn-ripple__effect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:1;width:200%;height:0;padding-bottom:200%;border-radius:50%;background:rgba(190,190,190,.3);-webkit-animation:a-ripple .4s ease-in;animation:a-ripple .4s ease-in}.btn-ripple__effect.to-remove{-webkit-animation:remove-ripple .2s linear;animation:remove-ripple .2s linear}.btn--outline .btn-ripple__effect{background:rgba(57,73,171,.5);z-index:-1}.btn__content{z-index:1;font-weight:400;pointer-events:none}@-webkit-keyframes remove-ripple{from{opacity:1}to{opacity:0}}@keyframes remove-ripple{from{opacity:1}to{opacity:0}}@-webkit-keyframes a-ripple{0%{opacity:0;padding-bottom:0;width:0}25%{opacity:1}100%{width:200%;padding-bottom:200%}}@keyframes a-ripple{0%{opacity:0;padding-bottom:0;width:0}25%{opacity:1}100%{width:200%;padding-bottom:200%}}.input-group input{background-color:rgba(0,0,0,.4);border:none;border-bottom:2px solid #3949ab;color:#fff;padding:6px}.input-group input:focus,.input-group.focus input{border-color:#ff0089}.input-group.valid input{border-color:#39ab48}.input-group.invalid input{border-color:#cf1b1b}.input-group{display:flex;flex-direction:column;margin-bottom:3px;position:relative;padding-top:.7rem}.input-group.no-space{padding-top:.1rem}.input-group label{font-size:.7rem;position:absolute;top:.7rem;left:6px;height:1rem;vertical-align:middle;transform:translateY(50%);color:#dcdcdc;transition:all .2s ease-out}.input-group input:focus~label,.input-group.focus label{top:0;left:0;transform:translateY(0);font-size:.6rem}.input-group .error{display:none}.input-group.invalid .error{margin-top:2px;display:block;font-size:.7rem;color:#f32f32}.switch{display:flex;flex-direction:row;align-items:center;padding:5px 20px 5px 5px}.switch input{position:absolute;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0}.switch label{display:block;border-radius:10px;width:40px;height:20px;background-color:#e9e9e9;position:relative;cursor:pointer;margin-right:.5rem}.switch label:after{content:'';background-color:#c51162;position:absolute;top:2px;left:2px;height:16px;width:16px;border-radius:10px;transition:.5s}.switch input:checked+label:after{transform:translateX(20px);background-color:#007769}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 271 B |
1
public/theme/admin/images/icon/ic_check_box_24px.svg
Normal file
1
public/theme/admin/images/icon/ic_check_box_24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||||||
|
After Width: | Height: | Size: 244 B |
1
public/theme/admin/images/icon/ic_edit_24px.svg
Normal file
1
public/theme/admin/images/icon/ic_edit_24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
|
||||||
|
After Width: | Height: | Size: 262 B |
1
public/theme/admin/images/icon/ic_visibility_24px.svg
Normal file
1
public/theme/admin/images/icon/ic_visibility_24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
|
||||||
|
After Width: | Height: | Size: 322 B |
|
|
@ -33,6 +33,8 @@ class AdminController implements RenderController
|
||||||
$renderer->addVar('isLoggedIn', $isLogin);
|
$renderer->addVar('isLoggedIn', $isLogin);
|
||||||
if (!$isLogin) {
|
if (!$isLogin) {
|
||||||
Asset::get()->addCSS('login', 'login.css');
|
Asset::get()->addCSS('login', 'login.css');
|
||||||
|
} else {
|
||||||
|
Asset::get()->addCSS('admin', 'admin-panel.css');
|
||||||
}
|
}
|
||||||
Asset::get()->addCSS('styles', 'style.css', 1);
|
Asset::get()->addCSS('styles', 'style.css', 1);
|
||||||
Asset::get()->addJS('scripts', 'scripts.min.js', 1);
|
Asset::get()->addJS('scripts', 'scripts.min.js', 1);
|
||||||
|
|
|
||||||
144
tpl/admin/admin-panel.php
Normal file
144
tpl/admin/admin-panel.php
Normal file
|
|
@ -0,0 +1,144 @@
|
||||||
|
<main>
|
||||||
|
<nav class="menu">
|
||||||
|
<h1 class="logo">Venom</h1>
|
||||||
|
<div data-link="" class="active">Overview</div>
|
||||||
|
<div data-link="">Roles</div>
|
||||||
|
<div data-link="">Users</div>
|
||||||
|
<div data-link="">Venom-Status</div>
|
||||||
|
<div data-link="">Pages</div>
|
||||||
|
<div data-link="">Editor</div>
|
||||||
|
<div data-link="">Meta Data</div>
|
||||||
|
<div data-link="">SEO-URL</div>
|
||||||
|
<div data-link="/admin/api/login/logout">Ausloggen</div>
|
||||||
|
</nav>
|
||||||
|
<div class="content-area">
|
||||||
|
<h2>Roles</h2>
|
||||||
|
<div class="max-width">
|
||||||
|
<h3>Overview</h3>
|
||||||
|
<div class="text">Admin (secured)
|
||||||
|
<div class="icon icon-visibility"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text">Moderator
|
||||||
|
<div class="icon icon-edit"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text">Predator
|
||||||
|
<div class="icon icon-edit"></div>
|
||||||
|
</div>
|
||||||
|
<h3>Add new Role</h3>
|
||||||
|
<div class="add-new-role max-width">
|
||||||
|
<div class="input-group">
|
||||||
|
<input id="new-role-name" required name="newRoleName">
|
||||||
|
<label for="new-role-name">New Role Name</label>
|
||||||
|
<span class="error">New Role Name is required</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon icon-add"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div>
|
||||||
|
<h2>Role: Admin</h2>
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="role-active" required name="roleActive">
|
||||||
|
<label for="role-active"></label>
|
||||||
|
<span>If enabled role is active.</span>
|
||||||
|
</div>
|
||||||
|
<div class="change-role-name max-width">
|
||||||
|
<h3>Change Name</h3>
|
||||||
|
<div class="input-group">
|
||||||
|
<input id="change-role-name" required name="roleName">
|
||||||
|
<label for="change-role-name">Role Name: Admin</label>
|
||||||
|
<span class="error">Role Name is required</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="change-view-permissions">
|
||||||
|
<h3>View Permissions</h3>
|
||||||
|
<div class="checkbox-group">
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="permission-view-meta-data" required
|
||||||
|
name="permissionViewMetaData">
|
||||||
|
<label for="permission-view-meta-data"></label>
|
||||||
|
<span>Meta-Data</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="permission-view-pages" required name="permissionViewPages">
|
||||||
|
<label for="permission-view-pages"></label>
|
||||||
|
<span>Pages</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="permission-view-roles" required name="permissionViewRoles">
|
||||||
|
<label for="permission-view-roles"></label>
|
||||||
|
<span>Roles</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="permission-view-seo-url" required name="permissionViewSeoUrl">
|
||||||
|
<label for="permission-view-seo-url"></label>
|
||||||
|
<span>SEO-URL</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="permission-view-label" required name="permissionViewUsers">
|
||||||
|
<label for="permission-view-label"></label>
|
||||||
|
<span>Users</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="permission-view-venom-status" required
|
||||||
|
name="permissionViewVenomStatus">
|
||||||
|
<label for="permission-view-venom-status"></label>
|
||||||
|
<span>VENOM-Status</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="change-view-permissions">
|
||||||
|
<h3>View Permissions</h3>
|
||||||
|
<div class="checkbox-group">
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="permission-view-meta-data" required
|
||||||
|
name="permissionViewMetaData">
|
||||||
|
<label for="permission-view-meta-data"></label>
|
||||||
|
<span>Meta-Data</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="permission-view-pages" required name="permissionViewPages">
|
||||||
|
<label for="permission-view-pages"></label>
|
||||||
|
<span>Pages</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="permission-view-roles" required name="permissionViewRoles">
|
||||||
|
<label for="permission-view-roles"></label>
|
||||||
|
<span>Roles</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="permission-view-seo-url" required name="permissionViewSeoUrl">
|
||||||
|
<label for="permission-view-seo-url"></label>
|
||||||
|
<span>SEO-URL</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="permission-view-label" required name="permissionViewUsers">
|
||||||
|
<label for="permission-view-label"></label>
|
||||||
|
<span>Users</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="switch">
|
||||||
|
<input type="checkbox" id="permission-view-venom-status" required
|
||||||
|
name="permissionViewVenomStatus">
|
||||||
|
<label for="permission-view-venom-status"></label>
|
||||||
|
<span>VENOM-Status</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn btn--primary">
|
||||||
|
<span class="btn-ripple"></span>
|
||||||
|
<span class="btn__content">Save</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
@ -12,14 +12,14 @@ use Venom\Views\Asset;
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<title>Venom Admin Interface</title>
|
<title>Venom Admin Interface</title>
|
||||||
<?php Asset::get()->renderCSS(); ?>
|
<?php Asset::get()->renderCSS(); ?>
|
||||||
|
<!--link rel="stylesheet" href="/theme/admin/css/admin-panel.css"-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<?php
|
<?php
|
||||||
if (!$this->getVar('isLoggedIn')) {
|
if (!$this->getVar('isLoggedIn')) {
|
||||||
$this->renderTemplate('login');
|
$this->renderTemplate('login');
|
||||||
} else {
|
} else {
|
||||||
echo 'Admin Interface!';
|
$this->renderTemplate('admin-panel');
|
||||||
echo '<a href="/admin/api/login/logout">Ausloggen</a>';
|
|
||||||
}
|
}
|
||||||
Asset::get()->renderJS();
|
Asset::get()->renderJS();
|
||||||
?>
|
?>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue