index.html•12.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ===== Page Metadata & Styles ===== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MARM Systems - Memory Accurate Response Mode</title>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-V1YZC4S5R5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-V1YZC4S5R5');
</script>
<link rel="stylesheet" href="style/main.css?v=20250124-001">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
body {
background-image: url('style/media/images-bg.png');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
transition: background-image 0.3s;
}
body.dark-mode {
background-image: url('style/media/images-dark-bg.png');
}
</style>
</head>
<body>
<!-- ===== Main Chat UI ===== -->
<header>
<h1>MARM Chatbot</h1>
<div>
<button id="saveSessionBtn" class="btn btn-secondary">💾 Save Session</button>
<button id="helpBtn" class="btn btn-secondary">🤔 Help + Guide</button>
</div>
</header>
<main>
<section id="chatbox">
<div id="chat-log">
<div id="welcome-message" class="welcome-message-chat">
<div class="welcome-content">
<h3>Sick of re-explaining yourself every few minutes? <span class="wave">👋</span></h3>
<p>Try MARM now. Use the command button on the left to unlock session control.</p>
</div>
</div>
</div>
<form id="chat-form">
<div class="input-container">
<button type="button" id="command-menu-btn" class="input-btn" title="Commands">⚡</button>
<div class="textarea-wrapper">
<textarea
id="user-input"
placeholder="Type a message or command... (Shift+Enter for new line, Enter to send)"
autocomplete="off"
rows="1"
></textarea>
<button type="submit" id="send-btn" class="input-btn send-btn" title="Send message">➤</button>
</div>
</div>
<div class="form-buttons">
<button type="button" id="file-upload-btn" class="btn btn-secondary" title="Send your prompt first, then upload file for analysis">📎</button>
<input type="file" id="file-input" accept=".txt,.js,.html,.css,.json,.md,.py,.java,.cpp,.c,.h,.xml,.yaml,.yml,.ini,.cfg,.log" style="display: none;">
<div class="fab-container" id="fab-container">
<button type="button" class="fab-main" id="fab-main" title="Quick Actions">⚡</button>
<div class="fab-buttons" id="fab-buttons">
<button type="button" class="fab-button" id="fab-dark-mode" title="Toggle Dark Mode">🌙</button>
<button type="button" class="fab-button" id="fab-chats" title="Browse Saved Chats">💬</button>
<button type="button" class="fab-button" id="fab-new-chat" title="New Chat">+</button>
<button type="button" class="fab-button" id="fab-marm-toggle" title="Toggle MARM Protocol">🧠</button>
<button type="button" class="fab-button" id="fab-token-counter" title="Token Counter">TC</button>
</div>
</div>
</div>
</form>
</section>
</main>
<div id="help-modal" class="modal hidden">
<!-- ===== Help & Documentation Modal ===== -->
<div class="modal-content help-modal-content">
<daiv class="modal-header">
<h2><span class="help-icon">🎯</span> MARM Protocol Help</h2>
<span id="close-help" class="close">×</span>
</div>
<div class="help-section">
<div class="help-intro">
<h3>Memory Accurate Response Mode (MARM)</h3>
<p>A protocol for maintaining conversation context and providing transparent, accurate AI responses.</p>
</div>
<div class="commands-grid">
<h3><span class="commands-icon">⚡</span> Quick Commands (v2.0)</h3>
<div class="command-group">
<div class="command-item">
<code>/start marm</code>
<span>Activates MARM for the session</span>
</div>
<div class="command-item">
<code>/refresh marm</code>
<span>Reaffirms protocol adherence mid-session</span>
</div>
<div class="command-item">
<code>/log</code>
<span>Use <code>session:</code> to name or <code>entry</code> to log milestone</span>
</div>
<div class="command-item">
<code>/summary:</code>
<span>Generates a summary of your session logs</span>
</div>
<div class="command-item">
<code>/notebook</code>
<span>Manages your personal knowledge library (30 entries max)</span>
</div>
<div class="command-item">
<code>/deep dive</code>
<span>Forces an accuracy-first response</span>
</div>
<div class="command-item">
<code>/show reasoning</code>
<span>Reveals the logic behind the last response</span>
</div>
</div>
</div>
<div class="docs-section">
<h3><span class="docs-icon">📚</span> Documentation</h3>
<div class="docs-grid">
<button class="doc-link" data-doc="handbook.md">
<span class="doc-icon">📘</span>
<div class="doc-info">
<h4>Full Handbook</h4>
<p>Complete guide to MARM usage and commands</p>
</div>
</button>
<button class="doc-link" data-doc="faq.md">
<span class="doc-icon">❓</span>
<div class="doc-info">
<h4>FAQ</h4>
<p>Frequently asked questions and answers</p>
</div>
</button>
<button class="doc-link" data-doc="description.md">
<span class="doc-icon">📄</span>
<div class="doc-info">
<h4>Project Description</h4>
<p>Overview of MARM protocol and vision</p>
</div>
</button>
<button class="doc-link" data-doc="roadmap.md">
<span class="doc-icon">🗺️</span>
<div class="doc-info">
<h4>Roadmap</h4>
<p>Planned features and enhancements</p>
</div>
</button>
</div>
<!-- Voice Settings -->
<div id="voice-settings" style="padding-top: 15px; border-top: 1px solid #ddd; display: none;">
<p><strong>Voice Settings:</strong></p>
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
<input type="checkbox" id="auto-voice-toggle">
<span>Auto-read bot responses</span>
</label>
<div style="margin-top: 10px;">
<label style="display: flex; align-items: center; gap: 10px;">
<span style="min-width: 80px;">Speed:</span>
<input type="range" id="voice-speed-slider" min="0.5" max="2.0" step="0.1" value="1.1" style="flex: 1;">
<span id="voice-speed-value" style="min-width: 30px; font-size: 0.9em;">1.1x</span>
</label>
</div>
<div style="margin-top: 10px;">
<button id="voice-options-btn" style="padding: 5px 10px; background: #3d5a80; color: white; border: none; border-radius: 4px; cursor: pointer;">
Voice Options
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Chats Menu Template -->
<div id="chats-menu" class="chats-menu" style="display: none;">
<div class="chats-menu-header">
<span>Saved Chats</span>
<div class="chats-menu-buttons">
<button id="refresh-chats-btn" title="Refresh saved chats list">🔄</button>
<button id="close-chats-btn" title="Close saved chats menu">×</button>
</div>
</div>
<div class="chats-menu-content" id="chats-menu-content">
<div class="no-chats">No saved chats yet</div>
</div>
</div>
<!-- Loading Indicator Template -->
<div id="loading-indicator-template" class="loading-indicator" style="display: none;">
<div class="message-name">MARM bot</div>
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Code Window Template -->
<div id="code-window-template" class="code-window" style="display: none;">
<div class="code-window-header">
<span class="code-language"></span>
<button class="code-window-copy-btn">Copy</button>
</div>
<div class="code-window-content">
<pre><code></code></pre>
</div>
</div>
<div id="markdown-modal" class="modal hidden">
<div class="modal-content markdown-modal-content">
<div class="modal-header">
<h2 id="markdown-title">Documentation</h2>
<span id="close-markdown" class="close">×</span>
</div>
<div id="markdown-content" class="markdown-content">
<div class="loading-spinner">Loading...</div>
</div>
</div>
</div>
<!-- Command Menu Template -->
<div id="command-menu" class="command-menu" style="display: none;">
<div class="command-menu-content">
<div class="command-item" data-command="/start marm" title="Activate MARM protocol">
<div class="command-name">/start marm</div>
</div>
<div class="command-item" data-command="/refresh marm" title="Refresh session state">
<div class="command-name">/refresh marm</div>
</div>
<div class="command-item log-item" title="Logging commands">
<div class="command-name">/log</div>
<div class="log-submenu" id="log-submenu" style="display: none;">
<div class="submenu-item" data-command="/log session:" title="Name your session">session:</div>
<div class="submenu-item" data-command="/log entry: " title="Log entry: [YYYY-MM-DD-topic-summary]">entry:</div>
</div>
</div>
<div class="command-item" data-command="/deep dive " title="Activate enhanced accuracy mode with reasoning">
<div class="command-name">/deep dive</div>
</div>
<div class="command-item" data-command="/show reasoning" title="Display logic behind last response">
<div class="command-name">/show reasoning</div>
</div>
<div class="command-item" data-command="/summary: " title="Enter session name">
<div class="command-name">/summary:</div>
</div>
<div class="command-item notebook-item" title="Manage your knowledge library">
<div class="command-name">/notebook</div>
<div class="notebook-submenu" id="notebook-submenu" style="display: none;">
<div class="submenu-item" data-command="/notebook add:" title="Add new entry">add:</div>
<div class="submenu-item" data-command="/notebook show" title="Display all entries">show</div>
<div class="submenu-item" data-command="/notebook use:" title="Activate an entry as instruction">use:</div>
<div class="submenu-item" data-command="/notebook clear:" title="Clear the active list">clear:</div>
<div class="submenu-item" data-command="/notebook status" title="Show the current active list">status</div>
</div>
</div>
</div>
</div>
<script type="module">
import('./src/chatbot/chatbot.js?v=2.0')
.then(() => {
})
.catch(e => {
console.error('Failed to load chatbot:', e);
if (e.message.includes('Failed to fetch')) {
console.error('Check that chatbot.js exists in the src/chatbot/ folder');
}
});
</script>
</body>
</html>