added some fields

frontend/src/App.svelte

@@ -1,10 +1,10 @@
 <script>
   import { _ } from 'svelte-i18n'
-	import NavigationBar from './components/NavigationBar.svelte';
-  import Clock from './components/Clock.svelte'
+	import NavigationBar from './components/General/NavigationBar.svelte';
+  import Clock from './components/General/Clock.svelte'
   import Preparation from './components/Preparation.svelte';
   import Animation from './components/Animation.svelte';
-  import Settings from './components/Settings.svelte';
+  import Settings from './components/Settings/Settings.svelte';
   import Devices from './components/Devices.svelte';
   import Show from './components/Show.svelte';
   import GeneralConsole from './components/GeneralConsole.svelte';

frontend/src/components/General/Clock.svelte

@@ -1,7 +1,7 @@
 
 <script>
     import { onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
 
     // Import the main colors from the store
     let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor

frontend/src/components/General/Input.svelte

@@ -0,0 +1,95 @@
+<script lang=ts>
+    import { onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../../stores.js';
+
+    export let label = '';
+    export let type = 'text';
+    export let min = undefined;
+    export let max = undefined;
+    export let src = undefined;
+    export let alt = undefined;
+    export let width = undefined;
+    export let height = undefined;
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
+    const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
+    const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
+    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
+    const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
+    const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+
+</script>
+
+<div style="width: {width}; height: {height};">
+    <p style="color: {firstColor};">{label}</p>
+    <!-- Handle the textarea input -->
+    {#if type === 'large'}
+        <textarea style="background-color: {firstColor}; color: {whiteColor};"/>
+    <!-- Handle the simple inputs -->
+    {:else}
+        <input style="background-color: {firstColor}; color: {whiteColor};" type={type} min={min} max={max} src={src} alt={alt}/>
+    {/if}
+</div>
+
+<style>
+    div{
+        display:inline-block;
+    }
+    p{
+        margin:0;
+    }
+    input{
+        border:none;
+        border-radius: 0.5em;
+        text-align: center;
+        width: 100%;
+    }
+
+    input::selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+
+    /* Pour Firefox */
+    input::-moz-selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+    input:focus {
+        outline: 1px solid #BBE1FA;
+    }
+
+    textarea{
+        border:none;
+        border-radius: 0.5em;
+        resize: none;
+        width: 100%;
+    }
+
+    textarea::selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+
+    /* Pour Firefox */
+    textarea::-moz-selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+    textarea:focus {
+        outline: 1px solid #BBE1FA;
+    }
+</style>

frontend/src/components/General/NavigationBar.svelte

@@ -2,7 +2,7 @@
     import RoundIconButton from './RoundIconButton.svelte';
     import Toggle from './Toggle.svelte';
     import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import { _ } from 'svelte-i18n'
 
     // Import the main colors from the store

frontend/src/components/General/RoundIconButton.svelte

@@ -2,7 +2,7 @@
 
 <script>
     import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import Tooltip from './Tooltip.svelte';
     import { _ } from 'svelte-i18n'
 

frontend/src/components/General/RoundedButton.svelte

@@ -1,6 +1,6 @@
 <script lang=ts>
     import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import Tooltip from './Tooltip.svelte';
 
     export let text = 'Default button';

frontend/src/components/General/Tab.svelte

@@ -1,9 +1,11 @@
 <script lang=ts>
     import RoundedButton from "./RoundedButton.svelte";
     import { onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
 
     export let tabs = [];
+    export let maxWidth = undefined;
+    export let maxHeight = undefined;
 
     let activeTab = 0;
 
@@ -41,7 +43,7 @@
     </div>
 
     <div class="bodyContainer"
-    style='background-color: {thirdColor};'>
+    style='background-color: {thirdColor}; max-width: {maxWidth}; max-height: {maxHeight};'>
     {#if tabs[activeTab]}
         <svelte:component this={tabs[activeTab].component} />
     {/if}
@@ -64,7 +66,9 @@
         border-radius: 0.5em;
     }
     .bodyContainer{
+        padding: 0.5em;
         background-color: red;
         border-radius: 0.5em;
+        overflow:auto;
     }
 </style>

frontend/src/components/General/Toggle.svelte

@@ -2,7 +2,7 @@
 
 <script lang=ts>
     import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import Tooltip from './Tooltip.svelte';
     import { _ } from 'svelte-i18n'
 

frontend/src/components/General/Tooltip.svelte

@@ -2,7 +2,7 @@
     export let message = "Default tooltip"
     export let show = false
 
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import { onDestroy } from 'svelte';
 
     // Import the main colors from the store

frontend/src/components/Settings/InputsOutputsContent.svelte

@@ -0,0 +1,9 @@
+<script lang=ts>
+
+</script>
+
+<button>You can change your hardware settings here</button>
+
+<style>
+
+</style>

frontend/src/components/Settings/ProjectPropertiesContent.svelte

@@ -0,0 +1,52 @@
+<script lang=ts>
+    import { onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../../stores.js';
+    import Input from "../General/Input.svelte";
+    import RoundedButton from '../General/RoundedButton.svelte';
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
+    const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
+    const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
+    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
+    const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
+    const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+
+</script>
+
+<div class='flexSettings'>
+    <div>
+        <Input label='Nom du show' type='text'/>
+        <Input label='Date du show' type='date'/>
+        <Input label='Statut de la sauvegarde' type='file'/>
+        <Input label="Nombre d'univers DMX" type='number' min='1' max='10'/>
+    </div>
+    <div>
+        <Input label='Statut de la sauvegarde' type='image' src='appicon.png' alt='Photo de profil du show' width='11em'/>
+        <RoundedButton text='Charger une nouvelle image' icon='bxs-image' active/>
+    </div>
+    <div>
+        <Input label="Commentaires" type='large' width='100%'/>
+    </div>
+</div>
+
+
+<style>
+    .flexSettings{
+        display: flex;
+        flex-direction: column;
+    }
+
+</style>

frontend/src/components/Settings/Settings.svelte

@@ -1,12 +1,13 @@
 <script lang=ts>
-    import RoundedButton from "./RoundedButton.svelte";
-    import Clock from "./Clock.svelte";
-    import Tab from "./Tab.svelte";
+    import RoundedButton from "../General/RoundedButton.svelte";
+    import ProjectPropertiesContent from "./ProjectPropertiesContent.svelte";
+    import InputsOutputsContent from "./InputsOutputsContent.svelte";
+    import Tab from "../General/Tab.svelte";
     import { _ } from 'svelte-i18n'
 
     const tabs = [
-        { title: $_("projectPropertiesTab"), icon: 'bxs-info-circle', tooltip: $_("projectPropertiesTooltip"), component: RoundedButton },
-        { title: $_("projectInputOutputTab"), icon: 'bxs-plug', tooltip: $_("projectInputOutputTooltip"), component: Clock },
+        { title: $_("projectPropertiesTab"), icon: 'bxs-info-circle', tooltip: $_("projectPropertiesTooltip"), component: ProjectPropertiesContent },
+        { title: $_("projectInputOutputTab"), icon: 'bxs-plug', tooltip: $_("projectInputOutputTooltip"), component: InputsOutputsContent },
     ];
 
 </script>
@@ -16,7 +17,7 @@
 <RoundedButton text={$_("openProjectString")} icon='bx-folder-open' tooltip={$_("openProjectTooltip")}/>
 
 <!-- Project tabcontrol -->
-<Tab { tabs } />
+<Tab { tabs } maxHeight='73vh'/>
 
 <style>