|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Student Homework Assistant</title> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css"> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js" defer></script> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
|
|
|
|
|
<link rel="stylesheet" href="/static/style.css"> |
|
|
<script src="/static/script.js" defer></script> |
|
|
</head> |
|
|
<body> |
|
|
<div id="app-wrapper"> |
|
|
|
|
|
<div id="home-page"> |
|
|
<div class="home-content"> |
|
|
<div class="logo"><i class="fa-solid fa-brain"></i></div> |
|
|
<h1>Flexx: Your Homework Assistant</h1> |
|
|
<p>Stuck on a problem? Need help with a subject? Just ask! You can type, upload, or snap a photo of your question.</p> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chat-container" class="hidden"> |
|
|
<div id="chat-messages"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="input-area"> |
|
|
<div id="image-preview-container"></div> |
|
|
<div class="input-bar"> |
|
|
|
|
|
<button id="mobile-menu-btn" class="icon-btn mobile-only"><i class="fa-solid fa-paperclip"></i></button> |
|
|
|
|
|
|
|
|
<div class="desktop-icons"> |
|
|
<button id="upload-btn" class="icon-btn" title="Upload Image"><i class="fa-solid fa-upload"></i></button> |
|
|
<input type="file" id="image-upload" accept="image/*" style="display: none;"> |
|
|
<button id="camera-btn" class="icon-btn" title="Capture Photo"><i class="fa-solid fa-camera"></i></button> |
|
|
<button id="search-toggle-btn" class="icon-btn" title="Toggle Web Search"><i class="fa-solid fa-globe"></i></button> |
|
|
<button id="settings-btn" class="icon-btn" title="Settings"><i class="fa-solid fa-cog"></i></button> |
|
|
</div> |
|
|
|
|
|
<textarea id="message-input" placeholder="Type your message, or upload a photo..." rows="1"></textarea> |
|
|
<button id="send-btn" title="Send"><i class="fa-solid fa-arrow-up"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settings-modal" class="modal-overlay"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h2>Preferences</h2> |
|
|
<button class="close-btn">×</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="setting"> |
|
|
<label for="response-language">Response Language</label> |
|
|
<div class="custom-select"> |
|
|
<select id="response-language"> |
|
|
<option value="English">English</option> |
|
|
<option value="Urdu">Urdu</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="setting"> |
|
|
<label for="subject">Subject</label> |
|
|
<div class="custom-select"> |
|
|
<select id="subject"> |
|
|
<option value="General">General</option> |
|
|
<option value="English">English</option> |
|
|
<option value="Urdu">Urdu</option> |
|
|
<option value="Science">Science</option> |
|
|
<option value="Maths">Maths</option> |
|
|
<option value="Geography">Geography</option> |
|
|
<option value="History">History</option> |
|
|
<option value="History">Computer</option> |
|
|
<option value="History">Islamiyat</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="setting"> |
|
|
<label for="words-limit">Words Limit: <span id="words-limit-value">100</span></label> |
|
|
<input type="range" id="words-limit" min="50" max="500" value="100" class="slider"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button id="save-settings-btn" class="modal-button">Save</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="camera-modal" class="modal-overlay"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"><h2>Capture Photo</h2><button class="close-btn">×</button></div> |
|
|
<div class="modal-body"><video id="camera-stream" autoplay playsinline></video><canvas id="camera-canvas" style="display:none;"></canvas></div> |
|
|
<div class="modal-footer"><button id="capture-btn" class="modal-button"><i class="fa-solid fa-camera-retro"></i> Capture</button></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="cropper-modal" class="modal-overlay"> |
|
|
<div class="modal-content wide"> |
|
|
<div class="modal-header"><h2>Crop Image</h2><button class="close-btn">×</button></div> |
|
|
<div class="modal-body"><div class="cropper-container"><img id="image-to-crop" src="" alt="Image for cropping"></div></div> |
|
|
<div class="modal-footer"><button id="crop-confirm-btn" class="modal-button"><i class="fa-solid fa-crop-simple"></i> Confirm Crop</button></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="lightbox-modal" class="modal-overlay lightbox"> |
|
|
<span class="close-btn">×</span><img class="lightbox-content" id="lightbox-img"> |
|
|
</div> |
|
|
|
|
|
</body> |
|
|
</html> |
