save point

matterofabstract · Jul 19, 2023 · c589224 · c589224
1 parent 883ad5a
commit c589224
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 15 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -4,12 +4,22 @@
   import ResizeHandle from './lib/ResizeHandle.svelte';
   import NoteDetail from './lib/NoteDetail.svelte';
   import StatusBar from './lib/StatusBar.svelte';
+
+  import { fullScreen } from './lib/store';
 </script>
 
-<main class="w-screen h-screen overflow-hidden flex flex-col">
-  <OmniBar />
-  <NoteList />
-  <ResizeHandle />
-  <NoteDetail />
-  <StatusBar />
-</main>
+<div class="h-screen w-screen flex flex-col justify-center items-center {$fullScreen ? '' : 'p-2'}">
+  {#if !$fullScreen}
+    <div style="text-align: center;">
+      <h1 style=" font-size: 40px; font-weight: 600">nvAux</h1>
+      <p style="max-width: 500px; margin-bottom: 60px;">Capture and retrieve ideas at the speed of thought with nvAux, the in-the-zone, aint-nobody-stopping-me note-taking app for creative professionals.</p>
+    </div>
+  {/if}
+  <main class="relative overflow-hidden flex flex-col" style="transition: all 0.5s ease-in-out; {$fullScreen ? 'height: 100%; width: 100%; border-color: transparent;' : 'width: 690px; min-width: 320px; height: 50%; min-height: 400px; border-color: #2d2f30; border-radius: 8px; -webkit-box-shadow: 0px 36px 69px -24px rgba(0,0,0,0.75); -moz-box-shadow: 0px 36px 69px -24px rgba(0,0,0,0.75); box-shadow: 0px 36px 69px -24px rgba(0,0,0,0.75);'} background-color: #181a1c; border: 1px solid; overflow: hidden;">
+    <OmniBar />
+    <NoteList />
+    <ResizeHandle />
+    <NoteDetail />
+    <StatusBar />
+  </main>
+</div>
diff --git a/src/lib/StatusBar.svelte b/src/lib/StatusBar.svelte
@@ -1,3 +1,30 @@
-<div class="px-2 flex items-center absolute w-full flex-grow-0" style="height: 30px; background: #181a1c; bottom: 0; left: 0; color: #606060; ">
-nvAux v0.1.5
+<script>
+  import { onMount } from 'svelte';
+  import { format } from 'date-fns';
+  import { fullScreen } from './store';
+
+  let time = new Date();
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      time = new Date();
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
+</script>
+
+<div
+  class="px-2 flex items-center absolute w-full flex-grow-0"
+  style="font-size: 12px; height: 35px; background: #181a1c; bottom: 0; left: 0; color: #606060; "
+>
+  <div class="flex-grow">nvAux v0.1.5</div>
+  <div>
+    <button on:click={() => $fullScreen = !$fullScreen} style="margin-right: 10px; color: #ed0178" class="bg-transparent">
+      [&nbsp;{$fullScreen ? '*' : ' '}&nbsp;]
+    </button>
+  </div>
+  <div>{format(time, 'hh:mm:ss a')}</div>
 </div>
diff --git a/src/lib/store.js b/src/lib/store.js
@@ -80,6 +80,7 @@ export const noteList = writable([]);
 export const noteListHeight = writable(storedNoteListHeight);
 export const selectedNote = writable({});
 export const bodyText = writable('');
+export const fullScreen = writable(false);
 
 omniText.subscribe(v => {
   if (v === '') {

diff --git a/src/lib/style.css b/src/lib/style.css
@@ -12,7 +12,7 @@ a { color: inherit; text-decoration: inherit; }
 button, input, optgroup, select, textarea { padding: 0; line-height: inherit; color: inherit; }
 pre, code, kbd, samp { font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
 
-html, body { background-color: #151618; margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 0.9rem; height: 100%; width: 100%; overflow: hidden;}
+html, body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 0.9rem; height: 100vh; width: 100vw; overflow: hidden;}
 .absolute { position: absolute; }
 .bg-gray-200 { background-color: #edf2f7; }
 .bg-gray-800 { background-color: #2d3748; }
@@ -31,7 +31,6 @@ html, body { background-color: #151618; margin: 0; padding: 0; font-family: Verd
 .h-screen {  height: 100vh; }
 .hidden { display: none; }
 .items-center { align-items: center; }
-.items-center { align-items: center; }
 .justify-between { justify-content: space-between; }
 .justify-center { justify-content: center; }
 .justify-end { justify-content: flex-end; }
@@ -61,8 +60,24 @@ html, body { background-color: #151618; margin: 0; padding: 0; font-family: Verd
 .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .w-full { width: 100%; }
 .w-screen {  width: 100vw; }
-.btn {
-  padding: 3px 10px;
-  border-radius: 3px;
-  font-size: 14px;
+.btn { padding: 3px 10px; border-radius: 3px; font-size: 14px; }
+
+
+body {
+	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+	background-size: 400% 400%;
+	animation: gradient 15s ease infinite;
+	height: 100vh;
+}
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
 }