Files
SakuOS/index.html
2026-01-31 16:55:33 +09:00

769 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>RecycleBinOS - 公式配布ページ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="RecycleBinOS は、いらなくなったPCを再利用するための軽量OSです。">
<style>
:root {
--green-main: #4CAF50;
--green-dark: #2E7D32;
--bg-light: #f5f5f5;
--text-main: #222;
--text-sub: #555;
--accent: #ffcc00;
--max-width: 960px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Noto Sans JP", sans-serif;
background: var(--bg-light);
color: var(--text-main);
line-height: 1.7;
}
a {
color: var(--green-dark);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
header {
background: radial-gradient(circle at top, #e8f5e9 0, #f5f5f5 55%, #ffffff 100%);
border-bottom: 1px solid #ddd;
}
.nav {
max-width: var(--max-width);
margin: 0 auto;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
letter-spacing: 0.03em;
}
.logo-mark {
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--green-main);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.nav-links {
display: flex;
gap: 16px;
font-size: 14px;
}
.nav-links a {
padding: 4px 0;
}
.hero {
max-width: var(--max-width);
margin: 0 auto;
padding: 40px 16px 48px;
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
gap: 32px;
align-items: center;
}
@media (max-width: 768px) {
.hero {
grid-template-columns: 1fr;
padding-top: 24px;
}
}
.hero-title {
font-size: clamp(32px, 4vw, 40px);
margin: 0 0 12px;
}
.hero-sub {
font-size: 16px;
color: var(--text-sub);
margin-bottom: 20px;
}
.hero-tagline {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(76, 175, 80, 0.08);
color: var(--green-dark);
font-size: 12px;
margin-bottom: 12px;
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 18px;
border-radius: 999px;
border: none;
background: var(--green-main);
color: #fff;
font-weight: 600;
font-size: 14px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.35);
}
.btn-primary span {
font-size: 18px;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 16px;
border-radius: 999px;
border: 1px solid #ccc;
background: #fff;
color: var(--text-main);
font-size: 13px;
cursor: pointer;
}
.hero-note {
font-size: 12px;
color: var(--text-sub);
}
.hero-visual {
position: relative;
padding: 18px;
}
.hero-card {
border-radius: 18px;
background: #ffffff;
border: 1px solid #e0e0e0;
padding: 18px 18px 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.hero-card-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
font-size: 14px;
font-weight: 600;
}
.hero-card-badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(76, 175, 80, 0.08);
color: var(--green-dark);
}
.hero-card-body {
font-size: 12px;
color: var(--text-sub);
margin-bottom: 10px;
}
.hero-card-meta {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--text-sub);
}
.hero-orbit {
position: absolute;
inset: 0;
pointer-events: none;
}
.hero-orbit-circle {
position: absolute;
border-radius: 999px;
border: 1px dashed rgba(76, 175, 80, 0.35);
}
.hero-orbit-circle:nth-child(1) {
width: 90%;
height: 90%;
top: 5%;
left: 5%;
}
.hero-orbit-circle:nth-child(2) {
width: 70%;
height: 70%;
top: 15%;
left: 15%;
border-style: solid;
border-color: rgba(46, 125, 50, 0.35);
}
.hero-orbit-icon {
position: absolute;
width: 26px;
height: 26px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.hero-orbit-icon.bin {
top: -6px;
left: 50%;
transform: translateX(-50%);
}
.hero-orbit-icon.cpu {
bottom: 0;
left: 0;
transform: translate(-30%, 30%);
}
.hero-orbit-icon.leaf {
bottom: 0;
right: 0;
transform: translate(30%, 30%);
}
main {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 16px 40px;
}
section {
margin-top: 40px;
}
section h2 {
font-size: 22px;
margin-bottom: 8px;
}
section p {
margin: 0 0 10px;
color: var(--text-sub);
}
.section-subtitle {
font-size: 13px;
color: var(--text-sub);
margin-bottom: 18px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.feature-card {
background: #ffffff;
border-radius: 14px;
padding: 14px 14px 12px;
border: 1px solid #e0e0e0;
font-size: 14px;
}
.feature-title {
font-weight: 600;
margin-bottom: 4px;
}
.feature-tag {
display: inline-block;
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
background: #f0f0f0;
margin-bottom: 6px;
color: var(--text-sub);
}
.spec-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
}
.spec-list li {
padding: 4px 0;
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #e0e0e0;
}
.spec-label {
color: var(--text-sub);
}
.spec-value {
font-weight: 500;
}
.download-box {
background: #ffffff;
border-radius: 16px;
padding: 18px 16px 14px;
border: 1px solid #e0e0e0;
display: grid;
grid-template-columns: minmax(0, 2.2fr) minmax(0, 2fr);
gap: 16px;
align-items: center;
}
@media (max-width: 720px) {
.download-box {
grid-template-columns: 1fr;
}
}
.download-main-title {
font-size: 18px;
margin-bottom: 4px;
}
.download-version {
font-size: 13px;
color: var(--text-sub);
margin-bottom: 10px;
}
.download-meta {
font-size: 12px;
color: var(--text-sub);
margin-top: 6px;
}
.download-actions {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.download-link {
font-size: 13px;
color: var(--green-dark);
text-decoration: underline;
cursor: pointer;
}
.code-block {
font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
font-size: 12px;
background: #111;
color: #eee;
padding: 10px 12px;
border-radius: 8px;
overflow-x: auto;
}
.code-block span.cmd {
color: #8bc34a;
}
.code-block span.comment {
color: #9e9e9e;
}
.screenshots-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
font-size: 12px;
color: var(--text-sub);
}
.screenshot-placeholder {
border-radius: 12px;
border: 1px dashed #bdbdbd;
background: repeating-linear-gradient(
45deg,
#fafafa,
#fafafa 6px,
#f0f0f0 6px,
#f0f0f0 12px
);
height: 140px;
display: flex;
align-items: center;
justify-content: center;
color: #9e9e9e;
margin-bottom: 4px;
}
.dev-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.dev-card {
background: #ffffff;
border-radius: 14px;
padding: 14px 14px 12px;
border: 1px solid #e0e0e0;
font-size: 13px;
}
footer {
border-top: 1px solid #ddd;
margin-top: 40px;
padding: 16px;
font-size: 12px;
color: var(--text-sub);
text-align: center;
background: #fafafa;
}
.footer-links {
margin-bottom: 6px;
}
.footer-links a {
margin: 0 6px;
font-size: 12px;
}
</style>
</head>
<body>
<header>
<div class="nav">
<div class="logo">
<div class="logo-mark">🗑</div>
<div>RecycleBinOS</div>
</div>
<nav class="nav-links">
<a href="#about">概要</a>
<a href="#features">特徴</a>
<a href="#download">ダウンロード</a>
<a href="#dev">開発者向け</a>
<a href="#community">コミュニティ</a>
</nav>
</div>
<div class="hero">
<div>
<div class="hero-tagline">
<span></span>
<span>いらないPC、もう一回だけ使ってみない</span>
</div>
<h1 class="hero-title">RecycleBinOS</h1>
<p class="hero-sub">
Delete じゃなくて、Reborn。<br>
古いPCを「ゴミ箱行き」にする前に、もう一度だけチャンスをあげるための軽量OSです。
</p>
<div class="hero-buttons">
<button class="btn-primary" onclick="location.href='#download'">
<span></span> Download v1.0
</button>
<button class="btn-secondary" onclick="location.href='#about'">
コンセプトを読む
</button>
</div>
<div class="hero-note">
※ まだ開発中のため、実機インストールは自己責任でお願いします。
</div>
</div>
<div class="hero-visual">
<div class="hero-card">
<div class="hero-card-title">
<span>ゴミ箱中心UI</span>
<span class="hero-card-badge">Experimental</span>
</div>
<div class="hero-card-body">
デスクトップの主役は「ゴミ箱」。<br>
捨てたファイルから、よく使うアプリや設定を学習して、<br>
あなたの「いらない」をベースに最適化されていきます。
</div>
<div class="hero-card-meta">
<span>低スペックPC向け</span>
<span>メモリ 2GB〜 / x86_64</span>
</div>
</div>
<div class="hero-orbit">
<div class="hero-orbit-circle"></div>
<div class="hero-orbit-circle"></div>
<div class="hero-orbit-icon bin">🗑</div>
<div class="hero-orbit-icon cpu">💾</div>
<div class="hero-orbit-icon leaf">🌱</div>
</div>
</div>
</div>
</header>
<main>
<section id="about">
<h2>RecycleBinOS とは?</h2>
<p class="section-subtitle">
「いらないものから、はじまるOS」。
RecycleBinOS は、古いPCや余っているマシンを再利用するために設計された、軽量・ミニマルなOSです。
</p>
<p>
もう使わなくなったPC、押し入れで眠っているートPC、
「そろそろ捨てようかな」と思ったそのマシンに、最後の役目を与える——
そんなコンセプトで作られたのが RecycleBinOS です。
</p>
<p>
UIの中心には「ゴミ箱」があり、
捨てられたファイルやアプリの履歴から、あなたの好みや使い方を少しずつ学習していきます。
いらないものから、必要なものだけを浮かび上がらせるOSを目指しています。
</p>
</section>
<section id="features">
<h2>主な特徴</h2>
<p class="section-subtitle">
軽量・シンプル・ちょっと皮肉。
RecycleBinOS は「ガチすぎないけど、ちゃんと使える」くらいのバランスを狙っています。
</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-tag">Performance</div>
<div class="feature-title">古いPCでもサクサク</div>
<p>
低スペック環境を前提に設計された軽量デスクトップ環境を採用。
メモリ 2GB クラスのマシンでも、日常的な作業がストレスなく行えることを目標にしています。
</p>
</div>
<div class="feature-card">
<div class="feature-tag">UI Concept</div>
<div class="feature-title">ゴミ箱中心のデスクトップ</div>
<p>
デスクトップの主役は「ゴミ箱」。
捨てたファイルやアンインストールしたアプリの履歴から、
「本当に必要なもの」だけを浮かび上がらせる独自ランチャーを搭載予定です。
</p>
</div>
<div class="feature-card">
<div class="feature-tag">Minimalism</div>
<div class="feature-title">必要最低限から始める</div>
<p>
最初から大量のアプリは入っていません。
ブラウザ、テキストエディタ、ターミナルなど、
「とりあえずこれがあれば動ける」レベルに絞っています。
</p>
</div>
<div class="feature-card">
<div class="feature-tag">Philosophy</div>
<div class="feature-title">「捨てる」をちゃんと考えるOS</div>
<p>
RecycleBinOS は、単なる軽量OSではなく、
「何を残して、何を捨てるか」を考えるきっかけになる存在を目指しています。
</p>
</div>
</div>
</section>
<section id="download">
<h2>ダウンロード</h2>
<p class="section-subtitle">
まだ開発中のため、テスト版としての配布を想定しています。
実機インストールは自己責任でお願いします。
</p>
<div class="download-box">
<div>
<div class="download-main-title">RecycleBinOS v1.0 (Preview)</div>
<div class="download-version">
ISO イメージ / 64bit / 日本語・英語対応予定
</div>
<ul class="spec-list">
<li>
<span class="spec-label">CPU</span>
<span class="spec-value">x86_64</span>
</li>
<li>
<span class="spec-label">メモリ</span>
<span class="spec-value">2GB 以上推奨</span>
</li>
<li>
<span class="spec-label">ストレージ</span>
<span class="spec-value">16GB 以上の空き</span>
</li>
<li>
<span class="spec-label">ブート</span>
<span class="spec-value">USB / DVD</span>
</li>
</ul>
<div class="download-meta">
※ 実際のISOファイルのURLをここに設定してください。
</div>
</div>
<div class="download-actions">
<button class="btn-primary">
<span></span> ISO をダウンロード
</button>
<a class="download-link" href="#install">インストール手順を読む</a>
<div class="code-block">
<span class="comment"># 例: Linux でのUSBメモリ書き込み</span><br>
<span class="cmd">$</span> sudo dd if=RecycleBinOS.iso of=/dev/sdX bs=4M status=progress<br>
<span class="comment"># sdX は実際のUSBデバイスに置き換えてください</span>
</div>
</div>
</div>
</section>
<section id="install">
<h2>インストール方法(概要)</h2>
<p class="section-subtitle">
ここでは、ざっくりとしたインストールの流れだけを記載しています。
実際には、より詳しいドキュメントやスクリーンショット付きガイドを用意する想定です。
</p>
<ol>
<li><strong>ISOファイルをダウンロード</strong> — 上記のリンクから RecycleBinOS の ISO を取得します。</li>
<li><strong>USBメモリを用意</strong> — 8GB 以上のUSBメモリを推奨します。中身はすべて消去されます。</li>
<li><strong>ブータブルUSBを作成</strong> — Rufus / balenaEtcher / dd などのツールを使用します。</li>
<li><strong>PCをUSBから起動</strong> — BIOS/UEFI 設定で起動順序を変更します。</li>
<li><strong>ライブ起動で動作確認</strong> — まずはインストールせずに動作確認することを推奨します。</li>
<li><strong>問題なければインストール</strong> — 既存データのバックアップを必ず取ってから実行してください。</li>
</ol>
</section>
<section id="screenshots">
<h2>スクリーンショット(イメージ)</h2>
<p class="section-subtitle">
実際のUIができたら、ここにスクリーンショットを並べる想定です。
それまでは、ワイヤーフレーム的なイメージを置いておくこともできます。
</p>
<div class="screenshots-grid">
<div>
<div class="screenshot-placeholder">
デスクトップ画面(予定)
</div>
デスクトップとゴミ箱ランチャーのイメージ。
</div>
<div>
<div class="screenshot-placeholder">
設定画面(予定)
</div>
シンプルな設定パネルのイメージ。
</div>
<div>
<div class="screenshot-placeholder">
インストーラー(予定)
</div>
インストールウィザードのイメージ。
</div>
</div>
</section>
<section id="dev">
<h2>開発者向け情報</h2>
<p class="section-subtitle">
RecycleBinOS の開発に参加したい方向けの情報です。
実際のリポジトリURLやIssueテンプレートなどをここに掲載します。
</p>
<div class="dev-grid">
<div class="dev-card">
<strong>ソースコード</strong><br>
<p>
GitHub / Gitea などのリポジトリURLをここに記載します。<br>
例: <code>https://github.com/yourname/RecycleBinOS</code>
</p>
</div>
<div class="dev-card">
<strong>コントリビュート方法</strong><br>
<p>
Issue / Pull Request のルール、コードスタイル、ブランチ戦略などを簡潔にまとめます。<br>
「バグ報告だけでも歓迎」「ドキュメント修正もOK」など、参加のハードルを下げる文言があると◎。
</p>
</div>
<div class="dev-card">
<strong>ライセンス</strong><br>
<p>
OSS として公開する場合は、MIT / GPL / Apache などのライセンス情報を明記します。<br>
ここでは「仮: MIT License」などとしておき、後で正式に決めてもOKです。
</p>
</div>
</div>
</section>
<section id="community">
<h2>コミュニティ</h2>
<p class="section-subtitle">
「ちょっと触ってみた」「ここが良かった / 気になった」など、
気軽にフィードバックを送れる場所があると、OSは一気に育ちやすくなります。
</p>
<ul>
<li><strong>フォーラム / BBS</strong> — バグ報告・要望・雑談用。</li>
<li><strong>チャットDiscord / Matrix など)</strong> — 開発者・ユーザーがゆるく集まる場所。</li>
<li><strong>更新情報ページ</strong> — リリースノートや開発ログをまとめる場所。</li>
</ul>
<p>
ここに実際のリンクを貼るか、
「準備中」の一言を添えておくだけでも、プロジェクト感が出ます。
</p>
</section>
</main>
<footer>
<div class="footer-links">
<a href="#about">概要</a> /
<a href="#download">ダウンロード</a> /
<a href="#dev">開発者向け</a>
</div>
<div>
© RecycleBinOS Project
</div>
</footer>
</body>
</html>