Mystic Library

English

日本語

English

日本語

Appearance

Comic-style HTML Generator v1.0 ​

A prompt to convert text into HTML pages with manga-style/comic-style design. Express technical documents and explanatory texts attractively with a fun and readable design.

Instructions ​

Please convert the following text into an HTML page with a manga-style/comic-style design. Express technical documents and explanatory texts attractively with a fun and readable design.

Design Requirements ​

Overall Style ​

  • Comic/manga-style design
  • Colorful gradient background
  • Panel-style layout to separate each section
  • Speech bubble-style important boxes
  • Handwritten-style fonts recommended

Panel Design ​

  • Express each section as a comic panel
  • Thick borders (4px or more) and drop shadows
  • Colorful borders (gradients recommended)
  • Rounded corners for a friendly feel

Text Area ​

  • Highlight important information in speech bubble-style boxes
  • Keywords and commands in standout styles
  • Use numbers and emojis for step-by-step explanations
  • Dedicated boxes for warnings and success messages

Color Palette ​

  • Main color: #ff6b6b (red system)
  • Accent: #4ecdc4 (teal system)
  • Sub-colors: #45b7d1 (blue system), #96ceb4 (green system)
  • Gradients: Combinations of 2 or more colors
  • Code blocks: Black background + green text

Interactive Elements ​

  • Add movement to elements with hover effects
  • Animations to make titles stand out
  • Responsive design for mobile compatibility
  • Actively use emojis

Layout Structure ​

  1. Hero section: Large title + subtitle
  2. Table of contents: Easy-to-read navigation with emojis
  3. Content panels: Panel-divided sections
  4. Code blocks: Terminal-style
  5. Summary: Emphasize important points

Technical Requirements ​

  • Use only HTML5 + CSS3
  • Japanese fonts from Google Fonts (Noto Sans JP recommended)
  • Pure CSS animations
  • Layout with Flexbox or Grid
  • Container width limit max-width: 1000px

Content Conversion Rules ​

  • Headings → Colorful titles + emojis
  • Paragraphs → Styled with readable line spacing
  • Lists → With emojis or special styles
  • Code → Terminal-style black background boxes
  • Important information → Speech bubble-style boxes
  • Warnings/Notes → Dedicated warning boxes
  • Success/Completion → Dedicated success boxes

Output Format ​

Output as a complete HTML file including:

  • <!DOCTYPE html> declaration
  • Appropriate <head> section (meta, title, style)
  • Responsive design support
  • Active use of emojis and icons
  • Fun and readable layout

Additional Instructions ​

  • Maintain the structure and content of the original text
  • Maintain technical accuracy
  • Maximize visual appeal
  • Prioritize usability
  • Provide a fun learning experience