Spaces:

SenY
/

LogoMaker

Running

App Files Files Community

SenY commited on Jan 18, 2025

Commit

2a8b3b0

1 Parent(s): a812266

ダークモード

Browse files

Files changed (6) hide show

effects/base.js +32 -10
effects/gold.js +1 -1
effects/multiline-neon.js +1 -1
index.html +20 -3
index.js +23 -0
styles.css +0 -2

effects/base.js CHANGED Viewed

@@ -315,22 +315,44 @@ export class BaseEffect {
         if (!this.strokeOptions) return;
         const { color, width } = this.strokeOptions;
         ctx.strokeStyle = color;
         ctx.lineWidth = width;
-        for (const lineCoords of this.coordinates) {
-            for (const coord of lineCoords) {
-                ctx.save();
-                if (coord.rotate) {
-                    ctx.translate(coord.x, coord.y);
-                    ctx.rotate(Math.PI/2);
-                    ctx.strokeText(coord.char, -coord.width/2, 0);
-                } else {
-                    ctx.strokeText(coord.char, coord.x, coord.y);
                 }
-                ctx.restore();
             }
         }
     }
     /**

         if (!this.strokeOptions) return;
         const { color, width } = this.strokeOptions;
+        const originalLineWidth = ctx.lineWidth;
+        const originalStrokeStyle = ctx.strokeStyle;
+        // 縁取りの設定
         ctx.strokeStyle = color;
         ctx.lineWidth = width;
+        ctx.lineJoin = 'round';  // 角を丸くする
+        ctx.lineCap = 'round';   // 線の端を丸くする
+        // 外側に広げるため、複数回描画
+        const iterations = 8;  // 描画回数
+        const angleStep = (Math.PI * 2) / iterations;
+        for (let i = 0; i < iterations; i++) {
+            const angle = i * angleStep;
+            const offsetX = Math.cos(angle) * (width * 0.5);
+            const offsetY = Math.sin(angle) * (width * 0.5);
+            for (const lineCoords of this.coordinates) {
+                for (const coord of lineCoords) {
+                    ctx.save();
+                    if (coord.rotate) {
+                        ctx.translate(coord.x + offsetX, coord.y + offsetY);
+                        ctx.rotate(Math.PI/2);
+                        ctx.strokeText(coord.char, -coord.width/2, 0);
+                    } else {
+                        ctx.strokeText(coord.char, coord.x + offsetX, coord.y + offsetY);
+                    }
+                    ctx.restore();
                 }
             }
         }
+        // 元の設定を復元
+        ctx.lineWidth = originalLineWidth;
+        ctx.strokeStyle = originalStrokeStyle;
+        ctx.lineJoin = 'miter';
+        ctx.lineCap = 'butt';
     }
     /**

effects/gold.js CHANGED Viewed

@@ -5,7 +5,7 @@ export class GoldEffect extends BaseEffect {
         super();
         this.strokeOptions = {
             color: '#b8860b',
-            width: 10
         };
     }

         super();
         this.strokeOptions = {
             color: '#b8860b',
+            width: 2
         };
     }

effects/multiline-neon.js CHANGED Viewed

@@ -10,7 +10,7 @@ export class MultilineNeonEffect extends BaseEffect {
         };
         this.strokeOptions = {
             color: '#ffffff',
-            width: 4
         };
     }

         };
         this.strokeOptions = {
             color: '#ffffff',
+            width: 1
         };
     }

index.html CHANGED Viewed

@@ -1,15 +1,25 @@
 <!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>
@@ -17,8 +27,15 @@
         <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">

 <!DOCTYPE html>
+<html lang="ja" data-bs-theme="light">
 <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.3.0/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>
+    <style>
+        .theme-switch {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .theme-switch .icon {
+            font-size: 1.2rem;
+        }
+    </style>
 </head>
 <body>
         <div class="row justify-content-center">
             <div class="col-md-8">
                 <div class="card">
+                    <div class="card-header d-flex justify-content-between align-items-center">
                         <h2 class="h4 mb-0">ロゴジェネレーター</h2>
+                        <div class="theme-switch">
+                            <span class="icon">☀️</span>
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="themeSwitch">
+                            </div>
+                            <span class="icon">🌙</span>
+                        </div>
                     </div>
                     <div class="card-body">
                         <div class="mb-3">

index.js CHANGED Viewed

@@ -636,3 +636,26 @@ document.getElementById('verticalSpacing').addEventListener('input', function (e
     document.getElementById('verticalSpacingValue').textContent = e.target.value;
     // ロゴの再生成処理を呼び出す
 });

     document.getElementById('verticalSpacingValue').textContent = e.target.value;
     // ロゴの再生成処理を呼び出す
 });
+// ダークモード切り替え機能
+document.addEventListener('DOMContentLoaded', () => {
+    const themeSwitch = document.getElementById('themeSwitch');
+    // 保存された設定を読み込む
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+        document.documentElement.setAttribute('data-bs-theme', 'dark');
+        themeSwitch.checked = true;
+    }
+    // テーマ切り替えの処理
+    themeSwitch.addEventListener('change', () => {
+        if (themeSwitch.checked) {
+            document.documentElement.setAttribute('data-bs-theme', 'dark');
+            localStorage.setItem('theme', 'dark');
+        } else {
+            document.documentElement.setAttribute('data-bs-theme', 'light');
+            localStorage.setItem('theme', 'light');
+        }
+    });
+});

styles.css CHANGED Viewed

@@ -32,7 +32,6 @@
 }
 .effect-item {
-    background: #f8f9fa;
     border: 1px solid #dee2e6;
     border-radius: 0.5rem;
     padding: 1rem;
@@ -48,7 +47,6 @@
 }
 .effect-item.error {
-    background: #fff3f3;
     border-color: #ffcdd2;
 }

 }
 .effect-item {
     border: 1px solid #dee2e6;
     border-radius: 0.5rem;
     padding: 1rem;
 }
 .effect-item.error {
     border-color: #ffcdd2;
 }