File size: 9,649 Bytes
f2ef360 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 |
<!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>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Custom 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">
<!-- Main Landing Content -->
<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>
<!-- CTA Buttons -->
<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>
<!-- Features -->
<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>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<main class="container">
<!-- Create Story Section -->
<div id="create-section" class="dashboard-section">
<!-- Scene Input 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>
<!-- Loading Animation -->
<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>
<!-- Results Section -->
<div class="row" id="results-section">
<!-- Generated content will be inserted here -->
</div>
</div>
<!-- Gallery Section -->
<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">
<!-- Gallery items will be inserted here -->
</div>
</div>
</div>
</div>
<!-- Journal Section -->
<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">
<!-- Journal entries will be inserted here -->
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Journal Modal -->
<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>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
|