jonas/4Gewinnt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Claude/style homepage om t wo (#1)

Browse Source 
* Style homepage with centered title and polished buttons

- Split title into two lines with uppercase styling and yellow highlight
- Use Roboto font with light/bold weight contrast for visual hierarchy
- Center buttons in a vertical flex layout with consistent spacing
- Add elevation shadow and hover scale animation to buttons
- Improve letter-spacing and font sizing for readability

https://claude.ai/code/session_01N9z7ADBGmszE5ZoAbVEp4f

* changed ' to "

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: jhim <jhim@d-velop.de>
This commit is contained in:
Jonas
2026-02-13 08:25:34 +01:00
parent d39b06e3e9
commit 4dfabb2e1e
1 changed files with 81 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
GUI/src/Home.vue
+73 -18
View File
@@ -3,51 +3,106 @@ let buttons = [
{
name: "Lokaler Multiplayer",
icon: "mdi-account-switch",
color: "red"
color: "red",
},
{
name: "Lokal gegen Bot",
icon: "mdi-robot-angry-outline",
color: "green"
color: "green",
},
{
name: "Online Multiplayer",
icon: "mdi-web",
color: "blue"
}
color: "blue",
},
]
</script>
<template>
<v-container class="fill-height d-flex justify-center align-center flex-column" fluid>
<div class="compact-stack">
<h1 class="mb-0 text-center">Wähle deinen <br><span class="text-yellow">Spielmodus</span></h1>
<v-row justify="center" align="center" >
<v-col cols="12" class="text-center">
<div v-for="button of buttons" :key="button.name" class="py-1">
<v-btn :color="button.color" size="x-large" min-width="325" class="justify-start" rounded="xl">
<v-container class="fill-height d-flex justify-center align-center" fluid>
<div class="homepage-content">
<div class="title-section text-center">
<h1 class="main-title">Wähle deinen</h1>
<h1 class="main-title highlight-title">Spielmodus</h1>
</div>
<div class="button-section">
<v-btn
v-for="button of buttons"
:key="button.name"
:color="button.color"
size="x-large"
min-width="340"
rounded="xl"
class="mode-btn justify-start"
elevation="8"
>
<template v-slot:prepend>
<div class="d-flex justify-start" style="width: 30px;">
<v-icon :icon="button.icon"></v-icon>
<div class="d-flex justify-start" style="width: 32px">
<v-icon :icon="button.icon" size="24"></v-icon>
</div>
</template>
<span class="flex-grow-1 text-center">
<span class="flex-grow-1 text-center btn-label">
{{ button.name }}
</span>
</v-btn>
</div>
</v-col>
</v-row>
</div>
</v-container>
</template>
<style scoped>
.compact-stack {
.homepage-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 10vh;
gap: 8vh;
}
.title-section {
display: flex;
flex-direction: column;
align-items: center;
}
.main-title {
font-family: "Roboto", sans-serif;
font-size: 3rem;
font-weight: 300;
letter-spacing: 2px;
line-height: 1.2;
text-transform: uppercase;
}
.highlight-title {
font-weight: 700;
font-size: 3.5rem;
color: #fdd835;
letter-spacing: 4px;
}
.button-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
}
.mode-btn {
font-family: "Roboto", sans-serif;
font-weight: 500;
letter-spacing: 1px;
text-transform: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mode-btn:hover {
transform: scale(1.05);
}
.btn-label {
font-size: 1.05rem;
}
</style>