-
- Loading...
+
+
+
+
+ ScrollStop
+
+
+
+ ${siteName} is blocked
+
+
+
+ ${
+ isNews
+ ? "You've reached your 20-minute daily news limit"
+ : 'Take a break from scrolling and try something productive'
+ }
+
+
+
+
+
+ Loading...
+
+
+ Time remaining
+
+
-
- until you can access ${isNews ? 'news sites' : 'this site'} again
+
+
+
+
+ Better things to do right now
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- ${suggestionsHTML}
`;
+
+ // Initialize activity cards for all platforms
+ await this.initializeActivityCards();
+
+ this.createActionButtons();
+ }
+
+ /**
+ * Initialize swipeable activity cards
+ */
+ async initializeActivityCards() {
+ const container = document.getElementById('activities-container');
+ if (!container) {
+ return;
+ }
+
+ try {
+ const personalData = await this.getPersonalData();
+ const activities = this.generateActivityCards(personalData);
+
+ if (activities.length === 0) {
+ container.innerHTML = `
+
+
🎯
+
No activities available
+
+ `;
+ return;
+ }
+
+ // Create swipe cards component
+ if (!window.SwipeCards) {
+ console.error('SwipeCards not available on window');
+ container.innerHTML = `
+
+ SwipeCards component not loaded
+
+ `;
+ return;
+ }
+
+ this.swipeCards = new window.SwipeCards(activities, {
+ onSwipeRight: (activity) => this.handleActivityAccepted(activity),
+ onSwipeLeft: (activity) => this.handleActivityRejected(activity),
+ onComplete: () => this.handleAllActivitiesCompleted(),
+ });
+
+ this.swipeCards.render(container);
+ } catch (error) {
+ console.error('Error initializing activity cards:', error);
+ container.innerHTML = `
+
+ Error loading activities
+
+ `;
+ }
+ }
+
+ /**
+ * Generate activity cards from personal data
+ */
+ generateActivityCards(personalData) {
+ const activities = [];
+
+ if (!personalData.hasData) {
+ return this.getDefaultActivityCards();
+ }
+
+ // Add current tasks (highest priority)
+ if (personalData.currentTasks && personalData.currentTasks.length > 0) {
+ personalData.currentTasks.forEach((task) => {
+ activities.push({
+ emoji: '✅',
+ text: task,
+ description: 'Current task to complete',
+ category: 'current',
+ });
+ });
+ }
+
+ // Add household tasks
+ if (personalData.householdTasks && personalData.householdTasks.length > 0) {
+ personalData.householdTasks.forEach((task) => {
+ activities.push({
+ emoji: '🏠',
+ text: task,
+ description: 'Household task',
+ category: 'household',
+ });
+ });
+ }
+
+ // Add friends to contact
+ if (personalData.friends && personalData.friends.length > 0) {
+ personalData.friends.forEach((friend) => {
+ activities.push({
+ emoji: '📞',
+ text: `Call ${friend}`,
+ description: 'Connect with someone you care about',
+ category: 'social',
+ });
+ });
+ }
+
+ // Add hobbies
+ if (personalData.hobbies && personalData.hobbies.length > 0) {
+ personalData.hobbies.forEach((hobby) => {
+ activities.push({
+ emoji: '🎯',
+ text: hobby,
+ description: 'Pursue your interests',
+ category: 'hobby',
+ });
+ });
+ }
+
+ // Add books
+ if (personalData.books && personalData.books.length > 0) {
+ personalData.books.forEach((book) => {
+ activities.push({
+ emoji: '📚',
+ text: `Read "${book}"`,
+ description: 'Expand your mind',
+ category: 'reading',
+ });
+ });
+ }
+
+ // Add goals
+ if (personalData.goals && personalData.goals.length > 0) {
+ personalData.goals.forEach((goal) => {
+ activities.push({
+ emoji: '🎯',
+ text: `Work on: ${goal}`,
+ description: 'Make progress on your goals',
+ category: 'goal',
+ });
+ });
+ }
+
+ // Shuffle activities for variety
+ return this.shuffleArray(activities).slice(0, 10); // Max 10 activities
+ }
+
+ /**
+ * Get default activity cards when no personal data is available
+ */
+ getDefaultActivityCards() {
+ return [
+ {
+ emoji: '🚶♂️',
+ text: 'Take a walk outside',
+ description: 'Get some fresh air and movement',
+ },
+ {
+ emoji: '📚',
+ text: 'Read a book',
+ description: 'Engage your mind with something meaningful',
+ },
+ {
+ emoji: '🧘♀️',
+ text: 'Meditate for 5 minutes',
+ description: 'Practice mindfulness and calm your thoughts',
+ },
+ {
+ emoji: '💪',
+ text: 'Do some exercise',
+ description: 'Get your body moving and energy flowing',
+ },
+ {
+ emoji: '👥',
+ text: 'Call a friend or family member',
+ description: 'Connect with someone you care about',
+ },
+ {
+ emoji: '🎨',
+ text: 'Be creative',
+ description: 'Draw, write, or make something with your hands',
+ },
+ {
+ emoji: '🧹',
+ text: 'Tidy up your space',
+ description: 'Organize your environment for mental clarity',
+ },
+ {
+ emoji: '💧',
+ text: 'Drink some water',
+ description: 'Hydrate and take care of your body',
+ },
+ {
+ emoji: '🌱',
+ text: 'Do some stretching',
+ description: 'Release tension and improve flexibility',
+ },
+ {
+ emoji: '📝',
+ text: 'Write in a journal',
+ description: 'Reflect on your thoughts and feelings',
+ },
+ ];
+ }
+
+ /**
+ * Shuffle array for randomness
+ */
+ shuffleArray(array) {
+ const shuffled = [...array];
+ for (let i = shuffled.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+ }
+ return shuffled;
+ }
+
+ /**
+ * Handle when user swipes right (accepts) an activity
+ */
+ handleActivityAccepted(activity) {
+ console.log('Activity accepted:', activity);
+ this.selectedActivity = activity;
+ this.showActivityTimer();
+ }
+
+ /**
+ * Handle when user swipes left (rejects) an activity
+ */
+ handleActivityRejected(activity) {
+ console.log('Activity rejected:', activity);
+ // Just continue to next card
+ }
+
+ /**
+ * Handle when all activities are completed
+ */
+ handleAllActivitiesCompleted() {
+ const container = document.getElementById('activities-container');
+ if (container) {
+ container.innerHTML = `
+
+
🎉
+
+ You've seen all available activities!
+
+
+ `;
+ }
+ }
+
+ /**
+ * Show the activity timer section
+ */
+ showActivityTimer() {
+ this.currentMode = 'timer';
+
+ // Hide activities section
+ const activitiesSection = document.getElementById('activities-section');
+ if (activitiesSection) {
+ activitiesSection.style.display = 'none';
+ }
+
+ // Show timer section
+ const timerSection = document.getElementById('timer-section');
+ if (timerSection) {
+ timerSection.style.display = 'block';
+ }
+
+ // Create activity timer
+ const timerContainer = document.getElementById('timer-container');
+ if (timerContainer && this.selectedActivity) {
+ this.activityTimer = new window.ActivityTimer({
+ duration: 5 * 60 * 1000, // 5 minutes
+ onComplete: () => this.handleTimerComplete(),
+ onTick: (remaining) => this.handleTimerTick(remaining),
+ });
+
+ this.activityTimer.render(timerContainer);
+ this.activityTimer.setActivity(this.selectedActivity);
+ }
+
+ // Update action buttons
+ this.createActionButtons();
+ }
+
+ /**
+ * Handle timer completion
+ */
+ handleTimerComplete() {
+ console.log('Activity timer completed');
+ // Timer component handles the completion dialog internally
+ }
+
+ /**
+ * Handle timer tick
+ */
+ handleTimerTick(_remaining) {
+ // Optional: Update any global state or UI
+ }
+
+ /**
+ * Create action buttons based on current mode (only on iOS)
+ */
+ createActionButtons() {
+ const container = document.getElementById('action-buttons');
+ if (!container) {
+ return;
+ }
+
+ container.innerHTML = '';
+
+ // Action buttons available on all platforms now
+
+ if (this.currentMode === 'blocked') {
+ // Show "Skip Activities" button with subtle green accent
+ const skipButton = new window.HeadlessButton('Skip activities', {
+ color: 'zinc',
+ outline: true,
+ onClick: () => this.skipActivities(),
+ });
+
+ container.appendChild(skipButton.element);
+ } else if (this.currentMode === 'timer') {
+ // Show "Back to Activities" button
+ const backButton = new window.HeadlessButton('← Back to activities', {
+ color: 'zinc',
+ outline: true,
+ onClick: () => this.backToActivities(),
+ });
+
+ container.appendChild(backButton.element);
+ }
+ }
+
+ /**
+ * Skip activities and just show countdown
+ */
+ skipActivities() {
+ const activitiesSection = document.getElementById('activities-section');
+ const actionButtons = document.getElementById('action-buttons');
+
+ if (activitiesSection) {
+ activitiesSection.style.display = 'none';
+ }
+ if (actionButtons) {
+ actionButtons.style.display = 'none';
+ }
+ }
+
+ /**
+ * Go back to activities from timer
+ */
+ backToActivities() {
+ this.currentMode = 'blocked';
+
+ // Clean up timer
+ if (this.activityTimer) {
+ this.activityTimer.destroy();
+ this.activityTimer = null;
+ }
+
+ // Hide timer section
+ const timerSection = document.getElementById('timer-section');
+ if (timerSection) {
+ timerSection.style.display = 'none';
+ }
+
+ // Show activities section
+ const activitiesSection = document.getElementById('activities-section');
+ if (activitiesSection) {
+ activitiesSection.style.display = 'block';
+ }
+
+ // Update action buttons
+ this.createActionButtons();
}
/**
@@ -414,10 +889,26 @@ if (typeof window.BlockingScreen === 'undefined') {
cleanup() {
this.stopCountdownUpdates();
+ // Clean up swipe cards
+ if (this.swipeCards) {
+ this.swipeCards.destroy();
+ this.swipeCards = null;
+ }
+
+ // Clean up activity timer
+ if (this.activityTimer) {
+ this.activityTimer.destroy();
+ this.activityTimer = null;
+ }
+
if (this.blockingElement && this.blockingElement.parentNode) {
this.blockingElement.parentNode.removeChild(this.blockingElement);
this.blockingElement = null;
}
+
+ // Reset state
+ this.currentMode = 'blocked';
+ this.selectedActivity = null;
}
/**
diff --git a/Shared (Extension)/Resources/modules/choice-dialog/choice-dialog.js b/Shared (Extension)/Resources/modules/choice-dialog/choice-dialog.js
index 4044d62..acf9496 100644
--- a/Shared (Extension)/Resources/modules/choice-dialog/choice-dialog.js
+++ b/Shared (Extension)/Resources/modules/choice-dialog/choice-dialog.js
@@ -77,34 +77,48 @@ class ChoiceDialog {
// Create dialog body (empty, no subtitle)
const body = new HeadlessDialogBody();
- // Create action buttons using HeadlessButton default styling
+ // Create action buttons using HeadlessButton with better visibility
const continueBtn = new HeadlessButton('Continue with ScrollStop', {
- color: 'blue',
+ color: 'green',
onClick: () => this.handleChoice('continue', resolve),
});
- const timerOnlyBtn = new HeadlessButton('Timer Only', {
+ const bypassBtn = new HeadlessButton('Continue without ScrollStop', {
color: 'zinc',
outline: true,
- onClick: () => this.handleChoice('timer-only', resolve),
+ onClick: () => this.handleChoice('bypass', resolve),
});
const blockBtn = new HeadlessButton('Block Now', {
color: 'red',
- outline: true,
onClick: () => this.handleChoice('block', resolve),
});
+ const configureBtn = new HeadlessButton('Configure Activities', {
+ color: 'dark',
+ onClick: () => this.handleChoice('configure', resolve),
+ });
+
console.log('ChoiceDialog: Buttons created, assembling content...');
- // Create simple button container without descriptions
+ // Create button container with divider structure
const buttonContainer = document.createElement('div');
buttonContainer.className = 'space-y-3';
+ // Main actions (above divider)
buttonContainer.appendChild(continueBtn.element);
- buttonContainer.appendChild(timerOnlyBtn.element);
+ buttonContainer.appendChild(bypassBtn.element);
buttonContainer.appendChild(blockBtn.element);
+ // Add divider
+ if (window.HeadlessDivider) {
+ const divider = new window.HeadlessDivider({ soft: true });
+ divider.render(buttonContainer);
+ }
+
+ // Configuration action (below divider)
+ buttonContainer.appendChild(configureBtn.element);
+
console.log('ChoiceDialog: Adding content to dialog panel...');
// Add all content to dialog panel manually to avoid render issues
@@ -231,7 +245,40 @@ class ChoiceDialog {
appearance: none !important;
-webkit-appearance: none !important;
">Continue with ScrollStop
-
+
+ ">Configure Activities
-
ScrollStop - Blocked Sites
+
ScrollStop
-
+
+
+
+
+