Roshan1162003

Fresh clean upload (history reset)

7843c42 about 1 month ago

7.58 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>RemiAI - bujji</title>
	<link rel="icon" type="image/x-icon" href="remiai.ico">
	<link rel="stylesheet" href="styles.css">
	<script src="https://unpkg.com/lucide@latest"></script>
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
	</head>
	<body class="">

	<div class="app-container">
	<!-- SIDEBAR -->
	<div class="sidebar">
	<div class="brand">
	<img src="remiai.ico" alt="Logo" class="brand-logo">
	<span>RemiAI</span>
	</div>

	<button id="new-chat-btn" class="new-chat-btn">
	<i data-lucide="plus"></i> New Chat
	</button>

	<button id="manage-personas-btn" class="secondary-btn" style="margin-top: 5px;">
	<i data-lucide="users"></i> Personas
	</button>

	<!-- COMPACT APP GRID -->
	<div class="nav-section">
	<div class="nav-label">Features</div>
	<div class="nav-grid">
	<button class="nav-icon-btn active" onclick="switchView('chat')" title="Chat">
	<i data-lucide="message-circle"></i>
	</button>
	<!-- Redirects to web.html -->
	<button class="nav-icon-btn" onclick="window.location.href='web.html'" title="Web Browser">
	<i data-lucide="globe"></i>
	</div>
	</div>

	<div class="nav-label">History</div>
	<div class="history-list" id="history-list">
	<!-- Chat history items appear here -->
	</div>

	<div class="sidebar-footer">
	<div style="margin-bottom: 5px; font-size: 11px; font-weight: bold;">
	<span id="status-indicator" class="status-loading">Connecting...</span>
	</div>

	<div class="credits-text">
	Powered by <br> <strong>Google Gemma 2</strong> <br> Open Weights
	</div>

	<button id="reload-btn" class="theme-toggle" style="margin-bottom: 5px; color: #60a5fa;">
	<i data-lucide="rotate-cw"></i> Refresh App
	</button>
	<button id="theme-toggle" class="theme-toggle">
	<i data-lucide="moon"></i> Theme
	</button>
	</div>
	</div>

	<!-- MAIN CONTENT -->
	<div class="main-content">

	<!-- 1. CHAT VIEW -->
	<div id="view-chat" class="view-section active">
	<div class="chat-header">
	<div class="header-info">
	<img id="current-persona-avatar" class="header-avatar hidden" src="" alt="Avatar">
	<div style="display:flex; flex-direction:column;">
	<span style="font-size:10px; opacity:0.6;">Chatting with:</span>
	<select id="active-persona-select" class="header-dropdown"></select>
	</div>
	</div>
	</div>
	<div class="chat-area" id="chat-area">
	<div id="welcome-screen" class="welcome-screen">
	<img src="remiai.ico" alt="Logo" class="large-logo">
	<h1>RemiAI bujji</h1>
	<p>Select a character or start typing.</p>
	</div>
	</div>
	<div class="input-container">
	<div class="input-box-wrapper">
	<textarea id="user-input" rows="1" placeholder="Type a message..."></textarea>
	<button id="send-btn"><i data-lucide="send"></i></button>
	</div>
	</div>
	</div>

	<!-- PLACEHOLDERS for other views -->
	<div id="view-habits" class="view-section hidden centered-view"><h2>Habit Tracker</h2><p>Habit tools will load here.</p></div>
	<div id="view-games" class="view-section hidden centered-view"><h2>Games Arcade</h2><p>Games will load here.</p></div>
	<div id="view-fashion" class="view-section hidden centered-view"><h2>Fashion Friend</h2><p>Style advice will load here.</p></div>
	<div id="view-astro" class="view-section hidden centered-view"><h2>Astro Master</h2><p>Horoscope will load here.</p></div>
	<div id="view-productivity" class="view-section hidden centered-view"><h2>Productivity</h2><p>Task tools will load here.</p></div>
	<div id="view-breathing" class="view-section hidden centered-view"><h2>Breathing Coach</h2><p>Relaxation tools will load here.</p></div>

	</div>
	</div>

	<!-- MODALS -->
	<div id="manage-personas-modal" class="modal-overlay hidden">
	<div class="modal-content large">
	<h3>Create New Character</h3>
	<div class="persona-form">
	<div class="form-group"><label>Name</label><input type="text" id="p-name" class="modal-input"></div>
	<div class="form-group"><label>Relation</label><input type="text" id="p-relation" class="modal-input"></div>
	<div class="form-group"><label>Gender</label><select id="p-gender" class="modal-input"><option value="Female">Female</option><option value="Male">Male</option></select></div>
	<div class="form-group"><label>Instructions</label><textarea id="p-instruction" class="modal-input" rows="3"></textarea></div>
	<div class="form-group full-width">
	<label>Avatar Image</label>
	<input type="file" id="p-sticker-file" class="modal-input">
	<img id="p-preview" src="" style="width:30px;height:30px;border-radius:50%;display:none;margin-top:5px;">
	</div>
	<div class="form-group full-width">
	<label>Response Length</label>
	<select id="p-length" class="modal-input"><option value="short">Short</option><option value="medium">Medium</option><option value="detailed">Detailed</option></select>
	</div>
	<button id="save-persona-btn" class="primary-btn full-width">Save</button>
	</div>
	<div class="persona-list-display" id="persona-list-display"></div>
	<button id="close-manage-btn" class="secondary-btn" style="width:100%; margin-top:10px;">Close</button>
	</div>
	</div>

	<div id="delete-modal" class="modal-overlay hidden">
	<div class="modal-content">
	<h3>Delete Chat?</h3>
	<div class="modal-actions">
	<button id="cancel-delete" class="btn-cancel">Cancel</button>
	<button id="confirm-delete" class="btn-delete">Delete</button>
	</div>
	</div>
	</div>

	<div id="persona-delete-modal" class="modal-overlay hidden">
	<div class="modal-content">
	<h3>Delete Character?</h3>
	<div class="modal-actions">
	<button id="cancel-persona-delete" class="btn-cancel">Cancel</button>
	<button id="confirm-persona-delete" class="btn-delete">Delete</button>
	</div>
	</div>
	</div>

	<script src="renderer.js"></script>
	<script>lucide.createIcons();</script>
	</body>
	</html>