Boost your mindset with our free, browser-based Positive Affirmation Flashcard Auto-Rotator. Customize intervals, track progress, and practice daily mindfulness.
AI Generation Prompt
Technical Specification: Positive Affirmation Flashcard Auto-Rotator
Overview
A clean, professional, single-file browser application that provides an automated, hands-free stream of positive affirmations. The app is built for mindfulness, focusing on user experience, smooth aesthetics, and absolute privacy.
1. Technical Requirements
- Architecture: Single-file HTML/CSS/JS. No build steps.
- Storage: STRICTLY FORBIDDEN (No
localStorage,sessionStorage,cookies). All data is in-memory. - Compatibility: Must run within a sandboxed iframe environment.
- Styling: Vanilla CSS, no framework requirements. Google Fonts (e.g., 'Inter') via CDN.
2. Feature List
- Auto-Rotation Engine: Adjustable interval timer (3s, 5s, 10s, 30s) using
setInterval. - Affirmation Library: In-memory array of categories (Confidence, Health, Productivity, Resilience).
- Playback Controls: Play, Pause, Manual Next, Manual Previous, and Speed adjustment.
- Visual Indicators: Progress bar showing remaining time until next rotation.
- Responsive UI: Adapts text and card size dynamically to window width.
- No-Prompt Policy: All interaction controls are embedded in the UI (no alert/prompt boxes).
3. UI/UX Specifications
- Design Aesthetic: SaaS-inspired, minimalist, light-mode only.
- Palette:
- Background:
#f8fafc(Cool Gray 50) - Card Surface:
#ffffff(Pure White) - Primary Action:
#2563eb(Blue 600) - Text:
#1e293b(Slate 800) - Shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
- Background:
- Animations:
- Card Swap: Use
opacityandtransformCSS transitions for a "fade-in-slide-up" effect during card transitions. - Progress Bar: CSS
widthtransition for the smooth tick-down effect.
- Card Swap: Use
4. UI Layout
- Header: Simple, clean typography displaying the tool name and an info icon (opens a small modal).
- Main Content Area: Centered container with a prominent, large-font card element showing the current affirmation.
- Control Panel: Below the card, contains a cohesive horizontal group of controls: [Pause/Play], [Category Selector], [Speed Control].
- Footer/Bottom: None (strictly omitted to comply with requirements).
5. Developer Directives
- State Management: Use a simple JS object
state = { currentIdx: 0, isPlaying: true, interval: 5000 }and update the DOM directly. - Security: All links must use
rel="noopener noreferrer". - Formatting: Ensure all CSS is responsive (use percentages or relative units). Do not use fixed-width containers if possible.
- Performance: Keep the JavaScript payload extremely small. Pre-render the DOM and toggle classes for visibility.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How does the positive affirmation flashcard auto-rotator work?
This tool is a browser-based application designed to cycle through a curated list of positive affirmations at specific time intervals. Upon loading, the application initializes an in-memory array of affirmations and uses a JavaScript timer function to automatically update the content displayed on the main card UI, ensuring a hands-free mindfulness experience. Users can control the speed of the rotation through the settings panel, allowing for a personalized pace that matches their meditative needs. Whether you prefer a quick 3-second cycle for rapid positive reinforcement or a longer 30-second interval for deep reflection, the tool adapts instantly without requiring any page refreshes or server-side communication.
Is my data saved in this application?
Privacy is at the core of this tool's architecture. Because this application is designed to be fully sandboxed, it does not use cookies, localStorage, sessionStorage, or any server-side database. Your settings, session progress, and affirmation preferences exist only in the volatile memory of your current browser tab. Once you close or refresh the page, all session data is permanently cleared. This design ensures that you never have to worry about tracking, data retention, or personal information being stored, making it a completely anonymous way to practice daily affirmations.
Can I use this tool for daily mental health practice?
Yes, the Positive Affirmation Flashcard Auto-Rotator is an excellent companion for daily mental health routines. By providing consistent, positive inputs, it helps users break negative thought patterns and focus on constructive self-talk throughout the day. It can be easily integrated into a morning routine or used as a quick break during stressful work hours to help reset your focus. Since the tool does not require an internet connection once loaded and is lightweight, you can keep it open in a background tab without consuming significant system resources. It serves as a gentle, non-intrusive reminder of self-worth and positivity that requires no active management, allowing you to focus entirely on your mental wellbeing.
Does this tool work on mobile devices?
This application is built with a responsive-first approach using modern CSS Flexbox and Grid layouts. It automatically scales its elements to fit various screen sizes, from desktop monitors to tablets and smartphones, ensuring the text remains legible and the controls stay accessible regardless of your device. The UI is designed with touch-friendly touchpoints and clean typography, making it just as easy to use on a mobile device as it is on a computer. Whether you are at your desk or on the go, the auto-rotator provides a consistent, professional-grade experience that adapts fluidly to your current screen environment.
