Eine spezielle html-Seite ändern

[schameur]

Mahlzeit, als erneuter Anfänger habe ich da mal ein kleines Problemchen wo ich nicht weiterkomme.
Problematisch ist momentan für mich das ich mit den derzeitigen html-Editoren nicht wirklich klarkomme.
(Ich hab html zuletzt mal vor 20 Jahren benutzt um eine Seite mit Links zu verschiedenen Ordern und Dateien zu machen)

Ich möchte mir die Seite von iancoleman https://iancoleman.io/bip39/ etwas abändern.
Die speichert man normalerweise lokal und benutzt sie offline. Es gibt auch auf zig Webseiten verschiedene leicht veränderte Versionen davon, aber keine ist so wie ich das benötigen würde.

Und zwar soll die Option "show entropy details" und dazu die Option "Binary" (erst rechts auf der Seite zu sehen wenn man show entropy anwählt) permanent fest ausgewählt sein.

Nun habe ich das zwar hinbekommen das "Binary" ausgewählt ist, die restlichen Optionen habe ich ausgeblendet mit <!--
Auch die Option "show entropy details" ist mit einem Haken versehen, allerdings nur die checkbox. Die Funktion selbst ist trotzdem nicht aktiviert und so wird auch das Eingabefeld wo man die Entropie reinschreibt nicht angezeigt.
Die Datei hab ich mal hochgeladen (konnte keine html als Anhang nutzen? ist das so?)
https://github.com/Cftok-Main/23-Numbers-Test-Standard-Distribution/blob/main/bip39-standalone-Kopie-Kopie - Kopie.html

Ich finde irgendwie nicht den Bereich der für das Eingabefeld ist, oder besser gesagt ich finde die Option nicht mit der das Eingabefeld eingeblendet wird.

Wäre dankbar für eine Erklärung was ich da suchen muss und zu tun habe.

 

[AndreasB]

Hallo @schameur.
Irgendwie verstehe ich nicht was du erreichen möchtest.

Du möchtest, dass Punkte Fest ausgewählt sind? Meinst du damit, dass sie nicht mehr abwählbar sind, oder dass sie vorausgewählt sind?

die restlichen Optionen habe ich ausgeblendet mit <!--

Meinst du du hast die Optionen mit einem HTML Kommentar ausgebelndet?
Dann ist es sehr schwer diese wieder dynamisch einzublenden. Mache das lieber mit hidden oder gleich mit CSS.

allerdings nur die checkbox. Die Funktion selbst ist trotzdem nicht aktiviert und so wird auch das Eingabefeld wo man die Entropie reinschreibt nicht angezeigt

Das liegt wahrscheinlich an deinem Script. Es hört sich an, als ob auf der Checkbox ein listener sitzt, der natürlich nur bei einer Änderung der Checkbox ausgeführt wird.
Nicht aber beim Start der Seite.

oder besser gesagt ich finde die Option nicht mit der das Eingabefeld eingeblendet wird

Wenn du die Stelle im Script suchst, musst du nach Methoden Ausschau halten, die das Element ansprechen und dann schauen, wo dieses überall verwendet wird.
Da kann bei deinen 24000 Zeilen Code ein wenig dauern...

Ich finde irgendwie nicht den Bereich der für das Eingabefeld ist

Wenn du das input Element in deiner HTML Struktur finden möchtest kannst du die Dev-Tools verwenden

konnte keine html als Anhang nutzen? ist das so?

Normalerweise bindet man html Dateien als Snippet hier ein aber eine Datei mit 32000 Zeilen, sollte man besser auf mehrere Dateien aufteilen.
Da ist es kein Wunder, dass die Editoren damit nicht gut klar kommen.
Du solltest auch die externen Scripte, die du geinlinked hast als externe Quellen angeben.

 

[schameur]

mehr abwählbar sind, oder dass sie vorausgewählt sind?

Beides. Ich möcht diese Funktionen permanent aktiviert haben und auf der Seite ausgeblendet.

Meinst du du hast die Optionen mit einem HTML Kommentar ausgebelndet?

Ja genau, so das sie auf der Seite nicht mehr sichtbar sind.

als ob auf der Checkbox ein listener sitzt, der natürlich nur bei einer Änderung der Checkbox ausgeführt wird.
Nicht aber beim Start der Seite.

Ja genau so verhält sich die Seite beim Aufruf, ich muss immer auf show entropy klicken und erst dann erscheint das Eingabefeld.

Wenn du die Stelle im Script suchst, musst du nach Methoden Ausschau halten, die das Element ansprechen und dann schauen, wo dieses überall verwendet wird.

Hab ich auch, den Namen des Eingabefeldes hatte ich glaub ich auch korrekt gefunden. Die steht auf hidden.
Was muss da stehn damit sie sichtbar ist?
Ich hab es mit false versucht aber das hat keinerlei Auswirkung.
(In der Annahme das ich das Eingabefeld tatsächlich korrekt gefunden habe)

Wenn du das input Element in deiner HTML Struktur finden möchtest kannst du die Dev-Tools verwenden

Ok das probier ich noch aus.
Ich hatte es einfach im Firefox mit dem Inspektor untersucht und das Eingabefeld angeklickt, dadurch fand ich das dann.

Normalerweise bindet man html Dateien als Snippet hier ein aber eine Datei mit 32000 Zeilen, sollte man besser auf mehrere Dateien aufteilen.

EDIT: achso du meinst hier zum hochladen, hatt ich erst falsch verstanden.

Ja also ich will die Seite vereinfachen damit das auch jemand bedienen kann für den zwei Knöpfe schon einer zuviel ist.
Das heisst also das es keine unnötigen Auswahlmöglichkeiten gibt und man direkt die Zahlen ins Eingabefeld tippt. Der Converter rechnet den Rest automatisch.

 

[AndreasB]

Ich hatte es einfach im Firefox mit dem Inspektor untersucht und das Eingabefeld angeklickt, dadurch fand ich das dann.

Ja, das hatte ich gemeint.

Ich hab es mit false versucht aber das hat keinerlei Auswirkung

Das verstehe ich nicht, was hast du gemacht? in HTML oder im Script?

Was muss da stehen damit sie sichtbar ist?

Eigentlich musst du nur auf dem Element mit der Klasse entropy-container die Klasse hidden entfernen.
Du solltest das aber lieber durch den Aufruf der Funktion setEntropyVisibility machen, das ist sauberer, da die Funktion noch mehr macht, als das hidden zu entfernen.

 

[schameur]

Das verstehe ich nicht, was hast du gemacht? in HTML oder im Script?

Im HTML code

Klasse entropy-container die Klasse hidden entfernen

Au backe, da bin ich gar nicht drauf gekommen daa hidden zu entfernen.

durch den Aufruf der Funktion setEntropyVisibility machen

Okay ich wühl mich da nochmal durch.

Mutmasslich bin ich inzwischen zu alt für sowas. Das Excelzeug in meinem github musst ich mir auch spontan in zweo Wochen beibiegen und hab drölfhundert Leute gefragt bis das fluppte.

 

[schameur]

Eigentlich musst du nur auf dem Element mit der Klasse entropy-container die Klasse hidden entfernen.

Istz das nicht eher dieser Bereich?

In der div-class="entropy-container" und darin die Klasse "col-sm-7" und darin dann die Textarea id="entropy" ??

<div class="col-sm-7">
                                    <textarea id="entropy" rows="2" class="entropy private-data form-control" placeholder="Accepts either binary, base 6, 6-sided dice, base 10, hexadecimal or cards" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" style="width: 672px; height: 104px;"></textarea>
                                    <div class="row filter-warning text-danger hidden">
                                        <p class="col-sm-12">
                                        <strong>
                                        Some characters have been discarded
                                        </strong>
                                        </p>
                                    </div>

Irgendwie finde ich das im Moment nicht. Ich find kein hidden oder ähnliches.

 

[scatello]

Ich find kein hidden oder ähnliches.

Ohne den CSS-Teil (der riesig ist) finde ich 117 mal hidden.

 

[AndreasB]

Ich find kein hidden oder ähnliches.

Bei mir sieht das so aus:


Und, wenn ich die Klasse hidden da entferne, erscheint das Input Element.

 

[schameur]

Das ist ja strange, ich hab das über Suchfunktion gesucht und war nicht zu finden. Hab dann alles komplett durchgescrollt und dann hab ichs gefunden.
Oder bei der Suche hats sich aufgehangen, keine Ahnung.

Nachdem ich hidden entfernt habe funktionierts jetzt.

Danke euch.

Jetzt komm ich zumindest erstmal weiter und kann das ganze etwas schrumpfen damits übersichtlicher wird.

Und, wenn ich die Klasse hidden da entferne, erscheint das Input Element.

Was für einen Editor hast du da denn?
Dann probier ich den auch mal aus.

Ohne den CSS-Teil (der riesig ist) finde ich 117 mal hidden.

Ja das ist halt echt viel wenn das alles auf einer einzigen Seite mit in den Code muss. Sonst wäre die Seite ja auf mehrere Dateien verteilt und das ist dann für die meisten Leute zu kompliziert. Das soll ja auch für Leute gehn für die zwei Knöpfe schon einer zuviel ist.
Denn diese Seite ruft man zwar einmal auf, aber dann speichert man sie einfach mit dem Browser lokal. Benutzen tut man die dann idealerweise auf einem Offline-Computer, oder zumindest trennt man die internetverbindung vor der Benutzung.

Und auch an dem trennen der Internetverbindung scheitert es massenweise.

Aus dem Grund habe ich versucht soviel wie möglich auch in Excel umzusetzen, damit Leute garnicht erst den Browser öffnen ne.
Doch in Excel lässt sich der SHA256-Hashwert nicht berechnen und der wird zwingend benötigt um das 24. Wort zuerrechnen. Denn das 24. Wort (bzw. immer das letzte Wort der Reihe) ist die Prüfsumme der vorigen Wörter.

Aaalso will ich wenigstens versuchen die html-Seite zu vereinfachen.

Und später als Paket will ich das so machen das die in Excel mittels Würfel gefundenen 23 Wörter in eine Seite übernommen werden, in die Seite "seedpicker".
Damit ermittelt man das 24. Wort wenn man bereits 23 hat.

Anschliessend muss ich mit diesen 24 Wörtern aber noch in die Seite mit dem Seed-Generator damit dort dann die passenden Adressen und Privatekeys ermittelt werden.

Es läuft also wohl später darauf hinaus das ich Seedpicker und iancoleman kombiniere.

Und ja...mir graut es auch davor.

 

[AndreasB]

Was für einen Editor hast du da denn?

Das ist der Element Inspector der Chrome Dev-Tools.

 

[scatello]

an dem trennen der Internetverbindung scheitert es massenweise.

Wer trennt denn heutzutage noch seine Internetverbindung?

 

[schameur]

Das ist der Element Inspector der Chrome Dev-Tools.

Achso, dann muss ich den mal installieren und ausprobieren. Danke.
Ich hatte vorhin den NVU benutzt und damit hab ichs dann ja auch gefunden.

Wer trennt denn heutzutage noch seine Internetverbindung?

In diesem Fall ist es zwingend erforderlich die Verbindung zu trennen oder gleich ein Offlinegerät zu benutzen. Auch Windows ist da eher verpönt.
Man erstellt damit ja einen Seed und die Privatekeys. Das ist nix wo man will das es im internet herumschwirrt.

 

[schameur]

Bevor ich das vergesse, wie kann ich das denn machen das diese Seite im Browser ohne Menübar, Toolbar oder Bookmarkleiste angezeigt wird?
Es wär schön wenn man die Seite lokal dann öffnet und das Fenster nur die Titelleiste hat.

Mit diesem Script das ich gefunden hab gehts schonmal nicht. Ich vermute aber das ist für Objekte auf einer Seite die man dann öffnet.

<script type="text/javascript">
{
window.open ("fenster","toolbars=no, scrollbars=no").focus();
}
</script>

Hintergrund, es soll erschwert im gleichen Broswerfenster z.b. noch eine andere Seite und mit internetverbindung aufzurufen. Denn sonst könnten cookies verteilt werden, der Cache durchschnüffelt usw.

Idealfall wäre sogar das es auch keine Titelzeile gibt, so kann man erst garnicht auf dumme Ideen kommen weil nix anzuklicken da ist. Aber dann gabs das X zum schliessen ja auch nicht.
Obwohl...etwas das wie eine Titelzeile aussieht mit einem Schliessen-Button rechts könnt man ja ganz oben auf der Seite verankern oder?

Hmm, ich weiss das ich sowas sogar mal hatte, aber keine Ahnung mehr wie wo usw, das ist bestimmt auch schon 20 Jahre her das ich html benutzt hab.

 

[scatello]

Ich hatte vorhin den NVU benutzt

Dieser Editor ist extrem veraltet und sollte eigentlich nicht mehr benutzt werden.

In diesem Fall ist es zwingend erforderlich die Verbindung zu trennen oder gleich ein Offlinegerät zu benutzen. Auch Windows ist da eher verpönt.
Man erstellt damit ja einen Seed und die Privatekeys. Das ist nix wo man will das es im internet herumschwirrt.

Das hört sich für mich schon ein wenig nach Paranoia an.

Es wär schön wenn man die Seite lokal dann öffnet und das Fenster nur die Titelleiste hat.

Damit verärgerst du bestimmt einige User, wobei ich mir aber nicht sicher bin, ob das überhaupt geht.

Hintergrund, es soll erschwert im gleichen Broswerfenster z.b. noch eine andere Seite und mit internetverbindung aufzurufen.

Dann nehme ich halt einen anderen Browser oder öffne ein zweites Browserfenster.

 

[schameur]

Dieser Editor ist extrem veraltet und sollte eigentlich nicht mehr benutzt werden.

Ich weiss, aber ich wollte das mal vergleichen mit dem Inspektor von Firefox den ich vorher genommen hatte.

Das hört sich für mich schon ein wenig nach Paranoia an.

Nein das hat Gründe. Es ist normal das man das so macht. Es scheitert nur oft daran das Nutzer nicht verstehen wie sie das machen müssen.

Damit verärgerst du bestimmt einige User, wobei ich mir aber nicht sicher bin, ob das überhaupt geht.

Nö das verärgert niemand. Das freut Nutzer weil sie sich dann nicht selbst darum kümmern müssen. Siehe oben.

Dann nehme ich halt einen anderen Browser oder öffne ein zweites Browserfenster.

Naja, siehe oben, daran scheiterts oft.
Du musst halt sehen das es den meisten schlicht an diesem Grundwissen fehlt.

Dieses Grundwissen zu vermitteln ist seit ewig nicht erfolgreich. Also versuche ich jetzt den Weg es dem Nutzer abzunehmen.

Es gibt ja zu der Seite geschätzt 1 Million Erklärungen, Videos usw. Und trotzdem bekommen es die wenigsten hin einfach die Seite auf dem Rechner zu speichern und die dann zu öffnen. Sie suchen die Seite jedesmal neu bei google und öffnen sie.
Begründung, sie dachten das es mit dem speichern der Seite getan ist.
Das sie dann in "Downloads" gehen müssen, die Seite da rauskopieren und vielleicht auf den Desktop legen ist nicht erklärbar. Sie gehen über google.

Was dann auch schon das nächste Risiko ist das eine gefakte Seite aufgerufen wird die jedem denselben Seed anzeigt der dem Betreiber dann natürlich bekannt ist.

Das die Seite in einem Fenster ohne Menü usw. angezeigt wird hilft vielleicht auch dabei das die Leute gedanklich die Brücke zu einem Programm hinbekommen das sie explizit anklicken müssen. Weil es eben nicht aussieht wie ihr Browser den sie sonst benutzen.

Grundsätzlich hast du Recht, es ist alles sehr paranoid. Aber die Vergangenheit zeigt mehr als deutlich das es angebracht ist.

 

[AndreasB]

Bevor ich das vergesse, wie kann ich das denn machen das diese Seite im Browser ohne Menübar, Toolbar oder Bookmarkleiste angezeigt wird?
[…]
Idealfall wäre sogar das es auch keine Titelzeile gibt, so kann man erst garnicht auf dumme Ideen kommen weil nix anzuklicken da ist. Aber dann gabs das X zum schliessen ja auch nicht.

Das hört sich eher nach einer Desktop App, als nach einer Webseite an.
Eventuell wäre eine Electron App eine Idee für dich?
Da kannst du die Internet Kommunikation komplett einschränken, ohne das Internet trennen zu müssen.
Auch eine Trennung der Codeteile wäre möglich.

 

[schameur]

Eventuell wäre eine Electron App eine Idee für dich?

Das scheint echt interessant zu sein.
Wenn ich das richtig verstehe dann nimmt man html, js und css-Code um damit ein Electron-Programm zu erstellen?
Und denn wird Chromium in das Programm integriert so das beim starten des Programmes das integrierte Chromium gestartet wird und den html, js und css-code ausführt?
Und das würde dann auf dem Rechner laufen und der Nutzer muss Electron nicht selbst auch auf dem Rechner haben?
So im groben richtig ne?

Das wäre natürlich echt ne super Sache. Damit könnte ich die ganze Seite damit machen eigentlich. Denk ich mir. Würde ja sehr viele Unwägbarkeiten auf Nutzerseite schon vornherein eliminieren.

Werd mir das anschauen. Muss nur erstmal durch die gefühlt 984713 Dateien blicken die bei Github da sind. Ist ja gruslig

 

[AndreasB]

So im groben richtig ne

Genau so ist das. Schau' dir VSCode oder zum Beispiel Figma an.

Muss nur erstmal durch die gefühlt 984713 Dateien blicken

Das ist gar nicht notwendig.
Wenn du dich mit Electron beschäftigen möchtest, Fange einfach mit der Einführung aus der Dokumentation an.
Dazu musst du nicht verstehen, wie das Framework im kleinsten funktioniert.
Außerdem reicht dir das wahrscheinlich, da deine App ja nur aus einer Seite besteht.

 

[schameur]

Außerdem reicht dir das wahrscheinlich, da deine App ja nur aus einer Seite besteht.

In der Tat.

Aber jetzt hab ich grad geschaut und da kommen echt große Programme bei raus weil tatsächlich immer der komplette Chromium dazugepackt wird. Einige sehr sehr einfache Beispielprogramme haben 350 bis 450MB. Ich weis nicht ob das sinnvoll ist. Gezippt ist es zwar weniger, aber trotzdem echt ganz schön übel.

Da ist es als normale html-Seite dann doch praktischer? Zumal die Seite ja schon fertig vorhanden ist?

Wenn ich das nochmal hinbekomme das es ohne Browsermenü usw. zu öffnen ist dann wär dieser Punkt ja erledigt.
Das ist zwar kein Muss, aber es hätte halt doch Vorteile. So glaub ich zumindest.

Gedankenstütze an mich, die Seite ist jetzt in https://github.com/Cftok-Main/Testing/blob/main/entropy-bip39-standalone.html

 

[AndreasB]

Es gibt wahrscheinlich noch Alternativen zu Electron, die kleinere outputs haben.
Da diese jedoch unabhängig vom Browser laufen werde sie niemals kleiner sein, als eine Webseite die su im Browser aufrufst.

Allerdings wirst du bei einer Webseite es nie verhindern können, dass sie jemand aufruft, wenn er online ist.
Außerdem ist mir kein Weg bekannt, wie man in jedem Browser verhindern kann, dass die UI Elemente angezeigt werden.