mirror of
https://github.com/aleksilassila/reiverr.git
synced 2026-04-26 18:55:12 +02:00
Sources page concept
This commit is contained in:
Aleksi Lassila
9
src/routes/components/svgs/RadarrIcon.svelte
Normal file
9
src/routes/components/svgs/RadarrIcon.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg
|
||||
viewBox="0 0 1000 1115.2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={$$restProps.class || 'h-10 w-10 flex-shrink-0'}
|
||||
><path
|
||||
d="m120.015 174.916-1.433 810.916C50.198 993.53-.595 958.758.245 890.481L0 216.126C2.624 2.76 199.555-46.036 317.994 40.776l601.67 357.383c84.615 60.794 100.32 171.956 56.7 248.25-7.799-59.85-32.984-94.304-83.773-129.073l-678.066-392.46c-50.79-34.768-93.568-26.758-94.513 50.056zm-61.707 852.847c51 17.7 102.314 9.794 145.3-15.285L908.5 611.405c41.94 60.268 32.671 119.903-18.958 153.414L296.44 1098.972c-85.873 41.624-196.297-2.414-238.138-71.217z"
|
||||
fill="#fff"
|
||||
/><path d="m272.941 797.285 414.225-245.888L273.7 327.762z" fill="#ffc230" /></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 684 B |
31
src/routes/components/svgs/SonarrIcon.svelte
Normal file
31
src/routes/components/svgs/SonarrIcon.svelte
Normal file
@@ -0,0 +1,31 @@
|
||||
<svg viewBox="0 0 216.7 216.9" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 flex-shrink-0"
|
||||
><path
|
||||
d="M216.7 108.45c0 29.833-10.533 55.4-31.6 76.7-.7.833-1.483 1.6-2.35 2.3a92.767 92.767 0 0 1-11 9.25c-18.267 13.467-39.367 20.2-63.3 20.2-23.967 0-45.033-6.733-63.2-20.2-4.8-3.4-9.3-7.25-13.5-11.55-16.367-16.266-26.417-35.167-30.15-56.7-.733-4.2-1.217-8.467-1.45-12.8-.1-2.4-.15-4.8-.15-7.2 0-2.533.05-4.95.15-7.25 0-.233.066-.467.2-.7 1.567-26.6 12.033-49.583 31.4-68.95C53.05 10.517 78.617 0 108.45 0c29.933 0 55.484 10.517 76.65 31.55 21.067 21.433 31.6 47.067 31.6 76.9z"
|
||||
clip-rule="evenodd"
|
||||
fill="#EEE"
|
||||
fill-rule="evenodd"
|
||||
/><path
|
||||
d="m194.65 42.5-22.4 22.4C159.152 77.998 158 89.4 158 109.5c0 17.934 2.852 34.352 16.2 47.7 9.746 9.746 19 18.95 19 18.95-2.5 3.067-5.2 6.067-8.1 9-.7.833-1.483 1.6-2.35 2.3a90.601 90.601 0 0 1-7.9 6.95l-17.55-17.55c-15.598-15.6-27.996-17.1-48.6-17.1-19.77 0-33.223 1.822-47.7 16.3-8.647 8.647-18.55 18.6-18.55 18.6a95.782 95.782 0 0 1-10.7-9.5c-2.8-2.8-5.417-5.667-7.85-8.6 0 0 9.798-9.848 19.15-19.2 13.852-13.853 16.1-29.916 16.1-47.85 0-17.5-2.874-33.823-15.6-46.55-8.835-8.836-21.05-21-21.05-21 2.833-3.6 5.917-7.067 9.25-10.4a134.482 134.482 0 0 1 9-8.05L61.1 43.85C74.102 56.852 90.767 60.2 108.7 60.2c18.467 0 35.077-3.577 48.6-17.1 8.32-8.32 19.3-19.25 19.3-19.25 2.9 2.367 5.733 4.933 8.5 7.7a121.188 121.188 0 0 1 9.55 10.95z"
|
||||
clip-rule="evenodd"
|
||||
fill="#3A3F51"
|
||||
fill-rule="evenodd"
|
||||
/><g clip-rule="evenodd"
|
||||
><path
|
||||
d="M78.7 114c-.2-1.167-.332-2.35-.4-3.55a39.613 39.613 0 0 1 0-4c0-.067.018-.133.05-.2.435-7.367 3.334-13.733 8.7-19.1 5.9-5.833 12.984-8.75 21.25-8.75 8.3 0 15.384 2.917 21.25 8.75 5.834 5.934 8.75 13.033 8.75 21.3 0 8.267-2.916 15.35-8.75 21.25-.2.233-.416.45-.65.65a27.364 27.364 0 0 1-3.05 2.55c-5.065 3.733-10.916 5.6-17.55 5.6s-12.466-1.866-17.5-5.6a26.29 26.29 0 0 1-3.75-3.2c-4.532-4.5-7.316-9.734-8.35-15.7z"
|
||||
fill="#0CF"
|
||||
fill-rule="evenodd"
|
||||
/><path
|
||||
d="m157.8 59.75-15 14.65M30.785 32.526 71.65 73.25m84.6 84.25 27.808 28.78m1.855-153.894L157.8 59.75m-125.45 126 27.35-27.4"
|
||||
fill="none"
|
||||
stroke="#0CF"
|
||||
stroke-miterlimit="1"
|
||||
stroke-width="2"
|
||||
/><path
|
||||
d="m157.8 59.75-16.95 17.2M58.97 60.604l17.2 17.15M59.623 158.43l16.75-17.4m61.928-1.396 18.028 17.945"
|
||||
fill="none"
|
||||
stroke="#0CF"
|
||||
stroke-miterlimit="1"
|
||||
stroke-width="7"
|
||||
/></g
|
||||
></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -13,7 +13,7 @@
|
||||
|
||||
<div class="bg-black pt-24 pb-8 px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 items-center justify-center gap-4">
|
||||
<div class="bg-highlight-dim relative w-full m-auto p-3 px-4 rounded-lg overflow-hidden">
|
||||
<div class="bg-highlight-dim relative w-full m-auto p-3 px-4 rounded-xl overflow-hidden">
|
||||
<div class="absolute left-0 inset-y-0 w-[70%] bg-[#ffffff22]" />
|
||||
<div class="relative z-[1] flex justify-between items-center">
|
||||
<div class="flex flex-col">
|
||||
@@ -36,7 +36,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-highlight-dim relative w-full m-auto p-3 px-4 rounded-lg overflow-hidden">
|
||||
<div class="bg-highlight-dim relative w-full m-auto p-3 px-4 rounded-xl overflow-hidden">
|
||||
<div class="absolute left-0 inset-y-0 w-[70%] bg-[#ffffff22]" />
|
||||
<div class="relative z-[1] flex justify-between items-center">
|
||||
<div class="flex flex-col">
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
<div>Settings</div>
|
||||
<div class="h-screen flex items-center justify-center text-zinc-500">
|
||||
This is the settings page. It's quite empty here.
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,59 @@
|
||||
<div class="pt-24">
|
||||
<div>Sources</div>
|
||||
<div>Streaming services</div>
|
||||
<div>(P2P network?)</div>
|
||||
<div>Configure Sonarr</div>
|
||||
<div>Configure Radarr</div>
|
||||
<div>(Configure Plex)</div>
|
||||
<div>(Configure Jellyfinn)</div>
|
||||
<div>(Configure IMDB)</div>
|
||||
<div>(Configure TMDB)</div>
|
||||
<script lang="ts">
|
||||
import RadarrIcon from '../components/svgs/RadarrIcon.svelte';
|
||||
import SonarrIcon from '../components/svgs/SonarrIcon.svelte';
|
||||
import { formatSize } from '$lib/utils.js';
|
||||
</script>
|
||||
|
||||
<div class="pt-24 px-8 min-h-screen flex justify-center">
|
||||
<div class="flex flex-col gap-4 max-w-3xl flex-1">
|
||||
<div
|
||||
class="bg-highlight-dim relative w-full p-3 px-4 rounded-xl overflow-hidden group pointer"
|
||||
on:click={() => (window.location.href = '/')}
|
||||
>
|
||||
<div class="absolute left-0 inset-y-0 w-[70%] bg-[#ffffff22]" />
|
||||
<RadarrIcon class="absolute opacity-20 p-4 h-full inset-y-0 right-2" />
|
||||
<div class="relative z-[1] flex flex-col justify-between gap-2">
|
||||
<div class="flex flex-col flex-1">
|
||||
<h3 class="text-zinc-400 font-medium text-xs tracking-wider">Mac-Mini</h3>
|
||||
<a
|
||||
href="/"
|
||||
class="text-zinc-200 font-bold text-xl tracking-wide group-hover:text-amber-200"
|
||||
>Radarr</a
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-8">
|
||||
<div class="flex flex-col items-center gap-0.5">
|
||||
<h3 class="uppercase text-zinc-400 font-medium text-xs tracking-wider">Movies</h3>
|
||||
<div class="font-medium text-sm">30</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-0.5">
|
||||
<h3 class="uppercase text-zinc-400 font-medium text-xs tracking-wider">Space Taken</h3>
|
||||
<div class="font-medium text-sm">{formatSize(120_000_000_000)}</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-0.5">
|
||||
<h3 class="uppercase text-zinc-400 font-medium text-xs tracking-wider">Space Left</h3>
|
||||
<div class="font-medium text-sm">{formatSize(50_000_000_000)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="border-zinc-800 border-2 border-dashed relative w-full p-3 px-4 rounded-xl overflow-hidden text-zinc-500 text-center flex flex-col gap-1"
|
||||
>
|
||||
<h2 class="font-medium">Sonarr is not set up</h2>
|
||||
<p class="text-sm">
|
||||
To set up Sonarr, define the <code>SONARR_API_KEY</code> and <code>SONARR_URL</code> environment
|
||||
variables.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>Sources</div>-->
|
||||
<!-- <div>Streaming services</div>-->
|
||||
<!-- <div>(P2P network?)</div>-->
|
||||
<!-- <div>Configure Sonarr</div>-->
|
||||
<!-- <div>Configure Radarr</div>-->
|
||||
<!-- <div>(Configure Plex)</div>-->
|
||||
<!-- <div>(Configure Jellyfinn)</div>-->
|
||||
<!-- <div>(Configure IMDB)</div>-->
|
||||
<!-- <div>(Configure TMDB)</div>-->
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user