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
+81 -26
View File
@@ -3,51 +3,106 @@ let buttons = [
{ {
name: "Lokaler Multiplayer", name: "Lokaler Multiplayer",
icon: "mdi-account-switch", icon: "mdi-account-switch",
color: "red" color: "red",
}, },
{ {
name: "Lokal gegen Bot", name: "Lokal gegen Bot",
icon: "mdi-robot-angry-outline", icon: "mdi-robot-angry-outline",
color: "green" color: "green",
}, },
{ {
name: "Online Multiplayer", name: "Online Multiplayer",
icon: "mdi-web", icon: "mdi-web",
color: "blue" color: "blue",
} },
] ]
</script> </script>
<template> <template>
<v-container class="fill-height d-flex justify-center align-center flex-column" fluid> <v-container class="fill-height d-flex justify-center align-center" fluid>
<div class="compact-stack"> <div class="homepage-content">
<h1 class="mb-0 text-center">Wähle deinen <br><span class="text-yellow">Spielmodus</span></h1> <div class="title-section text-center">
<v-row justify="center" align="center" > <h1 class="main-title">Wähle deinen</h1>
<v-col cols="12" class="text-center"> <h1 class="main-title highlight-title">Spielmodus</h1>
<div v-for="button of buttons" :key="button.name" class="py-1"> </div>
<v-btn :color="button.color" size="x-large" min-width="325" class="justify-start" rounded="xl">
<template v-slot:prepend>
<div class="d-flex justify-start" style="width: 30px;">
<v-icon :icon="button.icon"></v-icon>
</div>
</template>
<span class="flex-grow-1 text-center"> <div class="button-section">
{{ button.name }} <v-btn
</span> v-for="button of buttons"
</v-btn> :key="button.name"
</div> :color="button.color"
</v-col> size="x-large"
</v-row> min-width="340"
rounded="xl"
class="mode-btn justify-start"
elevation="8"
>
<template v-slot:prepend>
<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 btn-label">
{{ button.name }}
</span>
</v-btn>
</div>
</div> </div>
</v-container> </v-container>
</template> </template>
<style scoped> <style scoped>
.compact-stack { .homepage-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 10vh; gap: 8vh;
} }
</style>
.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>