Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@shibadogcap
shibadogcap committed Jun 1, 2024
0 parents commit cbee253
Show file tree
Hide file tree
Showing 6 changed files with 307 additions and 0 deletions.
94 changes: 94 additions & 0 deletions css/ndot_wallpaper_maker.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
/*
Ndot Wallpaper Maker用のCSSファイル
*/

/* ページ全体のスタイル */
/* フォントにfontフォルダ内にあるNdot77JPExtendedv1.1.4.ttfを使用 */
@font-face {
font-family: 'Ndot77JPExtendedv1.1.4';
src: url('../fonts/Ndot77JPExtendedv1.1.4.ttf') format('truetype');
}

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;
}
Binary file added fonts/Ndot77JPExtendedv1.1.4.ttf
Binary file not shown.
Binary file added fonts/Ndot77JPExtendedv1.1.4.woff2
Binary file not shown.
166 changes: 166 additions & 0 deletions ndot_wallpaper_maker.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html>
<head>
<title>NDOT Wallpaper Maker</title>
<link rel="stylesheet" type="text/css" href="css/ndot_wallpaper_maker.css">
</head>
<body>
<!-- ヘッダー。中央ぞろえでタイトルを表示-->
<header>
<center>
<h1>NDOT Wallpaper Maker</h1>
</center>
</header>
<!--説明-->
<div id="description">
<p><center>手軽にNOTHING風フォントで壁紙が作れます。下の設定から細かい調整を行えます。</center></p>
</div>
</center>
</div>
<!--設定入力部分-->
<div id="settings">
<div class = button>
<button onclick="toggleSettings()">設定の表示を切り替え</button>
</div>
<div id="settingsContent" style="display: none;">
<!--背景色-->
<p>背景色
<input type="color" id="background_color_input" value="#f0f0f0">
</p>
<!--テキスト内容（長文、htmlタグ使用可能）-->
<p>テキスト（htmlタグ使用可能）<br>
<textarea id="text_input">ここにテキストを入力してください</textarea>
</p>
<!--テキストの色-->
<p>テキストの色
<input type="color" id="font_color_input" value="#000000">
</p>
<!--フォントサイズ-->
<p>テキストのサイズ
<input type="number" id="font_size_input" value="20">px
</p>
<!--テキストの方向（一つだけボタンで選択）-->
<p>テキストの方向
<input type="radio" name="text_direction" value="horizontal" checked>横書き
<input type="radio" name="text_direction" value="vertical">縦書き
</p>
<!--サイズ-->
<p>サイズ<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" onclick="enableCustomSize()">カスタム <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
</div>
</div>

<script>
function toggleSettings() {
var settingsContent = document.getElementById("settingsContent");
if (settingsContent.style.display === "none") {
settingsContent.style.display = "block";
} else {
settingsContent.style.display = "none";
}
}
</script>
<!--プレビュー部分（Javascriptキャンバス）-->
<p>
<center>
▼プレビュー（設定を入力すると表示されます）
</center>
</p>
<div id="preview">
<center>
<canvas id="preview_canvas"></canvas>
<script>
var canvas = document.getElementById("preview_canvas");
var ctx = canvas.getContext("2d");
var background_color_input = document.getElementById("background_color_input");
var text_input = document.getElementById("text_input");
var font_color_input = document.getElementById("font_color_input");
var font_size_input = document.getElementById("font_size_input");
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");

function draw() {
// キャンバスのサイズを設定
var selectedSize = document.querySelector('input[name="size"]:checked').value;
var sizeList = {
"Nothing Phone(1)": { width: 100, height: 200 },
"Nothing Phone(2)": { width: 300, height: 100 },
"Nothing Phone(2a)": { width: 500, height: 100 },
"custom": { width: parseInt(width_input.value), height: parseInt(height_input.value) }
};
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/Ndot77JPExtended.woff2)');
font.load().then(function(loadedFont) {
document.fonts.add(loadedFont);
ctx.font = font_size_input.value + "px 'Ndot77JPExtended'";
ctx.fillStyle = font_color_input.value;
// テキスト描画を呼び出す前に再帰呼び出しを削除
// draw();
}).catch(function(error) {
console.log('Font loading failed: ' + error);
});
var text = text_input.value;
var textWidth = ctx.measureText(text).width;
var textHeight = parseInt(font_size_input.value);
var x = (canvas.width - textWidth) / 2;
var y = (canvas.height + textHeight) / 2;
if (text_direction[1].checked) {
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(-Math.PI / 2);
ctx.textAlign = "center";
ctx.fillText(text, 0, 0);
ctx.restore();
} else {
ctx.textAlign = "center";
ctx.fillText(text, x, y);
}
}

// 設定が変更されたらプレビューを更新
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);
}
draw();

//設定が変更されたらプレビューを更新
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);
}
draw();
</script>
</body>
</html>
47 changes: 47 additions & 0 deletions ndot_wallpaper_maker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@

/*
Ndot Wallpaper Maker
by Ndot JP project
日本語:
免責事項
このスクリプトは、あくまで非公式であり、Nothingによって公式に製作、公開されたものではありません。
このスクリプトを使用することによって生じた損害について、Ndot JP projectは一切の責任を負いません。
機能
ndot_wallpaper_maker.html上でNdot 77 JP Extendedを使用した壁紙を作成することができます。
- 任意のサイズの壁紙を作成
- デフォルトでNothing製品の壁紙サイズを選択できますが、任意のサイズを選択することもできます。
- 周辺部の余白を設定できるので、壁紙が拡大される場合にも対応できます。
- 任意の背景色あるいは背景画像の設定
- カラーピッカーから背景色を指定するか、ウェブカラーのコードを入力して背景色を指定できます。
- デバイス内の画像を選択することもできます。
- 任意のテキストの追加
- Ndot 77 JP Extendedのフォントを使用して、任意のテキストを追加できます。
- テキストのサイズ、色、位置を設定できます。また、内容にはhtmlタグを使用することもできます。
- 画像の保存
- 作成した壁紙を画像として保存することができます。
- 余白部分に名前や日付を追加することもできます。SNSに投稿する際に便利です。
English:
Disclaimer
This script is unofficial and is not produced or published by Nothing.
Ndot JP project is not responsible for any damage caused by using this script.
Features
You can create a wallpaper using Ndot 77 JP Extended on ndot_wallpaper_maker.html.
- Create wallpapers of any size
- You can choose the size of the wallpaper, and you can also choose any size.
- You can set the margin of the surrounding area, so you can also support when the wallpaper is enlarged.
- Set any background color or background image
- You can specify the background color by selecting it from the color picker or entering the web color code.
- You can also select an image from the device.
- Add any text
- You can add any text using the Ndot 77 JP Extended font.
- You can set the size, color, and position of the text. You can also use html tags in the content.
- Save the image
- You can save the created wallpaper as an image.
- You can also add a name or date to the margin. It is convenient when posting on SNS.
*/

//
Empty file added scripts/ndot_wallpaper_maker.js
Empty file.

0 comments on commit cbee253

Please sign in to comment.