backend/static/README.md

Frontend Structure

This folder contains the modular frontend components for Screenshot Studio.

Directory Structure

static/
├── css/
│   └── styles.css          # Main stylesheet with all UI components
├── js/
│   ├── navigation.js       # Navigation, tabs, and UI controls
│   ├── text-to-image.js    # Text to Image tool functionality
│   ├── html-to-image.js    # HTML to Image tool functionality
│   └── utils.js            # Shared utility functions
└── README.md               # This file

File Descriptions

CSS

• styles.css: Contains all styles including:
  • Layout (sidebar, main content)
  • Components (buttons, forms, cards)
  • Utilities (loading, alerts, grids)
  • Responsive design

JavaScript Modules

navigation.js

• Tool switching between Text to Image and HTML to Image
• Advanced settings toggle
• Reset to defaults functionality
• HTML tab switching (paste/upload)
• File upload handler

text-to-image.js

• Handles text input processing
• Collects all settings (output, advanced)
• Makes API call to /generate endpoint
• Error handling and loading states

html-to-image.js

• Handles HTML input (paste or upload)
• Makes API call to /generate-html endpoint
• Error handling and loading states

utils.js

• displayResults(): Renders screenshot grid
• Shared utility functions
• Can be extended with more helpers

Customization Guide

Adding a New Tool

1. Add navigation item in templates/index.html:

<div class="nav-item" onclick="switchTool('new-tool')">
    <svg class="nav-icon">...</svg>
    New Tool
</div>

2. Add tool section in templates/index.html:

<div id="new-tool" class="tool-section">
    <!-- Tool content -->
</div>

3. Create JS file static/js/new-tool.js:

async function generateFromNewTool() {
    // Implementation
}

4. Import in templates/index.html:

<script src="{{ url_for('static', filename='js/new-tool.js') }}"></script>

Modifying Styles

All styles are in static/css/styles.css. The design uses CSS variables for easy theming:

:root {
    --primary: #34A853;        /* Main green color */
    --primary-dark: #2D8E47;   /* Darker green */
    --primary-light: #E8F5E9;  /* Light green background */
    --bg-white: #FFFFFF;
    --bg-gray: #F8F9FA;
    --text-primary: #202124;
    --text-secondary: #5F6368;
    --border: #DADCE0;
}

Adding New Settings

1. Add input field in the settings section
2. Collect value in generateFromText() function
3. Pass to backend in settings object
4. Handle in Flask route

Best Practices

1. Keep modules focused: Each JS file should handle one tool/feature
2. Use CSS variables: For consistent theming
3. Follow naming conventions:
   • CSS: kebab-case (.form-input)
   • JS: camelCase (generateFromText)
4. Add comments: Explain complex logic
5. Test responsiveness: Check mobile/tablet views

Dependencies

• Google Fonts (Roboto, Google Sans)
• No external JS libraries (vanilla JavaScript)
• Flask for serving static files