📚 Complete Documentation

60 Seconds of Encouragement Website

← Back to Website

📑 Table of Contents

🌟 Overview

A complete website for a multilingual motivational video series with 10 uplifting scripts available in English, Portuguese, Indonesian, and Tetum.

10 Motivational Scripts

Heart-lifting, encouraging content (60-90 seconds each)

4 Languages

English, Portuguese, Indonesian, and Tetum

Production Guide

Step-by-step instructions for creating videos

Music Prompts

Ready-to-use Suno.AI prompts for background music

✨ Features

Core Functionality

  • Responsive Design - Works perfectly on desktop, tablet, and mobile
  • Interactive Features - Copy, download, and print scripts easily
  • Language Switching - Seamless switching between 4 languages
  • Smooth Animations - Fade-in effects and smooth transitions
  • Navigation - Smooth scrolling and back-to-top button
  • Keyboard Shortcuts - Quick actions via keyboard

Content Management

  • Script Organization - 10 scripts with individual pages
  • Production Guides - Comprehensive video creation tutorials
  • Music Library - Curated Suno.AI prompts for each script
  • Resource Links - Direct links to free tools and assets

User Experience

  • Clean Design - Modern gradient purple theme
  • Fast Loading - No external dependencies, pure HTML/CSS/JS
  • SEO Ready - Proper meta tags and semantic HTML
  • Print Friendly - Optimized print stylesheets

📁 File Structure

motivation-website/ ├── index.html # Main homepage ├── README.html # This documentation ├── QUICK-START.md # Quick start guide ├── css/ │ ├── styles.css # Main stylesheet │ ├── script-page.css # Script page specific styles │ └── music-page.css # Music page specific styles ├── js/ │ ├── main.js # Main JavaScript functionality │ ├── script-page.js # Script page interactions │ └── music-page.js # Music page interactions ├── scripts/ │ ├── script-01.html # The Power of Beginning │ ├── script-02.html # Seeds of Tomorrow │ ├── script-03.html # The Strength You Already Have │ ├── script-04.html # Letters from Your Future Self │ ├── script-05.html # The Lighthouse in the Storm │ ├── script-06.html # The Mosaic of Your Life │ ├── script-07.html # Permission to Grow │ ├── script-08.html # The Mountain Climber's Wisdom │ ├── script-09.html # The Garden of Kindness │ └── script-10.html # This Moment, Right Now ├── production/ │ ├── backgrounds.html # Background recommendations │ ├── animation.html # Text animation guide │ ├── canva.html # Canva template setup │ └── specs.html # Technical specifications ├── music/ │ └── suno-prompts.html # Music generation prompts └── downloads/ └── all-scripts.zip # Downloadable script bundle

🚀 Quick Start

For Local Development

  1. Download or clone this repository
  2. Open index.html in a web browser
  3. No server required - it's pure HTML/CSS/JS!

For Web Hosting

  1. Upload all files to your web server
  2. Maintain directory structure - don't change folder names
  3. Access via your domain: https://yourdomain.com

Recommended Hosting Options

GitHub Pages

Free, easy setup with Git integration

Netlify

Free with drag-and-drop deployment

Vercel

Free with automatic deployments

Traditional Hosting

cPanel, FTP, or any web host

🎨 Customization

Changing Colors

Edit css/styles.css and look for these color values:

Element Current Color Usage
Primary Color #667eea Headers, buttons, accents
Secondary Color #764ba2 Gradients, hover states
Background #f5f7fa Page backgrounds

Replace throughout the CSS file with your preferred colors.

Adding More Scripts

  1. Duplicate scripts/script-01.html
  2. Update content with new script text
  3. Update script number and title
  4. Add link to index.html in the scripts grid
  5. Create corresponding music prompt

Modifying Fonts

Current fonts are system fonts for fast loading. To use custom fonts:

1. Add Google Fonts link in <head>:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">

2. Update CSS:
body {
    font-family: 'Montserrat', sans-serif;
}

📋 Pages Overview

Home Page (index.html)

  • Series introduction
  • Overview of all 10 scripts
  • Production guide overview
  • Music section preview
  • Resources and downloads

Script Pages (scripts/script-*.html)

  • Full script text in 4 languages
  • Copy, download, and print functions
  • Production tips specific to each script
  • Navigation between scripts

Music Page (music/suno-prompts.html)

  • Complete Suno.AI prompts for all scripts
  • Alternative music generation options
  • Volume and mixing guidelines
  • Pricing information

Production Guides (production/*.html)

  • Background selection guide
  • Text animation best practices
  • Canva template setup tutorial
  • Technical specifications

💡 Usage Tips

For Teleprompter Practice

  1. Open script page
  2. Select your language
  3. Use full-screen mode (F11)
  4. Practice reading at natural pace

For Video Creation

  1. Read production guides
  2. Gather background videos
  3. Generate music with Suno.AI
  4. Follow Canva setup instructions
  5. Export and share!

For Content Creators

  • Scripts are designed for 60-90 second videos
  • Perfect for Instagram Reels, TikTok, YouTube Shorts
  • All content is original and ready to use
  • Customize as needed for your audience

🎯 Project Goals

This website serves as:

Training Tool

Teleprompter reading practice

Content Library

Ready-to-use motivational scripts

Production Guide

Complete video creation tutorial

Resource Hub

Links to tools and assets

🎬 Workflow Recommendation

  1. Day 1: Read all scripts, choose favorites
  2. Day 2: Download backgrounds, generate music
  3. Day 3: Create first template in Canva
  4. Day 4: Duplicate and customize remaining videos
  5. Day 5: Export and publish!

📊 Project Stats

10
Original Scripts
4
Languages
40
Total Videos Possible
60-90
Seconds Each
Metric Value
Word Count per Script ~150-180 words
Reading Time 60-90 seconds each
Total Word Count ~1,600 words
Pages 15+ HTML pages

🌐 Deployment Checklist

  • Test all links
  • Verify responsive design on mobile
  • Check all language versions display correctly
  • Test copy/download functions
  • Validate HTML/CSS
  • Optimize images (if any added)
  • Test on multiple browsers
  • Check loading speed
  • Set up analytics (if desired)
  • Submit sitemap to search engines

📱 Browser Compatibility

Browser Status Notes
Chrome/Edge ✅ Supported Latest version
Firefox ✅ Supported Latest version
Safari ✅ Supported Latest version
Mobile Browsers ✅ Supported iOS/Android
Internet Explorer ⚠️ Not Supported Use modern browser

🛠️ Technologies Used

HTML5

Semantic markup for better SEO

CSS3

Modern styling with Grid and Flexbox

Vanilla JavaScript

No dependencies, lightweight

Responsive Design

Mobile-first approach

🎉 Credits

Website Design & Development: Created for motivational content creators

Scripts: Original motivational content

Technical Stack: Pure HTML, CSS, and JavaScript

📄 License

Scripts and website content © 2025. Created for personal and educational use.

For commercial use of scripts, please provide attribution: "Script from 60 Seconds of Encouragement"

✨ Built with ❤️ for People Who Want to Inspire Others ✨

May these words uplift and encourage everyone who encounters them.

Start Creating →