Initial commit: TypoGenie - Markdown to Word document converter
This commit is contained in:
TypoGenie
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
165
App.tsx
Normal file
165
App.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AppState, PaperSize } from './types';
|
||||
import { FileUpload } from './components/FileUpload';
|
||||
import { StyleSelector } from './components/StyleSelector';
|
||||
import { Preview } from './components/Preview';
|
||||
// @ts-ignore
|
||||
import { parse } from 'marked';
|
||||
import { Sparkles, Loader2, FileType } from 'lucide-react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [appState, setAppState] = useState<AppState>(AppState.UPLOAD);
|
||||
const [content, setContent] = useState<string>('');
|
||||
const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
|
||||
const [paperSize, setPaperSize] = useState<PaperSize>('Letter');
|
||||
const [generatedHtml, setGeneratedHtml] = useState<string>('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleFileLoaded = (text: string) => {
|
||||
setContent(text);
|
||||
setAppState(AppState.CONFIG);
|
||||
};
|
||||
|
||||
const handleGenerate = async () => {
|
||||
if (!selectedStyle || !content) return;
|
||||
|
||||
setAppState(AppState.GENERATING);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Small artificial delay to show the "Processing" state for better UX,
|
||||
// otherwise it flickers too fast since local parsing is instant.
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
|
||||
// Parse markdown to HTML using the local 'marked' library
|
||||
const html = await parse(content);
|
||||
|
||||
if (!html) throw new Error("No content generated");
|
||||
|
||||
setGeneratedHtml(html);
|
||||
setAppState(AppState.PREVIEW);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError("Failed to process the document. Please check your file format and try again.");
|
||||
setAppState(AppState.CONFIG);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setAppState(AppState.UPLOAD);
|
||||
setContent('');
|
||||
setGeneratedHtml('');
|
||||
setSelectedStyle(null);
|
||||
};
|
||||
|
||||
const handleBackToConfig = () => {
|
||||
setAppState(AppState.CONFIG);
|
||||
};
|
||||
|
||||
// Render Logic
|
||||
if (appState === AppState.PREVIEW) {
|
||||
// Pass selectedStyleId to Preview so it can lookup font config
|
||||
// We add the prop via spread or explicit
|
||||
return (
|
||||
// @ts-ignore - Adding prop dynamically if interface not fully updated in previous file change block (it was)
|
||||
<Preview
|
||||
htmlContent={generatedHtml}
|
||||
onBack={handleBackToConfig}
|
||||
paperSize={paperSize}
|
||||
// @ts-ignore
|
||||
selectedStyleId={selectedStyle}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-zinc-100 flex flex-col font-sans selection:bg-indigo-500/30">
|
||||
|
||||
{/* Header */}
|
||||
<header className="border-b border-zinc-800 bg-zinc-950/50 backdrop-blur-sm sticky top-0 z-40">
|
||||
<div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 cursor-pointer" onClick={handleReset}>
|
||||
<div className="bg-gradient-to-br from-indigo-500 to-violet-600 p-2 rounded-lg">
|
||||
<FileType className="text-white" size={20} />
|
||||
</div>
|
||||
<h1 className="text-xl font-bold tracking-tight text-white">TypoGenie</h1>
|
||||
</div>
|
||||
{appState !== AppState.UPLOAD && (
|
||||
<div className="flex items-center gap-4 text-sm text-zinc-500">
|
||||
<span className={appState === AppState.CONFIG ? "text-indigo-400 font-medium" : ""}>Configure</span>
|
||||
<span>/</span>
|
||||
<span className={appState === AppState.GENERATING ? "text-indigo-400 font-medium" : ""}>Generate</span>
|
||||
<span>/</span>
|
||||
<span>Preview</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-grow flex flex-col relative">
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute -top-[20%] -left-[10%] w-[50%] h-[50%] bg-indigo-900/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute top-[20%] -right-[10%] w-[40%] h-[40%] bg-violet-900/10 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-7xl mx-auto px-6 py-12 flex-grow flex flex-col">
|
||||
|
||||
{appState === AppState.UPLOAD && (
|
||||
<div className="flex flex-col items-center justify-center flex-grow space-y-8 animate-in fade-in zoom-in-95 duration-500">
|
||||
<div className="text-center space-y-4 max-w-2xl">
|
||||
<h2 className="text-4xl md:text-5xl font-extrabold tracking-tight text-white">
|
||||
Turn Markdown into <br/>
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-violet-400">
|
||||
Professional Word Docs.
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-lg text-zinc-400 leading-relaxed">
|
||||
Upload your raw text. Select a style.
|
||||
Get a formatted DOCX file ready for Microsoft Word.
|
||||
</p>
|
||||
</div>
|
||||
<FileUpload onFileLoaded={handleFileLoaded} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{appState === AppState.CONFIG && (
|
||||
<div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<StyleSelector
|
||||
selectedStyle={selectedStyle}
|
||||
onSelectStyle={setSelectedStyle}
|
||||
selectedPaperSize={paperSize}
|
||||
onSelectPaperSize={setPaperSize}
|
||||
onGenerate={handleGenerate}
|
||||
/>
|
||||
{error && (
|
||||
<div className="mt-6 p-4 bg-red-900/20 border border-red-800 rounded-xl text-center text-red-300">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{appState === AppState.GENERATING && (
|
||||
<div className="flex flex-col items-center justify-center flex-grow text-center animate-in fade-in duration-700">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-indigo-500 blur-xl opacity-20 animate-pulse"></div>
|
||||
<Loader2 size={64} className="text-indigo-400 animate-spin relative z-10" />
|
||||
</div>
|
||||
<h3 className="mt-8 text-2xl font-bold text-white">Formatting Document</h3>
|
||||
<p className="mt-2 text-zinc-400 max-w-md">
|
||||
Applying typographic rules and preparing print-ready layout...
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className="py-6 text-center text-zinc-600 text-sm border-t border-zinc-900 print:hidden">
|
||||
<p>TypoGenie - Professional Typesetting Engine</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
16
README.md
Normal file
16
README.md
Normal file
@@ -0,0 +1,16 @@
|
||||
<div align="center">
|
||||
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||
</div>
|
||||
|
||||
# TypoGenie
|
||||
|
||||
A professional typesetting engine that converts Markdown files into beautifully formatted Microsoft Word documents.
|
||||
|
||||
## Run Locally
|
||||
|
||||
**Prerequisites:** Node.js
|
||||
|
||||
1. Install dependencies:
|
||||
`npm install`
|
||||
2. Run the app:
|
||||
`npm run dev`
|
||||
92
components/FileUpload.tsx
Normal file
92
components/FileUpload.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Upload, FileText, AlertCircle } from 'lucide-react';
|
||||
|
||||
interface FileUploadProps {
|
||||
onFileLoaded: (content: string) => void;
|
||||
}
|
||||
|
||||
export const FileUpload: React.FC<FileUploadProps> = ({ onFileLoaded }) => {
|
||||
const [dragActive, setDragActive] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleFile = (file: File) => {
|
||||
setError(null);
|
||||
if (!file.name.endsWith('.md') && !file.name.endsWith('.txt') && !file.name.endsWith('.markdown')) {
|
||||
setError('Please upload a Markdown (.md) or Text (.txt) file.');
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const text = e.target?.result;
|
||||
if (typeof text === 'string') {
|
||||
onFileLoaded(text);
|
||||
}
|
||||
};
|
||||
reader.onerror = () => setError('Error reading file.');
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
const handleDrag = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.type === 'dragenter' || e.type === 'dragover') {
|
||||
setDragActive(true);
|
||||
} else if (e.type === 'dragleave') {
|
||||
setDragActive(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDragActive(false);
|
||||
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
|
||||
handleFile(e.dataTransfer.files[0]);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
e.preventDefault();
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
handleFile(e.target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-xl mx-auto">
|
||||
<div
|
||||
className={`relative group flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-2xl transition-all duration-300 ease-in-out cursor-pointer overflow-hidden
|
||||
${dragActive ? 'border-indigo-500 bg-indigo-500/10' : 'border-zinc-700 bg-zinc-900/50 hover:border-zinc-500 hover:bg-zinc-800/50'}`}
|
||||
onDragEnter={handleDrag}
|
||||
onDragLeave={handleDrag}
|
||||
onDragOver={handleDrag}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
|
||||
onChange={handleChange}
|
||||
accept=".md,.txt,.markdown"
|
||||
/>
|
||||
|
||||
<div className="flex flex-col items-center justify-center pt-5 pb-6 text-zinc-400 group-hover:text-zinc-200 transition-colors">
|
||||
<div className={`p-4 rounded-full mb-4 ${dragActive ? 'bg-indigo-500/20 text-indigo-400' : 'bg-zinc-800 text-zinc-500'}`}>
|
||||
<Upload size={32} />
|
||||
</div>
|
||||
<p className="mb-2 text-lg font-medium">
|
||||
<span className="font-semibold text-indigo-400">Click to upload</span> or drag and drop
|
||||
</p>
|
||||
<p className="text-sm text-zinc-500">Markdown or Plain Text files</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 p-4 bg-red-900/20 border border-red-800 rounded-lg flex items-center gap-3 text-red-200 animate-in fade-in slide-in-from-top-2">
|
||||
<AlertCircle size={20} />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
374
components/Preview.tsx
Normal file
374
components/Preview.tsx
Normal file
@@ -0,0 +1,374 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { ArrowLeft, Download, FileText, CheckCircle2, ExternalLink } from 'lucide-react';
|
||||
import { PaperSize, DocxStyleConfig, DocxBorder } from '../types';
|
||||
import { TYPOGRAPHY_STYLES } from '../constants';
|
||||
// @ts-ignore
|
||||
import * as docx from 'docx';
|
||||
|
||||
interface PreviewProps {
|
||||
htmlContent: string;
|
||||
onBack: () => void;
|
||||
paperSize: PaperSize;
|
||||
selectedStyleId?: string | null;
|
||||
}
|
||||
|
||||
export const Preview: React.FC<PreviewProps> = ({ htmlContent, onBack, paperSize, selectedStyleId }) => {
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||||
const [isExporting, setIsExporting] = useState(false);
|
||||
const [successMsg, setSuccessMsg] = useState(false);
|
||||
|
||||
// Get current style
|
||||
const style = TYPOGRAPHY_STYLES.find(s => s.id === selectedStyleId) || TYPOGRAPHY_STYLES[0];
|
||||
|
||||
// Extract unique fonts for display
|
||||
const usedFonts = Array.from(new Set([
|
||||
style.wordConfig.heading1.font,
|
||||
style.wordConfig.heading2.font,
|
||||
style.wordConfig.body.font
|
||||
])).filter(Boolean);
|
||||
|
||||
// Helper to convert Points to Half-Points (docx standard)
|
||||
const pt = (points: number) => points * 2;
|
||||
|
||||
// Helper to convert Inches/MM to Twips
|
||||
const inchesToTwips = (inches: number) => Math.round(inches * 1440);
|
||||
const mmToTwips = (mm: number) => Math.round(mm * (1440 / 25.4));
|
||||
|
||||
// Helper to map Border config to Docx Border
|
||||
const mapBorder = (b?: DocxBorder) => {
|
||||
if (!b) return undefined;
|
||||
let style = docx.BorderStyle.SINGLE;
|
||||
if (b.style === 'double') style = docx.BorderStyle.DOUBLE;
|
||||
if (b.style === 'dotted') style = docx.BorderStyle.DOTTED;
|
||||
if (b.style === 'dashed') style = docx.BorderStyle.DASHED;
|
||||
|
||||
return {
|
||||
color: b.color,
|
||||
space: b.space,
|
||||
style: style,
|
||||
size: b.size
|
||||
};
|
||||
};
|
||||
|
||||
const generateDocx = async (styleId: string) => {
|
||||
setIsExporting(true);
|
||||
try {
|
||||
const style = TYPOGRAPHY_STYLES.find(s => s.id === styleId) || TYPOGRAPHY_STYLES[0];
|
||||
const cfg = style.wordConfig;
|
||||
|
||||
// PARSE HTML
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(htmlContent, 'text/html');
|
||||
const nodes = Array.from(doc.body.childNodes);
|
||||
|
||||
const docxChildren = [];
|
||||
|
||||
for (const node of nodes) {
|
||||
if (node.nodeType !== Node.ELEMENT_NODE) continue;
|
||||
const el = node as HTMLElement;
|
||||
const tagName = el.tagName.toLowerCase();
|
||||
|
||||
// --- Run Parser (Inline Styles) ---
|
||||
const parseRuns = (element: HTMLElement, baseConfig: DocxStyleConfig) => {
|
||||
const runs = [];
|
||||
for (const child of Array.from(element.childNodes)) {
|
||||
if (child.nodeType === Node.TEXT_NODE) {
|
||||
runs.push(new docx.TextRun({
|
||||
text: child.textContent || '',
|
||||
font: baseConfig.font,
|
||||
size: pt(baseConfig.size),
|
||||
color: baseConfig.color,
|
||||
underline: baseConfig.underline ? { type: docx.UnderlineType.SINGLE, color: baseConfig.color } : undefined,
|
||||
}));
|
||||
} else if (child.nodeType === Node.ELEMENT_NODE) {
|
||||
const childEl = child as HTMLElement;
|
||||
const isBold = childEl.tagName === 'STRONG' || childEl.tagName === 'B';
|
||||
const isItalic = childEl.tagName === 'EM' || childEl.tagName === 'I';
|
||||
runs.push(new docx.TextRun({
|
||||
text: childEl.textContent || '',
|
||||
bold: isBold,
|
||||
italics: isItalic,
|
||||
font: baseConfig.font,
|
||||
size: pt(baseConfig.size),
|
||||
color: baseConfig.color,
|
||||
underline: baseConfig.underline ? { type: docx.UnderlineType.SINGLE, color: baseConfig.color } : undefined,
|
||||
}));
|
||||
}
|
||||
}
|
||||
return runs;
|
||||
};
|
||||
|
||||
|
||||
// --- Block Parser ---
|
||||
|
||||
// 1. HEADINGS
|
||||
if (tagName.match(/^h[1-6]$/)) {
|
||||
const level = parseInt(tagName.replace('h', ''));
|
||||
|
||||
// Select config based on level (simplified to H1 or H2, fallback H2 for others)
|
||||
const hCfg = level === 1 ? cfg.heading1 : cfg.heading2;
|
||||
const headingLevel = level === 1 ? docx.HeadingLevel.HEADING_1 : docx.HeadingLevel.HEADING_2;
|
||||
|
||||
// Border Mapping
|
||||
const borderConfig: any = {};
|
||||
if (hCfg.border) {
|
||||
if (hCfg.border.top) borderConfig.top = mapBorder(hCfg.border.top);
|
||||
if (hCfg.border.bottom) borderConfig.bottom = mapBorder(hCfg.border.bottom);
|
||||
if (hCfg.border.left) borderConfig.left = mapBorder(hCfg.border.left);
|
||||
if (hCfg.border.right) borderConfig.right = mapBorder(hCfg.border.right);
|
||||
}
|
||||
|
||||
// Alignment Mapping
|
||||
let align = docx.AlignmentType.LEFT;
|
||||
if (hCfg.align === 'center') align = docx.AlignmentType.CENTER;
|
||||
if (hCfg.align === 'right') align = docx.AlignmentType.RIGHT;
|
||||
if (hCfg.align === 'both') align = docx.AlignmentType.BOTH;
|
||||
|
||||
docxChildren.push(new docx.Paragraph({
|
||||
children: [
|
||||
new docx.TextRun({
|
||||
text: el.textContent || '',
|
||||
font: hCfg.font,
|
||||
bold: hCfg.bold,
|
||||
italics: hCfg.italic,
|
||||
underline: hCfg.underline ? { type: docx.UnderlineType.SINGLE, color: hCfg.color } : undefined,
|
||||
size: pt(hCfg.size),
|
||||
color: hCfg.color,
|
||||
allCaps: hCfg.allCaps,
|
||||
smallCaps: hCfg.smallCaps,
|
||||
characterSpacing: hCfg.tracking
|
||||
})
|
||||
],
|
||||
heading: headingLevel,
|
||||
alignment: align,
|
||||
spacing: {
|
||||
before: hCfg.spacing?.before,
|
||||
after: hCfg.spacing?.after,
|
||||
line: hCfg.spacing?.line
|
||||
},
|
||||
border: borderConfig,
|
||||
shading: hCfg.shading ? {
|
||||
fill: hCfg.shading.fill,
|
||||
color: hCfg.shading.color,
|
||||
type: docx.ShadingType.CLEAR // usually clear to show fill
|
||||
} : undefined,
|
||||
keepNext: true,
|
||||
keepLines: true
|
||||
}));
|
||||
}
|
||||
|
||||
// 2. PARAGRAPHS
|
||||
else if (tagName === 'p') {
|
||||
let align = docx.AlignmentType.LEFT;
|
||||
if (cfg.body.align === 'center') align = docx.AlignmentType.CENTER;
|
||||
if (cfg.body.align === 'right') align = docx.AlignmentType.RIGHT;
|
||||
if (cfg.body.align === 'both') align = docx.AlignmentType.BOTH;
|
||||
|
||||
docxChildren.push(new docx.Paragraph({
|
||||
children: parseRuns(el, cfg.body),
|
||||
spacing: {
|
||||
before: cfg.body.spacing?.before,
|
||||
after: cfg.body.spacing?.after,
|
||||
line: cfg.body.spacing?.line,
|
||||
lineRule: docx.LineRuleType.AUTO
|
||||
},
|
||||
alignment: align
|
||||
}));
|
||||
}
|
||||
|
||||
// 3. BLOCKQUOTES
|
||||
else if (tagName === 'blockquote') {
|
||||
docxChildren.push(new docx.Paragraph({
|
||||
children: parseRuns(el, { ...cfg.body, size: cfg.body.size + 1, color: cfg.accentColor, italic: true } as DocxStyleConfig),
|
||||
indent: { left: 720 }, // 0.5 inch
|
||||
border: { left: { color: cfg.accentColor, space: 10, style: docx.BorderStyle.SINGLE, size: 24 } },
|
||||
shading: { fill: "F8F8F8", type: docx.ShadingType.CLEAR, color: "auto" }, // Default light grey background for quotes
|
||||
spacing: { before: 200, after: 200, line: 300 }
|
||||
}));
|
||||
}
|
||||
|
||||
// 4. LISTS
|
||||
else if (tagName === 'ul' || tagName === 'ol') {
|
||||
const listItems = Array.from(el.children);
|
||||
for (const li of listItems) {
|
||||
docxChildren.push(new docx.Paragraph({
|
||||
children: parseRuns(li as HTMLElement, cfg.body),
|
||||
bullet: { level: 0 },
|
||||
spacing: { before: 80, after: 80 }
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create Document
|
||||
const docxFile = new docx.Document({
|
||||
sections: [{
|
||||
properties: {
|
||||
page: {
|
||||
size: {
|
||||
width: paperSize === 'A4' ? mmToTwips(210) : inchesToTwips(8.5),
|
||||
height: paperSize === 'A4' ? mmToTwips(297) : inchesToTwips(11),
|
||||
},
|
||||
margin: {
|
||||
top: inchesToTwips(1),
|
||||
right: inchesToTwips(1.2),
|
||||
bottom: inchesToTwips(1),
|
||||
left: inchesToTwips(1.2),
|
||||
}
|
||||
}
|
||||
},
|
||||
children: docxChildren
|
||||
}]
|
||||
});
|
||||
|
||||
const blob = await docx.Packer.toBlob(docxFile);
|
||||
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `typogenie-${style.name.replace(/\s+/g, '-').toLowerCase()}.docx`;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
setSuccessMsg(true);
|
||||
setTimeout(() => setSuccessMsg(false), 3000);
|
||||
|
||||
} catch (e) {
|
||||
console.error("Docx Gen Error", e);
|
||||
alert("Failed to generate DOCX");
|
||||
} finally {
|
||||
setIsExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!iframeRef.current) return;
|
||||
|
||||
// We already have 'style' from the component scope, but useEffect needs to be robust
|
||||
const currentStyle = TYPOGRAPHY_STYLES.find(s => s.id === selectedStyleId) || TYPOGRAPHY_STYLES[0];
|
||||
|
||||
const doc = iframeRef.current.contentDocument;
|
||||
if (doc) {
|
||||
const html = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="${currentStyle.googleFontsImport}" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: #52525b;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.page {
|
||||
background: white;
|
||||
width: ${paperSize === 'A4' ? '210mm' : '8.5in'};
|
||||
min-height: ${paperSize === 'A4' ? '297mm' : '11in'};
|
||||
padding: 25mm;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Inject default body color to ensure visibility in dark themes */
|
||||
color: #${currentStyle.wordConfig.body.color};
|
||||
|
||||
/* User Selected Typography */
|
||||
${currentStyle.previewCss}
|
||||
}
|
||||
|
||||
.page * { box-sizing: border-box; }
|
||||
.page img { max-width: 100%; }
|
||||
.page table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
|
||||
.page th, .page td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
${htmlContent}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
doc.open();
|
||||
doc.write(html);
|
||||
doc.close();
|
||||
}
|
||||
}, [htmlContent, paperSize, selectedStyleId]);
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col bg-zinc-900">
|
||||
{/* Toolbar */}
|
||||
<div className="sticky top-0 z-50 bg-zinc-950/90 backdrop-blur-md border-b border-zinc-800 p-4">
|
||||
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-2 text-zinc-400 hover:text-white transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
<span>Back to Editor</span>
|
||||
</button>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center gap-6">
|
||||
|
||||
{/* Font List */}
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-500">
|
||||
<span className="hidden md:inline">Fonts:</span>
|
||||
<div className="flex gap-2">
|
||||
{usedFonts.map(font => (
|
||||
<a
|
||||
key={font}
|
||||
href={`https://fonts.google.com/specimen/${font.replace(/\s+/g, '+')}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-2 py-1 bg-zinc-900 border border-zinc-800 hover:border-zinc-600 rounded text-zinc-300 hover:text-white transition-all flex items-center gap-1.5 text-xs font-medium"
|
||||
title={`Download ${font} from Google Fonts`}
|
||||
>
|
||||
{font}
|
||||
<ExternalLink size={10} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-4 w-px bg-zinc-800 hidden sm:block" />
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-zinc-500 text-sm hidden sm:inline">
|
||||
Format: {paperSize}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
// Ensure we pass a string for styleId
|
||||
const sid = selectedStyleId || 'swiss-grid';
|
||||
generateDocx(sid);
|
||||
}}
|
||||
disabled={isExporting}
|
||||
className={`flex items-center gap-2 px-5 py-2.5 rounded-lg font-semibold transition-colors shadow-lg
|
||||
${successMsg ? 'bg-emerald-600 text-white' : 'bg-blue-600 text-white hover:bg-blue-500'}
|
||||
${isExporting ? 'opacity-50 cursor-wait' : ''}`}
|
||||
>
|
||||
{successMsg ? (
|
||||
<><CheckCircle2 size={18} /><span>Downloaded!</span></>
|
||||
) : (
|
||||
<><FileText size={18} /><span>{isExporting ? 'Generating...' : 'Download Word Doc'}</span></>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow relative bg-zinc-800 overflow-hidden">
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
className="w-full h-full border-0 block"
|
||||
title="Report Preview"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
128
components/StylePreviewModal.tsx
Normal file
128
components/StylePreviewModal.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { StyleOption } from '../types';
|
||||
|
||||
interface StylePreviewModalProps {
|
||||
style: StyleOption;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const SAMPLE_CONTENT = `
|
||||
<h1>The Art of Typography</h1>
|
||||
<p>Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.</p>
|
||||
|
||||
<h2>1. Visual Hierarchy</h2>
|
||||
<p>Visual hierarchy enables the reader to understand the importance of different sections. By using size, weight, and color, we guide the eye through the document in a logical flow.</p>
|
||||
|
||||
<blockquote>
|
||||
"Design is not just what it looks like and feels like. Design is how it works."
|
||||
</blockquote>
|
||||
|
||||
<h2>2. Key Elements</h2>
|
||||
<ul>
|
||||
<li><strong>Typeface:</strong> The design of the letters.</li>
|
||||
<li><strong>Contrast:</strong> Distinguishing elements effectively.</li>
|
||||
<li><strong>Consistency:</strong> Maintaining a coherent structure.</li>
|
||||
</ul>
|
||||
|
||||
<p>Good typography is invisible. It should not distract the reader but rather enhance the reading experience, ensuring the message is delivered clearly and effectively.</p>
|
||||
`;
|
||||
|
||||
export const StylePreviewModal: React.FC<StylePreviewModalProps> = ({ style, onClose }) => {
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
window.addEventListener('keydown', handleEscape);
|
||||
return () => window.removeEventListener('keydown', handleEscape);
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!iframeRef.current) return;
|
||||
const doc = iframeRef.current.contentDocument;
|
||||
if (doc) {
|
||||
const html = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="${style.googleFontsImport}" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
padding: 40px;
|
||||
/* Inject default body color from config */
|
||||
color: #${style.wordConfig.body.color};
|
||||
/* Apply Sample CSS */
|
||||
${style.previewCss}
|
||||
}
|
||||
/* Override body margins from preview css to fit modal better */
|
||||
body { width: 100%; height: 100%; box-sizing: border-box; overflow-y: auto; }
|
||||
h1 { margin-top: 0 !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${SAMPLE_CONTENT}
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
doc.open();
|
||||
doc.write(html);
|
||||
doc.close();
|
||||
}
|
||||
}, [style]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-sm animate-in fade-in duration-200"
|
||||
onClick={(e) => {
|
||||
// Close if clicking the background overlay directly
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="relative w-full max-w-3xl bg-zinc-900 rounded-2xl border border-zinc-700 shadow-2xl overflow-hidden flex flex-col h-[85vh]">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-zinc-800 bg-zinc-900/50">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white">{style.name}</h3>
|
||||
<p className="text-sm text-zinc-400">{style.description}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-full transition-colors"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-grow bg-zinc-800 p-1 overflow-hidden relative">
|
||||
<div className="w-full h-full bg-white rounded-lg overflow-hidden shadow-inner">
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
title="Style Preview"
|
||||
className="w-full h-full border-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-zinc-800 bg-zinc-900 flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Close Preview
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
263
components/StyleSelector.tsx
Normal file
263
components/StyleSelector.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
import React, { useState, useMemo, useRef, useEffect } from 'react';
|
||||
import { TYPOGRAPHY_STYLES } from '../constants';
|
||||
import { StyleOption, PaperSize, StyleCategory } from '../types';
|
||||
import { Check, Type, Printer, Search } from 'lucide-react';
|
||||
|
||||
interface StyleSelectorProps {
|
||||
selectedStyle: string | null;
|
||||
onSelectStyle: (id: string) => void;
|
||||
selectedPaperSize: PaperSize;
|
||||
onSelectPaperSize: (size: PaperSize) => void;
|
||||
onGenerate: () => void;
|
||||
}
|
||||
|
||||
const SAMPLE_CONTENT = `
|
||||
<h1>The Art of Typography</h1>
|
||||
<p>Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.</p>
|
||||
|
||||
<h2>1. Visual Hierarchy</h2>
|
||||
<p>Visual hierarchy enables the reader to understand the importance of different sections. By using size, weight, and color, we guide the eye through the document in a logical flow.</p>
|
||||
|
||||
<blockquote>
|
||||
"Design is not just what it looks like and feels like. Design is how it works."
|
||||
</blockquote>
|
||||
|
||||
<h2>2. Key Elements</h2>
|
||||
<ul>
|
||||
<li><strong>Typeface:</strong> The design of the letters.</li>
|
||||
<li><strong>Contrast:</strong> Distinguishing elements effectively.</li>
|
||||
<li><strong>Consistency:</strong> Maintaining a coherent structure.</li>
|
||||
</ul>
|
||||
|
||||
<p>Good typography is invisible. It should not distract the reader but rather enhance the reading experience, ensuring the message is delivered clearly and effectively.</p>
|
||||
`;
|
||||
|
||||
export const StyleSelector: React.FC<StyleSelectorProps> = ({
|
||||
selectedStyle,
|
||||
onSelectStyle,
|
||||
selectedPaperSize,
|
||||
onSelectPaperSize,
|
||||
onGenerate
|
||||
}) => {
|
||||
const [activeCategory, setActiveCategory] = useState<StyleCategory | 'All'>('All');
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||||
|
||||
// Dynamically extract categories from styles and sort them
|
||||
const categories = useMemo(() => {
|
||||
const cats = new Set(TYPOGRAPHY_STYLES.map(s => s.category));
|
||||
return Array.from(cats).sort();
|
||||
}, []);
|
||||
|
||||
const filteredStyles = useMemo(() => {
|
||||
let styles = TYPOGRAPHY_STYLES;
|
||||
if (activeCategory !== 'All') {
|
||||
styles = TYPOGRAPHY_STYLES.filter(style => style.category === activeCategory);
|
||||
}
|
||||
// Always sort alphabetically by name
|
||||
return [...styles].sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, [activeCategory]);
|
||||
|
||||
const currentStyleObj = useMemo(() =>
|
||||
TYPOGRAPHY_STYLES.find(s => s.id === selectedStyle),
|
||||
[selectedStyle]);
|
||||
|
||||
// Update preview when style changes
|
||||
useEffect(() => {
|
||||
if (!iframeRef.current || !currentStyleObj) return;
|
||||
|
||||
const doc = iframeRef.current.contentDocument;
|
||||
if (doc) {
|
||||
const html = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="${currentStyleObj.googleFontsImport}" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 40px;
|
||||
/* Inject default body color from config to ensure lists/quotes inherit correctly */
|
||||
color: #${currentStyleObj.wordConfig.body.color};
|
||||
font-family: sans-serif;
|
||||
/* Apply Selected Style CSS */
|
||||
${currentStyleObj.previewCss}
|
||||
}
|
||||
/* Scrollbar styling for the preview iframe */
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: #f1f1f1; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${SAMPLE_CONTENT}
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
doc.open();
|
||||
doc.write(html);
|
||||
doc.close();
|
||||
}
|
||||
}, [currentStyleObj]);
|
||||
|
||||
return (
|
||||
<div className="w-full h-[calc(100vh-140px)] min-h-[600px] flex flex-col gap-6 max-w-[1600px] mx-auto">
|
||||
|
||||
{/* Top Controls */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 px-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-indigo-500/10 rounded-lg text-indigo-400">
|
||||
<Type size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-zinc-100">Select Typography Style</h2>
|
||||
<p className="text-zinc-400 text-sm">Browse {TYPOGRAPHY_STYLES.length} professional templates</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 bg-zinc-900/50 p-1.5 rounded-xl border border-zinc-800/50">
|
||||
<div className="flex items-center gap-2 text-zinc-400 px-3">
|
||||
<Printer size={16} />
|
||||
<span className="text-xs font-semibold uppercase tracking-wider">Format</span>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
{(['Letter', 'A4'] as PaperSize[]).map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
onClick={() => onSelectPaperSize(size)}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${
|
||||
selectedPaperSize === size
|
||||
? 'bg-zinc-700 text-white shadow-sm'
|
||||
: 'text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800'
|
||||
}`}
|
||||
>
|
||||
{size}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Split Layout */}
|
||||
<div className="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-6 min-h-0">
|
||||
|
||||
{/* LEFT COLUMN: Style List */}
|
||||
<div className="lg:col-span-4 flex flex-col gap-4 min-h-0 bg-zinc-900/30 rounded-2xl border border-zinc-800/50 overflow-hidden">
|
||||
|
||||
{/* Category Filter Tabs */}
|
||||
<div className="p-4 border-b border-zinc-800/50 overflow-x-auto no-scrollbar">
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setActiveCategory('All')}
|
||||
className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all ${
|
||||
activeCategory === 'All'
|
||||
? 'bg-white text-black'
|
||||
: 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200'
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
{categories.map(cat => (
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => setActiveCategory(cat)}
|
||||
className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all ${
|
||||
activeCategory === cat
|
||||
? 'bg-indigo-500 text-white shadow-lg shadow-indigo-500/20'
|
||||
: 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200'
|
||||
}`}
|
||||
>
|
||||
{cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scrollable List */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-3 custom-scrollbar">
|
||||
{filteredStyles.map((style) => (
|
||||
<div
|
||||
key={style.id}
|
||||
onClick={() => onSelectStyle(style.id)}
|
||||
className={`p-4 rounded-xl border transition-all cursor-pointer group relative
|
||||
${selectedStyle === style.id
|
||||
? 'border-indigo-500 bg-indigo-500/10 shadow-[0_0_15px_rgba(99,102,241,0.15)]'
|
||||
: 'border-zinc-800 bg-zinc-900/40 hover:border-zinc-700 hover:bg-zinc-800'}`}
|
||||
>
|
||||
<div className="flex justify-between items-start mb-1">
|
||||
<h3 className={`font-bold text-sm ${selectedStyle === style.id ? 'text-white' : 'text-zinc-300'}`}>
|
||||
{style.name}
|
||||
</h3>
|
||||
{selectedStyle === style.id && (
|
||||
<div className="bg-indigo-500 rounded-full p-0.5">
|
||||
<Check size={12} className="text-white" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-zinc-500 line-clamp-2 leading-relaxed mb-2">{style.description}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-[10px] uppercase font-mono tracking-wider px-1.5 py-0.5 rounded
|
||||
${selectedStyle === style.id ? 'bg-indigo-500/20 text-indigo-300' : 'bg-zinc-800 text-zinc-500'}`}>
|
||||
{style.category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT COLUMN: Preview Window */}
|
||||
<div className="lg:col-span-8 flex flex-col min-h-0 bg-zinc-950 rounded-2xl border border-zinc-800 shadow-2xl relative overflow-hidden">
|
||||
|
||||
{/* Preview Header */}
|
||||
<div className="h-12 border-b border-zinc-800 bg-zinc-900/50 flex items-center px-4 justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/50"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-amber-500/20 border border-amber-500/50"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-emerald-500/20 border border-emerald-500/50"></div>
|
||||
</div>
|
||||
<div className="h-4 w-px bg-zinc-800 mx-2"></div>
|
||||
<span className="text-xs text-zinc-500 font-medium">Live Preview</span>
|
||||
</div>
|
||||
{currentStyleObj && (
|
||||
<span className="text-xs text-indigo-400 font-mono">{currentStyleObj.name}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Iframe Container */}
|
||||
<div className="flex-1 relative bg-zinc-900/50">
|
||||
{selectedStyle ? (
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
className="w-full h-full border-0 block"
|
||||
title="Style Preview"
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-zinc-600">
|
||||
<Search size={48} className="mb-4 opacity-20" />
|
||||
<p className="text-lg font-medium">Select a style to preview</p>
|
||||
<p className="text-sm">Choose from the list on the left</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom Action Bar */}
|
||||
<div className="p-4 border-t border-zinc-800 bg-zinc-900/50 flex justify-end items-center gap-4">
|
||||
<button
|
||||
onClick={onGenerate}
|
||||
disabled={!selectedStyle}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-xl transition-all shadow-lg hover:shadow-indigo-500/25 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span>Apply Style & Convert</span>
|
||||
<Printer size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
3
constants.ts
Normal file
3
constants.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import { ALL_STYLES } from './styles/index';
|
||||
|
||||
export const TYPOGRAPHY_STYLES = ALL_STYLES;
|
||||
36
index.html
Normal file
36
index.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TypoGenie - Professional Report Generator</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #09090b;
|
||||
color: #e4e4e7;
|
||||
}
|
||||
</style>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"lucide-react": "https://esm.sh/lucide-react@^0.563.0",
|
||||
"react": "https://esm.sh/react@^19.2.4",
|
||||
"react/": "https://esm.sh/react@^19.2.4/",
|
||||
"react-dom/": "https://esm.sh/react-dom@^19.2.4/",
|
||||
"docx": "https://esm.sh/docx@^8.5.0",
|
||||
"marked": "https://esm.sh/marked@12.0.0"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
15
index.tsx
Normal file
15
index.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
if (!rootElement) {
|
||||
throw new Error("Could not find root element to mount to");
|
||||
}
|
||||
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
5
metadata.json
Normal file
5
metadata.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "TypoGenie",
|
||||
"description": "Transform markdown into beautifully formatted Microsoft Word documents with professional typography styles.",
|
||||
"requestFramePermissions": []
|
||||
}
|
||||
24
package.json
Normal file
24
package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "typogenie",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.563.0",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"docx": "^8.5.0",
|
||||
"marked": "12.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.14.0",
|
||||
"@vitejs/plugin-react": "^5.0.0",
|
||||
"typescript": "~5.8.2",
|
||||
"vite": "^6.2.0"
|
||||
}
|
||||
}
|
||||
407
styles/academic.ts
Normal file
407
styles/academic.ts
Normal file
@@ -0,0 +1,407 @@
|
||||
import { StyleOption } from '../types';
|
||||
|
||||
export const academicStyles: StyleOption[] = [
|
||||
{
|
||||
id: 'academic-journal',
|
||||
name: 'Academic Journal',
|
||||
category: 'Academic',
|
||||
description: 'Scholarly and rigorous design for academic papers and research publications. Traditional serif typography optimized for extended reading.',
|
||||
vibe: 'Scholarly, Serious, Traditional',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Libre Baskerville", size: 18, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 360, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Libre Baskerville", size: 13, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Libre Baskerville", size: 10, color: "1A1A1A", align: 'both',
|
||||
spacing: { before: 0, after: 140, line: 300 }
|
||||
},
|
||||
accentColor: "800000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
h1 { font-size: 18pt; font-weight: 700; color: #000000; text-align: center; margin-bottom: 28px; }
|
||||
h2 { font-size: 13pt; font-weight: 700; color: #000000; margin-top: 28px; margin-bottom: 14px; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #1A1A1A; margin-bottom: 12px; text-align: justify; }
|
||||
blockquote { padding-left: 40px; margin: 20px 0; font-size: 9pt; color: #333333; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'medical-professional',
|
||||
name: 'Medical Professional',
|
||||
category: 'Healthcare',
|
||||
description: 'Clean, clinical design for healthcare and medical documentation. Emphasizes clarity and professionalism with calming blue accents.',
|
||||
vibe: 'Clinical, Professional, Trustworthy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Open Sans", size: 20, color: "1565C0", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Open Sans", size: 13, color: "0D47A1", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Open Sans", size: 10, color: "37474F", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "1565C0"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
h1 { font-size: 20pt; font-weight: 700; color: #1565C0; margin-bottom: 20px; }
|
||||
h2 { font-size: 13pt; font-weight: 700; color: #0D47A1; margin-top: 28px; margin-bottom: 14px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #37474F; margin-bottom: 14px; }
|
||||
blockquote { background: #E3F2FD; padding: 16px; border-left: 4px solid #1565C0; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'education-friendly',
|
||||
name: 'Education Friendly',
|
||||
category: 'Education',
|
||||
description: 'Approachable and clear design for educational materials. High readability with friendly colors suitable for learning environments.',
|
||||
vibe: 'Friendly, Educational, Accessible',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Nunito", size: 24, color: "5E35B1", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "EDE7F6", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Nunito", size: 14, color: "7E57C2", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Nunito", size: 11, color: "424242", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "5E35B1"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Nunito', sans-serif;
|
||||
h1 { font-size: 24pt; font-weight: 700; color: #5E35B1; background: #EDE7F6; padding: 16px 20px; border-radius: 8px; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #7E57C2; margin-top: 30px; margin-bottom: 14px; }
|
||||
p { font-size: 11pt; line-height: 1.7; color: #424242; margin-bottom: 14px; }
|
||||
blockquote { background: #F3E5F5; padding: 16px; border-radius: 8px; border-left: 4px solid #7E57C2; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'scientific-journal',
|
||||
name: 'Scientific Journal',
|
||||
category: 'Academic',
|
||||
description: 'Precise design for scientific publications. Clear hierarchy optimized for data-heavy content and citations.',
|
||||
vibe: 'Scientific, Precise, Academic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Literata:wght@400;500;700&family=Fira+Sans:wght@400;500;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Literata", size: 18, color: "1A1A1A", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 260 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Fira Sans", size: 12, color: "1A1A1A", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 120, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Literata", size: 10, color: "262626", align: 'both',
|
||||
spacing: { before: 0, after: 140, line: 280 }
|
||||
},
|
||||
accentColor: "0066CC"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Literata', serif;
|
||||
h1 { font-size: 18pt; font-weight: 700; color: #1A1A1A; margin-bottom: 24px; }
|
||||
h2 { font-family: 'Fira Sans', sans-serif; font-size: 12pt; font-weight: 600; color: #1A1A1A; margin-top: 28px; margin-bottom: 12px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #262626; margin-bottom: 12px; text-align: justify; }
|
||||
blockquote { padding-left: 24px; border-left: 2px solid #0066CC; margin: 16px 0; font-size: 9pt; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'kids-education',
|
||||
name: 'Kids Education',
|
||||
category: 'Education',
|
||||
description: 'Fun and engaging design for children\'s educational content. Rounded typography with bright, cheerful colors.',
|
||||
vibe: 'Educational, Fun, Engaging',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Fredoka", size: 32, color: "FF6B6B", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
shading: { fill: "FFF9DB", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Fredoka", size: 18, color: "4ECDC4", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Fredoka", size: 12, color: "495057", align: 'left',
|
||||
spacing: { before: 0, after: 180, line: 320 }
|
||||
},
|
||||
accentColor: "FF6B6B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
h1 { font-size: 32pt; font-weight: 600; color: #FF6B6B; text-align: center; background: #FFF9DB; padding: 16px 20px; border-radius: 12px; margin-bottom: 28px; }
|
||||
h2 { font-size: 18pt; font-weight: 500; color: #4ECDC4; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 12pt; line-height: 1.8; color: #495057; margin-bottom: 16px; }
|
||||
blockquote { background: #E3F9F8; padding: 16px; border-radius: 12px; border-left: 6px solid #4ECDC4; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'dark-academia',
|
||||
name: 'Dark Academia',
|
||||
category: 'Academic',
|
||||
description: 'Moody, literary aesthetic. Tweed textures, old libraries, and classic serif typography.',
|
||||
vibe: 'Moody, Scholarly, Literary',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&family=Alegreya+SC:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Alegreya SC", size: 28, color: "3E2723", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 },
|
||||
border: { bottom: { color: "5D4037", space: 6, style: "double", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Alegreya", size: 16, color: "4E342E", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Alegreya", size: 11, color: "212121", align: 'both',
|
||||
spacing: { before: 0, after: 180, line: 320 }
|
||||
},
|
||||
accentColor: "5D4037"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Alegreya', serif;
|
||||
background: #F5F1E8;
|
||||
h1 { font-family: 'Alegreya SC', serif; font-size: 28pt; font-weight: 700; color: #3E2723; text-align: center; border-bottom: 4px double #5D4037; padding-bottom: 16px; margin-bottom: 32px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #4E342E; margin-top: 36px; margin-bottom: 18px; font-style: italic; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #212121; margin-bottom: 16px; text-align: justify; }
|
||||
blockquote { border-left: 2px solid #3E2723; padding-left: 20px; margin: 28px 0; font-style: italic; color: #4E342E; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'botanical-textbook',
|
||||
name: 'Botanical Textbook',
|
||||
category: 'Scientific',
|
||||
description: 'Vintage science textbook aesthetic. Academic yet organic, like a 19th-century flora guide.',
|
||||
vibe: 'Vintage, Scientific, Organic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Alice&family=Gentium+Book+Basic:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Alice", size: 28, color: "33691E", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "827717", space: 6, style: "single", size: 8 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Gentium Book Basic", size: 14, color: "558B2F", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Gentium Book Basic", size: 11, color: "1B1B1B", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "827717"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Gentium Book Basic', serif;
|
||||
h1 { font-family: 'Alice', serif; font-size: 28pt; color: #33691E; border-bottom: 2px solid #827717; padding-bottom: 10px; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #558B2F; margin-top: 30px; margin-bottom: 14px; font-style: italic; }
|
||||
p { font-size: 11pt; line-height: 1.7; color: #1B1B1B; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { background: #F9FBE7; padding: 16px; border-left: 4px solid #827717; margin: 20px 0; font-size: 10pt; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'chemistry-lab',
|
||||
name: 'Chemistry Lab',
|
||||
category: 'Scientific',
|
||||
description: 'Clean, molecular design. Modern thin typography suitable for diagrams and formulas.',
|
||||
vibe: 'Scientific, Modern, Molecular',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Advent+Pro:wght@400;600;700&family=Heebo:wght@300;400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Advent Pro", size: 32, color: "00BCD4", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Heebo", size: 16, color: "0097A7", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Heebo", size: 10, color: "37474F", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "00BCD4"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Heebo', sans-serif;
|
||||
h1 { font-family: 'Advent Pro', sans-serif; font-size: 32pt; font-weight: 700; color: #00BCD4; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #0097A7; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #37474F; margin-bottom: 14px; font-weight: 300; }
|
||||
blockquote { border: 1px solid #00BCD4; padding: 16px; margin: 20px 0; border-radius: 8px; background: #E0F7FA; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'mathematics-paper',
|
||||
name: 'Mathematics Paper',
|
||||
category: 'Academic',
|
||||
description: 'Inspired by LaTeX and Computer Modern. Serif-heavy, precise, and highly legible for academic rigor.',
|
||||
vibe: 'Academic, Rigorous, Formal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Domine:wght@400;700&family=Noticia+Text:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Domine", size: 24, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Domine", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Noticia Text", size: 11, color: "212121", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Noticia Text', serif;
|
||||
h1 { font-family: 'Domine', serif; font-size: 24pt; font-weight: 700; color: #000000; text-align: center; margin-bottom: 24px; }
|
||||
h2 { font-family: 'Domine', serif; font-size: 14pt; font-weight: 700; color: #000000; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { border-left: 3px solid #000; padding-left: 20px; margin: 24px 0; font-style: italic; background: #F5F5F5; padding: 10px 20px; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'phd-thesis',
|
||||
name: 'PhD Thesis',
|
||||
category: 'Academic',
|
||||
description: 'The pinnacle of academic formatting. Extremely legible serif body, double spacing, and rigorous margin structure.',
|
||||
vibe: 'Formal, Scholarly, Prestigious',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&family=Crimson+Text:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Tinos", size: 24, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 240, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Tinos", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 120, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Crimson Text", size: 12, color: "000000", align: 'both',
|
||||
spacing: { before: 0, after: 0, line: 480 } // Double spaced
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Crimson Text', serif;
|
||||
line-height: 2.0;
|
||||
h1 { font-family: 'Tinos', serif; font-size: 24pt; font-weight: 700; text-align: center; text-transform: uppercase; margin-bottom: 24px; }
|
||||
h2 { font-family: 'Tinos', serif; font-size: 14pt; font-weight: 700; margin-top: 24px; margin-bottom: 12px; }
|
||||
p { font-size: 12pt; text-align: justify; margin-bottom: 0; }
|
||||
blockquote { margin-left: 40px; font-style: italic; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'history-textbook',
|
||||
name: 'History Textbook',
|
||||
category: 'Academic',
|
||||
description: 'Classic textbook design. Sepia tones, distinct serif headers, and wide margins for notes.',
|
||||
vibe: 'Classic, Educational, Historical',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Sorts+Mill+Goudy&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Goudy Bookletter 1911", size: 28, color: "5D4037", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "8D6E63", space: 4, style: "single", size: 8 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Sorts Mill Goudy", size: 16, color: "3E2723", bold: false, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Sorts Mill Goudy", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "8D6E63"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Sorts Mill Goudy', serif;
|
||||
background: #FFF8E1;
|
||||
h1 { font-family: 'Goudy Bookletter 1911', serif; font-size: 28pt; color: #5D4037; border-bottom: 2px solid #8D6E63; padding-bottom: 10px; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; color: #3E2723; margin-top: 30px; margin-bottom: 14px; }
|
||||
p { font-size: 11pt; line-height: 1.7; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF; padding: 16px; border: 1px solid #8D6E63; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'scantron-test',
|
||||
name: 'Scantron Test',
|
||||
category: 'Academic',
|
||||
description: 'Standardized testing sheet. Salmon pinks and greens with bubble-filling aesthetics.',
|
||||
vibe: 'Academic, Retro, Bureaucratic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Roboto Mono", size: 28, color: "B71C1C", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "EF5350", space: 4, style: "single", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto Mono", size: 14, color: "1B5E20", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "E8F5E9", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto Mono", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "EF5350"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
background: #FFF3E0; /* Light salmonish tint */
|
||||
h1 { font-size: 28pt; font-weight: 700; color: #B71C1C; border-bottom: 2px solid #EF5350; padding-bottom: 8px; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #1B5E20; background: #C8E6C9; display: inline-block; padding: 4px 12px; margin-top: 32px; margin-bottom: 16px; border-radius: 12px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 1px solid #B71C1C; padding: 16px; margin: 24px 0; border-radius: 8px; background: #FFEBEE; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'emergency-room',
|
||||
name: 'Emergency Room',
|
||||
category: 'Medical',
|
||||
description: 'Hospital signage. Sterile white, urgent red, and clean blue.',
|
||||
vibe: 'Sterile, Urgent, Clean',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Heebo:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Assistant", size: 36, color: "D50000", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "D50000", space: 4, style: "single", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Heebo", size: 18, color: "2962FF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Heebo", size: 11, color: "424242", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D50000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Heebo', sans-serif;
|
||||
h1 { font-family: 'Assistant', sans-serif; font-size: 36pt; font-weight: 700; color: #D50000; border-bottom: 4px solid #D50000; padding-bottom: 8px; margin-bottom: 24px; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #2962FF; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
|
||||
blockquote { background: #FFEBEE; border-left: 6px solid #D50000; padding: 16px; margin: 24px 0; }
|
||||
`
|
||||
}
|
||||
];
|
||||
1
styles/core.ts
Normal file
1
styles/core.ts
Normal file
@@ -0,0 +1 @@
|
||||
// Styles have been moved to categorized files.
|
||||
430
styles/corporate.ts
Normal file
430
styles/corporate.ts
Normal file
@@ -0,0 +1,430 @@
|
||||
import { StyleOption } from '../types';
|
||||
|
||||
export const corporateStyles: StyleOption[] = [
|
||||
{
|
||||
id: 'tech-memo',
|
||||
name: 'Tech Memorandum',
|
||||
category: 'Corporate',
|
||||
description: 'Modern, functional, and authoritative. Uses shading for headers to create distinct sections.',
|
||||
vibe: 'Corporate, Tech, Strategy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Roboto", size: 24, color: "0F172A", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "F1F5F9", color: "auto", style: "clear" },
|
||||
border: { left: { color: "2563EB", space: 10, style: "single", size: 48 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto", size: 14, color: "2563EB", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto", size: 10, color: "334155", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "2563EB"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto', sans-serif;
|
||||
h1 { font-size: 24pt; font-weight: 700; background: #F1F5F9; color: #0F172A; padding: 12px 16px; border-left: 8px solid #2563EB; margin-bottom: 20px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #2563EB; margin-top: 30px; margin-bottom: 12px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #334155; margin-bottom: 14px; }
|
||||
blockquote { background: #EFF6FF; padding: 16px; border-radius: 4px; color: #1E40AF; border-left: 4px solid #2563EB; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'annual-report',
|
||||
name: 'Annual Report',
|
||||
category: 'Corporate',
|
||||
description: 'Trustworthy and substantial. Deep navy blues, clean sans-serifs, and grid-like precision.',
|
||||
vibe: 'Financial, Serious, Trust',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;700;900&family=Merriweather:wght@300;400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Libre Franklin", size: 32, color: "0D2B46", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Libre Franklin", size: 16, color: "A0A0A0", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Merriweather", size: 10, color: "333333", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "0D2B46"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Merriweather', serif;
|
||||
h1 { font-family: 'Libre Franklin', sans-serif; font-size: 32pt; font-weight: 900; color: #0D2B46; margin-bottom: 24px; }
|
||||
h2 { font-family: 'Libre Franklin', sans-serif; font-size: 16pt; font-weight: 700; color: #A0A0A0; text-transform: uppercase; margin-top: 32px; margin-bottom: 16px; border-bottom: 1px solid #CCC; padding-bottom: 4px; }
|
||||
p { font-size: 10pt; line-height: 1.8; color: #333333; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { border-left: 4px solid #0D2B46; padding-left: 16px; margin: 24px 0; color: #0D2B46; font-style: italic; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'legal-contract',
|
||||
name: 'Legal Contract',
|
||||
category: 'Corporate',
|
||||
description: 'Binding agreement style. Serif fonts, justified text, and numbered section aesthetics.',
|
||||
vibe: 'Legal, Binding, Formal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Tinos", size: 14, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 240, after: 240, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Tinos", size: 12, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 120, line: 240 },
|
||||
underline: true
|
||||
},
|
||||
body: {
|
||||
font: "Tinos", size: 11, color: "000000", align: 'both',
|
||||
spacing: { before: 0, after: 120, line: 240 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Tinos', serif;
|
||||
h1 { font-size: 14pt; font-weight: 700; color: #000000; text-align: center; text-transform: uppercase; margin-bottom: 16px; }
|
||||
h2 { font-size: 12pt; font-weight: 700; color: #000000; text-decoration: underline; margin-top: 24px; margin-bottom: 12px; }
|
||||
p { font-size: 11pt; line-height: 1.4; color: #000000; margin-bottom: 12px; text-align: justify; }
|
||||
blockquote { margin: 20px 40px; border: 1px solid #000; padding: 10px; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'corporate-executive',
|
||||
name: 'Corporate Executive',
|
||||
category: 'Corporate',
|
||||
description: 'Authoritative and professional. Designed for board reports, executive summaries, and high-stakes business communications.',
|
||||
vibe: 'Executive, Formal, Trustworthy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700&family=Source+Sans+3:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Source Serif 4", size: 24, color: "1A237E", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Source Sans 3", size: 14, color: "303F9F", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Source Sans 3", size: 10, color: "333333", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "1A237E"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Source Sans 3', sans-serif;
|
||||
h1 { font-family: 'Source Serif 4', serif; font-size: 24pt; font-weight: 700; color: #1A237E; margin-bottom: 24px; border-bottom: 2px solid #1A237E; padding-bottom: 8px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #303F9F; margin-top: 30px; margin-bottom: 12px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #1A237E; padding-left: 16px; color: #1A237E; margin: 20px 0; font-style: italic; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'political-campaign',
|
||||
name: 'Political Campaign',
|
||||
category: 'Professional',
|
||||
description: 'Bold, patriotic design for campaigns. Strong headers with red, white, and blue motifs.',
|
||||
vibe: 'Patriotic, Bold, Official',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Francois+One&family=Cabin:wght@400;600;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Francois One", size: 36, color: "0D47A1", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "D32F2F", space: 8, style: "single", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Cabin", size: 16, color: "D32F2F", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Cabin", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Cabin', sans-serif;
|
||||
h1 { font-family: 'Francois One', sans-serif; font-size: 36pt; color: #0D47A1; border-bottom: 4px solid #D32F2F; padding-bottom: 12px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #D32F2F; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { background: #E3F2FD; padding: 20px; border-left: 8px solid #0D47A1; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'passport-official',
|
||||
name: 'Passport Official',
|
||||
category: 'Government',
|
||||
description: 'International travel document aesthetic. Machine-readable fonts with secure, bureaucratic vibes.',
|
||||
vibe: 'Official, Secure, Monospace',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;700&family=Courier+Prime&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Martian Mono", size: 22, color: "1A237E", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Martian Mono", size: 12, color: "B71C1C", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 140, line: 260 }
|
||||
},
|
||||
accentColor: "B71C1C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
h1 { font-family: 'Martian Mono', monospace; font-size: 22pt; font-weight: 700; color: #1A237E; margin-bottom: 24px; letter-spacing: -1px; }
|
||||
h2 { font-family: 'Martian Mono', monospace; font-size: 12pt; font-weight: 700; color: #B71C1C; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.5; color: #212121; margin-bottom: 12px; }
|
||||
blockquote { border: 1px dashed #1A237E; padding: 16px; margin: 20px 0; background: #E8EAF6; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'top-secret-redacted',
|
||||
name: 'Top Secret Redacted',
|
||||
category: 'Government',
|
||||
description: 'Declassified document style. Typewriter fonts with "blacked out" highlight effects.',
|
||||
vibe: 'Secret, Classified, Rough',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Special Elite", size: 28, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
border: {
|
||||
top: { color: "000000", space: 6, style: "single", size: 24 },
|
||||
bottom: { color: "000000", space: 6, style: "single", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Courier Prime", size: 14, color: "B71C1C", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" } // Red text on black bar
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 11, color: "000000", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
background: #F5F5F5;
|
||||
h1 { font-family: 'Special Elite', cursive; font-size: 28pt; color: #000000; border-top: 4px solid #000; border-bottom: 4px solid #000; padding: 16px 0; text-align: center; margin-bottom: 28px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #B71C1C; background: #000000; display: inline-block; padding: 4px 12px; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #000000; margin-bottom: 14px; }
|
||||
blockquote { background: #000; color: #000; padding: 10px; margin: 20px 0; user-select: none; }
|
||||
blockquote:hover { color: #FFF; } /* Easter egg for preview */
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'legal-pleading',
|
||||
name: 'Legal Pleading',
|
||||
category: 'Professional',
|
||||
description: 'Courtroom document style. Rigid framing, double spacing, and traditional serif fonts.',
|
||||
vibe: 'Legal, Strict, Formal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Courier+Prime&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "EB Garamond", size: 14, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 240, after: 240, line: 240 },
|
||||
allCaps: true,
|
||||
// underline: true - using border bottom to simulate
|
||||
border: { bottom: { color: "000000", space: 4, style: "single", size: 4 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "EB Garamond", size: 12, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 120, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 12, color: "000000", align: 'both',
|
||||
spacing: { before: 0, after: 0, line: 480 }, // Double Spacing
|
||||
border: { left: { color: "BDBDBD", space: 12, style: "single", size: 4 } } // Simulates line number bar area
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
line-height: 2.0;
|
||||
h1 { font-family: 'EB Garamond', serif; font-size: 14pt; font-weight: 700; color: #000000; text-align: center; text-decoration: underline; text-transform: uppercase; margin-bottom: 24px; }
|
||||
h2 { font-family: 'EB Garamond', serif; font-size: 12pt; font-weight: 700; color: #000000; margin-top: 24px; margin-bottom: 12px; }
|
||||
p { font-size: 12pt; color: #000000; margin-bottom: 0px; text-align: justify; border-left: 1px solid #BDBDBD; padding-left: 15px; }
|
||||
blockquote { margin-left: 40px; border-left: 1px solid #BDBDBD; padding-left: 15px; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'currency-bill',
|
||||
name: 'Currency Bill',
|
||||
category: 'Official',
|
||||
description: 'Banknote aesthetic. Intricate guilloche-style borders and emerald green serif fonts.',
|
||||
vibe: 'Financial, Secure, Green',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&family=Noto+Serif:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display SC", size: 36, color: "1B5E20", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: {
|
||||
top: { color: "2E7D32", space: 6, style: "double", size: 12 },
|
||||
bottom: { color: "2E7D32", space: 6, style: "double", size: 12 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Noto Serif", size: 16, color: "388E3C", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Noto Serif", size: 11, color: "1B5E20", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "2E7D32"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Noto Serif', serif;
|
||||
background: #E8F5E9;
|
||||
h1 { font-family: 'Playfair Display SC', serif; font-size: 36pt; font-weight: 700; color: #1B5E20; text-align: center; border-top: 4px double #2E7D32; border-bottom: 4px double #2E7D32; padding: 12px 0; margin-bottom: 24px; letter-spacing: 2px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #388E3C; text-align: center; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #1B5E20; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { border: 1px solid #2E7D32; padding: 20px; margin: 24px 0; background: #C8E6C9; text-align: center; border-radius: 50%; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'credit-card-platinum',
|
||||
name: 'Credit Card Platinum',
|
||||
category: 'Financial',
|
||||
description: 'Premium card aesthetic. Silver/gradient shading with OCR-style raised numbering fonts.',
|
||||
vibe: 'Premium, Silver, Metallic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Krub:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Krub", size: 32, color: "E0E0E0", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "424242", color: "auto", style: "clear" } // Dark grey metallic
|
||||
},
|
||||
heading2: {
|
||||
font: "Share Tech Mono", size: 18, color: "C0C0C0", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true,
|
||||
tracking: 100 // Wide tracking
|
||||
},
|
||||
body: {
|
||||
font: "Krub", size: 11, color: "616161", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "C0C0C0"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Krub', sans-serif;
|
||||
h1 { font-size: 32pt; font-weight: 700; color: #E0E0E0; background: linear-gradient(135deg, #616161, #212121); padding: 16px; margin-bottom: 24px; border-radius: 12px; }
|
||||
h2 { font-family: 'Share Tech Mono', monospace; font-size: 18pt; color: #757575; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 3px; text-shadow: 1px 1px 0 #FFF; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #616161; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #C0C0C0; padding-left: 16px; margin: 24px 0; background: #F5F5F5; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'whiteboard-strategy',
|
||||
name: 'Whiteboard Strategy',
|
||||
category: 'Business',
|
||||
description: 'Brainstorming session. Dry-erase marker fonts in standard office colors (Black, Blue, Red).',
|
||||
vibe: 'Corporate, Brainstorm, Sketch',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Architects Daughter", size: 36, color: "D32F2F", bold: true, align: 'center', // Red marker
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "1976D2", space: 4, style: "single", size: 12 } } // Blue underline
|
||||
},
|
||||
heading2: {
|
||||
font: "Patrick Hand", size: 20, color: "1976D2", bold: true, align: 'left', // Blue marker
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Patrick Hand", size: 14, color: "212121", align: 'left', // Black marker
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Patrick Hand', cursive;
|
||||
background: #FFFFFF;
|
||||
h1 { font-family: 'Architects Daughter', cursive; font-size: 36pt; font-weight: 700; color: #D32F2F; border-bottom: 3px solid #1976D2; padding-bottom: 10px; margin-bottom: 24px; text-align: center; }
|
||||
h2 { font-size: 20pt; font-weight: 700; color: #1976D2; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 14pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 2px solid #388E3C; padding: 16px; margin: 24px 0; border-radius: 16px; color: #388E3C; } /* Green marker box */
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'stock-ticker',
|
||||
name: 'Stock Ticker',
|
||||
category: 'Financial',
|
||||
description: 'LED moving message sign. Dot matrix fonts with bright green/red on black.',
|
||||
vibe: 'Financial, Digital, LED',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=DotGothic16&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "DotGothic16", size: 32, color: "00E676", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "DotGothic16", size: 18, color: "FF1744", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "DotGothic16", size: 12, color: "E0E0E0", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "212121", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "00E676"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'DotGothic16', sans-serif;
|
||||
background: #212121;
|
||||
h1 { font-size: 32pt; color: #00E676; background: #000000; padding: 12px; margin-bottom: 24px; border-bottom: 2px solid #333; }
|
||||
h2 { font-size: 18pt; color: #FF1744; background: #000000; padding: 8px; margin-top: 32px; margin-bottom: 16px; display: inline-block; }
|
||||
p { font-size: 12pt; line-height: 1.5; color: #E0E0E0; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #00E676; padding-left: 16px; margin: 24px 0; color: #B9F6CA; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'police-blotter',
|
||||
name: 'Police Blotter',
|
||||
category: 'Official',
|
||||
description: 'Law enforcement paperwork. Carbon copy blue fonts on stark white forms.',
|
||||
vibe: 'Official, Blue, Bureaucratic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime&family=Special+Elite&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Special Elite", size: 26, color: "0D47A1", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Courier Prime", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "E3F2FD", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 11, color: "1A237E", align: 'left', // Carbon copy blue
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "0D47A1"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
h1 { font-family: 'Special Elite', cursive; font-size: 26pt; color: #0D47A1; margin-bottom: 24px; text-transform: uppercase; text-decoration: underline; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; background: #E3F2FD; display: block; padding: 4px; margin-top: 32px; margin-bottom: 16px; border: 1px solid #0D47A1; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #1A237E; margin-bottom: 14px; }
|
||||
blockquote { border: 1px solid #000; padding: 16px; margin: 24px 0; background: #FAFAFA; }
|
||||
`
|
||||
}
|
||||
];
|
||||
364
styles/creative.ts
Normal file
364
styles/creative.ts
Normal file
@@ -0,0 +1,364 @@
|
||||
import { StyleOption } from '../types';
|
||||
|
||||
export const creativeStyles: StyleOption[] = [
|
||||
{
|
||||
id: 'brutalist-mono',
|
||||
name: 'Brutalist Lab',
|
||||
category: 'Creative',
|
||||
description: 'Raw, monospaced aesthetic. Boxes, thick outlines, and typewriter vibes.',
|
||||
vibe: 'Code, Industrial, Raw',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Space Mono", size: 24, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: {
|
||||
top: { color: "000000", space: 12, style: "single", size: 24 },
|
||||
bottom: { color: "000000", space: 12, style: "single", size: 24 },
|
||||
left: { color: "000000", space: 12, style: "single", size: 24 },
|
||||
right: { color: "000000", space: 12, style: "single", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Space Mono", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "E0E0E0", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Space Mono", size: 10, color: "111111", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Space Mono', monospace;
|
||||
h1 { font-size: 24pt; font-weight: 700; color: #000000; border: 4px solid #000; padding: 16px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; background: #E0E0E0; padding: 8px; margin-top: 32px; margin-bottom: 16px; display: inline-block; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #111111; margin-bottom: 14px; }
|
||||
blockquote { border-left: 6px solid #000; padding-left: 16px; margin: 24px 0; font-weight: 700; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'bauhaus-poster',
|
||||
name: 'Bauhaus Poster',
|
||||
category: 'Creative',
|
||||
description: 'Geometric minimalism. Primary colors, angled text, and strong diagonal compositions.',
|
||||
vibe: 'Artistic, Geometric, Modernist',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&family=Jost:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Josefin Sans", size: 36, color: "D50000", bold: true, align: 'right',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "000000", space: 8, style: "single", size: 36 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Jost", size: 16, color: "2962FF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "FFEB3B", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Jost", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D50000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Jost', sans-serif;
|
||||
h1 { font-family: 'Josefin Sans', sans-serif; font-size: 36pt; font-weight: 700; color: #D50000; text-align: right; border-bottom: 8px solid #000; padding-bottom: 10px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #2962FF; background: #FFEB3B; padding: 8px 16px; margin-top: 32px; margin-bottom: 16px; display: inline-block; transform: rotate(-1deg); }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border-left: 10px solid #D50000; padding-left: 20px; margin: 24px 0; font-style: italic; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'glitch-art',
|
||||
name: 'Glitch Art',
|
||||
category: 'Creative',
|
||||
description: 'Digital distortion aesthetic. Monospaced fonts with neon colors and "broken" styling.',
|
||||
vibe: 'Digital, Glitch, Cyber',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Rubik+Glitch&family=Share+Tech+Mono&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Rubik Glitch", size: 40, color: "D500F9", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "121212", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Share Tech Mono", size: 18, color: "00E5FF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Share Tech Mono", size: 11, color: "BDBDBD", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "00E5FF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
background: #000000;
|
||||
color: #BDBDBD;
|
||||
h1 { font-family: 'Rubik Glitch', cursive; font-size: 40pt; color: #D500F9; background: #121212; padding: 10px; margin-bottom: 24px; text-shadow: 2px 0 #00E5FF; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #00E5FF; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 2px; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #BDBDBD; margin-bottom: 14px; }
|
||||
blockquote { border: 1px solid #D500F9; padding: 16px; margin: 24px 0; color: #D500F9; box-shadow: 4px 4px 0 #00E5FF; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'vaporwave-aesthetic',
|
||||
name: 'Vaporwave Aesthetic',
|
||||
category: 'Creative',
|
||||
description: 'Nostalgic 80s/90s internet culture. Pink and cyan gradients, wide tracking, and ironic luxury.',
|
||||
vibe: 'Nostalgic, Digital, Surreal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Varela+Round&family=Montserrat:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Montserrat", size: 32, color: "FF71CE", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
allCaps: true,
|
||||
tracking: 100 // Wide spacing
|
||||
},
|
||||
heading2: {
|
||||
font: "Varela Round", size: 16, color: "01CDFE", bold: false, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Montserrat", size: 10, color: "B967FF", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "01CDFE"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
background: #F0F0FF;
|
||||
h1 { font-size: 32pt; font-weight: 700; color: #FF71CE; text-align: center; margin-bottom: 24px; letter-spacing: 4px; text-shadow: 2px 2px #01CDFE; text-transform: uppercase; }
|
||||
h2 { font-family: 'Varela Round', sans-serif; font-size: 16pt; color: #01CDFE; text-align: center; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #B967FF; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 2px solid #FF71CE; padding: 16px; margin: 24px 0; background: #E0FFFF; color: #01CDFE; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'pop-art-comic',
|
||||
name: 'Pop Art Comic',
|
||||
category: 'Creative',
|
||||
description: 'Roy Lichtenstein inspired. Bold black outlines, halftone vibes, and primary colors.',
|
||||
vibe: 'Comic, Bold, Pop',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Bangers", size: 42, color: "000000", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFFF00", color: "auto", style: "clear" } // Yellow back
|
||||
},
|
||||
heading2: {
|
||||
font: "Bangers", size: 24, color: "FFFFFF", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "FF0000", color: "auto", style: "clear" } // Red back
|
||||
},
|
||||
body: {
|
||||
font: "Comic Neue", size: 12, color: "000000", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Comic Neue', sans-serif;
|
||||
h1 { font-family: 'Bangers', cursive; font-size: 42pt; color: #000000; background: #FFFF00; padding: 10px; border: 4px solid #000; box-shadow: 5px 5px 0 #000; margin-bottom: 24px; display: inline-block; }
|
||||
h2 { font-family: 'Bangers', cursive; font-size: 24pt; color: #FFFFFF; background: #FF0000; padding: 5px 15px; border: 3px solid #000; margin-top: 32px; margin-bottom: 16px; display: inline-block; transform: rotate(-2deg); }
|
||||
p { font-size: 12pt; line-height: 1.5; color: #000000; margin-bottom: 14px; font-weight: 700; }
|
||||
blockquote { background: #FFFFFF; border: 3px solid #000; padding: 20px; border-radius: 50% / 20%; margin: 24px 0; text-align: center; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'grunge-90s',
|
||||
name: 'Grunge 90s',
|
||||
category: 'Creative',
|
||||
description: 'Distressed and edgy. David Carson inspired typography with overlapping elements and grit.',
|
||||
vibe: 'Dirty, Edgy, Chaotic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Special+Elite&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Permanent Marker", size: 36, color: "333333", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Special Elite", size: 18, color: "8B0000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "000000", space: 4, style: "dashed", size: 12 } }
|
||||
},
|
||||
body: {
|
||||
font: "Special Elite", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "8B0000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Special Elite', cursive;
|
||||
background-color: #F0F0F0;
|
||||
h1 { font-family: 'Permanent Marker', cursive; font-size: 36pt; color: #333333; text-align: center; margin-bottom: 24px; transform: rotate(1deg); opacity: 0.9; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #8B0000; margin-top: 32px; margin-bottom: 16px; border-bottom: 2px dashed #000; display: inline-block; transform: skewX(-5deg); }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 3px solid #000; padding: 16px; margin: 24px 0; background: #D3D3D3; transform: rotate(-1deg); }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'risograph-print',
|
||||
name: 'Risograph Print',
|
||||
category: 'Creative',
|
||||
description: 'Independent publishing style. Grainy textures, misalignment, and vibrant spot colors (Pink/Teal).',
|
||||
vibe: 'Artistic, Indie, Textured',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Eb+Garamond:ital,wght@0,400;0,700;1,400&family=Karla:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Eb Garamond", size: 42, color: "FF007F", bold: true, align: 'left', // Riso Pink
|
||||
spacing: { before: 400, after: 200, line: 200 },
|
||||
italic: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Karla", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "00A9FF", color: "auto", style: "clear" } // Riso Blue background
|
||||
},
|
||||
body: {
|
||||
font: "Karla", size: 10, color: "1A1A1A", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FF007F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Karla', sans-serif;
|
||||
background: #FFFEF0;
|
||||
h1 { font-family: 'Eb Garamond', serif; font-size: 42pt; font-weight: 700; font-style: italic; color: #FF007F; margin-bottom: 24px; mix-blend-mode: multiply; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; background: #00A9FF; display: inline-block; padding: 4px 10px; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #1A1A1A; margin-bottom: 14px; }
|
||||
blockquote { border-left: 6px solid #FF007F; padding-left: 16px; margin: 24px 0; color: #555; font-style: italic; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'blueprint-cyanotype',
|
||||
name: 'Blueprint Cyanotype',
|
||||
category: 'Creative',
|
||||
description: 'Architectural blueprint style. White lines on a deep cyan blue background.',
|
||||
vibe: 'Technical, Blue, Schematic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Roboto+Mono:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Architects Daughter", size: 32, color: "FFFFFF", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "FFFFFF", space: 4, style: "single", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto Mono", size: 14, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Roboto Mono", size: 10, color: "E0F7FA", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FFFFFF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
background: #0047AB; /* Cobalt/Blueprint Blue */
|
||||
color: #FFFFFF;
|
||||
h1 { font-family: 'Architects Daughter', cursive; font-size: 32pt; font-weight: 700; color: #FFFFFF; text-align: center; border-bottom: 2px solid #FFFFFF; margin-bottom: 24px; padding-bottom: 8px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #FFFFFF; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; border: 1px solid #FFF; display: inline-block; padding: 4px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #E0F7FA; margin-bottom: 14px; }
|
||||
blockquote { border: 1px dashed #FFFFFF; padding: 16px; margin: 24px 0; background: #003380; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'street-art-graffiti',
|
||||
name: 'Street Art Graffiti',
|
||||
category: 'Creative',
|
||||
description: 'Urban street style. Spray paint fonts, dripping effects, and concrete vibes.',
|
||||
vibe: 'Urban, Rebel, Spray',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Rock+Salt&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Permanent Marker", size: 48, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFFF00", color: "auto", style: "clear" } // Hazard Yellow
|
||||
},
|
||||
heading2: {
|
||||
font: "Rock Salt", size: 18, color: "FF0000", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Permanent Marker", size: 12, color: "333333", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Permanent Marker', cursive;
|
||||
background: #F0F0F0;
|
||||
h1 { font-size: 48pt; color: #000000; text-align: center; background: #FFFF00; padding: 10px; transform: rotate(-2deg); margin-bottom: 24px; box-shadow: 4px 4px 0 #000; }
|
||||
h2 { font-family: 'Rock Salt', cursive; font-size: 18pt; color: #FF0000; margin-top: 32px; margin-bottom: 16px; transform: rotate(1deg); }
|
||||
p { font-size: 12pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
|
||||
blockquote { border-left: 5px solid #000; padding-left: 16px; margin: 24px 0; font-family: 'Rock Salt', cursive; font-size: 10pt; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'origami-paper',
|
||||
name: 'Origami Paper',
|
||||
category: 'Creative',
|
||||
description: 'Folded paper aesthetic. Sharp angles, subtle shadows, and crisp typography.',
|
||||
vibe: 'Delicate, Sharp, Paper',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@400;700&family=Muli:wght@300;400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Cormorant Unicase", size: 32, color: "37474F", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Cormorant Unicase", size: 16, color: "546E7A", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Muli", size: 10, color: "455A64", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "37474F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Muli', sans-serif;
|
||||
background: #FAFAFA;
|
||||
h1 { font-family: 'Cormorant Unicase', serif; font-size: 32pt; font-weight: 700; color: #37474F; text-align: center; margin-bottom: 24px; text-shadow: 1px 1px 0 #CCC; }
|
||||
h2 { font-family: 'Cormorant Unicase', serif; font-size: 16pt; color: #546E7A; margin-top: 32px; margin-bottom: 16px; border-bottom: 1px solid #CFD8DC; display: inline-block; padding-bottom: 4px; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #455A64; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF; padding: 20px; border: 1px solid #ECEFF1; box-shadow: 2px 2px 5px rgba(0,0,0,0.05); margin: 24px 0; transform: rotate(1deg); }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'watercolor-wash',
|
||||
name: 'Watercolor Wash',
|
||||
category: 'Creative',
|
||||
description: 'Artistic and fluid. Soft blended colors and painterly fonts.',
|
||||
vibe: 'Artistic, Soft, Fluid',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Amatic+SC:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Kalam", size: 36, color: "7986CB", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Amatic SC", size: 24, color: "4DB6AC", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Kalam", size: 12, color: "616161", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "7986CB"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Kalam', cursive;
|
||||
h1 { font-size: 36pt; font-weight: 700; color: #7986CB; text-align: center; margin-bottom: 24px; text-shadow: 2px 2px 4px rgba(121, 134, 203, 0.3); }
|
||||
h2 { font-family: 'Amatic SC', cursive; font-size: 24pt; font-weight: 700; color: #4DB6AC; text-align: center; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 12pt; line-height: 1.6; color: #616161; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 2px solid #E0F2F1; background: #E8EAF6; padding: 20px; border-radius: 50% 20% / 10% 40%; margin: 24px 0; text-align: center; }
|
||||
`
|
||||
}
|
||||
];
|
||||
284
styles/editorial.ts
Normal file
284
styles/editorial.ts
Normal file
@@ -0,0 +1,284 @@
|
||||
import { StyleOption } from '../types';
|
||||
|
||||
export const editorialStyles: StyleOption[] = [
|
||||
{
|
||||
id: 'ny-editor',
|
||||
name: 'The Editorial',
|
||||
category: 'Editorial',
|
||||
description: 'High-contrast serifs, centered headers, delicate borders. Feels like a premium magazine feature.',
|
||||
vibe: 'Luxury, Fashion, Literature',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;1,400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display", size: 36, color: "111111", bold: true, italic: true, align: 'center',
|
||||
spacing: { before: 600, after: 400, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Playfair Display", size: 14, color: "444444", bold: true, allCaps: true, tracking: 100, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "DDDDDD", space: 8, style: "single", size: 4 } }
|
||||
},
|
||||
body: {
|
||||
font: "Lora", size: 11, color: "333333", align: 'both',
|
||||
spacing: { before: 0, after: 200, line: 320 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Lora', serif;
|
||||
h1 { font-family: 'Playfair Display', serif; font-size: 36pt; font-weight: 700; font-style: italic; text-align: center; margin-bottom: 30px; }
|
||||
h2 { font-family: 'Playfair Display', serif; font-size: 14pt; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; text-align: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-top: 40px; color: #444; }
|
||||
p { font-size: 11pt; line-height: 1.8; text-align: justify; margin-bottom: 20px; }
|
||||
blockquote { font-family: 'Playfair Display', serif; font-size: 18pt; font-style: italic; text-align: center; color: #555; margin: 40px 20px; border: none; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'luxury-editorial',
|
||||
name: 'Luxury Editorial',
|
||||
category: 'Editorial',
|
||||
description: 'High-fashion magazine inspired design. Elegant serifs with sophisticated spacing and premium feel for upscale content.',
|
||||
vibe: 'Fashion, Premium, Sophisticated',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;700&family=Montserrat:wght@300;400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Cormorant", size: 36, color: "1C1C1C", bold: false, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Montserrat", size: 11, color: "1C1C1C", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Montserrat", size: 10, color: "3A3A3A", align: 'left',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "B8860B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
h1 { font-family: 'Cormorant', serif; font-size: 36pt; font-weight: 500; color: #1C1C1C; text-align: center; margin-bottom: 32px; letter-spacing: 2px; }
|
||||
h2 { font-size: 11pt; font-weight: 500; color: #1C1C1C; margin-top: 36px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 3px; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #3A3A3A; margin-bottom: 16px; font-weight: 300; }
|
||||
blockquote { border-top: 1px solid #B8860B; border-bottom: 1px solid #B8860B; padding: 24px 0; margin: 32px 0; text-align: center; font-family: 'Cormorant', serif; font-size: 14pt; font-style: italic; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'newspaper-classic',
|
||||
name: 'Newspaper Classic',
|
||||
category: 'Editorial',
|
||||
description: 'Traditional newspaper layout with strong typographic hierarchy. Bold headlines, readable body text, and authoritative presence.',
|
||||
vibe: 'News, Authority, Information',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=PT+Serif:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display", size: 36, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 240, after: 160, line: 220 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Playfair Display", size: 16, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 120, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "PT Serif", size: 10, color: "1A1A1A", align: 'both',
|
||||
spacing: { before: 0, after: 120, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'PT Serif', serif;
|
||||
h1 { font-family: 'Playfair Display', serif; font-size: 36pt; font-weight: 900; color: #000000; text-align: center; border-bottom: 2px solid #000000; padding-bottom: 12px; margin-bottom: 20px; }
|
||||
h2 { font-family: 'Playfair Display', serif; font-size: 16pt; font-weight: 700; color: #000000; margin-top: 24px; margin-bottom: 12px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #1A1A1A; margin-bottom: 10px; text-align: justify; }
|
||||
blockquote { font-size: 14pt; font-style: italic; text-align: center; margin: 24px 40px; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'newspaper-modern',
|
||||
name: 'Newspaper Modern',
|
||||
category: 'Editorial',
|
||||
description: 'Contemporary newspaper design balancing tradition with modern sensibilities. Clean grid-based layout.',
|
||||
vibe: 'Modern, Editorial, Informative',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "DM Serif Display", size: 36, color: "1A1A1A", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 200, line: 220 }
|
||||
},
|
||||
heading2: {
|
||||
font: "DM Sans", size: 12, color: "1A1A1A", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "DM Sans", size: 10, color: "333333", align: 'both',
|
||||
spacing: { before: 0, after: 140, line: 280 }
|
||||
},
|
||||
accentColor: "DC2626"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
h1 { font-family: 'DM Serif Display', serif; font-size: 36pt; color: #1A1A1A; margin-bottom: 24px; }
|
||||
h2 { font-size: 12pt; font-weight: 700; color: #1A1A1A; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 12px; text-align: justify; }
|
||||
blockquote { font-size: 16pt; font-style: italic; font-family: 'DM Serif Display', serif; text-align: center; margin: 28px 20px; color: #DC2626; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'newspaper-tabloid',
|
||||
name: 'Newspaper Tabloid',
|
||||
category: 'Editorial',
|
||||
description: 'Sensationalist news design. Condensed, heavy headers with urgent red accents.',
|
||||
vibe: 'Urgent, Bold, Sensational',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Antonio:wght@700&family=Pathway+Extreme:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Antonio", size: 42, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 200 },
|
||||
shading: { fill: "D50000", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Antonio", size: 20, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 220 }
|
||||
},
|
||||
body: {
|
||||
font: "Pathway Extreme", size: 10, color: "111111", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D50000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Pathway Extreme', sans-serif;
|
||||
h1 { font-family: 'Antonio', sans-serif; font-size: 42pt; font-weight: 700; color: #FFFFFF; background: #D50000; padding: 12px 16px; margin-bottom: 24px; text-transform: uppercase; line-height: 1; }
|
||||
h2 { font-family: 'Antonio', sans-serif; font-size: 20pt; font-weight: 700; color: #000000; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.5; color: #111111; margin-bottom: 14px; }
|
||||
blockquote { font-size: 14pt; font-weight: 700; font-style: italic; color: #000000; border-left: 6px solid #D50000; padding-left: 16px; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'indie-zine',
|
||||
name: 'Indie Zine',
|
||||
category: 'Editorial',
|
||||
description: 'DIY photocopier aesthetic. Typewriter fonts, cut-out look, and rebellious asymmetry.',
|
||||
vibe: 'DIY, Rebellious, Rough',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Special+Elite&family=Rock+Salt&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Rock Salt", size: 28, color: "000000", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "D1C4E9", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Special Elite", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "000000", space: 4, style: "single", size: 12 } }
|
||||
},
|
||||
body: {
|
||||
font: "Special Elite", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Special Elite', cursive;
|
||||
h1 { font-family: 'Rock Salt', cursive; font-size: 28pt; color: #000000; background: #D1C4E9; padding: 10px; transform: rotate(-2deg); margin-bottom: 24px; display: inline-block; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; border-bottom: 2px solid #000; margin-top: 32px; margin-bottom: 16px; width: fit-content; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 2px dashed #000; padding: 16px; margin: 24px 0; transform: rotate(1deg); }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'literary-review',
|
||||
name: 'Literary Review',
|
||||
category: 'Editorial',
|
||||
description: 'Classic bookish aesthetic. Dense serif text, elegant headers, perfect for long-form essays.',
|
||||
vibe: 'Intellectual, Dense, Classic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,700;1,400&family=Sorts+Mill+Goudy&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Crimson Pro", size: 30, color: "4A148C", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Crimson Pro", size: 14, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 360, after: 180, line: 240 },
|
||||
smallCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Sorts Mill Goudy", size: 11, color: "212121", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "4A148C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Sorts Mill Goudy', serif;
|
||||
h1 { font-family: 'Crimson Pro', serif; font-size: 30pt; font-weight: 700; color: #4A148C; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-family: 'Crimson Pro', serif; font-size: 14pt; color: #000000; text-align: center; margin-top: 36px; margin-bottom: 18px; font-variant: small-caps; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #212121; margin-bottom: 16px; text-align: justify; }
|
||||
blockquote { margin: 24px 40px; font-style: italic; color: #4A148C; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'fashion-magazine',
|
||||
name: 'Fashion Magazine',
|
||||
category: 'Editorial',
|
||||
description: 'Trendy and bold. High-contrast typography with oversized lettering and pink accents.',
|
||||
vibe: 'Trendy, Loud, Pink',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Raleway:wght@300;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Abril Fatface", size: 48, color: "E91E63", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 200 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Raleway", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true,
|
||||
tracking: 200
|
||||
},
|
||||
body: {
|
||||
font: "Raleway", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "E91E63"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Raleway', sans-serif;
|
||||
h1 { font-family: 'Abril Fatface', cursive; font-size: 48pt; color: #E91E63; margin-bottom: 24px; line-height: 0.9; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; text-transform: uppercase; letter-spacing: 4px; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; font-weight: 300; }
|
||||
blockquote { border-left: 10px solid #E91E63; padding-left: 20px; margin: 24px 0; font-family: 'Abril Fatface', cursive; font-size: 18pt; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'film-script',
|
||||
name: 'Film Script',
|
||||
category: 'Editorial',
|
||||
description: 'Hollywood screenplay format. Courier font, specific margins, and character name centering.',
|
||||
vibe: 'Cinematic, Format, Draft',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Courier Prime", size: 12, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 240, line: 240 },
|
||||
allCaps: true,
|
||||
underline: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Courier Prime", size: 12, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 0, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 12, color: "000000", align: 'left',
|
||||
spacing: { before: 0, after: 0, line: 240 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
h1 { font-size: 12pt; font-weight: 700; color: #000000; text-decoration: underline; text-transform: uppercase; margin-bottom: 12px; }
|
||||
h2 { font-size: 12pt; font-weight: 700; color: #000000; text-transform: uppercase; text-align: center; margin-top: 24px; margin-bottom: 0px; }
|
||||
p { font-size: 12pt; line-height: 1; color: #000000; margin-bottom: 12px; }
|
||||
blockquote { margin: 0 40px; text-align: center; }
|
||||
`
|
||||
}
|
||||
];
|
||||
22
styles/index.ts
Normal file
22
styles/index.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { StyleOption } from '../types';
|
||||
import { minimalistStyles } from './minimalist';
|
||||
import { editorialStyles } from './editorial';
|
||||
import { corporateStyles } from './corporate';
|
||||
import { techStyles } from './tech';
|
||||
import { creativeStyles } from './creative';
|
||||
import { vintageStyles } from './vintage';
|
||||
import { lifestyleStyles } from './lifestyle';
|
||||
import { academicStyles } from './academic';
|
||||
import { industrialStyles } from './industrial';
|
||||
|
||||
export const ALL_STYLES: StyleOption[] = [
|
||||
...minimalistStyles,
|
||||
...editorialStyles,
|
||||
...corporateStyles,
|
||||
...techStyles,
|
||||
...creativeStyles,
|
||||
...vintageStyles,
|
||||
...lifestyleStyles,
|
||||
...academicStyles,
|
||||
...industrialStyles
|
||||
];
|
||||
617
styles/industrial.ts
Normal file
617
styles/industrial.ts
Normal file
@@ -0,0 +1,617 @@
|
||||
import { StyleOption } from '../types';
|
||||
|
||||
export const industrialStyles: StyleOption[] = [
|
||||
{
|
||||
id: 'construction-industrial',
|
||||
name: 'Construction Industrial',
|
||||
category: 'Industrial',
|
||||
description: 'Bold and sturdy design for construction and industrial companies. Strong typography with safety-inspired colors.',
|
||||
vibe: 'Strong, Industrial, Professional',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Roboto:wght@400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Oswald", size: 28, color: "212121", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFC107", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Oswald", size: 16, color: "FF8F00", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto", size: 10, color: "37474F", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FF8F00"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto', sans-serif;
|
||||
h1 { font-family: 'Oswald', sans-serif; font-size: 28pt; font-weight: 700; color: #212121; background: #FFC107; padding: 16px 20px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-family: 'Oswald', sans-serif; font-size: 16pt; font-weight: 700; color: #FF8F00; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #37474F; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF8E1; padding: 16px; border-left: 6px solid #FF8F00; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'automotive-bold',
|
||||
name: 'Automotive Bold',
|
||||
category: 'Automotive',
|
||||
description: 'Powerful design for automotive and motorsport industries. Bold typography with dynamic energy and speed.',
|
||||
vibe: 'Powerful, Dynamic, Bold',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700&family=Barlow:wght@400;500;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Teko", size: 40, color: "B71C1C", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 200 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Teko", size: 20, color: "212121", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 220 }
|
||||
},
|
||||
body: {
|
||||
font: "Barlow", size: 10, color: "37474F", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "B71C1C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Barlow', sans-serif;
|
||||
h1 { font-family: 'Teko', sans-serif; font-size: 40pt; font-weight: 700; color: #B71C1C; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 2px; }
|
||||
h2 { font-family: 'Teko', sans-serif; font-size: 20pt; font-weight: 500; color: #212121; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #37474F; margin-bottom: 14px; }
|
||||
blockquote { background: #FFEBEE; padding: 16px; border-left: 6px solid #B71C1C; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'real-estate-premium',
|
||||
name: 'Real Estate Premium',
|
||||
category: 'Real Estate',
|
||||
description: 'Sophisticated design for luxury real estate and property marketing. Elegant typography with premium golden accents.',
|
||||
vibe: 'Luxury, Premium, Sophisticated',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Lato:wght@300;400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Cinzel", size: 28, color: "1A1A1A", bold: false, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Cinzel", size: 14, color: "B8860B", bold: false, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Lato", size: 10, color: "4A4A4A", align: 'left',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "B8860B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Lato', sans-serif;
|
||||
h1 { font-family: 'Cinzel', serif; font-size: 28pt; font-weight: 600; color: #1A1A1A; text-align: center; margin-bottom: 32px; letter-spacing: 4px; }
|
||||
h2 { font-family: 'Cinzel', serif; font-size: 14pt; color: #B8860B; margin-top: 36px; margin-bottom: 18px; letter-spacing: 2px; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #4A4A4A; margin-bottom: 16px; font-weight: 300; }
|
||||
blockquote { border-top: 1px solid #B8860B; border-bottom: 1px solid #B8860B; padding: 24px 0; margin: 32px 0; text-align: center; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'environmental-green',
|
||||
name: 'Environmental Green',
|
||||
category: 'Sustainability',
|
||||
description: 'Nature-inspired design for environmental and sustainability communications. Organic feel with earthy green palette.',
|
||||
vibe: 'Natural, Sustainable, Organic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bitter:wght@400;500;700&family=Karla:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Bitter", size: 26, color: "2E7D32", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Bitter", size: 14, color: "388E3C", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Karla", size: 10, color: "3E4A3D", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "2E7D32"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Karla', sans-serif;
|
||||
h1 { font-family: 'Bitter', serif; font-size: 26pt; font-weight: 700; color: #2E7D32; margin-bottom: 24px; }
|
||||
h2 { font-family: 'Bitter', serif; font-size: 14pt; font-weight: 700; color: #388E3C; margin-top: 30px; margin-bottom: 14px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #3E4A3D; margin-bottom: 14px; }
|
||||
blockquote { background: #E8F5E9; padding: 16px; border-left: 4px solid #2E7D32; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'aviation-classic',
|
||||
name: 'Aviation Classic',
|
||||
category: 'Transport',
|
||||
description: 'Vintage aviation inspired design. Classic military typography with heritage color palette.',
|
||||
vibe: 'Heritage, Classic, Aviation',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Stencil&family=Public+Sans:wght@400;500;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Stencil", size: 28, color: "1B4D3E", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Public Sans", size: 13, color: "8B0000", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Public Sans", size: 10, color: "363636", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "8B0000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Public Sans', sans-serif;
|
||||
h1 { font-family: 'Stencil', sans-serif; font-size: 28pt; color: #1B4D3E; margin-bottom: 24px; letter-spacing: 3px; }
|
||||
h2 { font-size: 13pt; font-weight: 600; color: #8B0000; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #363636; margin-bottom: 14px; }
|
||||
blockquote { background: #F5F5DC; padding: 16px; border-left: 4px solid #1B4D3E; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'architecture-firm',
|
||||
name: 'Architecture Firm',
|
||||
category: 'Architecture',
|
||||
description: 'Structural precision for architecture and design firms. Clean geometry with sophisticated restraint.',
|
||||
vibe: 'Structural, Precise, Sophisticated',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Fahkwang:wght@400;500;600&family=Manrope:wght@300;400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Fahkwang", size: 28, color: "1A1A1A", bold: false, align: 'left',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Manrope", size: 12, color: "4A4A4A", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Manrope", size: 10, color: "525252", align: 'left',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "1A1A1A"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Manrope', sans-serif;
|
||||
h1 { font-family: 'Fahkwang', sans-serif; font-size: 28pt; font-weight: 500; color: #1A1A1A; margin-bottom: 32px; letter-spacing: 1px; }
|
||||
h2 { font-size: 12pt; font-weight: 500; color: #4A4A4A; margin-top: 40px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #525252; margin-bottom: 16px; font-weight: 300; }
|
||||
blockquote { border-left: 1px solid #1A1A1A; padding-left: 24px; margin: 32px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'electric-vehicle',
|
||||
name: 'Electric Vehicle',
|
||||
category: 'Automotive',
|
||||
description: 'Sustainable tech design for electric vehicle and clean energy content. Eco-modern with electric accents.',
|
||||
vibe: 'Sustainable, Modern, Electric',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Electrolize&family=Mulish:wght@400;600;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Electrolize", size: 28, color: "10B981", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Mulish", size: 14, color: "1E293B", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Mulish", size: 10, color: "475569", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "10B981"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Mulish', sans-serif;
|
||||
h1 { font-family: 'Electrolize', sans-serif; font-size: 28pt; color: #10B981; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #1E293B; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #475569; margin-bottom: 14px; }
|
||||
blockquote { background: #ECFDF5; padding: 16px; border-left: 4px solid #10B981; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'industrial-blueprint',
|
||||
name: 'Industrial Blueprint',
|
||||
category: 'Technical',
|
||||
description: 'Engineering-inspired design reminiscent of technical blueprints. Precise typography with drafting aesthetics.',
|
||||
vibe: 'Technical, Precise, Engineering',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Titillium+Web:wght@400;600;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Titillium Web", size: 24, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "1A3A5C", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Titillium Web", size: 14, color: "1A3A5C", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Share Tech Mono", size: 9, color: "2C4A6B", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "1A3A5C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
h1 { font-family: 'Titillium Web', sans-serif; font-size: 24pt; font-weight: 700; color: #FFFFFF; background: #1A3A5C; padding: 16px 20px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-family: 'Titillium Web', sans-serif; font-size: 14pt; font-weight: 700; color: #1A3A5C; margin-top: 30px; margin-bottom: 14px; }
|
||||
p { font-size: 9pt; line-height: 1.7; color: #2C4A6B; margin-bottom: 14px; }
|
||||
blockquote { background: #E8F4FC; padding: 16px; border: 1px dashed #1A3A5C; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'tactical-military',
|
||||
name: 'Tactical Military',
|
||||
category: 'Industrial',
|
||||
description: 'Military-spec aesthetic. Stencil typography with olive drab and technical readouts.',
|
||||
vibe: 'Tactical, Sturdy, Regulated',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Quantico:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Allerta Stencil", size: 28, color: "33691E", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "558B2F", space: 6, style: "single", size: 16 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Quantico", size: 14, color: "558B2F", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Quantico", size: 10, color: "1B1B1B", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "33691E"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Quantico', sans-serif;
|
||||
background: #F1F8E9;
|
||||
h1 { font-family: 'Allerta Stencil', sans-serif; font-size: 28pt; color: #33691E; border-bottom: 4px solid #558B2F; padding-bottom: 12px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #558B2F; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #1B1B1B; margin-bottom: 14px; }
|
||||
blockquote { border: 2px solid #33691E; padding: 16px; margin: 20px 0; background: #DCEDC8; font-family: 'Quantico', sans-serif; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'logistics-freight',
|
||||
name: 'Logistics Freight',
|
||||
category: 'Industrial',
|
||||
description: 'Shipping and cargo aesthetic. Stenciled, heavy typography with industrial orange and slate blue.',
|
||||
vibe: 'Industrial, Heavy, Shipping',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Saira+Stencil+One&family=Saira:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Saira Stencil One", size: 36, color: "E65100", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Saira", size: 16, color: "263238", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Saira", size: 10, color: "455A64", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "E65100"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Saira', sans-serif;
|
||||
h1 { font-family: 'Saira Stencil One', sans-serif; font-size: 36pt; color: #E65100; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 600; color: #263238; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.5; color: #455A64; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF3E0; padding: 16px; border-left: 8px solid #263238; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'public-transit',
|
||||
name: 'Public Transit',
|
||||
category: 'Urban',
|
||||
description: 'Subway map and transit signage aesthetic. Clean, highly legible sans-serifs with color-coded lines.',
|
||||
vibe: 'Urban, Functional, Color-coded',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Mukta:wght@400;700&family=Hanken+Grotesk:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Hanken Grotesk", size: 32, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "FFC107", space: 8, style: "single", size: 24 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Mukta", size: 18, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "EEEEEE", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Mukta", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FFC107"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Mukta', sans-serif;
|
||||
h1 { font-family: 'Hanken Grotesk', sans-serif; font-size: 32pt; font-weight: 700; color: #000000; border-bottom: 6px solid #FFC107; padding-bottom: 12px; margin-bottom: 24px; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #000000; background: #EEEEEE; padding: 4px 12px; margin-top: 32px; margin-bottom: 16px; display: inline-block; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border-left: 6px solid #F44336; padding-left: 16px; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'industrial-safety',
|
||||
name: 'Industrial Safety',
|
||||
category: 'Industrial',
|
||||
description: 'Construction site signage. Heavy blacks and yellow caution stripes.',
|
||||
vibe: 'Safety, Bold, Construction',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Anton", size: 48, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFD600", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto", size: 16, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "000000", space: 4, style: "thick", size: 24 } },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Roboto", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FFD600"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto', sans-serif;
|
||||
h1 { font-family: 'Anton', sans-serif; font-size: 48pt; color: #000000; background: repeating-linear-gradient(45deg, #FFD600, #FFD600 10px, #FFC400 10px, #FFC400 20px); text-align: center; padding: 20px; margin-bottom: 24px; text-transform: uppercase; border: 4px solid #000; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #000000; margin-top: 32px; margin-bottom: 16px; border-bottom: 4px solid #000; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 2px solid #000; background: #FFF9C4; padding: 16px; margin: 24px 0; font-weight: 700; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'highway-interstate',
|
||||
name: 'Highway Interstate',
|
||||
category: 'Urban',
|
||||
description: 'Road signage aesthetic. Reflective white text on deep highway green backgrounds.',
|
||||
vibe: 'Functional, Travel, Signage',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&family=Public+Sans:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Overpass", size: 36, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "00695C", color: "auto", style: "clear" },
|
||||
border: {
|
||||
bottom: { color: "FFFFFF", space: 4, style: "single", size: 12 },
|
||||
top: { color: "FFFFFF", space: 4, style: "single", size: 12 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Public Sans", size: 18, color: "004D40", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Public Sans", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "00695C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Public Sans', sans-serif;
|
||||
h1 { font-family: 'Overpass', sans-serif; font-size: 36pt; font-weight: 700; color: #FFFFFF; background: #00695C; padding: 16px; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; margin-bottom: 24px; border-radius: 8px; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #004D40; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { background: #FFEB3B; color: #000; padding: 16px; margin: 24px 0; border: 4px solid #000; transform: skewX(-10deg); width: fit-content; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'furniture-manual',
|
||||
name: 'Furniture Manual',
|
||||
category: 'Instructional',
|
||||
description: 'Flat-pack assembly guide. Clean, heavy line art vibes with friendly sans-serifs.',
|
||||
vibe: 'Clean, Instructional, Neutral',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Varela+Round&family=Hind:wght@300;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Varela Round", size: 32, color: "000000", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Varela Round", size: 16, color: "000000", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: {
|
||||
bottom: { color: "000000", space: 4, style: "single", size: 12 },
|
||||
left: { color: "000000", space: 4, style: "single", size: 12 }
|
||||
},
|
||||
shading: { fill: "F5F5F5", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Hind", size: 11, color: "424242", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Hind', sans-serif;
|
||||
h1 { font-family: 'Varela Round', sans-serif; font-size: 32pt; color: #000000; margin-bottom: 24px; }
|
||||
h2 { font-family: 'Varela Round', sans-serif; font-size: 16pt; color: #000000; background: #F5F5F5; padding: 8px; border-left: 4px solid #000; border-bottom: 2px solid #000; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
|
||||
blockquote { border: 2px solid #000; padding: 20px; margin: 24px 0; border-radius: 50%; width: 50px; height: 50px; line-height: 50px; text-align: center; font-weight: 700; font-size: 24pt; display: inline-block; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'night-vision',
|
||||
name: 'Night Vision',
|
||||
category: 'Tactical',
|
||||
description: 'Military optics style. Grainy bright greens on dark green background.',
|
||||
vibe: 'Tactical, Green, Grainy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Wallpoet&family=Roboto+Mono:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Wallpoet", size: 32, color: "76FF03", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
shading: { fill: "1B5E20", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto Mono", size: 16, color: "CCFF90", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "76FF03", space: 4, style: "dotted", size: 12 } }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto Mono", size: 10, color: "B2FF59", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "76FF03"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
background: #000000;
|
||||
h1 { font-family: 'Wallpoet', cursive; font-size: 32pt; color: #76FF03; background: #1B5E20; padding: 16px; text-align: center; margin-bottom: 24px; text-shadow: 0 0 10px #76FF03; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #CCFF90; margin-top: 32px; margin-bottom: 16px; border-bottom: 2px dotted #76FF03; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #B2FF59; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #76FF03; padding-left: 16px; margin: 24px 0; color: #64DD17; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'fire-station',
|
||||
name: 'Fire Station',
|
||||
category: 'Service',
|
||||
description: 'Engine company aesthetic. Fire engine red, brass gold, and bold gothic numbers.',
|
||||
vibe: 'Brave, Red, Gold',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Anton&family=Rokkitt:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Anton", size: 40, color: "B71C1C", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: {
|
||||
top: { color: "FFD600", space: 6, style: "thick", size: 24 },
|
||||
bottom: { color: "FFD600", space: 6, style: "thick", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Rokkitt", size: 18, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Rokkitt", size: 12, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "B71C1C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Rokkitt', serif;
|
||||
h1 { font-family: 'Anton', sans-serif; font-size: 40pt; color: #B71C1C; text-align: center; border-top: 6px solid #FFD600; border-bottom: 6px solid #FFD600; padding: 16px 0; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #000000; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 12pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { background: #FFEBEE; border: 2px solid #B71C1C; padding: 16px; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'taxi-cab',
|
||||
name: 'Taxi Cab',
|
||||
category: 'Urban',
|
||||
description: 'Yellow cab aesthetic. Checkerboard patterns (simulated) and bold black on yellow.',
|
||||
vibe: 'Urban, Yellow, Bold',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Archivo+Black&family=Roboto:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Archivo Black", size: 36, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFEB3B", color: "auto", style: "clear" },
|
||||
border: {
|
||||
top: { color: "000000", space: 4, style: "dashed", size: 24 }, // Simulates checkers
|
||||
bottom: { color: "000000", space: 4, style: "dashed", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto", size: 18, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "FFFFFF", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto", size: 12, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FFEB3B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background: #212121;
|
||||
padding: 20px;
|
||||
h1 { font-family: 'Archivo Black', sans-serif; font-size: 36pt; color: #000000; background: #FFEB3B; padding: 16px; margin-bottom: 24px; text-align: center; border-top: 6px dashed #000; border-bottom: 6px dashed #000; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #000000; background: #FFFFFF; padding: 8px; margin-top: 32px; margin-bottom: 16px; text-align: center; display: inline-block; }
|
||||
p { font-size: 12pt; line-height: 1.5; color: #FFFFFF; margin-bottom: 14px; }
|
||||
blockquote { background: #FFEB3B; color: #000; padding: 16px; margin: 24px 0; font-weight: 700; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'subway-tile',
|
||||
name: 'Subway Tile',
|
||||
category: 'Urban',
|
||||
description: 'Classic station ceramics. Clean white backgrounds, heavy black text, and tile-like framing.',
|
||||
vibe: 'Clean, Ceramic, Urban',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;600&family=Lexend:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Lexend", size: 36, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: {
|
||||
top: { color: "000000", space: 12, style: "single", size: 4 },
|
||||
bottom: { color: "000000", space: 12, style: "single", size: 4 },
|
||||
left: { color: "000000", space: 12, style: "single", size: 4 },
|
||||
right: { color: "000000", space: 12, style: "single", size: 4 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Work Sans", size: 16, color: "212121", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Work Sans", size: 11, color: "424242", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
h1 { font-family: 'Lexend', sans-serif; font-size: 36pt; font-weight: 700; color: #000000; border: 4px solid #000000; padding: 16px; margin-bottom: 24px; text-align: center; background: #FFFFFF; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #212121; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
|
||||
blockquote { border-left: 8px solid #000; padding-left: 16px; margin: 24px 0; background: #F5F5F5; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'german-autobahn',
|
||||
name: 'German Autobahn',
|
||||
category: 'Transport',
|
||||
description: 'Precision engineering aesthetic. DIN-style fonts and strict blue/white signage.',
|
||||
vibe: 'German, Precision, Transport',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Barlow", size: 36, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "1565C0", color: "auto", style: "clear" } // Autobahn Blue
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto Condensed", size: 18, color: "0D47A1", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Roboto Condensed", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "1565C0"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
h1 { font-family: 'Barlow', sans-serif; font-size: 36pt; font-weight: 700; color: #FFFFFF; background: #1565C0; padding: 12px 20px; margin-bottom: 24px; border-radius: 4px; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #0D47A1; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border-left: 6px solid #1565C0; padding-left: 16px; margin: 24px 0; background: #E3F2FD; }
|
||||
`
|
||||
}
|
||||
];
|
||||
768
styles/lifestyle.ts
Normal file
768
styles/lifestyle.ts
Normal file
@@ -0,0 +1,768 @@
|
||||
import { StyleOption } from '../types';
|
||||
|
||||
export const lifestyleStyles: StyleOption[] = [
|
||||
{
|
||||
id: 'food-recipe',
|
||||
name: 'Food & Recipe',
|
||||
category: 'Lifestyle',
|
||||
description: 'Warm and appetizing design for cookbooks and food content. Inviting typography with rustic charm.',
|
||||
vibe: 'Warm, Appetizing, Homestyle',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Lato:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display", size: 32, color: "6D4C41", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Playfair Display", size: 16, color: "8D6E63", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Lato", size: 10, color: "4E342E", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D84315"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Lato', sans-serif;
|
||||
h1 { font-family: 'Playfair Display', serif; font-size: 32pt; font-weight: 600; color: #6D4C41; text-align: center; margin-bottom: 28px; }
|
||||
h2 { font-family: 'Playfair Display', serif; font-size: 16pt; color: #8D6E63; margin-top: 32px; margin-bottom: 16px; font-style: italic; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #4E342E; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF3E0; padding: 16px; border-left: 4px solid #D84315; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'wedding-elegant',
|
||||
name: 'Wedding Elegant',
|
||||
category: 'Events',
|
||||
description: 'Romantic and elegant design for wedding stationery and formal events. Delicate typography with sophisticated flourishes.',
|
||||
vibe: 'Romantic, Elegant, Celebratory',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&family=Cormorant+Garamond:wght@300;400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Tangerine", size: 48, color: "5D4037", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Cormorant Garamond", size: 14, color: "795548", bold: false, align: 'center',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Cormorant Garamond", size: 11, color: "5D4037", align: 'center',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "D4AF37"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
h1 { font-family: 'Tangerine', cursive; font-size: 48pt; font-weight: 700; color: #5D4037; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-size: 14pt; font-weight: 500; color: #795548; text-align: center; margin-top: 36px; margin-bottom: 18px; letter-spacing: 3px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.7; color: #5D4037; margin-bottom: 16px; text-align: center; font-weight: 300; }
|
||||
blockquote { border-top: 1px solid #D4AF37; border-bottom: 1px solid #D4AF37; padding: 24px 40px; margin: 32px 0; text-align: center; font-style: italic; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'sports-dynamic',
|
||||
name: 'Sports Dynamic',
|
||||
category: 'Sports',
|
||||
description: 'Energetic and bold design for sports and athletic content. Dynamic typography with high-impact colors.',
|
||||
vibe: 'Energetic, Bold, Athletic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rubik:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Bebas Neue", size: 36, color: "D32F2F", bold: false, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 220 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Rubik", size: 14, color: "1A1A1A", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Rubik", size: 10, color: "333333", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Rubik', sans-serif;
|
||||
h1 { font-family: 'Bebas Neue', sans-serif; font-size: 36pt; color: #D32F2F; margin-bottom: 24px; letter-spacing: 2px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #1A1A1A; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
|
||||
blockquote { background: #FFEBEE; padding: 16px; border-left: 6px solid #D32F2F; margin: 20px 0; font-weight: 500; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'childrens-playful',
|
||||
name: 'Children\'s Playful',
|
||||
category: 'Children',
|
||||
description: 'Fun and engaging design for children\'s content. Rounded typography with bright, cheerful colors.',
|
||||
vibe: 'Playful, Friendly, Colorful',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Baloo 2", size: 32, color: "6A1B9A", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Baloo 2", size: 18, color: "00897B", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Baloo 2", size: 11, color: "37474F", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "FF6B6B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Baloo 2', cursive;
|
||||
h1 { font-size: 32pt; font-weight: 700; color: #6A1B9A; text-align: center; margin-bottom: 28px; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #00897B; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.7; color: #37474F; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF3E0; padding: 16px; border-radius: 16px; border-left: 6px solid #FF6F00; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'travel-adventure',
|
||||
name: 'Travel Adventure',
|
||||
category: 'Travel',
|
||||
description: 'Adventurous design for travel and exploration content. Bold typography with earthy, wanderlust-inspiring colors.',
|
||||
vibe: 'Adventurous, Inspiring, Explorer',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Josefin+Sans:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Amatic SC", size: 48, color: "3E2723", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 220 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Josefin Sans", size: 14, color: "5D4037", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Josefin Sans", size: 10, color: "4E342E", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FF7043"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
h1 { font-family: 'Amatic SC', cursive; font-size: 48pt; font-weight: 700; color: #3E2723; text-align: center; margin-bottom: 28px; letter-spacing: 4px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #5D4037; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 2px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #4E342E; margin-bottom: 14px; }
|
||||
blockquote { background: #FBE9E7; padding: 16px; border-left: 4px solid #FF7043; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'hotel-hospitality',
|
||||
name: 'Hotel Hospitality',
|
||||
category: 'Hospitality',
|
||||
description: 'Welcoming design for hotels and hospitality industry. Elegant yet approachable with warm sophistication.',
|
||||
vibe: 'Welcoming, Elegant, Warm',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Nunito+Sans:wght@300;400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Tenor Sans", size: 28, color: "2C3E50", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Tenor Sans", size: 14, color: "8B7355", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Nunito Sans", size: 10, color: "4A4A4A", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "8B7355"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
h1 { font-family: 'Tenor Sans', sans-serif; font-size: 28pt; color: #2C3E50; text-align: center; margin-bottom: 28px; letter-spacing: 2px; }
|
||||
h2 { font-family: 'Tenor Sans', sans-serif; font-size: 14pt; color: #8B7355; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #4A4A4A; margin-bottom: 14px; font-weight: 300; }
|
||||
blockquote { background: #F9F6F1; padding: 20px; border-left: 4px solid #8B7355; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'spa-wellness',
|
||||
name: 'Spa Wellness',
|
||||
category: 'Wellness',
|
||||
description: 'Serene design for spa and wellness industries. Calm typography with soothing, natural colors.',
|
||||
vibe: 'Serene, Calming, Natural',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Questrial&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Philosopher", size: 28, color: "4A6741", bold: false, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Philosopher", size: 14, color: "6B8E63", bold: false, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Questrial", size: 10, color: "5D6D5A", align: 'left',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "6B8E63"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Questrial', sans-serif;
|
||||
h1 { font-family: 'Philosopher', serif; font-size: 28pt; color: #4A6741; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-family: 'Philosopher', serif; font-size: 14pt; color: #6B8E63; margin-top: 36px; margin-bottom: 18px; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #5D6D5A; margin-bottom: 16px; }
|
||||
blockquote { background: #F1F8E9; padding: 20px; border-radius: 4px; margin: 28px 0; text-align: center; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'parisian-chic',
|
||||
name: 'Parisian Chic',
|
||||
category: 'Fashion',
|
||||
description: 'Sophisticated French aesthetics. Elegant high-contrast serifs with plenty of white space.',
|
||||
vibe: 'Sophisticated, Chic, Minimal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;1,6..96,400&family=Jost:wght@300;400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Bodoni Moda", size: 36, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Bodoni Moda", size: 16, color: "333333", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
italic: true
|
||||
},
|
||||
body: {
|
||||
font: "Jost", size: 10, color: "1A1A1A", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Jost', sans-serif;
|
||||
h1 { font-family: 'Bodoni Moda', serif; font-size: 36pt; font-weight: 700; color: #000000; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-family: 'Bodoni Moda', serif; font-size: 16pt; font-weight: 700; color: #333333; text-align: center; margin-top: 36px; margin-bottom: 18px; font-style: italic; }
|
||||
p { font-size: 10pt; line-height: 1.8; color: #1A1A1A; margin-bottom: 16px; text-align: center; font-weight: 300; }
|
||||
blockquote { border-top: 1px solid #000000; border-bottom: 1px solid #000000; padding: 24px; margin: 32px 40px; text-align: center; font-family: 'Bodoni Moda', serif; font-style: italic; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'fine-dining-menu',
|
||||
name: 'Fine Dining Menu',
|
||||
category: 'Hospitality',
|
||||
description: 'High-end restaurant aesthetic. Elegant scripts, centered layouts, and luxurious gold tones.',
|
||||
vibe: 'Elegant, Expensive, Centered',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Great Vibes", size: 42, color: "C5A059", bold: false, align: 'center',
|
||||
spacing: { before: 500, after: 300, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Cormorant Garamond", size: 14, color: "212121", bold: true, align: 'center',
|
||||
spacing: { before: 360, after: 180, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Cormorant Garamond", size: 12, color: "424242", align: 'center',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "C5A059"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
background: #FFFAF0;
|
||||
h1 { font-family: 'Great Vibes', cursive; font-size: 42pt; color: #C5A059; text-align: center; margin-bottom: 30px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #212121; text-align: center; margin-top: 36px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 3px; border-bottom: 1px solid #C5A059; display: inline-block; padding-bottom: 5px; }
|
||||
p { font-size: 12pt; line-height: 1.8; color: #424242; margin-bottom: 16px; text-align: center; font-style: italic; }
|
||||
blockquote { border: 1px solid #C5A059; padding: 24px; margin: 30px 60px; text-align: center; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'cottagecore-journal',
|
||||
name: 'Cottagecore Journal',
|
||||
category: 'Aesthetic',
|
||||
description: 'Whimsical countryside diary. Handwritten fonts with soft sage greens and earthy browns.',
|
||||
vibe: 'Whimsical, Nature, Handmade',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Patrick+Hand&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Amatic SC", size: 40, color: "33691E", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Patrick Hand", size: 18, color: "5D4037", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Patrick Hand", size: 14, color: "424242", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "33691E"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Patrick Hand', cursive;
|
||||
background: #F1F8E9;
|
||||
h1 { font-family: 'Amatic SC', cursive; font-size: 40pt; font-weight: 700; color: #33691E; text-align: center; margin-bottom: 24px; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #5D4037; text-align: center; margin-top: 30px; margin-bottom: 14px; border-bottom: 1px dashed #8D6E63; display: inline-block; }
|
||||
p { font-size: 14pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF; border: 1px dotted #33691E; padding: 20px; border-radius: 10px; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'hipster-coffee',
|
||||
name: 'Hipster Coffee',
|
||||
category: 'Modern',
|
||||
description: 'Artisan roaster branding. Clean slab serifs on kraft paper textures.',
|
||||
vibe: 'Artisan, Slab, Kraft',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;700&family=Lato:wght@300;400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Zilla Slab", size: 36, color: "3E2723", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Lato", size: 14, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true,
|
||||
tracking: 100
|
||||
},
|
||||
body: {
|
||||
font: "Lato", size: 10, color: "4E342E", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "3E2723"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Lato', sans-serif;
|
||||
background: #E0C097;
|
||||
h1 { font-family: 'Zilla Slab', serif; font-size: 36pt; font-weight: 700; color: #3E2723; text-align: center; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; text-align: center; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 2px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #4E342E; margin-bottom: 14px; }
|
||||
blockquote { border-top: 1px solid #3E2723; border-bottom: 1px solid #3E2723; padding: 20px; margin: 24px 0; text-align: center; font-style: italic; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'kindergarten-art',
|
||||
name: 'Kindergarten Art',
|
||||
category: 'Playful',
|
||||
description: 'Child-like crayon aesthetic. Primary colors, rounded fonts, and large friendly text.',
|
||||
vibe: 'Childish, Fun, Primary',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Chewy&family=Balsamiq+Sans:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Chewy", size: 40, color: "2962FF", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Balsamiq Sans", size: 18, color: "D50000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Balsamiq Sans", size: 14, color: "111111", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 320 }
|
||||
},
|
||||
accentColor: "FFD600"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Balsamiq Sans', cursive;
|
||||
h1 { font-family: 'Chewy', cursive; font-size: 40pt; color: #2962FF; text-align: center; margin-bottom: 24px; transform: rotate(-2deg); }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #D50000; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 14pt; line-height: 1.6; color: #111111; margin-bottom: 14px; }
|
||||
blockquote { border: 4px dashed #FFD600; padding: 20px; margin: 24px 0; border-radius: 20px; background: #FFFDE7; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'surf-shop',
|
||||
name: 'Surf Shop',
|
||||
category: 'Lifestyle',
|
||||
description: 'California cool. Relaxed hand-drawn fonts with sea foam blues and sunny yellows.',
|
||||
vibe: 'Relaxed, Beach, Sunny',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Kalam:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Permanent Marker", size: 36, color: "0097A7", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Kalam", size: 18, color: "FBC02D", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Kalam", size: 12, color: "424242", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "0097A7"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Kalam', cursive;
|
||||
h1 { font-family: 'Permanent Marker', cursive; font-size: 36pt; color: #0097A7; text-align: center; margin-bottom: 24px; transform: rotate(-1deg); }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #FBC02D; text-align: center; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 12pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
|
||||
blockquote { background: #E0F7FA; border-radius: 16px; padding: 20px; margin: 24px 0; border: 2px solid #0097A7; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'winter-holiday',
|
||||
name: 'Winter Holiday',
|
||||
category: 'Seasonal',
|
||||
description: 'Festive greeting card style. Elegant script, deep reds and forest greens.',
|
||||
vibe: 'Festive, Cozy, Traditional',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&family=Merriweather:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Mountains of Christmas", size: 36, color: "B71C1C", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Merriweather", size: 16, color: "1B5E20", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Merriweather", size: 11, color: "212121", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "B71C1C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Merriweather', serif;
|
||||
background: #FFEBEE;
|
||||
h1 { font-family: 'Mountains of Christmas', cursive; font-size: 36pt; font-weight: 700; color: #B71C1C; text-align: center; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #1B5E20; text-align: center; margin-top: 32px; margin-bottom: 16px; border-bottom: 2px dotted #1B5E20; display: inline-block; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 2px solid #B71C1C; padding: 16px; margin: 24px 0; border-radius: 8px; background: #FFF; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'recipe-card',
|
||||
name: 'Recipe Card',
|
||||
category: 'Home',
|
||||
description: 'Grandmas index card. Typewriter fonts with red header lines.',
|
||||
vibe: 'Homey, Traditional, Cookery',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime&family=Homemade+Apple&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Courier Prime", size: 24, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 240 },
|
||||
border: { bottom: { color: "F44336", space: 4, style: "single", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Courier Prime", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "F44336"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
background: #FFF;
|
||||
border: 1px solid #E0E0E0;
|
||||
padding: 20px;
|
||||
h1 { font-size: 24pt; font-weight: 700; color: #000000; border-bottom: 2px solid #F44336; padding-bottom: 8px; margin-bottom: 20px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; margin-top: 24px; margin-bottom: 12px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #212121; margin-bottom: 12px; }
|
||||
blockquote { font-family: 'Homemade Apple', cursive; color: #D32F2F; font-size: 14pt; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'national-park-signage',
|
||||
name: 'National Park Signage',
|
||||
category: 'Nature',
|
||||
description: 'Routed wood sign aesthetic. Heavy rounded serifs with earthy brown and cream colors.',
|
||||
vibe: 'Outdoors, Rustic, Official',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&family=Lato:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Crete Round", size: 32, color: "FFFFFF", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "3E2723", color: "auto", style: "clear" } // Dark brown background
|
||||
},
|
||||
heading2: {
|
||||
font: "Lato", size: 16, color: "3E2723", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Lato", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "3E2723"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Lato', sans-serif;
|
||||
h1 { font-family: 'Crete Round', serif; font-size: 32pt; color: #FFFFFF; background: #3E2723; padding: 16px; margin-bottom: 24px; border-radius: 8px; border: 2px solid #5D4037; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #3E2723; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { background: #EFEBE9; border-left: 6px solid #3E2723; padding: 16px; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'supermarket-receipt',
|
||||
name: 'Supermarket Receipt',
|
||||
category: 'Everyday',
|
||||
description: 'Thermal paper aesthetic. Monospaced, slightly faded grey text with narrow alignment.',
|
||||
vibe: 'Disposable, Monospace, Grey',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Fira+Mono&family=Inconsolata:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Fira Mono", size: 24, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 300, after: 200, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Inconsolata", size: 14, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 240, after: 120, line: 240 },
|
||||
border: { bottom: { color: "000000", space: 4, style: "dashed", size: 12 } }
|
||||
},
|
||||
body: {
|
||||
font: "Inconsolata", size: 11, color: "424242", align: 'left', // Dark grey for thermal look
|
||||
spacing: { before: 0, after: 120, line: 240 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Inconsolata', monospace;
|
||||
background: #FAFAFA;
|
||||
padding: 20px;
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
h1 { font-family: 'Fira Mono', monospace; font-size: 24pt; font-weight: 700; color: #000000; text-align: center; margin-bottom: 20px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 400; color: #000000; text-align: center; margin-top: 24px; margin-bottom: 12px; border-bottom: 1px dashed #000; padding-bottom: 5px; }
|
||||
p { font-size: 11pt; line-height: 1.4; color: #424242; margin-bottom: 10px; }
|
||||
blockquote { text-align: center; margin: 20px 0; font-weight: 700; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'varsity-team',
|
||||
name: 'Varsity Team',
|
||||
category: 'Sport',
|
||||
description: 'College sports jersey style. Block lettering with athletic gold and navy.',
|
||||
vibe: 'Athletic, College, Bold',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Graduate&family=Saira:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Graduate", size: 36, color: "FDD835", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
shading: { fill: "1A237E", color: "auto", style: "clear" },
|
||||
border: {
|
||||
top: { color: "FDD835", space: 8, style: "single", size: 24 },
|
||||
bottom: { color: "FDD835", space: 8, style: "single", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Saira", size: 20, color: "1A237E", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Saira", size: 12, color: "212121", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FDD835"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Saira', sans-serif;
|
||||
h1 { font-family: 'Graduate', serif; font-size: 36pt; color: #FDD835; background: #1A237E; border-top: 4px solid #FDD835; border-bottom: 4px solid #FDD835; padding: 20px; text-align: center; margin-bottom: 24px; }
|
||||
h2 { font-size: 20pt; font-weight: 700; color: #1A237E; text-align: center; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 12pt; line-height: 1.5; color: #212121; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 2px dashed #1A237E; padding: 16px; margin: 24px 0; background: #E8EAF6; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'sticky-note',
|
||||
name: 'Sticky Note',
|
||||
category: 'Casual',
|
||||
description: 'Handwritten reminder aesthetic. Marker fonts on a canary yellow background.',
|
||||
vibe: 'Casual, Handwritten, Yellow',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Kalam:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Permanent Marker", size: 32, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Kalam", size: 18, color: "D50000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Kalam", size: 14, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "FFF9C4", color: "auto", style: "clear" } // Yellow paper
|
||||
},
|
||||
accentColor: "D50000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Kalam', cursive;
|
||||
background: #FFF9C4;
|
||||
padding: 30px;
|
||||
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
|
||||
h1 { font-family: 'Permanent Marker', cursive; font-size: 32pt; color: #000000; text-align: center; margin-bottom: 24px; transform: rotate(-1deg); }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #D50000; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 14pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #D50000; padding-left: 12px; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'brick-toy',
|
||||
name: 'Brick Toy',
|
||||
category: 'Playful',
|
||||
description: 'Plastic building block aesthetic. Primary red, blue, and yellow with chunky text.',
|
||||
vibe: 'Playful, Primary, Chunky',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Titan+One&family=Nunito:wght@400;800&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Titan One", size: 36, color: "D32F2F", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFEB3B", color: "auto", style: "clear" } // Yellow background
|
||||
},
|
||||
heading2: {
|
||||
font: "Nunito", size: 18, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "1976D2", color: "auto", style: "clear" } // Blue background
|
||||
},
|
||||
body: {
|
||||
font: "Nunito", size: 12, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Nunito', sans-serif;
|
||||
h1 { font-family: 'Titan One', cursive; font-size: 36pt; color: #D32F2F; background: #FFEB3B; padding: 16px; border-radius: 8px; text-align: center; margin-bottom: 24px; border: 4px solid #D32F2F; }
|
||||
h2 { font-size: 18pt; font-weight: 800; color: #FFFFFF; background: #1976D2; padding: 8px 16px; border-radius: 4px; display: inline-block; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 12pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 4px dotted #D32F2F; padding: 16px; margin: 24px 0; background: #E3F2FD; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'jungle-explorer',
|
||||
name: 'Jungle Explorer',
|
||||
category: 'Adventure',
|
||||
description: 'Safari expedition style. Khaki, olive drab, and canvas textures.',
|
||||
vibe: 'Adventure, Khaki, Nature',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Stardos+Stencil&family=Domine:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Stardos Stencil", size: 36, color: "33691E", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "827717", space: 6, style: "thick", size: 18 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Domine", size: 16, color: "558B2F", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Domine", size: 11, color: "1B1B1B", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "827717"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Domine', serif;
|
||||
background: #F0F4C3; /* Khaki tint */
|
||||
h1 { font-family: 'Stardos Stencil', cursive; font-size: 36pt; font-weight: 700; color: #33691E; border-bottom: 4px solid #827717; padding-bottom: 12px; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #558B2F; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #1B1B1B; margin-bottom: 14px; }
|
||||
blockquote { background: #DCEDC8; padding: 20px; border-left: 6px solid #33691E; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'volcanic-ash',
|
||||
name: 'Volcanic Ash',
|
||||
category: 'Nature',
|
||||
description: 'Geological extreme. Obsidian greys with magma orange cracks.',
|
||||
vibe: 'Dark, Hot, Geological',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Creepster&family=Merriweather+Sans:wght@400;800&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Merriweather Sans", size: 36, color: "FF3D00", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "212121", color: "auto", style: "clear" } // Obsidian
|
||||
},
|
||||
heading2: {
|
||||
font: "Merriweather Sans", size: 16, color: "424242", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "FF3D00", space: 4, style: "single", size: 6 } }
|
||||
},
|
||||
body: {
|
||||
font: "Merriweather Sans", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FF3D00"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Merriweather Sans', sans-serif;
|
||||
background: #FAFAFA;
|
||||
h1 { font-size: 36pt; font-weight: 800; color: #FF3D00; background: #212121; padding: 16px; margin-bottom: 24px; border-bottom: 4px solid #DD2C00; }
|
||||
h2 { font-size: 16pt; font-weight: 800; color: #424242; margin-top: 32px; margin-bottom: 16px; border-bottom: 2px solid #FF3D00; display: inline-block; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border-left: 8px solid #212121; padding-left: 16px; margin: 24px 0; background: #FFCCBC; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'desert-sands',
|
||||
name: 'Desert Sands',
|
||||
category: 'Nature',
|
||||
description: 'Dune aesthetic. Warm beige backgrounds with wind-swept, eroded typefaces.',
|
||||
vibe: 'Warm, Sandy, Soft',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cinzel&family=Fauna+One&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Cinzel", size: 36, color: "5D4037", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Fauna One", size: 16, color: "8D6E63", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Fauna One", size: 11, color: "4E342E", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "8D6E63"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Fauna One', serif;
|
||||
background: #F3E5AB; /* Sand color */
|
||||
h1 { font-family: 'Cinzel', serif; font-size: 36pt; color: #5D4037; text-align: center; margin-bottom: 24px; letter-spacing: 2px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #8D6E63; text-align: center; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #4E342E; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border-top: 1px solid #5D4037; border-bottom: 1px solid #5D4037; padding: 20px; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'bistro-chalkboard',
|
||||
name: 'Bistro Chalkboard',
|
||||
category: 'Food',
|
||||
description: 'French cafe menu. White chalk text on slate black.',
|
||||
vibe: 'French, Food, Chalk',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Caveat:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Homemade Apple", size: 32, color: "FFFFFF", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "212121", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Caveat", size: 20, color: "E0E0E0", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Caveat", size: 14, color: "BDBDBD", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "263238", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "FFFFFF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Caveat', cursive;
|
||||
background: #212121;
|
||||
color: #FFFFFF;
|
||||
h1 { font-family: 'Homemade Apple', cursive; font-size: 32pt; color: #FFFFFF; text-align: center; margin-bottom: 24px; border-bottom: 1px solid #757575; padding-bottom: 12px; }
|
||||
h2 { font-size: 20pt; font-weight: 700; color: #E0E0E0; text-align: center; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 14pt; line-height: 1.5; color: #BDBDBD; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 1px dashed #FFFFFF; padding: 16px; margin: 24px 0; font-style: italic; text-align: center; }
|
||||
`
|
||||
}
|
||||
];
|
||||
354
styles/minimalist.ts
Normal file
354
styles/minimalist.ts
Normal file
@@ -0,0 +1,354 @@
|
||||
import { StyleOption } from '../types';
|
||||
|
||||
export const minimalistStyles: StyleOption[] = [
|
||||
{
|
||||
id: 'swiss-grid',
|
||||
name: 'Swiss International',
|
||||
category: 'Minimalist',
|
||||
description: 'Objective, bold, and asymmetric. Heavy use of black and white, strong grid alignment.',
|
||||
vibe: 'Architecture, Design, Modernism',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Inter", size: 42, color: "000000", bold: true, tracking: -40, align: 'left',
|
||||
spacing: { before: 800, after: 400, line: 240 },
|
||||
border: { top: { color: "000000", space: 24, style: "single", size: 36 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Inter", size: 16, color: "000000", bold: true, allCaps: true, tracking: 40, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Inter", size: 10, color: "111111", align: 'left',
|
||||
spacing: { before: 0, after: 200, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Inter', sans-serif;
|
||||
h1 { font-size: 42pt; font-weight: 900; letter-spacing: -2px; border-top: 6px solid black; padding-top: 24px; margin-bottom: 24px; line-height: 1; }
|
||||
h2 { font-size: 16pt; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-top: 40px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.5; margin-bottom: 16px; max-width: 65ch; }
|
||||
blockquote { border-left: 4px solid black; padding-left: 20px; font-weight: 700; font-style: normal; margin-left: 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'minimalist-white',
|
||||
name: 'Minimalist White',
|
||||
category: 'Minimal',
|
||||
description: 'Ultra-clean design with maximum white space. Less is more philosophy with restrained typography that lets content breathe.',
|
||||
vibe: 'Clean, Modern, Sophisticated',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Work Sans", size: 32, color: "111111", bold: false, align: 'left',
|
||||
spacing: { before: 600, after: 300, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Work Sans", size: 14, color: "444444", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Work Sans", size: 10, color: "555555", align: 'left',
|
||||
spacing: { before: 0, after: 200, line: 320 }
|
||||
},
|
||||
accentColor: "111111"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
h1 { font-size: 32pt; font-weight: 300; color: #111111; margin-bottom: 32px; letter-spacing: -1px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #444444; margin-top: 40px; margin-bottom: 20px; }
|
||||
p { font-size: 10pt; line-height: 1.8; color: #555555; margin-bottom: 18px; }
|
||||
blockquote { border-left: 1px solid #DDDDDD; padding-left: 24px; margin: 32px 0; color: #666666; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'scandinavian-clean',
|
||||
name: 'Scandinavian Clean',
|
||||
category: 'Minimal',
|
||||
description: 'Inspired by Nordic design principles. Clean lines, functional typography, and subtle warmth with muted colors.',
|
||||
vibe: 'Nordic, Clean, Warm Minimal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Poppins", size: 28, color: "2C2C2C", bold: false, align: 'left',
|
||||
spacing: { before: 480, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Poppins", size: 14, color: "5D5D5D", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Poppins", size: 10, color: "4A4A4A", align: 'left',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "E07A5F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Poppins', sans-serif;
|
||||
h1 { font-size: 28pt; font-weight: 300; color: #2C2C2C; margin-bottom: 28px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #5D5D5D; margin-top: 36px; margin-bottom: 18px; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #4A4A4A; margin-bottom: 16px; font-weight: 300; }
|
||||
blockquote { border-left: 3px solid #E07A5F; padding-left: 20px; margin: 28px 0; color: #666666; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'minimalist-black',
|
||||
name: 'Minimalist Black',
|
||||
category: 'Minimal',
|
||||
description: 'Ultra-minimal dark design with stark contrasts. High-impact typography on dark backgrounds.',
|
||||
vibe: 'Dark, Minimal, Bold',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@300;400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Bebas Neue", size: 48, color: "FFFFFF", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 200 },
|
||||
shading: { fill: "0A0A0A", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Work Sans", size: 12, color: "FFFFFF", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "1A1A1A", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Work Sans", size: 10, color: "E0E0E0", align: 'left',
|
||||
spacing: { before: 0, after: 180, line: 300 },
|
||||
shading: { fill: "121212", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "FFFFFF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
background: #0A0A0A;
|
||||
h1 { font-family: 'Bebas Neue', sans-serif; font-size: 48pt; color: #FFFFFF; background: #0A0A0A; padding: 16px 20px; margin-bottom: 24px; letter-spacing: 3px; }
|
||||
h2 { font-size: 12pt; color: #FFFFFF; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 4px; font-weight: 300; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #E0E0E0; margin-bottom: 16px; font-weight: 300; }
|
||||
blockquote { border-left: 1px solid #FFFFFF; padding-left: 24px; margin: 28px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'japanese-zen',
|
||||
name: 'Japanese Zen',
|
||||
category: 'Minimal',
|
||||
description: 'Inspired by Japanese minimalism and wabi-sabi aesthetics. Peaceful typography with intentional asymmetry.',
|
||||
vibe: 'Zen, Peaceful, Minimal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Shippori Mincho", size: 28, color: "2D2D2D", bold: false, align: 'left',
|
||||
spacing: { before: 560, after: 320, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Zen Kaku Gothic New", size: 12, color: "5C5C5C", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Zen Kaku Gothic New", size: 10, color: "4A4A4A", align: 'left',
|
||||
spacing: { before: 0, after: 200, line: 320 }
|
||||
},
|
||||
accentColor: "C41E3A"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Zen Kaku Gothic New', sans-serif;
|
||||
h1 { font-family: 'Shippori Mincho', serif; font-size: 28pt; color: #2D2D2D; margin-bottom: 36px; }
|
||||
h2 { font-size: 12pt; color: #5C5C5C; margin-top: 40px; margin-bottom: 20px; font-weight: 300; letter-spacing: 2px; }
|
||||
p { font-size: 10pt; line-height: 1.8; color: #4A4A4A; margin-bottom: 18px; font-weight: 300; }
|
||||
blockquote { border-left: 2px solid #C41E3A; padding-left: 24px; margin: 36px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'zen-garden',
|
||||
name: 'Zen Garden',
|
||||
category: 'Minimal',
|
||||
description: 'Inspired by Japanese rock gardens. Extreme minimalism with meditative spacing and natural balance.',
|
||||
vibe: 'Meditative, Balanced, Serene',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&family=Noto+Sans+JP:wght@300;400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Noto Serif JP", size: 26, color: "2C2C2C", bold: false, align: 'left',
|
||||
spacing: { before: 600, after: 360, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Noto Sans JP", size: 11, color: "5C5C5C", bold: false, align: 'left',
|
||||
spacing: { before: 480, after: 240, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Noto Sans JP", size: 10, color: "4A4A4A", align: 'left',
|
||||
spacing: { before: 0, after: 240, line: 360 }
|
||||
},
|
||||
accentColor: "6B8E6B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
h1 { font-family: 'Noto Serif JP', serif; font-size: 26pt; font-weight: 600; color: #2C2C2C; margin-bottom: 40px; }
|
||||
h2 { font-size: 11pt; color: #5C5C5C; margin-top: 48px; margin-bottom: 24px; font-weight: 300; letter-spacing: 2px; }
|
||||
p { font-size: 10pt; line-height: 2; color: #4A4A4A; margin-bottom: 20px; font-weight: 300; }
|
||||
blockquote { border-left: 1px solid #6B8E6B; padding-left: 32px; margin: 40px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'de-stijl',
|
||||
name: 'De Stijl',
|
||||
category: 'Modern',
|
||||
description: 'Inspired by the Dutch movement (Mondrian). Primary colors, thick black lines, and rigid grid geometry.',
|
||||
vibe: 'Abstract, Geometric, Primary',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Geo:wght@400&family=Arimo:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Geo", size: 32, color: "FF0000", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: {
|
||||
bottom: { color: "000000", space: 12, style: "single", size: 24 },
|
||||
left: { color: "000000", space: 12, style: "single", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Arimo", size: 14, color: "0000FF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "FFFF00", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Arimo", size: 10, color: "000000", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FF0000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Arimo', sans-serif;
|
||||
h1 { font-family: 'Geo', sans-serif; font-size: 32pt; color: #FF0000; border-bottom: 4px solid #000000; border-left: 4px solid #000000; padding-left: 16px; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #0000FF; background: #FFFF00; display: inline-block; padding: 4px 12px; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #000000; margin-bottom: 14px; }
|
||||
blockquote { border: 4px solid #000000; padding: 16px; margin: 24px 0; box-shadow: 8px 8px 0px #0000FF; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'bauhaus-construction',
|
||||
name: 'Bauhaus Construction',
|
||||
category: 'Modernism',
|
||||
description: 'Form follows function. Geometric simplicity using primary colors and heavy structural borders.',
|
||||
vibe: 'Geometric, Functional, Primary',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Jura:wght@400;700&family=Tenor+Sans&display=swap',
|
||||
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Jura", size: 32, color: "111111", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { left: { color: "D50000", space: 12, style: "single", size: 48 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Tenor Sans", size: 16, color: "111111", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 },
|
||||
shading: { fill: "FFEB3B", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Tenor Sans", size: 11, color: "212121", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "0000FF"
|
||||
},
|
||||
|
||||
previewCss: `
|
||||
font-family: 'Tenor Sans', sans-serif;
|
||||
h1 { font-family: 'Jura', sans-serif; font-size: 32pt; font-weight: 700; color: #111111; border-left: 12px solid #D50000; padding-left: 16px; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #111111; background: #FFEB3B; display: inline-block; padding: 4px 12px; margin-top: 30px; margin-bottom: 14px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { border-top: 4px solid #0000FF; border-bottom: 4px solid #0000FF; padding: 16px 0; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'museum-gallery',
|
||||
name: 'Museum Gallery',
|
||||
category: 'Institutional',
|
||||
description: 'Art gallery placard style. Extremely neutral sans-serifs, high contrast, small but clear text.',
|
||||
vibe: 'Neutral, Institutional, Clean',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Karla:wght@400;700&family=Work+Sans:wght@400;600&display=swap',
|
||||
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Work Sans", size: 24, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Karla", size: 12, color: "616161", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Karla", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
|
||||
previewCss: `
|
||||
font-family: 'Karla', sans-serif;
|
||||
h1 { font-family: 'Work Sans', sans-serif; font-size: 24pt; font-weight: 700; color: #000000; margin-bottom: 20px; }
|
||||
h2 { font-size: 12pt; font-weight: 700; color: #616161; margin-top: 24px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border-left: 2px solid #000; padding-left: 16px; margin: 20px 0; color: #424242; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'wireframe-layout',
|
||||
name: 'Wireframe Layout',
|
||||
category: 'Minimal',
|
||||
description: 'Digital blueprint style. Grey backgrounds, monospaced fonts, and placeholder-like blocks.',
|
||||
vibe: 'Digital, Prototype, Structural',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Redacted+Script&family=Flow+Circular&family=Roboto+Mono&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Roboto Mono", size: 24, color: "0000FF", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "E0E0E0", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto Mono", size: 14, color: "555555", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "CCCCCC", space: 4, style: "single", size: 4 } }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto Mono", size: 10, color: "333333", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "0000FF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
h1 { font-size: 24pt; font-weight: 700; color: #0000FF; background: #E0E0E0; padding: 12px; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #555555; border-bottom: 1px solid #CCC; margin-top: 32px; margin-bottom: 16px; padding-bottom: 4px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
|
||||
blockquote { border: 1px dashed #999; padding: 16px; margin: 24px 0; background: #F9F9F9; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'muted-pastel',
|
||||
name: 'Muted Pastel',
|
||||
category: 'Minimal',
|
||||
description: 'Soft and calming. Very light background tints with gentle, rounded typography.',
|
||||
vibe: 'Soft, Calming, Gentle',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Quicksand:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Nunito", size: 28, color: "7986CB", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Quicksand", size: 14, color: "9575CD", bold: true, align: 'center',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Quicksand", size: 11, color: "616161", align: 'center',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "9575CD"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
background: #FDFBF7;
|
||||
h1 { font-family: 'Nunito', sans-serif; font-size: 28pt; font-weight: 700; color: #7986CB; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #9575CD; text-align: center; margin-top: 36px; margin-bottom: 18px; }
|
||||
p { font-size: 11pt; line-height: 1.7; color: #616161; margin-bottom: 16px; text-align: center; }
|
||||
blockquote { background: #F3E5F5; padding: 24px; border-radius: 20px; margin: 32px 40px; text-align: center; }
|
||||
`
|
||||
}
|
||||
];
|
||||
957
styles/tech.ts
Normal file
957
styles/tech.ts
Normal file
@@ -0,0 +1,957 @@
|
||||
import { StyleOption } from '../types';
|
||||
|
||||
export const techStyles: StyleOption[] = [
|
||||
{
|
||||
id: 'tech-startup',
|
||||
name: 'Tech Startup',
|
||||
category: 'Tech',
|
||||
description: 'Modern, energetic design for technology companies and startups. Bold gradients, vibrant colors, and confident typography.',
|
||||
vibe: 'Innovative, Dynamic, Bold',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Plus Jakarta Sans", size: 28, color: "6366F1", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Plus Jakarta Sans", size: 16, color: "1E1E1E", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Plus Jakarta Sans", size: 10, color: "4B5563", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "6366F1"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
h1 { font-size: 28pt; font-weight: 700; color: #6366F1; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #1E1E1E; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #4B5563; margin-bottom: 14px; }
|
||||
blockquote { background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%); padding: 20px; border-radius: 8px; border-left: 4px solid #6366F1; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'tech-documentation',
|
||||
name: 'Tech Documentation',
|
||||
category: 'Technical',
|
||||
description: 'Clean and functional design for technical documentation. Optimized for code samples and clear instruction.',
|
||||
vibe: 'Technical, Clear, Functional',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "IBM Plex Sans", size: 24, color: "161616", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "IBM Plex Sans", size: 16, color: "161616", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "IBM Plex Sans", size: 10, color: "525252", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "0F62FE"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
h1 { font-size: 24pt; font-weight: 600; color: #161616; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 600; color: #161616; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #525252; margin-bottom: 14px; }
|
||||
blockquote { font-family: 'IBM Plex Mono', monospace; background: #F4F4F4; padding: 16px; margin: 20px 0; font-size: 9pt; border-left: 4px solid #0F62FE; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'industrial-blueprint',
|
||||
name: 'Industrial Blueprint',
|
||||
category: 'Technical',
|
||||
description: 'Engineering-inspired design reminiscent of technical blueprints. Precise typography with drafting aesthetics.',
|
||||
vibe: 'Technical, Precise, Engineering',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Titillium+Web:wght@400;600;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Titillium Web", size: 24, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "1A3A5C", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Titillium Web", size: 14, color: "1A3A5C", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Share Tech Mono", size: 9, color: "2C4A6B", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "1A3A5C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
h1 { font-family: 'Titillium Web', sans-serif; font-size: 24pt; font-weight: 700; color: #FFFFFF; background: #1A3A5C; padding: 16px 20px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-family: 'Titillium Web', sans-serif; font-size: 14pt; font-weight: 700; color: #1A3A5C; margin-top: 30px; margin-bottom: 14px; }
|
||||
p { font-size: 9pt; line-height: 1.7; color: #2C4A6B; margin-bottom: 14px; }
|
||||
blockquote { background: #E8F4FC; padding: 16px; border: 1px dashed #1A3A5C; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'crypto-futurism',
|
||||
name: 'Crypto Futurism',
|
||||
category: 'Tech',
|
||||
description: 'Cutting-edge design for blockchain and cryptocurrency content. Dark themes with electric accents.',
|
||||
vibe: 'Futuristic, Digital, Cutting-edge',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Audiowide&family=Rajdhani:wght@400;500;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Audiowide", size: 26, color: "00D4AA", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "0D1117", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Rajdhani", size: 16, color: "58A6FF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Rajdhani", size: 10, color: "C9D1D9", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "161B22", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "00D4AA"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
background: #0D1117;
|
||||
h1 { font-family: 'Audiowide', cursive; font-size: 26pt; color: #00D4AA; background: #0D1117; padding: 16px 20px; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 600; color: #58A6FF; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #C9D1D9; margin-bottom: 14px; }
|
||||
blockquote { background: #21262D; padding: 16px; border-left: 4px solid #00D4AA; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'aerospace-modern',
|
||||
name: 'Aerospace Modern',
|
||||
category: 'Tech',
|
||||
description: 'Sleek design inspired by aerospace and space exploration. Clean lines with futuristic precision.',
|
||||
vibe: 'Futuristic, Sleek, Precision',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Michroma&family=Saira:wght@300;400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Michroma", size: 22, color: "0B3D91", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Saira", size: 13, color: "FC3D21", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Saira", size: 10, color: "2E3A45", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FC3D21"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Saira', sans-serif;
|
||||
h1 { font-family: 'Michroma', sans-serif; font-size: 22pt; color: #0B3D91; margin-bottom: 24px; letter-spacing: 2px; }
|
||||
h2 { font-size: 13pt; font-weight: 500; color: #FC3D21; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #2E3A45; margin-bottom: 14px; font-weight: 300; }
|
||||
blockquote { background: #E8F0FE; padding: 16px; border-left: 4px solid #0B3D91; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'data-analytics',
|
||||
name: 'Data Analytics',
|
||||
category: 'Tech',
|
||||
description: 'Clean design for data science and analytics content. Precise typography optimized for charts and metrics.',
|
||||
vibe: 'Analytical, Clean, Data-driven',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Overpass:wght@400;600;700&family=Overpass+Mono:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Overpass", size: 26, color: "0F172A", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Overpass", size: 14, color: "3730A3", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Overpass", size: 10, color: "475569", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "3730A3"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Overpass', sans-serif;
|
||||
h1 { font-size: 26pt; font-weight: 700; color: #0F172A; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #3730A3; margin-top: 30px; margin-bottom: 14px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #475569; margin-bottom: 14px; }
|
||||
blockquote { font-family: 'Overpass Mono', monospace; background: #F1F5F9; padding: 16px; border-left: 4px solid #3730A3; margin: 20px 0; font-size: 9pt; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'artificial-intelligence',
|
||||
name: 'Artificial Intelligence',
|
||||
category: 'Tech',
|
||||
description: 'Cutting-edge design for AI and machine learning content. Neural network inspired with gradient accents.',
|
||||
vibe: 'Cutting-edge, Neural, Intelligent',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700&family=Lexend:wght@300;400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Oxanium", size: 28, color: "7C3AED", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Lexend", size: 14, color: "2563EB", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Lexend", size: 10, color: "334155", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "7C3AED"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Lexend', sans-serif;
|
||||
h1 { font-family: 'Oxanium', sans-serif; font-size: 28pt; font-weight: 700; color: #7C3AED; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 500; color: #2563EB; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #334155; margin-bottom: 14px; font-weight: 300; }
|
||||
blockquote { background: linear-gradient(135deg, #EDE9FE 0%, #DBEAFE 100%); padding: 16px; border-radius: 8px; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'marine-biology',
|
||||
name: 'Marine Biology',
|
||||
category: 'Science',
|
||||
description: 'Ocean-inspired design for marine science and aquatic content. Deep blues with flowing elegance.',
|
||||
vibe: 'Oceanic, Scientific, Flowing',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Lora:wght@400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Lora", size: 26, color: "0C4A6E", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Archivo", size: 13, color: "0369A1", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Archivo", size: 10, color: "334155", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "0EA5E9"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Archivo', sans-serif;
|
||||
h1 { font-family: 'Lora', serif; font-size: 26pt; font-weight: 700; color: #0C4A6E; margin-bottom: 24px; }
|
||||
h2 { font-size: 13pt; font-weight: 600; color: #0369A1; margin-top: 30px; margin-bottom: 14px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #334155; margin-bottom: 14px; }
|
||||
blockquote { background: #E0F2FE; padding: 16px; border-left: 4px solid #0EA5E9; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'startup-saas',
|
||||
name: 'Startup SaaS',
|
||||
category: 'Tech',
|
||||
description: 'Modern SaaS product design language. Clean, conversion-focused with trustworthy tech aesthetics.',
|
||||
vibe: 'Modern, Trustworthy, Product',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Inter", size: 32, color: "111827", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Inter", size: 18, color: "4F46E5", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Inter", size: 10, color: "6B7280", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "4F46E5"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Inter', sans-serif;
|
||||
h1 { font-size: 32pt; font-weight: 700; color: #111827; margin-bottom: 24px; letter-spacing: -0.5px; }
|
||||
h2 { font-size: 18pt; font-weight: 600; color: #4F46E5; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #6B7280; margin-bottom: 14px; }
|
||||
blockquote { background: #EEF2FF; padding: 16px; border-radius: 8px; border-left: 4px solid #4F46E5; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'cybersecurity',
|
||||
name: 'Cybersecurity',
|
||||
category: 'Tech',
|
||||
description: 'High-security design for infosec and cybersecurity. Matrix-inspired with threat-level colors.',
|
||||
vibe: 'Secure, Technical, Alert',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Exo+2:wght@400;500;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Exo 2", size: 26, color: "00E676", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "0D0D0D", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Exo 2", size: 14, color: "00E676", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Share Tech Mono", size: 9, color: "B0BEC5", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "1A1A1A", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "00E676"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
background: #0D0D0D;
|
||||
h1 { font-family: 'Exo 2', sans-serif; font-size: 26pt; font-weight: 600; color: #00E676; background: #0D0D0D; padding: 16px 20px; margin-bottom: 24px; }
|
||||
h2 { font-family: 'Exo 2', sans-serif; font-size: 14pt; font-weight: 600; color: #00E676; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 9pt; line-height: 1.6; color: #B0BEC5; margin-bottom: 14px; }
|
||||
blockquote { background: #1A1A1A; padding: 16px; border-left: 4px solid #00E676; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'astronomy-space',
|
||||
name: 'Astronomy Space',
|
||||
category: 'Science',
|
||||
description: 'Cosmic design for astronomy and space science. Deep space colors with stellar typography.',
|
||||
vibe: 'Cosmic, Scientific, Vast',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Space+Grotesk:wght@400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Orbitron", size: 26, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "0A0A23", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Space Grotesk", size: 14, color: "7C4DFF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Space Grotesk", size: 10, color: "B0BEC5", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "121225", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "7C4DFF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
background: #0A0A23;
|
||||
h1 { font-family: 'Orbitron', sans-serif; font-size: 26pt; font-weight: 700; color: #FFFFFF; background: #0A0A23; padding: 16px 20px; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 500; color: #7C4DFF; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #B0BEC5; margin-bottom: 14px; }
|
||||
blockquote { background: #1A1A3E; padding: 16px; border-left: 4px solid #7C4DFF; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'blockchain-protocol',
|
||||
name: 'Blockchain Protocol',
|
||||
category: 'Tech',
|
||||
description: 'Technical blockchain and Web3 design. Decentralized aesthetics with protocol documentation style.',
|
||||
vibe: 'Technical, Decentralized, Protocol',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Inter", size: 28, color: "6366F1", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Inter", size: 16, color: "1E1E1E", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Inter", size: 10, color: "4B5563", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "6366F1"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Inter', sans-serif;
|
||||
h1 { font-size: 28pt; font-weight: 600; color: #6366F1; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 600; color: #1E1E1E; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #4B5563; margin-bottom: 14px; }
|
||||
blockquote { font-family: 'JetBrains Mono', monospace; background: #F3F4F6; padding: 16px; border-radius: 6px; margin: 20px 0; font-size: 9pt; border-left: 4px solid #6366F1; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'smart-home-tech',
|
||||
name: 'Smart Home Tech',
|
||||
category: 'Tech',
|
||||
description: 'Modern IoT and smart home design. Clean, connected typography with ambient intelligence.',
|
||||
vibe: 'Connected, Modern, Ambient',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Poppins", size: 28, color: "00BFA5", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Poppins", size: 15, color: "263238", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Poppins", size: 10, color: "546E7A", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "00BFA5"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Poppins', sans-serif;
|
||||
h1 { font-size: 28pt; font-weight: 600; color: #00BFA5; margin-bottom: 24px; }
|
||||
h2 { font-size: 15pt; font-weight: 600; color: #263238; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #546E7A; margin-bottom: 14px; }
|
||||
blockquote { background: #E0F2F1; padding: 16px; border-radius: 12px; border-left: 4px solid #00BFA5; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'frutiger-aero',
|
||||
name: 'Frutiger Aero',
|
||||
category: 'Tech',
|
||||
description: 'Mid-2000s tech aesthetic. Glossy textures, humanist sans-serifs, and optimistic skeuomorphic blues and greens.',
|
||||
vibe: 'Glossy, Optimistic, 2000s',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Varela+Round&family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Varela Round", size: 28, color: "0288D1", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "M PLUS Rounded 1c", size: 15, color: "7CB342", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "M PLUS Rounded 1c", size: 10, color: "546E7A", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "03A9F4"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'M PLUS Rounded 1c', sans-serif;
|
||||
h1 { font-family: 'Varela Round', sans-serif; font-size: 28pt; color: #0288D1; margin-bottom: 24px; background: linear-gradient(to right, #E1F5FE, #FFFFFF); padding: 10px; border-radius: 10px; }
|
||||
h2 { font-size: 15pt; font-weight: 700; color: #7CB342; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #546E7A; margin-bottom: 14px; }
|
||||
blockquote { background: linear-gradient(180deg, #FFFFFF 0%, #E0F7FA 100%); padding: 16px; border-radius: 15px; border: 1px solid #B3E5FC; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'solarpunk',
|
||||
name: 'Solarpunk',
|
||||
category: 'Futuristic',
|
||||
description: 'Nature-meets-technology future. Art Nouveau curves with high-tech sustainable green and gold.',
|
||||
vibe: 'Sustainable, Hopeful, Organic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Caudex:wght@400;700&family=El+Messiri:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "El Messiri", size: 30, color: "2E7D32", bold: true, align: 'left',
|
||||
spacing: { before: 440, after: 260, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Caudex", size: 15, color: "AFB42B", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Caudex", size: 11, color: "33691E", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FFD700"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Caudex', serif;
|
||||
h1 { font-family: 'El Messiri', sans-serif; font-size: 30pt; font-weight: 700; color: #2E7D32; margin-bottom: 30px; }
|
||||
h2 { font-size: 15pt; font-weight: 700; color: #AFB42B; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #33691E; margin-bottom: 14px; }
|
||||
blockquote { background: #F1F8E9; padding: 16px; border-left: 4px solid #FFD700; border-radius: 0 16px 16px 0; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'biohazard-lab',
|
||||
name: 'Biohazard Lab',
|
||||
category: 'Sci-Fi',
|
||||
description: 'Warning-label aesthetic. Monospace fonts with high-contrast yellow and black caution themes.',
|
||||
vibe: 'Warning, Industrial, Hazardous',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Syne+Mono&family=Azeret+Mono:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Syne Mono", size: 32, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
shading: { fill: "FFEB3B", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Azeret Mono", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { left: { color: "FFEB3B", space: 8, style: "single", size: 24 } }
|
||||
},
|
||||
body: {
|
||||
font: "Azeret Mono", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FFEB3B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Azeret Mono', monospace;
|
||||
h1 { font-family: 'Syne Mono', monospace; font-size: 32pt; font-weight: 700; color: #000000; background: #FFEB3B; padding: 16px; text-align: center; margin-bottom: 28px; letter-spacing: -1px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; border-left: 8px solid #FFEB3B; padding-left: 12px; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 2px dashed #000000; padding: 16px; margin: 20px 0; background: #FFF9C4; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'code-editor',
|
||||
name: 'Code Editor',
|
||||
category: 'Tech',
|
||||
description: 'Dark mode IDE aesthetic. Monospaced fonts with syntax-highlighting color palette.',
|
||||
vibe: 'Technical, Dark, Coding',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Source+Code+Pro:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Inconsolata", size: 26, color: "61AFEF", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "282C34", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Source Code Pro", size: 14, color: "98C379", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Source Code Pro", size: 10, color: "ABB2BF", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "21252B", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "E06C75"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
background: #282C34;
|
||||
h1 { font-family: 'Inconsolata', monospace; font-size: 26pt; font-weight: 700; color: #61AFEF; background: #282C34; padding: 16px 20px; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #98C379; margin-top: 30px; margin-bottom: 14px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #ABB2BF; margin-bottom: 14px; }
|
||||
blockquote { background: #2C313C; padding: 16px; border-left: 4px solid #E06C75; margin: 20px 0; color: #E06C75; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'neon-noir',
|
||||
name: 'Neon Noir',
|
||||
category: 'Futuristic',
|
||||
description: 'High-tech noir aesthetic. Ultra-thin, futuristic typography with glowing neon accents.',
|
||||
vibe: 'Futuristic, Thin, Neon',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Megrim&family=Gruppo&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Megrim", size: 36, color: "D500F9", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "121212", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Gruppo", size: 18, color: "00E5FF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Gruppo", size: 12, color: "E0E0E0", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 300 },
|
||||
shading: { fill: "1C1C1C", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "D500F9"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Gruppo', sans-serif;
|
||||
background: #121212;
|
||||
h1 { font-family: 'Megrim', cursive; font-size: 36pt; font-weight: 700; color: #D500F9; background: #121212; margin-bottom: 24px; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #00E5FF; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 12pt; line-height: 1.6; color: #E0E0E0; margin-bottom: 14px; }
|
||||
blockquote { border: 1px solid #D500F9; padding: 16px; margin: 20px 0; background: #000; color: #D500F9; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '8-bit-arcade',
|
||||
name: '8-Bit Arcade',
|
||||
category: 'Gaming',
|
||||
description: 'Retro gaming high-score screen. Pixelated fonts on dark backgrounds.',
|
||||
vibe: 'Retro, Gaming, Pixel',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Press Start 2P", size: 20, color: "76FF03", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 300 },
|
||||
shading: { fill: "212121", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Press Start 2P", size: 12, color: "D500F9", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "VT323", size: 14, color: "FFFFFF", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "76FF03"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'VT323', monospace;
|
||||
background: #000000;
|
||||
h1 { font-family: 'Press Start 2P', cursive; font-size: 20pt; color: #76FF03; background: #212121; text-align: center; padding: 20px; margin-bottom: 28px; line-height: 1.5; }
|
||||
h2 { font-family: 'Press Start 2P', cursive; font-size: 12pt; color: #D500F9; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 14pt; line-height: 1.4; color: #FFFFFF; margin-bottom: 14px; }
|
||||
blockquote { border: 4px dashed #FFFFFF; padding: 16px; margin: 20px 0; color: #FFFF00; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'bsod-blue',
|
||||
name: 'BSOD Blue',
|
||||
category: 'Tech',
|
||||
description: 'The infamous crash screen. Pure white terminal fonts on a deep, error blue background.',
|
||||
vibe: 'Crash, Error, Terminal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Lucident&family=Fira+Mono&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Lucident", size: 24, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
shading: { fill: "0000AA", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Fira Mono", size: 14, color: "FFFFFF", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "0000AA", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Fira Mono", size: 11, color: "FFFFFF", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "0000AA", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "FFFFFF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Fira Mono', monospace;
|
||||
background: #0000AA;
|
||||
color: #FFFFFF;
|
||||
h1 { font-family: 'Lucident', monospace; font-size: 24pt; font-weight: 700; color: #FFFFFF; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 400; color: #FFFFFF; margin-top: 32px; margin-bottom: 16px; text-decoration: underline; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #FFFFFF; margin-bottom: 14px; }
|
||||
blockquote { border: 2px solid #FFFFFF; padding: 16px; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'amber-monitor',
|
||||
name: 'Amber Monitor',
|
||||
category: 'Retro',
|
||||
description: '1980s monochrome computing. Glowing amber text on a black void.',
|
||||
vibe: 'Retro, Computing, Amber',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=VT323&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "VT323", size: 36, color: "FFB300", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "212121", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "VT323", size: 20, color: "FFCA28", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "FFB300", space: 4, style: "single", size: 12 } }
|
||||
},
|
||||
body: {
|
||||
font: "VT323", size: 16, color: "FFE082", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "FFB300"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'VT323', monospace;
|
||||
background: #000000;
|
||||
h1 { font-size: 36pt; color: #FFB300; margin-bottom: 24px; text-shadow: 0 0 5px #FF6F00; }
|
||||
h2 { font-size: 20pt; color: #FFCA28; margin-top: 32px; margin-bottom: 16px; border-bottom: 1px solid #FFB300; }
|
||||
p { font-size: 16pt; line-height: 1.4; color: #FFE082; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #FFB300; padding-left: 16px; margin: 24px 0; color: #FFECB3; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'game-handheld',
|
||||
name: 'Game Handheld',
|
||||
category: 'Gaming',
|
||||
description: 'Classic 90s handheld console. Four shades of olive green pixel art style.',
|
||||
vibe: 'Pixel, Green, Retro',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Press Start 2P", size: 20, color: "0f380f", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
shading: { fill: "8bac0f", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Press Start 2P", size: 12, color: "306230", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Press Start 2P", size: 10, color: "0f380f", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 240 }
|
||||
},
|
||||
accentColor: "306230"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
background: #9bbc0f;
|
||||
h1 { font-size: 20pt; color: #0f380f; background: #8bac0f; padding: 20px; text-align: center; border: 4px solid #0f380f; margin-bottom: 24px; }
|
||||
h2 { font-size: 12pt; color: #306230; margin-top: 32px; margin-bottom: 16px; border-bottom: 4px solid #306230; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #0f380f; margin-bottom: 14px; }
|
||||
blockquote { background: #8bac0f; border: 2px solid #306230; padding: 16px; margin: 20px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'weather-radar',
|
||||
name: 'Weather Radar',
|
||||
category: 'Scientific',
|
||||
description: 'Meteorological map aesthetic. Deep map green backgrounds with rainbow radar text colors.',
|
||||
vibe: 'Scientific, Map, Storm',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&family=Sarpanch:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Chakra Petch", size: 32, color: "FF1744", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "263238", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Sarpanch", size: 16, color: "00E676", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "37474F", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Chakra Petch", size: 11, color: "E0F2F1", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "455A64", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "FF1744"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Chakra Petch', sans-serif;
|
||||
background: #455A64;
|
||||
color: #E0F2F1;
|
||||
h1 { font-size: 32pt; font-weight: 700; color: #FF1744; background: #263238; padding: 16px; margin-bottom: 24px; border-left: 8px solid #FF1744; }
|
||||
h2 { font-family: 'Sarpanch', sans-serif; font-size: 16pt; font-weight: 700; color: #00E676; background: #37474F; padding: 8px; margin-top: 32px; margin-bottom: 16px; display: inline-block; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #E0F2F1; margin-bottom: 14px; }
|
||||
blockquote { border: 2px solid #FFEA00; padding: 16px; margin: 24px 0; background: #263238; color: #FFEA00; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'mars-rover',
|
||||
name: 'Mars Rover',
|
||||
category: 'Space',
|
||||
description: 'Red planet exploration. Dusty orange and terracotta tones with functional technical type.',
|
||||
vibe: 'Space, Dusty, Technical',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Orbitron&family=Exo:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Orbitron", size: 30, color: "BF360C", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "FF7043", space: 6, style: "thick", size: 18 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Exo", size: 16, color: "E64A19", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Exo", size: 11, color: "3E2723", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FF5722"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Exo', sans-serif;
|
||||
background: #FBE9E7;
|
||||
h1 { font-family: 'Orbitron', sans-serif; font-size: 30pt; font-weight: 700; color: #BF360C; border-bottom: 4px solid #FF7043; padding-bottom: 12px; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #E64A19; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #3E2723; margin-bottom: 14px; }
|
||||
blockquote { background: #FFCCBC; border-left: 6px solid #BF360C; padding: 16px; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'deep-sea-sub',
|
||||
name: 'Deep Sea Sub',
|
||||
category: 'Nature',
|
||||
description: 'Bioluminescent abyss. Deepest navy backgrounds with glowing cyan/purple text.',
|
||||
vibe: 'Dark, Underwater, Glowing',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Abel&family=Rajdhani:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Rajdhani", size: 36, color: "00E5FF", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
shading: { fill: "1A237E", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Abel", size: 20, color: "E040FB", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Abel", size: 12, color: "B2EBF2", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "000051", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "00E5FF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Abel', sans-serif;
|
||||
background: #000051;
|
||||
h1 { font-family: 'Rajdhani', sans-serif; font-size: 36pt; font-weight: 700; color: #00E5FF; background: #1A237E; padding: 20px; border-radius: 50%; width: 100px; height: 100px; line-height: 100px; margin: 0 auto 24px auto; text-align: center; display: block; box-shadow: 0 0 20px #00E5FF; }
|
||||
h2 { font-size: 20pt; font-weight: 700; color: #E040FB; text-align: center; margin-top: 32px; margin-bottom: 16px; text-shadow: 0 0 5px #E040FB; }
|
||||
p { font-size: 12pt; line-height: 1.6; color: #B2EBF2; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 1px solid #00E5FF; padding: 16px; margin: 24px 0; color: #E0F7FA; text-align: center; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'arctic-base',
|
||||
name: 'Arctic Base',
|
||||
category: 'Scientific',
|
||||
description: 'Polar research station. Stark white and ice blues with minimal sterile typography.',
|
||||
vibe: 'Cold, Sterile, Blue',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Iceland&family=Roboto:wght@300;400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Iceland", size: 36, color: "01579B", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "E1F5FE", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto", size: 18, color: "0277BD", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Roboto", size: 11, color: "455A64", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "0288D1"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto', sans-serif;
|
||||
h1 { font-family: 'Iceland', cursive; font-size: 36pt; color: #01579B; background: #E1F5FE; padding: 12px 20px; margin-bottom: 24px; border-left: 4px solid #01579B; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #0277BD; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 2px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #455A64; margin-bottom: 14px; font-weight: 300; }
|
||||
blockquote { border: 1px solid #B3E5FC; padding: 16px; margin: 24px 0; background: #F0F8FF; color: #0277BD; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'schematic-diagram',
|
||||
name: 'Schematic Diagram',
|
||||
category: 'Technical',
|
||||
description: 'Patent drawing style. Thin, precise lines on stark white with serif lettering.',
|
||||
vibe: 'Technical, Precise, Patent',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime&family=Libre+Baskerville:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Libre Baskerville", size: 28, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Courier Prime", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "000000", space: 4, style: "single", size: 4 } }
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 11, color: "212121", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
h1 { font-family: 'Libre Baskerville', serif; font-size: 28pt; font-weight: 700; color: #000000; text-align: center; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; margin-top: 32px; margin-bottom: 16px; border-bottom: 1px solid #000; display: inline-block; padding-bottom: 2px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { border: 1px solid #000; padding: 20px; margin: 24px 0; font-size: 10pt; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'circuit-board',
|
||||
name: 'Circuit Board',
|
||||
category: 'Tech',
|
||||
description: 'PCB aesthetic. Deep forest green background with copper/gold tracks.',
|
||||
vibe: 'Tech, Green, Copper',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Teko:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Teko", size: 36, color: "FFD54F", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "FFB300", space: 4, style: "dotted", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Share Tech Mono", size: 16, color: "A5D6A7", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Share Tech Mono", size: 11, color: "C8E6C9", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FFD54F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
background: #1B5E20;
|
||||
h1 { font-family: 'Teko', sans-serif; font-size: 36pt; font-weight: 700; color: #FFD54F; margin-bottom: 24px; border-bottom: 4px dotted #FFB300; }
|
||||
h2 { font-size: 16pt; color: #A5D6A7; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #C8E6C9; margin-bottom: 14px; }
|
||||
blockquote { border: 1px solid #FFD54F; padding: 16px; margin: 24px 0; color: #FFD54F; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'hologram-blue',
|
||||
name: 'Hologram Blue',
|
||||
category: 'Sci-Fi',
|
||||
description: 'Star Wars style communications. Translucent flickering blue text on dark voids.',
|
||||
vibe: 'Holographic, Futuristic, Translucent',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Audiowide&family=Rajdhani:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Audiowide", size: 30, color: "00B0FF", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Rajdhani", size: 18, color: "80D8FF", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Rajdhani", size: 12, color: "B3E5FC", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "00B0FF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
background: #000000;
|
||||
h1 { font-family: 'Audiowide', cursive; font-size: 30pt; color: #00B0FF; text-align: center; margin-bottom: 24px; opacity: 0.8; text-shadow: 0 0 8px #00B0FF; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #80D8FF; text-align: center; margin-top: 32px; margin-bottom: 16px; border-top: 1px solid #00B0FF; border-bottom: 1px solid #00B0FF; display: inline-block; padding: 5px 20px; }
|
||||
p { font-size: 12pt; line-height: 1.6; color: #B3E5FC; margin-bottom: 14px; text-align: center; opacity: 0.9; }
|
||||
blockquote { border: 1px dashed #00B0FF; padding: 16px; margin: 24px 0; color: #E1F5FE; text-align: center; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'biopunk-lab',
|
||||
name: 'Biopunk Lab',
|
||||
category: 'Sci-Fi',
|
||||
description: 'Organic technology. Slime greens, flesh tones, and rounded organic fonts.',
|
||||
vibe: 'Organic, Gross, Tech',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Creepster&family=Kodchasan:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Creepster", size: 32, color: "2E7D32", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "C8E6C9", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Kodchasan", size: 18, color: "1B5E20", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "2E7D32", space: 4, style: "wave", size: 12 } }
|
||||
},
|
||||
body: {
|
||||
font: "Kodchasan", size: 11, color: "33691E", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "2E7D32"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Kodchasan', sans-serif;
|
||||
h1 { font-family: 'Creepster', cursive; font-size: 32pt; color: #2E7D32; background: #C8E6C9; padding: 16px; border-radius: 20px; text-align: center; margin-bottom: 24px; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #1B5E20; margin-top: 32px; margin-bottom: 16px; text-decoration: underline wavy #2E7D32; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #33691E; margin-bottom: 14px; }
|
||||
blockquote { background: #F1F8E9; border: 2px solid #2E7D32; border-radius: 16px; padding: 16px; margin: 24px 0; }
|
||||
`
|
||||
}
|
||||
];
|
||||
1077
styles/vintage.ts
Normal file
1077
styles/vintage.ts
Normal file
File diff suppressed because it is too large
Load Diff
1
styles/volume1.ts
Normal file
1
styles/volume1.ts
Normal file
@@ -0,0 +1 @@
|
||||
// Styles have been moved to categorized files.
|
||||
1
styles/volume2.ts
Normal file
1
styles/volume2.ts
Normal file
@@ -0,0 +1 @@
|
||||
// Styles have been moved to categorized files.
|
||||
29
tsconfig.json
Normal file
29
tsconfig.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"types": [
|
||||
"node"
|
||||
],
|
||||
"moduleResolution": "bundler",
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
68
types.ts
Normal file
68
types.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
export type PaperSize = 'A4' | 'Letter';
|
||||
export type StyleCategory = string;
|
||||
|
||||
export interface DocxBorder {
|
||||
color: string;
|
||||
space: number;
|
||||
style: string; // 'single' | 'double' | 'dotted' | 'dashed'
|
||||
size: number;
|
||||
}
|
||||
|
||||
export interface DocxStyleConfig {
|
||||
font: string;
|
||||
size: number; // in pt
|
||||
color: string;
|
||||
bold?: boolean;
|
||||
italic?: boolean;
|
||||
underline?: boolean;
|
||||
allCaps?: boolean;
|
||||
smallCaps?: boolean;
|
||||
tracking?: number; // Letter spacing
|
||||
align?: 'left' | 'center' | 'right' | 'both'; // 'both' is justify
|
||||
spacing?: { before: number; after: number; line: number };
|
||||
border?: {
|
||||
top?: DocxBorder;
|
||||
bottom?: DocxBorder;
|
||||
left?: DocxBorder;
|
||||
right?: DocxBorder;
|
||||
};
|
||||
shading?: {
|
||||
fill: string; // Hex color
|
||||
color: string; // usually 'auto'
|
||||
style: string; // usually 'clear'
|
||||
};
|
||||
}
|
||||
|
||||
export interface StyleOption {
|
||||
id: string;
|
||||
name: string;
|
||||
category: StyleCategory;
|
||||
description: string;
|
||||
vibe: string;
|
||||
googleFontsImport: string;
|
||||
|
||||
// Word Export Configuration
|
||||
wordConfig: {
|
||||
heading1: DocxStyleConfig;
|
||||
heading2: DocxStyleConfig;
|
||||
body: DocxStyleConfig;
|
||||
accentColor: string; // Used for graphical elements
|
||||
};
|
||||
|
||||
// CSS for Web Preview (Must match wordConfig manually for fidelity)
|
||||
previewCss: string;
|
||||
}
|
||||
|
||||
export interface GenerationConfig {
|
||||
styleId: string;
|
||||
paperSize: PaperSize;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export enum AppState {
|
||||
UPLOAD = 'UPLOAD',
|
||||
CONFIG = 'CONFIG',
|
||||
GENERATING = 'GENERATING',
|
||||
PREVIEW = 'PREVIEW',
|
||||
ERROR = 'ERROR'
|
||||
}
|
||||
20
vite.config.ts
Normal file
20
vite.config.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import path from 'path';
|
||||
import { defineConfig, loadEnv } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, '.', '');
|
||||
return {
|
||||
server: {
|
||||
port: 3000,
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
plugins: [react()],
|
||||
define: {},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '.'),
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user