From 75758ec7791450df7ad431730dbe6462ff331b37 Mon Sep 17 00:00:00 2001 From: dietrich ayala Date: Wed, 10 Sep 2025 23:02:21 +0200 Subject: [PATCH] style fixes, URL validation, disable default browser registration for now --- index.html | 74 +++++++++++++++++++++++++++++------------------------- main.js | 13 ++++++---- preload.js | 15 +++++++++-- styles.css | 29 ++++++++++++++++++--- 4 files changed, 87 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index b184ee0..6513f89 100644 --- a/index.html +++ b/index.html @@ -8,45 +8,51 @@ SINGULAR -
-

SINGULAR

-
-
+
+
+

SINGULAR

+
+
-
-

Open a website as an ephemeral app or install it as a standalone native app.

-

Proof of concept. Not intended for production use.

-
+
+

Open a website...

+
    +
  • in standalone window
    • +
  • as an ephemeral app
    • +
  • or install it as a standalone native app
    • +
+

Proof of concept. Not intended for production use.

+
-
-
- - -
-
- - -
-
- - - -
-
-
- (I'm the log. Do something and I'll show you what's happening!) -
-
-
-
+ +
+ + +
+
+ + +
+
+ + + +
+
+
+ (I'm the log. Do something and I'll show you what's happening!) +
+
+ +
+ +
+ Node.js , + Chromium , + Electron .
- -
- Node.js , - Chromium , - Electron .
diff --git a/main.js b/main.js index 850a714..917f763 100644 --- a/main.js +++ b/main.js @@ -10,8 +10,8 @@ import { URL } from 'url'; const appName = 'singular'; -const WIN_HEIGHT = 500; -const WIN_WIDTH = 600; +const WIN_HEIGHT = 600; +const WIN_WIDTH = 800; const DEFAULT_WEB_HEIGHT = 600; const DEFAULT_WEB_WIDTH = 800; @@ -276,7 +276,7 @@ const registerAsDefaultBrowser = () => { } }; -registerAsDefaultBrowser(); +//registerAsDefaultBrowser(); // This method will be called when Electron has finished // initialization and is ready to create browser windows. @@ -292,6 +292,7 @@ app.whenReady().then(() => { } */ + /* // We're initial process to open a URL if (app.commandLine.hasSwitch('url')) { console.log('url switch found'); @@ -306,8 +307,10 @@ app.whenReady().then(() => { openEphemeral(url); } } + else + */ // We're a temporary spawn to open a URL - else if (app.commandLine.hasSwitch('url2')) { + if (app.commandLine.hasSwitch('url2')) { // If we're opening a temporary URL then we need to // create a temporary profile for the data initTempProfile(); @@ -315,7 +318,7 @@ app.whenReady().then(() => { const url = app.commandLine.getSwitchValue('url2'); openURL(url); } - // Window for generating and installing URL as app + // Default app window else { createAppWindow(); diff --git a/preload.js b/preload.js index 8b86168..bd0b99c 100644 --- a/preload.js +++ b/preload.js @@ -65,7 +65,16 @@ const init = () => { form.addEventListener('submit', e => { e.preventDefault(); + + if (!form.checkValidity()) { + form.reportValidity(); + log('The name or URL is bad, ok.'); + return; + } + + // Inputs are good, let's roll timedSpinner(5000); + // Did they click the open button or the generate button? const clickedButton = e.submitter; if (clickedButton.classList.contains('open')) { @@ -84,14 +93,15 @@ const init = () => { ipcRenderer.on('victory', (e, msg) => { btn.disabled = false; - log('onPackageVictory', msg); + log('onVictory', msg); }); ipcRenderer.on('fail', (e, msg) => { btn.disabled = false; - log('onPackageFail', msg); + log('onFail', msg); }); + // Spin the spinner for a set period of ms const timedSpinner = (ms = 400) => { const animating = document.querySelector('.lds-grid > div').classList.contains('animating'); @@ -101,6 +111,7 @@ const init = () => { } } + // Spin the spinner when typing in inputs document.querySelectorAll('input').forEach(el => { el.addEventListener('keyup', () => { timedSpinner(400); diff --git a/styles.css b/styles.css index b18ca56..e0646a0 100644 --- a/styles.css +++ b/styles.css @@ -44,18 +44,27 @@ html { html, body { - padding: 1rem; margin: 0; + padding: 0; + padding-top: 1rem; font-family: var(--font-family); color: var(--text); background-color: var(--background); } +.container { + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* div, h1 { - /* border: solid 1px white; - */ } +*/ .header { margin: 0; @@ -77,6 +86,7 @@ h1 { } .form-container { + margin: 0; padding: 0; border-radius: 3px; max-width: 40rem; @@ -115,6 +125,18 @@ button { } /* log */ + +.log { + padding: 0.5rem; + margin: 0; + flex-grow: 2; + overflow-y: auto; + white-space: pre-wrap; + word-wrap: break-word; + background-color: var(--background); + color: var(--text); +} + details, summary { font-size: small; font-style: italic; @@ -122,6 +144,7 @@ details, summary { .footer { font-size: x-small; + min-height: 1.5rem; } .animating { -- 2.51.2