împl

src/app.ts

@@ -1,3 +1,5 @@
+import { Session } from "./classes/session.js"
+
 class App {
 
     private static contentEntry: string = "content"
@@ -8,15 +10,19 @@ class App {
     }
 
     async main(): Promise<void> {
-        
+        console.log("Hello World")
     }
 
     async drawData(): Promise<void> {
+        const session = Session.getInstance()
         const contentRoot = <HTMLDivElement>document.getElementById(App.contentEntry)
         const body = document.createElement("div")
         const title = document.createElement("h1")
+        const text = document.createElement("p")
         title.innerText = "Hello World"
+        text.innerText = session.contentTest
         body.appendChild(title)
+        body.appendChild(text)
         contentRoot.appendChild(body)
     }
 }

src/background.ts

@@ -1,4 +1,3 @@
-
 class Background {
 
     constructor() {

src/classes/session.ts

@@ -0,0 +1,55 @@
+export class Session {
+
+    private static instance: Session;
+
+    private constructor() {
+    }
+
+    static getInstance() {
+        if (!Session.instance && !Session.load()) {
+            Session.instance = new Session();
+        }
+        if (!Session.instance && Session.load()) {
+            Session.instance = <Session>Session.load();
+        }
+        Session.save();
+        return Session.instance;
+    }
+
+    public static save() {
+        localStorage.setItem('session', JSON.stringify(this.instance));
+    }
+
+    public static load(): Session | null {
+        const session = localStorage.getItem('session');
+        if (session) {
+            const obj = <Session>JSON.parse(session);
+            const result = new Session();
+            result.contentTest = obj.contentTest;
+            return result;
+        }
+        return null;
+    }
+
+    public static reloadSession() {
+        const session = localStorage.getItem('session');
+        if (session) {
+            const obj = <Session>JSON.parse(session);
+            const result = new Session();
+            result.contentTest = obj.contentTest;
+            Session.instance = result;
+        }
+    }
+
+    public static resetSession() {
+        localStorage.removeItem('session');
+        sessionStorage.removeItem('session');
+        this.instance = new Session();
+        Session.save();
+        location.reload();
+    }
+
+    public readonly sessionId: string = crypto.randomUUID();
+
+    public contentTest: string = 'This is a simple example of a web application';
+}

src/classes/settings.ts

@@ -0,0 +1,29 @@
+import { Session } from "./session.js";
+
+class Settings {
+
+    private session = Session.getInstance();
+
+    constructor() {
+        this.renderSettings();
+    }
+
+    private async renderSettings(): Promise<void> {
+        const settings = <HTMLDivElement>document.getElementById('settings');
+        settings.innerHTML = `
+            <div class="form-group">
+                <label for="contentTest">Content Test</label>
+                <input type="text" class="form-control" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
+            </div>
+            <button type="button" class="btn btn-primary" id="saveSettings">Save</button>
+        `;
+        const saveSettings = <HTMLButtonElement>document.getElementById('saveSettings');
+        saveSettings.addEventListener('click', () => {
+            this.session.contentTest = (<HTMLInputElement>document.getElementById('contentTest')).value;
+            Session.save();
+            Session.reloadSession();
+        });
+    }
+}
+
+new Settings();

src/sass/_mixin.sass

@@ -15,10 +15,12 @@
 
 @mixin partialButton
 	button
-		width: 100% !important
-		height: 100% !important
+		width: 5rem !important
+		height: 2rem !important
 		text-align: center !important
-		margin: 0 !important
+		margin: 0.5rem !important
+		border-color: $seccond-color !important
+		border-radius: 0.5rem !important
 
 		@include respond-to(handhelds)
 			font-size: 3rem

src/sass/_root.sass

@@ -3,6 +3,6 @@ $main-font-color: white
 $main-font-color-hover: lightgrey
 $main-uschrift-font: 'Ubuntu', Arial
 $seccond-color: lightgrey
-$background-color: rgb(119, 178, 255)
+$background-color: #77B2FF
 $background-color-content: rgb(198, 223, 255)
 $logo-image: url('../icons/icon128.png')