Restructure GUI folder & modify styles.css

This commit is contained in:
Wizzard 2024-03-09 16:19:47 -05:00
parent bdf5715868
commit ee6f775b5b
8 changed files with 32 additions and 11 deletions

View File

@ -38,6 +38,16 @@ body {
background-color: #6c757d; background-color: #6c757d;
cursor: not-allowed; cursor: not-allowed;
} }
#submitApiKey {
padding: 10px 20px;
font-size: 1rem;
color: white;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}
#stopButton { #stopButton {
padding: 10px 20px; padding: 10px 20px;
font-size: 1rem; font-size: 1rem;
@ -85,6 +95,15 @@ body {
color: inherit; color: inherit;
background-color: #2c3e50; background-color: #2c3e50;
} }
#apiKeyInput {
flex-grow: 1;
padding: 10px;
border: 1px solid #34495e;
border-radius: 5px;
color: inherit;
background-color: #2c3e50;
}
#promptInput:focus { #promptInput:focus {
outline: none; outline: none;
box-shadow: 0 0 0 2px #007BFF; box-shadow: 0 0 0 2px #007BFF;

View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Kuzco Chat</title> <title>Kuzco Chat</title>
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="../css/styles.css">
</head> </head>
<body> <body>
<div id="app"> <div id="app">
@ -22,12 +22,11 @@
<footer> <footer>
<form id="chatForm" class="chat-form"> <form id="chatForm" class="chat-form">
<input id="promptInput" type="text" placeholder="Enter your prompt" autofocus> <input id="promptInput" type="text" placeholder="Enter your prompt" autofocus>
<button id="sendButton" onclick="sendPrompt()">Send</button> <button id="sendButton">Send</button>
<button id="stopButton" disabled>Stop</button> <button id="stopButton" disabled>Stop</button>
</form> </form>
</footer> </footer>
</div> </div>
<script src="../js/renderer.js"></script>
<script src="renderer.js"></script>
</body> </body>
</html> </html>

View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>Enter API Key</title> <title>Enter API Key</title>
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="../css/styles.css">
</head> </head>
<body> <body>
<h1>Enter API Key</h1> <h1>Enter API Key</h1>

View File

@ -2,21 +2,21 @@ const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const fs = require('fs'); const fs = require('fs');
const path = require('path'); const path = require('path');
const os = require('os'); const os = require('os');
const KuzcoCore = require('./kuzcoCore'); const KuzcoCore = require('./js/kuzcoCore');
function createWindow() { function createWindow() {
const mainWindow = new BrowserWindow({ const mainWindow = new BrowserWindow({
width: 800, width: 800,
height: 600, height: 600,
webPreferences: { webPreferences: {
preload: path.join(__dirname, 'preload.js'), preload: path.join(__dirname, 'js/preload.js'),
nodeIntegration: false, nodeIntegration: false,
contextIsolation: true, contextIsolation: true,
enableRemoteModule: false, enableRemoteModule: false,
}, },
}); });
mainWindow.loadFile('index.html'); mainWindow.loadFile('html/index.html');
if (!kuzcoCore.apiKeyExists()) { if (!kuzcoCore.apiKeyExists()) {
promptForApiKey(mainWindow); promptForApiKey(mainWindow);
@ -44,7 +44,7 @@ let inputWindow;
function promptForApiKey() { function promptForApiKey() {
inputWindow = new BrowserWindow({ inputWindow = new BrowserWindow({
width: 300, width: 300,
height: 200, height: 300,
webPreferences: { webPreferences: {
nodeIntegration: true, nodeIntegration: true,
contextIsolation: false, contextIsolation: false,
@ -52,7 +52,7 @@ function promptForApiKey() {
}, },
}); });
inputWindow.loadFile('prompt.html'); inputWindow.loadFile('html/prompt.html');
inputWindow.on('closed', () => { inputWindow.on('closed', () => {
inputWindow = null; inputWindow = null;
}); });

View File

@ -14,13 +14,16 @@
"dist-all": "electron-builder -mwl" "dist-all": "electron-builder -mwl"
}, },
"build": { "build": {
"appId": "com.yourname.kuzco", "appId": "com.codjointops.kuzco",
"productName": "KuzcoChat", "productName": "KuzcoChat",
"directories": { "directories": {
"output": "dist" "output": "dist"
}, },
"files": [ "files": [
"**/*", "**/*",
"css/**/*",
"js/**/*",
"html/**/*",
"!**/*.ts", "!**/*.ts",
"!*.code-workspace", "!*.code-workspace",
"!**/*.js.map", "!**/*.js.map",