MirrorShard_2/index.html at main · DroicheadNua/MirrorShard_2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/src/styles.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title data-i18n="main.window.title">MirrorShard v2</title>
</head>

<body>
  <div data-tauri-drag-region id="app-container">
    <!-- 1. 最上部のカスタムタイトルバー (ドラッグ領域) -->
    <div data-tauri-drag-region class="titlebar">
      <div data-tauri-drag-region class="titlebar-buttons">
        <!-- ボタンは改行さずに書かないと無駄なスペースが空く -->
        <button id="btn-zen-mode" data-i18n-title="main.toolbar.zenMode" title="ZENモード (Ctrl+Shift+C)"></button><button id="btn-save" data-i18n-title="main.toolbar.save" title="保存 (Ctrl+S)"></button><button id="btn-save-as" data-i18n-title="main.toolbar.saveAs" title="名前を付けて保存"></button><button id="btn-export" data-i18n-title="main.toolbar.export" title="エクスポート / 印刷 (Ctrl+E)"></button><button id="btn-open" data-i18n-title="main.toolbar.open" title="開く (Ctrl+O)"></button><button id="btn-new" data-i18n-title="main.toolbar.new" title="新規作成 (Ctrl+N)"></button><button id="btn-bgm-toggle" data-i18n-title="main.toolbar.bgm" title="BGM再生/停止 (Ctrl+Shift+P)"></button><button id="btn-typesound" data-i18n-title="main.toolbar.typeSound" title="タイプ音 (Ctrl+Shift+T)"></button><button id="btn-spotlight" data-i18n-title="main.toolbar.spotlight" title="スポットライトモード (Ctrl+L)"></button><button id="btn-toggle-theme" data-i18n-title="main.toolbar.theme" title="Dark Mode (Ctrl+T)"></button><button id="btn-code" data-i18n-title="main.toolbar.code" title="コードエディタモード (Ctrl+K)"></button><button id="btn-markdown" data-i18n-title="main.toolbar.markdown" title="Markdown/HTMLプレビュー (Ctrl+M)"></button><button id="btn-preview" data-i18n-title="main.toolbar.preview" title="縦書きプレビュー (Ctrl+P)"></button><button id="btn-ai-chat" data-i18n-title="main.toolbar.aiChat" title="AIチャット (Ctrl+Shift+A)"></button><button id="btn-idea-processor" data-i18n-title="main.toolbar.ideaProcessor" title="アイデアプロセッサ (Ctrl+I)"></button>
      </div>
      <div data-tauri-drag-region class="window-controls">
        <button id="btn-settings" data-i18n-title="main.toolbar.settings" title="設定 (F2)"></button><button id="btn-minimize" data-i18n-title="main.toolbar.minimize" title="最小化 (Ctrl+H)"></button><button id="btn-fullscreen" data-i18n-title="main.toolbar.fullscreen" title="フルスクリーン (F11)"></button><button id="btn-close" data-i18n-title="main.toolbar.close" title="閉じる (Ctrl+Q)"></button>
      </div>
    </div>


    <!-- 2. メインのコンテンツエリア -->
    <div id="content-wrapper">
      <!-- 2A. サイドバー -->
      <nav id="sidebar-pane">
        <div class="sidebar-content">
          <!-- メインエディタ用のAPIセレクター -->
          <div id="main-ai-selector-container">
            <!-- カスタムドロップダウン -->
            <div class="custom-select-wrapper">
              <button id="main-ai-display" class="custom-select-trigger">
                Gemini (Cloud) <!-- 初期表示 -->
              </button>
              <div id="main-ai-options" class="custom-options">
              </div>
            </div>
          </div>
          <div id="file-list-container">
            <!-- ファイル一覧がここに描画される -->
          </div>
          <div id="outline-panel">
            <!-- 記号挿入・アンドゥリドゥ用コンテナ -->
            <div class="outline-controls-2">
              <div class="symbol-controls">
                <button id="btn-insert-ruby" data-i18n-title="main.sidebar.insertRuby" title="ルビを挿入 (｜《》)"></button>
                <button id="btn-insert-dash" data-i18n-title="main.sidebar.insertDash" title="ダッシュ (――)"></button>
                <button id="btn-insert-ellipsis" data-i18n-title="main.sidebar.insertEllipsis" title="三点リーダ (……)"></button>
              </div>
              <div class="history-controls">
                <button id="btn-undo" data-i18n-title="main.sidebar.undo" title="元に戻す (Ctrl+Z)"></button>
                <button id="btn-redo" data-i18n-title="main.sidebar.redo" title="やり直し (Ctrl+Y)"></button>
              </div>
            </div>
            <div class="outline-controls">
              <!-- 左寄せのフォントコントロール -->
              <div class="font-controls">
                <button id="btn-font-dec" data-i18n-title="main.sidebar.fontDec" title="文字を小さく"></button>
                <button id="btn-font-reset" data-i18n-title="main.sidebar.fontReset" title="リセット"></button>
                <button id="btn-font-inc" data-i18n-title="main.sidebar.fontInc" title="文字を大きく"></button>
              </div>
              <!-- 右寄せの開閉コントロール -->
              <div class="collapse-controls">
                <button id="collapse-all-btn" data-i18n-title="main.sidebar.collapseAll" title="すべて折りたたむ"></button>
                <button id="expand-all-btn" data-i18n-title="main.sidebar.expandAll" title="すべて展開"></button>
              </div>
            </div>
            <div id="outline-container">
              <!-- アウトラインがここに描画される -->
            </div>
          </div>
        </div>
      </nav>
      <!-- 2B. エディタ -->
      <main id="editor-container"></main>
    </div>
    <div id="status-bar">
      <!-- 左側：パンくずリストとファイルパス -->
      <div class="status-left">
        <span id="status-breadcrumbs"></span>
        <span class="status-separator">|</span>
        <span id="status-filepath" title=""></span>
      </div>
      <!-- 右側：統計情報、エンコーディング、時刻 -->
      <div class="status-right">
        <span id="status-line-col"></span>
        <span id="status-char-count"></span>
        <span id="status-encoding"></span>
        <span id="status-line-ending"></span>
        <span id="status-time"></span>
      </div>
    </div>
  </div>
  <script type="module" src="/src/main.ts" defer></script>
</body>

</html>