frontend/src/components/General/InfoButton.svelte

@@ -0,0 +1,56 @@
+
+<script>
+    import Tooltip from '../General/Tooltip.svelte';
+    import { createEventDispatcher } from 'svelte';
+
+    export let width = '20px';
+    export let background = '';
+    export let icon = '';
+    export let color = 'white';
+    export let style = '';
+    export let interactive = false;
+    export let message = '';
+    export let hide = false;
+
+    // Show a tooltip on mouse hover
+    let tooltipShowing = false
+    function toggleTooltip(){
+        tooltipShowing = !tooltipShowing
+    }
+    
+    // Emit a click event when the button is being clicked
+    const dispatch = createEventDispatcher();
+    function click(){
+        dispatch('click')
+    }
+
+</script>
+
+<div class="container">
+    <div class="badge" 
+        style="opacity: {hide ? 0 : 1}; pointer-events: {hide ? 'none' : 'all'}; width: {width}; height: {width}; color: {color}; background-color: {background}; border-radius: calc({width} / 2); cursor: {interactive ? 'pointer' : ''}; {style}"
+        on:mousedown={click}
+        on:mouseenter={toggleTooltip}
+        on:mouseleave={toggleTooltip}>
+        <i class='bx {icon}' style="font-size:100%;"></i>
+    </div>
+    {#if message} 
+        <Tooltip message={message} show={tooltipShowing}></Tooltip>
+    {/if}
+</div>
+
+
+<style>
+    .container{
+        position: relative;
+    }
+    .badge {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+    }
+
+
+</style>
+

frontend/src/components/Settings/DeviceCard.svelte

@@ -0,0 +1,62 @@
+<script lang=ts>
+    import {colors} from '../../stores.js';
+    import InfoButton from "../General/InfoButton.svelte";
+    import { _ } from 'svelte-i18n'
+    import { createEventDispatcher } from 'svelte';
+
+    export let title = 'Default card';
+    export let subtitle = '';
+    export let line1 = '';
+    export let line2 = '';
+    export let removable = false;
+    export let pluggable = false;
+    export let plugged = false;
+    export let signalizable = false;
+    export let signalized = false;
+
+    // Emit a delete event when the device is being removed
+    const dispatch = createEventDispatcher();
+    function remove(){
+        dispatch('delete')
+    }
+
+</script>
+
+<div class="profile">
+    <div>
+        <p>{title}</p>
+        <h6 class="subtitle">{subtitle}</h6>
+        <h6>{line1}</h6>
+        <h6>{line2}</h6>
+    </div>
+    <div class="actions">
+        <InfoButton on:click={remove} style="margin: 0.2em;" icon='bx-trash' interactive message={$_("projectHardwareDeleteTooltip")} hide={!removable}/>
+        <InfoButton style="margin: 0.2em;" background={ signalized ? $colors.orange : $colors.first } icon='bx-pulse' hide={!signalizable}/>
+        <InfoButton style="margin: 0.2em;" background={ plugged ? $colors.ok : $colors.nok} icon='bxs-plug' hide={!pluggable}/>
+    </div>
+</div>
+
+
+<style>
+    .profile {
+        background-color: var(--second-color);
+        margin: 0.2em;
+        padding-left: 0.3em;
+        border-radius: 0.2em;
+        display: flex;
+        text-align: left;
+    }
+    .subtitle{
+        margin-bottom: 0.5em;
+    }
+    .actions {
+        margin-left: 0.2em;
+    }
+    p{
+        margin: 0;
+    }
+    h6 {
+        margin: 0;
+        font-weight: 1;
+    }
+</style>

frontend/src/components/Settings/InputsOutputsContent.svelte

@@ -1,9 +1,70 @@
 <script lang=ts>
+    import DeviceCard from "./DeviceCard.svelte";
+    import { _ } from 'svelte-i18n'
 
 </script>
 
-<p>This is the Inputs & outputs page</p>
+
+<div class="container">
+    <div class="configuration">
+        <p>Option 1</p>
+        <p>Option 2</p>
+        <p>Option 3</p>
+    </div>
+    
+    <div class="hardware">
+        <div class="inputHardware">
+            <DeviceCard title="Virtual DJ" subtitle="OS2L" line1="Listening to 192.168.1.53" line2="Please update your OS2L client" removable pluggable signalizable on:delete={() => console.log("Delete the Virtual DJ device")}/>
+            <DeviceCard title="Pioneer DDJ-FLX4" subtitle="MIDI" line1="Listening to COM14" line2="Version: 0-alpha-13.15" removable pluggable signalizable/>
+            <DeviceCard title="Platformia LM730" subtitle="OSC" line1="Listening to 192.168.1.418" line2="Please update your OSC client" removable pluggable signalizable/>
+        </div>
+        <p><i class='bx bx-down-arrow-alt'/>{$_("projectHardwareInputsLabel")}<i class='bx bx-down-arrow-alt'/></p>
+        <div class="show">{$_("projectHardwareShowLabel")}</div>
+        <p><i class='bx bx-down-arrow-alt'/>{$_("projectHardwareOutputsLabel")}<i class='bx bx-down-arrow-alt'/></p>
+        <div class="outputHardware">
+            <DeviceCard title="DMX rendering" subtitle="Rendering interface" line2="All universes associated." pluggable plugged on:delete={() => console.log("Delete the rendering interface")}/>
+            <DeviceCard title="BerryMix 1" subtitle="BerryMix interface" line1="Writing on ETHERNET10" line2="Universe 1 associated." removable pluggable/>
+            <DeviceCard title="00feadfee456" subtitle="USB - FTDI" line1="Writing on COM14" line2="Universe 2 associated." removable pluggable/>
+            <DeviceCard title="Server 12" subtitle="ArtNet" line1="Writing to 192.168.1.354" line2="Universe 3 & 4 associated." removable pluggable signalizable signalized/>
+        </div>
+    </div>
+</div>
+
 
 <style>
-
+    .container {
+        display: flex;
+    }
+    .configuration {
+        flex: 1;
+        background-color: var(--first-color);
+        border-radius: 0.5em;
+    }
+    .hardware {
+        flex: 3;
+        margin-left: 0.5em;
+        text-align: center;
+    }
+    .inputHardware {
+        background-color: var(--first-color);
+        border-radius: 0.5em;
+        padding: 0.2em;
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .show {
+        text-align: center;
+        background-color: var(--first-color);
+        margin: 1em;
+        padding: 3em;
+        border-radius: 0.5em;
+    }
+    .outputHardware {
+        background-color: var(--first-color);
+        border-radius: 0.5em;
+        padding: 0.5em;
+        padding: 0.2em;
+        display: flex;
+        flex-wrap: wrap;
+    }
 </style>

frontend/src/lang/en.json

@@ -28,5 +28,10 @@
   "projectAvatarTooltip": "Load a new show avatar",
   "projectCommentsLabel": "Comments",
   "projectCommentsPlaceholder": "Leave your comments here",
-  "projectLoadAvatarButton": "Load a new avatar"
+  "projectLoadAvatarButton": "Load a new avatar",
+
+  "projectHardwareShowLabel" : "My Show",
+  "projectHardwareInputsLabel": "INPUTS",
+  "projectHardwareOutputsLabel": "OUTPUTS",
+  "projectHardwareDeleteTooltip": "Delete this device"
 }