Migrate popup UI to Preact and Tailwind CSS
This commit is contained in:
+9
-152
@@ -4,6 +4,14 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SparkAssist</title>
|
||||
<!-- Modern Typography -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script src="./popup.js" defer></script>
|
||||
<link rel="icon" type="image/png" href="../icon.png" />
|
||||
@@ -12,158 +20,7 @@
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="header">
|
||||
<img src="../icon.png" alt="SparkAssist Logo" />
|
||||
<div class="header-text">
|
||||
<h1>SparkAssist</h1>
|
||||
<p id="version"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MAIN SETTINGS -->
|
||||
<div class="panel settings" id="settings">
|
||||
<div class="form-group">
|
||||
<label for="apiKey">Api Key<span class="required">*</span></label>
|
||||
<input id="apiKey" type="text" placeholder="sk-..." />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="model">GPT Model<span class="required">*</span></label>
|
||||
<div class="input-with-icon">
|
||||
<input type="text" id="model" list="models" placeholder="gpt-4o" />
|
||||
<datalist id="models"></datalist>
|
||||
<i id="check-model" title="Test" class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ADVANCED SETTINGS -->
|
||||
<div class="panel settings" id="advanced-settings" style="display: none">
|
||||
<div class="form-group">
|
||||
<label for="code">Activation Code</label>
|
||||
<input id="code" type="text" placeholder="Secret key..." />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="baseURL">Base URL</label>
|
||||
<input id="baseURL" type="text" placeholder="https://api.openai.com/v1" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="projectId">Project ID</label>
|
||||
<input id="projectId" type="text" placeholder="proj_..." />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="maxTokens">Max Tokens</label>
|
||||
<input id="maxTokens" type="number" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timeoutValue">Timeout (s)</label>
|
||||
<input id="timeoutValue" type="number" placeholder="20" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a id="switch-settings" href="#">Show Advanced Settings</a>
|
||||
|
||||
<div class="section-title">
|
||||
<i class="fa-solid fa-bolt"></i>
|
||||
<span>Operating Mode</span>
|
||||
</div>
|
||||
<ul id="mode">
|
||||
<li><button value="autocomplete">autocomplete</button></li>
|
||||
<li><button value="clipboard" class="not-selected">clipboard</button></li>
|
||||
</ul>
|
||||
|
||||
<div class="section-title">
|
||||
<i class="fa-solid fa-sliders"></i>
|
||||
<span>Options</span>
|
||||
</div>
|
||||
|
||||
<div class="panel options-grid">
|
||||
<div class="toggle-row">
|
||||
<label for="logs">Console logs</label>
|
||||
<label class="toggle-switch">
|
||||
<input id="logs" type="checkbox" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toggle-row">
|
||||
<label for="title">Title hint</label>
|
||||
<label class="toggle-switch">
|
||||
<input id="title" type="checkbox" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toggle-row">
|
||||
<label for="cursor">Cursor hint</label>
|
||||
<label class="toggle-switch">
|
||||
<input id="cursor" type="checkbox" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toggle-row">
|
||||
<label for="timeout">Timeout</label>
|
||||
<label class="toggle-switch">
|
||||
<input id="timeout" type="checkbox" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toggle-row">
|
||||
<label for="typing">Typing effect</label>
|
||||
<label class="toggle-switch">
|
||||
<input id="typing" type="checkbox" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toggle-row">
|
||||
<label for="mouseover">Hover effect</label>
|
||||
<label class="toggle-switch">
|
||||
<input id="mouseover" type="checkbox" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toggle-row">
|
||||
<label for="infinite">Infinite try</label>
|
||||
<label class="toggle-switch">
|
||||
<input id="infinite" type="checkbox" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toggle-row">
|
||||
<label for="history">History</label>
|
||||
<label class="toggle-switch">
|
||||
<input id="history" type="checkbox" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toggle-row" id="includeImages-line" style="display: none">
|
||||
<label for="includeImages">Images (GPT-4)</label>
|
||||
<label class="toggle-switch">
|
||||
<input id="includeImages" type="checkbox" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="message">{Message}</p>
|
||||
|
||||
<button class="save">Save Preferences</button>
|
||||
|
||||
<div class="footer">
|
||||
<a
|
||||
class="donate"
|
||||
href="https://www.buymeacoffee.com/yoannchbpro"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Support</a
|
||||
>
|
||||
<a
|
||||
href="https://github.com/yoannchb-pro/MoodleGPT"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Docs</a
|
||||
>
|
||||
</div>
|
||||
</main>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1029
-250
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user