Here’s a detailed description of the UI in your screenshot — perfect for turning into a recreation prompt later:

General Layout

Application name (top-left): “MEDENDO”, in uppercase light blue font.

Background color: White, with light turquoise/teal accents.

Layout structure:

A left sidebar with navigation items.

A main content area titled “Opnemen” (Recording).

Everything has a minimalist, clean medical/professional look.

Left Sidebar

Color: very light teal background.

Contains five vertically stacked items (with small icons):

Opnemen (active, highlighted with a vertical bar or darker shade)

Gesprekken

Templates

Logout

[email protected]
(shown as contact text at the bottom).

Main Section (Header + Card)

Header text (top left): “Opnemen” — bold and medium-sized.

Below header: a centered white card with subtle shadow and rounded corners.

Inside the Card:

Tabs at the top:

“FYSIEK” (selected — active state with underline or highlight)

“ONLINE” (inactive, greyed).

Form Fields:

Datum en tijd veld (Date/time): Pre-filled “14-05-2025 16:45”.

Template dropdown: “Standaard gespreksverslag”.

Gesproken taal (Language dropdown): “Nederlands”.

Tabs underneath form fields:

“TEMPLATE”

“TRANSCRIPT” (selected — active, highlighted in teal)

“VERSLAG”

Below it: “Er is nog geen transcript.” (no transcript yet message, grey text).

Top Right Button

Button text: “🟥 STOP” (red rectangular button with white text).

Positioned on the top-right inside the card (aligned with the form).

Bottom Bar

Small recording control indicators (bottom left corner):

Shows “00:04” recording time and a few small icons (mic, pause, stop).

README.md

@@ -1,10 +1,13 @@
 ---
-title: Medendo Virtual Consultation Companion
-emoji: 🏆
-colorFrom: gray
-colorTo: indigo
+title: Medendo - Virtual Consultation Companion 🏥
+colorFrom: green
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

components/main-content.js

@@ -0,0 +1,172 @@
+class MainContent extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .main-content {
+                    flex: 1;
+                    padding: 2rem;
+                    background-color: white;
+                }
+                .header {
+                    font-size: 1.5rem;
+                    font-weight: 600;
+                    color: #1e293b;
+                    margin-bottom: 2rem;
+                }
+                .card {
+                    background-color: white;
+                    border-radius: 0.5rem;
+                    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+                    padding: 2rem;
+                    max-width: 800px;
+                    margin: 0 auto;
+                    position: relative;
+                }
+                .tabs {
+                    display: flex;
+                    border-bottom: 1px solid #e5e7eb;
+                    margin-bottom: 1.5rem;
+                }
+                .tab {
+                    padding: 0.5rem 1rem;
+                    cursor: pointer;
+                    color: #64748b;
+                    font-weight: 500;
+                    margin-right: 1rem;
+                }
+                .tab.active {
+                    color: #0ea5e9;
+                    border-bottom: 2px solid #0ea5e9;
+                }
+                .form-group {
+                    margin-bottom: 1.5rem;
+                }
+                label {
+                    display: block;
+                    margin-bottom: 0.5rem;
+                    color: #334155;
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                }
+                select, input {
+                    width: 100%;
+                    padding: 0.5rem 0.75rem;
+                    border: 1px solid #e5e7eb;
+                    border-radius: 0.375rem;
+                    background-color: white;
+                }
+                .content-tabs {
+                    margin-top: 2rem;
+                    border-bottom: 1px solid #e5e7eb;
+                    display: flex;
+                }
+                .content-tab {
+                    padding: 0.5rem 1rem;
+                    cursor: pointer;
+                    color: #64748b;
+                    font-weight: 500;
+                    margin-right: 1rem;
+                }
+                .content-tab.active {
+                    color: #0ea5e9;
+                    border-bottom: 2px solid #0ea5e9;
+                }
+                .content-area {
+                    padding: 1.5rem 0;
+                    color: #64748b;
+                }
+                .stop-btn {
+                    position: absolute;
+                    top: 2rem;
+                    right: 2rem;
+                    background-color: #ef4444;
+                    color: white;
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.375rem;
+                    border: none;
+                    font-weight: 500;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                .recording-controls {
+                    position: fixed;
+                    bottom: 2rem;
+                    left: 280px;
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                    background-color: white;
+                    padding: 0.75rem 1.5rem;
+                    border-radius: 9999px;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+                }
+                .recording-timer {
+                    font-family: monospace;
+                    color: #334155;
+                }
+                .control-icon {
+                    color: #64748b;
+                    cursor: pointer;
+                }
+            </style>
+            <div class="main-content">
+                <h1 class="header">Opnemen</h1>
+                
+                <div class="card">
+                    <button id="stop-recording" class="stop-btn">
+                        <i data-feather="square"></i>
+                        STOP
+                    </button>
+                    
+                    <div class="tabs">
+                        <div class="tab active">FYSIEK</div>
+                        <div class="tab">ONLINE</div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="date-time">Datum en tijd</label>
+                        <input type="text" id="date-time" value="14-05-2025 16:45" readonly>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="template">Template</label>
+                        <select id="template">
+                            <option selected>Standaard gespreksverslag</option>
+                            <option>Alternatief template</option>
+                        </select>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="language">Gesproken taal</label>
+                        <select id="language">
+                            <option selected>Nederlands</option>
+                            <option>English</option>
+                            <option>Deutsch</option>
+                        </select>
+                    </div>
+                    
+                    <div class="content-tabs">
+                        <div class="content-tab">TEMPLATE</div>
+                        <div class="content-tab active">TRANSCRIPT</div>
+                        <div class="content-tab">VERSLAG</div>
+                    </div>
+                    
+                    <div class="content-area">
+                        Er is nog geen transcript.
+                    </div>
+                </div>
+                
+                <div class="recording-controls">
+                    <span class="recording-timer" id="recording-timer">00:00</span>
+                    <i data-feather="mic" class="control-icon"></i>
+                    <i data-feather="pause" class="control-icon"></i>
+                    <i data-feather="square" class="control-icon"></i>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('main-content', MainContent);

components/sidebar.js

@@ -0,0 +1,79 @@
+class CustomSidebar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .sidebar {
+                    width: 240px;
+                    height: 100vh;
+                    background-color: #f0f9ff;
+                    padding: 2rem 1rem;
+                    display: flex;
+                    flex-direction: column;
+                    border-right: 1px solid #e5e7eb;
+                }
+                .logo {
+                    color: #0ea5e9;
+                    font-weight: 700;
+                    font-size: 1.5rem;
+                    margin-bottom: 2rem;
+                    padding-left: 0.5rem;
+                    letter-spacing: 0.05em;
+                }
+                .nav-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.75rem;
+                    border-radius: 0.375rem;
+                    margin-bottom: 0.5rem;
+                    color: #334155;
+                    text-decoration: none;
+                    transition: all 0.2s;
+                }
+                .nav-item:hover {
+                    background-color: #e0f2fe;
+                }
+                .nav-item.active {
+                    background-color: #0ea5e9;
+                    color: white;
+                }
+                .contact {
+                    margin-top: auto;
+                    padding: 1rem 0.5rem;
+                    color: #64748b;
+                    font-size: 0.875rem;
+                }
+                .icon {
+                    width: 20px;
+                    height: 20px;
+                }
+            </style>
+            <div class="sidebar">
+                <div class="logo">MEDENDO</div>
+                <a href="#" class="nav-item active">
+                    <i data-feather="mic" class="icon"></i>
+                    <span>Opnemen</span>
+                </a>
+                <a href="#" class="nav-item">
+                    <i data-feather="message-square" class="icon"></i>
+                    <span>Gesprekken</span>
+                </a>
+                <a href="#" class="nav-item">
+                    <i data-feather="file-text" class="icon"></i>
+                    <span>Templates</span>
+                </a>
+                <a href="#" class="nav-item">
+                    <i data-feather="settings" class="icon"></i>
+                    <span>Instellingen</span>
+                </a>
+                <a href="#" class="nav-item">
+                    <i data-feather="log-out" class="icon"></i>
+                    <span>Logout</span>
+                </a>
+                <div class="contact">[email protected]</div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-sidebar', CustomSidebar);

index.html

@@ -1,19 +1,38 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MEDENDO - Virtual Consultation</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        sky: {
+                            500: '#0ea5e9',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-white min-h-screen flex">
+    <script src="components/sidebar.js"></script>
+    <script src="components/main-content.js"></script>
+    
+    <custom-sidebar></custom-sidebar>
+    <main-content></main-content>
+
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,19 @@
+// Initialize recording functionality
+document.addEventListener('DOMContentLoaded', () => {
+    // Timer functionality for recording
+    let seconds = 0;
+    const timerElement = document.getElementById('recording-timer');
+    
+    const timer = setInterval(() => {
+        seconds++;
+        const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
+        const secs = (seconds % 60).toString().padStart(2, '0');
+        timerElement.textContent = `${mins}:${secs}`;
+    }, 1000);
+
+    // Stop recording button
+    document.getElementById('stop-recording').addEventListener('click', () => {
+        clearInterval(timer);
+        alert('Recording stopped');
+    });
+});

style.css

@@ -1,28 +1,18 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
+/* Base styles */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+body {
+    font-family: 'Inter', sans-serif;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
 }
-
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
+::-webkit-scrollbar-thumb {
+    background: #0ea5e9;
+    border-radius: 3px;
+}