blackicedbear/MoodleGPT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

Rebrand to SparkAssist and update version to 2.0.0

Browse Source
This commit is contained in:
blackicedbear
2026-04-30 22:04:30 +02:00
parent 03bc4e64e4
commit e7f00359a1
9 changed files with 383 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/icon.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 480 KiB

extension/manifest.json
+3 -5
View File
@@ -1,21 +1,19 @@
{
"manifest_version": 3,
"name": "MoodleGPT",
"version": "1.1.5",
"description": "Hidden chat-gpt for your moodle quiz",
"name": "SparkAssist",
"version": "2.0.0",
"description": "An AI study assistant for your quizzes",
"permissions": ["storage"],
"action": {
"default_icon": "icon.png",
"default_popup": "./popup/index.html"
},
"icons": {
"16": "icon.png",
"32": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"content_scripts": [
{
"matches": ["*://*/**/mod/quiz/attempt.php*", "*://*/mod/quiz/attempt.php*", "file:///*"],
extension/popup/index.html
+104 -107
View File
@@ -2,170 +2,167 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MoodleGPT</title>
<title>SparkAssist</title>
<link rel="stylesheet" href="style.css" />
<script src="./popup.js" defer></script>
<link rel="icon" type="image/png" href="../icon.png" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<main>
<div class="line center" style="margin-bottom: 0.5rem">
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.flaticon.com/free-icons/mortarboard"
title="Mortarboard icons created by itim2101 - Flaticon"
>
<img src="../icon.png" alt="icon" />
</a>
<div class="col center title">
<h1>MoodleGPT</h1>
<div class="header">
<img src="../icon.png" alt="SparkAssist Logo" />
<div class="header-text">
<h1>SparkAssist</h1>
<p id="version"></p>
</div>
</div>
<!-- SETTINGS -->
<div class="settings" id="settings">
<div class="line center">
<label for="apiKey" class="textLabel">Api Key<span class="required">*</span>:</label>
<input id="apiKey" type="text" />
<!-- 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="line center">
<label for="model" class="textLabel">GPT Model<span class="required">*</span>:</label>
<input type="text" id="model" list="models" />
<datalist id="models"></datalist>
<i id="check-model" title="Test" style="cursor: pointer" class="fa-solid fa-play"></i>
<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="settings" id="advanced-settings" style="display: none">
<div class="line center">
<label for="code" class="textLabel">Code:</label>
<input id="code" type="text" />
<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="line center">
<label for="baseURL" class="textLabel">Base URL:</label>
<input id="baseURL" type="text" />
<div class="form-group">
<label for="baseURL">Base URL</label>
<input id="baseURL" type="text" placeholder="https://api.openai.com/v1" />
</div>
<div class="line center">
<label for="projectId" class="textLabel">Project ID:</label>
<div class="form-group">
<label for="projectId">Project ID</label>
<input id="projectId" type="text" placeholder="proj_..." />
</div>
<div class="line center">
<label for="maxTokens" class="textLabel">Max Tokens:</label>
<div class="form-group">
<label for="maxTokens">Max Tokens</label>
<input id="maxTokens" type="number" />
</div>
<div class="line center">
<label for="timeoutValue" class="textLabel">Timeout (s):</label>
<div class="form-group">
<label for="timeoutValue">Timeout (s)</label>
<input id="timeoutValue" type="number" placeholder="20" />
</div>
</div>
<!-- SWITCH SETTINGS MODE -->
<div class="line center mt">
<a id="switch-settings" href="#">Advanced settings</a>
<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="line center-y mt">
<i class="fa-solid fa-robot"></i>
<p>Mode:</p>
</div>
<div class="line">
<ul id="mode" class="line center">
<li><button value="autocomplete">autocomplete</button></li>
<li>
<button value="clipboard" class="not-selected">clipboard</button>
</li>
</ul>
</div>
<div class="line mt center-y">
<i class="fa-solid fa-gear"></i>
<p>Options:</p>
</div>
<div class="line center" style="gap: 2rem">
<div class="col">
<div class="line">
<div class="panel options-grid">
<div class="toggle-row">
<label for="logs">Console logs</label>
<label class="toggle-switch">
<input id="logs" type="checkbox" />
<label for="logs">Console logs</label>
</div>
<div class="line">
<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 />
<label for="title">Title indication</label>
</div>
<div class="line">
<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 />
<label for="cursor">Cursor indication</label>
</div>
<div class="line">
<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 />
<label for="timeout">Request timeout</label>
</div>
<span class="slider"></span>
</label>
</div>
<div class="col">
<div class="line">
<div class="toggle-row">
<label for="typing">Typing effect</label>
<label class="toggle-switch">
<input id="typing" type="checkbox" />
<label for="typing">Typing effect</label>
</div>
<div class="line">
<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" />
<label for="mouseover">Mouseover effect</label>
</div>
<div class="line">
<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" />
<label for="infinite">Infinite try</label>
</div>
<div class="line">
<span class="slider"></span>
</label>
</div>
<div class="toggle-row">
<label for="history">History</label>
<label class="toggle-switch">
<input id="history" type="checkbox" />
<label for="history">Save history</label>
</div>
<!-- This option is only showed if the current version of the model support it -->
<div class="line" id="includeImages-line" style="display: none">
<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" />
<label for="includeImages">Include images</label>
</div>
<span class="slider"></span>
</label>
</div>
</div>
<p id="message">{Message}</p>
<div class="line center">
<button class="save">Save</button>
</div>
<div class="line center">
<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
>
Donate
</a>
<a
href="https://github.com/yoannchb-pro/MoodleGPT"
target="_blank"
rel="noopener noreferrer"
>Docs</a
>
See the documentation
</a>
<a
href="https://github.com/yoannchb-pro/MoodleGPT/issues"
target="_blank"
rel="noopener noreferrer"
>
Need Help
</a>
</div>
</main>
</body>
extension/popup/popup.js
+1 -1
View File
File diff suppressed because one or more lines are too long
extension/popup/style.css
+265 -147
View File
@@ -1,194 +1,312 @@
@font-face {
font-family: Segeo UI;
src: url(../../fonts/Segoe\ UI.ttf);
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
:root {
--bg-color: #121212;
--color: #fff;
--btn-color: #7f39fb;
--bg-color: #0b0f19;
--panel-bg: rgba(255, 255, 255, 0.05);
--color: #e2e8f0;
--color-muted: #94a3b8;
--btn-color: #8a2be2;
--btn-hover: #9d4edd;
--accent: #00f0ff;
--border-color: rgba(255, 255, 255, 0.1);
--font-family: 'Inter', sans-serif;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Segeo UI', sans-serif;
font-family: var(--font-family);
color: var(--color);
}
body {
width: 380px;
min-height: 100vh;
background-color: var(--bg-color);
background-image:
radial-gradient(circle at top right, rgba(138, 43, 226, 0.15), transparent 60%),
radial-gradient(circle at bottom left, rgba(0, 240, 255, 0.15), transparent 60%);
display: flex;
justify-content: center;
align-items: center;
align-items: flex-start;
}
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.75rem;
gap: 0.4rem;
text-align: center;
width: 22rem;
}
.settings {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
text-align: center;
padding: 1.5rem;
gap: 1rem;
width: 100%;
}
img {
width: 5rem;
}
a {
color: var(--btn-color);
margin: 0;
}
.line {
/* Header */
.header {
display: flex;
flex-direction: row;
width: 100%;
gap: 0.5rem;
}
.center {
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.center-y {
align-items: center;
.header img {
width: 3.5rem;
filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.5));
}
.line .textLabel {
width: 5rem;
text-align: left;
text-transform: uppercase;
}
.line .textLabel .required {
color: var(--btn-color);
font-weight: bold;
}
.line input[type='text'],
.line input[type='password'],
.line input[type='number'],
.line select {
flex: 1 1;
border: thin solid var(--color);
padding: 0.3rem 0.5rem;
border-radius: 0.2rem;
outline-color: transparent;
background-color: transparent;
}
.line option {
color: #000;
}
.line input[type='checkbox'] {
accent-color: var(--btn-color);
}
.col {
display: flex;
flex-direction: column;
text-align: left;
}
.save {
border: none;
background-color: var(--btn-color);
padding: 0.5rem 2rem;
margin-top: 1rem;
cursor: pointer;
border-radius: 0.2rem;
.header-text h1 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.mt {
margin-top: 1rem;
}
.not-selected {
opacity: 0.4;
}
#mode li {
list-style: none;
flex-grow: 1;
}
#mode {
flex-wrap: wrap;
}
#mode button {
background-color: var(--btn-color);
border: none;
text-align: center;
padding: 0.3rem 0.75rem;
cursor: pointer;
width: 100%;
border-radius: 0.5rem;
text-transform: uppercase;
font-weight: 600;
background: linear-gradient(90deg, #00f0ff, #8a2be2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#version {
font-size: 0.75rem;
font-size: 0.8rem;
color: var(--color-muted);
}
/* Panels */
.panel {
background: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1rem;
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
gap: 0.8rem;
}
/* Form Groups */
.form-group {
display: flex;
flex-direction: column;
gap: 0.3rem;
text-align: left;
}
.form-group label {
font-size: 0.8rem;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-group label .required {
color: var(--accent);
margin-left: 2px;
}
.input-with-icon {
display: flex;
align-items: center;
gap: 0.5rem;
}
.input-with-icon input {
flex: 1;
}
.input-with-icon i {
color: var(--accent);
cursor: pointer;
transition: transform 0.2s;
}
.input-with-icon i:hover {
transform: scale(1.1);
}
input[type='text'],
input[type='password'],
input[type='number'] {
width: 100%;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
padding: 0.6rem;
border-radius: 6px;
outline: none;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
input[type='text']:focus,
input[type='password']:focus,
input[type='number']:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.2);
}
#switch-settings {
font-size: 0.8rem;
color: var(--color-muted);
text-decoration: none;
text-align: center;
display: block;
transition: color 0.2s;
}
#switch-settings:hover {
color: var(--accent);
}
/* Mode Buttons */
.section-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
margin-top: 0.5rem;
}
.section-title i {
color: var(--btn-color);
}
#mode {
display: flex;
gap: 0.5rem;
list-style: none;
}
#mode li {
flex: 1;
}
#mode button {
width: 100%;
background-color: transparent;
border: 1px solid var(--btn-color);
color: var(--color);
padding: 0.5rem;
border-radius: 6px;
cursor: pointer;
text-transform: uppercase;
font-size: 0.8rem;
transition: all 0.2s;
}
#mode button:not(.not-selected) {
background-color: var(--btn-color);
box-shadow: 0 0 10px rgba(138, 43, 226, 0.4);
}
/* Toggle Switches for Options */
.options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
}
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.toggle-row label {
font-size: 0.85rem;
cursor: pointer;
}
/* Custom Checkbox as Toggle */
.toggle-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.1);
transition: 0.3s;
border-radius: 20px;
}
.slider:before {
position: absolute;
content: '';
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--accent);
box-shadow: 0 0 8px var(--accent);
}
input:checked + .slider:before {
transform: translateX(16px);
}
/* Actions */
.save {
background: linear-gradient(90deg, var(--btn-color), var(--accent));
border: none;
padding: 0.8rem;
border-radius: 8px;
color: #fff;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
width: 100%;
transition:
transform 0.2s,
box-shadow 0.2s;
}
.save:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(138, 43, 226, 0.5);
}
#message {
display: none;
margin-bottom: -0.5rem;
font-size: 0.85rem;
text-align: center;
color: var(--accent);
}
#reloadModel {
cursor: pointer;
/* Footer Links */
.footer {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 0.5rem;
}
#reloadModel[disabled] {
cursor: not-allowed;
opacity: 0.75;
.footer a {
font-size: 0.8rem;
color: var(--color-muted);
text-decoration: none;
transition: color 0.2s;
}
.footer a:hover {
color: var(--accent);
}
.donate {
color: white;
animation: infinite donate 5s linear;
color: var(--accent) !important;
font-weight: bold;
}
@keyframes donate {
0% {
transform: translateX(0);
}
3.57% {
transform: translateY(-9px);
}
7.14% {
transform: translateY(-9px) rotate(17deg);
}
10.78% {
transform: translateY(-9px) rotate(-17deg);
}
14% {
transform: translateY(-9px) rotate(17deg);
}
18% {
transform: translateY(-9px) rotate(-17deg);
}
22% {
transform: translateY(0) rotate(0);
}
}