pythonide-link/index.html at main · Python-IDE/pythonide-link · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="apple-itunes-app" content="app-id=6753987304">
    <meta name="theme-color" content="#f7f7f8">
    <!-- edge:meta-start -->
    <meta name="description" content="在 Python IDE 中查看、运行和导入社区作品。">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Python IDE">
    <meta property="og:title" content="Python IDE 社区作品">
    <meta property="og:description" content="在 Python IDE 中查看、运行和导入社区作品。">
    <meta property="og:url" content="https://link.pythonide.xin/">
    <meta property="og:image" content="https://link.pythonide.xin/assets/app-icon.png">
    <meta property="og:image:width" content="1024">
    <meta property="og:image:height" content="1024">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Python IDE 社区作品">
    <meta name="twitter:description" content="在 Python IDE 中查看、运行和导入社区作品。">
    <meta name="twitter:image" content="https://link.pythonide.xin/assets/app-icon.png">
    <link rel="canonical" href="https://link.pythonide.xin/">
    <!-- edge:meta-end -->
    <link rel="icon" href="/assets/brand-mark.svg" type="image/svg+xml">
    <link rel="stylesheet" href="/assets/share-page.css?v=20260716-pill-buttons">
    <title>Python IDE 社区作品</title>
    <script defer src="/assets/share-page.js?v=20260716-pill-buttons"></script>
  </head>
  <body class="is-loading">
    <a class="skip-link" href="#main-content" id="skipLink">跳到作品内容</a>

    <header class="site-header">
      <nav class="nav" aria-label="PythonIDE">
        <a class="brand" href="https://pythonide.xin/" aria-label="PythonIDE">
          <img src="/assets/brand-mark.svg" width="26" height="26" alt="">
          <span>PythonIDE</span>
        </a>
        <div class="language-toggle" aria-label="Language">
          <button type="button" data-lang="zh" aria-pressed="true">中</button>
          <button type="button" data-lang="en" aria-pressed="false">EN</button>
        </div>
      </nav>
    </header>

    <main class="page-shell" id="main-content">
      <section class="hero" aria-labelledby="title">
        <p class="eyebrow" id="eyebrow">Python IDE 社区作品</p>
        <h1 id="title" aria-live="polite">
          <span class="skeleton skeleton-title" aria-hidden="true"></span>
          <span class="loading-label">正在加载作品</span>
        </h1>
        <div class="author-row" id="authorRow" hidden>
          <div class="avatar" aria-hidden="true">
            <img id="authorAvatar" alt="" hidden>
            <span id="authorInitial">P</span>
          </div>
          <div class="author-copy">
            <span class="author-name" id="authorName">Python IDE 社区</span>
            <span class="author-detail" id="authorDetail">社区作品</span>
          </div>
        </div>
      </section>

      <section class="work-card" id="workCard" aria-label="作品预览" aria-busy="true">
        <div class="visually-hidden" aria-hidden="true">
          <span id="fileBadge">PY</span>
          <span id="fileDetail">正在准备内容</span>
          <span id="fileName">作品预览</span>
          <div id="tagList"></div>
        </div>

        <div class="preview-viewport">
          <div class="preview-skeleton" id="previewSkeleton" aria-hidden="true">
            <span></span><span></span><span></span><span></span>
          </div>

          <figure class="cover-preview hidden" id="coverPreview">
            <img id="coverImage" alt="作品封面">
          </figure>

          <div class="code-preview hidden" id="codePreview">
            <div class="code-toolbar">
              <span id="codeLanguage">PYTHON</span>
              <span id="codeStatus">只读预览</span>
            </div>
            <pre aria-label="代码预览"><code id="codeContent"></code></pre>
            <div class="preview-fade" aria-hidden="true"></div>
          </div>

          <div class="project-preview hidden" id="projectPreview">
            <div class="project-orbit" aria-hidden="true"><span></span><span></span><span></span></div>
            <p class="project-kicker" id="projectKicker">Python IDE Project</p>
            <h2 id="projectTitle">完整项目</h2>
            <p id="projectDescription">在 App 中下载并运行完整项目内容。</p>
            <div class="project-facts" id="projectFacts"></div>
          </div>

          <div class="generic-preview hidden" id="genericPreview">
            <span class="generic-symbol" id="genericSymbol" aria-hidden="true">{ }</span>
            <div>
              <h2 id="genericTitle">Python IDE 作品</h2>
              <p id="genericDescription">在 App 中查看完整内容。</p>
            </div>
          </div>

          <section class="status-card hidden" id="statusCard" role="status" aria-live="polite">
            <span class="status-dot" aria-hidden="true"></span>
            <div>
              <strong id="statusTitle">暂时无法加载作品预览</strong>
              <p id="statusMessage">你仍然可以尝试在 Python IDE 中打开。</p>
            </div>
            <button class="retry-button hidden" id="retryButton" type="button">重新加载</button>
          </section>
        </div>

        <footer class="stats" id="stats" aria-label="作品数据"></footer>
      </section>

      <p class="summary" id="summary">
        <span class="skeleton skeleton-copy" aria-hidden="true"></span>
      </p>

      <section class="action-panel" aria-labelledby="actionTitle">
        <h2 class="visually-hidden" id="actionTitle">在 Python IDE 中打开</h2>
        <p class="visually-hidden" id="actionDescription">运行代码、查看完整项目并保存到你的设备。</p>
        <div class="actions">
          <button class="button primary" id="openApp" type="button">
            <span id="openAppLabel">在 PythonIDE 中打开</span>
            <span aria-hidden="true">↗</span>
          </button>
          <a class="button secondary" href="https://apps.apple.com/app/id6753987304" id="downloadApp">
            <span id="downloadAppLabel">下载 PythonIDE</span>
          </a>
          <button class="text-button" id="copyLink" type="button">复制分享链接</button>
        </div>
        <p class="browser-note" id="browserNote">若没有自动打开，请确认已安装最新版 Python IDE。</p>
        <div class="launch-fallback hidden" id="launchFallback" role="status">
          <strong>没有打开 App？</strong>
          <p>请再次尝试，或先获取最新版 Python IDE。</p>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <span>© Python IDE</span>
      <nav aria-label="页脚链接">
        <a href="https://pythonide.xin/" id="footerWebsite">官网</a>
        <a href="https://pythonide.xin/privacy" id="footerPrivacy">隐私</a>
      </nav>
    </footer>

    <div class="browser-modal hidden" id="browserModal" role="dialog" aria-modal="true" aria-labelledby="browserModalTitle">
      <button class="modal-backdrop" id="modalBackdrop" type="button" aria-label="关闭提示"></button>
      <section class="modal-sheet">
        <p class="modal-kicker" id="modalKicker">在系统浏览器中继续</p>
        <h2 id="browserModalTitle">从右上角菜单打开浏览器</h2>
        <ol>
          <li><span>1</span><b id="modalStep1">点击页面右上角的菜单按钮</b></li>
          <li><span>2</span><b id="modalStep2">选择“在默认浏览器中打开”</b></li>
          <li><span>3</span><b id="modalStep3">再次点击“在 PythonIDE 中打开”</b></li>
        </ol>
        <div class="modal-actions">
          <button class="button primary" id="modalCopyLink" type="button">复制链接</button>
          <button class="button secondary" id="modalClose" type="button">我知道了</button>
        </div>
      </section>
    </div>

    <div class="toast" id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
  </body>
</html>