style: header

Author: coder-hxl

packages/chrome/popup/popup.css

@@ -17,6 +17,11 @@
   border-radius: 10px;
 }
 
+:root {
+  --c-yellow-theme: #feba07;
+  --c-golden-yellow-theme: #f26b1f;
+}
+
 body {
   width: 330px;
 }
@@ -39,8 +44,30 @@ input:focus-visible {
   background-color: #cecece;
 }
 
-.title {
-  text-align: center;
+/* header */
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+}
+
+header .left {
+  display: flex;
+  align-items: center;
+}
+
+header .left .logo {
+  height: 26px;
+}
+
+header .left .title {
+  margin-left: 5px;
+  background: linear-gradient(108deg, var(--c-yellow-theme) 10%, var(--c-golden-yellow-theme));;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
 }
 
 /* config */
@@ -55,12 +82,12 @@ input:focus-visible {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 26px;
-  padding: 3px 0;
+  height: 23px;
+  margin: 6px 0;
 }
 
 .config .writes .item span {
-  width: 55px;
+  width: 50px;
   text-align: justify;
   text-align-last: justify;
 }

packages/chrome/popup/popup.html

@@ -2,7 +2,33 @@
 <link rel="stylesheet" href="./popup.css" />
 
 <div id="app">
-  <h1 class="title">Page AI</h1>
+  <header>
+    <div class="left">
+      <img src="../assets/logo.png" class="logo" />
+      <h1 class="title">Page AI</h1>
+    </div>
+    <div class="right">
+      <a
+        href="https://github.com/coder-hxl/page-ai"
+        target="_blank"
+        title="访问Github"
+        class="github"
+      >
+        <svg
+          height="16"
+          viewBox="0 0 16 16"
+          version="1.1"
+          width="16"
+          aria-hidden="true"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+          ></path>
+        </svg>
+      </a>
+    </div>
+  </header>
 
   <div class="partition"></div>