styling updates

Author: lnsy-dev

index.css

@@ -25,14 +25,12 @@ body {
   text-align: center;
   padding: 2rem;
   min-height: 80vh;
-  max-width: 800px;
   width: 100%;
 }
 
 .logo-container svg {
-  width: 120px;
+  width: 335px;
   height: auto;
-  margin-bottom: 2rem;
   animation: logoFloat 3s ease-in-out infinite;
 }
 
@@ -73,7 +71,6 @@ body {
   font-family: var(--font-family-primary);
   font-size: var(--h2-font-size);
   color: var(--primary-color);
-  margin-bottom: 2rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   animation: bounceIn 0.8s ease-out;
@@ -168,28 +165,25 @@ body {
 
 .session-counter {
   font-size: 1.2rem;
+  font-family: var(--font-family-secondary);
   color: var(--secondary-color);
-  margin-bottom: 3rem;
 }
 
 .timer-display {
   font-family: var(--font-family-primary);
   font-size: var(--timer-font-size);
   color: var(--secondary-color);
-  margin: 2rem 0;
   font-weight: normal;
 }
 
 .goal-display {
   font-family: var(--font-family-primary);
-  font-size: 2rem;
+  font-size: 4rem;
   color: var(--primary-color);
-  margin: 2rem 0;
   padding: 1rem;
   border: 2px solid var(--primary-color);
   border-radius: 8px;
   background-color: rgba(248, 153, 57, 0.1);
-  max-width: 600px;
   text-transform: uppercase;
   letter-spacing: 1px;
 }
@@ -206,7 +200,7 @@ body {
   transition: all 0.3s ease;
   text-transform: uppercase;
   letter-spacing: 1px;
-  margin-top: 2rem;
+  margin-bottom: 1em;
 }
 
 .start-button:hover {
@@ -230,7 +224,6 @@ body {
   border-radius: 8px;
   width: 100%;
   max-width: 500px;
-  margin-bottom: 2rem;
   text-align: center;
   background-color: var(--background-color);
   color: var(--secondary-color);
@@ -244,7 +237,6 @@ body {
 .timer-controls {
   display: flex;
   gap: 1rem;
-  margin-top: 2rem;
   flex-wrap: wrap;
   justify-content: center;
 }
@@ -287,12 +279,12 @@ body {
 .video-container {
   margin: 2rem 0;
   width: 100%;
-  max-width: 560px;
+  width: 1080px;
+  height: 720px;
 }
 
 .youtube-player {
   width: 100%;
-  height: 315px;
   border-radius: 8px;
 }
 

src/pomodoro-timer.js

@@ -53,14 +53,9 @@ class PomodoroTimer extends DataroomElement {
     // Title
     const title = document.createElement('h1');
     title.className = 'main-title';
-    title.textContent = 'Pomodoro Timer';
+    title.textContent = 'CrashPomodoro';
     container.appendChild(title);
 
-    // Session counter
-    const counter = document.createElement('div');
-    counter.className = 'session-counter';
-    counter.textContent = `Sessions Completed: ${this.sessionCount}`;
-    container.appendChild(counter);
 
     // Start button
     const startButton = document.createElement('button');
@@ -71,6 +66,13 @@ class PomodoroTimer extends DataroomElement {
       this.startPomodoroSession();
     });
     container.appendChild(startButton);
+
+
+    // Session counter
+    const counter = document.createElement('div');
+    counter.className = 'session-counter';
+    counter.textContent = `Sessions Completed: ${this.sessionCount} of 12`;
+    container.appendChild(counter);
 
     console.log('Start screen rendered');
   }
@@ -104,23 +106,21 @@ class PomodoroTimer extends DataroomElement {
     title.textContent = 'Set Our Goal!';
     container.appendChild(title);
 
-    const timer = document.createElement('div');
-    timer.className = 'timer-display';
-    timer.textContent = this.formatTime(this.timeRemaining);
-    container.appendChild(timer);
-
-    const label = document.createElement('label');
-    label.className = 'goal-label';
-    label.textContent = 'What is our goal?';
-    container.appendChild(label);
-
     const input = document.createElement('input');
     input.type = 'text';
     input.className = 'goal-input';
     input.placeholder = 'Enter your goal for this session...';
     input.addEventListener('input', (e) => this.currentGoal = e.target.value);
     container.appendChild(input);
 
+
+    const timer = document.createElement('div');
+    timer.className = 'timer-display';
+    timer.textContent = this.formatTime(this.timeRemaining);
+    container.appendChild(timer);
+
+ 
+
     this.renderTimerControls(container);
     setTimeout(() => input.focus(), 100);
   }
@@ -141,10 +141,6 @@ class PomodoroTimer extends DataroomElement {
       .then(svgContent => logoContainer.innerHTML = svgContent)
       .catch(() => logoContainer.innerHTML = '<div class="logo-placeholder">⚡</div>');
 
-    const title = document.createElement('h2');
-    title.className = 'phase-title';
-    title.textContent = 'Deep Work';
-    container.appendChild(title);
 
     if (this.currentGoal) {
       const goal = document.createElement('div');
@@ -166,31 +162,17 @@ class PomodoroTimer extends DataroomElement {
     const container = document.createElement('div');
     container.className = 'pomodoro-container relaxation-screen';
     this.appendChild(container);
-
-    // Add logo
-    const logoContainer = document.createElement('div');
-    logoContainer.className = 'logo-container';
-    container.appendChild(logoContainer);
 
-    fetch('./logo.svg')
-      .then(response => response.text())
-      .then(svgContent => logoContainer.innerHTML = svgContent)
-      .catch(() => logoContainer.innerHTML = '<div class="logo-placeholder">⚡</div>');
-
-    const title = document.createElement('h2');
-    title.className = 'phase-title';
-    title.textContent = 'Relax!';
-    container.appendChild(title);
+    const videoContainer = document.createElement('div');
+    videoContainer.className = 'video-container';
+    container.appendChild(videoContainer);
+    this.loadRandomVideo(videoContainer);
 
     const timer = document.createElement('div');
     timer.className = 'timer-display';
     timer.textContent = this.formatTime(this.timeRemaining);
     container.appendChild(timer);
-    
-    const videoContainer = document.createElement('div');
-    videoContainer.className = 'video-container';
-    container.appendChild(videoContainer);
-    this.loadRandomVideo(videoContainer);
+
 
     this.renderTimerControls(container);
   }
@@ -210,8 +192,8 @@ class PomodoroTimer extends DataroomElement {
 
     const iframe = document.createElement('iframe');
     iframe.src = `https://www.youtube.com/embed/videoseries?list=${playlistId}&autoplay=1&mute=1&controls=1&loop=1`;
-    iframe.width = '560';
-    iframe.height = '315';
+    iframe.width = '1080';
+    iframe.height = '720';
     iframe.frameBorder = '0';
     iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
     iframe.allowFullscreen = true;

styles/variables.css

@@ -29,9 +29,9 @@
   --text-light: #ffffff;
   --text-dark: #221e1f;
   --font-family-primary: 'League Gothic', Arial, sans-serif;
-  --font-family-secondary: Arial, sans-serif;
+  --font-family-secondary: 'League Gothic', Arial, sans-serif;
   --h1-font-size: 4rem;
-  --h2-font-size: 3rem;
+  --h2-font-size: 2rem;
   --timer-font-size: 6rem;
   --button-font-size: 1.5rem;
 }