venom/tpl/admin/admin-panel.php

<main>
    <nav class="menu">
        <h1 class="logo">Venom</h1>
        <div data-link="">Meta Data</div>
        <div data-link="" class="active">Overview</div>
        <div data-link="">Pages</div>
        <div data-link="">Roles</div>
        <div data-link="">SEO-URL</div>
        <div data-link="">Users</div>
        <div data-link="">Venom-Status</div>
        <div data-link="/admin/api/login/logout">Ausloggen</div>
    </nav>
    <div class="content-area">
        <v-table>
            <v-table-header>
                <h2>Roles</h2>
            </v-table-header>
            <v-table-row>
                <div>
                    <h3>Overview</h3>
                    <div class="icon-cont">
                        <div class="icon icon-visibility"></div>
                        <div class="text">Admin (secured)</div>
                    </div>
                    <div class="icon-cont">
                        <div class="icon icon-edit"></div>
                        <div class="text">Moderator</div>
                    </div>
                    <div class="icon-cont">
                        <div class="icon icon-edit"></div>
                        <div class="text">Predator</div>
                    </div>
                </div>
                <div>
                    <h3>Add new Role</h3>
                    <v-button
                            class="input-group"
                            data-label="New Role Name"
                            id="new-role-name"
                            required
                            name="newRoleName"
                            data-error="New Role Name is required"></v-button>
                    <button class="btn btn--primary">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Add</span>
                    </button>
                </div>
            </v-table-row>
            <v-table-footer>
                Dies ist der Footer.
            </v-table-footer>
        </v-table>


        <v-table>
            <v-table-header>
                <h2>Role: Admin</h2>
            </v-table-header>
            <v-table-row>
                <div class="icon-cont">
                    <div class="icon icon-arrow-back"></div>
                </div>
            </v-table-row>
            <v-table-row>
                <div>
                    <h3>Role Status</h3>
                    <div class="switch fix-pad">
                        <input type="checkbox" id="role-active" required name="roleActive">
                        <label for="role-active"></label>
                        <span>If enabled role is active.</span>
                    </div>
                </div>
                <div>
                    <h3>Role Name</h3>
                    <v-button
                            class="input-group"
                            data-label="Change Name"
                            id="change-role-name"
                            required
                            name="roleName"
                            data-error="Role Name is required"></v-button>
                </div>
            </v-table-row>
            <v-table-row>
                <div class="modules">
                    <h4>Module</h4>
                    <div>Meta-Data</div>
                    <div>Pages</div>
                    <div>Roles</div>
                    <div>SEO-URL</div>
                    <div>Users</div>
                    <div>VENOM-Status</div>
                </div>
                <div>
                    <h4>Edit</h4>
                    <div class="switch">
                        <input type="checkbox" id="permission-edit-meta-data" required
                               name="permissionEditMetaData">
                        <label for="permission-edit-meta-data"></label>
                        <span></span>
                    </div>
                    <div class="switch">
                        <input type="checkbox" id="permission-edit-pages" required name="permissionEditPages">
                        <label for="permission-edit-pages"></label>
                        <span></span>
                    </div>
                    <div class="switch">
                        <input type="checkbox" id="permission-edit-roles" required name="permissionEditRoles">
                        <label for="permission-edit-roles"></label>
                        <span></span>
                    </div>
                    <div class="switch">
                        <input type="checkbox" id="permission-edit-seo-url" required name="permissionEditSeoUrl">
                        <label for="permission-edit-seo-url"></label>
                        <span></span>
                    </div>
                    <div class="switch">
                        <input type="checkbox" id="permission-edit-label" required name="permissionEditUsers">
                        <label for="permission-edit-label"></label>
                        <span></span>
                    </div>
                    <div class="switch">
                        <input type="checkbox" id="permission-edit-venom-status" required
                               name="permissionEditVenomStatus">
                        <label for="permission-edit-venom-status"></label>
                        <span></span>
                    </div>
                </div>
                <div>
                    <h4>View</h4>
                    <div class="switch">
                        <input type="checkbox" id="permission-view-meta-data" required
                               name="permissionViewMetaData">
                        <label for="permission-view-meta-data"></label>
                        <span></span>
                    </div>

                    <div class="switch">
                        <input type="checkbox" id="permission-view-pages" required name="permissionViewPages">
                        <label for="permission-view-pages"></label>
                        <span></span>
                    </div>

                    <div class="switch">
                        <input type="checkbox" id="permission-view-roles" required name="permissionViewRoles">
                        <label for="permission-view-roles"></label>
                        <span></span>
                    </div>

                    <div class="switch">
                        <input type="checkbox" id="permission-view-seo-url" required name="permissionViewSeoUrl">
                        <label for="permission-view-seo-url"></label>
                        <span></span>
                    </div>

                    <div class="switch">
                        <input type="checkbox" id="permission-view-label" required name="permissionViewUsers">
                        <label for="permission-view-label"></label>
                        <span></span>
                    </div>

                    <div class="switch">
                        <input type="checkbox" id="permission-view-venom-status" required
                               name="permissionViewVenomStatus">
                        <label for="permission-view-venom-status"></label>
                        <span></span>
                    </div>
                </div>
            </v-table-row>
            <v-table-row class="btn-line">
                <div>
                    <button class="btn btn--valid">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Save</span>
                    </button>
                    <button class="btn btn--primary">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Reset</span>
                    </button>
                    <button class="btn btn--warn">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Delete Role</span>
                    </button>
                </div>
            </v-table-row>
            <v-table-footer>
                Dies ist der Footer.
            </v-table-footer>
        </v-table>


        <v-table>
            <v-table-header>
                <h2>Users</h2>
            </v-table-header>
            <v-table-row>
                <div>
                    <h3>All Users</h3>
                    <div class="icon-cont">
                        <div class="icon icon-edit"></div>
                        <div class="text">ALLE Alphabetisch ordnen!</div>
                    </div>
                    <div class="icon-cont">
                        <div class="icon icon-edit"></div>
                        <div class="text">derflieger (Ina Ruh)</div>
                    </div>
                    <div class="icon-cont">
                        <div class="icon icon-edit"></div>
                        <div class="text">engineertrooper (Dominic Seela)</div>
                    </div>
                    <div class="icon-cont">
                        <div class="icon icon-edit"></div>
                        <div class="text">versustunez (Maurice Grönwoldt)</div>
                    </div>
                    <div class="icon-cont">
                        <div class="icon icon-edit"></div>
                        <div class="text">vollglaswasser (Marie Joseph)</div>
                    </div>
                </div>
                <div>
                    <h3>Add new User</h3>
                    <div class="add-new-role max-width">
                        <v-button
                                class="input-group"
                                data-label="New User Name"
                                required
                                name="newUserName"
                                data-error="New User Name is required"></v-button>
                    </div>
                    <button class="btn btn--primary">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Add User</span>
                    </button>
                </div>
            </v-table-row>
            <v-table-footer>
                Dies ist der Footer.
            </v-table-footer>
        </v-table>


        <v-table>
            <v-table-header>
                <h2>User: engineertrooper</h2>
            </v-table-header>
            <v-table-row>
                <div class="icon-cont">
                    <div class="icon icon-arrow-back"></div>
                </div>
            </v-table-row>
            <v-table-row>
                <div>
                    <v-button
                            class="input-group"
                            data-label="Username"
                            required
                            name="newUserName"
                            data-error="New User Name is required">EngineerTrooper
                    </v-button>
                    <v-button
                            class="input-group"
                            data-label="Author Name"
                            required
                            name="newAuthorName"
                            data-error="Author Name is required">Dominic Seela
                    </v-button>
                </div>
                <div>
                    <v-button
                            class="input-group"
                            data-label="E-Mail"
                            required
                            name="newEMailAddress"
                            data-error="E-Mail Address is required">kontakt@engineertrooper.com
                    </v-button>
                </div>
                <div>
                    <v-button
                            class="input-group"
                            data-label="E-Mail"
                            required
                            name="newEMailAddress"
                            data-error="E-Mail Address is required">kontakt@engineertrooper.com
                    </v-button>
                    <div class="description">New Password:</div>
                    <div class="input-group">
                        <input id="new-password" required name="newPassword">
                        <label for="new-password"></label>
                        <span class="error">New Password is required</span>
                    </div>
                    <div class="description">New Password repeat:</div>
                    <div class="input-group">
                        <input id="new-password-repeat" required name="newPasswordRepeat">
                        <label for="new-password-repeat"></label>
                        <span class="error">New Password Repeat is required</span>
                    </div>
                </div>
            </v-table-row>
            <v-table-row class="btn-line">
                <div>
                    <button class="btn btn--valid">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Save</span>
                    </button>
                    <button class="btn btn--primary">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Reset</span>
                    </button>
                    <button class="btn btn--warn">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Delete User</span>
                    </button>
                </div>
            </v-table-row>
            <v-table-footer>
                Dies ist der Footer.
            </v-table-footer>
        </v-table>

        <v-table>
            <v-table-header>
                <h2>Pages</h2>
            </v-table-header>
            <v-table-row>
                <h3>All Pages</h3>
            </v-table-row>
            <v-table-row class="grid12">
                <div class="col-1to6">Name</div>
                <div class="col-6to9">Edit, View, Delete</div>
                <div class="col-9to10">ID</div>
                <div class="col-11to13">Status</div>
            </v-table-row>
            <v-table-row class="grid12">
                <div class="col-1to6">Sonnenuntergang am Meer</div>
                <div class="col-6to9 inline">
                    <div class="icon-cont">
                        <div class="icon icon-edit"></div>
                    </div>
                    <div class="icon-cont">
                        <div class="icon icon-visibility"></div>
                    </div>
                    <div class="icon-cont">
                        <div class="icon icon-delete"></div>
                    </div>
                </div>
                <div class="col-9to10">
                    4
                </div>
                <div class="col-11to13">
                    <v-select required name="pageVisibility">
                        <v-label empty="Page Visibility"></v-label>
                        <v-options>
                            <v-option value="visible">Visible</v-option>
                            <v-option value="privat">Privat</v-option>
                        </v-options>
                    </v-select>
                </div>
            </v-table-row>
            <v-table-row class="grid12">
                <div class="col-1to6">Fernsehen zu Zweit mit Nebenwirkungen</div>
                <div class="col-6to9 inline">
                    <div class="icon-cont">
                        <div class="icon icon-edit"></div>
                    </div>
                    <div class="icon-cont">
                        <div class="icon icon-visibility"></div>
                    </div>
                    <div class="icon-cont">
                        <div class="icon icon-delete"></div>
                    </div>
                </div>
                <div class="col-9to10">
                    7
                </div>
                <div class="col-11to13">
                    <v-select required name="pageVisibility">
                        <v-label empty="Page Visibility"></v-label>
                        <v-options>
                            <v-option value="visible">Visible</v-option>
                            <v-option value="privat">Privat</v-option>
                        </v-options>
                    </v-select>
                </div>
            </v-table-row>
            <v-table-row class="grid12">
                <div class="col-1to6">Spiele 1 und 2 und 3</div>
                <div class="col-6to9 inline">
                    <div class="icon-cont">
                        <div class="icon icon-edit"></div>
                    </div>
                    <div class="icon-cont">
                        <div class="icon icon-visibility"></div>
                    </div>
                    <div class="icon-cont">
                        <div class="icon icon-delete"></div>
                    </div>
                </div>
                <div class="col-9to10">
                    14
                </div>
                <div class="col-11to13">
                    <v-select required name="pageVisibility">
                        <v-label empty="Page Visibility"></v-label>
                        <v-options>
                            <v-option value="visible">Visible</v-option>
                            <v-option value="privat">Privat</v-option>
                        </v-options>
                    </v-select>
                </div>
            </v-table-row>
            <v-table>
                <div>
                    <h3>Add new Page</h3>
                    <v-button
                            class="input-group"
                            data-label="New Page Name"
                            id="new-page-name"
                            required
                            name="newPageName"
                            data-error="New Page Name is required"></v-button>
                    <button class="btn btn--primary">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Add Page</span>
                    </button>
                </div>
            </v-table>
            <v-table-footer>
                Dies ist der Footer.
            </v-table-footer>
        </v-table>


        <v-table>
            <v-table-header>
                <h2>Page: Fernsehen zu Zweit mit Nebenwirkungen</h2>
            </v-table-header>
            <v-table-row>
                <div class="icon-cont">
                    <div class="icon icon-arrow-back"></div>
                </div>
            </v-table-row>
            <v-table-row>
                <h3>Seitenname:</h3>
            </v-table-row>
            <v-table-row>
                <v-button
                        class="input-group"
                        data-label="New Page Name"
                        id="new-page-name"
                        required
                        name="newPageName"
                        data-error="New Page Name is required"></v-button>
            </v-table-row>
            <v-table-row>
                <v-editor name="pageTextArea" rows="25">!</v-editor>
            </v-table-row>
            <v-table-row class="btn-line">
                <div>
                    <button class="btn btn--valid">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Save</span>
                    </button>
                </div>
            </v-table-row>
            <v-table-row>
                <h3>Page Information</h3>
            </v-table-row>
            <v-table-row class="grid12">
                <div class="col-1to4">Author</div>
                <div class="col-5to6">ID</div>
                <div class="col-6to11">SEO-URL</div>
                <div class="col-11to13">Status</div>
            </v-table-row>
            <v-table-row class="grid12">
                <div class="col-1to4">
                    <v-select required name="pageVisibility">
                        <v-label empty="Current Author"></v-label>
                        <v-options>
                            <v-option value="engineertrooper">engineertrooper (Dominic Seela)</v-option>
                            <v-option value="versustunez">versustunez (Maurice Grönwoldt)</v-option>
                        </v-options>
                    </v-select>
                </div>
                <div class="col-5to6">
                    7
                </div>
                <div class="col-6to11">
                    https://beispiel.seo-url.de/blabla/23455234
                </div>
                <div class="col-11to13">
                    <v-select required name="pageVisibility">
                        <v-label empty="Page Visibility"></v-label>
                        <v-options>
                            <v-option value="visible">Visible</v-option>
                            <v-option value="privat">Privat</v-option>
                        </v-options>
                    </v-select>
                </div>
            </v-table-row>
            <v-table-row class="btn-line">
                <div>
                    <button class="btn btn--valid">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Save</span>
                    </button>
                    <button class="btn btn--primary">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Reset</span>
                    </button>
                    <button class="btn btn--warn">
                        <span class="btn-ripple"></span>
                        <span class="btn__content">Delete Page</span>
                    </button>
                </div>
            </v-table-row>
            <v-table-footer>
                Dies ist der Footer
            </v-table-footer>
        </v-table>


        <v-table>
            <v-table-header>
                <h2>Next header line</h2>
            </v-table-header>
            <v-table-row>
                Hier steht Content
            </v-table-row>
            <v-table-footer>
                Dies ist der Footer
            </v-table-footer>
        </v-table>
    </div>
</main>