first draft for UI

229d479a · Famboupe Abbas · 356d0695 · 229d479a · 229d479a · 229d479a
Commit 229d479a authored 1 month ago by Famboupe Abbas
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_23" default="true" project-jdk-name="openjdk-23" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
\ No newline at end of file
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/to-do-list-abbas.iml" filepath="$PROJECT_DIR$/.idea/to-do-list-abbas.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
--- a/.idea/to-do-list-abbas.iml
+++ b/.idea/to-do-list-abbas.iml
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
--- a/src/Controller.js
+++ b/src/Controller.js
--- a/src/Layout.html
+++ b/src/Layout.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="Stylesheet.css">
+    <script src="Controller.js" defer></script>
+    <title>To-Do-List</title>
+</head>
+<body>
+    <div id="container">
+      <div id="left-side">
+        <h1>TODO-Liste</h1>
+        <form>
+          <input id="txt-todo" type="text" placeholder="Aufgabe">
+          <button id="btn-add">Hinzufügen</button>
+        </form>
+      </div>
+      <div id="right-side">
+        <ul id="list-todo">
+          <li class="items-todo"></li>
+        </ul>
+      </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
--- a/src/Stylesheet.css
+++ b/src/Stylesheet.css
+:root{
+    --background: #33302B;
+    --primary-color: #332F29;
+    --secondary-color: #5C4E3A;
+    --accent-color: #DB8C1D;
+    --text-color: #000000;
+}
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+html{
+    font-family: "Consolas", Arial, sans-serif;
+    font-size: 16px;
+    color: var(--text-color);
+}
+body{
+    min-height: 100vh;
+    background-color: var(--background);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#container{
+    display: flex;
+    width: 80%;
+    max-width: 1200px;
+}
+#left-side{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+h1{
+    font-size: 3rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: var(--accent-color);
+    margin-bottom: 20px;
+}
+form{
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+}
+#txt-todo{
+    width: 100%;
+    padding: 12px 20px;
+    border: 2px solid var(--secondary-color);
+    border-radius: 1000px;
+    font: inherit;
+    color: var(--text-color);
+    caret-color: var(--accent-color);
+    background: none;
+}
+#txt-todo:focus{
+    outline: none;
+}
+#btn-add{
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    padding: 0 30px;
+    border: none;
+    border-radius: 1000px;
+    font: inherit;
+    color: var(--background);
+    background-color: var(--accent-color);
+    cursor: pointer;
+}
+#right-side{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+#list-todo{
+    width: 100%;
+    max-width: 400px;
+    list-style: none;
+}
+.items-todo{
+    background-color: var(--primary-color);
+    padding: 15px;
+    margin-bottom: 10px;
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+}
+.items-todo .item-text{
+    flex-grow: 1;
+    padding-left: 10px;
+}
+.btn-delete{
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+.custom-checkbox{
+    border: 2px solid var(--accent-color);
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+input[type="checkbox"]{
+    display: none;
+}
+input[type="checkbox"]:checked ~ .custom-checkbox{
+    background-color: var(--accent-color);
+}
+input[type="checkbox"]:checked ~ .item-text{
+    text-decoration: line-through;
+    color: var(--secondary-color);
+}