+
+
+
-
@@ -130,8 +130,8 @@
-
-
+
+
Direct Messages
diff --git a/frontend/src/routes/(authed)/home/+page.svelte b/frontend/src/routes/(authed)/home/+page.svelte
index d252d35..73b10c0 100644
--- a/frontend/src/routes/(authed)/home/+page.svelte
+++ b/frontend/src/routes/(authed)/home/+page.svelte
@@ -1,43 +1,112 @@
-
-
-
-
-
-
-
-
- Welcome user
-
- {#each cards as card}
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/routes/(authed)/home/bg.png b/frontend/src/routes/(authed)/home/bg.png
new file mode 100644
index 0000000..67d808a
Binary files /dev/null and b/frontend/src/routes/(authed)/home/bg.png differ
diff --git a/frontend/src/routes/(authed)/home/bu.jpg b/frontend/src/routes/(authed)/home/bu.jpg
new file mode 100644
index 0000000..22ee4ff
Binary files /dev/null and b/frontend/src/routes/(authed)/home/bu.jpg differ
diff --git a/frontend/src/routes/(authed)/home/clouds.png b/frontend/src/routes/(authed)/home/clouds.png
new file mode 100644
index 0000000..528ca99
Binary files /dev/null and b/frontend/src/routes/(authed)/home/clouds.png differ
diff --git a/frontend/src/routes/(authed)/home/ea.jpg b/frontend/src/routes/(authed)/home/ea.jpg
new file mode 100644
index 0000000..ae8a1c8
Binary files /dev/null and b/frontend/src/routes/(authed)/home/ea.jpg differ
diff --git a/frontend/src/routes/(authed)/notifications/+page.svelte b/frontend/src/routes/(authed)/notifications/+page.svelte
index 6eadf34..b817013 100644
--- a/frontend/src/routes/(authed)/notifications/+page.svelte
+++ b/frontend/src/routes/(authed)/notifications/+page.svelte
@@ -1,28 +1,76 @@
-
-
-
- ๐
-
-
-
+ // @ts-nocheck
+
+
+ import { goto } from "$app/navigation";
+
+ // Fleets data
+ const fleets = [
+ { user: 'Swipe', handle: '@user1', avatar: '๐' },
+ { user: 'feature', handle: '@user2', avatar: '๐' },
+ { user: 'feature', handle: '@user3', avatar: '๐คฉ' },
+ { user: 'feature', handle: '@user4', avatar: '๐ฅณ' },
+ ];
+
+ // Tweets data
+ const tweets = [
+ {
+ user: 'SvelteFan',
+ handle: '@svelte_dev',
+ avatar: '๐',
+ content: "Just discovered Svelte and it's amazing! #webdev",
+ likes: 42,
+ retweets: 12,
+ time: '2h'
+ },
+ {
+ user: 'WebDev',
+ handle: '@webdev',
+ avatar: '๐ป',
+ content: 'CSS grid is a game changer for layouts. Change my mind.',
+ likes: 89,
+ retweets: 24,
+ time: '4h'
+ },
+ ];
+
+
+ {card.title}
-{card.description}
-
-
-
-
+
+
+
+
+
-
+ {#each tweets as tweet}
+
- {/each}
+
+ {/each}
+
+
+
+ {tweet.avatar}
+
+
+
+
+
+
+ {tweet.user}
+ {tweet.handle}
+ ยท {tweet.time}
+
+
+ {tweet.content}
+ + +
+
+
+
+
+
-
Notifications
-
- {#each notifications as notification (notification.id)}
-
\ No newline at end of file
diff --git a/frontend/src/routes/(authed)/profile/+page.svelte b/frontend/src/routes/(authed)/profile/+page.svelte
index c293cb7..3caf42f 100644
--- a/frontend/src/routes/(authed)/profile/+page.svelte
+++ b/frontend/src/routes/(authed)/profile/+page.svelte
@@ -10,7 +10,29 @@
MessageCircle,
Instagram,
Twitter,
- Youtube
+ Youtube,
+ Flame,
+ Crown,
+ Languages,
+ Trophy,
+
+ Clock
+,
+
+ ListMusic
+,
+
+ Music
+,
+
+ Play
+,
+
+ RepeatIcon
+,
+
+ Shuffle
+
} from 'lucide-svelte';
import { fade } from 'svelte/transition';
@@ -52,7 +74,89 @@
comments: 15,
date: '2024-02-18'
}
- ]
+ ],
+ duolingo: {
+ streakDays: 145,
+ totalXP: 24680,
+ crown: 78,
+ languages: [
+ {
+ name: 'Spanish',
+ level: 'Advanced',
+ progress: 85,
+ xp: 12400,
+ streakWeeks: 12
+ },
+ {
+ name: 'Japanese',
+ level: 'Intermediate',
+ progress: 65,
+ xp: 8200,
+ streakWeeks: 8
+ },
+ {
+ name: 'French',
+ level: 'Beginner',
+ progress: 25,
+ xp: 4080,
+ streakWeeks: 4
+ }
+ ]
+ },
+ spotify: {
+ topArtists: [
+ { name: 'The Lumineers', genre: 'Folk Rock', imageUrl: '/api/placeholder/60/60' },
+ { name: 'Coldplay', genre: 'Alternative Rock', imageUrl: '/api/placeholder/60/60' },
+ { name: 'Ed Sheeran', genre: 'Pop', imageUrl: '/api/placeholder/60/60' }
+ ],
+ recentlyPlayed: [
+ {
+ title: 'Ho Hey',
+ artist: 'The Lumineers',
+ album: 'The Lumineers',
+ duration: '2:43',
+ imageUrl: '/api/placeholder/50/50'
+ },
+ {
+ title: 'Viva La Vida',
+ artist: 'Coldplay',
+ album: 'Viva la Vida',
+ duration: '3:45',
+ imageUrl: '/api/placeholder/50/50'
+ },
+ {
+ title: 'Shape of You',
+ artist: 'Ed Sheeran',
+ album: 'รท (Divide)',
+ duration: '3:53',
+ imageUrl: '/api/placeholder/50/50'
+ }
+ ],
+ playlists: [
+ {
+ name: 'Travel Vibes',
+ tracks: 45,
+ imageUrl: '/api/placeholder/80/80'
+ },
+ {
+ name: 'Workout Mix',
+ tracks: 32,
+ imageUrl: '/api/placeholder/80/80'
+ },
+ {
+ name: 'Chill Evening',
+ tracks: 28,
+ imageUrl: '/api/placeholder/80/80'
+ }
+ ],
+ currentlyPlaying: {
+ title: 'Ho Hey',
+ artist: 'The Lumineers',
+ album: 'The Lumineers',
+ progress: 65,
+ imageUrl: '/api/placeholder/60/60'
+ }
+ }
};
const toggleFollow = () => {
@@ -103,15 +207,49 @@
floating = !floating;
}, 3000);
}
+
+ const languageCards = document.querySelectorAll('.language-card') as any;
+
+ languageCards.forEach((card: any, index: any) => {
+ animate(card, { opacity: [0, 1], x: [20, 0] }, {
+ delay: 0.5 + index * 0.1,
+ duration: 0.6,
+ easing: 'easeOut'
+ } as any);
+ });
+
+ const spotifyCards = document.querySelectorAll('.spotify-card') as any;
+ const trackItems = document.querySelectorAll('.track-item') as any;
+
+ spotifyCards.forEach((card: any, index: any) => {
+ animate(card, { opacity: [0, 1], y: [20, 0] }, {
+ delay: 0.3 + index * 0.1,
+ duration: 0.6,
+ easing: 'easeOut'
+ } as any);
+ });
+
+ trackItems.forEach((item: any, index: any) => {
+ animate(item, { opacity: [0, 1], x: [-20, 0] }, {
+ delay: 0.4 + index * 0.1,
+ duration: 0.5,
+ easing: 'easeOut'
+ } as any);
+ });
});
+ let isPlaying = false;
+ const togglePlay = () => {
+ isPlaying = !isPlaying;
+ };
+
const formatDate = (dateString: string) => {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
};
-
-
- {/each}
+
+
+
-
-
-
- {#if !notification.read}
- New
- {/if}
- {notification.content}
-- {notification.timestamp} -
-
+
+
+
+
\ No newline at end of file
+
+ {#if notifications.length === 0}
+
+
+ {:else}
+ No new updates - your next adventure is waiting!
+
+ {#each notifications as notification (notification.timestamp)}
+
+ {/if}
+
+
+
+ {/each}
+
+
+
+ {#if notification.type === 'alert'}
+
+
+
+ {:else if notification.type === 'update'}
+
+
+ {:else if notification.type === 'friend'}
+
+
+ {:else}
+
+
+ {/if}
+
+
+
+
+ {#if !notification.read}
+
+ {/if}
+ {notification.message}
+{notification.timestamp}
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ Language Learning Journey
+
+
+
+
+
+
+
+
+
+
+
+ {user.duolingo.streakDays}
+Day Streak
+
+
+
+
+
+
+
+ {user.duolingo.totalXP}
+Total XP
+
+
+
+
+
+
+ {user.duolingo.crown}
+Crown Level
+
+ {#each user.duolingo.languages as language}
+
+
+
+ {/each}
+
+
+
+
+
+
+
+
+ {language.name}
+{language.level}
+
+
+ {language.xp} XP
+{language.streakWeeks} week streak
+
+
+
+
+
+
+
+
+ Music Profile
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#each user.spotify.topArtists as artist}
+
+
+ 
+
+ {/each}
+
+
+ {artist.name}
+{artist.genre}
+
+
+
+
+
+
+
+ {#each user.spotify.recentlyPlayed as track}
+
+
+ 
+
+ {/each}
+
+
+ {track.duration}
+ {track.title}
+{track.artist}
+
+
+
+
+
+
+
+ {#each user.spotify.playlists as playlist}
+
+
+ 
+
+ {/each}
+ {playlist.name}
+{playlist.tracks} tracks
+Upcoming Trips
@@ -260,4 +551,12 @@ .hover-scale:hover { transform: translateY(-2px); } + + .language-card { + transition: all 0.2s ease-in-out; + } + + .language-card:hover { + transform: translateY(-2px); + } diff --git a/frontend/src/routes/(authed)/search/+page.svelte b/frontend/src/routes/(authed)/search/+page.svelte index a6a95ed..063b6f2 100644 --- a/frontend/src/routes/(authed)/search/+page.svelte +++ b/frontend/src/routes/(authed)/search/+page.svelte @@ -55,7 +55,7 @@ } -
+
@@ -69,7 +69,7 @@
-
+
({ x: 0, y: 0 }, {
stiffness: 0.2,
damping: 0.7
});
- const calculateConnectionPath = (connection: Profile) => {
+ // Add proper return type
+ const calculateConnectionPath = (connection: Profile): string => {
const start = connection.location || { x: 500, y: 250 };
- const end = { x: window.innerWidth - 100, y: window.innerHeight - 100 };
+ // Store window dimensions to avoid repeated access
+ const windowWidth = window.innerWidth;
+ const windowHeight = window.innerHeight;
+ const end = { x: windowWidth - 100, y: windowHeight - 100 };
const controlPoint = {
x: (start.x + end.x) / 2,
y: Math.min(start.y, end.y) - 100
@@ -36,45 +42,53 @@
return `M ${start.x},${start.y} Q ${controlPoint.x},${controlPoint.y} ${end.x},${end.y}`;
};
- const handleAction = (action: 'skip' | 'decide' | 'add') => {
+ // Type the action parameter properly
+ const handleAction = (action: 'skip' | 'decide' | 'add'): void => {
if (stack.length === 0) return;
const profile = stack[currentIndex];
if (action === 'add') {
- connections = [...connections, { ...profile, location: { ...$dragCoords } }];
+ const draggedLocation = { x: $dragCoords.x, y: $dragCoords.y };
+ connections = [...connections, { ...profile, location: draggedLocation }];
const suitcase = document.querySelector('#suitcase');
const profileCard = document.querySelector(`#profile-${profile.id}`);
if (suitcase && profileCard) {
- const clone = profileCard.cloneNode(true) as HTMLElement;
- document.body.appendChild(clone);
-
- const start = profileCard.getBoundingClientRect();
- const end = suitcase.getBoundingClientRect();
-
- clone.style.position = 'fixed';
- clone.style.left = `${start.left}px`;
- clone.style.top = `${start.top}px`;
- clone.style.width = `${start.width}px`;
- clone.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
- clone.style.zIndex = '9999';
-
- requestAnimationFrame(() => {
- clone.style.transform = `translate(${end.left - start.left}px, ${end.top - start.top}px) scale(0.1) rotate(360deg)`;
- clone.style.opacity = '0';
- });
-
- setTimeout(() => clone.remove(), 500);
+ animateProfileToSuitcase(profileCard, suitcase);
}
}
+ // Remove the current profile and update the stack
stack = stack.filter((_, i) => i !== currentIndex);
currentIndex = Math.min(currentIndex, stack.length - 1);
};
- const startDrag = (event: MouseEvent, profile: Profile) => {
+ // Extract animation logic to a separate function
+ const animateProfileToSuitcase = (profileCard: Element, suitcase: Element): void => {
+ const clone = profileCard.cloneNode(true) as HTMLElement;
+ document.body.appendChild(clone);
+
+ const start = profileCard.getBoundingClientRect();
+ const end = suitcase.getBoundingClientRect();
+
+ clone.style.position = 'fixed';
+ clone.style.left = `${start.left}px`;
+ clone.style.top = `${start.top}px`;
+ clone.style.width = `${start.width}px`;
+ clone.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
+ clone.style.zIndex = '9999';
+
+ requestAnimationFrame(() => {
+ clone.style.transform = `translate(${end.left - start.left}px, ${end.top - start.top}px) scale(0.1) rotate(360deg)`;
+ clone.style.opacity = '0';
+ });
+
+ setTimeout(() => clone.remove(), 500);
+ };
+
+ const startDrag = (event: MouseEvent, profile: Profile): void => {
const element = event.currentTarget as HTMLElement;
const rect = element.getBoundingClientRect();
@@ -92,7 +106,7 @@
document.body.style.cursor = 'grabbing';
};
- function handleMouseMove(event: MouseEvent) {
+ function handleMouseMove(event: MouseEvent): void {
if (dragging) {
dragCoords.set({
x: event.clientX - dragStartOffset.x,
@@ -101,7 +115,7 @@
}
}
- function handleMouseUp() {
+ function handleMouseUp(): void {
if (dragging) {
const suitcase = document.querySelector('#suitcase');
if (suitcase) {
@@ -117,14 +131,14 @@
}
}
- function isOverlapping(rect1: DOMRect, rect2: DOMRect) {
+ function isOverlapping(rect1: DOMRect, rect2: DOMRect): boolean {
return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}
- function handleKeyDown(event: KeyboardEvent, profile: Profile) {
+ function handleKeyDown(event: KeyboardEvent, profile: Profile): void {
if (event.key === 'Enter' || event.key === ' ') {
const element = event.currentTarget as HTMLElement;
const rect = element.getBoundingClientRect();
@@ -135,15 +149,22 @@
}), profile);
}
}
+
+ // Add cleanup for window event listeners
+ import { onDestroy } from 'svelte';
+
+ onDestroy(() => {
+ document.body.style.cursor = '';
+ });
+