1+ <!DOCTYPE html>
2+ < html lang ="ja ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > あすきーどろわー</ title >
7+ < link rel ="stylesheet " href ="style.css ">
8+ < link rel ="preconnect " href ="https://fonts.googleapis.com ">
9+ < link rel ="preconnect " href ="https://fonts.gstatic.com " crossorigin >
10+ < link href ="https://fonts.googleapis.com/css2?family=Google+Sans+Code:wght@300..800&display=swap " rel ="stylesheet ">
11+ </ head >
12+ < body >
13+ < div class ="app ">
14+ < div class ="head-container ">
15+ < div class ="header ">
16+ < h1 > あすきーどろわー</ h1 >
17+ < p > < a href ="/ "> ホームに戻る</ a > </ p >
18+ </ div >
19+ < div class ="toolbar ">
20+ < div class ="toolbar-title "> ツール</ div >
21+ < div class ="tool-buttons toolbar-section ">
22+ < button class ="tool-btn active " data-tool ="select " title ="選択 ">
23+ < svg width ="20 " height ="20 " viewBox ="0 0 24 24 " fill ="currentColor ">
24+ < path d ="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z "/>
25+ </ svg >
26+ </ button >
27+ < button class ="tool-btn " data-tool ="rectangle " title ="矩形 ">
28+ < svg width ="20 " height ="20 " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 ">
29+ < rect x ="3 " y ="3 " width ="18 " height ="18 " rx ="2 " ry ="2 "/>
30+ </ svg >
31+ </ button >
32+ < button class ="tool-btn " data-tool ="line " title ="直線 ">
33+ < svg width ="20 " height ="20 " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 ">
34+ < line x1 ="5 " y1 ="19 " x2 ="19 " y2 ="5 "/>
35+ </ svg >
36+ </ button >
37+ < button class ="tool-btn " data-tool ="text " title ="テキスト ">
38+ < svg width ="20 " height ="20 " viewBox ="0 0 24 24 " fill ="currentColor ">
39+ < path d ="M5 3h14v2H5V3zm0 6h14v2H5V9zm0 6h10v2H5v-2z "/>
40+ </ svg >
41+ </ button >
42+ </ div >
43+ < div class ="toolbar-section ">
44+ < div class ="toolbar-title "> 編集</ div >
45+ < div class ="edit-buttons ">
46+ < button class ="edit-btn " id ="copy-btn " title ="コピー (Ctrl+C) ">
47+ < svg width ="16 " height ="16 " viewBox ="0 0 24 24 " fill ="currentColor ">
48+ < path d ="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z "/>
49+ </ svg >
50+ </ button >
51+ < button class ="edit-btn " id ="paste-btn " title ="貼り付け (Ctrl+V) ">
52+ < svg width ="16 " height ="16 " viewBox ="0 0 24 24 " fill ="currentColor ">
53+ < path d ="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z "/>
54+ </ svg >
55+ </ button >
56+ < button class ="edit-btn " id ="delete-btn " title ="削除 (Delete) ">
57+ < svg width ="16 " height ="16 " viewBox ="0 0 24 24 " fill ="currentColor ">
58+ < path d ="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z "/>
59+ </ svg >
60+ </ button >
61+ </ div >
62+ </ div >
63+ < div class ="toolbar-section ">
64+ < div class ="toolbar-title "> データ</ div >
65+ < div class ="edit-buttons ">
66+ < button class ="edit-btn " id ="export-btn " title ="ファイルにエクスポート ">
67+ < svg width ="16 " height ="16 " viewBox ="0 0 24 24 " fill ="currentColor ">
68+ < path d ="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z "/>
69+ </ svg >
70+ </ button >
71+ < button class ="edit-btn " id ="import-btn " title ="ファイルからインポート ">
72+ < svg width ="16 " height ="16 " viewBox ="0 0 24 24 " fill ="currentColor ">
73+ < path d ="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z "/>
74+ </ svg >
75+ </ button >
76+ < button class ="edit-btn " id ="copy-all-btn " title ="全体をクリップボードにコピー ">
77+ < svg width ="16 " height ="16 " viewBox ="0 0 24 24 " fill ="currentColor ">
78+ < path d ="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z "/>
79+ </ svg >
80+ </ button >
81+ </ div >
82+ </ div >
83+ </ div >
84+ </ div >
85+
86+ < div class ="canvas-container ">
87+ < div class ="canvas " id ="canvas ">
88+ < div class ="ascii-content " id ="ascii-content "> </ div >
89+ </ div >
90+ < div class ="coordinates ">
91+ < span id ="coords "> X: 0, Y: 0</ span >
92+ </ div >
93+ </ div >
94+
95+ < div class ="copyright ">
96+ ©︎ Common Creation, Co., Ltd.
97+ </ div >
98+
99+ < div class ="preload-ascii ">
100+ ┌─┐
101+ └─┘
102+ </ div >
103+
104+ <!-- ローディングスピナー -->
105+ < div class ="loading-spinner " id ="loading-spinner ">
106+ < div class ="spinner "> </ div >
107+ < div class ="loading-text "> 読み込み中...</ div >
108+ </ div >
109+ </ div >
110+
111+ < script type ="module " src ="script.mjs "> </ script >
112+ </ body >
113+ </ html >
0 commit comments