andrea/LeafLLM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CSS games

Browse Source
This commit is contained in:
achiyae
2023-08-05 23:58:17 +03:00
parent 60b84e8229
commit 93b362ca3e
3 changed files with 74 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
popup/popup.css
View File

@@ -8,14 +8,15 @@ body {
.extension-title { .extension-title {
font-size: 24px; font-size: 24px;
color: #4a4a4a; color: #4a4a4a;
margin-bottom: 20px; margin-bottom: 10px;
} }
.form-container { .form-container {
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
margin: 10px 0; margin-bottom: 10px;
padding: 20px; padding: 10px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
} }
@@ -38,6 +39,14 @@ body {
margin-bottom: 10px; margin-bottom: 10px;
} }
.btn-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 3px;
margin-right: 3px;
}
.btn { .btn {
font-size: 14px; font-size: 14px;
padding: 8px 16px; padding: 8px 16px;
@@ -46,9 +55,9 @@ body {
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
margin: 5px 0; margin: 5px 5px 0 5px;
transition: background-color 0.3s; transition: background-color 0.3s;
width: 300px; width: 200px;
} }
.btn:hover { .btn:hover {
@@ -70,7 +79,6 @@ body {
} }
#controls { #controls {
margin-top: 30px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -78,7 +86,8 @@ body {
.control { .control {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px; margin-bottom: 5px;
margin-top: 5px;
} }
.input { .input {
@@ -103,7 +112,7 @@ body {
.settings-text { .settings-text {
font-size: 18px; font-size: 18px;
color: #4a4a4a; color: #4a4a4a;
margin-bottom: 20px; margin-bottom: 10px;
} }
.settings-container { .settings-container {
@@ -115,7 +124,8 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px; margin-bottom: 3px;
margin-top: 3px;
} }
.settings-item-text { .settings-item-text {
@@ -126,8 +136,8 @@ body {
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 60px; width: 40px;
height: 34px; height: 24px;
} }
.switch input { .switch input {
@@ -150,8 +160,8 @@ body {
.slider:before { .slider:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 26px; height: 16px;
width: 26px; width: 16px;
left: 4px; left: 4px;
bottom: 4px; bottom: 4px;
background-color: white; background-color: white;
@@ -163,11 +173,11 @@ input:checked + .slider {
} }
input:checked + .slider:before { input:checked + .slider:before {
transform: translateX(26px); transform: translateX(16px);
} }
.slider.round { .slider.round {
border-radius: 34px; border-radius: 24px;
} }
.slider.round:before { .slider.round:before {

43
popup/popup.html
View File

@@ -1,59 +1,62 @@
<html> <html>
<head> <head>
<script src="/scripts/jquery.js"></script> <script src="/scripts/jquery.js"></script>
<script src="/scripts/utils.js" type="module"></script> <script src="/scripts/utils.js" type="module"></script>
<script src="/popup/popup.js" type="module"></script> <script src="/popup/popup.js" type="module"></script>
<link rel="stylesheet" href="/popup/popup.css" /> <link rel="stylesheet" href="/popup/popup.css"/>
</head> </head>
<body> <body>
<h1 class="extension-title">LeafLLM: an AI-powered Overleaf</h1> <h1 class="extension-title">LeafLLM: an AI-powered Overleaf</h1>
<div id="controls" class="form-container"> <div id="controls" class="form-container">
<div class="control"> <div class="control">
<div class="input"><span>ALT</span><span>I</span></div> <div class="input" id="shortcut-Improve"><span>ALT</span><span>I</span></div>
<div class="effect">Improve selected text.</div> <div class="effect">Improve selected text.</div>
</div> </div>
<div class="control"> <div class="control">
<div class="input"><span>ALT</span><span>C</span></div> <div class="input" id="shortcut-Complete"><span>ALT</span><span>C</span></div>
<div class="effect">Complete selected text.</div> <div class="effect">Complete selected text.</div>
</div> </div>
<div class="control"> <div class="control">
<div class="input"><span>ALT</span><span>A</span></div> <div class="input" id="shortcut-Ask"><span>ALT</span><span>A</span></div>
<div class="effect">Ask GPT.</div> <div class="effect">Ask GPT.</div>
</div> </div>
</div> </div>
<div id="settings-form" class="form-container"> <div id="settings-form" class="form-container">
<div class="settings-text">Settings</div> <div class="settings-text">Settings</div>
<div class="settings-container"> <div class="settings-container">
<div class="settings-item"> <div class="settings-item">
<div class="settings-item-text">Text Improvement</div> <div class="settings-item-text">Text Improvement</div>
<label class="switch"> <label class="switch">
<input name="text-Improve" class="settings-item-checkbox" type="checkbox" /> <input name="text-Improve" class="settings-item-checkbox" type="checkbox"/>
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
</div> </div>
<div class="settings-item"> <div class="settings-item">
<div class="settings-item-text">Text Completion</div> <div class="settings-item-text">Text Completion</div>
<label class="switch"> <label class="switch">
<input name="text-Complete" class="settings-item-checkbox" type="checkbox" /> <input name="text-Complete" class="settings-item-checkbox" type="checkbox"/>
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
</div> </div>
<div class="settings-item"> <div class="settings-item">
<div class="settings-item-text">Ask</div> <div class="settings-item-text">Ask</div>
<label class="switch"> <label class="switch">
<input name="text-Ask" class="settings-item-checkbox" type="checkbox" /> <input name="text-Ask" class="settings-item-checkbox" type="checkbox"/>
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div id="api-token-form" class="form-container"> <div id="api-token-form" class="form-container">
<div class="api-token-text"><span>API Token is </span><span class="api-token-status">not set</span></div> <div class="api-token-text"><span>API Token is </span><span class="api-token-status">not set</span></div>
<input class="api-token-input" name="api-token" placeholder="OpenAI API Token" type="text" /> <input class="api-token-input" name="api-token" placeholder="OpenAI API Token" type="text"/>
<div class="message">To get an API key, go to <a href="https://platform.openai.com/account/api-keys">https://platform.openai.com/account/api-keys</a> </div> <div class="message">To get an API key, go to <a href="https://platform.openai.com/account/api-keys">https://platform.openai.com/account/api-keys</a>
</div>
<div class="btn-container">
<button class="submit btn">Set API Token</button> <button class="submit btn">Set API Token</button>
<button class="clear btn">Reset API Token</button> <button class="clear btn">Reset API Token</button>
</div> </div>
<div id="message-box" class="message-box"></div> </div>
</body> <div id="message-box" class="message-box"></div>
</body>
</html> </html>

6
popup/popup.js
View File

@@ -27,8 +27,11 @@ async function refreshStorage() {
if (bindingFailures.length > 0) { if (bindingFailures.length > 0) {
addErrorMessage(`Could not bound the following shortcuts:\n${bindingFailures}.\nYou can set it manually at <a href="chrome://extensions/shortcuts">chrome://extensions/shortcuts</a>.`) addErrorMessage(`Could not bound the following shortcuts:\n${bindingFailures}.\nYou can set it manually at <a href="chrome://extensions/shortcuts">chrome://extensions/shortcuts</a>.`)
} }
Object.values(settings).forEach(({ key, status }) => { Object.values(settings).forEach(({ key, status, shortcut }) => {
$(`#settings-form input[name='text-${key}']:checkbox`).prop('checked', status === 'enabled') $(`#settings-form input[name='text-${key}']:checkbox`).prop('checked', status === 'enabled')
let shortcut2 = status === 'error' ? 'not set' : shortcut
console.log(`writing ${shortcut2} to shortcut-${key}`)
$(`#shortcut-${key}`).html(`<span>${shortcut2}</span>`)
}) })
}) })
} }
@@ -51,7 +54,6 @@ async function handleAPITokenSet(event) {
try { try {
chrome.storage.local.set({ openAIAPIKey }).then(refreshStorage) chrome.storage.local.set({ openAIAPIKey }).then(refreshStorage)
} catch (error) { } catch (error) {
console.log(error)
addErrorMessage('Failed to set API Token.') addErrorMessage('Failed to set API Token.')
return return
} }