First commit of homework assistant. Only contains vocabulary base functionality

2026-02-05 20:24:22 +01:00
parent 7233201881
commit 22dff8705d
15 changed files with 1012 additions and 0 deletions
--- a/css/styles.css
+++ b/css/styles.css
@@ -0,0 +1,140 @@
+@charset "UTF-8";
+
+:host {
+	display: block;
+}
+
+html {
+    min-height: 100vh;
+    min-width: 100vw;
+}
+
+body {
+    min-height: 100vh;
+    min-width: 100vw;
+    margin: 0px;
+	scrollbar-width: thin;
+}
+
+.text {
+    color: black;
+}
+
+homework-session {
+	display: block;
+	min-height: 100vh;
+	min-width: 100vw;
+	font-family: Georgia, Times, serif;
+	font-size: 18pt;
+	text-shadow: none;
+	user-select: none;
+	margin: 0px;
+    background-color: white;
+    overflow: hidden;
+	padding: 0 0 0 0;
+}
+
+homework-layout > #headings {
+    padding: .1em .5em 1em .4em;
+    margin: .1em;
+	border-radius: .3em;
+    background-color:white;
+    box-shadow: -4px 2px 5px 2px rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
+    z-index: 5000;
+}
+
+homework-layout > #headings > h1 {
+	margin-bottom: .1em;
+}
+
+homework-layout > #headings > h3 {
+	margin-top: .1em;
+	font-size: .8em;
+}
+
+homework-page {
+	margin: 0;
+	padding: 0;
+}
+
+homework-page > #sub-headers {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: flex-start;
+	column-gap: .5em;
+	margin-left: .7em;	
+}
+
+p.source-language, p.target-language {
+	width: 40%;
+	margin-bottom: 0;
+}
+
+p.target-language {
+	margin-left: .3em;
+}
+
+homework-page > #content {
+	margin-left: .7em;
+}
+
+homework-vocabulary-task {
+	display: flex;
+	flex-flow: row nowrap;
+	column-gap: .5em;
+	margin-top: .4em;
+}
+
+homework-vocabulary-task > input {
+	font-size: .8em;
+	width: 40%;
+}
+
+#page-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-left: .4em;
+}
+
+#page-header > #buttons {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: flex-end;
+}
+
+.button {
+	display: flex;
+	flex-flow: column;
+	background: linear-gradient(#F2F2F2, #CFCFCF);
+	height: .7em;
+	min-width: 3em;
+	width: auto;
+	padding: .4em 1em .4em 1em;
+	border-style: solid;
+	border-color: #707070;
+	border-width: .1em;
+	border-radius: .3em;
+	vertical-align: middle;
+	text-align: center;
+	margin-right: .6em;
+	align-items: center;
+	cursor: pointer;
+	user-select: none;
+}
+
+.button-text {
+	font-family: Georgia, Times, serif;
+	font-size: .6em;
+	margin: 0;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.button:hover {
+	box-shadow: 0 0 2px 1px #707070;
+}
+
+.button:active {
+	box-shadow: 0 0 3px 2px #707070;
+}