System Requirements Document (SRD)

Project Name: sharp-trading

1. Introduction

The sharp-trading project is a multi-page educational website designed to teach trading concepts to beginners. The website will provide clear explanations, simple visuals, and a clean, modern user interface to ensure an engaging learning experience. Akira, based in Pakistan, has requested a streamlined, responsive design that prioritizes faster load times and ease of navigation.

This document outlines the updated requirements for the sharp-trading website, incorporating the user's request for performance optimization and faster load times.

2. System Overview

The sharp-trading website will consist of multiple interconnected pages, each focusing on specific trading concepts. It will be built using HTML, CSS, and JavaScript without frameworks to ensure lightweight and fast-loading pages. The website will feature a dark theme, responsive design for mobile and desktop, and consistent styling across all pages.

Key features include:

• Sticky navigation bar for seamless page transitions.
• Beginner-friendly content with simple diagrams and hover effects.
• Optimized performance for faster load times.

3. Functional Requirements

As User:

• I should be able to navigate between pages using a sticky navbar.
• I should see active page highlights in the navigation bar.
• I should be able to view a hero section on the homepage with the title "Learn Trading From Scratch."
• I should see cards on the homepage linking to each section (Candlestick, Chart Patterns, etc.).
• I should be able to learn candlestick patterns with explanations and simple diagrams.
• I should be able to learn chart patterns with descriptions and visuals.
• I should be able to understand trading concepts like support/resistance, trends, liquidity, and breakouts.
• I should be able to learn risk management techniques like stop loss, take profit, and position sizing.
• I should be able to understand indicators like Moving Average, RSI, and MACD.
• I should experience smooth scrolling and hover effects across the website.
• I should see a footer on all pages with consistent styling.

4. User Personas

1. Beginner Trader

• Description: A novice looking to understand trading basics.
• Needs: Clear explanations, simple visuals, and intuitive navigation.

2. Intermediate Trader

• Description: Someone familiar with trading but seeking to refine their knowledge.
• Needs: Detailed insights into patterns, concepts, and risk management.

3. Casual Visitor

• Description: A guest exploring trading concepts out of curiosity.
• Needs: Easy-to-digest content and visually appealing design.

5. Visuals Colors and Theme

Color Palette:

The sharp-trading website will feature a unique dark theme with the following color palette:

• Background: #121212
• Surface: #1E1E1E
• Text: #E0E0E0
• Accent: #FF6F61
• Muted Tones: #757575

This palette ensures readability, modern aesthetics, and a professional trading-focused vibe.

6. Signature Design Concept

Interactive Trading Dashboard Homepage

The homepage will feature an interactive trading dashboard design. The hero section will display a dynamic graph animation (created using CSS and JavaScript) that simulates real-time market movement. Below the hero section, clickable cards will represent each section (Candlestick Patterns, Chart Patterns, etc.), styled to resemble trading widgets.

Details:

• Graph Animation: A CSS-driven line graph that moves subtly to mimic market trends.
• Card Design: Cards will have hover effects where they "flip" to reveal a brief description of the section.
• Micro-interactions: Smooth transitions and subtle animations when scrolling or hovering over elements.
• Dark Theme Integration: The dashboard will use the accent color (#FF6F61) for highlights, ensuring visual appeal.

This design will make the homepage feel like a professional trading platform, instantly captivating visitors.

7. Non-Functional Requirements

• Performance: Pages must load within 2 seconds on standard broadband connections.
• Responsiveness: Fully functional on devices with screen widths ranging from 320px to 1920px.
• Accessibility: Ensure WCAG 2.1 compliance for color contrast and navigation.
• Code Quality: Clean, well-commented code for easy maintenance.

8. Tech Stack

Frontend:

• HTML
• CSS
• JavaScript

Backend:

• None (static website).

Tools:

• Lightweight CSS animations for visuals.
• JavaScript for interactivity (e.g., hover effects, sticky navbar).

9. Assumptions and Constraints

Assumptions:

• Users will access the website primarily from Pakistan, so the default timezone will be PKT (Pakistan Standard Time).
• The website will be hosted on a lightweight server to ensure fast load times.

Constraints:

• No frameworks or libraries (e.g., React, Bootstrap) will be used.
• Visuals must be simple and beginner-friendly.

10. Glossary

• Sticky Navbar: A navigation bar that remains fixed at the top of the page during scrolling.
• Hero Section: The prominent introductory section of a webpage.
• Hover Effects: Visual changes triggered when a user hovers their cursor over an element.
• WCAG 2.1: Web Content Accessibility Guidelines for ensuring accessibility.

This updated SRD ensures the sharp-trading website meets Akira's request for faster load times while maintaining its educational focus and engaging design.