WebOS

WebOS

使用プロンプト

あなたは世界トップクラスのフロントエンドエンジニアであり、UI/UXデザイナーです。
ビルドツール(npm, Webpack, React等)を一切使用せず、静的ファイル(HTML, CSS, Vanilla JavaScript)のみでブラウザ上で完全に動作する「ウェブデスクトップOS」を開発してください。

以下の要件を厳格に守り、可能な限り多くの機能を実装したシステムを出力してください。

【基本要件と制約(完全オフライン・ゼロ依存)】
- 外部ライブラリ禁止: jQuery, Bootstrap等のフレームワークは一切使用しないでください。
- CDNの使用禁止(完全オフライン対応): FontAwesomeなどのCDNも厳格に禁止します。
- アセットのローカル化: アイコン等はすべて「インラインSVG」と「CSS」のみで美しく描画し、外部画像ファイルへの依存をゼロにしてください(ダウンロードの手間も省く完全なスタンドアロンにします)。
- 純粋なVanilla JS: ES6+のクラスやモジュールパターンを駆使し、美しい設計にすること。

【UI / UX デザイン言語:Windows 11 スタイルの完全再現】
以下のWindows 11の特徴的な「Fluent Design System」をCSSで忠実に再現してください。
1. アクリル/マイカ効果 (Mica Effect): `backdrop-filter: blur(15px)` と半透明の背景色 (`rgba`) を組み合わせ、タスクバー、スタートメニュー、ウィンドウのタイトルバーに「すりガラス」のような美しい透過効果を持たせること。
2. 角丸 (Rounded Corners): すべてのウィンドウ、スタートメニュー、ボタン、ホバー時の背景に滑らかな角丸 (`border-radius: 8px` 〜 `12px` 程度) を適用すること。
3. ドロップシャドウ: ウィンドウが重なった際の立体感を出すため、美しく自然な `box-shadow` を設定し、アクティブなウィンドウは影を少し濃くすること。
4. アニメーション: アプリの起動時、最小化・復元時、スタートメニューの展開時に、CSS Transition や Keyframes を用いた滑らかなフェード&スケール(拡大・縮小)アニメーションを実装すること。

【UI コンポーネント】
1. デスクトップ: Windows 11のデフォルト壁紙を思わせるような、CSSグラデーションの美しい背景色を設定。デスクトップアイコンは左上から縦グリッド配置。
2. センタータスクバー: 画面下部に固定。アプリアイコンとスタートボタンを**中央揃え(センター配置)**にすること。
3. スタートメニュー: 中央のスタートボタンをクリックすると、画面中央下部からフワッと浮かび上がる。上部に検索バー風のUI、中央にピン留めアプリのグリッド、下部にユーザーアイコンと電源ボタンを配置。
4. システムトレイ: タスクバー右端に配置。時計と、CSSで描画したバッテリー/Wi-Fiアイコンを並べる。

【コア・アーキテクチャ(ウィンドウマネージャー)】
1. ドラッグ&ドロップ、リサイズ機能。
2. Z-Index管理による最前面化。
3. 最小化(タスクバーへ収納アニメーション)、最大化(全画面化)、閉じる機能。
※ウィンドウ右上のコントロールボタン(最小化・最大化・閉じる)は、Windows 11の配置とデザイン(ホバー時に閉じるボタンだけ赤くなる等)を再現すること。

【搭載アプリケーション(思いつく限りの全機能)】
1. ファイルエクスプローラー (Win11風UI): `localStorage` を利用した仮想ファイルシステム。左側にナビゲーションペイン、右側にファイルグリッド。
2. テキストエディタ (メモ帳): シンプルなテキスト作成・保存ツール。
3. ターミナル (Windows Terminal風): 黒背景に透過を少し入れ、基本的なコマンド(`help`, `echo`, `clear`, `date`, `ls`)が動くCUI環境。
4. 電卓: Windows標準電卓風のクリーンなグリッドレイアウト。
5. システムモニター: CPU/メモリ使用率を模した動的グラフを描画するタスクマネージャー。
6. 時計・カレンダーアプリ: システムトレイの時計クリックで右下からポップアップするカレンダーUI。

【出力形式の指示】
コード量が非常に膨大になるため、以下の順序で計画的に出力してください。
1. まず、全体のアーキテクチャ設計と、Windows 11風デザインをCSSでどう表現するかの戦略を説明してください。
2. 次に「HTMLの基本構造」と「CSS(Win11テーマのベースデザイン、Micaエフェクト、アニメーション定義)」を出力してください。
3. 続いて「JavaScript(ウィンドウマネージャー、センタータスクバー、スタートメニューのコアロジック)」を出力してください。
4. 最後に、各アプリケーションのロジックとインラインSVGアイコンのデータを含めた「完全版のJavaScript」を提供してください。