rappli
/
rappli
1
1
Fork 0
Code Issues 16 Pull Requests Releases Activity

feat: add welcoming text to WelcomeModal

Browse Source
master
Katja Lutz 2 years ago
parent 0fc1dbc6c5
commit eabb559c66
1 changed files with 280 additions and 45 deletions
Show Stats Download Patch File Download Diff File

325
src/components/WelcomeModal.tsx
Unescape Escape View File

@ -18,12 +18,20 @@ import FreeIcon from "~icons/noto/seedling";
import PrivacyIcon from "~icons/noto/princess";
import AgileIcon from "~icons/noto/person-bouncing-ball";
import ResultIcon from "~icons/noto/chequered-flag";
import HugIcon from "~icons/noto/hugging-face";
import Modal, { ModalCloseButton } from "./Modal";
import { LocalStoreContext } from "~/stores";
import createAccordion from "./Accordion";
import typer from "typer-js";
import "typer-js/dist/typer.min.css";
import { getDisplayDate, getHost, onClickFocus, shuffle } from "~/util";
import {
externalLink,
getDisplayDate,
getDomain,
getHost,
onClickFocus,
shuffle,
} from "~/util";
import { capitalize } from "froebel";
export const description =
@ -121,6 +129,23 @@ const WelcomeModal: Component = (props) => {
></a>
);
// I hope Randomness will guarantee a fair sequence <3
const thankYouRahelAndFredi = shuffle([
<>
Fredi Niklaus (
<a
class="inline-flex items-center gap-1"
href="https://www.remedyit.ch/"
{...externalLink}
>
RemedyIT <ExternalLinkIcon />
</a>
)
</>,
"Rahel Lutz",
]);
thankYouRahelAndFredi.splice(1, 0, " und ");
return (
<Modal open={isOpen()}>
<div class="hidden xl:block">
@ -145,9 +170,8 @@ const WelcomeModal: Component = (props) => {
<div class="flex justify-end lg:w-[410px] max-w-full">
<a
href="https://lufrai.org"
target="_blank"
rel="noopener"
class="text-lufrai-primary-darker hover:text-lufrai-primary transition-colors fill-current text-base flex items-center leading-tight gap-2 tracking-tighter font-bold border-b border-lufrai-primary-light border-opacity-20 pb-1"
{...externalLink}
>
<span>made</span>
<span>by</span>
@ -176,6 +200,14 @@ const WelcomeModal: Component = (props) => {
>
Was ist Lufrai?
</a>
<a
class="link text-secondary-focus hover:text-secondary"
href="#welcome-patron"
>
Das Projekt
<br />
unterstützen
</a>
<a
class="link text-secondary-focus hover:text-secondary flex items-center gap-2"
href="#welcome-opensource"
@ -183,12 +215,10 @@ const WelcomeModal: Component = (props) => {
Open Source
</a>
<a
class="link text-secondary-focus hover:text-secondary"
href="#welcome-patron"
class="link text-secondary-focus hover:text-secondary flex items-center gap-2"
href="#welcome-thankyou"
>
Das Projekt
<br />
unterstützen
Danksagungen
</a>
<a
class="link text-secondary-focus hover:text-secondary"
@ -289,39 +319,62 @@ const WelcomeModal: Component = (props) => {
Was ist <span class="text-lufrai-primary">Lufrai</span>?
</h2>
<p>
Quis occaecat pariatur laborum do ad esse. Mollit excepteur duis
nulla proident nostrud tempor ad ullamco. Amet id magna aute esse
tempor incididunt pariatur veniam ipsum qui. Sunt laboris in
laborum reprehenderit qui sint consectetur nostrud excepteur
proident proident laboris qui dolor ea. Reprehenderit tempor elit
consequat dolore quis ad voluptate consequat. Eiusmod ad quis
dolore dolore ea ipsum commodo eu aliquip veniam. Consequat
pariatur est do sint nisi duis enim tempor occaecat elit non.
</p>
</section>
<section class="mt-16">
<h2 id="welcome-opensource">Open Source</h2>
<p>
Quis occaecat pariatur laborum do ad esse. Mollit excepteur duis
nulla proident nostrud tempor ad ullamco. Amet id magna aute esse
tempor incididunt pariatur veniam ipsum qui. Sunt laboris in
laborum reprehenderit qui sint consectetur nostrud excepteur
proident proident laboris qui dolor ea. Reprehenderit tempor elit
consequat dolore quis ad voluptate consequat. Eiusmod ad quis
dolore dolore ea ipsum commodo eu aliquip veniam. Consequat
pariatur est do sint nisi duis enim tempor occaecat elit non.
Lufrai ist die Einzelfirma von{" "}
<a
class="inline-flex items-center gap-2"
href="https://lufrai.org/katjalutz"
{...externalLink}
>
Katja Lutz <ExternalLinkIcon />
</a>
. Sie setzt sich als Web-Entwicklerin, Künstlerin und Aktivistin
für eine unabhängige, freie Schweiz ein und unterstützt ihre
souveränen Mitmenschen, das Steuer selbst in die Hand zu nehmen.
<a
class="btn btn-sm inline-flex ml-3 items-center gap-2"
href="https://lufrai.org"
{...externalLink}
>
Erfahre mehr <ExternalLinkIcon />
</a>
</p>
<a
class="btn btn-sm flex items-center gap-2"
target="_blank"
rel="noopener"
href="https://git.lufrai.com/rappli/rappli"
>
Git-Repository
<ExternalLinkIcon />
</a>
<p>Grundsätze:</p>
<ol class="prose-sm">
<li>Zuoberst steht der Mensch.</li>
<li>
Selbstverantwortlich zu leben heisst, zu geben und anzunehmen.
<br />
Miteinander zu leben heisst, zu vergeben.
</li>
<li>
Erkenntnis kommt von Innen und Altruismus kann nicht erzwungen
werden.
</li>
<li>
Nötigung drängt den Horizont zusammen, Aufklärung erweitert ihn.
</li>
<li>
Gleichheit setzt voraus, sich auf Augenhöhe zu begegnen und
Privatsphäre zu respektieren.
</li>
<li>
Achtsam ist, wer global denkt, aber lokal handelt. <br />
Gute Entscheidungen trifft, wer die Konsequenzen begreift.
</li>
<li>
Der Technik die Entscheidung zu überlassen heisst, selbst zur
Maschine zu werden.
</li>
<li>
Schönheit ist nicht selbstverständlich, sie entspringt aus der
Bereitschaft zur Veränderung.
</li>
<li>
Anführer zeichnen sich nicht durch ihre Lautstärke und Forderung
aus, sondern durch Selbstlosigkeit und Transparenz.
</li>
<li>Zensur betreibt, wer etwas verbergen will.</li>
</ol>
</section>
<section class="mt-16">
@ -346,22 +399,166 @@ const WelcomeModal: Component = (props) => {
<h3>Mitwirkung</h3>
</section>
<section class="mt-16">
<h2 id="welcome-opensource">Open Source</h2>
<p>
Du hast richtig gehört, Räppli ist Open Source! Jeder kann Räppli
kopieren, verteilen und erweitern. Du brauchst also keine Angst zu
haben, dass du irgendwann keine Rechnungen mehr schreiben darfst.
Lizenziert ist Räppli mit{" "}
<a
class="inline-flex items-center gap-1"
href="https://git.lufrai.com/rappli/rappli/raw/branch/master/LICENSE"
>
MIT
<ExternalLinkIcon />
</a>
.
<a
class="btn btn-sm inline-flex ml-3 items-center gap-2"
href="https://git.lufrai.com/rappli/rappli"
{...externalLink}
>
Git-Repository
<ExternalLinkIcon />
</a>
<br />
<strong>
Falls du dich dort zur Mitwirkung registrieren möchtest: Bitte
schreibe mir nach deiner Registrierung ein kurzes Mail mit
deiner Motivation an "contact(at)lufrai.org", damit ich dich
freischalten kann.
</strong>
</p>
<p>
Eingesetzte Technologien (<small>Nur um einige zu nennen</small>):
</p>
<ul>
<li>
<a
class="flex items-center gap-2"
href="https://www.solidjs.com/"
{...externalLink}
>
Solid
<ExternalLinkIcon />
</a>
</li>
<li>
<a
class="flex items-center gap-2"
href="https://tailwindcss.com/"
{...externalLink}
>
Tailwind CSS
<ExternalLinkIcon />
</a>
</li>
<li>
<a
class="flex items-center gap-2"
href="https://daisyui.com/"
{...externalLink}
>
daisyUI
<ExternalLinkIcon />
</a>
</li>
<li>
<a
class="flex items-center gap-2"
href="https://sortablejs.github.io/Sortable/"
{...externalLink}
>
Sortable
<ExternalLinkIcon />
</a>
</li>
<li>
<a
class="flex items-center gap-2"
href="https://remark.js.org/"
{...externalLink}
>
remark
<ExternalLinkIcon />
</a>
</li>
</ul>
</section>
<section class="mt-16">
<h2 id="welcome-thankyou">Danksagungen</h2>
<p>
An dieser Stelle möchte ich mich bei der Community von{" "}
<a
class="inline-flex items-center gap-1 mr-1"
href="https://www.solidjs.com/"
{...externalLink}
>
Solid <ExternalLinkIcon />
</a>
bedanken, welche mir nicht nur durch ihre Offenheit, Anregungen
und Tipps, sondern auch durch ein verblüffend effektives Open
Source Web-Framework mein Leben als Web-Entwicklerin mindestens
3.71 Mal leichter gemacht haben!
</p>
<p>
Ausserdem möchte ich (Katja) mich insbesondere bei{" "}
{thankYouRahelAndFredi} herzlichst bedanken, welche mir stets bei
der Umsetzung meiner kurligen Projekte unterstützend zur Seite
standen und mich immer inspirierten, einen Schritt weiterzugehen!
</p>
</section>
<section class="mt-16">
<h2 id="welcome-faq">Häufig gestellte Fragen</h2>
<div class="text-black">
<AcordionItem
id="welcome-privacy"
label={"1. Wo werden meine Daten gespeichert?"}
label={"1. Wo werden welche Daten gespeichert?"}
alignCenter={false}
>
test
<ul>
<li>
Deine eingegebenen Daten werden an keine Server übermittelt.
</li>
<li>
Einige deiner Daten, wie z.B. Bankverbindung, Logo und
Zahlungsbedingungen verbleiben im{" "}
<span
class="border-b border-black border-dotted"
title="Der sogennante localStorage"
>
Speicher
</span>{" "}
von deinem Browser. So musst du sie nicht jedes Mal neu
erfassen, wenn du eine Rechnung schreiben willst.
</li>
<li>
Damit das Internet und somit auch Räppli überhaupt
funktionieren, müssen jedoch unweigerlich einige Daten
übertragen werden, wie z.B. deine IP-Adresse. Erfahre{" "}
<a
class="inline-flex items-center gap-1"
href="https://t3n.de/news/tcp-ip-internet-grundlagen-755667/"
{...externalLink}
>
hier
<ExternalLinkIcon />
</a>{" "}
wie das Internet funktioniert.
</li>
</ul>
</AcordionItem>
<AcordionItem
label="2. Ich habe vergessen zu speichern, was nun?!"
alignCenter={false}
>
test
Deine Daten werden auf keinem Server gespeichert. Lerne aus dem
Malheur und speichere ab sofort regelmässig{" "}
<HugIcon class="inline" />!
</AcordionItem>
<AcordionItem
@ -395,7 +592,13 @@ const WelcomeModal: Component = (props) => {
label={"5. Welche Geräte werden unterstützt?"}
alignCenter={false}
>
test
<p class="!mt-0">
Räppli wurde für Geräte mit grösseren Bildschirmen wie z.B.
Laptops und Computer programmiert. Die besten Druckergebnisse
werden erfahrungsgemäss mit dem Browser "Mozilla Firefox"
erreicht, jedoch sind auch "Google Chrome" basierte Browser
geeignet. Verwende einen aktuellen Browser!
</p>
</AcordionItem>
<AcordionItem
@ -412,6 +615,7 @@ const WelcomeModal: Component = (props) => {
</AcordionItem>
<AcordionItem
id="welcome-local-installation"
label={<div>7. Kann Räppli lokal installiert werden?</div>}
alignCenter={false}
>
@ -427,7 +631,38 @@ const WelcomeModal: Component = (props) => {
}
alignCenter={false}
>
test
<p class="!mt-0">
Es handelt sich bewusst nicht um eine Pixel-genaue Umsetzung
der Vorgaben von SIX. Das Design der QR-Rechnung orientiert
sich am Grundsatz des pragmatischen Perfektionismus. Das
heisst: es wurden die Möglichkeiten des Design Frameworks
"Tailwind CSS" genutzt, um die Vorgaben von SIX möglichst
genau umzusetzen, aber da dabei nicht die unerschöpflichen
Mittel der Schweizer Regierung zur Verfügung standen, wurde
das Rad nicht komplett neu erfunden.
</p>
</AcordionItem>
<AcordionItem
label={<div>9. Haftungsausschluss</div>}
alignCenter={false}
>
<p class="!mt-0">
Räppli ({getDomain()}) verwendest du{" "}
<strong>eigenverantwortlich</strong>. "Lufrai - Katja Lutz"
(Einzelfirma) und "Katja Lutz" (Mensch) übernehmen keine
Haftung.
</p>
<p>
Es besteht kein Anspruch auf die Verfügbarkeit von{" "}
{getDomain()}. Falls du 100% sicher sein willst, dass du
Räppli auch in aussergewöhnlichen Zeiten verwenden kannst,
besorge dir den Quellcode jetzt und{" "}
<a href="#welcome-local-installation" onClick={onClickFocus}>
installiere Räppli lokal
</a>
.
</p>
</AcordionItem>
</div>
</section>

Write Preview
Loading…
Cancel
Save