|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>InkBoard - Neural Story Generator</title> |
|
|
|
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet"> |
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> |
|
|
</head> |
|
|
<body class="landing-body"> |
|
|
<div class="container-fluid h-100"> |
|
|
<div class="row h-100 justify-content-center align-items-center"> |
|
|
<div class="col-lg-8 text-center"> |
|
|
|
|
|
<div class="landing-content"> |
|
|
<h1 class="display-1 mb-4 cyber-title"> |
|
|
<i class="fas fa-terminal me-3"></i> |
|
|
INKBOARD |
|
|
</h1> |
|
|
<p class="lead cyber-subtitle mb-5"> |
|
|
// NEURAL STORY GENERATOR // |
|
|
<br> |
|
|
Transform ideas into pixelated dreams |
|
|
</p> |
|
|
|
|
|
|
|
|
<div class="landing-actions"> |
|
|
<a href="{{ url_for('login') }}" class="btn animate-btn btn-lg me-3 mb-3"> |
|
|
<i class="fas fa-sign-in-alt me-2"></i> |
|
|
LOGIN |
|
|
</a> |
|
|
<a href="{{ url_for('register') }}" class="btn btn-outline-neon btn-lg mb-3"> |
|
|
<i class="fas fa-user-plus me-2"></i> |
|
|
CREATE ACCOUNT |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="row mt-5"> |
|
|
<div class="col-md-4 mb-4"> |
|
|
<div class="feature-box"> |
|
|
<i class="fas fa-brain fa-3x mb-3"></i> |
|
|
<h4>AI POWERED</h4> |
|
|
<p>Advanced neural networks generate unique stories from your ideas</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-4 mb-4"> |
|
|
<div class="feature-box"> |
|
|
<i class="fas fa-image fa-3x mb-3"></i> |
|
|
<h4>VISUAL ART</h4> |
|
|
<p>Each story comes with a custom generated pixelated illustration</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-4 mb-4"> |
|
|
<div class="feature-box"> |
|
|
<i class="fas fa-journal-whills fa-3x mb-3"></i> |
|
|
<h4>DIGITAL JOURNAL</h4> |
|
|
<p>Save and organize your creative journey in your personal gallery</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
<main class="container"> |
|
|
|
|
|
<div id="create-section" class="dashboard-section"> |
|
|
|
|
|
<div class="row justify-content-center mb-5"> |
|
|
<div class="col-lg-8"> |
|
|
<div class="card shadow-sm border-0 input-card"> |
|
|
<div class="card-body p-4"> |
|
|
<h3 class="card-title text-center mb-4"> |
|
|
<i class="fas fa-lightbulb me-2"></i> |
|
|
Describe Your Scene |
|
|
</h3> |
|
|
<form id="scene-form"> |
|
|
<div class="mb-3"> |
|
|
<textarea |
|
|
class="form-control scene-input" |
|
|
id="scene-idea" |
|
|
rows="4" |
|
|
placeholder="A girl standing alone on a cliff at sunset..." |
|
|
required></textarea> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<button type="submit" class="btn btn-primary btn-lg animate-btn" id="generate-btn"> |
|
|
<span class="btn-text"> |
|
|
<i class="fas fa-magic me-2"></i> |
|
|
Create Story & Image |
|
|
</span> |
|
|
<div class="spinner-border spinner-border-sm d-none" role="status"> |
|
|
<span class="visually-hidden">Loading...</span> |
|
|
</div> |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="row justify-content-center d-none" id="loading-section"> |
|
|
<div class="col-lg-8"> |
|
|
<div class="text-center py-5"> |
|
|
<div class="loading-animation mb-4"> |
|
|
<div class="spinner-grow text-primary" role="status"></div> |
|
|
<div class="spinner-grow text-info" role="status"></div> |
|
|
<div class="spinner-grow text-success" role="status"></div> |
|
|
</div> |
|
|
<h4 class="text-muted">Creating your story and image...</h4> |
|
|
<p class="text-muted">This may take a moment</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="row" id="results-section"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="gallery-section" class="dashboard-section d-none"> |
|
|
<div class="row"> |
|
|
<div class="col-12"> |
|
|
<h3 class="text-center mb-4"> |
|
|
<i class="fas fa-palette me-2"></i> |
|
|
Your Creative Gallery |
|
|
</h3> |
|
|
<div class="masonry-grid" id="gallery-grid"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="journal-section" class="dashboard-section d-none"> |
|
|
<div class="row"> |
|
|
<div class="col-12"> |
|
|
<h3 class="text-center mb-4"> |
|
|
<i class="fas fa-journal-whills me-2"></i> |
|
|
Your Journal Entries |
|
|
</h3> |
|
|
<div class="row" id="journal-entries"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal fade" id="journalModal" tabindex="-1" aria-labelledby="journalModalLabel" aria-hidden="true"> |
|
|
<div class="modal-dialog modal-lg"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h5 class="modal-title" id="journalModalLabel"> |
|
|
<i class="fas fa-journal-whills me-2"></i> |
|
|
Journal Entry |
|
|
</h5> |
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<textarea class="form-control" id="journal-text" rows="6" placeholder="Write your thoughts, inspiration, or notes about this creation..."></textarea> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> |
|
|
<button type="button" class="btn btn-primary" id="save-journal"> |
|
|
<i class="fas fa-save me-2"></i> |
|
|
Save Journal |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> |
|
|
|
|
|
|
|
|
<script src="{{ url_for('static', filename='js/script.js') }}"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
