No-code AI-partner for launching your ideas | Hostinger Horizons
Create a modern task manager web application with the following specifications:
Design Style:
Dark theme with black/charcoal background (#1a1a1a or similar)
Clean, minimalist interface inspired by fitness tracker apps
Rounded corners and soft shadows for cards/containers
Orange accent color (#ff4500 or similar) for highlights and progress indicators
White text on dark backgrounds for high contrast
Modern typography with clean, sans-serif fonts
Core Features:
Three main task categories: "Now", "Next", and "Later"
Each category displayed as a separate card/section
Add new tasks with a simple input field
Mark tasks as complete with checkboxes
Delete tasks option
Drag and drop functionality to move tasks between categories
Task counter for each category
Progress bar showing completion percentage
Dedicated completed tasks section that automatically collects finished tasks
Completed tasks are moved out of active categories upon completion
Collapsible completed tasks section with restore and permanent delete options
Layout:
Mobile-first responsive design
Card-based layout similar to the fitness tracker interface
Clean spacing and padding
Subtle animations for interactions (hover effects, task completion)
Visual hierarchy with larger text for important elements
Functionality:
Local storage to persist tasks between sessions
Smooth transitions when adding/removing tasks
Visual feedback for user actions
Completed tasks stored separately from active tasks
Ability to restore completed tasks back to their original category
Permanent deletion option for completed tasks
Optional: Simple statistics showing tasks completed today
Additional UI Elements:
Floating action button for quick task addition
Subtle gradient backgrounds for category cards
Icons for different task types (optional)
Time/date stamps for task creation
Expandable completed tasks section with completion timestamps
Restore and delete buttons for completed tasks
Task Management Flow:
Tasks start in one of the three active categories (Now, Next, Later)
When marked complete, tasks automatically move to the completed section
Completed tasks can be restored to their original category
Completed tasks can be permanently deleted
Active task counters only show incomplete tasks
Make the interface feel premium and polished, similar to modern fitness and productivity apps, with smooth interactions and a focus on usability. The completed tasks section should feel integrated but separate from the active workflow.
Create a Pomodoro Timer Web App
Build a modern, minimalist Pomodoro timer application with the following specifications:
Design Requirements:
Clean, circular timer interface with a white background and subtle gray outer ring
Large, bold digital time display (MM:SS format) in the center using a modern sans-serif font
Thin orange/red progress ring that fills clockwise as time progresses
Small loading/working indicator icon above the timer
Day abbreviation display below the timer (e.g., "TUE 17")
Soft gray background with subtle shadows for depth
Mobile-responsive design that works on all screen sizes
Functionality:
Standard Pomodoro intervals: 25-minute work sessions, 5-minute short breaks, 15-minute long breaks
Play/pause/reset controls
Audio notification when sessions complete
Session counter to track completed pomodoros
Automatic transition between work and break periods (with user confirmation)
Settings panel to customize work/break durations
Local storage to persist settings and session data
Technical Features:
Smooth animation for the progress ring
Clean, intuitive button controls
Keyboard shortcuts (spacebar for play/pause, R for reset)
Browser notification support
Timer continues running even when tab is inactive
Color Scheme:
Primary: Clean white (#FFFFFF)
Progress ring: Orange-red gradient (#FF6B35 to #F7931E)
Text: Dark charcoal (#2C2C2C)
Background: Light gray (#F5F5F5)
Accents: Medium gray (#888888)
Make it feel premium and focused, perfect for productivity sessions.
Create a high-quality, minimalist “One Line a Day” journal web app.
Core rules
• One entry per user per calendar day, max 250 characters.
• Live character counter counts down from 250.
• Date auto-assigned and locked.
• Entries saved instantly with optimistic UI feedback.
Tag system
• Users can create, edit, delete, and assign unlimited custom tags to any entry.
• Autofill tag suggestions appear from a sorted list of past tags.
• Tags display as rounded pills in subtle grayscale shades (#f2f2f2 to #d9d9d9) to fit the monochrome theme.
• Clicking a tag filters the feed; a multi-select dropdown lets users filter by several tags at once.
Views
1. Timeline list (default): reverse-chronological cards with date, text, and tags.
2. Calendar grid: hover or tap a date to view its single line; empty days show a faint plus icon for quick entry.
3. Tag explorer: a draggable kanban-style view grouping entries by tag for visual clustering.
Design language
• Notion-inspired monochrome palette:
- Background: #fafafa.
- Cards: pure white with 4 px radius and 1 px #e5e5e5 outline.
- Primary text: #000000 at 16 px/24 px Inter.
- Secondary text and meta UI: #666666.
- Primary buttons: #000000 background, white text, 6 px radius, 12 px vertical padding.
- Accent states (hover, active): 90 % black.
• Smooth 200 ms ease-out transitions on hover, focus, and modal open.
• Subtle card shadow (0 4 8 0 rgba(0,0,0,0.04)) on hover only.
• Motion-safe: reduce animation for users with prefers-reduced-motion enabled.
UX details
• Quick-add modal opens on plus button or empty calendar cell; autofocuses the text field.
• Character counter turns red at 25 remaining characters, shakes on overflow, and blocks Save.
• Toast notification confirms saves and edits.
• Inline edit: click text to swap card view for an input field with Save/Cancel.
• Empty states include friendly illustrations in grayscale.
Tech notes
• Use React with functional components and hooks.
• State management via Zustand or lightweight context.
• Styled with Tailwind CSS and CSS variables for easy theme tweaks.
• Persist data with Supabase (public schema: entries, tags, entry_tags).
• Responsive: single column below 640 px, two columns at 640-1024 px, three columns above 1024 px.
• Lighthouse targets: performance 90+, accessibility 100, best practices 100, SEO 90+.
Onboarding
• First-time users see a three-step tooltip tour: add entry, create tag, filter view.
• Demo content seeds an optional sandbox mode so users can explore the UI before signing up.
Deliverable
• Deploy on Hostinger Horizons with auto-scaling.
• Include favicon, manifest for PWA install, and offline fallback page showing cached entries.
Meal Planner Web App – Hostinger Horizons
OVERVIEW
Build a minimalist Apple-style web app that generates a weekly meal plan (7 recipes) through a single server-side OpenAI API key. Users pick a diet and allergies, view seven recipes (title, ingredients list, instructions list), and save favorites to their personal library.
BACK-END
• Store OPENAI_API_KEY securely as an environment variable.
• POST /generatePlan accepts {diet, allergies}.
• Call OpenAI Chat Completion with temperature 0.7 and this system prompt:
“Generate exactly seven distinct recipes that fit the {{diet}} diet and exclude all {{allergies}}. Return JSON: title, ingredients (array), instructions (array).”
• Return {week:[…7 recipes…]}.
FRONT-END
1. Landing screen:
– Diet segmented control: Standard, Keto, Paleo, Vegan, Vegetarian, Mediterranean, Low-Carb.
– Allergy multi-select chips (preloaded common allergens + free-text).
– Generate Plan button.
2. Upon success, render seven recipe cards:
– Title
– Collapsible Ingredients (bullets)
– Collapsible Instructions (numbers)
– “Save” icon.
3. Saved Recipes tab: shows user library with Remove and Copy Ingredients.
DATA
• Supabase: tables auth.users and recipes {id, userId, json}. RLS on userId.
DESIGN GUIDELINES
Strict color palette – use only these hex values, no others:
#FFFFFF background
#1C1C1E primary text
#007AFF accent (buttons, links, active chips)
#F2F2F7 surfaces/cards
#E5E5EA separators/borders
COMPONENT STYLING
• Font: Inter/SF Pro, 16 px base, 28 px H1.
• Buttons: filled #007AFF, white text, 4 px radius, shadow rgba(0,0,0,0.06).
• Cards: max-width 600 px, 20 px radius, 1 px border #E5E5EA, padding 24 px.
• Layout: center container, max-width 1200 px, 24 px gutters, responsive.
• Interactions: 250 ms ease-in-out for expand/collapse and save.
UX EXTRAS
• Modal on first visit requests email sign-in (Supabase magic link).
• Spinner overlay during generation.
• Toast errors on API failure.
• Rate-limit /generatePlan to one call per minute per IP.
Build a minimalist, publicly viewable Linktree-style page. All content will be edited directly inside Hostinger Horizons; no on-page editing UI is needed.
COLOR PALETTE
- Background: #1E1E1E
- Card / dark input / dark button: #2A2A2A
- Border & hover outline: #444444
- Primary text: #FFFFFF
- Secondary text: #B0B0B0
- White button: #FFFFFF text #000000
Do not use any other colors.
LAYOUT
1. Canvas: full-width #1E1E1E, max-width 480 px, auto-center, 24 px side padding on screens <540 px.
2. Profile photo: 120 px circle, centered, 24 px top margin (gray placeholder if missing).
3. Heading: “John Smith” — Inter 40 px weight 600, #FFFFFF, centered, 8 px line spacing.
4. Email capture block (48 px below heading, above links):
• Caption “Sign up for early access” — 14 px #B0B0B0, centered.
• Inline form:
– Input 320 px × 48 px, background #2A2A2A, 12 px radius, 14 px #B0B0B0 placeholder “[email protected]”.
– Submit button 120 px × 48 px, background #FFFFFF, text #000000, 12 px radius.
– Hover: button background #B0B0B0, text #1E1E1E.
• On submit: validate email, store in Supabase table `newsletter_signups`, clear input, display 14 px #B0B0B0 success text.
5. Links section (32 px below email block): vertical stack of link cards preset to YouTube, Instagram, and Substack.
Card spec (no icons):
- Height 64 px, full width, background #2A2A2A, 12 px radius, 20 px horizontal padding, 16 px gap between cards.
- Left: title 16 px #FFFFFF bold (e.g., “YouTube”).
- Subtitle below title: 14 px #B0B0B0 (editable blurb).
- Right: action button 90 px × 32 px, transparent, 1 px #444444 border, 6 px radius, uppercase #B0B0B0 text “Visit”.
- Hover: outline #444444 around card; button border and text shift to #FFFFFF.
6. Optional footer: 12 px #B0B0B0 centered.
BEHAVIOR & ANIMATION
- Smooth 200 ms ease transitions on card and button hover.
- Page fully responsive; touch behaves like pointer.
DATA & INTEGRATIONS
- Supabase tables:
• `links` (id, title, subtitle, url, order).
• `newsletter_signups` (email, inserted_at).
- Page fetches `links` on load and renders in stored order.
- All content edits happen through Hostinger Horizons editor or direct Supabase updates; no client-side editing controls.
DELIVERABLES
Production-ready HTML, CSS, and lightweight JS (Supabase SDK) implementing this spec, ready for deployment on Hostinger Horizons.