Update project name

package-lock.json

@@ -1,11 +1,11 @@
 {
-	"name": "svelte",
+	"name": "BreakOften",
 	"version": "0.0.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "svelte",
+			"name": "BreakOften",
 			"version": "0.0.1",
 			"dependencies": {
 				"svelte-sound": "^0.6.0"

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "svelte",
+	"name": "BreakOften",
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {

src/routes/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<!-- <script context="module">
     export async function load() {
         const res = await fetch("https://api.example.com/data");
         const data = await res.json();
@@ -8,19 +8,17 @@
             },
         };
     }
-</script>
+</script> -->
 
 <script>
-    export let data;
-
     import { goto } from "$app/navigation";
-    import { writable } from "svelte/store";
+    // import { writable } from "svelte/store";
 
     const startApp = () => {
         goto("/timer");
     };
 
-    const theme = writable("dark");
+    // const theme = writable("dark");
 </script>
 
 <main>

src/routes/timer/+page.svelte

@@ -16,7 +16,7 @@
   import type { Writable } from "svelte/store";
   import { Sound } from "svelte-sound";
   import click_mp4 from "../../assets/Bells.mp3";
-  
+
   const MINI_BREAK_DURATION = 0.15 * 60 * 1000; // 1 minutes
   // const MINI_BREAK_DURATION = 20 * 60 * 1000; // 20 minutes
   const MINI_BREAK_INTERVAL = 5 * 1000; // 20 seconds
@@ -32,11 +32,11 @@
   };
 
   const showNotification = (title: string, options: NotificationOptions) => {
-    if (Notification.permission === 'granted') {
+    if (Notification.permission === "granted") {
       // new Notification(title, options);
-    } else if (Notification.permission !== 'denied') {
+    } else if (Notification.permission !== "denied") {
-      Notification.requestPermission().then(permission => {
+      Notification.requestPermission().then((permission) => {
-        if (permission === 'granted') {
+        if (permission === "granted") {
           // new Notification(title, options);
         }
       });
@@ -58,7 +58,7 @@
             state.set("Ready");
             miniBreakCount++;
             timeLeftDisplay.set(formatTime(MINI_BREAK_DURATION));
-            showNotification('Ready', { body: 'Continue working!' });
+            showNotification("Ready", { body: "Continue working!" });
             playSound(); // Adjust volume as needed
             return MINI_BREAK_DURATION;
           }
@@ -66,14 +66,18 @@
             state.set("Long Break");
             miniBreakCount = 0;
             timeLeftDisplay.set(formatTime(LONG_BREAK_DURATION));
-            showNotification('Long Break', { body: 'Take a 5-minute break now!' });
+            showNotification("Long Break", {
+              body: "Take a 5-minute break now!",
+            });
             playSound(); // Adjust volume as needed
             return LONG_BREAK_DURATION;
           } else {
             state.set("Mini Break");
             // miniBreakCount++;
             timeLeftDisplay.set(formatTime(MINI_BREAK_INTERVAL));
-            showNotification('Mini Break', { body: 'Take a 20-second break now!' });
+            showNotification("Mini Break", {
+              body: "Take a 20-second break now!",
+            });
             playSound(); // Adjust volume as needed
             return MINI_BREAK_INTERVAL;
           }
@@ -125,7 +129,9 @@
 
 <main class="min-h-screen flex items-center justify-center bg-gray-100">
   <div class="max-w-md p-6 bg-white rounded-md shadow-md">
-    <h1 class="text-3xl mb-4 font-bold text-center">Prevent Computer Vision Syndrome</h1>
+    <h1 class="text-3xl mb-4 font-bold text-center">
+      Prevent Computer Vision Syndrome
+    </h1>
     <p>{$state}</p>
     {#if $state !== "Ready"}
       <p>Time left until Ready: {$timeLeftDisplay}</p>
@@ -133,7 +139,10 @@
       <p>Time left until break: {$timeLeftDisplay}</p>
     {/if}
     {#if $state !== "Ready"}
-      <button class="px-4 py-2 bg-blue-500 text-white rounded-md shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" on:click={skipBreak}>Skip Break</button>
+      <button
+        class="px-4 py-2 bg-blue-500 text-white rounded-md shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        on:click={skipBreak}>Skip Break</button
+      >
     {/if}
   </div>
 </main>