Skip to content

A
ai-box
Commit f4ce9222 authored by fisherdaddy's avatar fisherdaddy
Browse files
Options

chore: 更新名言卡片生成器样式

parent 9d2af22d
Hide whitespace changes
Inline Side-by-side
Showing with 480 additions and 102 deletions
src/components/QuoteCard.jsx
View file @ f4ce9222
import React, { useState, useRef } from 'react'; import React, { useState, useRef } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import html2canvas from 'html2canvas'; import html2canvas from 'html2canvas';
import { useTranslation } from '../js/i18n';
// 更新中文字体数组，包含显示名称和 CSS 字体族名称 // 更新中文字体数组，包含显示名称和 CSS 字体族名称
const chineseFonts = [ const chineseFonts = [
{ name: '系统默认', value: '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif' }, { name: 'system', value: '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif' },
{ name: '无衬线', value: '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif' }, { name: 'sans', value: '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif' },
{ name: '衬线', value: 'Georgia, "Nimbus Roman No9 L", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, serif' }, { name: 'serif', value: 'Georgia, "Nimbus Roman No9 L", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, serif' },
{ name: '等宽', value: '"SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, "Noto Sans Mono CJK SC", monospace' }, { name: 'mono', value: '"SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, "Noto Sans Mono CJK SC", monospace' },
]; ];
// 定义可选的英文字体 // 定义可选的英文字体
...@@ -21,10 +22,9 @@ const englishFonts = [ ...@@ -21,10 +22,9 @@ const englishFonts = [
// 定义可选的背景颜色 // 定义可选的背景颜色
const backgroundOptions = [ const backgroundOptions = [
{ name: '白色', value: '#FFFFFF' }, { name: 'white', value: '#FFFFFF' },
{ name: '黑色', value: '#333333' }, // 修改为深灰色 { name: 'dark', value: '#333333' }, // 修改为深灰色
{ name: '黄色纸张', value: '#fdf6e3' }, { name: 'paper', value: '#fdf6e3' },
{ name: '自定义', value: 'custom' },
]; ];
const Container = styled.div` const Container = styled.div`
...@@ -203,6 +203,8 @@ const DownloadButton = styled.button` ...@@ -203,6 +203,8 @@ const DownloadButton = styled.button`
`; `;
function QuoteCard() { function QuoteCard() {
const { t } = useTranslation();
const [chineseText, setChineseText] = useState(''); const [chineseText, setChineseText] = useState('');
const [englishText, setEnglishText] = useState(''); const [englishText, setEnglishText] = useState('');
const [author, setAuthor] = useState(''); const [author, setAuthor] = useState('');
...@@ -242,36 +244,34 @@ function QuoteCard() { ...@@ -242,36 +244,34 @@ function QuoteCard() {
return ( return (
<Container> <Container>
<ContentWrapper> <ContentWrapper>
{/* 左侧输入区域 */}
<InputContainer> <InputContainer>
<TitleLabel>名言卡片生成器</TitleLabel> <TitleLabel>{t('tools.quoteCard.title')}</TitleLabel>
<InputText <InputText
placeholder="请输入中文名人名言" placeholder={t('tools.quoteCard.chinesePlaceholder')}
value={chineseText} value={chineseText}
onChange={(e) => setChineseText(e.target.value)} onChange={(e) => setChineseText(e.target.value)}
/> />
<InputText <InputText
placeholder="请输入英文翻译" placeholder={t('tools.quoteCard.englishPlaceholder')}
value={englishText} value={englishText}
onChange={(e) => setEnglishText(e.target.value)} onChange={(e) => setEnglishText(e.target.value)}
/> />
<InputField <InputField
placeholder="请输入作者姓名" placeholder={t('tools.quoteCard.authorPlaceholder')}
value={author} value={author}
onChange={(e) => setAuthor(e.target.value)} onChange={(e) => setAuthor(e.target.value)}
/> />
{/* 字体选择 */} <Label>{t('tools.quoteCard.selectChineseFont')}:</Label>
<Label>选择中文字体:</Label>
<Select value={chineseFont} onChange={(e) => setChineseFont(e.target.value)}> <Select value={chineseFont} onChange={(e) => setChineseFont(e.target.value)}>
{chineseFonts.map((font) => ( {chineseFonts.map((font) => (
<option key={font.value} value={font.value}> <option key={font.value} value={font.value}>
{font.name} {t(`tools.quoteCard.fonts.${font.name}`)}
</option> </option>
))} ))}
</Select> </Select>
<Label>选择英文字体:</Label> <Label>{t('tools.quoteCard.selectEnglishFont')}:</Label>
<Select value={englishFont} onChange={(e) => setEnglishFont(e.target.value)}> <Select value={englishFont} onChange={(e) => setEnglishFont(e.target.value)}>
{englishFonts.map((font) => ( {englishFonts.map((font) => (
<option key={font.value} value={font.value}> <option key={font.value} value={font.value}>
...@@ -280,70 +280,57 @@ function QuoteCard() { ...@@ -280,70 +280,57 @@ function QuoteCard() {
))} ))}
</Select> </Select>
{/* 字体颜色选择 */} <Label>{t('tools.quoteCard.selectFontColor')}:</Label>
<Label>选择字体颜色:</Label>
<ColorInput <ColorInput
type="color" type="color"
value={fontColor} value={fontColor}
onChange={(e) => setFontColor(e.target.value)} onChange={(e) => setFontColor(e.target.value)}
/> />
{/* 作者颜色选择 */} <Label>{t('tools.quoteCard.selectAuthorColor')}:</Label>
<Label>选择作者颜色:</Label>
<ColorInput <ColorInput
type="color" type="color"
value={authorColor} value={authorColor}
onChange={(e) => setAuthorColor(e.target.value)} onChange={(e) => setAuthorColor(e.target.value)}
/> />
{/* 背景色选择 */} <Label>{t('tools.quoteCard.selectBackground')}:</Label>
<Label>选择背景颜色:</Label>
<Select <Select
value={ value={backgroundOptions.some((option) => option.value === bgColor) ? bgColor : 'custom'}
backgroundOptions.some((option) => option.value === bgColor)
? bgColor
: 'custom'
}
onChange={handleBackgroundChange} onChange={handleBackgroundChange}
> >
{backgroundOptions.map((option) => ( {backgroundOptions.map((option) => (
<option key={option.name} value={option.value}> <option key={option.value} value={option.value}>
{option.name} {t(`tools.quoteCard.backgrounds.${option.name}`)}
</option> </option>
))} ))}
</Select> </Select>
{bgColor === 'custom' && ( {bgColor === 'custom' && (
<> <>
<Label>选择自定义背景颜色:</Label> <Label>{t('tools.quoteCard.customBackground')}:</Label>
<ColorInput <ColorInput
type="color" type="color"
value={customBgColor} value={customBgColor}
onChange={(e) => setBgColor(e.target.value)} onChange={(e) => setBgColor(e.target.value)}
title="选择自定义背景颜色" title={t('tools.quoteCard.customBackground')}
/> />
</> </>
)} )}
{/* 下载按钮 */}
<DownloadButton onClick={handleDownload}> <DownloadButton onClick={handleDownload}>
下载图片 {t('tools.quoteCard.downloadButton')}
</DownloadButton> </DownloadButton>
</InputContainer> </InputContainer>
{/* 右侧预览区域 */} <PreviewContainer $bgColor={bgColor} $fontColor={fontColor} ref={previewRef}>
<PreviewContainer
$bgColor={bgColor}
$fontColor={fontColor}
ref={previewRef}
>
<QuoteText $color={fontColor} $fontFamily={chineseFont}> <QuoteText $color={fontColor} $fontFamily={chineseFont}>
{chineseText || '请输入中文名人名言'} {chineseText || t('tools.quoteCard.defaultQuote')}
</QuoteText> </QuoteText>
<QuoteText $color={fontColor} $fontFamily={englishFont}> <QuoteText $color={fontColor} $fontFamily={englishFont}>
{englishText || 'Enter the English translation here.'} {englishText || t('tools.quoteCard.defaultTranslation')}
</QuoteText> </QuoteText>
<QuoteAuthor $color={authorColor} $fontFamily={englishFont}> <QuoteAuthor $color={authorColor} $fontFamily={englishFont}>
—— {author || '作者姓名'} —— {author || t('tools.quoteCard.defaultAuthor')}
</QuoteAuthor> </QuoteAuthor>
</PreviewContainer> </PreviewContainer>
</ContentWrapper> </ContentWrapper>
......
src/components/TextToImage.jsx
View file @ f4ce9222
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Title, Wrapper, Container, InputText, PreviewContainer, Preview } from '../js/SharedStyles'; import { marked } from 'marked';
import { useTranslation } from '../js/i18n'; import { useTranslation } from '../js/i18n';
import SEO from '../components/SEO'; import SEO from '../components/SEO';
import Marked from 'marked-react';
// 更新预设模板
const templates = [
{
name: 'simple',
bgColor: '#ffffff',
textColor: '#333333',
font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
padding: '40px'
},
{
name: 'ai-style',
bgColor: 'linear-gradient(135deg, #6366F1 0%, #4F46E5 100%)',
textColor: '#ffffff',
font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
padding: '40px'
},
{
name: 'dark',
bgColor: '#2d3748',
textColor: '#ffffff',
font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
padding: '40px'
},
{
name: 'paper',
bgColor: '#fdf6e3',
textColor: '#333333',
font: 'Georgia, "Nimbus Roman No9 L", "Songti SC", serif',
padding: '40px'
},
{
name: 'minimal',
bgColor: '#f8f9fa',
textColor: '#1a1a1a',
font: '-apple-system, "SF Pro Text", sans-serif',
padding: '40px'
},
{
name: 'tech',
bgColor: 'linear-gradient(135deg, #0f172a 0%, #1e293b 100%)',
textColor: '#e2e8f0',
font: '"SF Mono", SFMono-Regular, Consolas, monospace',
padding: '40px'
}
];
const Container = styled.div`
min-height: 100vh;
background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
padding: 2rem;
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
}
`;
const ContentWrapper = styled.div`
display: flex;
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
@media (max-width: 768px) {
flex-direction: column;
}
`;
const InputContainer = styled.div`
flex: 1;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: column;
gap: 1rem;
`;
const TitleLabel = styled.h2`
font-size: 1.8rem;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
letter-spacing: -0.02em;
`;
const Section = styled.div`
display: flex;
flex-direction: column;
gap: 0.5rem;
`;
const Label = styled.label`
font-size: 1rem;
color: #333333;
`;
const TemplateGrid = styled.div`
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
`;
const TemplateItem = styled.button`
padding: 0.5rem 1rem;
background: ${props => props.selected ?
'linear-gradient(135deg, #6366F1 0%, #4F46E5 100%)' :
'rgba(255, 255, 255, 0.8)'
};
color: ${props => props.selected ? '#ffffff' : '#333333'};
border: 2px solid ${props => props.selected ? '#4F46E5' : 'rgba(99, 102, 241, 0.1)'};
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
border-color: rgba(99, 102, 241, 0.3);
}
${props => props.selected && `
&::after {
content: '✓';
position: absolute;
top: 4px;
right: 4px;
font-size: 12px;
color: #ffffff;
}
`}
`;
const MarkdownEditor = styled.textarea`
width: 100%;
height: 100px;
padding: 0.5rem;
border: 1px solid #dadce0;
border-radius: 4px;
font-size: 16px;
color: #333333;
resize: vertical;
`;
const DownloadButton = styled.button` const DownloadButton = styled.button`
padding: 8px 16px; background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
background-color: #3498db;
color: white; color: white;
border: none; border: none;
border-radius: 4px; padding: 1rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer; cursor: pointer;
font-size: 14px; transition: all 0.3s ease;
transition: background-color 0.3s ease;
align-self: flex-end; align-self: flex-end;
margin-top: 10px; margin-top: 1rem;
&:hover { &:hover {
background-color: #2980b9; transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
} }
`; `;
const PreviewContainer = styled.div`
flex: 1;
background: ${(props) => props.bgColor || '#ffffff'};
padding: 2rem;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
border: 1px solid rgba(99, 102, 241, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 200px;
height: fit-content;
align-self: flex-start;
transition: all 0.3s ease;
margin-top: 1rem;
width: 100%;
&:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(99, 102, 241, 0.15);
}
@media (max-width: 768px) {
margin-top: 2rem;
width: 100%;
}
`;
const Preview = styled.div`
font-size: clamp(16px, 2.5vw, 24px);
margin-bottom: 16px;
color: ${(props) => props.$color || '#333333'};
text-align: center;
line-height: 1.5;
font-family: ${(props) => props.$fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'};
white-space: pre-wrap;
word-wrap: break-word;
width: 100%;
`;
function TextToImage() { function TextToImage() {
const { t } = useTranslation(); const { t } = useTranslation();
const [text, setText] = useState(''); const [text, setText] = useState('');
const [selectedTemplate, setSelectedTemplate] = useState(templates[0]);
const previewRef = useRef(null); const previewRef = useRef(null);
const formatText = (text) => { const formatText = (text) => {
return text return marked.parse(text, {
.replace(/^### (.*$)/gim, '<h4>$1</h4>') breaks: true,
.replace(/^## (.*$)/gim, '<h3>$1</h3>') gfm: true
.replace(/^# (.*$)/gim, '<h2>$1</h2>') });
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
.replace(/\n{2,}/g, '<br/><br/>')
.replace(/\n/g, '<br/>');
}; };
const handleDownload = async () => { const handleDownload = async () => {
...@@ -74,25 +280,64 @@ function TextToImage() { ...@@ -74,25 +280,64 @@ function TextToImage() {
title={t('tools.text2image.title')} title={t('tools.text2image.title')}
description={t('tools.text2image.description')} description={t('tools.text2image.description')}
/> />
<Wrapper> <Container>
<Title>{t('tools.text2image.title')}</Title>
<Container> <ContentWrapper>
<InputText <InputContainer>
placeholder={t('tools.text2image.inputPlaceholder')} <TitleLabel>{t('tools.text2image.title')}</TitleLabel>
value={text}
onChange={(e) => setText(e.target.value)} {/* 模板选择 */}
/> <Section>
<PreviewContainer> <Label>{t('tools.text2image.selectTemplate')}</Label>
<Preview <TemplateGrid>
ref={previewRef} {templates.map(template => (
dangerouslySetInnerHTML={{ __html: formatText(text) }} <TemplateItem
/> key={template.name}
selected={template === selectedTemplate}
onClick={() => setSelectedTemplate(template)}
background={template.bgColor}
color={template.textColor}
>
{t(`tools.text2image.templates.${template.name}`)}
</TemplateItem>
))}
</TemplateGrid>
</Section>
{/* Markdown 编辑器 */}
<Section>
<Label>{t('tools.text2image.inputLabel')}</Label>
<MarkdownEditor
value={text}
onChange={(e) => setText(e.target.value)}
placeholder={t('tools.text2image.placeholder')}
/>
</Section>
<DownloadButton onClick={handleDownload}> <DownloadButton onClick={handleDownload}>
{t('tools.text2image.downloadButton')} {t('tools.text2image.downloadButton')}
</DownloadButton> </DownloadButton>
</InputContainer>
<PreviewContainer
ref={previewRef}
bgColor={selectedTemplate.bgColor}
>
<div
style={{
padding: selectedTemplate.padding,
color: selectedTemplate.textColor,
fontFamily: selectedTemplate.font,
width: '100%'
}}
>
<Marked>
{text || t('tools.text2image.previewDefault')}
</Marked>
</div>
</PreviewContainer> </PreviewContainer>
</Container> </ContentWrapper>
</Wrapper> </Container>
</> </>
); );
} }
......
src/data/i18n.json
View file @ f4ce9222
...@@ -16,8 +16,48 @@ ...@@ -16,8 +16,48 @@
"text2image": { "text2image": {
"title": "Text to Image Card", "title": "Text to Image Card",
"description": "Convert text to image card", "description": "Convert text to image card",
"inputPlaceholder": "Enter text (can include titles, e.g. # Title 1)", "selectTemplate": "Select Template",
"downloadButton": "Export as Image" "inputLabel": "Input Text (Markdown Supported)",
"placeholder": "# Title\n## Subtitle\n- List item\n**Bold** *Italic*",
"downloadButton": "Export as Image",
"previewDefault": "# Preview Area\nEnter text to see preview here",
"templates": {
"simple": "Simple",
"ai-style": "AI Style",
"dark": "Dark",
"paper": "Paper",
"minimal": "Minimal",
"tech": "Tech"
}
},
"quoteCard": {
"title": "Quote Card Generator",
"description": "Convert bilingual quotes to cards",
"chinesePlaceholder": "Enter quote in Chinese",
"englishPlaceholder": "Enter English translation",
"authorPlaceholder": "Enter author name",
"selectChineseFont": "Select Chinese Font",
"selectEnglishFont": "Select English Font",
"selectFontColor": "Select Font Color",
"selectAuthorColor": "Select Author Color",
"selectBackground": "Select Background",
"customBackground": "Select Custom Background",
"downloadButton": "Download Image",
"defaultQuote": "Enter quote in Chinese",
"defaultTranslation": "Enter the English translation here.",
"defaultAuthor": "Author Name",
"fonts": {
"system": "System Default",
"sans": "Sans Serif",
"serif": "Serif",
"mono": "Monospace"
},
"backgrounds": {
"white": "White",
"dark": "Dark",
"paper": "Paper",
"custom": "Custom"
}
}, },
"jsonFormatter": { "jsonFormatter": {
"title": "JSON Formatter", "title": "JSON Formatter",
...@@ -69,10 +109,6 @@ ...@@ -69,10 +109,6 @@
"title": "FisherAI", "title": "FisherAI",
"description": "The Best Summary Extension for Chrome Browser" "description": "The Best Summary Extension for Chrome Browser"
}, },
"quotecard": {
"title": "Famous Quote Card Generator",
"description": "Convert bilingual famous quotes into cards"
},
"chatgpt": { "chatgpt": {
"title": "ChatGPT", "title": "ChatGPT",
"description": "AI conversational assistant by OpenAI" "description": "AI conversational assistant by OpenAI"
...@@ -240,10 +276,49 @@ ...@@ -240,10 +276,49 @@
"ai-products": "AI 产品", "ai-products": "AI 产品",
"tools": { "tools": {
"text2image": { "text2image": {
"title": "文字卡片", "title": "文字转图片生成器",
"description": "将文字转换为图片卡", "description": "将文本转换为精美的图片",
"inputPlaceholder": "输入文本（可包含标题，如# 标题1）", "selectTemplate": "选择模板",
"downloadButton": "导出为图片" "inputLabel": "输入文本 (支持 Markdown)",
"placeholder": "# 标题\n## 子标题\n- 列表项\n**粗体** *斜体*",
"downloadButton": "生成图片",
"previewDefault": "# 预览区域\n输入文本后在这里预览效果",
"templates": {
"simple": "简约",
"ai-style": "AI风格",
"dark": "暗色",
"paper": "纸张",
"minimal": "极简",
"tech": "科技"
}
},
"quoteCard": {
"title": "名言卡片生成器",
"description": "名言双语文本转为卡片",
"chinesePlaceholder": "请输入中文名人名言",
"englishPlaceholder": "请输入英文翻译",
"authorPlaceholder": "请输入作者姓名",
"selectChineseFont": "选择中文字体",
"selectEnglishFont": "选择英文字体",
"selectFontColor": "选择字体颜色",
"selectAuthorColor": "选择作者颜色",
"selectBackground": "选择背景颜色",
"customBackground": "选择自定义背景颜色",
"downloadButton": "下载图片",
"defaultQuote": "中文名人名言",
"defaultTranslation": "英文翻译",
"defaultAuthor": "作者姓名",
"fonts": {
"system": "系统默认",
"sans": "无衬线",
"serif": "衬线",
"mono": "等宽"
},
"backgrounds": {
"white": "白色",
"dark": "黑色",
"paper": "黄色纸张"
}
}, },
"jsonFormatter": { "jsonFormatter": {
"title": "JSON 格式化", "title": "JSON 格式化",
...@@ -295,10 +370,6 @@ ...@@ -295,10 +370,6 @@
"title": "FisherAI", "title": "FisherAI",
"description": "最好用的 Chrome 浏览器摘要插件" "description": "最好用的 Chrome 浏览器摘要插件"
}, },
"quotecard": {
"title": "名言卡片生成器",
"description": "名言双语文本转为卡片"
},
"chatgpt": { "chatgpt": {
"title": "ChatGPT", "title": "ChatGPT",
"description": "OpenAI旗下AI对话助手" "description": "OpenAI旗下AI对话助手"
...@@ -389,7 +460,7 @@ ...@@ -389,7 +460,7 @@
}, },
"runway": { "runway": {
"title": "Runway", "title": "Runway",
"description": "强大的AI视频制作工具，绿幕抠像、视频合成等" "description": "强大的AI视频制作工具，绿幕抠像视频合成等"
}, },
"luma": { "luma": {
"title": "Dream Machine", "title": "Dream Machine",
...@@ -469,7 +540,47 @@ ...@@ -469,7 +540,47 @@
"title": "テキストから画像", "title": "テキストから画像",
"description": "テキストを画像カードに変換", "description": "テキストを画像カードに変換",
"inputPlaceholder": "テキストを入力（タイトルを含めることができます、例：# タイトル1）", "inputPlaceholder": "テキストを入力（タイトルを含めることができます、例：# タイトル1）",
"downloadButton": "画像としてエクスポート" "selectTemplate": "テンプレートを選択",
"previewDefault": "# プレビューエリア\nテキストを入力すると、ここにプレビューが表示されます",
"placeholder": "# タイトル\n## サブタイトル\n- リスト項目\n**太字** *斜体*",
"downloadButton": "画像としてエクスポート",
"templates": {
"simple": "シンプル",
"ai-style": "AIスタイル",
"dark": "ダーク",
"paper": "ペーパー",
"minimal": "ミニマル",
"tech": "テック"
}
},
"quoteCard": {
"title": "名言カードジェネレーター",
"description": "名言のバイリンガルテキストをカードに変換",
"chinesePlaceholder": "中国語の名言を入力",
"englishPlaceholder": "英語訳を入力",
"authorPlaceholder": "著者名を入力",
"selectChineseFont": "中国語フォントを選択",
"selectEnglishFont": "英語フォントを選択",
"selectFontColor": "フォントカラーを選択",
"selectAuthorColor": "著者名の色を選択",
"selectBackground": "背景色を選択",
"customBackground": "カスタム背景色を選択",
"downloadButton": "画像をダウンロード",
"defaultQuote": "中国語の名言を入力してください",
"defaultTranslation": "英語訳をここに入力してください",
"defaultAuthor": "著者名",
"fonts": {
"system": "システムデフォルト",
"sans": "サンセリフ",
"serif": "セリフ",
"mono": "等幅"
},
"backgrounds": {
"white": "白",
"dark": "黒",
"paper": "クリーム",
"custom": "カスタム"
}
}, },
"jsonFormatter": { "jsonFormatter": {
"title": "JSONフォーマッター", "title": "JSONフォーマッター",
...@@ -521,10 +632,6 @@ ...@@ -521,10 +632,6 @@
"title": "FisherAI", "title": "FisherAI",
"description": "最高のChromeブラウザ用要約プラグイン" "description": "最高のChromeブラウザ用要約プラグイン"
}, },
"quotecard": {
"title": "名言カード生成器",
"description": "名言のバイリンガルテキストをカードに変換"
},
"chatgpt": { "chatgpt": {
"title": "ChatGPT", "title": "ChatGPT",
"description": "OpenAIのAI対話アシスタント" "description": "OpenAIのAI対話アシスタント"
...@@ -686,7 +793,7 @@ ...@@ -686,7 +793,7 @@
"keywords": "AI 도구상자, AI 도구, 텍스트 카드, JSON 포매터, URL 디코더, OpenAI 제품, 모델 가격 비교, 온라인 도구, 무료 도구", "keywords": "AI 도구상자, AI 도구, 텍스트 카드, JSON 포매터, URL 디코더, OpenAI 제품, 모델 가격 비교, 온라인 도구, 무료 도구",
"welcome": "환영합니다", "welcome": "환영합니다",
"login": "로그인", "login": "로그인",
"loginSubtitle": "AI 툴박스에 오신 것을 환영합니다. 전체 경험을 위해 로그인해 주세요", "loginSubtitle": "AI 툴��스에 오신 것을 환영합니다. 전체 경험을 위해 로그인해 주세요",
"logout": "로그아웃", "logout": "로그아웃",
"dev-tools": "개발 도구", "dev-tools": "개발 도구",
"image-tools": "이미지 도구", "image-tools": "이미지 도구",
...@@ -697,7 +804,48 @@ ...@@ -697,7 +804,48 @@
"title": "텍스트를 이미지로", "title": "텍스트를 이미지로",
"description": "텍스트를 이미지 카드로 변환", "description": "텍스트를 이미지 카드로 변환",
"inputPlaceholder": "텍스트 입력 (제목 포함 가능, 예: # 제목 1)", "inputPlaceholder": "텍스트 입력 (제목 포함 가능, 예: # 제목 1)",
"downloadButton": "이미지로 내보내기" "downloadButton": "이미지로 내보내기",
"selectTemplate": "템플릿 선택",
"inputLabel": "텍스트 입력 (Markdown 지원)",
"placeholder": "# 제목\n## 부제목\n- 목록 항목\n**굵게** *기울임*",
"previewDefault": "# 미리보기 영역\n텍스트 입력 후 여기에 미리보기가 표시됩니다",
"templates": {
"simple": "심플",
"ai-style": "AI 스타일",
"dark": "다크",
"paper": "페이퍼",
"minimal": "미니멀",
"tech": "테크"
}
},
"quoteCard": {
"title": "명언 카드 생성기",
"description": "명언 이중 언어 텍스트를 카드로 변환",
"chinesePlaceholder": "중국어 명언 입력",
"englishPlaceholder": "영어 번역 입력",
"authorPlaceholder": "저자 이름 입력",
"selectChineseFont": "중국어 글꼴 선택",
"selectEnglishFont": "영어 글꼴 선택",
"selectFontColor": "글자 색상 선택",
"selectAuthorColor": "저자명 색상 선택",
"selectBackground": "배경 색상 선택",
"customBackground": "사용자 정의 배경 선택",
"downloadButton": "이미지 다운로드",
"defaultQuote": "중국어 명언을 입력하세요",
"defaultTranslation": "영어 번역을 여기에 입력하세요",
"defaultAuthor": "저자명",
"fonts": {
"system": "시스템 기본",
"sans": "고딕체",
"serif": "명조체",
"mono": "고정폭"
},
"backgrounds": {
"white": "흰색",
"dark": "검정",
"paper": "크림색",
"custom": "사용자 정의"
}
}, },
"jsonFormatter": { "jsonFormatter": {
"title": "JSON 포맷터", "title": "JSON 포맷터",
...@@ -749,10 +897,6 @@ ...@@ -749,10 +897,6 @@
"title": "FisherAI", "title": "FisherAI",
"description": "가장 유용한 Chrome 브라우저 요약 확장 프로그램" "description": "가장 유용한 Chrome 브라우저 요약 확장 프로그램"
}, },
"quotecard": {
"title": "명언 카드 생성기",
"description": "명언 이중 언어 텍스트를 카드로 변환"
},
"chatgpt": { "chatgpt": {
"title": "ChatGPT", "title": "ChatGPT",
"description": "OpenAI의 AI 대화 도우미" "description": "OpenAI의 AI 대화 도우미"
......
src/pages/Home.jsx
View file @ f4ce9222
...@@ -5,7 +5,7 @@ import SEO from '../components/SEO'; ...@@ -5,7 +5,7 @@ import SEO from '../components/SEO';
const tools = [ const tools = [
{ id: 'handwrite', icon: '/assets/icon/handwrite.png', path: '/handwriting' }, { id: 'handwrite', icon: '/assets/icon/handwrite.png', path: '/handwriting' },
{ id: 'quotecard', icon: '/assets/icon/quotecard.png', path: '/quote-card' }, { id: 'quoteCard', icon: '/assets/icon/quotecard.png', path: '/quote-card' },
{ id: 'text2image', icon: '/assets/icon/text2image.png', path: '/text2image' }, { id: 'text2image', icon: '/assets/icon/text2image.png', path: '/text2image' },
{ id: 'jsonFormatter', icon: '/assets/icon/json-format.png', path: '/json-formatter' }, { id: 'jsonFormatter', icon: '/assets/icon/json-format.png', path: '/json-formatter' },
{ id: 'urlEncodeDecode', icon: '/assets/icon/url-endecode.png', path: '/url-encode-and-decode' }, { id: 'urlEncodeDecode', icon: '/assets/icon/url-endecode.png', path: '/url-encode-and-decode' },
......
src/pages/ImageTools.jsx
View file @ f4ce9222
...@@ -5,7 +5,7 @@ import SEO from '../components/SEO'; ...@@ -5,7 +5,7 @@ import SEO from '../components/SEO';
const tools = [ const tools = [
{ id: 'handwrite', icon: '/assets/icon/handwrite.png', path: '/handwriting' }, { id: 'handwrite', icon: '/assets/icon/handwrite.png', path: '/handwriting' },
{ id: 'quotecard', icon: '/assets/icon/quotecard.png', path: '/quote-card' }, { id: 'quoteCard', icon: '/assets/icon/quotecard.png', path: '/quote-card' },
{ id: 'text2image', icon: '/assets/icon/text2image.png', path: '/text2image' }, { id: 'text2image', icon: '/assets/icon/text2image.png', path: '/text2image' },
]; ];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment