From 0c799a2fb88ac45c02fb17ce677a955490f019a5 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sat, 22 Feb 2025 02:36:59 +0500
Subject: [PATCH] feat: add link to radiquum.wah.su/photos

---
 index.html          | 47 +++++++++++++++++++++++++++------------------
 static/tailwind.css | 43 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index c124657..de8cf55 100644
--- a/index.html
+++ b/index.html
@@ -318,6 +318,17 @@
                                 PHOTOS</p>
                         </div>
                     </div>
+                    <a class="hover:border-bg-blue border-transparent border-2 border-solid transition-[border-color] w-full aspect-[2/1] max-h-[182px] overflow-hidden rounded-lg"
+                        href="/photos"
+                        target="_blank" referrerpolicy="origin">
+                        <div class="flex items-center justify-center w-full h-full gap-4 p-4 text-white bg-gray-500">
+                            <svg class="w-16 h-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm2-4h10q.3 0 .45-.275t-.05-.525l-2.75-3.675q-.15-.2-.4-.2t-.4.2L11.25 16L9.4 13.525q-.15-.2-.4-.2t-.4.2l-2 2.675q-.2.25-.05.525T7 17"/></svg>
+                            <div class="flex flex-col gap-1">
+                                <p class="text-2xl font-medium " data-i18n="LNK_PHOTO_GALLERY_TITLE">Online Gallery</p>
+                                <p class="text-base font-light " data-i18n="LNK_PHOTO_GALLERY">View my favorite images online</p>
+                            </div>
+                        </div>
+                    </a>
                     <a class="hover:border-bg-blue border-transparent border-2 border-solid transition-[border-color] w-full aspect-[2/1] max-h-[182px] overflow-hidden rounded-lg"
                         href="https://t.me/photowah" target="_blank" referrerpolicy="origin">
                         <div class="flex items-center justify-center w-full h-full gap-4 p-4 text-white bg-[#2f7ca3]">
@@ -331,38 +342,36 @@
                     </a>
                     <a class="hover:border-bg-blue w-[170px] flex-1 border-transparent border-2 border-solid transition-[border-color] aspect-square overflow-hidden rounded-lg"
                         href="https://pixey.org/radiquum" target="_blank" referrerpolicy="origin">
-                        <div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#353231]">
+                        <div class="flex flex-col items-center justify-center w-full h-full p-4 text-white bg-[#353231]">
                             <img class="w-16 h-16 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
                             <div class="flex flex-col gap-1">
-                                <p class="text-2xl font-medium ">pixey</p>
-                                <p class="text-base font-light " data-i18n="LNK_PHOTO_PIXEY">See the photos like in
-                                    instagram</p>
+                                <p class="text-sm font-medium ">pixey</p>
+                                <!-- <p class="text-base font-light " data-i18n="LNK_PHOTO_PIXEY">See the photos like in
+                                    instagram</p> -->
                             </div>
                         </div>
                     </a>
                     <a class="hover:border-bg-blue w-[170px] flex-1 border-transparent border-2 border-solid transition-[border-color] aspect-square overflow-hidden rounded-lg"
                         href="https://instafops.net/radiquwum" target="_blank" referrerpolicy="origin">
-                        <div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#353231]">
+                        <div class="flex flex-col items-center justify-center w-full h-full p-4 text-white bg-[#353231]">
                             <img class="w-16 h-16 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
                             <div class="flex flex-col gap-1">
-                                <p class="text-2xl font-medium ">instafops</p>
-                                <p class="text-base font-light " data-i18n="LNK_PHOTO_INSTAFOPS">Photos that more furry
-                                    related</p>
+                                <p class="text-sm font-medium ">instafops</p>
+                                <!-- <p class="text-base font-light " data-i18n="LNK_PHOTO_INSTAFOPS">Photos that more furry
+                                    related</p> -->
                             </div>
                         </div>
                     </a>
-                    <a class="hover:border-bg-blue border-transparent border-2 border-solid transition-[border-color] w-full aspect-[2/1] max-h-[182px] overflow-hidden rounded-lg"
-                        href="https://photos.wah.su/share/1bc2wt0jpNrv_zNzq50C5wfBKL6sKj8zPmU6pOYpK7d8hWKyaNWaFGkFD4-r5bcY7Q0"
-                        target="_blank" referrerpolicy="origin">
-                        <div class="flex items-center justify-center w-full h-full gap-4 p-4 text-white bg-[#615141]">
-                            <img class="w-16 h-16" alt="" src="./static/assets/immich.png" />
-                            <div class="flex flex-col gap-1">
-                                <p class="text-2xl font-medium " data-i18n="LNK_PHOTO_IMMICH_TITLE">Online Gallery</p>
-                                <p class="text-base font-light " data-i18n="LNK_PHOTO_IMMICH">Alternative versions and
-                                    unreleased photos</p>
-                            </div>
+                    <a class="hover:border-bg-blue w-[170px] flex-1 border-transparent border-2 border-solid transition-[border-color] aspect-square overflow-hidden rounded-lg"
+                    href="https://photos.wah.su/share/1bc2wt0jpNrv_zNzq50C5wfBKL6sKj8zPmU6pOYpK7d8hWKyaNWaFGkFD4-r5bcY7Q0" target="_blank" referrerpolicy="origin">
+                    <div class="flex flex-col items-center justify-center w-full h-full p-4 text-white bg-[#353231]">
+                        <img class="w-12 h-12 mx-auto my-2" alt="" src="./static/assets/immich.png" />
+                        <div class="flex flex-col gap-1">
+                            <p class="text-sm font-medium ">Immich</p>
+                            <!-- <p class="text-base font-light " data-i18n="LNK_PHOTO_INSTAFOPS">Other versions</p> -->
                         </div>
-                    </a>
+                    </div>
+                </a>
                 </div>
                 <div class="flex flex-col w-full gap-1">
                     <div
diff --git a/static/tailwind.css b/static/tailwind.css
index e9b130b..2b8633d 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -706,6 +706,11 @@ video {
   margin-bottom: 1rem;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .-ml-1 {
   margin-left: -0.25rem;
 }
@@ -758,6 +763,10 @@ video {
   aspect-ratio: 1 / 1;
 }
 
+.aspect-\[1\/1\] {
+  aspect-ratio: 1/1;
+}
+
 .h-14 {
   height: 3.5rem;
 }
@@ -786,6 +795,14 @@ video {
   height: 100%;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
 .max-h-\[182px\] {
   max-height: 182px;
 }
@@ -847,10 +864,22 @@ video {
   width: max-content;
 }
 
+.w-12 {
+  width: 3rem;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
 .min-w-\[372px\] {
   min-width: 372px;
 }
 
+.min-w-\[170px\] {
+  min-width: 170px;
+}
+
 .max-w-\[50vw\] {
   max-width: 50vw;
 }
@@ -859,6 +888,10 @@ video {
   max-width: 512px;
 }
 
+.max-w-\[170px\] {
+  max-width: 170px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1171,6 +1204,11 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -1273,6 +1311,11 @@ video {
   padding-bottom: 2rem;
 }
 
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .text-center {
   text-align: center;
 }