mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-05-08 02:53:31 -04:00
383 lines
15 KiB
HTML
383 lines
15 KiB
HTML
<!-- Custom HTML site displayed as the Home chapter -->
|
|
|
|
{% extends "main.html" %} {% block tabs %} {{ super() }}
|
|
<style>
|
|
.md-main {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.md-main__inner {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
.tx-container {
|
|
padding-top: 0rem;
|
|
}
|
|
|
|
.tx-hero {
|
|
margin: 12px 2.8rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tx-hero h1 {
|
|
margin-bottom: 1rem;
|
|
font-family: "Roboto";
|
|
color: var(--md-custom-h2-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tx-hero__content {
|
|
padding-bottom: 1rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tx-hero__image {
|
|
order: 1;
|
|
padding-right: 2.5rem;
|
|
}
|
|
|
|
.tx-hero .md-button {
|
|
margin-top: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
color: var(--md-primary-fg-color);
|
|
}
|
|
|
|
.tx-hero .md-button--primary {
|
|
background-color: var(--md-primary--color);
|
|
border-color: var(--md-primary-bg-color);
|
|
}
|
|
|
|
.tx-hero .md-button:focus,
|
|
.tx-hero .md-button:hover {
|
|
background-color: var(--md-accent-fg-color);
|
|
color: var(--md-default-bg-color);
|
|
border-color: var(--md-accent-fg-color);
|
|
}
|
|
|
|
.feature-item h2 svg {
|
|
height: 30px;
|
|
float: left;
|
|
margin-right: 10px;
|
|
transform: translateY(10%);
|
|
}
|
|
|
|
.feature-container {
|
|
background-color: var(--md-default-accent-bg-color);
|
|
}
|
|
|
|
.top-hr {
|
|
margin-top: 42px;
|
|
margin-bottom: 42px;
|
|
}
|
|
|
|
.feature-item {
|
|
font-family: "Lato", sans-serif;
|
|
font-weight: 300;
|
|
box-sizing: border-box;
|
|
padding: 0 15px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.feature-item h2 {
|
|
color: var(--md-custom-h2-color);
|
|
font-weight: 300;
|
|
font-size: 25px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: normal;
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.feature-item p {
|
|
font-size: 16px;
|
|
line-height: 1.8em;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
color: var(--webkit-print-color-adjust);
|
|
margin: 0 0 10px;
|
|
display: block;
|
|
}
|
|
|
|
@media screen and (max-width: 30em) {
|
|
.tx-hero h1 {
|
|
font-size: 1.4rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.md-sidebar--secondary {
|
|
display: none;
|
|
}
|
|
|
|
.tx-hero {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tx-hero__content {
|
|
max-width: 22rem;
|
|
margin-top: 3.5rem;
|
|
margin-bottom: 3.5rem;
|
|
margin-left: 1rem;
|
|
margin-right: 4rem;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 76.25em) {
|
|
.md-sidebar--primary {
|
|
display: none;
|
|
}
|
|
|
|
.top-hr {
|
|
width: 100%;
|
|
display: flex;
|
|
max-width: 61rem;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
padding: 0 0.2rem;
|
|
}
|
|
|
|
.bottom-hr {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
display: flex;
|
|
max-width: 61rem;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
padding: 0 0.2rem;
|
|
}
|
|
|
|
.feature-item {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.hr {
|
|
border-bottom: 1px solid #eee;
|
|
width: 100%;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
margin-top: 15px;
|
|
font-family: "Lato", sans-serif;
|
|
font-size: 23px;
|
|
font-weight: 300;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.logos {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-flow: row wrap;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.logos img {
|
|
flex: 1 1 auto;
|
|
padding: 25px;
|
|
max-height: 130px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.hr-logos {
|
|
margin-top: 0;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.md-footer-meta__inner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.md-footer-social {
|
|
padding-top: 20px;
|
|
}
|
|
</style>
|
|
|
|
<!-- Main site Entry button descriptions -->
|
|
<section class="tx-container">
|
|
<div class="md-grid md-typeset">
|
|
<div class="tx-hero">
|
|
<div class="tx-hero__image">
|
|
<img src="assets/img/home_screenshot.png" draggable="false" />
|
|
</div>
|
|
<div class="tx-hero__content">
|
|
<h1>Mealie</h1>
|
|
<p>
|
|
A self-hosted recipe manager and meal planner with a RestAPI backend
|
|
and a reactive frontend application built in Vue for a pleasant user
|
|
experience for the whole family.
|
|
</p>
|
|
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}"
|
|
class="md-button md-button--primary">
|
|
Get started
|
|
</a>
|
|
<a href="{{ config.demo_url }}" title="{{ lang.t('source.link.title') }}" target="_blank" class="md-button">
|
|
View the Demo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main site box descriptions -->
|
|
<!-- Row 1 -->
|
|
<section class="feature-container">
|
|
<div class="top-hr">
|
|
<div class="feature-item">
|
|
<h2>
|
|
<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
d="M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,4.5L8.95,4.53C8.71,5.05 8.34,5.93 8.07,7H10.93C10.66,5.93 10.29,5.05 10.05,4.53C9.87,4.5 9.69,4.5 9.5,4.5M13.83,7C13.24,5.97 12.29,5.17 11.15,4.78C11.39,5.31 11.7,6.08 11.93,7H13.83M5.17,7H7.07C7.3,6.08 7.61,5.31 7.85,4.78C6.71,5.17 5.76,5.97 5.17,7M4.5,9.5C4.5,10 4.58,10.53 4.73,11H6.87L6.75,9.5L6.87,8H4.73C4.58,8.47 4.5,9 4.5,9.5M14.27,11C14.42,10.53 14.5,10 14.5,9.5C14.5,9 14.42,8.47 14.27,8H12.13C12.21,8.5 12.25,9 12.25,9.5C12.25,10 12.21,10.5 12.13,11H14.27M7.87,8L7.75,9.5L7.87,11H11.13C11.21,10.5 11.25,10 11.25,9.5C11.25,9 11.21,8.5 11.13,8H7.87M9.5,14.5C9.68,14.5 9.86,14.5 10.03,14.47C10.28,13.95 10.66,13.07 10.93,12H8.07C8.34,13.07 8.72,13.95 8.97,14.47L9.5,14.5M13.83,12H11.93C11.7,12.92 11.39,13.69 11.15,14.22C12.29,13.83 13.24,13.03 13.83,12M5.17,12C5.76,13.03 6.71,13.83 7.85,14.22C7.61,13.69 7.3,12.92 7.07,12H5.17Z" />
|
|
</svg>
|
|
Import Recipes
|
|
</h2>
|
|
<p>
|
|
Quickly and easily import recipes from sites around the web using the
|
|
built in <b>recipe scraper</b>.
|
|
</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h2>
|
|
<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
d="M12,3A9,9 0 0,0 3,12H0L4,16L8,12H5A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19C10.5,19 9.09,18.5 7.94,17.7L6.5,19.14C8.04,20.3 9.94,21 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M14,12A2,2 0 0,0 12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12Z" />
|
|
</svg>
|
|
Automatic Backups
|
|
</h2>
|
|
<p>
|
|
Keep your data safe with automatic backups in any format supported by
|
|
<b>Jinja2</b> templates
|
|
</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h2>
|
|
<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
d="M19,4C20.11,4 21,4.9 21,6V18A2,2 0 0,1 19,20H5C3.89,20 3,19.1 3,18V6A2,2 0 0,1 5,4H19M19,18V8H5V18H19Z" />
|
|
</svg>
|
|
Rich User Interface
|
|
</h2>
|
|
<p>
|
|
Use a beautiful and intuitive user interface to create, edit, and delete
|
|
recipes. Recipe editor supports <b>markdown syntax</b>
|
|
</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h2>
|
|
<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
d="M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z" />
|
|
</svg>
|
|
Meal Planner
|
|
</h2>
|
|
<p>Create Meal Plans for the week, month, or year!</p>
|
|
</div>
|
|
</div>
|
|
<!-- Row 2 -->
|
|
|
|
<div class="top-hr">
|
|
<div class="feature-item">
|
|
<h2>
|
|
<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
|
|
</svg>
|
|
Users
|
|
</h2>
|
|
<p>
|
|
Add new users with sign-up links or simply create a new user in the
|
|
admin panel.
|
|
</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h2>
|
|
<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z" />
|
|
</svg>
|
|
Groups
|
|
</h2>
|
|
<p>
|
|
Full multi-user support with groups for sharing recipes and meal plans
|
|
with family.
|
|
</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h2>
|
|
<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
d="M10.46,19C9,21.07 6.15,21.59 4.09,20.15C2.04,18.71 1.56,15.84 3,13.75C3.87,12.5 5.21,11.83 6.58,11.77L6.63,13.2C5.72,13.27 4.84,13.74 4.27,14.56C3.27,16 3.58,17.94 4.95,18.91C6.33,19.87 8.26,19.5 9.26,18.07C9.57,17.62 9.75,17.13 9.82,16.63V15.62L15.4,15.58L15.47,15.47C16,14.55 17.15,14.23 18.05,14.75C18.95,15.27 19.26,16.43 18.73,17.35C18.2,18.26 17.04,18.58 16.14,18.06C15.73,17.83 15.44,17.46 15.31,17.04L11.24,17.06C11.13,17.73 10.87,18.38 10.46,19M17.74,11.86C20.27,12.17 22.07,14.44 21.76,16.93C21.45,19.43 19.15,21.2 16.62,20.89C15.13,20.71 13.9,19.86 13.19,18.68L14.43,17.96C14.92,18.73 15.75,19.28 16.75,19.41C18.5,19.62 20.05,18.43 20.26,16.76C20.47,15.09 19.23,13.56 17.5,13.35C16.96,13.29 16.44,13.36 15.97,13.53L15.12,13.97L12.54,9.2H12.32C11.26,9.16 10.44,8.29 10.47,7.25C10.5,6.21 11.4,5.4 12.45,5.44C13.5,5.5 14.33,6.35 14.3,7.39C14.28,7.83 14.11,8.23 13.84,8.54L15.74,12.05C16.36,11.85 17.04,11.78 17.74,11.86M8.25,9.14C7.25,6.79 8.31,4.1 10.62,3.12C12.94,2.14 15.62,3.25 16.62,5.6C17.21,6.97 17.09,8.47 16.42,9.67L15.18,8.95C15.6,8.14 15.67,7.15 15.27,6.22C14.59,4.62 12.78,3.85 11.23,4.5C9.67,5.16 8.97,7 9.65,8.6C9.93,9.26 10.4,9.77 10.97,10.11L11.36,10.32L8.29,15.31C8.32,15.36 8.36,15.42 8.39,15.5C8.88,16.41 8.54,17.56 7.62,18.05C6.71,18.54 5.56,18.18 5.06,17.24C4.57,16.31 4.91,15.16 5.83,14.67C6.22,14.46 6.65,14.41 7.06,14.5L9.37,10.73C8.9,10.3 8.5,9.76 8.25,9.14Z" />
|
|
</svg>
|
|
Webhooks
|
|
</h2>
|
|
<p>
|
|
Schedule webhooks to send notifications to 3rd party services with
|
|
todays Meal Plan data.
|
|
</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h2>
|
|
<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
d="M7 7H5A2 2 0 0 0 3 9V17H5V13H7V17H9V9A2 2 0 0 0 7 7M7 11H5V9H7M14 7H10V17H12V13H14A2 2 0 0 0 16 11V9A2 2 0 0 0 14 7M14 11H12V9H14M20 9V15H21V17H17V15H18V9H17V7H21V9Z" />
|
|
</svg>
|
|
Open API
|
|
</h2>
|
|
<p>
|
|
<b>API Driven</b> application gives you full control of the backend
|
|
server with interactive documentation
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Custom narrow footer -->
|
|
<div class="md-footer-meta__inner md-grid">
|
|
<div class="md-footer-social">
|
|
<a class="md-footer-social__link" href="https://github.com/mealie-recipes/mealie" rel="noopener" target="_blank"
|
|
title="github.com">
|
|
<svg style="width: 32px; height: 32px" viewBox="0 0 480 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6.0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6.0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3.0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-70 15-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.7 1.6-15.4.0.0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5.0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9.0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4.0 33.7-.3 75.4-.3 83.6.0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6.0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9.0-6.2-1.4-2.3-4-3.3-5.6-2z">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="md-footer-social__link" href="https://bsky.app/profile/haykot.dev" rel="noopener" target="_blank"
|
|
title="bsky.app">
|
|
<svg style="width: 32px; height: 32px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.204-.659-.299-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="md-footer-social__link" href="https://www.linkedin.com/in/hay-kot" rel="noopener" target="_blank"
|
|
title="linkedin.com">
|
|
<svg style="width: 32px; height: 32px" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %} {% block content %}{% endblock %} {% block footer %}{% endblock
|
|
%}
|