|
|
<script lang="ts"> |
|
|
|
|
|
</script> |
|
|
|
|
|
<div class="encounters-page"> |
|
|
<div class="coming-soon"> |
|
|
<img |
|
|
src="https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/encounters_logo.png" |
|
|
alt="Encounters" |
|
|
class="page-icon" |
|
|
/> |
|
|
<h2>Encounters</h2> |
|
|
<p>Battle trainers and catch wild Piclets!</p> |
|
|
<div class="feature-preview"> |
|
|
<div class="preview-card"> |
|
|
<h3>⚔️ Battle System</h3> |
|
|
<p>Turn-based combat with your Piclets</p> |
|
|
</div> |
|
|
<div class="preview-card"> |
|
|
<h3>🎯 Catch Mechanics</h3> |
|
|
<p>Find and capture new monsters</p> |
|
|
</div> |
|
|
<div class="preview-card"> |
|
|
<h3>🏆 Trainer Battles</h3> |
|
|
<p>Challenge other trainers</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="coming-soon-text">Coming Soon</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<style> |
|
|
.encounters-page { |
|
|
height: 100%; |
|
|
overflow-y: auto; |
|
|
-webkit-overflow-scrolling: touch; |
|
|
padding: 2rem 1rem; |
|
|
} |
|
|
|
|
|
.coming-soon { |
|
|
text-align: center; |
|
|
max-width: 400px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.page-icon { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
margin-bottom: 1rem; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
h2 { |
|
|
margin: 0 0 0.5rem; |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.feature-preview { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.preview-card { |
|
|
background: #f8f9fa; |
|
|
padding: 1.5rem; |
|
|
border-radius: 12px; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.preview-card h3 { |
|
|
margin: 0 0 0.5rem; |
|
|
font-size: 1.1rem; |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.preview-card p { |
|
|
margin: 0; |
|
|
color: #666; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.coming-soon-text { |
|
|
color: #007bff; |
|
|
font-weight: 600; |
|
|
font-size: 1.2rem; |
|
|
margin-top: 2rem; |
|
|
} |
|
|
</style> |
