Einführung

Ein Artikel, der gerade das zuvor veröffentlichte Erstellen einer App, die Schüler mit Python errät als GUI-Software erstellt hat.

Programm

main.py
data/
  history.txt
  list.txt
  list_raw.txt
web/
  main.html
  css/
    style.css
  js/
    eel.js

main.py

`main.py`


import locale
import eel
import random
import pickle
import os
import sys
import datetime
from tkinter import filedialog, Tk
import platform
import copy


def main():
    eel.init("web")
    eel.start("main.html")


Student_names = []
Student_FILENAME = "./data/list.txt"
Student_FILENAME_raw = "./data/list_raw.txt"

# Student
@eel.expose
def Student_load():
    with open(select_file(), "r") as f:
        global Student_names
        Student_names = f.read().splitlines()
        Student_save(Student_FILENAME)
        Student_save(Student_FILENAME_raw)


@eel.expose
def Student_reset():
    Student_names_load(Student_FILENAME_raw)


@eel.expose
def Student_show():
    Student_names_load(Student_FILENAME)
    name_ls = ""
    a = 1
    for name in Student_names:
        if a % 5 == 0:
            name_ls = name_ls + name + "<br>"
        else:
            name_ls = name_ls + name + "　"
        a += 1
    return name_ls


@eel.expose
def Student_choice():
    Student_names_load(Student_FILENAME)
    global Student_names_raw
    Student_names_raw = copy.deepcopy(Student_names)
    if not Student_names:
        return
    global name
    name = random.choice(Student_names)
    Student_names.remove(name)
    if Student_names == []:
        Student_names_load(Student_FILENAME_raw)
    History_add(name)
    Student_save(Student_FILENAME)
    return name


@eel.expose
def Student_save(FILENAME):
    f = open(FILENAME, 'wb')
    pickle.dump(Student_names, f)


@eel.expose
def Student_names_load(FILENAME):
    f = open(FILENAME, "rb")
    global Student_names
    Student_names = pickle.load(f)


# History
History_FILENAME = "./data/history.txt"
History_data = []


@eel.expose
def History_load():
    with open(History_FILENAME, "r") as f:
        global History_data
        History_data = f.read().splitlines()


@eel.expose
def History_save():
    with open(History_FILENAME, "w") as f:
        for history in History_data:
            print(history, file=f)


@eel.expose
def History_show():
    history_ls = ""
    History_load()
    for history in History_data:
        history_ls = history + "<br>" + history_ls
    return history_ls


locale.setlocale(locale.LC_ALL, '')
@eel.expose
def History_add(name):
    now = datetime.datetime.now()
    History_data.append(f"{now:%m Monat%d Tag}:{name}")
    History_save()


@eel.expose
def History_cancel():
    History_data.pop()
    History_save()
    global Student_names
    Student_names = copy.deepcopy(Student_names_raw)
    Student_save(Student_FILENAME)


@eel.expose
def History_clear():
    global History_data
    History_data = []
    History_save()


#Listen lesen
#Erstellen eines Stammfensters für einen Dialog
#(Die Wurzel selbst hat nichts mit dem Aalfenster zu tun, daher ist es wünschenswert, es auszublenden.)
root = Tk()
#Setzen Sie die Fenstergröße auf 0
root.geometry("0x0")
#Schalten Sie die Titelleiste des Fensters aus
root.overrideredirect(1)
#Fenster ausblenden
root.withdraw()
system = platform.system()


@eel.expose
def select_file():
    #Bei Windows befindet sich der Dialog ebenfalls im Rückzugszustand
    #Zeigen Sie das Stammfenster an, da es ausgeblendet wird
    if system == "Windows":
        root.deiconify()
    #Aktualisieren Sie vor und nach dem Erstellen eines Dialogfelds für macOS()Anruf
    root.update()

    #Dialog nach vorne
    #oberste angegeben(Vordergrund)
    root.attributes('-topmost', True)
    root.withdraw()
    root.lift()
    root.focus_force()
    path_str = filedialog.askopenfilename()
    root.update()
    if system == "Windows":
        #Wieder ausblenden (nur Windows)
        root.withdraw()
    #path = Path(path_str)
    return path_str


if __name__ == '__main__':
    main()

main.html

`main.html`


<html>

<head>
  <meta charset="UTF-8">
  <title>Der Typ, der den Studenten errät</title>
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <script type="text/javascript" src="/eel.js"></script>
  <script type="text/javascript">
    async function Student_choice() {
      var demo2 = document.getElementById("div0");
      demo2.innerHTML = "";
      div0.insertAdjacentHTML('afterbegin', '<div id="name"></div>');
      let val = await eel.Student_choice()();
      var doc0 = document.getElementById("name");
      doc0.innerHTML = val;
    }

    async function Student_load() {
      eel.Student_load();
    }

    async function Student_show() {
      let val = await eel.Student_show()();
      var doc0 = document.getElementById("div0");
      doc0.innerHTML = val;
    }

    async function History_show() {
      let val = await eel.History_show()();
      var doc0 = document.getElementById("div0");
      doc0.innerHTML = val;
    }

    async function History_clear() {
      let val = await eel.History_clear()();
      var doc0 = document.getElementById("div0");
      doc0.innerHTML = val;
    }

    async function History_cancel() {
      let val = await eel.History_cancel()();
      var doc0 = document.getElementById("div0");
      doc0.innerHTML = val;
    }
  </script>
</head>

<body>
  <center>
    <div id="div0">
    </div>
    <div class="bottom">
      <a href="#" onclick="Student_choice()" class="btn-square">Errate den Schüler</a>
      <a href="#" onclick="History_cancel()" class="btn-square">Abwesende überspringen</a>
      <a href="#" onclick="Student_show()" class="btn-square">Zeigen Sie die verbleibenden Schüler</a>
      <a href="#" onclick="History_show()" class="btn-square">Siehe Verlauf</a>
      <a href="#" onclick="History_clear()" class="btn-square">Klare Geschichte</a>
      <a href="#" onclick="Student_load()" class="btn-square">Dienstplan aktualisieren</a>
    </div>
  </center>
  <div class='markdown-preview' data-use-github-style>
    <details>
      <summary>So aktualisieren Sie die Liste</summary>
      <div>

        <h1 id="So aktualisieren Sie die Liste">So aktualisieren Sie die Liste</h1>
        <h3 id="1">1</h3>
        <p>Textdatei mit einem beliebigen Dateinamen(*.txt)Ein ... kreieren.</p>
        <h3 id="2">2</h3>
        <p>Drin<br>
          1.Name<br>
          2.Name<br>
・<br>
・<br>
・<br>
Eingeben.</p>
        <h3 id="3">3</h3>
        <p>Klicken Sie auf Dienstplan aktualisieren,Wählen Sie eine Textdatei aus.</p>
      </div>
    </details>
  </div>

</html>

style.css

`style.css`


.btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;
  /*Knopffarbe*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}

.btn-square:active {
  /*Wenn Sie die Taste drücken*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  /*Sich abwärts bewegen*/
  border-bottom: none;
  /*Löschen Sie die Zeile*/
}

#div0 {
  height: 300px;
  overflow: scroll;
}

#name {
  margin-top: 50px;
  font-size: 100px;
}

.bottom {}

.markdown-preview:not([data-use-github-style]) {
  padding: 2em;
  font-size: 1.2em;
  color: rgb(197, 200, 198);
  background-color: rgb(29, 31, 33);
  overflow: auto;
}

.markdown-preview:not([data-use-github-style])> :first-child {
  margin-top: 0px;
}

.markdown-preview:not([data-use-github-style]) h1,
.markdown-preview:not([data-use-github-style]) h2,
.markdown-preview:not([data-use-github-style]) h3,
.markdown-preview:not([data-use-github-style]) h4,
.markdown-preview:not([data-use-github-style]) h5,
.markdown-preview:not([data-use-github-style]) h6 {
  line-height: 1.2;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  color: rgb(255, 255, 255);
}

.markdown-preview:not([data-use-github-style]) h1 {
  font-size: 2.4em;
  font-weight: 300;
}

.markdown-preview:not([data-use-github-style]) h2 {
  font-size: 1.8em;
  font-weight: 400;
}

.markdown-preview:not([data-use-github-style]) h3 {
  font-size: 1.5em;
  font-weight: 500;
}

.markdown-preview:not([data-use-github-style]) h4 {
  font-size: 1.2em;
  font-weight: 600;
}

.markdown-preview:not([data-use-github-style]) h5 {
  font-size: 1.1em;
  font-weight: 600;
}

.markdown-preview:not([data-use-github-style]) h6 {
  font-size: 1em;
  font-weight: 600;
}

.markdown-preview:not([data-use-github-style]) strong {
  color: rgb(255, 255, 255);
}

.markdown-preview:not([data-use-github-style]) del {
  color: rgb(155, 160, 157);
}

.markdown-preview:not([data-use-github-style]) a,
.markdown-preview:not([data-use-github-style]) a code {
  color: white;
}

.markdown-preview:not([data-use-github-style]) img {
  max-width: 100%;
}

.markdown-preview:not([data-use-github-style])>p {
  margin-top: 0px;
  margin-bottom: 1.5em;
}

.markdown-preview:not([data-use-github-style])>ul,
.markdown-preview:not([data-use-github-style])>ol {
  margin-bottom: 1.5em;
}

.markdown-preview:not([data-use-github-style]) blockquote {
  margin: 1.5em 0px;
  font-size: inherit;
  color: rgb(155, 160, 157);
  border-color: rgb(67, 72, 76);
  border-width: 4px;
}

.markdown-preview:not([data-use-github-style]) hr {
  margin: 3em 0px;
  border-top: 2px dashed rgb(67, 72, 76);
  background: none;
}

.markdown-preview:not([data-use-github-style]) table {
  margin: 1.5em 0px;
}

.markdown-preview:not([data-use-github-style]) th {
  color: rgb(255, 255, 255);
}

.markdown-preview:not([data-use-github-style]) th,
.markdown-preview:not([data-use-github-style]) td {
  padding: 0.66em 1em;
  border: 1px solid rgb(67, 72, 76);
}

.markdown-preview:not([data-use-github-style]) code {
  color: rgb(255, 255, 255);
  background-color: rgb(48, 51, 55);
}

.markdown-preview:not([data-use-github-style]) pre.editor-colors {
  margin: 1.5em 0px;
  padding: 1em;
  font-size: 0.92em;
  border-radius: 3px;
  background-color: rgb(39, 41, 44);
}

.markdown-preview:not([data-use-github-style]) kbd {
  color: rgb(255, 255, 255);
  border-width: 1px 1px 2px;
  border-style: solid;
  border-color: rgb(67, 72, 76) rgb(67, 72, 76) rgb(53, 57, 60);
  border-image: initial;
  background-color: rgb(48, 51, 55);
}

.markdown-preview[data-use-github-style] {
  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
  line-height: 1.6;
  overflow-wrap: break-word;
  padding: 30px;
  font-size: 16px;
  color: rgb(51, 51, 51);
  background-color: rgb(255, 255, 255);
}

.markdown-preview[data-use-github-style]> :first-child {
  margin-top: 0px !important;
}

.markdown-preview[data-use-github-style]> :last-child {
  margin-bottom: 0px !important;
}

.markdown-preview[data-use-github-style] a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.markdown-preview[data-use-github-style] .absent {
  color: rgb(204, 0, 0);
}

.markdown-preview[data-use-github-style] .anchor {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  padding-right: 6px;
  padding-left: 30px;
  margin-left: -30px;
}

.markdown-preview[data-use-github-style] .anchor:focus {
  outline: none;
}

.markdown-preview[data-use-github-style] h1,
.markdown-preview[data-use-github-style] h2,
.markdown-preview[data-use-github-style] h3,
.markdown-preview[data-use-github-style] h4,
.markdown-preview[data-use-github-style] h5,
.markdown-preview[data-use-github-style] h6 {
  position: relative;
  margin-top: 1em;
  margin-bottom: 16px;
  font-weight: bold;
  line-height: 1.4;
}

.markdown-preview[data-use-github-style] h1 .octicon-link,
.markdown-preview[data-use-github-style] h2 .octicon-link,
.markdown-preview[data-use-github-style] h3 .octicon-link,
.markdown-preview[data-use-github-style] h4 .octicon-link,
.markdown-preview[data-use-github-style] h5 .octicon-link,
.markdown-preview[data-use-github-style] h6 .octicon-link {
  display: none;
  color: rgb(0, 0, 0);
  vertical-align: middle;
}

.markdown-preview[data-use-github-style] h1:hover .anchor,
.markdown-preview[data-use-github-style] h2:hover .anchor,
.markdown-preview[data-use-github-style] h3:hover .anchor,
.markdown-preview[data-use-github-style] h4:hover .anchor,
.markdown-preview[data-use-github-style] h5:hover .anchor,
.markdown-preview[data-use-github-style] h6:hover .anchor {
  padding-left: 8px;
  margin-left: -30px;
  text-decoration: none;
}

.markdown-preview[data-use-github-style] h1:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h2:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h3:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h4:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h5:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h6:hover .anchor .octicon-link {
  display: inline-block;
}

.markdown-preview[data-use-github-style] h1 tt,
.markdown-preview[data-use-github-style] h2 tt,
.markdown-preview[data-use-github-style] h3 tt,
.markdown-preview[data-use-github-style] h4 tt,
.markdown-preview[data-use-github-style] h5 tt,
.markdown-preview[data-use-github-style] h6 tt,
.markdown-preview[data-use-github-style] h1 code,
.markdown-preview[data-use-github-style] h2 code,
.markdown-preview[data-use-github-style] h3 code,
.markdown-preview[data-use-github-style] h4 code,
.markdown-preview[data-use-github-style] h5 code,
.markdown-preview[data-use-github-style] h6 code {
  font-size: inherit;
}

.markdown-preview[data-use-github-style] h1 {
  padding-bottom: 0.3em;
  font-size: 2.25em;
  line-height: 1.2;
  border-bottom: 1px solid rgb(238, 238, 238);
}

.markdown-preview[data-use-github-style] h1 .anchor {
  line-height: 1;
}

.markdown-preview[data-use-github-style] h2 {
  padding-bottom: 0.3em;
  font-size: 1.75em;
  line-height: 1.225;
  border-bottom: 1px solid rgb(238, 238, 238);
}

.markdown-preview[data-use-github-style] h2 .anchor {
  line-height: 1;
}

.markdown-preview[data-use-github-style] h3 {
  font-size: 1.5em;
  line-height: 1.43;
}

.markdown-preview[data-use-github-style] h3 .anchor {
  line-height: 1.2;
}

.markdown-preview[data-use-github-style] h4 {
  font-size: 1.25em;
}

.markdown-preview[data-use-github-style] h4 .anchor {
  line-height: 1.2;
}

.markdown-preview[data-use-github-style] h5 {
  font-size: 1em;
}

.markdown-preview[data-use-github-style] h5 .anchor {
  line-height: 1.1;
}

.markdown-preview[data-use-github-style] h6 {
  font-size: 1em;
  color: rgb(119, 119, 119);
}

.markdown-preview[data-use-github-style] h6 .anchor {
  line-height: 1.1;
}

.markdown-preview[data-use-github-style] p,
.markdown-preview[data-use-github-style] blockquote,
.markdown-preview[data-use-github-style] ul,
.markdown-preview[data-use-github-style] ol,
.markdown-preview[data-use-github-style] dl,
.markdown-preview[data-use-github-style] table,
.markdown-preview[data-use-github-style] pre {
  margin-top: 0px;
  margin-bottom: 16px;
}

.markdown-preview[data-use-github-style] hr {
  height: 4px;
  padding: 0px;
  margin: 16px 0px;
  background-color: rgb(231, 231, 231);
  border: 0px none;
}

.markdown-preview[data-use-github-style] ul,
.markdown-preview[data-use-github-style] ol {
  padding-left: 2em;
}

.markdown-preview[data-use-github-style] ul.no-list,
.markdown-preview[data-use-github-style] ol.no-list {
  padding: 0px;
  list-style-type: none;
}

.markdown-preview[data-use-github-style] ul ul,
.markdown-preview[data-use-github-style] ul ol,
.markdown-preview[data-use-github-style] ol ol,
.markdown-preview[data-use-github-style] ol ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

.markdown-preview[data-use-github-style] li>p {
  margin-top: 16px;
}

.markdown-preview[data-use-github-style] dl {
  padding: 0px;
}

.markdown-preview[data-use-github-style] dl dt {
  padding: 0px;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

.markdown-preview[data-use-github-style] dl dd {
  padding: 0px 16px;
  margin-bottom: 16px;
}

.markdown-preview[data-use-github-style] blockquote {
  padding: 0px 15px;
  color: rgb(119, 119, 119);
  border-left: 4px solid rgb(221, 221, 221);
}

.markdown-preview[data-use-github-style] blockquote> :first-child {
  margin-top: 0px;
}

.markdown-preview[data-use-github-style] blockquote> :last-child {
  margin-bottom: 0px;
}

.markdown-preview[data-use-github-style] table {
  display: block;
  width: 100%;
  overflow: auto;
  word-break: keep-all;
}

.markdown-preview[data-use-github-style] table th {
  font-weight: bold;
}

.markdown-preview[data-use-github-style] table th,
.markdown-preview[data-use-github-style] table td {
  padding: 6px 13px;
  border: 1px solid rgb(221, 221, 221);
}

.markdown-preview[data-use-github-style] table tr {
  background-color: rgb(255, 255, 255);
  border-top: 1px solid rgb(204, 204, 204);
}

.markdown-preview[data-use-github-style] table tr:nth-child(2n) {
  background-color: rgb(248, 248, 248);
}

.markdown-preview[data-use-github-style] img {
  max-width: 100%;
  box-sizing: border-box;
}

.markdown-preview[data-use-github-style] .emoji {
  max-width: none;
}

.markdown-preview[data-use-github-style] span.frame {
  display: block;
  overflow: hidden;
}

.markdown-preview[data-use-github-style] span.frame>span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0px 0px;
  overflow: hidden;
  border: 1px solid rgb(221, 221, 221);
}

.markdown-preview[data-use-github-style] span.frame span img {
  display: block;
  float: left;
}

.markdown-preview[data-use-github-style] span.frame span span {
  display: block;
  padding: 5px 0px 0px;
  clear: both;
  color: rgb(51, 51, 51);
}

.markdown-preview[data-use-github-style] span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}

.markdown-preview[data-use-github-style] span.align-center>span {
  display: block;
  margin: 13px auto 0px;
  overflow: hidden;
  text-align: center;
}

.markdown-preview[data-use-github-style] span.align-center span img {
  margin: 0px auto;
  text-align: center;
}

.markdown-preview[data-use-github-style] span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}

.markdown-preview[data-use-github-style] span.align-right>span {
  display: block;
  margin: 13px 0px 0px;
  overflow: hidden;
  text-align: right;
}

.markdown-preview[data-use-github-style] span.align-right span img {
  margin: 0px;
  text-align: right;
}

.markdown-preview[data-use-github-style] span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}

.markdown-preview[data-use-github-style] span.float-left span {
  margin: 13px 0px 0px;
}

.markdown-preview[data-use-github-style] span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}

.markdown-preview[data-use-github-style] span.float-right>span {
  display: block;
  margin: 13px auto 0px;
  overflow: hidden;
  text-align: right;
}

.markdown-preview[data-use-github-style] code,
.markdown-preview[data-use-github-style] tt {
  padding: 0.2em 0px;
  margin: 0px;
  font-size: 85%;
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
}

.markdown-preview[data-use-github-style] code::before,
.markdown-preview[data-use-github-style] tt::before,
.markdown-preview[data-use-github-style] code::after,
.markdown-preview[data-use-github-style] tt::after {
  letter-spacing: -0.2em;
  content: " ";
}

.markdown-preview[data-use-github-style] code br,
.markdown-preview[data-use-github-style] tt br {
  display: none;
}

.markdown-preview[data-use-github-style] del code {
  text-decoration: inherit;
}

.markdown-preview[data-use-github-style] pre>code {
  padding: 0px;
  margin: 0px;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0px;
}

.markdown-preview[data-use-github-style] .highlight {
  margin-bottom: 16px;
}

.markdown-preview[data-use-github-style] .highlight pre,
.markdown-preview[data-use-github-style] pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: rgb(247, 247, 247);
  border-radius: 3px;
}

.markdown-preview[data-use-github-style] .highlight pre {
  margin-bottom: 0px;
  word-break: normal;
}

.markdown-preview[data-use-github-style] pre {
  overflow-wrap: normal;
}

.markdown-preview[data-use-github-style] pre code,
.markdown-preview[data-use-github-style] pre tt {
  display: inline;
  max-width: initial;
  padding: 0px;
  margin: 0px;
  overflow: initial;
  line-height: inherit;
  overflow-wrap: normal;
  background-color: transparent;
  border: 0px;
}

.markdown-preview[data-use-github-style] pre code::before,
.markdown-preview[data-use-github-style] pre tt::before,
.markdown-preview[data-use-github-style] pre code::after,
.markdown-preview[data-use-github-style] pre tt::after {
  content: normal;
}

.markdown-preview[data-use-github-style] kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: rgb(85, 85, 85);
  vertical-align: middle;
  background-color: rgb(252, 252, 252);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(187, 187, 187);
  border-image: initial;
  border-radius: 3px;
  box-shadow: rgb(187, 187, 187) 0px -1px 0px inset;
}

.markdown-preview[data-use-github-style] a {
  color: rgb(51, 122, 183);
}

.markdown-preview[data-use-github-style] code {
  color: inherit;
}

.markdown-preview[data-use-github-style] pre.editor-colors {
  padding: 0.8em 1em;
  margin-bottom: 1em;
  font-size: 0.85em;
  border-radius: 4px;
  overflow: auto;
}

.markdown-preview pre.editor-colors {
  user-select: auto;
}

.scrollbars-visible-always .markdown-preview pre.editor-colors .vertical-scrollbar,
.scrollbars-visible-always .markdown-preview pre.editor-colors .horizontal-scrollbar {
  visibility: hidden;
}

.scrollbars-visible-always .markdown-preview pre.editor-colors:hover .vertical-scrollbar,
.scrollbars-visible-always .markdown-preview pre.editor-colors:hover .horizontal-scrollbar {
  visibility: visible;
}

.markdown-preview .task-list-item input[type="checkbox"] {
  position: absolute;
  margin: 0.25em 0px 0px -1.4em;
}

.markdown-preview .task-list-item {
  list-style-type: none;
}

.markdown-preview code {
  text-shadow: none;
}

@keyframes RotatingBackground {
  0% {
    background-position-x: 0%;
  }

  100% {
    background-position-x: 100%;
  }
}

.debugger-breakpoint-icon::before,
.debugger-shadow-breakpoint-icon::before {
  font-family: 'Octicons Regular';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  font-size: 130%;
  width: 130%;
  height: 130%;
  content: "\f052";
}

.debugger-breakpoint-icon,
.debugger-breakpoint-icon-disabled,
.debugger-breakpoint-icon-unresolved,
.debugger-breakpoint-icon-conditional,
.debugger-shadow-breakpoint-icon {
  text-align: center;
  display: block;
  width: 0.8em;
  cursor: pointer;
}

.debugger-breakpoint-icon-nonconditional {
  color: #5293d8;
}

.debugger-breakpoint-icon-conditional {
  color: #ff982d;
}

.debugger-breakpoint-icon-disabled {
  position: relative;
  top: -4px;
  left: 2px;
}

.debugger-breakpoint-icon-disabled::before {
  font-family: 'Octicons Regular';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  font-size: 78%;
  width: 78%;
  height: 78%;
  content: "\f084";
}

.debugger-breakpoint-icon-unresolved {
  position: relative;
  top: -2px;
}

.debugger-breakpoint-icon-unresolved::before {
  font-family: 'Octicons Regular';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  font-size: 80%;
  width: 80%;
  height: 80%;
  content: "\f0e8";
}

.debugger-shadow-breakpoint-icon {
  color: rgba(82, 147, 216, 0.4);
}

.debugger-current-line-highlight {
  background: linear-gradient(to bottom, rgba(0, 152, 255, 0.8) 0%, rgba(0, 152, 255, 0.8) 5%, rgba(0, 152, 255, 0.3) 5%, rgba(0, 152, 255, 0.3) 95%, rgba(0, 152, 255, 0.8) 95%, rgba(0, 152, 255, 0.8) 100%);
}

.gutter[gutter-name=diagnostics-gutter] {
  width: 0.7em;
}

.diagnostics-gutter-ui-item {
  display: flex;
}

.diagnostics-gutter-ui-item .icon {
  display: flex;
  width: 0.7em;
  height: 0.7em;
  font-size: 0.7em;
  align-self: center;
}

.diagnostics-gutter-ui-item .icon::before {
  width: 1em;
  height: 1em;
  font-size: 1em;
  margin: 0;
  align-self: center;
}

.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-info,
.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-review {
  color: #5293d8;
}

.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-error {
  color: #c00;
}

.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-action,
.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-warning {
  color: #ff982d;
}

.bracket-matcher .region {
  border-bottom: 1px dotted lime;
  position: absolute;
}

.line-number.bracket-matcher.bracket-matcher {
  color: #c5c8c6;
  background-color: rgba(255, 255, 255, 0.14);
}

.spell-check-misspelling .region {
  border-bottom: 2px dotted rgba(255, 51, 51, 0.75);
}

.spell-check-corrections {
  width: 25em !important;
}

pre.editor-colors {
  background-color: #1d1f21;
  color: #c5c8c6;
}

pre.editor-colors .invisible-character {
  color: rgba(197, 200, 198, 0.2);
}

pre.editor-colors .indent-guide {
  color: rgba(197, 200, 198, 0.2);
}

pre.editor-colors .wrap-guide {
  background-color: rgba(197, 200, 198, 0.1);
}

pre.editor-colors .gutter {
  background-color: #292c2f;
}

pre.editor-colors .gutter .cursor-line {
  background-color: rgba(255, 255, 255, 0.14);
}

pre.editor-colors .line-number.cursor-line-no-selection {
  background-color: rgba(255, 255, 255, 0.14);
}

pre.editor-colors .gutter .line-number.folded,
pre.editor-colors .gutter .line-number:after,
pre.editor-colors .fold-marker:after {
  color: #fba0e3;
}

pre.editor-colors .invisible {
  color: #c5c8c6;
}

pre.editor-colors .cursor {
  border-color: white;
}

pre.editor-colors .selection .region {
  background-color: #444;
}

pre.editor-colors .bracket-matcher .region {
  border-bottom: 1px solid #f8de7e;
  margin-top: -1px;
  opacity: .7;
}

.syntax--comment {
  color: #8a8a8a;
}

.syntax--entity {
  color: #FFD2A7;
}

.syntax--entity.syntax--name.syntax--type {
  text-decoration: underline;
  color: #FFFFB6;
}

.syntax--entity.syntax--other.syntax--inherited-class {
  color: #9B5C2E;
}

.syntax--keyword {
  color: #96CBFE;
}

.syntax--keyword.syntax--control {
  color: #96CBFE;
}

.syntax--keyword.syntax--operator {
  color: #EDEDED;
}

.syntax--storage {
  color: #CFCB90;
}

.syntax--storage.syntax--modifier {
  color: #96CBFE;
}

.syntax--constant {
  color: #99CC99;
}

.syntax--constant.syntax--numeric {
  color: #FF73FD;
}

.syntax--variable {
  color: #C6C5FE;
}

.syntax--invalid.syntax--deprecated {
  text-decoration: underline;
  color: #FD5FF1;
}

.syntax--invalid.syntax--illegal {
  color: #FD5FF1;
  background-color: rgba(86, 45, 86, 0.75);
}

.syntax--string .syntax--source,
.syntax--string .syntax--meta.syntax--embedded.syntax--line {
  color: #EDEDED;
}

.syntax--string .syntax--punctuation.syntax--section.syntax--embedded {
  color: #00A0A0;
}

.syntax--string .syntax--punctuation.syntax--section.syntax--embedded .syntax--source {
  color: #00A0A0;
}

.syntax--string {
  color: #A8FF60;
}

.syntax--string .syntax--constant {
  color: #00A0A0;
}

.syntax--string.syntax--regexp {
  color: #E9C062;
}

.syntax--string.syntax--regexp .syntax--constant.syntax--character.syntax--escape,
.syntax--string.syntax--regexp .syntax--source.syntax--ruby.syntax--embedded,
.syntax--string.syntax--regexp .syntax--string.syntax--regexp.syntax--arbitrary-repetition {
  color: #FF8000;
}

.syntax--string.syntax--regexp.syntax--group {
  color: #C6A24F;
  background-color: rgba(255, 255, 255, 0.06);
}

.syntax--string.syntax--regexp.syntax--character-class {
  color: #B18A3D;
}

.syntax--string .syntax--variable {
  color: #8A9A95;
}

.syntax--support {
  color: #FFFFB6;
}

.syntax--support.syntax--function {
  color: #DAD085;
}

.syntax--support.syntax--constant {
  color: #FFD2A7;
}

.syntax--support.syntax--type.syntax--property-name.syntax--css {
  color: #EDEDED;
}

.syntax--source .syntax--entity.syntax--name.syntax--tag,
.syntax--source .syntax--punctuation.syntax--tag {
  color: #96CBFE;
}

.syntax--source .syntax--entity.syntax--other.syntax--attribute-name {
  color: #FF73FD;
}

.syntax--entity.syntax--other.syntax--attribute-name {
  color: #FF73FD;
}

.syntax--entity.syntax--name.syntax--tag.syntax--namespace,
.syntax--entity.syntax--other.syntax--attribute-name.syntax--namespace {
  color: #E18964;
}

.syntax--meta.syntax--preprocessor.syntax--c {
  color: #8996A8;
}

.syntax--meta.syntax--preprocessor.syntax--c .syntax--keyword {
  color: #AFC4DB;
}

.syntax--meta.syntax--cast {
  color: #676767;
}

.syntax--meta.syntax--sgml.syntax--html .syntax--meta.syntax--doctype,
.syntax--meta.syntax--sgml.syntax--html .syntax--meta.syntax--doctype .syntax--entity,
.syntax--meta.syntax--sgml.syntax--html .syntax--meta.syntax--doctype .syntax--string,
.syntax--meta.syntax--xml-processing,
.syntax--meta.syntax--xml-processing .syntax--entity,
.syntax--meta.syntax--xml-processing .syntax--string {
  color: #8a8a8a;
}

.syntax--meta.syntax--tag .syntax--entity,
.syntax--meta.syntax--tag>.syntax--punctuation,
.syntax--meta.syntax--tag.syntax--inline .syntax--entity {
  color: #FF73FD;
}

.syntax--meta.syntax--tag .syntax--name,
.syntax--meta.syntax--tag.syntax--inline .syntax--name,
.syntax--meta.syntax--tag>.syntax--punctuation {
  color: #96CBFE;
}

.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--name.syntax--tag {
  text-decoration: underline;
  color: #96CBFE;
}

.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--other.syntax--attribute-name.syntax--tag.syntax--pseudo-class {
  color: #8F9D6A;
}

.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--other.syntax--attribute-name.syntax--id {
  color: #8B98AB;
}

.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--other.syntax--attribute-name.syntax--class {
  color: #62B1FE;
}

.syntax--meta.syntax--property-group .syntax--support.syntax--constant.syntax--property-value.syntax--css,
.syntax--meta.syntax--property-value .syntax--support.syntax--constant.syntax--property-value.syntax--css {
  color: #F9EE98;
}

.syntax--meta.syntax--preprocessor.syntax--at-rule .syntax--keyword.syntax--control.syntax--at-rule {
  color: #8693A5;
}

.syntax--meta.syntax--property-value .syntax--support.syntax--constant.syntax--named-color.syntax--css,
.syntax--meta.syntax--property-value .syntax--constant {
  color: #87C38A;
}

.syntax--meta.syntax--constructor.syntax--argument.syntax--css {
  color: #8F9D6A;
}

.syntax--meta.syntax--diff,
.syntax--meta.syntax--diff.syntax--header {
  color: #F8F8F8;
  background-color: #0E2231;
}

.syntax--meta.syntax--separator {
  color: #60A633;
  background-color: #242424;
}

.syntax--meta.syntax--line.syntax--entry.syntax--logfile,
.syntax--meta.syntax--line.syntax--exit.syntax--logfile {
  background-color: rgba(238, 238, 238, 0.16);
}

.syntax--meta.syntax--line.syntax--error.syntax--logfile {
  background-color: #751012;
}

.syntax--source.syntax--gfm {
  color: #999;
}

.syntax--gfm .syntax--markup.syntax--heading {
  color: #eee;
}

.syntax--gfm .syntax--link {
  color: #555;
}

.syntax--gfm .syntax--variable.syntax--list,
.syntax--gfm .syntax--support.syntax--quote {
  color: #555;
}

.syntax--gfm .syntax--link .syntax--entity {
  color: #ddd;
}

.syntax--gfm .syntax--raw {
  color: #aaa;
}

.syntax--markdown .syntax--paragraph {
  color: #999;
}

.syntax--markdown .syntax--heading {
  color: #eee;
}

.syntax--markdown .syntax--raw {
  color: #aaa;
}

.syntax--markdown .syntax--link {
  color: #555;
}

.syntax--markdown .syntax--link .syntax--string {
  color: #555;
}

.syntax--markdown .syntax--link .syntax--string.syntax--title {
  color: #ddd;
}

Holen Sie sich eel.js vom offiziellen Github (Nicht erforderlich, wenn Sie diesen Code so verwenden, wie er ist)

Referenzierte Site

Machen Sie mit CSS! Schaltflächendesign, bei dem Sie 100 (für das Web) drücken möchten Dateiauswahldialog mit Python-Aal

Operationsszene

Screenshot from 2020-02-25 14-39-18.png

exe-Datei

[Student erraten.zip](https://github.com/mochihisa/Choice-student/raw/master/%E7%94%9F%E5%BE%92%E5%BD%93%E3%81%A6 % E3% 82% 8B% E3% 83% A4% E3% 83% 84.zip)

Erstellen Sie eine App, die Schüler mit der Python-GUI-Version errät