🏞️ Yeni al galeri ekle

KimlikDAO · Jan 11, 2025 · e929291 · e929291
1 parent ba3e0ee
commit e929291
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 14 deletions.
diff --git a/birim/blog/2025.01/birim.jsx b/birim/blog/2025.01/birim.jsx
@@ -6,7 +6,8 @@ export default ({ href, piggyback, loading }) => (
   <a href={href} class="blp">
     <BlogCss />
     <div>
-      <BannerResmi piggyback={piggyback} class="blpp" width="100%" loading={loading} />
+      <BannerResmi piggyback={piggyback} class="blpp" width="100%" loading={loading}
+        quality={60} bundleWidth={36 * 13} bundleHeight={19 * 13} />
       <h4 data-en="January 2025 progress report">Ocak 2025 ilerleme raporu</h4>
       <Yazar ad="KimlikDAO" />
       <div class="bly">{{

diff --git a/birim/blog/eliptik-egriler/birim.jsx b/birim/blog/eliptik-egriler/birim.jsx
@@ -13,7 +13,8 @@ export default ({ href }) =>
     <Css />
     <BlogCss />
     <div>
-      <Banner class="blpp" width="100%" quality={60} />
+      <Banner class="blpp" width="100%"
+        quality={60} bundleWidth={36 * 13} bundleHeight={19 * 13} />
       <h4 data-en="Elliptic curves and their applications in crypto">Eliptik eğriler ve kriptoda kullanımı</h4>
       <Yazar ad={{ tr: "KimlikDAO öğren & kazan", en: "KimlikDAO learn & earn" }} />
       <div class="bly">{{

diff --git a/birim/kpass/birim.jsx b/birim/kpass/birim.jsx
@@ -15,18 +15,18 @@ export const SağDüğme = dom.a("kpsa");
 const PersonInfoKartı = () => (
   <div class={Css.BilgiKartı}>
     <div class={Css.BilgiKartıİçi}>
-      <div class={Css.Ad}>TCKN</div>
-      <div id="kplocalIdNumber">22345678902</div>
+      <div class={Css.Ad}>{{ en: "SSN", tr: "TCKN" }}</div>
+      <div id="kplocalIdNumber">{{ en: "555-55-5555", tr: "22345678902" }}</div>
       <div class={Css.Ad} data-en="Name">Ad</div>
-      <div id="kpfirst">Kaan</div>
+      <div id="kpfirst">{{ en: "John", tr: "Kaan" }}</div>
       <div class={Css.Ad} data-en="Last name">Soyad</div>
-      <div id="kplast">Ankara</div>
+      <div id="kplast">{{ en: "Doe", tr: "Ankata" }}</div>
       <div class={Css.Ad} data-en="Date of birth">Doğum tarihi</div>
-      <div id="kpdateOfBirth">12.06.1975</div>
+      <div id="kpdateOfBirth">{{ en: "12.06.1975", tr: "12.06.1975" }}</div>
       <div class={Css.Ad} data-en="City of birth">Doğum yeri</div>
-      <div id="kpcityOfBirth">Ankara</div>
+      <div id="kpcityOfBirth">{{ en: "New York", tr: "Ankara" }}</div>
       <div class={Css.Ad} data-en="Gender">Cinsiyet</div>
-      <div id="kpgender" data-en="M">E</div>
+      <div id="kpgender">{{ en: "M", tr: "E" }}</div>
     </div>
   </div>
 );

diff --git a/yenial/sayfa.css b/yenial/sayfa.css
@@ -1,7 +1,109 @@
 /**
- * @name {Kök}
+ * @name {Root}
  */
 #al {
-  margin: 0 auto;
+  margin: 40px auto;
   max-width: 1200px;
+  display: flex;
+}
+
+/**
+ * @name {LeftColumn}
+ */
+#als {
+  width: 300px;
+  flex-shrink: 0;
+}
+
+/**
+ * @name {RightColumn}
+ */
+#alr {
+  flex: 1;
+  min-width: 0;
+}
+
+/**
+ * @name {NavList}
+ */
+#alnl {
+  font-weight: 700;
+  list-style: none;
+  padding: 0;
+  margin: 50px 0;
+}
+
+/**
+ * @name {NavItem}
+ */
+.aln {
+  padding: 12px 16px;
+  cursor: pointer;
+  border-radius: 4px;
+  margin: 4px 0;
+}
+
+.aln:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.aln.active {
+  background: rgba(0, 0, 0, 0.1);
+  font-weight: 500;
+}
+
+/**
+ * @name {Gallery}
+ */
+#alis {
+  background: white;
+  border-radius: 25px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  min-height: 280px;
+  margin: 0 20px;
+}
+
+/**
+ * @name {GalleryTitle}
+ */
+.alist {
+  margin: 0 0 15px 7px;
+}
+
+/**
+ * @name {GallerySearch}
+ */
+#aliss {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  margin-bottom: 24px;
+}
+
+/**
+ * @name {GalleryGrid}
+ */
+#alisg {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+/**
+ * @name {InfoSource}
+ */
+.alisi {
+  aspect-ratio: 1.4;
+  background: #f5f5f5;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.alisi:hover {
+  background: #eee;
 }
diff --git a/yenial/sayfa.jsx b/yenial/sayfa.jsx
@@ -1,12 +1,12 @@
 import Script from "kastro:./sayfa.js";
+import Css from "./sayfa.css";
 import Başlık from "/birim/başlık/birim";
 import Favicon from "/birim/icon.svg";
 import KPass from "/birim/kpass/birim.jsx";
 import Lato400 from "/birim/lato/l400.ttf";
 import Lato700 from "/birim/lato/l700.ttf";
 import OrtakCss from "/birim/ortakcss/birim";
 import { ChainId } from "/lib/crosschain/chains";
-import Css from "./sayfa.css";
 
 /** @const {!Array<ChainId>} */
 const Chains = [
@@ -27,6 +27,42 @@ const ChainNotes = {
 /** @const {ChainId} */
 const DefaultChain = ChainId.xa4b1;
 
+const Gallery = () => (
+  <div id={Css.Gallery}>
+    <div>
+      <h2 class={Css.GalleryTitle}>{{ en: "Add info", tr: "Bilgi ekle" }}</h2>
+      <input
+        type="search"
+        id={Css.GallerySearch}
+        placeholder={{ en: "Type country, state, or source", tr: "Ülke veya kaynak gir" }}
+      />
+      <div id={Css.GalleryGrid}>
+        <div class={Css.InfoSource}>{{ en: "Passport", tr: "Pasaport" }}</div>
+        <div class={Css.InfoSource}>{{ en: "Population registry", tr: "Nüfus kayıt örneği" }}</div>
+        <div class={Css.InfoSource}>ID.me</div>
+        <div class={Css.InfoSource}>{{ en: "National ID card", tr: "Kimlik Kartı" }}</div>
+        <div class={Css.InfoSource}>REAL ID</div>
+        <div class={Css.InfoSource}>login.gov</div>
+      </div>
+    </div>
+    <div style="display:none">
+      <button>
+        {{ en: "Back", tr: "Geri" }}
+      </button>
+    </div>
+  </div>
+);
+
+const InfoSectionNav = () => (
+  <ul id={Css.NavList}>
+    <li class={Css.NavItem}>{{ en: "Personal info", tr: "Kişi bilgileri" }}</li>
+    <li class={Css.NavItem}>{{ en: "Contact info", tr: "İletişim bilgileri" }}</li>
+    <li class={Css.NavItem}>{{ en: "Address", tr: "Adres" }}</li>
+    <li class={Css.NavItem}>{{ en: "Photo verification", tr: "Fotoğraf doğrulama" }}</li>
+    <li class={Css.NavItem}>HumanID</li>
+  </ul>
+);
+
 const Al = ({ Lang }) => (
   <html lang={Lang}>
     <head>
@@ -40,9 +76,17 @@ const Al = ({ Lang }) => (
       <Css />
       <Script Chains={Chains} DefaultChain={DefaultChain} />
     </head>
-    <body id={Css.Kök}>
+    <body>
       <Başlık href="/" DefaultChain={DefaultChain} Chains={Chains} ChainNotes={ChainNotes} />
-      <KPass />
+      <div id={Css.Root}>
+        <div id={Css.LeftColumn}>
+          <KPass />
+          <InfoSectionNav />
+        </div>
+        <div id={Css.RightColumn}>
+          <Gallery />
+        </div>
+      </div>
     </body>
   </html >
 );