/* crybot - Statusseite. * * Gebaut fuer ein iPhone 15 Pro, das die Seite als Web-App vom Homescreen * startet. Vier Dinge folgen daraus und stehen deshalb ganz oben: * * 1. Im Standalone-Modus gibt es keine Adressleiste, die den Bereich unter der * Dynamic Island freihaelt -- der Inhalt liefe sonst darunter. Deshalb * ueberall env(safe-area-inset-*). * 2. Kein Zurueck-Knopf des Browsers. Die Seite muss auf einen Blick * verstaendlich sein, ohne Navigation. * 3. Angefasst wird mit dem Daumen, nicht geklickt. Nichts Interaktives unter * 44 px, und die wichtigen Zahlen gross genug zum Ablesen aus der Hand. * 4. Geladen wird im Mobilfunknetz. Keine Web-Fonts, keine Bibliotheken, keine * externen Aufrufe -- die ganze Seite sind drei Dateien. */ :root { --grund: #0E1621; --karte: #16212E; --karte-rand: #223141; --tinte: #E8EDF2; --leise: #8A9AAB; --linie: #33455A; --auf: #2FBF71; --ab: #E5654F; --warn: #E8B23A; --radius: 16px; } * { box-sizing: border-box; } html { background: var(--grund); /* Verhindert, dass iOS beim Drehen die Schrift eigenmaechtig vergroessert. */ -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Kein graues Aufblitzen beim Antippen -- das sieht auf einer reinen Anzeigeseite nach einem Knopf aus, den es nicht gibt. */ -webkit-tap-highlight-color: transparent; /* Verhindert das Ueberziehen der ganzen Seite im Standalone-Modus. */ overscroll-behavior-y: none; } .huelle { max-width: 640px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 14px) calc(env(safe-area-inset-right, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 28px) calc(env(safe-area-inset-left, 0px) + 16px); } /* --- Kopf ---------------------------------------------------------------- */ .kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .marke { display: flex; align-items: center; gap: 11px; } .marke-icon { border-radius: 8px; display: block; } h1 { font-size: 22px; font-weight: 650; margin: 0; letter-spacing: -0.2px; } .puls { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--leise); white-space: nowrap; } .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--auf); flex: none; } .puls--alt { color: var(--warn); } .puls--alt .punkt { background: var(--warn); } /* --- Karten -------------------------------------------------------------- */ .karte { background: var(--karte); border: 1px solid var(--karte-rand); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; } h2 { font-size: 16px; font-weight: 600; margin: 0; } .kapital { margin: 2px 0 12px; font-size: 30px; font-weight: 650; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; } .waehrung { font-size: 14px; font-weight: 400; color: var(--leise); } .auf { color: var(--auf); } .ab { color: var(--ab); } .leise { color: var(--leise); } .klein { font-size: 12.5px; } .marke-lage { font-size: 11.5px; font-weight: 600; letter-spacing: .2px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .drin { background: rgba(47, 191, 113, .16); color: var(--auf); } .raus { background: rgba(138, 154, 171, .16); color: var(--leise); } /* Kompakte Marken statt Erklaersaetzen (Nutzervorgabe 05.09.2026: weniger Text auf der Seite). Vorher standen hier zwei Absaetze, die sich je Zelle wiederholten -- neunmal dieselben 137 Zeichen. */ .marke-vola, .marke-ziel { display: inline-block; margin: 6px 6px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .2px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .marke-vola { background: rgba(138, 154, 171, .16); color: var(--leise); } .marke-ziel { background: rgba(232, 178, 58, .16); color: var(--warn); font-variant-numeric: tabular-nums; } .rueckblick { margin: 9px 0 0; padding-top: 9px; border-top: 1px solid var(--karte-rand); font-size: 12px; color: var(--tinte); font-variant-numeric: tabular-nums; } /* --- Uebersicht ---------------------------------------------------------- */ .uebersicht h2 { margin-bottom: 10px; } /* --- Rangliste der Zellen ------------------------------------------------ Dreissig Zeilen, jede aufklappbar. Kopfzeile und Zeile teilen sich EIN Rastermass -- steht es an zwei Stellen, laufen die Spalten beim naechsten Aendern auseinander, und zwar unauffaellig. Deshalb die Variable. Die Breiten sind fuer 393 px (iPhone 15 Pro) gerechnet: die Zahlenspalten bekommen feste Masse, der Strategiename den Rest. Umgekehrt -- Name fest, Zahlen flexibel -- wuerde bei "Nur Trend 200T" die Renditespalte zerdruecken, und die ist die eine, die man ueberfliegt. **Der Name bricht um, statt abgeschnitten zu werden.** Mit sechs Spalten bleiben auf einem iPhone rund 70 px fuer den Namen; mit Auslassungspunkten wurde daraus "Trend ...", und damit waren Trend 200T und Trend 100T nicht mehr unterscheidbar -- die Zeile sah aufgeraeumt aus und war unlesbar. Zwei Zeilen Name sind das kleinere Uebel als eine versteckte Spalte oder eine Tabelle, die seitwaerts scrollt. Der Wert in Euro ist bei einheitlichem Einsatz genau 1000 x (1 + Rendite), also dieselbe Zahl zweimal -- beim alten gemischten Topf hatte jeder Kandidat noch seinen eigenen Einsatz. Er steht auf Nutzerwunsch trotzdem in der Zeile: ein Betrag in Euro ist greifbarer als ein Prozentwert. */ .uebersicht { --zellraster: minmax(0, 1fr) 26px 20px 48px 50px 44px; } .rangkopf { display: grid; grid-template-columns: var(--zellraster); gap: 6px; align-items: end; padding: 0 0 5px 16px; /* 16px = Platz fuer den Aufklapppfeil der Zeilen */ font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--leise); border-bottom: 1px solid var(--linie); } .rangkopf--massstab { margin-top: 14px; border-bottom: 0; padding-bottom: 2px; display: block; } /* Eine Zelle: zugeklappt eine Zeile, aufgeklappt eine kleine Karte. */ .zz { border-bottom: 1px solid var(--linie); } .zz:last-of-type { border-bottom: 0; } .zz-kopf { display: grid; grid-template-columns: var(--zellraster); gap: 5px; align-items: center; padding: 8px 0 8px 16px; position: relative; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; list-style: none; } .zz-kopf::-webkit-details-marker { display: none; } /* Der Pfeil sitzt absolut in der 16-px-Spur links, damit er das Raster nicht verschiebt -- als Rasterspalte waere er eine siebte Spalte und die Kopfzeile muesste sie mitfuehren. */ .zz-kopf::before { content: "▸"; position: absolute; left: 2px; top: 8px; color: var(--leise); font-size: 11px; } .zz[open] > .zz-kopf::before { content: "▾"; } .zz[open] > .zz-kopf { font-weight: 600; } /* Die Massstabszeilen sind Bezugspunkt, kein Wettbewerber -- gedaempft und ohne Aufklapppfeil, aber auf demselben Raster. **Muss NACH der Pfeilregel stehen**: beide haben eine Klasse, also gleiche Spezifitaet, und dann gewinnt die spaetere. Andersherum bekamen die Massstaebe einen Aufklapppfeil, der nichts aufklappt. */ .zz-kopf--massstab { color: var(--leise); cursor: default; } .zz-kopf--massstab::before { content: none; } .zz-kopf--massstab + .zz-kopf--massstab { border-top: 1px solid var(--linie); } /* Umbrechen, nicht abschneiden -- siehe die Begruendung am Raster oben. Der Farbpunkt haengt am Zeilenanfang und soll beim Umbruch nicht mitwandern, deshalb der haengende Einzug. */ .zz-name { line-height: 1.25; padding-left: 15px; text-indent: -15px; } .zz-paar { color: var(--leise); font-size: 11px; } .zz-inhalt { padding: 2px 0 14px 16px; } .zz-titel { margin: 0 0 2px; font-size: 12.5px; color: var(--leise); } .zz-inhalt .kapital { font-size: 22px; margin: 0 0 8px; } .zz-lage { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .zz-inhalt .tradeliste { margin-top: 8px; } .zz-inhalt .rueckblick { margin-bottom: 0; } /* Die aufgeklappten "20 weiteren" tragen ihre eigene Trennlinie oben, sonst klebt die erste Zeile am Summary. */ .mehr--zellen { margin-top: 0; border-top: 1px solid var(--linie); } .mehr--zellen > summary { padding: 8px 0 8px 16px; } /* Auf sehr schmalen Geraeten wird keine Spalte versteckt (Nutzerentscheidung 04.09.2026: die Tabelle geht vor der Handybreite). Nur die Karte gibt ihren Innenabstand her, damit die Spalten Platz behalten. */ @media (max-width: 359px) { .uebersicht { padding-inline: 10px; } .uebersicht { --zellraster: minmax(0, 1fr) 24px 18px 44px 46px 40px; } } /* Zahlenspalten. **Eigenstaendig und nicht als ".rang .z"**: seit dem Umbau auf 30 Zellen sind die Zeilen Raster und keine Tabelle, ein Nachfahrensatz von ".rang" greift dort nicht mehr -- die Zahlen waeren linksbuendig gewesen und die Kommas untereinander verrutscht. */ .z { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Farbpunkt als SVG mit fill-Attribut (index.php) -- style="background:…" verwirft die CSP. Die --leer-Variante bleibt ein span mit Rahmen. */ .punktfarbe { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; vertical-align: 1px; } .punktfarbe--leer { background: transparent; border: 1px solid var(--linie); } /* --- Waehrung ------------------------------------------------------------ */ .einheit { font-size: .62em; font-weight: 600; color: var(--leise); letter-spacing: .3px; } .euro { font-size: .5em; font-weight: 400; color: var(--leise); white-space: nowrap; } .zweitwert { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; } .zweitwert .einheit { font-size: .7em; } /* --- Abmelden ------------------------------------------------------------ */ .kopf-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .abmelden { font-size: 11.5px; color: var(--leise); text-decoration: none; border: 1px solid var(--karte-rand); border-radius: 999px; /* 44 px hoch waere hier zu wuchtig; mit dem Innenabstand liegt die Trefferflaeche trotzdem ueber 30 px und der Knopf sitzt weit weg vom Rest -- versehentlich abmelden kann man sich damit kaum. */ padding: 5px 11px; white-space: nowrap; } .trades { margin-top: 12px; } /* --- Trades -------------------------------------------------------------- */ .tradeliste { list-style: none; margin: 0; padding: 0; } /* Ein Handel ist EINE Zeile. Festes Raster statt Fliesstext, damit Betrag und Prozentwert untereinander stehen -- genau die will man ueberfliegen, und springende Spalten machen das unmoeglich. */ .t { display: grid; grid-template-columns: 3.1em 2.5em 1fr auto 4.4em; align-items: baseline; gap: 8px; padding: 6px 2px 6px 8px; font-size: 12px; font-variant-numeric: tabular-nums; border-left: 2px solid var(--linie); border-bottom: 1px solid var(--karte-rand); } .t:last-child { border-bottom: 0; } .t--verkauf { border-left-color: var(--auf); } .t-art { font-weight: 600; } .t-paar { color: var(--tinte); } .t-zeit { color: var(--leise); font-size: 11px; } .t-wert { font-weight: 600; } .t-gewinn { text-align: right; font-weight: 650; } .t-leer { } /* Aufklappen fuer die aelteren Handel. */ .mehr { margin-top: 2px; } .mehr summary { cursor: pointer; list-style: none; font-size: 12px; color: var(--leise); padding: 8px 2px; } .mehr summary::-webkit-details-marker { display: none; } .mehr summary::before { content: "▸"; margin-right: 6px; } .mehr[open] summary::before { content: "▾"; } /* Sehr schmale Geraete: die Zeit faellt weg, bevor die Zahlen umbrechen. */ @media (max-width: 340px) { .t { grid-template-columns: 3.1em 2.5em auto 4.2em; } .t-zeit { display: none; } } /* --- Anmeldung ----------------------------------------------------------- */ .anmeldung { max-width: 340px; text-align: center; padding-top: 12vh; } .anmeldung-icon { border-radius: 16px; margin-bottom: 14px; } .anmeldung h1 { font-size: 26px; } .anmeldeformular { display: grid; gap: 6px; margin-top: 26px; text-align: left; } .anmeldeformular label { font-size: 12.5px; color: var(--leise); } .anmeldeformular input { /* 17 px ist die Untergrenze, ab der iOS beim Antippen NICHT hineinzoomt. Mit 16 px springt das Layout bei jedem Feld. */ font: inherit; font-size: 17px; background: var(--karte); color: var(--tinte); border: 1px solid var(--karte-rand); border-radius: 11px; padding: 12px 13px; margin-bottom: 8px; width: 100%; } .anmeldeformular input:focus { outline: none; border-color: var(--auf); } .anmeldeformular button { font: inherit; font-weight: 600; font-size: 17px; background: var(--auf); color: #08130C; border: 0; border-radius: 11px; padding: 13px; margin-top: 6px; min-height: 48px; cursor: pointer; } .anmeldefehler { min-height: 20px; margin-top: 12px; font-size: 13.5px; color: var(--ab); } .nichtumbrechen { white-space: nowrap; } /* --- Hinweise ------------------------------------------------------------ */ .hinweis p, .warnung p { margin: 6px 0 0; } .hinweis p:first-child, .warnung strong { margin-top: 0; } .warnung { border-color: var(--warn); background: linear-gradient(0deg, rgba(232, 178, 58, .07), rgba(232, 178, 58, .07)), var(--karte); } .warnung strong { color: var(--warn); display: block; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--grund); padding: 1px 5px; border-radius: 5px; } /* --- Fuss ---------------------------------------------------------------- */ .fuss { margin-top: 18px; font-size: 12.5px; color: var(--leise); text-align: center; } .fuss p { margin: 3px 0; } /* Sehr schmale Geraete: die grosse Betragszahl der aufgeklappten Zelle etwas kleiner, sonst bricht sie um. */ @media (max-width: 360px) { .kapital { font-size: 26px; } } /* Hellmodus wird bewusst nicht bedient: die Seite zeigt Kurscharts, und ein Wechsel der Grundfarbe wuerde die Bedeutung von Gruen und Rot schwaechen. data-thema="dunkel" steht fest im HTML. */ /* --- Der Bot ------------------------------------------------------------- Steht ueber dem Papierhandel (Nutzerwunsch 05.09.2026). Rein lesend -- diese Seite hat keinen Kontozugang; hier stehen nur Zahlen, die der Cronjob abgelegt hat. */ .bot { border-color: var(--auf); } /* Im Testnet ist die Umrandung gedaempft: der Unterschied zwischen simuliertem und echtem Geld soll man auf einen Blick sehen, ohne die Beschriftung lesen zu muessen. */ .bot--test { border-color: var(--karte-rand); } .bot-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; flex-wrap: wrap; } .bot-marke { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .bot-marke--test { background: rgba(138, 154, 171, .16); color: var(--leise); } .bot-marke--echt { background: rgba(229, 101, 79, .18); color: var(--ab); } /* Drei Angaben in einer Zeile: Kontowert, Eurogegenwert, Rendite. Auf 375 px geht das nur mit kleinerer Hauptzahl -- mit 30 px brach die Rendite um und stand allein in einer eigenen Zeile, was mehr Platz kostete als der Eurowert einbringt. */ .bot .kapital { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; font-size: 25px; } .bot .zweitwert { display: inline; margin: 0; font-size: 15px; font-weight: 500; } /* Euro gross, Gegenwaehrung klein daneben (Nutzervorgabe 09.09.2026). --gross gibt der Einheit am grossen Wert die Farbe des Werts mit, statt sie wie sonst leise zu setzen: eine graue Waehrungsangabe an einer roten Zahl sieht aus, als gehoerte sie nicht dazu. */ .waehrung--gross { color: inherit; font-size: .55em; font-weight: 500; } /* Klein, aber in Tinte statt leise -- ausdruecklich weiss, nicht gedaempft. */ .bot .nebenwert { font-size: 14px; font-weight: 500; color: var(--tinte); font-variant-numeric: tabular-nums; } /* Die Kontoadresse ist laenger als "Der Bot" und darf umbrechen, statt die LIVE-Marke aus der Zeile zu schieben. */ .bot-konto { font-size: 16px; overflow-wrap: anywhere; } /* Konfigurierte Konten ohne Schluessel. Bewusst eine schmale Zeile und keine Karte je Konto: sichtbar muss es sein, Platz wegnehmen darf es nicht -- sonst fuellen vier Platzhalter den ersten Bildschirm. */ .karte--hinweis { padding: 10px 14px; margin-top: -4px; border-style: dashed; line-height: 1.5; } .bot .dickzahl { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; margin-left: auto; } /* --- Lage: Balken mit Ist-Fuellung und Ziel-Marke ------------------------ */ .bot-lage { margin-top: 14px; } .bot-balken { position: relative; height: 10px; border-radius: 999px; background: var(--grund); border: 1px solid var(--karte-rand); overflow: hidden; } /* Fuellung und Marke sind ein SVG (index.php) -- Laengen als Attribute, weil die CSP style="…" verwirft. Die Rundung kommt vom Rahmen (overflow:hidden), die Marke behaelt per non-scaling-stroke 2 px Breite, obwohl das SVG in die Breite gezogen wird. */ .bot-balken svg { display: block; width: 100%; height: 100%; } .bot-ist { fill: var(--auf); } /* Die Zielmarke liegt UEBER der Fuellung, damit man beim Umschlag beides sieht: wo der Bot steht und wohin er will. */ .bot-ziel { stroke: var(--tinte); stroke-width: 2px; vector-effect: non-scaling-stroke; } .bot-zahlen { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; } .bot-bestand { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; font-variant-numeric: tabular-nums; } .bot .tradeliste { margin-top: 12px; } /* --- Herunterziehen zum Aktualisieren (pull-refresh.js) ------------------ Muss hier stehen und nicht als