CyberDocs - Cyberpunk Document Generator

A modular cyberpunk-themed markdown to HTML document generator with real-time preview and stunning visual effects.

📁 File Structure

cyberdocs/
├── README.md
├── doc
│   └── app_screenshot.png
├── index.html
├── js
│   ├── app.js
│   ├── config.js
│   └── effects.js
└── styles
    ├── animations.css
    ├── base.css
    ├── cyberpunk.css
    └── layout.css

Screenshots

🎮 Features

Core Functionality

• Real-time preview of markdown
• Split-screen interface (editor + preview)
• Keyboard shortcuts (Ctrl+B for bold, Ctrl+I for italic, Ctrl+K for code)
• Responsive design for different screen sizes

Cyberpunk Styling

• Neon color scheme (green/cyan primary, red accents)
• Glitch effects on headers
• Terminal-style code blocks
• Classified blockquotes
• Corporate data tables
• Animated scanline effect

Effects System

• Typing effects with subtle screen glitches
• Random glitch animations on headers
• Optional matrix rain effect (performance intensive)
• Hover effects with neon glows

🛠️ Customization Guide

Adding New Effects

1. Add effect configuration to js/config.js
2. Implement the effect in js/effects.js
3. Add CSS animations to styles/animations.css

Customizing Markdown Styles

Edit styles/cyberpunk.css to modify how markdown elements appear:

• Headers: .preview h1, h2, h3
• Code blocks: .preview pre
• Tables: .preview table
• Blockquotes: .preview blockquote

Adding Templates

Modify the templates object in js/app.js to add new document templates:

const templates = {
    yourTemplate: `# YOUR TEMPLATE
**Custom content here**`,
    // ... more templates
};

🎯 Usage Tips

🔧 Configuration Options

TODO: add a GUI for configuration options

🎨 Extending the Theme

Adding New Markdown Elements

1. Add CSS rules to styles/cyberpunk.css
2. Follow the existing naming pattern
3. Use CSS custom properties for colors

Creating New Effects

1. Add effect class to js/effects.js
2. Add corresponding CSS animations to styles/animations.css
3. Initialize in the main app

🚀 Future Enhancements

• Export to PDF functionality
• More document templates, like cyberpunk Red campaign notes
• Parameter menu for customizing effects

---

Ready to hack the Gibson? Start creating your cyberpunk documents!