| <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> |
