theme/layouts/index.html

192 lines
20 KiB
HTML
Raw Normal View History

2022-01-29 17:53:15 +00:00
{{ define "main" }}
2022-08-03 15:57:19 +00:00
<section class="flex min-h-screen w-full flex-col items-center justify-center pb-8 text-center text-gray-700">
<div class="mt-16 mb-8 font-title">
<div class="max-w-xs mb-16 mx-auto">
<svg version="1.1" viewBox="0 0 872.59 256.75" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><g transform="matrix(1.3333 0 0 -1.3333 -88.275 376.11)"><g transform="matrix(.1 0 0 .1 9.548 -4.2435)"><path d="m2268.2 2512.3c-15.884 19.573-32.512 38.571-49.949 56.876-180.6 189.62-426.24 294.06-691.67 294.06-256.43 0-497.51-99.862-678.83-281.18-22.365-22.368-43.484-45.656-63.335-69.76-141.09-171.28-217.84-384.27-217.84-609.07 0-256.42 99.861-497.5 281.18-678.82 181.32-181.32 422.39-281.17 678.83-281.17 256.43 0 497.5 99.858 678.83 281.17 181.32 181.33 281.17 422.4 281.17 678.82 0 219.21-78.86 437.22-218.37 609.07" fill="#196aff"/><path d="m1823.7 1647.4c35.688 104.68 94.631 136.72 101.96 298.25 2.5753 56.765-14.661 237.07-14.661 237.07s28.013 72.294-25.823 152.83c-83.476 124.87-255.4 133.36-345.69 133.36s-260.21-8.4898-343.68-133.36c-53.84-80.533-25.826-152.83-25.826-152.83s-9.5356-92.732-16.752-174.52c-1.6998-19.193 0.1575-95.115 2.4544-113.46 4.1285-32.869 14.481-65.163 25.808-96.599 14.342-39.804 36.82-80.194 53.983-121.03 51.799-123.29 8.4513-276 11.1-408.96 2.2383-94.374-20.013-190.11-28.731-282.4 98.129-33.396 202.09-50.813 308.72-50.813 119.83 0 236.31 21.937 344.9 63.9-20.394 115.55-44.092 225.15-47.748 266.96-10.646 126.41-41.304 260.49-0.01 381.6" fill="#fff"/><path d="m1162.9 2383.9c1.1503-18.73 2.9966-37.93 8.2718-56.159 1.6558-5.6818 4.1029-19.683 11.415-21.764 9.0923-2.59 25.911 8.2571 32.288 12.957 12.356 9.096 23.925 18.459 36.285 27.651 7.8835 5.8613 16.492 10.47 24.211 16.496 8.4 6.5463 14.719 14.474 21.709 22.178 8.4843 9.3597 14.847 19.049 21.372 29.497 5.103 8.1545 37.069 13.463 42.187 21.031 5.5866 8.2755 0.9158 18.511 0.9158 28.698 0 74.164 4.4546 147.57 6.1874 220.29 1.7877 49.887 21.379 109.13-53.44 85.744-160.31-49.887-158.53-271.26-151.4-386.62" fill="#fff"/><path d="m1869.1 2279.7c-1.6118 1.7511-4.1945 3.2384-6.2606 4.7696-8.9788 6.649-17.445 13.606-25.156 21.482-9.411 9.6125-19.192 18.958-28.164 28.929-7.8908 8.7626-17.313 16.602-25.006 25.574-5.1286 5.9602-10.081 12.305-14.609 18.562-2.3115 3.1761-3.5204 6.9969-5.3374 10.396-2.7072 5.0114-39.882 10.118-36.19 15.005 6.3009 8.3304 20.328 15.397 23.702 24.94 17.243 48.667 24.771 244.53 26.852 294.51 5.3521 127.83 117.57-6.2386 137.17-57.682 57.008-149.66 23.145-258.78-46.315-386.62" fill="#fff"/><path d="m1716.5 1787.9c-0.081 73.805-9.2535 103.66-50.407 139.75-25.742 22.566-55.836 31.175-103.74 29.992-47.902 1.1833-82.424-13.378-107.32-39.223-37.549-38.992-47.436-62.053-47.542-135.86-0.059-39.893 42.956-128.16 55.756-148.54 21.244-35.93 60.562-48.85 99.104-46.154 38.545-2.6962 77.867 10.224 99.096 46.154 12.811 20.372 55.107 106.95 55.052 153.87" fill="#f1e6d3"/><path d="m1226.6 2316.1c-9.6162 86.088-38.582 239.98 61.489 331.24 11.038 10.074 14.001-24.2 15.848-38.066 2.5386-19.038-0.051-73.416 0.337-92.583 0.7143-36.087 8.2754-54.964 4.7513-71.46-9.6272-45.092-17.353-42.183-26.559-69.603-18.258-54.378-53.235-83.066-55.866-59.529" fill="#f1d7d4"/><path d="m1851.7 2333.1c10.243-18.331 36.996 80.256 45.381 123.07 7.8945 40.307 17.925 93.869 4.059 133.91-7.4365 21.482-53.078 84.568-58.463 62.892-2.0991-8.4183-3.1834-71.098-8.345-101.09-6.3889-37.109-17.91-73.805-17.98-111.54-0.1502-84.568 25.336-88.055 35.347-107.24" fill="#f1d7d4"/><path d="m1522 1319.7c-2.1687-6.583-18.595-11.404-24.764-13.393-14.91-4.8172-28.145 6.9383-36.476 16.844-11.583 13.73-11.276 35.629-16.126 51.642-2.9343 9.6822-19.533 10.997-24.518 2.0405-16.628-29.9-81.161 26.365-66.163 45.095 9.8872 12.353-13.781 23.262-23.54 11.078-28.948-36.16 48.92-103.5 93.579-85.245 1.9892-9.0338 4.0736-18.056 7.9091-26.636 7.5245-16.851 23.98-27.739 41.011-36.89 23.196-12.437 68.258 9.4074 75.142 30.255 4.7916 14.503-21.28 19.635-26.054 5.2093" fill="#faeee0"
</div>
<h2 class="mb-4 text-4xl">
The open-source, <a href="https://vikunja.io/docs/installing/" class="underline">self-hostable</a> to-do app.
</h2>
<h3 class="mb-6 text-3xl">
Organize everything, on all platforms.
</h3>
<h3 class="text-xl max-w-xl mx-auto">
Also one of the two wild South American camelids which live in the high
alpine areas of the Andes and a <a rel="nofollow" target="_blank" class="underline"
href="https://en.wikipedia.org/wiki/Vicu%C3%B1a">relative of the
llama</a>.
</h3>
<div class="flex justify-center space-x-2 py-4">
<a href="https://try.vikunja.io"
class="cursor-pointer rounded-md border border-transparent bg-primary px-4 py-2 text-xl font-medium text-white shadow hover:bg-primary-darker">
Try it
</a>
<a href="/features"
class="cursor-pointer rounded-md border border-transparent bg-primary px-4 py-2 text-xl font-medium text-white shadow hover:bg-primary-darker">
Features
</a>
</div>
</div>
<div class="max-w-6xl w-full">
<div class="slider mt-8 relative aspect-w-16 aspect-h-9">
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute">
<source srcset="/images/vikunja/01-task-overview.webp" type="image/webp"/>
<source srcset="/images/vikunja/01-task-overview.png" type="image/png"/>
<img src="/images/vikunja/01-task-overview.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/02-task-list.webp" type="image/webp"/>
<source srcset="/images/vikunja/02-task-list.png" type="image/png"/>
<img src="/images/vikunja/02-task-list.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/03-task-gantt.webp" type="image/webp"/>
<source srcset="/images/vikunja/03-task-gantt.png" type="image/png"/>
<img src="/images/vikunja/03-task-gantt.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/04-task-table.webp" type="image/webp"/>
<source srcset="/images/vikunja/04-task-table.png" type="image/png"/>
<img src="/images/vikunja/04-task-table.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/05-task-kanban.webp" type="image/webp"/>
<source srcset="/images/vikunja/05-task-kanban.png" type="image/png"/>
<img src="/images/vikunja/05-task-kanban.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/06-task-detail.webp" type="image/webp"/>
<source srcset="/images/vikunja/06-task-detail.png" type="image/png"/>
<img src="/images/vikunja/06-task-detail.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/07-quick-add.webp" type="image/webp"/>
<source srcset="/images/vikunja/07-quick-add.png" type="image/png"/>
<img src="/images/vikunja/07-quick-add.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/08-task-kanban-background.webp"
type="image/webp"/>
<source srcset="/images/vikunja/08-task-kanban-background.png"
type="image/png"/>
<img src="/images/vikunja/08-task-kanban-background.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/09-task-detail-dark.webp"
type="image/webp"/>
<source srcset="/images/vikunja/09-task-detail-dark.png" type="image/png"/>
<img src="/images/vikunja/09-task-detail-dark.png" alt=""/>
</picture>
</div>
<div class="md:flex text-left mt-48 mb-4">
<div class="md:w-1/3 md:mr-4 mt-4">
<h2 class="text-2xl font-title flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
Stay organized
</h2>
<p class="pt-4">
Organize all of your tasks in lists. Put lists together in a namespace to keep related stuff
grouped together.
</p>
</div>
<div class="md:w-1/3 md:mr-4 mt-4">
<h2 class="text-2xl font-title flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
Collaborate with peers
</h2>
<p class="pt-4">
Vikunja lets you easily share a list or a namespace with another user or a whole team!
You can also assign tasks to people so everybody knows who's working on what.
</p>
</div>
<div class="md:w-1/3 mt-4">
<h2 class="text-2xl font-title flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
</svg>
Use it how you need it
</h2>
<p class="pt-4">
You can show your tasks in the classic list view - each task underneath each other.
Or you can use the Gantt view to get a time overview. Or Table view to show all details you
need.
Or Kanban if you want that birds-eye view of the status of all current tasks.
</p>
</div>
</div>
</div>
</section>
<section class="md:flex text-left mb-16 max-w-6xl w-full mx-auto">
<a href="/docs/installing/" class="md:w-1/3 md:mr-4 mt-4 bg-hero-llama-small rounded shadow py-16 px-8 text-center font-title text-2xl bg-cover font-bold text-white">
Installation
</a>
<a href="/features" class="md:w-1/3 md:mr-4 mt-4 bg-hero-llama-2-small rounded shadow py-16 px-8 text-center font-title text-2xl bg-cover font-bold text-white bg-center">
Features
</a>
<a href="https://vikunja.cloud/?utm_source=io&utm_medium=io&utm_campaign=menu" class="md:w-1/3 md:mr-4 mt-4 bg-hero-llama-3-small rounded shadow py-16 px-8 text-center font-title text-2xl bg-cover font-bold text-white">
Get it hosted
</a>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
const sliders = document.getElementsByClassName('slider')
if (sliders) {
for (const slider of sliders) {
let current = 0
const children = Array.from(slider.children)
const sliderDuration = 5000
const slide = () => {
children.forEach((img, key) => {
if (current !== key) {
img.classList.remove('opacity-100')
img.classList.add('opacity-0')
} else {
img.classList.add('opacity-100')
img.classList.remove('opacity-0')
}
})
current++
if (current >= children.length) {
current = 0
}
}
// Loop through the images
slide()
setInterval(slide, sliderDuration)
}
}
})
</script>
2022-01-29 17:53:15 +00:00
{{ end }}