feat: add document. b4266ff

jaywcjlove · Apr 4, 2024 · 5fef204 · 5fef204
commit 5fef204
Show file tree

Hide file tree

Showing 23 changed files with 2,216 additions and 0 deletions.
diff --git a/.nojekyll b/.nojekyll
diff --git a/README.zh.html b/README.zh.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PaletteGenius</title>
+    <meta name="description" content="PaletteGenius 是一款旨在提高设计师和开发者效率的屏幕颜色选择工具。">
+    <meta name="keywords" content="designers,developers,color picker,convert,popular colors,standard color,color code formats">
+    <meta name="author" content="Kenny Wong">
+    <meta property="og:site_name" content="PaletteGenius">
+    <meta property="og:url" content="https://wangchujiang.com/palette-genius/README.zh.html">
+    <meta property="og:image" content="https://wangchujiang.com/palette-genius/assets/logo.png">
+    <meta property="og:type" content="application">
+    <meta property="og:title" content="PaletteGenius">
+    <meta property="og:description" content="PaletteGenius 是一款旨在提高设计师和开发者效率的屏幕颜色选择工具。">
+    <meta property="twitter:image:src" content="https://wangchujiang.com/palette-genius/assets/screenshots-1.png">
+    <meta property="twitter:site" content="@jaywcjlove">
+    <meta property="twitter:creator" content="jaywcjlove">
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:title" content="PaletteGenius - PaletteGenius 是一款旨在提高设计师和开发者效率的屏幕颜色选择工具。">
+    <meta property="twitter:description" content="PaletteGenius 是一款旨在提高设计师和开发者效率的屏幕颜色选择工具。">
+    <meta name="apple-itunes-app" content="app-id=id6472593276">
+    <link rel="stylesheet" type="text/css" href="css/main.css?v=1.31.0">
+    <link rel="stylesheet" type="text/css" href="css/tocbot.css?v=1.31.0">
+    <link rel="stylesheet" type="text/css" href="css/media.css?v=1.31.0">
+    <link rel="stylesheet" type="text/css" href="css/sidebar.css?v=1.31.0">
+    <link rel="stylesheet" type="text/css" href="css/copy.css?v=1.31.0">
+    <link rel="stylesheet" type="text/css" href="css/demo-preview.css?v=1.31.0">
+    <link rel="icon" href="assets/logo.png" type="image/x-icon">
+    <script src="js/copy.js?v=1.31.0"></script>
+    <script src="js/dark-mode.js?v=1.31.0"></script>
+    <script src="js/markdown-style.js?v=1.31.0"></script>
+  </head>
+  <body id="idoctotop"><a href="#idoctotop" class="gototop">top</a>
+    <header class="header">
+      <article class="inner warpper" style="max-width:720px;"><a class="logo" href="index.html"><img alt="PaletteGenius logo" src="assets/logo.png">
+<span class="title">PaletteGenius</span></a>
+        <div class="content">
+          <ul class="menu">
+            <li><a href="index.html" target="" class="">Home</a></li>
+            <li><a href="https://wangchujiang.com/#/app" target="__blank" class="">Apps</a></li>
+            <li><a href="https://wangchujiang.com/#/about" target="__blank" class="">About</a></li>
+          </ul><a href="https://github.com/jaywcjlove/palette-genius" target="_blank" rel="noopener noreferrer" title="Github" name="Github" class="github"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+            </svg></a>
+          <dark-mode permanent=""></dark-mode>
+        </div>
+      </article>
+    </header>
+    <div style="max-width:720px;" class="warpper-content warpper notocs">
+      <markdown-style theme-auto-switch-disabled="">
+        <div align="center"><br><br>
+          <img src="assets/logo.png" alt="DevHub LOGO" width="160" height="160">
+          <p>
+            <a href="./index.html">English</a> •
+            <a target="_blank" href="https://apps.apple.com/app/palette-genius/id6472593276">AppStore</a> •
+            <a target="_blank" href="https://wangchujiang.com/#/contact">联系&#x26;支持</a>
+          </p>
+          <h1 style="border: 0;" id="palette-genius"><a aria-hidden="true" tabindex="-1" href="#palette-genius" class="anchor"><span class="icon icon-link"></span></a>Palette Genius</h1><!--rehype:style=border: 0;-->
+          <p><a target="_blank" href="https://apps.apple.com/app/palette-genius/id6472593276" title="Palette Genius AppStore"><img alt="Palette Genius AppStore" src="https://tools.applemediaservices.com/api/badges/download-on-the-mac-app-store/black/en-us?size=250x83&#x26;releaseDate=1705968000" height="51">
+</a><a target="_blank" href="https://www.producthunt.com/posts/palettegenius?utm_source=badge-featured&#x26;utm_medium=badge&#x26;utm_souce=badge-palettegenius"><img alt="Palette Genius Product Hunt" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=430074&#x26;theme=dark" height="51"></a></p>
+        </div>
+        <p>PaletteGenius 是一款旨在提高设计师和开发者效率的屏幕颜色选择工具。</p>
+        <p>
+          <img src="assets/screenshots-1.png" alt="Palette Genius screenshots-1">
+          <img src="assets/screenshots-2.png" alt="Palette Genius screenshots-2">
+          <img src="assets/screenshots-3.png" alt="Palette Genius screenshots-3">
+          <img src="assets/screenshots-4.png" alt="Palette Genius screenshots-4">
+          <img src="assets/screenshots-5.png" alt="Palette Genius screenshots-5">
+          <img src="assets/screenshots-6.png" alt="Palette Genius screenshots-6">
+        </p>
+        <p>为什么需要开发这个应用程序呢？</p>
+        <p>✦ 我一直在使用系统内置的颜色选择器。它既紧凑又快速，但它也有明显的缺点。它无法显示十六进制值，并且不容易复制并转换为其他颜色格式。</p>
+        <p>✦ 收集流行的颜色，包括来自流行组件库和标准颜色值的颜色。</p>
+        <p>✦ 丰富的颜色代码格式：涵盖主流平台和编程语言（iOS、Android、Swift、Objc、CSS 等），并提供快速代码复制的键盘快捷键。</p>
+        <p>✦ 外观：支持浅色和深色模式。</p>
+      </markdown-style>
+    </div>
+    <script src="js/demo-preview.js?v=1.31.0"></script>
+    <div class="footer warpper" style="max-width:720px;">
+      <a href="https://wangchujiang.com/#/app" target="_blank">App</a> •
+      <a href="https://wangchujiang.com/#/projects" target="_blank">Projects</a> •
+      <a href="https://wangchujiang.com/#/sponsor" target="_blank">Sponsor</a> •
+      <a href="https://wangchujiang.com/#/app" target="_blank">More Apps</a><br><br>Generated by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a> v1.31.0
+    </div>
+    <script src="js/tocbot.js?v=1.31.0"></script>
+  </body>
+</html>
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/assets/screenshots-1.png b/assets/screenshots-1.png
diff --git a/assets/screenshots-2.png b/assets/screenshots-2.png
diff --git a/assets/screenshots-3.png b/assets/screenshots-3.png
diff --git a/assets/screenshots-4.png b/assets/screenshots-4.png
diff --git a/assets/screenshots-5.png b/assets/screenshots-5.png
diff --git a/assets/screenshots-6.png b/assets/screenshots-6.png
diff --git a/css/copy.css b/css/copy.css
@@ -0,0 +1,49 @@
+markdown-style pre > .copied,
+markdown-style [class*='language-'] .copied {
+  display: flex;
+  position: absolute;
+  cursor: pointer;
+  color: #a5afbb;
+  top: 6px;
+  right: 6px;
+  border-radius: 5px;
+  background: #82828226;
+  padding: 6px;
+  font-size: 12px;
+  transition: all 0.3s;
+  z-index: 10;
+}
+markdown-style pre > .copied:not(.active),
+markdown-style [class*='language-'] .copied:not(.active) {
+  visibility: hidden;
+}
+markdown-style pre:hover > .copied,
+markdown-style [class*='language-']:hover .copied {
+  visibility: visible;
+}
+markdown-style pre:hover > .copied:hover,
+markdown-style [class*='language-']:hover .copied:hover {
+  background: #4caf50;
+  color: #fff;
+}
+markdown-style [class*='language-']:hover .copied:active,
+markdown-style pre > .copied.active {
+  background: #2e9b33;
+  color: #fff;
+}
+markdown-style pre > .copied .octicon-copy,
+markdown-style [class*='language-'] .copied .octicon-copy {
+  display: block;
+}
+markdown-style pre > .copied .octicon-check,
+markdown-style [class*='language-'] .copied .octicon-check {
+  display: none;
+}
+markdown-style pre > .active .octicon-copy,
+markdown-style [class*='language-'] .active .octicon-copy {
+  display: none;
+}
+markdown-style pre > .active .octicon-check,
+markdown-style [class*='language-'] .active .octicon-check {
+  display: block;
+}
diff --git a/css/demo-preview.css b/css/demo-preview.css
@@ -0,0 +1,62 @@
+.idoc-demo-warpper {
+  overflow: hidden;
+  min-height: 60px;
+  margin-bottom: 16px;
+}
+
+div.idoc-demo-warpper {
+  position: relative;
+  background-color: var(--color-canvas-subtle);
+  border-radius: 6px;
+}
+
+div.idoc-demo-warpper > pre {
+  padding: 16px;
+  overflow: auto;
+  display: block;
+  margin-bottom: 0 !important;
+  height: 100%;
+}
+
+div.idoc-demo-previw {
+  padding: 10px;
+  font-size: initial;
+  line-height: initial;
+  line-height: initial;
+  font-family: initial;
+  overflow: auto;
+}
+.idoc-demo-previw {
+  border: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: var(--color-canvas-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: 6px;
+  z-index: 9;
+  transition: left 0.3s cubic-bezier(1, 0, 1, 0);
+}
+
+.idoc-demo-previw.ishiden {
+  left: -100%;
+}
+button.idoc-toggle-previw {
+  user-select: none;
+  position: absolute;
+  z-index: 10;
+  border: transparent;
+  background-color: var(--color-border-default);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 2px 5px;
+  border-radius: 3px;
+  bottom: 5px;
+  right: 5px;
+}
+button.idoc-toggle-previw:hover {
+  color: var(--color-theme-text);
+}