mirror of
https://github.com/hargata/lubelog.git
synced 2025-12-10 00:46:08 -06:00
213 lines
10 KiB
HTML
213 lines
10 KiB
HTML
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
<title>LubeLogger</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<style>
|
|
.full-height {
|
|
height: 80vh;
|
|
max-height: 80vh;
|
|
overflow:auto;
|
|
padding-left: 5%;
|
|
padding-right: 5%;
|
|
}
|
|
.full-height.alt {
|
|
background-color: #191B1E;
|
|
}
|
|
.frosted {
|
|
background-color: rgba(33, 37, 41, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
.carousel-img {
|
|
height: 50vh;
|
|
width: 100%;
|
|
object-fit: scale-down;
|
|
border: #495057 1px solid;
|
|
border-radius: .375em;
|
|
padding: 2%;
|
|
background-color: #212529;
|
|
}
|
|
.big-container{
|
|
width: 100%;
|
|
}
|
|
.half {
|
|
width: 50%;
|
|
}
|
|
h6.half{
|
|
padding: 15px 10px;
|
|
}
|
|
@media (max-width: 991px) {
|
|
.half {
|
|
width: 100%;
|
|
}
|
|
h6.half {
|
|
order: 1;
|
|
}
|
|
.full-height{
|
|
flex-direction:column;
|
|
justify-content:center;
|
|
}
|
|
.carousel-img {
|
|
height: 40vh;
|
|
}
|
|
}
|
|
.ll-footer {
|
|
padding: 15px 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid sticky-top frosted" style="padding-top: 7px;">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-grow-1">
|
|
<a href="#"><img src="lubelogger_logo.png"/></a>
|
|
</div>
|
|
<ul class="nav d-none d-lg-flex">
|
|
<li class="nav-item"><a class="nav-link" href="#showcase"><i class="bi bi-eyeglasses me-2"></i>Showcase</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#features"><i class="bi bi-card-checklist me-2"></i>Features</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#demo"><i class="bi bi-eyedropper me-2"></i>Demo</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="https://docs.lubelogger.com"><i class="bi bi-file-text me-2"></i>Documentation</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="https://github.com/hargata/lubelog"><i class="bi bi-git me-2"></i>GitHub Repo</a></li>
|
|
</ul>
|
|
<ul class="nav d-flex d-lg-none">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="dropdown-item"><a class="nav-link" href="#showcase"><i class="bi bi-eyeglasses me-2"></i>Showcase</a></li>
|
|
<li class="dropdown-item"><a class="nav-link" href="#features"><i class="bi bi-card-checklist me-2"></i>Features</a></li>
|
|
<li class="dropdown-item"><a class="nav-link" href="#demo"><i class="bi bi-eyedropper me-2"></i>Demo</a></li>
|
|
<li class="dropdown-item"><a class="nav-link" href="https://docs.lubelogger.com"><i class="bi bi-file-text me-2"></i>Documentation</a></li>
|
|
<li class="dropdown-item"><a class="nav-link" href="https://github.com/hargata/lubelog"><i class="bi bi-git me-2"></i>GitHub Repo</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="big-container">
|
|
<div class="full-height d-flex align-items-center">
|
|
<h6 class="display-6 half text-center">Self-Hosted, Open-Source, Unconventionally-Named Vehicle Maintenance Records and Fuel Mileage Tracker<br/><a class='me-2 mt-2 btn btn-lg btn-primary' href="https://docs.lubelogger.com/Installation/Getting%20Started"><span class='d-flex align-items-center'>Get Started<i style="font-size:1rem;" class="ms-2 bi bi-box-arrow-up-right"></i></span></a><a class='mt-2 btn-lg btn btn-outline-primary' href="#demo">Try the demo</a></h6>
|
|
<div class="half">
|
|
<img class="carousel-img" src="garage.png"/>
|
|
</div>
|
|
</div>
|
|
<div id="showcase" class="full-height alt d-flex align-items-center">
|
|
<div class="half">
|
|
<img class="carousel-img" src="dashboard.png"/>
|
|
</div>
|
|
<h6 class="half display-6 text-center">Get an overview of your vehicle expenses<br/><small class="text-secondary">View expenses by year, month, and category</small></h6>
|
|
</div>
|
|
<div class="full-height d-flex align-items-center">
|
|
<h6 class="half display-6 text-center">Plan and track the progress of your To-Do's<br/><small class="text-secondary">Group by type, priority, and progress</small></h6>
|
|
<div class="half">
|
|
<img class="carousel-img" src="planner.png"/>
|
|
</div>
|
|
</div>
|
|
<div class="full-height alt d-flex align-items-center">
|
|
<div class="half">
|
|
<img class="carousel-img" src="servicerecord.png"/>
|
|
</div>
|
|
<h6 class="half display-6 text-center">Track all the work done on your vehicles<br/><small class="text-secondary">Attach documents such as invoices and receipts</small></h6>
|
|
</div>
|
|
<div class="full-height d-flex align-items-center">
|
|
<h6 class="half display-6 text-center">Track the fuel economy of your vehicles<br/><small class="text-secondary">Supports MPG, UK MPG, L/100KM, and KM/L</small></h6>
|
|
<div class="half">
|
|
<img class="carousel-img" src="fuelmileage.png"/>
|
|
</div>
|
|
</div>
|
|
<div class="full-height alt d-flex align-items-center">
|
|
<div class="half">
|
|
<img class="carousel-img" src="reminder.png"/>
|
|
</div>
|
|
<h6 class="half display-6 text-center">Never miss another scheduled maintenance<br/><small class="text-secondary">Set recurring reminders based on date, odometer, or whichever comes first</small></h6>
|
|
</div>
|
|
<div id="features" class="full-height d-flex align-items-center justify-content-center flex-column">
|
|
<h6 class="display-6 mb-3 text-center">Core Features</h6>
|
|
<div style="width:100%;" class="d-none d-md-flex row row-cols-1 row-cols-md-3 g-4 justify-content-center">
|
|
<div class="col text-center">
|
|
<span class="display-6"><i class="bi bi-file-bar-graph"></i></span><br class="d-none d-md-block"/>
|
|
<span class="lead">Dashboard</span>
|
|
</div>
|
|
<div class="col text-center">
|
|
<span class="display-6"><i class="bi bi-bar-chart-steps"></i></span><br class="d-none d-md-block"/>
|
|
<span class="lead">Planner</span>
|
|
</div>
|
|
<div class="col text-center">
|
|
<span class="display-6"><i class="bi bi-card-checklist"></i></span><br class="d-none d-md-block"/>
|
|
<span class="lead">Vehicle Records</span>
|
|
</div>
|
|
<div class="col text-center">
|
|
<span class="display-6"><i class="bi bi-fuel-pump"></i><br class="d-none d-md-block"/>
|
|
<span class="lead">Fuel Tracker</span>
|
|
</div>
|
|
<div class="col text-center">
|
|
<span class="display-6"><i class="bi bi-shop"></i></span><br class="d-none d-md-block"/>
|
|
<span class="lead">Supplies</span>
|
|
</div>
|
|
<div class="col text-center">
|
|
<span class="display-6"><i class="bi bi bi-bell"></i></span><br class="d-none d-md-block"/>
|
|
<span class="lead">Reminders</span>
|
|
</div>
|
|
</div>
|
|
<ul style="width:100%;" class="d-block d-md-none">
|
|
<li>Dashboard</li>
|
|
<li>Planner</li>
|
|
<li>Vehicle Records</li>
|
|
<li>Fuel Tracker</li>
|
|
<li>Supplies</li>
|
|
<li>Reminders</li>
|
|
</ul>
|
|
<h6 class="mt-3 mb-3 display-6 text-center">Other Features<br class="d-none d-md-block"/><small class="d-none d-md-block text-secondary">There's way too many to list, but here's a few we think you'd like</small></h6>
|
|
<div style="width:100%;" class="d-none d-md-flex row row-cols-1 row-cols-md-3 g-4 justify-content-center">
|
|
<div class="col text-center">
|
|
<span class="display-6"><i class="bi bi-newspaper"></i></span><br class="d-none d-md-block"/>
|
|
<span class="lead">Professional Vehicle Reports</span>
|
|
</div>
|
|
<div class="col text-center">
|
|
<span class="display-6"><i class="bi bi-people-fill"></i></span><br class="d-none d-md-block"/>
|
|
<span class="lead">Multiple Users</span>
|
|
</div>
|
|
<div class="col text-center">
|
|
<span class="display-6"><i class="bi bi-input-cursor-text"></i></span><br class="d-none d-md-block"/>
|
|
<span class="lead">User Customizable Fields</span>
|
|
</div>
|
|
<div class="col text-center">
|
|
<span class="display-6"><i class="bi bi-upload"></i><br class="d-none d-md-block"/>
|
|
<span class="lead">CSV Imports/Exports</span>
|
|
</div>
|
|
<div class="col text-center">
|
|
<span class="display-6"><i class="bi bi-database-fill-gear"></i></span><br class="d-none d-md-block"/>
|
|
<span class="lead">API</span>
|
|
</div>
|
|
<div class="col text-center">
|
|
<span class="display-6"><i class="bi bi-box-arrow-in-right"></i></span><br class="d-none d-md-block"/>
|
|
<span class="lead">Single Sign On</span>
|
|
</div>
|
|
</div>
|
|
<ul style="width:100%;" class="d-block d-md-none">
|
|
<li>Professional Vehicle Reports</li>
|
|
<li>Multiple Users</li>
|
|
<li>User Customizable Fields</li>
|
|
<li>CSV Imports/Exports</li>
|
|
<li>API</li>
|
|
<li>Single Sign On</li>
|
|
</ul>
|
|
</div>
|
|
<div id="demo" class="full-height alt d-flex align-items-center">
|
|
<div class="half">
|
|
<img class="carousel-img" src="demo.png"/>
|
|
</div>
|
|
<h6 class="half display-6 text-center">Try the <a href="https://demo.lubelogger.com" class='link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover'>demo<i style="font-size:1.5rem;" class="ms-2 bi bi-box-arrow-up-right"></i></a><br/><small class="text-secondary">Login using the username <code>test</code> and password <code>1234</code></small></h6>
|
|
</div>
|
|
<div class="ll-footer d-flex justify-content-center">
|
|
<span class="lead text-center">Proudly developed in <a class='link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover' href="https://www.visitutah.com/Places-To-Go/Cities-and-Towns/Price" target="_blank">Price Utah</a> by <a class='link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover' href='mailto:hargatasoftworks@gmail.com'>Hargata Softworks</a></span>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html> |