Spaces:
Running
Running
File size: 3,169 Bytes
5f3e9f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | # 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`:
```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`:
```html
<div id="new-tool" class="tool-section">
<!-- Tool content -->
</div>
```
3. **Create JS file** `static/js/new-tool.js`:
```javascript
async function generateFromNewTool() {
// Implementation
}
```
4. **Import in** `templates/index.html`:
```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:
```css
: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
|