memories/docs/overrides/home.html

424 lines
12 KiB
HTML

<!-- Taken fro https://github.com/up42/up42-py/blob/master/docs/theme_override_home/home.html -->
{% extends "main.html" %}
{% block tabs %}
{{ super() }}
<style>
.md-main {
flex-grow: 0
}
.md-main__inner {
display: flex;
height: 100%;
}
.tx-container {
padding-top: .0rem;
background: linear-gradient(to bottom, var(--md-primary-fg-color), var(--md-primary-fg-color--dark) 99%,#fff 99%)
}
.tx-hero {
margin: 8px 2.8rem;
color: var(--md-primary-bg-color);
justify-content: center;
}
.tx-hero h1 {
margin-bottom: 1rem;
color: currentColor;
font-weight: 700
}
.tx-hero__content {
padding-bottom: 1rem;
margin: 1em auto;
}
.tx-hero__image {
width: 26rem;
order: 1;
max-width: 100%;
}
.tx-hero .md-button {
margin-top: .5rem;
margin-right: .5rem;
color: var(--md-primary-bg-color)
}
.tx-hero .md-button--primary {
background-color: var(--md-primary-bg-color);
color: hsla(280deg, 37%, 48%, 1);
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-item {
box-sizing: border-box;
padding: 0 15px;
word-break: break-word;
margin: 0 auto;
margin-bottom: 50px;
max-width: 90vw;
text-align: center;
}
.feature-item h2 {
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 > div {
flex: 1;
}
.feature-item > img {
max-width: 100%;
width: auto;
height: 150px;
margin-top: 10px;
border-radius: 16px;
}
.feature-item > img.feat-preview {
border-radius: 50%;
box-shadow: 0 0 8px 1px var(--md-primary-fg-color--dark);
}
.feature-item > div > p {
font-size: 16px;
line-height: 1.8em;
color: #111;
margin: 0 0 10px;
display: block;
max-width: 800px;
}
.feature-item a {
color: var(--md-primary-fg-color--dark);
}
@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: 2.5rem;
margin-bottom: 4rem;
margin-left: 1.0rem;
margin-right: 3.0rem;
align-items: center;
}
.feature-item {
display: flex;
width: 850px;
}
.feature-item {
text-align: left;
}
.feature-item > img {
margin-left: 40px;
margin-top: 0px;
transform: translateY(10px);
}
}
@media screen and (min-width:76.25em) {
.md-sidebar--primary {
display: none
}
.top-hr {
width: 100%;
max-width: 61rem;
margin-right: auto;
margin-left: auto;
padding: 0 .2rem;
}
.bottom-hr {
margin-top: 10px;
width: 100%;
display: flex;
max-width: 61rem;
margin-right: auto;
margin-left: auto;
padding: 0 .2rem;
}
}
.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-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: 1.0rem;
}
.md-footer-social {
padding-top: 20px;
}
img.shadow {
filter: drop-shadow(2px 2px 3px #222);
}
/** Scroll bar styling */
::-webkit-scrollbar {
width: 4px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--md-primary-fg-color);
}
body {
scrollbar-color: var(--md-primary-fg-color) transparent;
scrollbar-width: thin;
}
</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 class="shadow" src="assets/mockup.webp" draggable="false" alt="">
</div>
<div class="tx-hero__content">
<img class="memories-title" src="assets/memories-title.svg" alt="Memories" draggable="false">
<p> Fast, modern and advanced photo management suite. <br/> Free and open source Nextcloud app. </p>
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary">
Install
</a>
<a href="https://memories-demo.radialapps.com/apps/memories/" class="md-button">
Demo
</a>
</div>
</div>
</div>
</section>
{% endblock %}
{% block content %}
<div class="top-hr">
<div class="feature-item">
<div>
<h2>
Privacy First
</h2>
<p>
Your data should be owned by you! Memories is a self-hosted app, which means that
your photos are stored on your own Nextcloud instance and not on someone else's
servers. You can even encrypt your data with a secret key. And it's completely free
and open source!
</p>
</div>
<img class="feat-preview" src="assets/nclogo.webp" alt="Nextcloud" draggable="false">
</div>
<div class="feature-item">
<div>
<h2>
Auto Upload
</h2>
<p>
With the offical Nextcloud mobile apps for
<a target="_blank" href="https://play.google.com/store/apps/details?id=com.nextcloud.client">Android</a>
and
<a target="_blank" href="https://itunes.apple.com/us/app/nextcloud/id1125420102">iOS</a>,
you can automatically upload photos and videos to your Nextcloud server.
Memories will automatically extract EXIF metadata from your photos as they are uploaded.
</p>
</div>
</div>
<div class="feature-item">
<div>
<h2>
Photo Timeline
</h2>
<p>
Trying to relive memories from your birthday party 10 years ago?
Memories shows your photos in a familiar timeline view, which lets you instantly
jump to any point of time in your photo library, even if it has hundreds of
thousands of photos.
</p>
</div>
<img class="feat-preview" src="assets/timeline-sample.webp" alt="Timeline" draggable="false">
</div>
<div class="feature-item">
<div>
<h2>
Albums
</h2>
<p>
Create albums to organize your photos. You can also share albums with other
users on your Nextcloud server or with anyone on the internet. Multiple users
on the same Nextcloud server can also collaborate on albums together.
</p>
</div>
</div>
<div class="feature-item">
<div>
<h2>
Automatic Tagging
</h2>
<p>
Memories integrates with the
<a target="_blank" href="https://github.com/nextcloud/recognize">Recognize</a>
and
<a target="_blank" href="https://github.com/matiasdelellis/facerecognition">Face Recognition</a>
apps to automatically tag your photos with keywords and faces using artificial intelligence.
You can also manually curate your library by assigning tags and faces to photos.
</p>
</div>
<img src="assets/ai-sample.webp" alt="Automatic Tagging" draggable="false">
</div>
<div class="feature-item">
<div>
<h2>
Metadata Editing
</h2>
<p>
You can edit the EXIF metadata of your photos, such as the title, description, GPS location,
date and time, and tags. You can also edit the metadata of multiple photos at once!
</p>
</div>
</div>
<div class="feature-item">
<div>
<h2>
Video Transcoding
</h2>
<p>
To support a wide range of video formats and adaptive streaming, Memories is bundled with an
on-demand video transcoder. You can also give the transcoding process a boost by using
VA-API or NVENC hardware acceleration.
</p>
</div>
</div>
<div class="feature-item">
<div>
<h2>
Map of Photos
</h2>
<p>
Zoom in on your vacations around the world with the map view. Memories will automatically
extract GPS data from your photos and plot them on a map. You can also find all
photos at a location with its name with accurate reverse geocoding.
</p>
</div>
<img class="feat-preview" src="assets/map-sample.webp" alt="Map" draggable="false">
</div>
<div class="feature-item">
<div>
<h2>
Fast &amp; Battle Tested
</h2>
<p>
Memories is built with performance in mind. It is designed and highly optimized for
handling large photo libraries even when running on modest hardware such as a Raspberry Pi.
It also relies on the battle tested Nextcloud platform as the underlying storage layer,
which is used by thousands of organizations around the world.
</p>
</div>
</div>
<div class="feature-item">
<div>
<h2>
No Lock-In
</h2>
<p>
Memories stores most of the metadata in the EXIF headers of your photos, which means
that you can easily migrate to other solutions without losing your data. It also utilizes
your existing filesystem structure for organization without converting it to any
specialized format.
</p>
</div>
</div>
{% endblock %}