diff --git a/index.html b/index.html
index 67bf2dd..e01286e 100644
--- a/index.html
+++ b/index.html
@@ -1,22 +1,15 @@
-
+
-
-
+
- Graph Editor - Competitive Programming Graph Tool
+ Graph Editor - AtCoder・競プロ向けグラフ作成ツール
-
+
@@ -24,11 +17,11 @@
+
+
-
+
+
+
@@ -119,6 +133,7 @@
/* Light mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #909090;
+ color: #222;
}
@media (prefers-color-scheme: dark) {
@@ -126,6 +141,7 @@
/* Dark mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #404040;
+ color: #f0f0f0;
}
}
@@ -139,16 +155,40 @@
width: 100%;
}
- /* Make canvas fill entire document: */
+ /* Static fallback content shown before the WASM canvas renders. */
+ #seo-content {
+ box-sizing: border-box;
+ max-width: 960px;
+ padding: 24px;
+ color: inherit;
+ font-family: Ubuntu-Light, Helvetica, sans-serif;
+ line-height: 1.7;
+ }
+
+ #seo-content h1,
+ #seo-content h2 {
+ margin: 0.8em 0 0.4em;
+ }
+
+ #seo-content ul,
+ #seo-content ol {
+ padding-left: 1.5em;
+ }
+
+ #seo-content a {
+ color: inherit;
+ }
+
+ /* Make canvas fill entire viewport: */
canvas {
margin-right: auto;
margin-left: auto;
display: block;
- position: absolute;
- top: 0;
- left: 0;
+ position: fixed;
+ inset: 0;
width: 100%;
height: 100%;
+ z-index: 1;
}
.centered {
@@ -163,6 +203,15 @@
font-size: 24px;
font-family: Ubuntu-Light, Helvetica, sans-serif;
text-align: center;
+ z-index: 2;
+ }
+
+ noscript p {
+ max-width: 960px;
+ margin: 0 auto;
+ padding: 0 24px 24px;
+ font-family: Ubuntu-Light, Helvetica, sans-serif;
+ line-height: 1.7;
}
/* ---------------------------------------------- */
@@ -207,15 +256,53 @@
Graph Editor
- Graph Editor is a graph creation and visualization tool for
- competitive programming. It helps users create directed and
- undirected graphs, edit vertices and edges, and export graphs in
- programming-contest input formats.
+ Graph Editor は，AtCoder などの競技プログラミングで使うグラフを，
+ ブラウザ上で直感的に作成・編集できる無料の Web アプリです．
+ 無向グラフ・有向グラフの作成，頂点・辺の編集，辺リスト形式でのコピー，
+ JSON 保存，PNG / SVG 出力に対応しています．
+
+
+ Graph Editor is a browser-based graph editor for competitive
+ programming. You can create directed and undirected graphs, edit
+ vertices and edges, and export graphs as edge lists, JSON, PNG, or
+ SVG.