init: created frontend

src/views/HomeView.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const url = ref<string>('')
+const shortUrl = ref<string>('')
+
+const handleShorten = (): void => {
+  // Logik hier einfügen
+  console.log('Shortening:', url.value)
+}
+
+const handleCopy = async (): Promise<void> => {
+  if (shortUrl.value) {
+    await navigator.clipboard.writeText(shortUrl.value)
+    alert('Copied to clipboard!')
+  }
+}
+</script>
+
+<template>
+  <div class="page-layout">
+    <div class="content-wrapper">
+      <h1 class="logo">bolt-link</h1>
+
+      <div class="panel">
+        <div class="panel-header">
+          <span class="icon pi pi-link"></span>
+          <h2>Shorten your link</h2>
+        </div>
+
+        <div class="input-group">
+          <div class="row">
+            <input
+              v-model="url"
+              type="text"
+              placeholder="Paste your URL here..."
+              class="text-input"
+            />
+            <button @click="handleShorten" class="btn-primary">
+              Shorten <span class="arrow pi pi-arrow-right"></span>
+            </button>
+          </div>
+
+          <div class="row">
+            <input
+              v-model="shortUrl"
+              type="text"
+              readonly
+              placeholder="Short URL appears here..."
+              class="text-input readonly"
+            />
+            <button @click="handleCopy" class="btn-primary">
+              Copy <span class="copy-icon pi pi-copy"></span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Grundlayout: Zentriert alles auf der Seite */
+.page-layout {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  width: 100%;
+  background-color: #05080f; /* Sehr dunkles Blau/Schwarz */
+  margin: 0;
+  font-family:
+    'Inter',
+    -apple-system,
+    sans-serif;
+}
+
+/* Container für Logo + Panel */
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2.5rem;
+  width: 100%;
+  max-width: 550px;
+  padding: 20px;
+}
+
+/* Logo Styling mit Glow */
+.logo {
+  color: var(--primary-color);
+  font-size: 6rem;
+  font-weight: 900;
+  margin: 0;
+  letter-spacing: -2px;
+  text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
+}
+
+/* Das Panel */
+.panel {
+  background-color: var(--panel-color);
+  border: 1px solid var(--border-color);
+  border-radius: 1.5rem;
+  padding: 2.5rem;
+  width: 100%;
+  filter: drop-shadow(0 0 0.75rem var(--primary-color));
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 1.5rem;
+}
+
+.panel-header h2 {
+  color: var(--text-light);
+  font-size: 1.25rem;
+  margin: 0;
+  font-weight: 600;
+}
+
+.icon {
+  font-size: 1.25rem;
+}
+
+/* Input & Button Rows */
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.row {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.text-input {
+  flex: 1;
+  background-color: var(--input-color);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 12px 16px;
+  color: var(--text-light);
+  font-size: 0.9rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.text-input:focus {
+  border-color: var(--primary-color);
+}
+
+.text-input.readonly {
+  color: #64748b;
+  cursor: default;
+}
+
+/* Button Styling */
+.btn-primary {
+  background-color: var(--primary-color);
+  color: var(--text-color-dark);
+  border: none;
+  border-radius: 8px;
+  padding: 0 20px;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  white-space: nowrap;
+  transition:
+    transform 0.1s,
+    background-color 0.2s;
+    width: 7rem;
+}
+
+.btn-primary:hover {
+  background-color: #0fe0ac;
+}
+
+.btn-primary:active {
+  transform: scale(0.98);
+}
+.pi-arrow-right .pi-copy {
+  font-size: 1rem;
+}
+
+.pi-link {
+  font-size: 2rem;
+  color: var(--primary-color);
+}
+</style>