Skip to content

Commit 5ecdd70

Browse files
siravijbbsiravijbb
committed
i fixed my life
1 parent dc74ff2 commit 5ecdd70

File tree

5 files changed

+53
-311
lines changed

5 files changed

+53
-311
lines changed

‎src/components/navbar.svelte‎

Lines changed: 28 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -32,150 +32,35 @@
3232
3333
</script>
3434

35-
<header class="header">
36-
<div class="logo">
37-
<img class="logo-icon" src="/Stargaze_logo.png">
38-
<span>ไลก์</span>
39-
</div>
4035

41-
<nav>
42-
<ul class="nav-menu">
43-
<li><a href="/blog" >บทความ</a></li>
44-
<li><a href="/search" >ค้นหาสถานที่ดูดาว</a></li>
45-
<li><a href="/blog" >แกลลอรี่</a></li>
46-
<li><a href="/seach" >กิจกรรม</a></li>
47-
</ul>
48-
</nav>
49-
{#if data.user}
50-
<button class="login-btn" onclick={handleLogout}>
36+
37+
<header class="bg-gray-900 text-white backdrop-blur-sm border-b border-gray-800">
38+
<div class="container mx-auto px-4 py-4">
39+
<nav class="flex items-center justify-between">
40+
<div class="flex items-center space-x-2">
41+
<div class="w-8 h-8 rounded-full flex items-center justify-center">
42+
<img class="text-gray-900 font-bold text-sm" src="/Stargaze_logo.png">
43+
</div>
44+
<span class="text-xl font-bold">stargaze</span>
45+
</div>
46+
47+
<div class="hidden md:flex items-center space-x-8">
48+
<a href="/blog" class="text-gray-300 hover:text-white transition-colors">บทความ</a>
49+
<a href="/search" class="text-gray-300 hover:text-white transition-colors">ค้นหาสถานที่ดูดาว</a>
50+
<a href="/stargaze" class="text-gray-300 hover:text-white transition-colors">แกลลอรี่</a>
51+
<a href="/search" class="text-gray-300 font-medium">ทริปดูดาว</a>
52+
</div>
53+
{#if data.user}
54+
<button onclick={handleLogout} class="bg-blue-500 hover:bg-blue-600 px-6 py-2 rounded-lg font-medium transition-colors">
5155
<h2>Welcome, {data.user.username}!</h2>
5256
<p>Your email: {data.user.email}</p>
53-
</button>
54-
{:else}
55-
<a class="login-btn" href="/login">
56-
ล็อคอิน/สมัครสมาชิก
57-
</a>
58-
{/if}
59-
</header>
60-
61-
<style>
62-
.header {
63-
background-color: #1a1a1a;
64-
padding: 1rem;
65-
display: flex;
66-
justify-content: space-between;
67-
align-items: center;
68-
border-bottom: 1px solid #333;
69-
position: sticky;
70-
top: 0;
71-
z-index: 1000;
72-
flex-wrap: wrap;
73-
}
74-
75-
.logo {
76-
display: flex;
77-
align-items: center;
78-
gap: 0.5rem;
79-
font-weight: 500;
80-
font-size: 1.1rem;
81-
color: white;
82-
}
83-
84-
.logo-icon {
85-
width: 24px;
86-
height: 24px;
87-
background-color: white;
88-
border-radius: 50%;
89-
}
57+
</button>
58+
{:else}
59+
<a href="/login" class="bg-blue-500 hover:bg-blue-600 px-6 py-2 rounded-lg font-medium transition-colors">
60+
ลงทะเบียน/สมัครสมาชิก
61+
</a>
62+
{/if}
63+
</nav>
64+
</div>
65+
</header>
9066

91-
.nav-menu {
92-
display: flex;
93-
gap: 1rem;
94-
list-style: none;
95-
flex-wrap: wrap;
96-
margin: 0;
97-
padding: 0;
98-
}
99-
100-
.nav-menu a {
101-
color: white;
102-
text-decoration: none;
103-
padding: 0.5rem 0.8rem;
104-
border-radius: 4px;
105-
transition: background-color 0.3s;
106-
font-size: 14px;
107-
white-space: nowrap;
108-
cursor: pointer;
109-
}
110-
111-
.nav-menu a:hover {
112-
background-color: rgba(255, 255, 255, 0.1);
113-
}
114-
115-
.login-btn {
116-
background-color: #4a90e2;
117-
color: white;
118-
padding: 0.6rem 1rem;
119-
border: none;
120-
border-radius: 6px;
121-
cursor: pointer;
122-
font-size: 14px;
123-
transition: background-color 0.3s;
124-
white-space: nowrap;
125-
font-family: inherit;
126-
}
127-
128-
.login-btn:hover {
129-
background-color: #357abd;
130-
}
131-
132-
@media (max-width: 768px) {
133-
.header {
134-
padding: 0.8rem;
135-
flex-direction: column;
136-
gap: 1rem;
137-
}
138-
139-
.nav-menu {
140-
order: 3;
141-
width: 100%;
142-
justify-content: center;
143-
gap: 0.5rem;
144-
}
145-
146-
.nav-menu a {
147-
padding: 0.4rem 0.6rem;
148-
font-size: 12px;
149-
}
150-
151-
.login-btn {
152-
order: 2;
153-
padding: 0.5rem 1rem;
154-
font-size: 12px;
155-
}
156-
}
157-
158-
@media (max-width: 480px) {
159-
.header {
160-
padding: 0.6rem;
161-
}
162-
163-
.logo {
164-
font-size: 1rem;
165-
}
166-
167-
.nav-menu {
168-
gap: 0.3rem;
169-
}
170-
171-
.nav-menu a {
172-
padding: 0.3rem 0.5rem;
173-
font-size: 11px;
174-
}
175-
176-
.login-btn {
177-
padding: 0.4rem 0.8rem;
178-
font-size: 11px;
179-
}
180-
}
181-
</style>

‎src/routes/+page.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
<script lang="ts">
22
import { onMount } from 'svelte';
33
import { derived, writable } from 'svelte/store';
4+
import { goto } from '$app/navigation';
45
6+
onMount(() => {
7+
goto('/blog');
8+
});
59
// Types
610
interface Article {
711
id: number;

‎src/routes/blog/+page.svelte‎

Lines changed: 9 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<script lang="ts">
22
import { onMount } from 'svelte';
3+
import Navbar from '../../components/navbar.svelte';
4+
import Footer from '../../components/footer.svelte';
5+
let { data } = $props();
36
47
// Type definitions
58
interface Article {
@@ -357,21 +360,8 @@
357360
</svelte:head>
358361

359362
<!-- Header -->
360-
<header class="header">
361-
<div class="logo">
362-
<div class="logo-icon"></div>
363-
<span>ไลก์</span>
364-
</div>
365-
<nav>
366-
<ul class="nav-menu">
367-
<li><a href="/">หน้าหลัก</a></li>
368-
<li><a href="/blog">บทความ</a></li>
369-
<li><a href="/search">ค้นหาที่ดูดาว</a></li>
370-
<li><a href="/blog">i</a></li>
371-
</ul>
372-
</nav>
373-
<a href="#login" class="login-btn">ล็อคอิน/สมัครสมาชิก</a>
374-
</header>
363+
<Navbar data={data} />
364+
375365

376366
<!-- Hero Section -->
377367
<section class="hero">
@@ -565,132 +555,26 @@
565555
{/if}
566556

567557
<!-- Footer -->
568-
<footer class="footer">
569-
<div class="footer-container">
570-
<div class="footer-section">
571-
<div class="footer-logo">
572-
<div class="logo-icon">S</div>
573-
<span>ดูดาว</span>
574-
</div>
575-
<p class="footer-description">
576-
แหล่งข้อมูลและบทความเกี่ยวกับดาราศาสตร์ที่ครบถ้วนและน่าเชื่อถือ
577-
</p>
578-
</div>
579-
580-
<div class="footer-section">
581-
<h3 class="footer-heading">เมนูหลัก</h3>
582-
<nav class="footer-nav">
583-
<a href="/">หน้าหลัก</a>
584-
<a href="/blog">บทความ</a>
585-
<a href="/">ข้อมูลดวงดาว</a>
586-
<a href="#activities">กิจกรรม</a>
587-
</nav>
588-
</div>
589-
590-
<div class="footer-section">
591-
<h3 class="footer-heading">เกี่ยวกับเรา</h3>
592-
<nav class="footer-nav">
593-
<a href="#about">เกี่ยวกับเรา</a>
594-
<a href="#contact">ติดต่อเรา</a>
595-
<a href="#privacy">นโยบายความเป็นส่วนตัว</a>
596-
<a href="#terms">เงื่อนไขการใช้งาน</a>
597-
</nav>
598-
</div>
599-
600-
<div class="footer-section">
601-
<h3 class="footer-heading">ติดตามเรา</h3>
602-
<div class="social-links">
603-
<a href="#" class="social-link" aria-label="Facebook">
604-
<i class="fab fa-facebook"></i>
605-
</a>
606-
<a href="#" class="social-link" aria-label="Twitter">
607-
<i class="fab fa-twitter"></i>
608-
</a>
609-
<a href="#" class="social-link" aria-label="Instagram">
610-
<i class="fab fa-instagram"></i>
611-
</a>
612-
<a href="#" class="social-link" aria-label="YouTube">
613-
<i class="fab fa-youtube"></i>
614-
</a>
615-
</div>
616-
</div>
617-
</div>
618-
619-
<div class="footer-bottom">
620-
<div class="footer-bottom-content">
621-
<p class="copyright">© 2025 ดูดาว. สงวนลิขสิทธิ์.</p>
622-
<div class="footer-bottom-links">
623-
<a href="#privacy">นโยบายความเป็นส่วนตัว</a>
624-
<span class="separator">|</span>
625-
<a href="#terms">เงื่อนไขการใช้งาน</a>
626-
</div>
627-
</div>
628-
</div>
629-
</footer>
630-
558+
<div class="mt-5">
559+
<Footer />
560+
</div>
631561
<style>
632562
:global(*) {
633-
margin: 0;
634-
padding: 0;
635-
box-sizing: border-box;
563+
636564
}
637565
638566
:global(body) {
639567
font-family: 'Sarabun', sans-serif;
640568
background-color: #121620;
641569
color: #ffffff;
642-
line-height: 1.6;
643570
}
644571
645572
/* Enhanced Mobile Header */
646-
.header {
647-
background-color: #1a1a1a;
648-
padding: 1rem;
649-
display: flex;
650-
justify-content: space-between;
651-
align-items: center;
652-
border-bottom: 1px solid #333;
653-
position: sticky;
654-
top: 0;
655-
z-index: 1000;
656-
flex-wrap: wrap;
657-
}
658573
659-
.logo {
660-
display: flex;
661-
align-items: center;
662-
gap: 0.5rem;
663-
font-weight: 500;
664-
font-size: 1.1rem;
665-
}
666574
667-
.logo-icon {
668-
width: 24px;
669-
height: 24px;
670-
background-color: white;
671-
border-radius: 50%;
672-
}
673575
674-
.nav-menu {
675-
display: flex;
676-
gap: 1rem;
677-
list-style: none;
678-
flex-wrap: wrap;
679-
}
680576
681-
.nav-menu a {
682-
color: white;
683-
text-decoration: none;
684-
padding: 0.5rem 0.8rem;
685-
border-radius: 4px;
686-
transition: background-color 0.3s;
687-
font-size: 14px;
688-
white-space: nowrap;
689-
}
690577
691-
.nav-menu a:hover {
692-
background-color: rgba(255, 255, 255, 0.1);
693-
}
694578
695579
.login-btn {
696580
background-color: #4a90e2;

0 commit comments

Comments
 (0)