105 lines
5.0 KiB
JavaScript
105 lines
5.0 KiB
JavaScript
function getMain() {
|
||
return `
|
||
<main>
|
||
<section id="table-of-contents">
|
||
<h2>Table of Contents</h2>
|
||
<nav id="toc-nav">
|
||
<div class="toc-placeholder">
|
||
<p>The table of contents will be automatically generated from your journal headings.</p>
|
||
<button id="refresh-toc" class="btn secondary">Refresh</button>
|
||
</div>
|
||
</nav>
|
||
</section>
|
||
|
||
<section id="design-journal">
|
||
<h2>Design Journal</h2>
|
||
<div id="journal-controls" style="padding: 1rem; border-bottom: 1px solid var(--border-color); display: flex; gap: 1rem; align-items: center; justify-content: center;">
|
||
<button id="save-journal" class="btn success">Save</button>
|
||
<button id="load-journal" class="btn">Load</button>
|
||
<button id="preview-toggle" class="btn primary">Preview</button>
|
||
<button id="present-mode" class="btn" title="Open in presentation mode (new window)">Present</button>
|
||
<span id="save-status" class="text-light"></span>
|
||
</div>
|
||
|
||
<!-- Journal loading modal -->
|
||
<div id="journal-modal" class="modal-overlay" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>Select a Journal</h3>
|
||
<button class="modal-close" id="close-journal-modal">×</button>
|
||
</div>
|
||
<div class="modal-body" id="journal-modal-body">
|
||
<!-- Dynamic content -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="journal-editor" contenteditable="true">
|
||
<!-- Main editor area -->
|
||
</div>
|
||
</section>
|
||
|
||
<section id="ai-assistant">
|
||
<h2>AI Assistant</h2>
|
||
<div class="ai-controls" style="padding: 1rem; border-bottom: 1px solid var(--border-color);">
|
||
<div class="ai-actions" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem;">
|
||
<button id="activate-rephrase" class="btn" title="Rephrase selected text">
|
||
Rephrase
|
||
</button>
|
||
<button id="check-inconsistencies" class="btn" title="Check for inconsistencies">
|
||
Inconsistencies
|
||
</button>
|
||
<button id="check-duplications" class="btn" title="Check for duplicates">
|
||
Duplicates
|
||
</button>
|
||
<button id="give-advice" class="btn" title="Get improvement advice">
|
||
Advice
|
||
</button>
|
||
</div>
|
||
<div class="liberty-mode" style="border-top: 1px solid var(--border-color); padding-top: 1rem;">
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
|
||
<div style="display: flex; align-items: center; gap: 0.25rem;">
|
||
<label for="liberty-repeat-count" style="font-size: 0.85rem; color: var(--text-light);">Iterations:</label>
|
||
<select id="liberty-repeat-count" style="padding: 0.25rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--surface-color); color: var(--text-color); font-size: 0.85rem;">
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3" selected>3</option>
|
||
<option value="4">4</option>
|
||
<option value="5">5</option>
|
||
<option value="6">6</option>
|
||
<option value="7">7</option>
|
||
<option value="8">8</option>
|
||
<option value="9">9</option>
|
||
<option value="10">10</option>
|
||
</select>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 0.25rem;">
|
||
<label for="liberty-precision" style="font-size: 0.85rem; color: var(--text-light);">Precision:</label>
|
||
<select id="liberty-precision" style="padding: 0.25rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--surface-color); color: var(--text-color); font-size: 0.85rem;">
|
||
<option value="30">30% (Very creative)</option>
|
||
<option value="50">50% (Balanced)</option>
|
||
<option value="70" selected>70% (Conservative)</option>
|
||
<option value="90">90% (Very precise)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<button id="liberty-mode" class="btn" style="width: 100%;" title="Enhanced Mode - Iterative generation in real-time">
|
||
Enhanced Mode
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div id="ai-assistant-feedback" style="flex: 1; padding: 1rem; overflow-y: auto; min-height: 200px;">
|
||
<div class="feedback-message" style="text-align: center; color: var(--text-light);">
|
||
<strong>AI Assistant Ready</strong><br>
|
||
Select text in the editor and click an action to begin.
|
||
<div style="margin-top: 1rem; font-size: 0.85rem;">
|
||
<div style="margin-bottom: 0.5rem;"><strong>Powered by Mistral AI</strong></div>
|
||
<div>Model: Mistral Large (multilingual)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
`;
|
||
}
|
||
|
||
module.exports = { getMain }; |