From 868b5e1c36712264d45ccaa1d40d8f6142bb1816 Mon Sep 17 00:00:00 2001
From: x1ulan <qqookun@gmail.com>
Date: Tue, 10 Jun 2025 22:10:01 +0800
Subject: [PATCH] edit css

---
 src/Delete.tsx          | 22 ++++++-----
 src/Fetch.tsx           | 29 ++++++++-------
 src/ImageWithPrview.tsx | 20 +++++-----
 src/Post.tsx            | 32 ++++++++--------
 src/Zone.tsx            | 82 +++++++++++++++++++++++++++++++++++------
 src/api.ts              |  2 +-
 6 files changed, 126 insertions(+), 61 deletions(-)

diff --git a/src/Delete.tsx b/src/Delete.tsx
index 9cb1f29..188065d 100644
--- a/src/Delete.tsx
+++ b/src/Delete.tsx
@@ -49,30 +49,32 @@ export const Delete = () => {
 			<form
 				onSubmit={handleSubmit(onSubmit)}
 				className=
-				'flex flex-col m-auto w-10/12 h-[80dvh] px-10 gap-3 pb-3 md:w-[50dvw]'
+				'flex flex-col m-auto w-10/12 px-6 py-8 gap-6 rounded-lg shadow-xl bg-white md:w-[50dvw]'
 			>
-				{/* register your input into the hook by invoking the "register" function */}
-				<h1 className="text-3xl my-3">刪除匿名</h1>
-				<label htmlFor='id' className='text-left'>
+				<h1 className="text-4xl font-bold text-gray-800 mb-4 text-center">刪除匿名</h1>
+				<label htmlFor='id' className='text-lg font-medium text-gray-700'>
 					ID:
 				</label>
-				<input id="id" type="search" {...register("id", { required: true })} className='border-b-4 border-zinc-500 w-full text-end outline-none focus:border-zinc-200' list="saved_id" />
+				<input id="id" type="search" {...register("id", { required: true })} className='border-b-4 border-zinc-500 w-full text-end outline-none focus:border-gray-600 text-black' list="saved_id" />
 				<datalist id="saved_id">
 					{saved.map((e, it) => <option value={e.id} key={it}></option>)}
 				</datalist>
 
-				<label htmlFor='hash'>
+				<label htmlFor='hash' className='text-lg font-medium text-gray-700'>
 					Hash:
 				</label>
-				<input id="hash" type="text" {...register("hash", { required: true })} className='border-b-4 border-zinc-500 w-full text-end outline-none focus:border-zinc-200' />
+				<input id="hash" type="text" {...register("hash", { required: true })} className='border-b-4 border-zinc-500 w-full text-end outline-none focus:border-gray-600 text-black' />
 
 				{/* errors will return when field validation fails  */}
 				{errors.id && <span>This field is required</span>}
 				{errors.hash && <span>This field is required</span>}
 
-				<button type="submit" className="ring-3 w-full mx-auto rounded-md ">
-					刪除
-				</button>
+                <button
+                    type="submit"
+                    className="mt-6 w-full py-3 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed" // Consistent button styling
+                >
+                    刪除
+                </button>
 			</form>
 		</>
 	)
diff --git a/src/Fetch.tsx b/src/Fetch.tsx
index 5a63098..c68813c 100644
--- a/src/Fetch.tsx
+++ b/src/Fetch.tsx
@@ -12,29 +12,30 @@ export const Fetch = () => {
 				setFetched(e)
 			}
 		}
-		)
+	)
 	}, [])
-	return (<div className="h-dvh w-dvw flex flex-col justify-items-center overflow-scroll gap-10 pt-10 pb-10">
-		{fetched.map(post => <div className="w-[87%] h-fit  mx-auto border-1 border-slate-700 rounded">
-			<p className="text-left mx-2 mt-2">{post.content}</p>
-			{post.enclosure.length > 0 && post.enclosure[0] != null && <div className="flex flex-row overflow-scroll w-full h-30 mx-2">
-				{post.enclosure.map(enc => {
+	return (<div className="min-h-dvh w-dvw flex flex-col items-center gap-6 py-8 px-4">
+		{fetched.map(post => <div className="w-full max-w-2xl bg-gray-200 rounded-lg shadow-md p-6 flex flex-col gap-4">
+			<p className="text-gray-800 text-base leading-relaxed">{post.content}</p>
+			{post.enclosure.length > 0 && post.enclosure[0] != null && <div className="flex flex-row overflow-x-auto gap-3 py-2 -mx-2 px-2 border-t border-gray-200 pt-4">
+				{post.enclosure.map((enc, index) => {
 					if (enc) {
-						return <img src={MediaPathTrc(enc)} className="rounded h-full w-auto" />
+						return <img
+									key={index} 
+									src={MediaPathTrc(enc)}
+									alt={`Post media ${post.id}-${index}`}
+									className="rounded-md h-32 object-cover aspect-video flex-shrink-0" 
+								/>
 					} else {
 						return ""
 					}
 				})}
 			</div>}
-			{post.signing && <p className="text-right mr-3">by: {post.signing}</p>}
-			<div className="h-fit flex flex-row text-sm mx-3">
+			{post.signing && <p className="text-right text-sm text-gray-600 italic mt-2">by: {post.signing}</p>}
+			<div className="flex justify-between items-center text-xs text-gray-500 border-t border-gray-100 pt-3">
 				<p className="self-start">PID: {post.id}</p>
-				<p className="self-end ml-auto">發文於: {post.post_at.toLocaleTimeString()}</p>
+				<p className="self-end">發文於: {post.post_at.toLocaleTimeString()}</p>
 			</div>
-
-
 		</div>)}
-
 	</div>)
-
 }
diff --git a/src/ImageWithPrview.tsx b/src/ImageWithPrview.tsx
index eacd659..4ff1039 100644
--- a/src/ImageWithPrview.tsx
+++ b/src/ImageWithPrview.tsx
@@ -12,7 +12,7 @@ const ImageWithPreview = ({
     <>
       <img
         src={src}
-        alt="kkk"
+        alt="tyts"
         onClick={() => {
           setShow(true)
         }}
@@ -25,15 +25,15 @@ const ImageWithPreview = ({
         }
         onClick={() => setShow(false)}
       >
-        <div className="z-20 w-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 md:w-[50dvw]">
-          <img src={src} className="w-[90dvw] h-auto m-auto" />
-          <button
-            type="button"
-            className="border w-full"
-            onClick={() => remove()}
-          >
-            刪除
-          </button>
+        <div className="z-20 w-full md:w-fit fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 md:w-[50dvw]">
+          <img src={src} className="w-[90dvw] h-auto m-auto md:w-auto md:max-h-[80dvh]" />
+            <button
+              type="button"
+              className="mt-6 w-full py-3 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed" // Consistent button styling
+              onClick={() => remove()}
+              >
+              刪除
+            </button>
         </div>
       </div>
     </>
diff --git a/src/Post.tsx b/src/Post.tsx
index dbf64f1..ff3b335 100644
--- a/src/Post.tsx
+++ b/src/Post.tsx
@@ -1,4 +1,4 @@
-import { useState, type ReactElement, } from 'react'
+import { useState, type ReactElement } from 'react'
 import { useForm, type SubmitHandler } from 'react-hook-form'
 import ImageWithPreview from './ImageWithPrview'
 import { Post } from './api'
@@ -77,20 +77,20 @@ export default function PostForm() {
       <form
         onSubmit={handleSubmit(onSubmit)}
         className={
-          'flex flex-col m-auto w-10/12 h-[80dvh] px-10 gap-3 pb-3 md:w-[50dvw]' +
+          'flex flex-col m-auto w-10/12 h-[80dvh] px-6 py-8 gap-6 rounded-lg shadow-xl bg-white ' + // Added background, padding, shadow, rounded corners
           (cred !== undefined ? ' hidden' : '')
         }
       >
-        {/* register your input into the hook by invoking the "register" function */}
-        <h1 className="text-3xl my-3">發佈匿名</h1>
+        <h1 className="text-4xl font-bold text-gray-800 mb-4 text-center">發佈匿名</h1> {/* Larger, bolder title, centered */}
         <textarea
-          className="ring-3 ring-zinc-500 focus:ring-zinc-200 outline-none rounded-xl h-5/12 px-3 w-full"
+          className="p-4 border border-gray-300 rounded-lg h-5/12 w-full resize-y focus:outline-none focus:border-gray-500 transition-colors duration-200 text-black" // Modernized textarea
           placeholder="匿名文章"
           {...register('content', { required: true })}
         />
         <div>
-          <label htmlFor="files" className="text-xl">
+          <label htmlFor="files" className="block text-lg font-medium text-gray-700 mb-2 cursor-pointer"> {/* Styled label */}
             圖片
+            <span className="ml-2 px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 transition-colors duration-200">選擇圖片</span>
           </label>
           <input
             multiple
@@ -102,7 +102,7 @@ export default function PostForm() {
           />
           <div
             className={
-              'h-20 w-full gap-3 overflow-scroll flex flex-row ' +
+              'h-24 w-full gap-3 overflow-x-auto flex flex-row items-center border border-gray-200 rounded-lg p-2 ' + // Adjusted image preview container
               (files_list && files_list.length > 0 ? '' : 'hidden')
             }
           >
@@ -110,23 +110,25 @@ export default function PostForm() {
           </div>
         </div>
 
-        {/* include validation with required or other standard HTML validation rules */}
-        <div className="ml-auto flex gap-3">
-          <label className="w-fit break-keep">署名</label>
+        <div className="ml-auto flex items-center gap-3"> {/* Aligned items, added items-center */}
+          <label className="w-fit text-lg font-medium text-gray-700 break-keep">署名</label>
           <input
-            className="border-b-4 border-zinc-500 w-full text-end outline-none focus:border-zinc-200"
+            className="border-b-2 border-gray-400 w-full text-right outline-none focus:border-gray-600 transition-colors duration-200 p-1" // Modernized signing input
             {...register('signing', {
               maxLength: 20,
             })}
           />
         </div>
-        {/* errors will return when field validation fails  */}
-        {errors.content && <span>This field is required</span>}
+        {errors.content && <span className="text-red-500 text-sm">此欄位為必填</span>} {/* Styled error message */}
 
-        <button type="submit" className="ring-3 w-full mx-auto rounded-md " disabled={posting}>
+        <button
+          type="submit"
+          className="mt-6 w-full py-3 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed" // Modernized button
+          disabled={posting}
+        >
           發送
         </button>
       </form>
     </>
   )
-}
+}
\ No newline at end of file
diff --git a/src/Zone.tsx b/src/Zone.tsx
index c9c76a7..9f6d658 100644
--- a/src/Zone.tsx
+++ b/src/Zone.tsx
@@ -2,21 +2,81 @@ import { useState } from 'react'
 
 export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
   const [toggle, setToggle] = useState(false)
+  
   return (
     <>
+      {/* Backdrop with fade animation */}
+      <div 
+        className={`fixed inset-0 z-10 backdrop-blur-sm transition-all duration-300 ${
+          toggle 
+            ? 'bg-black/50 opacity-100 pointer-events-auto' 
+            : 'bg-black/0 opacity-0 pointer-events-none'
+        }`}
+        onClick={() => setToggle(false)}
+      />
 
-      {toggle && <div className="w-full fixed h-dvh top-0 left-0 z-10 backdrop-brightness-50" >
-      </div>}
+      {/* Main drawer */}
+      <div className={`
+        fixed bottom-0 left-1/2 -translate-x-1/2 z-20 
+        w-[min(80dvw,400px)] bg-zinc-800 
+        rounded-t-3xl shadow-2xl border-t border-zinc-600
+        transition-all duration-500 ease-out
+        ${toggle ? 'h-[45dvh]' : 'h-16'}
+      `}>
+        
+        {/* Drawer handle/button */}
+        <div className="relative">
+          {/* Visual handle indicator */}
+          <div className="w-12 h-1 bg-zinc-500 rounded-full mx-auto mt-3 mb-2" />
+          
+          <button 
+            onClick={() => setToggle(!toggle)}
+            className="w-full py-3 px-6 text-white font-medium text-lg
+                     hover:bg-zinc-700 transition-colors duration-200
+                     flex items-center justify-center gap-2"
+          >
+            <span>選擇功能</span>
+            <span className={`transition-transform duration-300 ${toggle ? 'rotate-180' : ''}`}>
+              ▲
+            </span>
+          </button>
+        </div>
 
-      <div className={"fixed bottom-0 left-1/2 -translate-x-1/2 z-20 w-[80dvw] bg-zinc-700 rounded transition-all duration-300" + (toggle ? " h-[40dvh]" : "h-fit")}>
-        <button onClick={() => setToggle(!toggle)}>Drawer</button>
-        {toggle && <div className="h-[40dvh] w-full flex flex-col pt-10 gap-8 text-xl">
-          <button onClick={() => { setZone("post"); setToggle(false) }}>PO文</button>
-          <button onClick={() => { setZone("delete"); setToggle(false) }}>刪文</button>
-          <button onClick={() => { setZone("view"); setToggle(false) }}>查看</button>
-        </div>}
+        {/* Menu content with staggered animations */}
+        <div className={`
+          px-6 pb-6 overflow-hidden
+          transition-all duration-500 ease-out
+          ${toggle ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'}
+        `}>
+          <div className="grid gap-4 pt-4">
+            {[
+              { key: 'post', label: 'PO文', icon: '✏️', delay: '100ms' },
+              { key: 'delete', label: '刪文', icon: '🗑️', delay: '200ms' },
+              { key: 'view', label: '查看', icon: '👁️', delay: '300ms' }
+            ].map(({ key, label, icon, delay }) => (
+              <button
+                key={key}
+                onClick={() => { setZone(key); setToggle(false) }}
+                className={`
+                  w-full py-4 px-6 bg-zinc-700 hover:bg-zinc-600 
+                  rounded-xl text-white text-lg font-medium
+                  flex items-center gap-4
+                  transform transition-all duration-300 ease-out
+                  hover:scale-105 hover:shadow-lg
+                  active:scale-95
+                  ${toggle ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}
+                `}
+                style={{ 
+                  transitionDelay: toggle ? delay : '0ms'
+                }}
+              >
+                <span className="text-2xl">{icon}</span>
+                <span>{label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
       </div>
     </>
-
   )
-}
+}
\ No newline at end of file
diff --git a/src/api.ts b/src/api.ts
index 39db400..c9453a2 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -1,5 +1,5 @@
 import { z } from 'zod/v4'
-let rooturl = 'http://10.16.20.19:3000'
+let rooturl = 'http://172.16.20.145:3000'
 
 type Inputs = {
   content: string