Initial Commit

2025-07-08 05:08:10 +01:00
commit 7e445551af
28 changed files with 1872 additions and 0 deletions
@@ -0,0 +1,105 @@
+<template>
+  <section class="home">
+    <h1>Utility App for TTRPGs</h1>
+    <p>Explore useful tools to enhance your tabletop RPG experience:</p>
+    <ul class="tools-list">
+      <li><router-link to="/name-generator">Name Generator</router-link></li>
+      <li>
+        <router-link to="/attribute-calculator"
+          >Attribute Calculator</router-link
+        >
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script setup>
+// Home page with links to utilities
+</script>
+
+<style scoped>
+.home {
+  text-align: center;
+  padding: var(--spacing-2xl) 0;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.home h1 {
+  margin-bottom: var(--spacing-md);
+}
+
+.home p {
+  color: var(--color-text-muted);
+  font-size: 1.1rem;
+  margin-bottom: var(--spacing-2xl);
+  line-height: 1.6;
+}
+
+.tools-list {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--spacing-lg);
+  margin-top: var(--spacing-xl);
+}
+
+.tools-list li {
+  transform: translateY(0);
+  transition: transform 0.2s ease;
+}
+
+.tools-list li:hover {
+  transform: translateY(-2px);
+}
+
+.tools-list a {
+  display: block;
+  font-size: 1.1rem;
+  color: var(--color-heading);
+  background: var(--color-card);
+  border: 1px solid var(--color-card-border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl);
+  text-decoration: none;
+  font-weight: 600;
+  box-shadow: var(--shadow-md);
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.tools-list a::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 2px;
+  background: var(--color-accent);
+  transition: left 0.3s ease;
+}
+
+.tools-list a:hover::before {
+  left: 0;
+}
+
+.tools-list a:hover {
+  background: var(--color-background-mute);
+  border-color: var(--color-accent);
+  box-shadow: var(--shadow-lg);
+  color: var(--color-accent);
+}
+
+@media (max-width: 768px) {
+  .tools-list {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-md);
+  }
+
+  .tools-list a {
+    padding: var(--spacing-lg);
+  }
+}
+</style>