|
<!DOCTYPE html>
|
|
<html lang="ja">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ロゴジェネレーター</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
|
|
<link href="styles.css" rel="stylesheet">
|
|
<script type="module" src="effects.js"></script>
|
|
<script type="module" src="index.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="h4 mb-0">ロゴジェネレーター</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="textInput" class="form-label">テキスト</label>
|
|
<textarea class="form-control" id="textInput" rows="3" placeholder="テキストを入力してください">プレビュー</textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="googleFontInput" class="form-label">フォント</label>
|
|
<div class="row g-2 mb-2">
|
|
<div class="col">
|
|
<div class="btn-group w-100 flex-wrap gap-1" role="group" id="fontTagFilter">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="noFontsMessage" class="alert alert-danger mb-2" style="display: none;">
|
|
選択した条件に一致するフォントが見つかりませんでした
|
|
</div>
|
|
<select name="googleFontInput" class="form-select" id="googleFontInput">
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3 d-none">
|
|
<label for="fontSize" class="form-label">フォントサイズ</label>
|
|
<input type="number" class="form-control" id="fontSize" value="128" min="8" max="128">
|
|
</div>
|
|
|
|
<div class="mb-3 form-switch">
|
|
<input type="checkbox" class="form-check-input" id="verticalText" role="switch">
|
|
<label class="form-check-label" for="verticalText">縦書き</label>
|
|
</div>
|
|
|
|
<div class="mb-3" id="verticalSpacingContainer" style="display: none;">
|
|
<label for="verticalSpacing" class="form-label">文字間隔</label>
|
|
<input type="range" class="form-range" id="verticalSpacing" min="1" max="2" step="0.1" value="1.3">
|
|
<div class="text-center">
|
|
<span id="verticalSpacingValue">1.3</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">ポストプロセス</label>
|
|
<div class="btn-group w-100 flex-wrap gap-1" role="group" id="postProcessContainer">
|
|
<div class="btn-check-wrapper">
|
|
<input type="checkbox" class="btn-check" name="postProcess" id="postProcessDummy" value="dummy">
|
|
<label class="btn btn-outline-success" for="postProcessDummy">
|
|
ダミー
|
|
</label>
|
|
</div>
|
|
<div class="btn-check-wrapper">
|
|
<input type="checkbox" class="btn-check" name="postProcess" id="postProcessInvert" value="invert">
|
|
<label class="btn btn-outline-success" for="postProcessInvert">
|
|
色反転
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="effect-grid">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |
