Skip to content

Instantly share code, notes, and snippets.

@sojournercntl

sojournercntl/base.html

Created November 24, 2019 19:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sojournercntl/dfd0e64b5600532432c955d6631870ce to your computer and use it in GitHub Desktop.
Save sojournercntl/dfd0e64b5600532432c955d6631870ce to your computer and use it in GitHub Desktop.
Download ZIP
Webfactory - Basic Banking Style
Raw
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Basic Online Banking</title>
<link rel="stylesheet" href="http://static.sdev-software.com/cdn/helix/vendors/iconfonts/mdi/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="http://static.sdev-software.com/cdn/helix/vendors/css/vendor.bundle.base.css" />
<link rel="stylesheet" href="http://static.sdev-software.com/cdn/helix/vendors/css/vendor.bundle.addons.css" />
<link rel="stylesheet" href="http://static.sdev-software.com/cdn/helix/css/style.css" />
<link rel="shortcut icon" href="http://static.sdev-software.com/cdn/helix/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<nav class="navbar horizontal-layout col-lg-12 col-12 p-0">
<div class="container d-flex flex-row">
<div class="text-center navbar-brand-wrapper d-flex align-items-top">
<a class="navbar-brand brand-logo" href="index.xhtml"><img src="images/logo-inverse.svg"
alt="logo" /></a>
<a class="navbar-brand brand-logo-mini" href="index.xhtml"><img src="images/logo-mini.svg"
alt="logo" /></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-center">
<form class="search-field ml-auto" action="index.xhtml#">
<div class="form-group mb-0">
<div class="input-group"></div>
</div>
</form>
<ul class="navbar-nav navbar-nav-right mr-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="UserDropdown" href="index.html#"
data-toggle="dropdown" aria-expanded="false">
<span>Username</span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown"
aria-labelledby="UserDropdown">
<a class="dropdown-item mt-2">
Manage Accounts
</a>
<a class="dropdown-item">
Change Password
</a>
<a class="dropdown-item">
Sign Out
</a>
</div>
</li>
</ul>
<button class="navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="mdi mdi-menu"></span>
</button>
</div>
</div>
<!-- Navbar -->
<div class="nav-bottom">
<div class="container">
<ul class="nav page-navigation">
<li class="nav-item">
<a href="index.html" class="nav-link"><i class="link-icon mdi mdi-television"></i><span
class="menu-title">Finanzen</span></a>
</li>
<li class="nav-item">
<a href="pages/widgets.html" class="nav-link"><i class="link-icon mdi mdi-account"></i><span
class="menu-title">Verfüeger</span></a>
</li>
<li class="nav-item">
<a href="pages/widgets.html" class="nav-link"><i class="link-icon mdi mdi-library"></i><span
class="menu-title">Konten</span></a>
</li>
<li class="nav-item">
<a href="pages/widgets.html" class="nav-link"><i
class="link-icon mdi mdi-shield-half-full"></i><span
class="menu-title">Berechtigungen</span></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<div class="main-panel">
<div class="content-wrapper">
<!-- TODO: Content here -->
</div>
<footer class="footer">
<div class="container-fluid clearfix">
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © 2019
Webf@ctory. All rights reserved.</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"><a
href="impressum.xhtml">Impressum</a></span>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="http://static.sdev-software.com/cdn/helix/vendors/js/vendor.bundle.base.js"></script>
<script src="vendors/js/vendor.bundle.addons.js"></script>
<script src="http://static.sdev-software.com/cdn/helix/js/template.js"></script>
<script src="http://static.sdev-software.com/cdn/helix/js/dashboard.js"></script>
</body>
</html>
Raw
finanzuebersicht.html
<!-- Finanzübersicht -->
<div class="row">
<div class="col-12 grid-margin">
<div class="card card-statistics">
<div class="row">
<div class="card-col col-xl-3 col-lg-3 col-md-3 col-6">
<div class="card-body">
<div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
<i class="mdi mdi-account-multiple text-primary mr-0 mr-sm-4 icon-lg"></i>
<div class="wrapper text-center text-sm-left">
<p class="card-text mb-0">Konten</p>
<div class="fluid-container">
<h3 class="card-title mb-0">3</h3>
</div>
</div>
</div>
</div>
</div>
<div class="card-col col-xl-3 col-lg-3 col-md-3 col-6">
<div class="card-body">
<div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
<i class="mdi mdi-book-open-page-variant text-primary mr-0 mr-sm-4 icon-lg"></i>
<div class="wrapper text-center text-sm-left">
<p class="card-text mb-0">Umsätze</p>
<div class="fluid-container">
<h3 class="card-title mb-0">27</h3>
</div>
</div>
</div>
</div>
</div>
<div class="card-col col-xl-3 col-lg-3 col-md-3 col-6">
<div class="card-body">
<div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
<i class="mdi mdi-folder text-primary mr-0 mr-sm-4 icon-lg"></i>
<div class="wrapper text-center text-sm-left">
<p class="card-text mb-0">Saldo</p>
<div class="fluid-container">
<h3 class="card-title mb-0">3502,00</h3>
</div>
</div>
</div>
</div>
</div>
<div class="card-col col-xl-3 col-lg-3 col-md-3 col-6">
<div class="card-body">
<div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
<i class="mdi mdi-file-find text-primary mr-0 mr-sm-4 icon-lg"></i>
<div class="wrapper text-center text-sm-left">
<p class="card-text mb-0">Saldo (akt)</p>
<div class="fluid-container">
<h3 class="card-title mb-0">302,00</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 grid-margin">
<div class="card">
<div class="card-body">
<h2>Finanzübersicht</h2>
<hr>
<!-- TODO: Output Umsatztabelle -->
</div>
</div>
</div>
</div>
Raw
helix.md

Helix Admin

Base Page Layout

http://static.sdev-software.com/cdn/helix/

<!-- Header -->
<link rel="stylesheet" href="http://static.sdev-software.com/cdn/helix/vendors/iconfonts/mdi/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="http://static.sdev-software.com/cdn/helix/vendors/css/vendor.bundle.base.css" />
<link rel="stylesheet" href="http://static.sdev-software.com/cdn/helix/vendors/css/vendor.bundle.addons.css" />
<!-- Header -->
<link rel="stylesheet" href="http://static.sdev-software.com/cdn/helix/css/style.css" />
<link rel="shortcut icon" href="http://static.sdev-software.com/cdn/helix/images/favicon.png" />

The script part looks like the following.

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Basic Online Banking</title>

    <link rel="stylesheet" href="http://static.sdev-software.com/cdn/helix/vendors/iconfonts/mdi/css/materialdesignicons.min.css" />
    <link rel="stylesheet" href="http://static.sdev-software.com/cdn/helix/vendors/css/vendor.bundle.base.css" />
    <link rel="stylesheet" href="http://static.sdev-software.com/cdn/helix/vendors/css/vendor.bundle.addons.css" />

    <link rel="stylesheet" href="http://static.sdev-software.com/cdn/helix/css/style.css" />
    <link rel="shortcut icon" href="http://static.sdev-software.com/cdn/helix/images/favicon.png" />
</head>

<body>
    <div class="container-scroller">
        <nav class="navbar horizontal-layout col-lg-12 col-12 p-0">
            <div class="container d-flex flex-row">
                <div class="text-center navbar-brand-wrapper d-flex align-items-top">
                    <a class="navbar-brand brand-logo" href="index.xhtml"><img src="images/logo-inverse.svg"
                            alt="logo" /></a>
                    <a class="navbar-brand brand-logo-mini" href="index.xhtml"><img src="images/logo-mini.svg"
                            alt="logo" /></a>
                </div>
                <div class="navbar-menu-wrapper d-flex align-items-center">
                    <form class="search-field ml-auto" action="index.xhtml#">
                        <div class="form-group mb-0">
                            <div class="input-group"></div>
                        </div>
                    </form>
                    <ul class="navbar-nav navbar-nav-right mr-0">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" id="UserDropdown" href="index.html#"
                                data-toggle="dropdown" aria-expanded="false">
                                <span>Username</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right navbar-dropdown"
                                aria-labelledby="UserDropdown">
                                <a class="dropdown-item mt-2">
                                    Manage Accounts
                                </a>
                                <a class="dropdown-item">
                                    Change Password
                                </a>
                                <a class="dropdown-item">
                                    Sign Out
                                </a>
                            </div>
                        </li>
                    </ul>
                    <button class="navbar-toggler align-self-center" type="button" data-toggle="minimize">
                        <span class="mdi mdi-menu"></span>
                    </button>
                </div>
            </div>
            <!-- Navbar -->
            <div class="nav-bottom">
                <div class="container">
                    <ul class="nav page-navigation">
                        <li class="nav-item">
                            <a href="index.html" class="nav-link"><i class="link-icon mdi mdi-television"></i><span
                                    class="menu-title">Finanzen</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="pages/widgets.html" class="nav-link"><i class="link-icon mdi mdi-account"></i><span
                                    class="menu-title">Verfüeger</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="pages/widgets.html" class="nav-link"><i class="link-icon mdi mdi-library"></i><span
                                    class="menu-title">Konten</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="pages/widgets.html" class="nav-link"><i
                                    class="link-icon mdi mdi-shield-half-full"></i><span
                                    class="menu-title">Berechtigungen</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- partial -->
        <div class="container-fluid page-body-wrapper">
            <div class="main-panel">
                <div class="content-wrapper">
                    <!-- TODO: Content here -->
                </div>

                <footer class="footer">
                    <div class="container-fluid clearfix">
                        <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © 2019
                            Webf@ctory. All rights reserved.</span>
                        <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"><a
                                href="impressum.xhtml">Impressum</a></span>
                    </div>
                </footer>
                <!-- partial -->
            </div>
            <!-- main-panel ends -->
        </div>
        <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->

    <!-- plugins:js -->
    <script src="http://static.sdev-software.com/cdn/helix/vendors/js/vendor.bundle.base.js"></script>
    <script src="vendors/js/vendor.bundle.addons.js"></script>

    <script src="http://static.sdev-software.com/cdn/helix/js/template.js"></script>
    <script src="http://static.sdev-software.com/cdn/helix/js/dashboard.js"></script>
</body>

</html>
Raw
verfueger-anlegen.html
<!-- TODO: Content here -->
<div class="col-md-6 d-flex align-items-stretch">
<div class="row flex-grow">
<div class="col-12 grid-margin">
<div class="card">
<div class="card-body">
<h4 class="card-title">Verfüger</h4>
<p class="card-description">
Legen sie einen neuen Verfüger an
</p>
<form class="forms-sample">
<div class="form-group">
<label for="exampleInputEmail1">Verfüger Nr.</label>
<input type="number" class="form-control" id="exampleInputEmail1" placeholder="">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="">
</div>
<button type="submit" class="btn btn-success mr-2">Erstellen</button>
<button class="btn btn-light">Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
Raw
verfueger-verwalten.html
<!-- Finanzübersicht -->
<div class="row">
<div class="col-12 grid-margin">
<div class="card">
<div class="card-body">
<h2>Verfügerverwaltung</h2>
<!-- TODO: Output Umsatztabelle -->
<button class="btn btn-success">Neu Anlegen</button>
<br /><br />
<table class="table table-hover">
<tr>
<td>Verfüger Nr.</td>
<td>Username</td>
<td>Bearbeiten</td>
</tr>
<tr>
<td>1</td>
<td>marcus</td>
<td><a>Delete</a> <a>Edit</a></td>
</tr>
<tr>
<td>1</td>
<td>marcus</td>
<td><a>Delete</a> <a>Edit</a></td>
</tr>
<tr>
<td>1</td>
<td>marcus</td>
<td><a>Delete</a> <a>Edit</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment