From 2cd029b1b5020019563238faec0856b5e94a8ecc Mon Sep 17 00:00:00 2001
From: ShibaKabu <132909895+shibadogcap@users.noreply.github.com>
Date: Tue, 2 Jul 2024 18:17:18 +0900
Subject: [PATCH 1/2] fix share

---
 index.html | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index caacb06..d8bdefb 100644
--- a/index.html
+++ b/index.html
@@ -60,9 +60,12 @@ <h1>NDOT Wallpaper Maker</h1>
                 <input type="radio" name="size" value="Nothing Phone(2a)">Nothing Phone(2a)<br>
                 <input type="radio" name="size" value="custom">カスタム <input type="number" id="width_input" value="1080">x<input type="number" id="height_input" value="1920">px
             </p>
-            <p>余白
+            <p>余白（ヨコ）
                 <input type="number" id="margin_input" value="10">px
-        </div>
+            </p>
+            <p>余白（タテ）
+                <input type="number" id="margin_input" value="10">px
+            </p>
     </div>
 
     <script>
@@ -81,7 +84,7 @@ <h1>NDOT Wallpaper Maker</h1>
             ▼プレビュー（設定を入力すると表示されます）
         </center>
     </p>
-    <div id="preview">
+    <div id="preview"></div>
         <center>
         <canvas id="preview_canvas" style="max-width: 90%;"></canvas>
         <script>
@@ -94,7 +97,8 @@ <h1>NDOT Wallpaper Maker</h1>
             var text_direction = document.getElementsByName("text_direction");
             var width_input = document.getElementById("width_input");
             var height_input = document.getElementById("height_input");
-            var margin_input = document.getElementById("margin_input");
+            var margin_input_horizontal = document.getElementById("margin_input_horizontal");
+            var margin_input_vertical = document.getElementById("margin_input_vertical");
 
             // テキストを横幅に収まるように分割
             function splitText() {
@@ -223,7 +227,7 @@ <h1>NDOT Wallpaper Maker</h1>
                     navigator.share({
                         title: "My Wallpaper",
                         text: "Created with NDOT Wallpaper Maker",
-                        url: dataUrl
+                        image: dataUrl
                     })
                     .then(() => console.log("Share successful"))
                     .catch((error) => console.log("Share failed:", error));

From dbce1c74bdce1faddc35b613582b180628eeb73b Mon Sep 17 00:00:00 2001
From: ShibaKabu <132909895+shibadogcap@users.noreply.github.com>
Date: Sun, 7 Jul 2024 08:39:19 +0900
Subject: [PATCH 2/2] general update

---
 ....1.4.woff2 => Ndot77JPExtendedv1.1.4.woff2 | Bin
 css/ndot_wallpaper_maker.css                  |  94 ------
 index.html                                    | 286 +++++++++++-------
 3 files changed, 174 insertions(+), 206 deletions(-)
 rename fonts/Ndot77JPExtendedv1.1.4.woff2 => Ndot77JPExtendedv1.1.4.woff2 (100%)
 delete mode 100644 css/ndot_wallpaper_maker.css

diff --git a/fonts/Ndot77JPExtendedv1.1.4.woff2 b/Ndot77JPExtendedv1.1.4.woff2
similarity index 100%
rename from fonts/Ndot77JPExtendedv1.1.4.woff2
rename to Ndot77JPExtendedv1.1.4.woff2
diff --git a/css/ndot_wallpaper_maker.css b/css/ndot_wallpaper_maker.css
deleted file mode 100644
index c12c910..0000000
--- a/css/ndot_wallpaper_maker.css
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
-    Ndot Wallpaper Maker用のCSSファイル
-*/
-
-/* ページ全体のスタイル */
-/* フォントにfontフォルダ内にあるNdot77JPExtendedv1.1.4.woff2を使用 */
-@font-face {
-    font-family: 'Ndot77JPExtendedv1.1.4';
-    src: url('../fonts/Ndot77JPExtendedv1.1.4.woff2') format('woff2'),
-}
-
-body {
-    font-family: 'Ndot77JPExtendedv1.1.4', sans-serif;
-    margin: 0;
-    padding: 0;
-}
-/*端末のダークテーマ・ライトテーマによって背景色を変更*/
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: #181818;
-        color: #fff;
-    }
-}
-@media (prefers-color-scheme: light) {
-    body {
-        background-color: #e4e4e4;
-        color: #000;
-    }
-}
-/* 全体で太字や斜体にならないようにする */
-body {
-    font-weight: normal;
-    font-style: normal;
-}
-
-/*太字解除*/
-h1, h2, h3, h4, h5, h6, p, a, li, dt, dd, th, td, input, textarea, button {
-    font-weight: normal;
-}
-
-/*左右の余白をモバイルとデスクトップ兼用に設定*/
-/* モバイル */
-@media (max-width: 767px) {
-    h1, h2, h3, h4, h5, h6, p, a, li, dt, dd, th, td, input, textarea, button {
-        margin: 20px;
-    }
-}
-/* デスクトップ */
-@media (min-width: 768px) {
-    h1, h2, h3, h4, h5, h6, p, a, li, dt, dd, th, td, input, textarea, button{
-        margin: 30px;
-    }
-}
-
-/*ボタンのスタイル*/
-button {
-    background-color: #444444;
-    color: #e4e4e4;
-    border: none;
-    border-radius: 50px;
-    padding: 10px 25px;
-    cursor: pointer;
-    transition: background-color 0.1s ease-in-out;
-    font-family: 'Ndot77JPExtendedv1.1.4', sans-serif;
-}
-button:hover {
-    background-color: #d7181f;
-    color: #fff;
-}
-
-/*入力部分のスタイル*/
-input[type="text"], input[type="number"], textarea {
-    border: 1px solid #181818;
-    border-radius: 20px;
-    padding: 5px;
-    background-color:#e4e4e4 ;
-    font-family: 'Ndot77JPExtendedv1.1.4', sans-serif;
-}
-
-/*ラジオボタンのスタイル*/
-input[type="radio"]:checked {
-    background-color: #d7181f;
-    color: #fff;
-    border: none;
-}
-
-/*カラーピッカーのスタイル*/
-input[type="color"] {
-    border: none;
-    border-radius: 20px;
-    padding: 5px;
-    background-color: #e4e4e4;
-    font-family: 'Ndot77JPExtendedv1.1.4', sans-serif;
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index d8bdefb..ad54ff4 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,97 @@
 <html>
 <head>
     <title>NDOT Wallpaper Maker</title>
-    <link rel="stylesheet" type="text/css" href="css/ndot_wallpaper_maker.css">
+    <style type="text/css">
+        @font-face {
+    font-family: 'Ndot77JPExtendedv1.1.4';
+    src: url('./Ndot77JPExtendedv1.1.4.woff2') format('woff2'),
+}
+
+body {
+    font-family: 'Ndot77JPExtendedv1.1.4', sans-serif;
+    margin: 0;
+    padding: 0;
+}
+/*端末のダークテーマ・ライトテーマによって背景色を変更*/
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #181818;
+        color: #fff;
+    }
+}
+@media (prefers-color-scheme: light) {
+    body {
+        background-color: #e4e4e4;
+        color: #000;
+    }
+}
+/* 全体で太字や斜体にならないようにする */
+body {
+    font-weight: normal;
+    font-style: normal;
+}
+
+/*太字解除*/
+h1, h2, h3, h4, h5, h6, p, a, li, dt, dd, th, td, input, textarea, button {
+    font-weight: normal;
+}
+
+/*左右の余白をモバイルとデスクトップ兼用に設定*/
+/* モバイル */
+@media (max-width: 767px) {
+    h1, h2, h3, h4, h5, h6, p, a, li, dt, dd, th, td, input, textarea, button {
+        margin: 20px;
+    }
+}
+/* デスクトップ */
+@media (min-width: 768px) {
+    h1, h2, h3, h4, h5, h6, p, a, li, dt, dd, th, td, input, textarea, button{
+        margin: 30px;
+    }
+}
+
+/*ボタンのスタイル*/
+button {
+    background-color: #444444;
+    color: #e4e4e4;
+    border: none;
+    border-radius: 50px;
+    padding: 10px 25px;
+    cursor: pointer;
+    transition: background-color 0.1s ease-in-out;
+    font-family: 'Ndot77JPExtendedv1.1.4', sans-serif;
+}
+button:hover {
+    background-color: #d7181f;
+    color: #fff;
+}
+
+/*入力部分のスタイル*/
+input[type="text"], input[type="number"], textarea {
+    border: 1px solid #181818;
+    border-radius: 20px;
+    padding: 5px;
+    background-color:#e4e4e4 ;
+    font-family: 'Ndot77JPExtendedv1.1.4', sans-serif;
+    width: 6ch;
+}
+
+/*ラジオボタンのスタイル*/
+input[type="radio"]:checked {
+    background-color: #d7181f;
+    color: #fff;
+    border: none;
+}
+
+/*カラーピッカーのスタイル*/
+input[type="color"] {
+    border: none;
+    border-radius: 20px;
+    padding: 5px;
+    background-color: #e4e4e4;
+    font-family: 'Ndot77JPExtendedv1.1.4', sans-serif;
+}
+    </style>
 </head>
 <body>
     <!-- ヘッダー。中央ぞろえでタイトルを表示-->
@@ -13,58 +103,66 @@ <h1>NDOT Wallpaper Maker</h1>
     </header>
     <!--説明-->
     <div id="description">
-        <p><center>手軽にNOTHING風フォントで壁紙が作れます。下の設定から細かい調整を行えます。</center></p>
+        <p><center>Create wallpapers with the NOTHING-style font. Adjust settings below.</center></p>
     </div>
         </center>
     </div>
     <!--設定入力部分-->
     <div id="settings">
         <div class = button>
-        <button onclick="toggleSettings()">設定の表示を切り替え</button>
+        <button onclick="toggleSettings()">Toggle Settings Display</button>
         </div>
         <div id="settingsContent" style="display: none;">
             <!--背景色-->
-            <p>背景色
+            <p>Background color
                 <input type="color" id="background_color_input" value="#f0f0f0">
             </p>
             <!--テキスト内容-->
-            <p>テキスト<br>
-            <textarea id="text_input" style="width: 70%" rows="5" placeholder="ここにテキストを入力してください。">
-NOTHINGはロンドンを拠点とするデジタル製品企業で、
-人と技術の間にある障壁を取り除き、シームレスなデジタルの未来を
-創造することを使命としています。
+            <p>Text<br>
+            <textarea id="text_input" style="width: 70%" rows="10" placeholder="ここにテキストを入力してください。">
 NOTHINGでは、芸術性、信頼性、
 そしてクラフトマンシップを重視した象徴的な製品を開発することで、
 テクノロジーに情熱を取り戻したいと考えています。
 最終的には、自分の家族や親しい友人と共有することを
 誇りに思える製品を作りたいと考えています。シンプルに。
-美しい技術は複雑であってはならないからです。(Nothing公式サイトより)</textarea>
+美しい技術は複雑であってはならないからです。
+我們是一家總部位於倫敦的科技公司；
+我們的使命是移除人與技術之間的障礙。
+為達成這一目標，我們正在製作直觀且能完美連結的產品，
+這可以改善我們的生活，而且不會妨礙到我們。
+沒有令人迷惑的技術術語。沒有無聊的產品名稱。
+只有藝術性、激情和信任。還有能自豪地與朋友和家人分享的產品。
+就是這麼簡單。因為美麗的技術不應該是複雜的。
+Nothing은 런던에 본사를 둔 글로벌 테크 회사로 사람과 기술 사이의 장벽을 무너뜨리는것을 모토로 합니다.
+이를 위해 방해 없이 우리의 삶을 개선하는 직관적이고 완벽한 연결성을 제공하는 제품을 만들고 있습니다.
+복잡한 기술 얘기는 없습니다. 
+이상한 제품명도 없습니다. 
+예술성, 열정, 신뢰만 있으면 됩니다. 
+그리고 우리는 친구 및 가족과 공유할 수 있는 자랑스러운 제품을 만듭니다. 
+우리는 단순함을 추구합니다. 
+아름다운 기술은 복잡하지 않기 때문입니다.
+(Nothing公式サイトより)</textarea>
             </p>
             <!--テキストの色-->
-            <p>テキストの色
+            <p>Text color
                 <input type="color" id="font_color_input" value="#181818">
             </p>
             <!--フォントサイズ-->
-            <p>テキストのサイズ
+            <p>Font size
                 <input type="number" id="font_size_input" value="125">px
             </p>
-            <!--テキストの方向（一つだけボタンで選択）-->
-            <p>テキストの方向
-                <input type="radio" name="text_direction" value="horizontal" checked>横書き
-                <input type="radio" name="text_direction" value="vertical">縦書き
-            </p>
             <!--サイズ-->
-            <p>サイズ<br>
+            <p>Wallpaper size<br>
                 <input type="radio" name="size" value="Nothing Phone(1)" checked>Nothing Phone(1)<br>
                 <input type="radio" name="size" value="Nothing Phone(2)">Nothing Phone(2)<br>
                 <input type="radio" name="size" value="Nothing Phone(2a)">Nothing Phone(2a)<br>
-                <input type="radio" name="size" value="custom">カスタム <input type="number" id="width_input" value="1080">x<input type="number" id="height_input" value="1920">px
+                <input type="radio" name="size" value="custom">Custom<input type="number" id="width_input" value="1080">x<input type="number" id="height_input" value="1920">px
             </p>
-            <p>余白（ヨコ）
-                <input type="number" id="margin_input" value="10">px
+            <p>Margin (Horizontal)
+                <input type="number" id="margin_input_horizontal" value="20">px
             </p>
-            <p>余白（タテ）
-                <input type="number" id="margin_input" value="10">px
+            <p>Margin (Vertical)
+                <input type="number" id="margin_input_vertical" value="20">px
             </p>
     </div>
 
@@ -81,7 +179,7 @@ <h1>NDOT Wallpaper Maker</h1>
     <!--プレビュー部分（Javascriptキャンバス）-->
     <p>
         <center>
-            ▼プレビュー（設定を入力すると表示されます）
+            ▼ Preview ▼
         </center>
     </p>
     <div id="preview"></div>
@@ -99,45 +197,41 @@ <h1>NDOT Wallpaper Maker</h1>
             var height_input = document.getElementById("height_input");
             var margin_input_horizontal = document.getElementById("margin_input_horizontal");
             var margin_input_vertical = document.getElementById("margin_input_vertical");
-
-            // テキストを横幅に収まるように分割
-            function splitText() {
+            var text_input = document.getElementById("text_input");
+            function drawText() {
                 var text = text_input.value;
                 var textWidth = ctx.measureText(text).width;
                 var textHeight = parseInt(font_size_input.value);
-                var maxWidth = canvas.width - margin_input.value * 2;
-                var maxHeight = canvas.height - margin_input.value * 2;
+                var maxWidth = canvas.width - margin_input_horizontal * 2;
+                var maxHeight = canvas.height - margin_input_vertical * 2;
+                //改行ごとにテキストを分割してリストに格納
+                var lines = text.split("\n");
+                //一行当たりの最大文字数を計算
+                var maxCharsPerLine = Math.floor(maxWidth / textWidth);
+                //テキストを再度分割
+                /*
                 var lines = [];
                 var line = "";
-                if (text_direction[0].checked) {
-                    var textLine = line + text;
-                    var textWidth = ctx.measureText(textLine).width;
-                    for (var i = 0; i < text.length; i++) {
-                        var testLine = line + text[i];
-                        var testWidth = ctx.measureText(testLine).width;
-                        if (testWidth > maxWidth) {
-                            lines.push(line);
-                            line = text[i];
-                        } else {
-                            line = testLine;
-                        }
-                    }
-                }else{
-                    var textLine = line + text;
-                    var textHeight = ctx.measureText(textLine).height
-                    for (var i = 0; i < text.length; i++) {
-                        var testLine = line + text[i];
-                        var testHeight = textHeight * testLine.length;
-                        if (testHeight > maxHeight) {
-                            lines.push(line);
-                            line = text[i];
-                        } else {
-                            line = testLine;
-                        }
+                for (var i = 0; i < text.length; i++) {
+                    line += text[i];
+                    if (ctx.measureText(line).width > maxWidth) {
+                        lines.push(line.slice(0, -1));
+                        line = text[i];
                     }
                 }
-                lines.push(line);
-                return lines;
+                */
+                var line_length = lines[0].length;
+                //x = (canvas.width - ctx.measureText(lines[0]).width) / 2;
+                //y = (canvas.height - textHeight * lines.length) / 2;
+                var x = margin_input_horizontal.value;
+                var y = Number(margin_input_vertical.value);
+                //console.log(typeof y);
+                for (var i = 0; i < lines.length; i++) {
+                    line_length = ctx.measureText(lines[i]).width;
+                    ctx.fillText(lines[i], x, y);
+                    console.log(i,x,y,lines[i]);
+                    y += textHeight;
+                }
             }
 
             function draw() {
@@ -151,64 +245,42 @@ <h1>NDOT Wallpaper Maker</h1>
                 };
                 canvas.width = sizeList[selectedSize].width;
                 canvas.height = sizeList[selectedSize].height;
-
+            
                 // 背景色を設定
                 ctx.fillStyle = background_color_input.value;
                 ctx.fillRect(0, 0, canvas.width, canvas.height);
-
+            
                 // テキストを設定
-                var font = new FontFace('Ndot77JPExtended', 'url(fonts/Ndot77JPExtendedv1.1.4.woff2)');
+                //var font = new FontFace('Ndot77JPExtended', 'url(fonts/Ndot77JPExtendedv1.1.4.woff2)');
+                var font = new FontFace('Ndot77JPExtended', 'url(Ndot77JPExtendedv1.1.4.woff2)');
                 font.load().then(function(loadedFont) {
                     document.fonts.add(loadedFont);
                     ctx.font = font_size_input.value + "px 'Ndot77JPExtended'";
                     ctx.fillStyle = font_color_input.value;
-                    // テキストの変更を適応
+                    ctx.textAlign = "left";
+                    ctx.textBaseline = "top";
                     drawText();
                 });
             }
 
-            var text_input = document.getElementById("text_input"); // Add missing variable declaration
-            var text_direction = document.getElementsByName("text_direction"); // Add missing variable declaration
-
-            function drawText() {
-                var lines = splitText();
-                var textWidth = ctx.measureText(lines[0]).width;
-                var textHeight = parseInt(font_size_input.value);
-                var x = (canvas.width - textWidth) / 2;
-                var y = (canvas.height - textHeight * lines.length) / 2;
-                for (var i = 0; i < lines.length; i++) {
-                    if (text_direction[0].checked) {
-                        ctx.fillText(lines[i], x, y + textHeight * (i + 1));
-                    } else {
-                        ctx.save();
-                        ctx.translate(x, y);
-                        ctx.rotate(-Math.PI / 2);
-                        ctx.fillText(lines[i], 0, textHeight * (i + 1));
-                        ctx.restore();
-                    }
-                }
-            }
-
             // 設定が変更されたらプレビューを更新
-            var inputs = document.querySelectorAll("input");
-            for (var i = 0; i < inputs.length; i++) {
-                inputs[i].addEventListener("input", draw);
-            }
-            var textareas = document.querySelectorAll("textarea");
-            for (var i = 0; i < textareas.length; i++) {
-                textareas[i].addEventListener("input", draw);
-            }
-            var radios = document.querySelectorAll("input[type=radio]");
-            for (var i = 0; i < radios.length; i++) {
-                radios[i].addEventListener("change", draw);
-            }
+            background_color_input.addEventListener("input", draw);
+            font_color_input.addEventListener("input", draw);
+            font_size_input.addEventListener("input", draw);
+            width_input.addEventListener("input", draw);
+            height_input.addEventListener("input", draw);
+            margin_input_horizontal.addEventListener("input", draw);
+            margin_input_vertical.addEventListener("input", draw);
+            text_input.addEventListener("input", draw);
+            document.getElementsByName("size").forEach(function(e) {
+                e.addEventListener("input", draw);
+            });
             draw();
         </script>
         <!--ダウンロードボタン-->
         <p>
             <center>
-                <button id="download">ダウンロード</button>
-                <button id="share">シェア</button>
+                <button id="download">Download wallpaper</button>
             </center>
         </p>
         <script>
@@ -219,22 +291,12 @@ <h1>NDOT Wallpaper Maker</h1>
                 link.download = "wallpaper.png";
                 link.click();
             }
-
-            document.getElementById("share").onclick = (event) => {
-                let canvas = document.getElementById("preview_canvas");
-                let dataUrl = canvas.toDataURL("image/png");
-                if (navigator.share) {
-                    navigator.share({
-                        title: "My Wallpaper",
-                        text: "Created with NDOT Wallpaper Maker",
-                        image: dataUrl
-                    })
-                    .then(() => console.log("Share successful"))
-                    .catch((error) => console.log("Share failed:", error));
-                } else {
-                    alert("Sharing is not supported on this device.");
-                }
-            }
         </script>
+    </div>
+    <!--フッター-->
+    <footer>
+        <center>
+            <p style="color: #888888;">©2024 Made with Ndot 77 JP Extended and <span style="color: #d7181f;">♥</span> by shibadogcap</p>
+        </center>
 </body>
 </html>
\ No newline at end of file