garnet-bouquet

bymayayyaa

build a birthday website with many pages that change when you click on buttons that have a different place for a bouquet, a page for a letter, a page for pictures where i can insert my own with different designs like polaroid and photo strips from a photobooth, a page for music and the home page has a cake where you can blow out the candles for a person turning 30, her name is bibi and the theme is elegant with tones of browns and creamy whites, add some lace and deer prints

HomeLetter
Home

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 4

System Requirements Document (SRD)

Project Name: Garnet-Bouquet

1. Introduction

The Garnet-Bouquet project is a personalized birthday website designed to celebrate Bibi's 30th birthday in an elegant and interactive way. The website will feature multiple pages tailored specifically for Bibi, with interactive elements that reflect her personality and milestone. The theme incorporates tones of browns and creamy whites, lace accents, and deer prints to create a warm, timeless aesthetic.

This document outlines the system requirements for the Garnet-Bouquet project, ensuring that the functionality and design are dedicated to providing Bibi with a unique and memorable experience.

2. System Overview

The Garnet-Bouquet website is a multi-page interactive platform designed for Bibi. It will include the following key features:

  • A Home Page with an interactive cake where Bibi can blow out candles through her screen.
  • A Bouquet Page where Bibi can arrange a bouquet.
  • A Letter Page for a heartfelt message.
  • A Photos Page with customizable photo designs like polaroids and photo strips.
  • A Music Page with curated music selections.

The system will prioritize user-friendly interactions and elegant design elements to ensure the experience feels personal and celebratory.

3. Functional Requirements

Story Points:

  • As Bibi, I should be able to blow out the candles on a virtual cake on the home page by blowing through my screen.
  • As Bibi, I should be able to arrange a bouquet on a dedicated bouquet page.
  • As Bibi, I should be able to read a heartfelt letter on the letter page.
  • As Bibi, I should be able to upload my own pictures and customize them with designs like polaroids and photo strips.
  • As Bibi, I should be able to listen to curated music on the music page.
  • As Bibi, I should be able to manually trigger a selective re-run capability to regenerate specific SRD sections.

4. User Personas

Page 2 of 4

Primary Persona:

Bibi

  • Age: 30
  • Role: The sole user and recipient of the website.
  • Goals: To interact with the website’s features in a way that feels personal, elegant, and celebratory.
  • Needs: A seamless, intuitive experience that allows her to engage with each page’s functionality effortlessly.

5. Visuals Colors and Theme

Color Palette:

The Garnet-Bouquet website will feature a unique color palette inspired by the elegant theme of browns, creamy whites, lace accents, and deer prints:

  • Background: #F5EFE6 (Creamy White)
  • Surface: #D9C5B2 (Soft Brown)
  • Text: #5C4033 (Rich Chocolate Brown)
  • Accent: #A67B5B (Warm Copper)
  • Muted Tones: #EDE3D9 (Light Beige)

Theme Elements:

  • Lace patterns subtly integrated into borders and backgrounds.
  • Deer prints used as decorative motifs across pages.
  • Elegant typography with serif fonts for headings and clean sans-serif fonts for body text.
Page 3 of 4

6. Signature Design Concept

Interactive Candle-Blowing Home Page

The home page will feature a visually stunning, interactive birthday cake designed for Bibi. The cake will have a few elegant candles arranged in a timeless design. The candles will flicker gently with animated flames.

Bibi will be able to blow out the candles through her screen using microphone input. When she blows into her device, the flames will flicker and extinguish with a puff of smoke animation and a soft sound effect.

Once all the candles are blown out, a celebratory animation will play, featuring confetti, deer silhouettes gracefully bounding across the screen, and a heartfelt birthday message: "Happy 30th Birthday, Bibi!"

Additional Features:

  • The cake design will incorporate lace patterns and elegant brown-and-white tones.
  • Micro-interactions such as hovering over the cake will reveal subtle glowing effects.
  • The transition to other pages will include smooth animations, such as fading lace borders or deer motifs moving across the screen.

This bold, unforgettable design will set the tone for the rest of the website and make the first impression truly magical.

7. Non-Functional Requirements

  • Performance: The website should load within 3 seconds on standard broadband connections.
  • Accessibility: Ensure compliance with WCAG 2.1 standards for accessibility.
  • Responsiveness: The website must be fully responsive and optimized for both desktop and mobile devices.
  • Localization: Default timezone set to UAE (GMT+4).
  • Selective Re-run Capability: The system must allow users to manually trigger regeneration of specific SRD sections without affecting the entire document.

8. Tech Stack

Frontend:

  • React for Web

Backend:

  • Python
  • FastAPI
Page 4 of 4

Database:

  • MySQL (with Alembic for migrations)

AI Models:

  • GPT 5.4 for user-friendly responses

AI Tools:

  • Langchain

Local Orchestration:

  • Docker
  • docker-compose

Server-Side Orchestration:

  • Kubernetes

9. Assumptions and Constraints

  • The website will be used primarily by Bibi, with no additional guest features required.
  • The design must align with the elegant theme specified by the user.
  • The website will not include social sharing or guestbook functionality.
  • Hosting will be optimized for UAE-based servers to ensure minimal latency.
  • Microphone input for the candle-blowing feature must be supported by the user’s device.

10. Glossary

  • Interactive Cake: A virtual birthday cake with candles that can be "blown out" by the user through microphone input.
  • Bouquet Page: A page where the user can arrange flowers virtually.
  • Polaroid Design: A photo style resembling instant film prints.
  • Photo Strip: A design mimicking photobooth-style strips of images.
  • Selective Re-run Capability: A feature allowing users to regenerate specific sections of the SRD without affecting the entire document.
  • WCAG 2.1: Web Content Accessibility Guidelines, version 2.1.

End of Document.

Home design preview
Home: Blow Out Candles
Home: View Celebration
Bouquet: Arrange Flowers
Letter: Read Message
Photos: Upload Pictures
Photos: Customize Design
Music: Listen to Songs