FIX: cleaned up comments
This commit is contained in:
@@ -9,6 +9,7 @@ import { RouterView } from 'vue-router'
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
/* base measurements for any screen size */
|
||||||
.content-container {
|
.content-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -1,11 +1,13 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
// Variables for shortening logic
|
||||||
const url = ref<string>('')
|
const url = ref<string>('')
|
||||||
const shortUrl = ref<string>('')
|
const shortUrl = ref<string>('')
|
||||||
|
|
||||||
|
|
||||||
|
// Logic for shortening needs to be added here
|
||||||
const handleShorten = (): void => {
|
const handleShorten = (): void => {
|
||||||
// Logik hier einfügen
|
|
||||||
console.log('Shortening:', url.value)
|
console.log('Shortening:', url.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -17,6 +19,7 @@ const handleCopy = async (): Promise<void> => {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page-layout">
|
<div class="page-layout">
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
@@ -49,6 +52,7 @@ const handleCopy = async (): Promise<void> => {
|
|||||||
placeholder="Short URL appears here..."
|
placeholder="Short URL appears here..."
|
||||||
class="text-input readonly"
|
class="text-input readonly"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<button @click="handleCopy" class="btn-primary">
|
<button @click="handleCopy" class="btn-primary">
|
||||||
Copy <span class="copy-icon pi pi-copy"></span>
|
Copy <span class="copy-icon pi pi-copy"></span>
|
||||||
</button>
|
</button>
|
||||||
@@ -60,14 +64,14 @@ const handleCopy = async (): Promise<void> => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Grundlayout: Zentriert alles auf der Seite */
|
/* Base centering layout */
|
||||||
.page-layout {
|
.page-layout {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #05080f; /* Sehr dunkles Blau/Schwarz */
|
background-color: #05080f;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family:
|
font-family:
|
||||||
'Inter',
|
'Inter',
|
||||||
@@ -75,7 +79,7 @@ const handleCopy = async (): Promise<void> => {
|
|||||||
sans-serif;
|
sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Container für Logo + Panel */
|
/* Container for Logo + Panel */
|
||||||
.content-wrapper {
|
.content-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -86,7 +90,7 @@ const handleCopy = async (): Promise<void> => {
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logo Styling mit Glow */
|
/* Logo Styling */
|
||||||
.logo {
|
.logo {
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
font-size: 6rem;
|
font-size: 6rem;
|
||||||
@@ -96,7 +100,7 @@ const handleCopy = async (): Promise<void> => {
|
|||||||
text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
|
text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Das Panel */
|
/* Panel */
|
||||||
.panel {
|
.panel {
|
||||||
background-color: var(--panel-color);
|
background-color: var(--panel-color);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
|
|||||||
Reference in New Issue
Block a user