🎨 Improve code readability by reformatting and updating function definitions and comments
This commit is contained in:
212
code/websites/pokedex.online/src/views/Home.vue
Normal file
212
code/websites/pokedex.online/src/views/Home.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="home-view">
|
||||
<div class="container">
|
||||
<!-- Header -->
|
||||
<div class="header-top">
|
||||
<ProfessorPokeball size="150px" color="#F44336" :animate="true" />
|
||||
</div>
|
||||
<h1>Pokedex Online</h1>
|
||||
<p class="subtitle">Your Digital Pokédex Companion</p>
|
||||
<p class="description">
|
||||
A modern web application for housing different apps that make a
|
||||
professors life easier. Built with ❤️ for Pokémon Professors everywhere.
|
||||
</p>
|
||||
|
||||
<div class="tools-section">
|
||||
<h2>Available Tools</h2>
|
||||
<div class="tool-cards">
|
||||
<router-link to="/api-key-manager" class="tool-card settings">
|
||||
<div class="tool-icon">🔐</div>
|
||||
<h3>API Key Manager</h3>
|
||||
<p>Store your Challonge API key locally for easy access</p>
|
||||
<span v-if="isKeyStored" class="badge">Active</span>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/gamemaster" class="tool-card">
|
||||
<div class="tool-icon">📦</div>
|
||||
<h3>Gamemaster Manager</h3>
|
||||
<p>Fetch and process Pokemon GO gamemaster data from PokeMiners</p>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/challonge-test" class="tool-card">
|
||||
<div class="tool-icon">🔑</div>
|
||||
<h3>Challonge API Test</h3>
|
||||
<p>Test your Challonge API connection and configuration</p>
|
||||
</router-link>
|
||||
|
||||
<div class="tool-card disabled">
|
||||
<div class="tool-icon">📝</div>
|
||||
<h3>Printing Tool</h3>
|
||||
<p>Generate tournament printing materials (Coming Soon)</p>
|
||||
</div>
|
||||
|
||||
<div class="tool-card disabled">
|
||||
<div class="tool-icon">🏆</div>
|
||||
<h3>Tournament Manager</h3>
|
||||
<p>Manage Challonge tournaments and participants (Coming Soon)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status">
|
||||
<strong>Status:</strong> In Development<br />
|
||||
Check back soon for updates!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ProfessorPokeball from '../components/shared/ProfessorPokeball.vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-view {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 60px 40px;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #667eea;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tools-section {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.tools-section h2 {
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.tool-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.tool-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tool-card.settings {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
border: 2px solid #34d399;
|
||||
}
|
||||
|
||||
.tool-card:hover:not(.disabled) {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.tool-card.disabled {
|
||||
background: linear-gradient(135deg, #999 0%, #666 100%);
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tool-card h3 {
|
||||
color: white;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.tool-card p {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.status {
|
||||
background: #f0f0f0;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
color: #666;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.status strong {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.tool-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user