194 lines
8.8 KiB
HTML
194 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>DeepFake</title>
|
|
<link rel="stylesheet" href="style.css"/>
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<div id="auth" class="card">
|
|
<div class="brand">
|
|
<div class="logo">DF</div>
|
|
<div>
|
|
<p class="eyebrow">Best AI chat in the big 2026</p>
|
|
<h1>Welcome to DeepFake</h1>
|
|
<p class="subtitle">Log in to continue your conversation or create an account to get started.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="auth-toggle">
|
|
<button class="toggle active" data-target="login">Login</button>
|
|
<button class="toggle" data-target="register">Register</button>
|
|
</div>
|
|
|
|
<div id="loginScreen" class="auth-screen active">
|
|
<form id="loginForm" class="auth-form">
|
|
<label class="field">
|
|
<span>Username</span>
|
|
<input id="loginUsername" placeholder="Enter your username" autocomplete="username"/>
|
|
</label>
|
|
<label class="field">
|
|
<span>Password</span>
|
|
<input id="loginPassword" type="password" placeholder="Enter your password"
|
|
autocomplete="current-password"/>
|
|
</label>
|
|
<button id="loginSubmit" type="submit" class="primary-action">Sign in</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="registerScreen" class="auth-screen">
|
|
<form id="registerForm" class="auth-form">
|
|
<label class="field">
|
|
<span>Create username</span>
|
|
<input id="registerUsername" placeholder="Choose a username" autocomplete="new-username"/>
|
|
</label>
|
|
<label class="field">
|
|
<span>Create password</span>
|
|
<input id="registerPassword" type="password" placeholder="Create a password"
|
|
autocomplete="new-password"/>
|
|
</label>
|
|
<div class="consent-container">
|
|
<input type="checkbox" id="consentCheckbox" required/>
|
|
<label for="consentCheckbox">
|
|
I agree to the
|
|
<a href="/tos.html" target="_blank">Terms of Service</a> and
|
|
<a href="/privacy.html" target="_blank">Privacy Policy</a>.
|
|
</label>
|
|
</div>
|
|
|
|
<button id="registerSubmit" type="submit" class="primary-action">Create account</button>
|
|
</form>
|
|
</div>
|
|
|
|
<p id="authMsg" class="status"></p>
|
|
</div>
|
|
|
|
<div id="chat" class="card" style="display:none;">
|
|
<div class="chat-layout">
|
|
<aside class="chat-sidebar">
|
|
<div class="sidebar-header">
|
|
<div>
|
|
<p class="eyebrow">Conversations</p>
|
|
<h2>Chats</h2>
|
|
</div>
|
|
<button id="newChat" class="secondary-action">New</button>
|
|
</div>
|
|
<div id="chatList" class="chat-list"></div>
|
|
<div class="persona-panel">
|
|
<div class="sidebar-header persona-header">
|
|
<div>
|
|
<p class="eyebrow">Roleplay</p>
|
|
<h2>Personas</h2>
|
|
</div>
|
|
<div class="persona-header-actions">
|
|
<button id="newPersona" class="secondary-action" type="button">New</button>
|
|
<button id="clearPersona" class="secondary-action" type="button">Clear</button>
|
|
</div>
|
|
</div>
|
|
<p id="activePersonaStatus" class="status persona-status">No persona equipped.</p>
|
|
<div id="personaList" class="persona-list"></div>
|
|
<form id="personaForm" class="persona-form hidden">
|
|
<h3 id="personaFormTitle">Create persona</h3>
|
|
<label class="field">
|
|
<span>Name</span>
|
|
<input id="personaName" placeholder="Persona name" required/>
|
|
</label>
|
|
<label class="field">
|
|
<span>Pronouns</span>
|
|
<input id="personaPronouns" placeholder="e.g. she/her, they/them"/>
|
|
</label>
|
|
<label class="field">
|
|
<span>Appearance</span>
|
|
<textarea id="personaAppearance" rows="2" placeholder="Describe their look"></textarea>
|
|
</label>
|
|
<label class="field">
|
|
<span>Background</span>
|
|
<textarea id="personaBackground" rows="2" placeholder="Backstory or origins"></textarea>
|
|
</label>
|
|
<label class="field">
|
|
<span>Details</span>
|
|
<textarea id="personaDetails" rows="3"
|
|
placeholder="Personality traits, voice, or quirks"></textarea>
|
|
</label>
|
|
<div class="persona-actions">
|
|
<button id="personaSave" type="submit" class="primary-action">Save persona</button>
|
|
<button id="personaCancel" type="button" class="secondary-action">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</aside>
|
|
<section class="chat-main">
|
|
<div class="chat-header">
|
|
<div class="chat-title">
|
|
<h2 id="activeChatTitle">New chat</h2>
|
|
<button id="renameChat" class="icon-button" type="button">Rename</button>
|
|
</div>
|
|
<div class="model-select">
|
|
<label for="model">Model:</label>
|
|
<select id="model">
|
|
<option disabled selected>Loading models...</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="messages"></div>
|
|
<div class="input-container">
|
|
<textarea id="msgInput" placeholder="Type your message..."></textarea>
|
|
<button id="send"></button>
|
|
</div>
|
|
<div class="logout-container">
|
|
<button id="deleteChat" class="danger">Delete Chat</button>
|
|
<button id="logout">Logout</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="personaModal" class="modal-overlay hidden">
|
|
<div class="modal-card">
|
|
<div class="modal-header">
|
|
<h3 id="personaFormTitle">Create persona</h3>
|
|
<button id="personaClose" type="button" class="icon-button">Close</button>
|
|
</div>
|
|
<form id="personaForm" class="persona-form">
|
|
<label class="field">
|
|
<span>Name</span>
|
|
<input id="personaName" placeholder="Persona name" required/>
|
|
</label>
|
|
<label class="field">
|
|
<span>Pronouns</span>
|
|
<input id="personaPronouns" placeholder="e.g. she/her, they/them"/>
|
|
</label>
|
|
<label class="field">
|
|
<span>Appearance</span>
|
|
<textarea id="personaAppearance" rows="2" placeholder="Describe their look"></textarea>
|
|
</label>
|
|
<label class="field">
|
|
<span>Background</span>
|
|
<textarea id="personaBackground" rows="2" placeholder="Backstory or origins"></textarea>
|
|
</label>
|
|
<label class="field">
|
|
<span>Details</span>
|
|
<textarea id="personaDetails" rows="3"
|
|
placeholder="Personality traits, voice, or quirks"></textarea>
|
|
</label>
|
|
<div class="custom-fields">
|
|
<div class="custom-fields-header">
|
|
<span>Custom traits</span>
|
|
<button id="addCustomField" type="button" class="secondary-action">Add</button>
|
|
</div>
|
|
<div id="customFieldsList" class="custom-fields-list"></div>
|
|
</div>
|
|
<div class="persona-actions">
|
|
<button id="personaSave" type="submit" class="primary-action">Save persona</button>
|
|
<button id="personaCancel" type="button" class="secondary-action">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js" defer></script>
|
|
<script src="script.js" defer></script>
|
|
</body>
|
|
</html>
|