Notes

<template>
<div class="dashboard-layout">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-icon">🏠</div>
<div class="sidebar-icon">📁</div>
<div class="sidebar-icon">👥</div>
<div class="sidebar-icon">📊</div>
<div class="sidebar-icon">⚙️</div>
<div class="sidebar-icon bottom">⬅️</div>
</aside>

<!-- Main Content Area -->
<div class="main">
<!-- Header -->
<header class="header">
<div class="logo">CMS <span>Base</span></div>
<div class="header-right">
<button class="icon-btn">🔍</button>
<button class="icon-btn">⚙️</button>
<button class="icon-btn">👤</button>
</div>
</header>

<!-- Content -->
<div class="toolbox-container">
<h2>Create New Toolbox Talk</h2>

<!-- Step 2: Toolbox Talk Details -->
<div class="section">
<h3>Step 2: Toolbox Talk Details</h3>
<input type="text" placeholder="Name the Toolbox Talk" class="input-field" />
<input type="text" placeholder="Upload PDF or Add Video URL" class="input-field" />
<div class="btn-row">
<button class="btn btn-secondary">Save</button>
<button class="btn btn-primary">Add Questions</button>
<button class="btn btn-primary">Send</button>
</div>
</div>

<!-- Step 3: Add Questions -->
<div class="section">
<h3>Step 3: Add Questions (Optional)</h3>
<button class="btn btn-secondary">+ Add Question</button>

<div class="question-block">
<input type="text" placeholder="Enter Question Text" class="input-field" />
<div class="options">
<input type="text" placeholder="Option 1" class="input-field small" />
<input type="text" placeholder="Option 2" class="input-field small" />
<input type="text" placeholder="Option 3" class="input-field small" />
<input type="text" placeholder="Option 4" class="input-field small" />
</div>
<div class="correct-answer">
<label><input type="radio" name="correct" /> Mark correct answer</label>
</div>
</div>

<label>How many questions to ask (max 10)</label>
<input type="number" class="input-field small" />

<div class="btn-row">
<button class="btn btn-secondary">Save</button>
<button class="btn btn-primary">Send</button>
</div>
</div>

<!-- Step 4: Choose Recipients -->
<div class="section">
<h3>Step 4: Choose Recipients</h3>
<select multiple class="input-field">
<option>User 1</option>
<option>Department A</option>
<option>Role X</option>
</select>
</div>

<!-- Step 5: Send -->
<div class="section">
<h3>Step 5: Send</h3>
<button class="btn btn-primary">Send Toolbox Talk</button>
<p class="note">Toolbox Talks can be duplicated or edited if not sent.</p>
</div>
</div>
</div>
</div>
</template>

<style scoped>
/* Layout */
.dashboard-layout {
display: flex;
min-height: 100vh;
font-family: 'Segoe UI', sans-serif;
}

.sidebar {
width: 60px;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 0;
border-right: 1px solid #ddd;
}

.sidebar-icon {
font-size: 20px;
margin: 16px 0;
cursor: pointer;
}

.sidebar-icon.bottom {
margin-top: auto;
}

/* Header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background-color: #fef9f4;
border-bottom: 1px solid #ddd;
}

.logo {
font-size: 20px;
font-weight: bold;
color: #333;
}
.logo span {
color: #6b21a8;
}

.header-right {
display: flex;
gap: 12px;
}
.icon-btn {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
}

/* Main Content */
.main {
flex: 1;
display: flex;
flex-direction: column;
}

/* Toolbox Content */
.toolbox-container {
padding: 24px;
background-color: #fff;
}

h2 {
font-size: 22px;
margin-bottom: 20px;
color: #6b21a8;
}
h3 {
font-size: 16px;
margin: 16px 0 8px;
color: #333;
}

.section {
margin-bottom: 24px;
}

.input-field {
width: 100%;
padding: 10px;
margin-top: 6px;
margin-bottom: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
.input-field.small {
width: calc(50% - 10px);
display: inline-block;
margin-right: 10px;
}

.options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.correct-answer {
margin-top: 8px;
color: #555;
}

.btn-row {
display: flex;
gap: 10px;
margin-top: 8px;
}
.btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn-primary {
background-color: #6b21a8;
color: white;
}
.btn-secondary {
background-color: #e0e0e0;
color: #333;
}

.question-block {
background-color: #f9f9f9;
padding: 16px;
margin-top: 12px;
border-radius: 6px;
border: 1px solid #ddd;
}

.note {
font-size: 13px;
color: #777;
margin-top: 12px;
}
</style>