Frontend/src/views/HomeView.vue

<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: 1rem;
  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>