| <!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/bootstrap@5.1.3/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>
|
| <select name="googleFontInput" class="form-select" id="googleFontInput">
|
| <option>Aoboshi One</option>
|
| <option>BIZ UDGothic</option>
|
| <option>BIZ UDMincho</option>
|
| <option>BIZ UDPGothic</option>
|
| <option>BIZ UDPMincho</option>
|
| <option>Cherry Bomb One</option>
|
| <option>Chokokutai</option>
|
| <option>Darumadrop One</option>
|
| <option>Dela Gothic One</option>
|
| <option>DotGothic16</option>
|
| <option>Hachi Maru Pop</option>
|
| <option>Hina Mincho</option>
|
| <option>IBM Plex Sans JP</option>
|
| <option>Kaisei Decol</option>
|
| <option>Kaisei HarunoUmi</option>
|
| <option>Kaisei Opti</option>
|
| <option>Kaisei Tokumin</option>
|
| <option>Kiwi Maru</option>
|
| <option>Klee One</option>
|
| <option>Kosugi</option>
|
| <option>Kosugi Maru</option>
|
| <option>M PLUS 1</option>
|
| <option>M PLUS 1 Code</option>
|
| <option>M PLUS 1p</option>
|
| <option>M PLUS 2</option>
|
| <option>M PLUS Rounded 1c</option>
|
| <option selected="selected">Mochiy Pop One</option>
|
| <option>Mochiy Pop P One</option>
|
| <option>Monomaniac One</option>
|
| <option>Murecho</option>
|
| <option>New Tegomin</option>
|
| <option>Noto Sans JP</option>
|
| <option>Noto Serif JP</option>
|
| <option>Palette Mosaic</option>
|
| <option>Potta One</option>
|
| <option>Rampart One</option>
|
| <option>Reggae One</option>
|
| <option>Rock 3D</option>
|
| <option>RocknRoll One</option>
|
| <option>Sawarabi Gothic</option>
|
| <option>Sawarabi Mincho</option>
|
| <option>Shippori Antique</option>
|
| <option>Shippori Antique B1</option>
|
| <option>Shippori Mincho</option>
|
| <option>Shippori Mincho B1</option>
|
| <option>Shizuru</option>
|
| <option>Slackside One</option>
|
| <option>Stick</option>
|
| <option>Train One</option>
|
| <option>Tsukimi Rounded</option>
|
| <option>Yomogi</option>
|
| <option>Yuji Boku</option>
|
| <option>Yuji Hentaigana Akari</option>
|
| <option>Yuji Hentaigana Akebono</option>
|
| <option>Yuji Mai</option>
|
| <option>Yuji Syuku</option>
|
| <option>Yusei Magic</option>
|
| <option>Zen Antique</option>
|
| <option>Zen Antique Soft</option>
|
| <option>Zen Kaku Gothic Antique</option>
|
| <option>Zen Kaku Gothic New</option>
|
| <option>Zen Kurenaido</option>
|
| <option>Zen Maru Gothic</option>
|
| <option>Zen Old Mincho</option>
|
| </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="effect-grid">
|
|
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </body>
|
|
|
| </html> |
