Initial Commit
This commit is contained in:
+22
@@ -0,0 +1,22 @@
|
||||
<script setup>
|
||||
// App entry with router-view
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="nav">
|
||||
<router-link to="/">Home</router-link>
|
||||
<router-link to="/name-generator">Name Generator</router-link>
|
||||
<router-link to="/attribute-calculator">Attribute Calculator</router-link>
|
||||
</nav>
|
||||
<main>
|
||||
<router-view />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,224 @@
|
||||
/* Professional minimalist dark theme */
|
||||
:root {
|
||||
--color-background: #0f1419;
|
||||
--color-background-soft: #1a1f26;
|
||||
--color-background-mute: #1e242c;
|
||||
--color-card: #1a1f26;
|
||||
--color-card-border: #252b35;
|
||||
--color-border: #2e3440;
|
||||
--color-border-hover: #3d4450;
|
||||
--color-heading: #ffffff;
|
||||
--color-text: #d8dee9;
|
||||
--color-text-muted: #a8b2c1;
|
||||
--color-accent: #5e81ac;
|
||||
--color-accent-hover: #4c6b91;
|
||||
--color-accent-bg: rgba(94, 129, 172, 0.1);
|
||||
--color-success: #a3be8c;
|
||||
--color-warning: #ebcb8b;
|
||||
--color-error: #bf616a;
|
||||
--radius-sm: 0.5rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
--shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.2);
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 0.75rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-xl) var(--spacing-lg);
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1 {
|
||||
color: var(--color-heading);
|
||||
font-weight: 700;
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: -0.025em;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--color-heading);
|
||||
font-weight: 600;
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
color: var(--color-heading);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
nav.nav {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-card-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-sm);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
nav.nav a {
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
nav.nav a.router-link-exact-active {
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
nav.nav a:hover:not(.router-link-exact-active) {
|
||||
background: var(--color-background-mute);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Form Elements */
|
||||
input[type="number"],
|
||||
input[type="text"],
|
||||
select {
|
||||
background: var(--color-background-soft);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
font-size: 0.95rem;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="number"]:focus,
|
||||
input[type="text"]:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 3px var(--color-accent-bg);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
accent-color: var(--color-accent);
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--color-accent-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-background-soft);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-border-hover);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
#app {
|
||||
padding: var(--spacing-lg) var(--spacing-md);
|
||||
}
|
||||
|
||||
nav.nav {
|
||||
gap: 0;
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
|
||||
nav.nav a {
|
||||
font-size: 0.85rem;
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#app {
|
||||
padding: var(--spacing-md) var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
@@ -0,0 +1,20 @@
|
||||
@import "./base.css";
|
||||
|
||||
/* Main app container override for professional layout */
|
||||
#app {
|
||||
background: var(--color-background);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Professional link styling */
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-accent-hover);
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
.attribute-calculator {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-card-border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.attribute-calculator h2 {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.inputs label {
|
||||
color: var(--color-text);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.attribute-group {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: var(--spacing-sm);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.attribute-group label {
|
||||
color: var(--color-text);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.attribute-group input[type="number"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.inputs .switch {
|
||||
display: flex;
|
||||
background: var(--color-background-soft);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 2px;
|
||||
width: fit-content;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.inputs .switch-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: calc(var(--radius-sm) - 2px);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
min-width: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inputs .switch-button:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-background-mute);
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.inputs .switch-button.active {
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.inputs .switch-button.active:hover {
|
||||
background: var(--color-accent-hover);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.results {
|
||||
background: var(--color-background-soft);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-xl);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.results p {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
padding: var(--spacing-md);
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-card-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-accent);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.results p:first-child {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.results p:nth-child(2) {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.results p:last-child {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.attribute-calculator {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.inputs {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.results {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="attribute-calculator">
|
||||
<h2>Attribute Calculator</h2>
|
||||
<div class="inputs">
|
||||
<label>
|
||||
Fortitude:
|
||||
<input type="number" min="0" v-model.number="fortitude" />
|
||||
</label>
|
||||
<label>
|
||||
Strength:
|
||||
<input type="number" min="0" v-model.number="strength" />
|
||||
</label>
|
||||
<label>
|
||||
Dexterity:
|
||||
<input type="number" min="0" v-model.number="dexterity" />
|
||||
</label>
|
||||
<div class="attribute-group">
|
||||
<label>Dodge:</label>
|
||||
<label>Trained:</label>
|
||||
<input type="number" min="0" v-model.number="dodge" />
|
||||
<div class="switch">
|
||||
<button
|
||||
type="button"
|
||||
class="switch-button"
|
||||
:class="{ active: !dodgeTrained }"
|
||||
@click="dodgeTrained = false"
|
||||
:title="
|
||||
dodgeTrained
|
||||
? 'Click to mark as untrained'
|
||||
: 'Currently untrained'
|
||||
"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="switch-button"
|
||||
:class="{ active: dodgeTrained }"
|
||||
@click="dodgeTrained = true"
|
||||
:title="
|
||||
!dodgeTrained ? 'Click to mark as trained' : 'Currently trained'
|
||||
"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attribute-group">
|
||||
<label>Stamina:</label>
|
||||
<label>Trained:</label>
|
||||
<input type="number" min="0" v-model.number="stamina" />
|
||||
<div class="switch">
|
||||
<button
|
||||
type="button"
|
||||
class="switch-button"
|
||||
:class="{ active: !staminaTrained }"
|
||||
@click="staminaTrained = false"
|
||||
:title="
|
||||
staminaTrained
|
||||
? 'Click to mark as untrained'
|
||||
: 'Currently untrained'
|
||||
"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="switch-button"
|
||||
:class="{ active: staminaTrained }"
|
||||
@click="staminaTrained = true"
|
||||
:title="
|
||||
!staminaTrained ? 'Click to mark as trained' : 'Currently trained'
|
||||
"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="results">
|
||||
<p>HP: {{ hp }}</p>
|
||||
<p>Defence: {{ defence }}</p>
|
||||
<p>Sangue: {{ sangue }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
const fortitude = ref(0);
|
||||
const strength = ref(0);
|
||||
const dexterity = ref(0);
|
||||
const dodge = ref(0);
|
||||
const stamina = ref(0);
|
||||
const dodgeTrained = ref(false);
|
||||
const staminaTrained = ref(false);
|
||||
|
||||
const hp = computed(() => 10 + 5 * fortitude.value + strength.value);
|
||||
const defence = computed(() => {
|
||||
let val = 8 + dexterity.value;
|
||||
if (dodgeTrained.value) {
|
||||
val += dodge.value;
|
||||
}
|
||||
return val;
|
||||
});
|
||||
const sangue = computed(() => {
|
||||
let val = 14 + fortitude.value;
|
||||
if (staminaTrained.value) {
|
||||
val += stamina.value;
|
||||
}
|
||||
return val;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped src="./AttributeCalculator.css"></style>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
msg: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greetings">
|
||||
<h1 class="green">{{ msg }}</h1>
|
||||
<h3>
|
||||
You’ve successfully created a project with
|
||||
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2.6rem;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,208 @@
|
||||
.name-generator {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-card-border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.name-generator h2 {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.controls label {
|
||||
color: var(--color-text);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.controls input[type="checkbox"] {
|
||||
width: auto;
|
||||
margin-right: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.controls label:has(input[type="checkbox"]) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button.button-main {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
margin: 0 auto var(--spacing-xl);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.results {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.results li {
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
background: var(--color-background-soft);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.results li:hover {
|
||||
background: var(--color-background-mute);
|
||||
border-color: var(--color-accent);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.name-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.name-item:hover .copy-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.name-item:hover .copy-icon {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.name-item:active {
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.name-item:active .copy-icon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: var(--spacing-xl);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
font-weight: 500;
|
||||
z-index: 1000;
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.results li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.name-type-switch {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
grid-column: 1 / -1;
|
||||
justify-self: start;
|
||||
max-width: 280px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
color: var(--color-text);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.switch-container {
|
||||
display: flex;
|
||||
background: var(--color-background-soft);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 3px;
|
||||
width: fit-content;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.switch-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: calc(var(--radius-md) - 3px);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
/*white-space: nowrap;*/
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
/*flex: 1;*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.switch-button:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-background-mute);
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.switch-button.active {
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.switch-button.active:hover {
|
||||
background: var(--color-accent-hover);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.name-generator {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.controls {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<div class="name-generator">
|
||||
<h2>Name Generator</h2>
|
||||
<div class="controls">
|
||||
<div class="name-type-switch">
|
||||
<span class="switch-label">Name Type:</span>
|
||||
<div class="switch-container">
|
||||
<button
|
||||
type="button"
|
||||
class="switch-button"
|
||||
:class="{ active: !modern }"
|
||||
@click="modern = false"
|
||||
>
|
||||
Fantasy
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="switch-button button-switch"
|
||||
:class="{ active: modern }"
|
||||
@click="modern = true"
|
||||
>
|
||||
Modern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<label v-if="!modern">
|
||||
Race:
|
||||
<select v-model="race">
|
||||
<option v-for="r in races" :key="r.value" :value="r.value">
|
||||
{{ r.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Gender:
|
||||
<select v-model="gender">
|
||||
<option value="male">Male</option>
|
||||
<option value="female">Female</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Count:
|
||||
<select v-model="count">
|
||||
<option :value="1">1 name</option>
|
||||
<option :value="3">3 names</option>
|
||||
<option :value="5">5 names</option>
|
||||
<option :value="8">8 names</option>
|
||||
<option :value="10">10 names</option>
|
||||
<option :value="15">15 names</option>
|
||||
<option :value="20">20 names</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<button class="button-main" @click="generate">Generate</button>
|
||||
<ul class="results">
|
||||
<li
|
||||
v-for="name in fullNames"
|
||||
:key="name"
|
||||
@click="copyToClipboard(name)"
|
||||
class="name-item"
|
||||
:title="'Click to copy: ' + name"
|
||||
>
|
||||
{{ name }}
|
||||
<svg
|
||||
class="copy-icon"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="9"
|
||||
y="9"
|
||||
width="13"
|
||||
height="13"
|
||||
rx="2"
|
||||
ry="2"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div v-if="showToast" class="toast">
|
||||
{{ toastMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const modern = ref(false);
|
||||
const races = [
|
||||
{ label: "Dragonborn", value: "dragonborn" },
|
||||
{ label: "Dwarf", value: "dwarf" },
|
||||
{ label: "Elf", value: "elf" },
|
||||
{ label: "Gnome", value: "gnome" },
|
||||
{ label: "Goblin", value: "goblin" },
|
||||
{ label: "Half-Elf", value: "half-elf" },
|
||||
{ label: "Half-Orc", value: "half-orc" },
|
||||
{ label: "Halfling", value: "halfling" },
|
||||
{ label: "Human", value: "human" },
|
||||
{ label: "Orc", value: "orc" },
|
||||
{ label: "Tiefling", value: "tiefling" },
|
||||
{ label: "Troll", value: "troll" },
|
||||
];
|
||||
|
||||
// Modern name arrays
|
||||
const modernMaleNames = [
|
||||
"James",
|
||||
"John",
|
||||
"Robert",
|
||||
"Michael",
|
||||
"William",
|
||||
"David",
|
||||
"Richard",
|
||||
"Charles",
|
||||
"Joseph",
|
||||
"Thomas",
|
||||
"Christopher",
|
||||
"Daniel",
|
||||
"Paul",
|
||||
"Mark",
|
||||
"Donald",
|
||||
"Steven",
|
||||
"Andrew",
|
||||
"Kenneth",
|
||||
"Joshua",
|
||||
"Kevin",
|
||||
"Brian",
|
||||
"George",
|
||||
"Timothy",
|
||||
"Ronald",
|
||||
"Jason",
|
||||
"Edward",
|
||||
"Jeffrey",
|
||||
"Ryan",
|
||||
"Jacob",
|
||||
"Gary",
|
||||
"Nicholas",
|
||||
"Eric",
|
||||
"Jonathan",
|
||||
"Stephen",
|
||||
"Larry",
|
||||
"Justin",
|
||||
"Scott",
|
||||
"Brandon",
|
||||
"Benjamin",
|
||||
"Samuel",
|
||||
];
|
||||
|
||||
const modernFemaleNames = [
|
||||
"Mary",
|
||||
"Patricia",
|
||||
"Jennifer",
|
||||
"Linda",
|
||||
"Elizabeth",
|
||||
"Barbara",
|
||||
"Susan",
|
||||
"Jessica",
|
||||
"Sarah",
|
||||
"Karen",
|
||||
"Nancy",
|
||||
"Lisa",
|
||||
"Betty",
|
||||
"Helen",
|
||||
"Sandra",
|
||||
"Donna",
|
||||
"Carol",
|
||||
"Ruth",
|
||||
"Sharon",
|
||||
"Michelle",
|
||||
"Laura",
|
||||
"Sarah",
|
||||
"Kimberly",
|
||||
"Deborah",
|
||||
"Dorothy",
|
||||
"Lisa",
|
||||
"Nancy",
|
||||
"Karen",
|
||||
"Betty",
|
||||
"Helen",
|
||||
"Sandra",
|
||||
"Donna",
|
||||
"Carol",
|
||||
"Ruth",
|
||||
"Sharon",
|
||||
"Michelle",
|
||||
"Laura",
|
||||
"Amy",
|
||||
"Angela",
|
||||
"Brenda",
|
||||
];
|
||||
|
||||
const modernLastNames = [
|
||||
"Smith",
|
||||
"Johnson",
|
||||
"Williams",
|
||||
"Brown",
|
||||
"Jones",
|
||||
"Garcia",
|
||||
"Miller",
|
||||
"Davis",
|
||||
"Rodriguez",
|
||||
"Martinez",
|
||||
"Hernandez",
|
||||
"Lopez",
|
||||
"Gonzalez",
|
||||
"Wilson",
|
||||
"Anderson",
|
||||
"Thomas",
|
||||
"Taylor",
|
||||
"Moore",
|
||||
"Jackson",
|
||||
"Martin",
|
||||
"Lee",
|
||||
"Perez",
|
||||
"Thompson",
|
||||
"White",
|
||||
"Harris",
|
||||
"Sanchez",
|
||||
"Clark",
|
||||
"Ramirez",
|
||||
"Lewis",
|
||||
"Robinson",
|
||||
"Walker",
|
||||
"Young",
|
||||
"Allen",
|
||||
"King",
|
||||
"Wright",
|
||||
"Scott",
|
||||
"Torres",
|
||||
"Nguyen",
|
||||
"Hill",
|
||||
"Flores",
|
||||
"Green",
|
||||
"Adams",
|
||||
"Nelson",
|
||||
"Baker",
|
||||
"Hall",
|
||||
"Rivera",
|
||||
"Campbell",
|
||||
"Mitchell",
|
||||
"Carter",
|
||||
"Roberts",
|
||||
];
|
||||
|
||||
const race = ref(races[0].value);
|
||||
const gender = ref("male");
|
||||
const count = ref(5);
|
||||
const fullNames = ref([]);
|
||||
const showToast = ref(false);
|
||||
const toastMessage = ref("");
|
||||
|
||||
function getRandomName(array) {
|
||||
return array[Math.floor(Math.random() * array.length)];
|
||||
}
|
||||
|
||||
function generateModernNames() {
|
||||
const names = [];
|
||||
const firstNames =
|
||||
gender.value === "male" ? modernMaleNames : modernFemaleNames;
|
||||
|
||||
for (let i = 0; i < count.value; i++) {
|
||||
const firstName = getRandomName(firstNames);
|
||||
const lastName = getRandomName(modernLastNames);
|
||||
names.push(`${firstName} ${lastName}`);
|
||||
}
|
||||
|
||||
return names;
|
||||
}
|
||||
|
||||
async function generate() {
|
||||
fullNames.value = [];
|
||||
|
||||
if (modern.value) {
|
||||
// Generate modern names locally
|
||||
fullNames.value = generateModernNames();
|
||||
} else {
|
||||
// Use API for fantasy names
|
||||
const selectedRace = race.value;
|
||||
const firstUrl = `https://names.ironarachne.com/race/${selectedRace}/${gender.value}/${count.value}`;
|
||||
const familyUrl = `https://names.ironarachne.com/race/${selectedRace}/family/${count.value}`;
|
||||
try {
|
||||
const [firstRes, familyRes] = await Promise.all([
|
||||
fetch(firstUrl),
|
||||
fetch(familyUrl),
|
||||
]);
|
||||
const firstData = await firstRes.json();
|
||||
const familyData = await familyRes.json();
|
||||
fullNames.value = firstData.names.map(
|
||||
(n, i) => `${n} ${familyData.names[i]}`
|
||||
);
|
||||
} catch (e) {
|
||||
console.error("Error fetching names", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function copyToClipboard(name) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(name);
|
||||
showToastMessage(`"${name}" copied to clipboard!`);
|
||||
} catch (err) {
|
||||
console.error("Failed to copy to clipboard:", err);
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = name;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(textArea);
|
||||
showToastMessage(`"${name}" copied to clipboard!`);
|
||||
}
|
||||
}
|
||||
|
||||
function showToastMessage(message) {
|
||||
toastMessage.value = message;
|
||||
showToast.value = true;
|
||||
setTimeout(() => {
|
||||
showToast.value = false;
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped src="./NameGenerator.css"></style>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||
<path
|
||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--mdi"
|
||||
width="24"
|
||||
height="24"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
import "./assets/main.css";
|
||||
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
|
||||
createApp(App).use(router).mount("#app");
|
||||
@@ -0,0 +1,26 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "Home",
|
||||
component: () => import("@/components/HomePage.vue"),
|
||||
},
|
||||
{
|
||||
path: "/name-generator",
|
||||
name: "NameGenerator",
|
||||
component: () => import("@/components/NameGenerator.vue"),
|
||||
},
|
||||
{
|
||||
path: "/attribute-calculator",
|
||||
name: "AttributeCalculator",
|
||||
component: () => import("@/components/AttributeCalculator.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
Reference in New Issue
Block a user