Create an app that guesses students with python-GUI version
Introduction
An article that just made the previously posted Create an app that guesses students with python as GUI software.
program
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 month%d day}:{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()
#List reading
#Creating a root window for a dialog
#(The root itself has nothing to do with the eel window, so it is desirable to hide it.)
root = Tk()
#Set window size to 0
root.geometry("0x0")
#Turn off the window title bar
root.overrideredirect(1)
#Hide window
root.withdraw()
system = platform.system()
@eel.expose
def select_file():
#In the case of Windows, the dialog is also in the withdraw state
#Show root window as it will be hidden
if system == "Windows":
root.deiconify()
#update before and after dialog creation for macOS()Call
root.update()
#Dialog in front
#topmost specified(Foreground)
root.attributes('-topmost', True)
root.withdraw()
root.lift()
root.focus_force()
path_str = filedialog.askopenfilename()
root.update()
if system == "Windows":
#Hide again (Windows only)
root.withdraw()
#path = Path(path_str)
return path_str
if __name__ == '__main__':
main()
main.html
main.html
<html>
<head>
<meta charset="UTF-8">
<title>The guy who guesses the student</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">Guess the student</a>
<a href="#" onclick="History_cancel()" class="btn-square">Skip absentees</a>
<a href="#" onclick="Student_show()" class="btn-square">Show remaining students</a>
<a href="#" onclick="History_show()" class="btn-square">View history</a>
<a href="#" onclick="History_clear()" class="btn-square">Clear history</a>
<a href="#" onclick="Student_load()" class="btn-square">Update roster</a>
</div>
</center>
<div class='markdown-preview' data-use-github-style>
<details>
<summary>How to update the list</summary>
<div>
<h1 id="How to update the list">How to update the list</h1>
<h3 id="1">1</h3>
<p>Text file with any file name(*.txt)Create a.</p>
<h3 id="2">2</h3>
<p>In it<br>
1.name<br>
2.name<br>
・<br>
・<br>
・<br>
Enter.</p>
<h3 id="3">3</h3>
<p>Click Update Roster,Select a text file.</p>
</div>
</details>
</div>
</html>
style.css
style.css
.btn-square {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;
/*Button color*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.btn-square:active {
/*When you press the button*/
-webkit-transform: translateY(4px);
transform: translateY(4px);
/*Move down*/
border-bottom: none;
/*Erase the line*/
}
#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;
}
Get eel.js from official github (Not necessary if you use this code as it is)
Referenced site
Make with CSS! Button design that makes you want to press 100 (for Web) File selection dialog with Python eel
Operation scenery
exe file
[The guy who guesses the student.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)
Recommended Posts