hello-github/index.html at main · sunnyingyang-cpu/hello-github · 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Git / GitHub 新手指南 · 在线版</title>
  <style>
    :root {
      --blue: #0969da;
      --green: #1a7f37;
      --purple: #8250df;
      --bg: #ffffff;
      --fg: #1f2328;
      --muted: #656d76;
      --border: #d0d7de;
      --code-bg: #f6f8fa;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif;
      background: var(--bg);
      color: var(--fg);
      line-height: 1.7;
      padding: 0 16px;
    }
    .wrap { max-width: 820px; margin: 0 auto; padding: 56px 0 80px; }
    header { text-align: center; margin-bottom: 48px; }
    h1 { font-size: 2.2rem; letter-spacing: -0.5px; }
    .subtitle { color: var(--muted); font-size: 1.05rem; margin-top: 12px; }
    .badges { margin-top: 18px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
    .badge { display: inline-block; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; color: var(--muted); text-decoration: none; }
    .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 36px 0; }
    .card {
      border: 1px solid var(--border); border-radius: 12px; padding: 24px;
      text-decoration: none; color: var(--fg); transition: all .15s ease;
      display: flex; flex-direction: column; gap: 6px;
    }
    .card:hover { border-color: var(--blue); box-shadow: 0 4px 18px rgba(9,105,218,.12); transform: translateY(-2px); }
    .card h2 { font-size: 1.2rem; }
    .card p { color: var(--muted); font-size: 0.92rem; }
    .card .lang { font-size: 0.78rem; color: var(--blue); font-weight: 600; }
    .diagram { margin: 40px 0; text-align: center; }
    .diagram img { max-width: 100%; border: 1px solid var(--border); border-radius: 12px; }
    .diagram figcaption { color: var(--muted); font-size: 0.85rem; margin-top: 10px; }
    .steps { background: var(--code-bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px 28px; margin: 28px 0; }
    .steps h3 { font-size: 1.05rem; margin-bottom: 12px; }
    .steps ol { padding-left: 20px; }
    .steps li { margin: 6px 0; }
    .steps code { background: #fff; border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; font-size: 0.88rem; }
    .actions { text-align: center; margin-top: 40px; }
    .btn {
      display: inline-block; padding: 12px 28px; border-radius: 10px; text-decoration: none;
      font-weight: 600; transition: all .15s ease;
    }
    .btn-primary { background: var(--blue); color: #fff; }
    .btn-primary:hover { background: #0860ca; }
    footer { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 64px; }
    @media (max-width: 640px) { .cards { grid-template-columns: 1fr; } h1 { font-size: 1.7rem; } }
  </style>
</head>
<body>
  <div class="wrap">
    <header>
      <h1>Git / GitHub 新手指南</h1>
      <p class="subtitle">一份可以立刻动手练习的 Git 与 GitHub 图文教程 · 半小时走完核心工作流</p>
      <div class="badges">
        <span class="badge">建库 · 提交 · 推送</span>
        <span class="badge">分支 · PR · 冲突</span>
        <span class="badge">GitHub Actions</span>
        <span class="badge">PRs Welcome</span>
      </div>
    </header>

    <section class="cards">
      <a class="card" href="tutorial-zh.html">
        <span class="lang">简体中文</span>
        <h2>📘 阅读中文教程</h2>
        <p>完整图文教程：从概念到实战，循序渐进。</p>
      </a>
      <a class="card" href="tutorial-en.html">
        <span class="lang">English</span>
        <h2>📗 Read in English</h2>
        <p>The full illustrated tutorial, step by step.</p>
      </a>
    </section>

    <figure class="diagram">
      <img src="assets/workflow.svg" alt="Git / GitHub 工作流示意图">
      <figcaption>工作流一览：本地三区 → 推送到 GitHub → 分支与 Pull Request 协作</figcaption>
    </figure>

    <section class="steps">
      <h3>最快路径：第一次提交与推送</h3>
      <ol>
        <li><code>git init</code> — 初始化仓库</li>
        <li><code>git add README.md</code> — 加入暂存区</li>
        <li><code>git commit -m "first commit"</code> — 提交快照</li>
        <li><code>git branch -M main</code> — 主线改名 main</li>
        <li><code>git remote add origin &lt;url&gt;</code> — 关联远程</li>
        <li><code>git push -u origin main</code> — 推送到 GitHub</li>
      </ol>
    </section>

    <div class="actions">
      <a class="btn btn-primary" href="https://github.com/sunnyingyang-cpu/hello-github">在 GitHub 上查看仓库 →</a>
    </div>

    <footer>
      MIT License · 一份写给新手的 Git / GitHub 图文教程
    </footer>
  </div>
</body>
</html>