120 lines
3.6 KiB
Plaintext
120 lines
3.6 KiB
Plaintext
---
|
||
import '@/styles/globals.css';
|
||
import Layout from '../layouts/Layout.astro';
|
||
import { Button } from '@/components/ui/button';
|
||
|
||
import '../styles/locked-page.css';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Textarea } from '@/components/ui/textarea';
|
||
---
|
||
|
||
<Layout>
|
||
<main>
|
||
<form
|
||
class="flex flex-col gap-8"
|
||
id="sample-form"
|
||
enctype="multipart/form-data"
|
||
>
|
||
<div>
|
||
<h1
|
||
class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
|
||
>
|
||
Konulu Konum
|
||
</h1>
|
||
<p class="leading-7 [&:not(:first-child)]:mt-6">
|
||
3 basit adımda fotoğraflarınızı ve videolarınızı <b
|
||
>yalnızca belirli bir konumda</b
|
||
> açılacak şekilde kilitleyin:
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h2
|
||
class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
|
||
>
|
||
1. Fotoğraf Seçimi
|
||
</h2>
|
||
<p class="leading-7 [&:not(:first-child)]:mt-6">
|
||
Aşağıdaki butona basıp galerinizden bir fotoğraf seçin, seçtiğiniz
|
||
fotoğraf yalnızca belirli bir konumda açılabilecek bir hale
|
||
getirilecek.
|
||
</p>
|
||
<div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
|
||
<Input type="file" name="selected-photo" id="photo-selector" />
|
||
<p class="text-sm text-muted-foreground">
|
||
Galerinizden bir fotoğraf seçin.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h2
|
||
class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
|
||
>
|
||
2. Fotoğrafın Açılacağı Konum
|
||
</h2>
|
||
<p class="leading-7 [&:not(:first-child)]:mt-6">
|
||
Haritadan bir nokta seçin. Bağlantıyı gönderdiğiniz kişi bu konuma
|
||
gittiği zaman seçtiğiniz fotoğrafı görebilecek.
|
||
</p>
|
||
<div>
|
||
<div id="map" class="w-full h-[450px] rounded mt-4"></div>
|
||
<p class="text-xl mt-2">
|
||
<span class="font-semibold">Seçilen Konum:</span>
|
||
</p>
|
||
<p class="text-lg" id="coordinates">
|
||
Henüz konum seçmediniz, konum seçmek için haritadaki bir noktaya
|
||
basınız.
|
||
</p>
|
||
<p
|
||
class="text-lg text-muted-foreground mt-2"
|
||
id="location-selected-confirmation"
|
||
>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h2
|
||
class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
|
||
>
|
||
3. Fotoğraf Açıklaması
|
||
</h2>
|
||
<div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
|
||
<Textarea placeholder="Açıklamanızı buraya yazınız." name="desc" />
|
||
<p class="text-sm text-muted-foreground">
|
||
Bir açıklama girin, yüklediğiniz içeriğin üzerine bu metin
|
||
görünecek.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<Button className="w-full" type="submit" id="submit-button">
|
||
Bağlantıyı Oluştur
|
||
</Button>
|
||
</form>
|
||
</main>
|
||
<script src="../scripts/initSelectionMap.js"></script>
|
||
</Layout>
|
||
|
||
<script>
|
||
import type { PutBlobResult } from '@vercel/blob';
|
||
|
||
const handleSubmit = async (e: SubmitEvent) => {
|
||
e.preventDefault();
|
||
|
||
const formData = new FormData(e.target as HTMLFormElement);
|
||
|
||
const response = await fetch(`/create-url`, {
|
||
method: 'POST',
|
||
body: formData,
|
||
});
|
||
|
||
const newBlob = (await response.json()) as PutBlobResult;
|
||
|
||
console.log(newBlob);
|
||
};
|
||
|
||
document.getElementById('sample-form')!.onsubmit = handleSubmit;
|
||
</script>
|