From db6c421b47111c088f1e09af392ea0b2bf2f2235 Mon Sep 17 00:00:00 2001
From: Chaebean Yang <kazed0102@kaist.ac.kr>
Date: Sun, 1 Jun 2025 18:49:23 +0900
Subject: [PATCH] memory css finish

---
 src/lib/components/NewMemoryPopup.svelte | 343 +++++++++++++++++++++++
 src/routes/memories/+page.svelte         |  60 ++++
 2 files changed, 403 insertions(+)
 create mode 100644 src/lib/components/NewMemoryPopup.svelte
 create mode 100644 src/routes/memories/+page.svelte

diff --git a/src/lib/components/NewMemoryPopup.svelte b/src/lib/components/NewMemoryPopup.svelte
new file mode 100644
index 0000000..fa185db
--- /dev/null
+++ b/src/lib/components/NewMemoryPopup.svelte
@@ -0,0 +1,343 @@
+<script lang="ts">
+    import '../../app.css';
+    import Button from './Button.svelte';
+    import { onMount } from 'svelte';
+
+    export let showPopup = false;
+    export let locations = [];
+    export let onAddMemory = () => {};
+    export let onCancel = () => {};
+
+    let selectedLocation = '';
+    let customLocation = '';
+    let images = [];
+    let dragActive = false;
+
+    let startDate = '';
+    let endDate = '';
+
+    function handleFiles(files) {
+        for (const file of files) {
+            if (file.type.startsWith('image/')) {
+                images = [...images, file];
+            }
+        }
+    }
+
+    function handleDrop(event) {
+        event.preventDefault();
+        dragActive = false;
+        handleFiles(event.dataTransfer.files);
+    }
+
+    function handleDragOver(event) {
+        event.preventDefault();
+        dragActive = true;
+    }
+
+    function handleDragLeave(event) {
+        event.preventDefault();
+        dragActive = false;
+    }
+
+    function handleInputChange(event) {
+        if (event.target.files) {
+            handleFiles(event.target.files);
+        }
+    }
+
+    function handleCancelClick() {
+        onCancel();
+        reset();
+    }
+
+    function reset() {
+        showPopup = false;
+        selectedLocation = '';
+        customLocation = '';
+        images = [];
+        startDate = '';
+        endDate = '';
+        showLocationError = false;
+        showImageError = false;
+    }
+
+    function isCustomLocation() {
+        return selectedLocation === 'custom';
+    }
+
+    let showLocationError = false;
+    let showImageError = false;
+
+    function handleAddMemory() {
+        showLocationError = selectedLocation === '' || (selectedLocation === 'custom' && customLocation.trim() === '');
+        showImageError = images.length === 0;
+
+        if (showLocationError || showImageError) return;
+
+        const finalLocation = selectedLocation === 'custom' ? customLocation : selectedLocation;
+        onAddMemory({ location: finalLocation, images, startDate, endDate });
+        reset();
+    }
+</script>
+
+{#if showPopup}
+    <div class="overlay">
+        <div class="popup {showLocationError || showImageError ? 'error' : ''}">
+            <h1>Add new memory</h1>
+
+            <div class="input-form">
+                <label for="location">Load from past trips</label>
+                <select id="location" bind:value={selectedLocation}>
+                    <option value="" disabled>Select location</option>
+                    {#each locations as loc}
+                        <option value={loc}>{loc}</option>
+                    {/each}
+                    <option value="custom" class="custom-option">+ Enter custom trip</option>
+                </select>
+            </div>
+
+            {#if isCustomLocation()}
+                <div class="input-form">
+                    <label for="custom-location">Custom Location</label>
+                    <input 
+                        type="text" 
+                        id="custom-location"
+                        bind:value={customLocation}
+                        placeholder="Type your location"
+                    />
+                    {#if showLocationError}
+                        <p class="error-message">Please enter a location.</p>
+                    {/if}
+                </div>
+                <div class="date-group">
+                    <div class="input-form">
+                        <label for="start-date">Start Date</label>
+                        <input 
+                            type="date" 
+                            id="start-date" 
+                            bind:value={startDate}
+                        />
+                    </div>
+
+                    <div class="input-form">
+                        <label for="end-date">End Date</label>
+                        <input 
+                            type="date" 
+                            id="end-date" 
+                            bind:value={endDate}
+                        />
+                    </div>
+                </div>
+            {:else if showLocationError}
+                <p class="error-message">Please enter a location.</p>
+            {/if}
+
+            <div class="input-form">
+                <label>Upload images</label>
+                <div class="drop-area {dragActive ? 'active' : ''}"
+                    on:drop={handleDrop}
+                    on:dragover={handleDragOver}
+                    on:dragleave={handleDragLeave}
+                >
+                    <input
+                        type="file"
+                        accept="image/*"
+                        multiple
+                        on:change={handleInputChange}
+                        style="display: none;"
+                        id="fileInput"
+                    />
+                    <div class="drop-label" on:click={() => document.getElementById('fileInput')?.click()}>
+                        {#if images.length === 0}
+                            <span>Drop image here</span>
+                        {:else}
+                            <div class="preview-list">
+                                {#each images as img}
+                                    <div class="preview-item">
+                                        <img src={URL.createObjectURL(img)} alt={img.name} />
+                                        <p>{img.name}</p>
+                                    </div>
+                                {/each}
+                            </div>
+                        {/if}
+                    </div>
+                </div>
+                {#if showImageError}
+                    <p class="error-message">Please upload at least one image.</p>
+                {/if}
+            </div>
+
+            <div class="button-group">
+                <Button text="Cancel" type="gray" onClick={handleCancelClick} />
+                <Button text="Add a new memory" type="orange" 
+                    onClick={handleAddMemory} 
+                    disabled={showLocationError || showImageError}/>
+            </div>
+        </div>
+    </div>
+{/if}
+
+
+<style>
+    *, *::before, *::after {
+        box-sizing: border-box;
+    }
+
+    .overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.3);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+    }
+
+    .popup {
+        background: var(--gray-900);
+        padding: 2rem;
+        border-radius: 20px;
+        width: 80%;
+        max-width: 560px;
+        box-shadow: 0 0px 20px rgba(0, 0, 0, 0.1);
+        font-family: 'Inter', sans-serif;
+    }
+
+    .popup.error {
+        border: 2px solid var(--memory-500);
+    }
+
+    .error-message {
+        color: var(--memory-500);
+        font-size: 0.9rem;
+        margin-top: 0.5rem;
+        margin-bottom: 1rem;
+    }
+
+    .popup h1 {
+        margin: 0 0 2rem 0;
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--white);
+    }
+
+    .input-form {
+        margin-bottom: 1.5rem;
+    }
+
+    .input-form label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+        color: var(--gray-200);
+    }
+
+    .input-form input {
+        width: 100%;
+        padding: 0.75rem;
+        border-radius: 8px;
+        font-size: 1rem;
+        background: var(--gray-900);
+        color: var(--white);
+        border: 1px solid var(--gray-200);
+        outline: none; 
+    }
+
+    .input-form select {
+        width: 100%;
+        padding: 0.75rem 2.5rem 0.75rem 0.75rem;
+        border-radius: 8px;
+        font-size: 1rem;
+        background: var(--gray-900);
+        color: var(--white);
+        border: 1px solid var(--gray-200);
+        outline: none;
+        appearance: none;
+    }
+
+    input:focus,
+    select:focus {
+        border-color: var(--memory-500);
+        outline: none;
+    }
+
+    .date-group {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .date-group .input-form {
+        flex: 1;
+        margin-bottom: 0;
+    }
+
+    .preview-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        max-height: 200px;
+        overflow-y: auto;
+        padding-right: 0.5rem;
+    }
+
+    .preview-item {
+        width: 80px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .preview-item img {
+        width: 100%;
+        border-radius: 6px;
+        object-fit: cover;
+    }
+
+    .preview-item p {
+        font-size: 0.75rem;
+        text-align: center;
+        margin-top: 0.3rem;
+        color: var(--gray-400);
+    }
+
+    .drop-area {
+        width: 100%;
+        min-height: 120px;
+        background: var(--gray-900);
+        border: 1px solid var(--gray-200);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--white);
+        transition: border-color 0.2s;
+        cursor: pointer;
+    }
+
+    .drop-area.active {
+        border-color: var(--memory-500);
+        color: var(--memory-500);
+    }
+
+    .drop-label {
+        padding: 2rem 1rem;
+        text-align: center;
+        width: 100%;
+        cursor: pointer;
+    }
+
+    option.custom-option {
+        color: var(--memory-500);
+    }
+
+    .button-group {
+        display: flex;
+        gap: 1rem;
+        margin-top: 2rem;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/memories/+page.svelte b/src/routes/memories/+page.svelte
new file mode 100644
index 0000000..e764fb7
--- /dev/null
+++ b/src/routes/memories/+page.svelte
@@ -0,0 +1,60 @@
+<script>
+ import '/src/app.css';
+  import { goto } from '$app/navigation';
+  import WorldMap from '$lib/components/WorldMap.svelte';
+  import Button from '$lib/components/Button.svelte';
+  import NewMemoryPopup from '$lib/components/NewMemoryPopup.svelte';
+  import Nav from '$lib/components/Nav.svelte';
+  import { onMount } from 'svelte';
+
+  let showNewMemoryPopup = false;
+  
+  const GOOGLE_PLACES_API_KEY = import.meta.env.VITE_GOOGLE_PLACES_API_KEY;
+
+  onMount(() => {
+    document.documentElement.classList.add('dark');
+    return () => document.documentElement.classList.remove('dark');
+});
+  
+  function handleNewMemory() {
+      showNewMemoryPopup = true;
+  }
+</script>
+
+<main>
+  <Nav activeTab="Memory" darkMode={true} />
+
+  <div class="map-container">
+      <WorldMap />
+  </div>
+
+  <div class="floating-button">
+      <Button text="+ Add a new memory" type="memory" onClick={handleNewMemory} />
+  </div>
+
+  <NewMemoryPopup bind:showPopup={showNewMemoryPopup} fromPage="memory" />
+
+</main>
+
+<style>
+  main {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      background-color: var(--gray-50);
+      font-family: 'Inter', sans-serif;
+  }
+
+  .map-container {
+      flex: 1;
+      position: relative;
+      background-color: var(--gray-50);
+  }
+
+  .floating-button {
+      position: fixed;
+      bottom: 2rem;
+      right: 2rem;
+      z-index: 10;
+}
+</style>
\ No newline at end of file