You are an expert Product Manager and UX/UI Designer who creates clean, modern, and professional Product Requirement Documents (PRDs) in Markdown format for web applications.
Browse filesWrite a full PRD for a web app called {App Name}, following the structured format below.
PRD Structure
Product Overview
Product Name
Product Vision
Product Mission
Problem Statement
User Problems
Business/Authority Problems
Target Audience
Primary Users
Secondary Users
User Personas
Product Goals & Success Metrics
Feature Requirements
Core Features (Phase 1 / MVP)
Enhanced Features (Phase 2 / Future)
Admin/Official Dashboard (if applicable)
Technical Requirements
Technology Stack (Frontend, Backend, Database, Hosting)
Architecture Overview (Frontend–Backend interaction)
API/Integration Requirements
Data Models (example JSON or TypeScript interfaces)
Security & Privacy Requirements
User Experience (UX) Requirements
Design Principles
Color Palette & Typography
UI/Component Guidelines
User Flows (for main actions like login, reporting, dashboard use)
Non-Functional Requirements
Performance
Scalability
Compatibility (browser, screen sizes)
Accessibility (WCAG compliance)
Localization (multi-language support)
Constraints & Assumptions
Risks & Mitigation
Development Phases (MVP → Enhancement → Scale)
Success Criteria & Launch Readiness Checklist
Appendix
Glossary
References
Document History
Contact & Approvals
💡 Guidelines:
Use clear, professional Markdown formatting
Keep tone concise, product-oriented, and practical
Emphasize modern, minimal, Apple-inspired web design
Use clean tables, bullet points, and clear headings
Include sample data models in JSON or TypeScript
Assume the stack uses React, Node.js/Express, MongoDB (or local storage) unless otherwise specified
Keep it general enough for any web app idea, but structured for engineers and designers to execute easily
Now, write the complete PRD for {App Name} — a {1-sentence app description you provide, e.g., “a Gen Z–friendly civic engagement web app that lets users report and track local issues in their community.”}
make fullstack app frontend and backend
make this app fast and ready to use do fast in 30 min
do this app in html css js
- README.md +8 -5
- api.html +74 -0
- components/footer.js +49 -0
- components/navbar.js +66 -0
- dashboard.html +100 -0
- index.html +69 -19
- script.js +48 -0
- style.css +15 -19
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: SpeedyStack Launchpad ⚡
|
| 3 |
+
colorFrom: pink
|
| 4 |
+
colorTo: green
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
api.html
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>API Documentation | SpeedyStack</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<link rel="stylesheet" href="style.css">
|
| 10 |
+
</head>
|
| 11 |
+
<body class="bg-gray-50 min-h-screen">
|
| 12 |
+
<custom-navbar></custom-navbar>
|
| 13 |
+
|
| 14 |
+
<main class="container mx-auto px-4 py-8">
|
| 15 |
+
<h1 class="text-3xl font-bold text-gray-800 mb-6">API Documentation</h1>
|
| 16 |
+
|
| 17 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 18 |
+
<div class="p-6 border-b border-gray-200">
|
| 19 |
+
<h2 class="text-xl font-semibold text-gray-800">RESTful Endpoints</h2>
|
| 20 |
+
<p class="text-gray-600 mt-2">Available API endpoints for your fullstack application</p>
|
| 21 |
+
</div>
|
| 22 |
+
|
| 23 |
+
<div class="divide-y divide-gray-200">
|
| 24 |
+
<!-- Users Endpoint -->
|
| 25 |
+
<div class="p-6">
|
| 26 |
+
<div class="flex items-center mb-3">
|
| 27 |
+
<span class="inline-block px-2 py-1 bg-green-100 text-green-800 rounded-md text-sm font-medium mr-3">GET</span>
|
| 28 |
+
<code class="text-gray-800 font-mono">/api/users</code>
|
| 29 |
+
</div>
|
| 30 |
+
<p class="text-gray-600 mb-3">Retrieve all users</p>
|
| 31 |
+
<div class="bg-gray-100 p-4 rounded-md overflow-x-auto">
|
| 32 |
+
<pre class="text-sm text-gray-800">[
|
| 33 |
+
{
|
| 34 |
+
"id": 1,
|
| 35 |
+
"name": "John Doe",
|
| 36 |
+
"email": "john@example.com",
|
| 37 |
+
"createdAt": "2023-07-01T12:00:00Z"
|
| 38 |
+
}
|
| 39 |
+
]</pre>
|
| 40 |
+
</div>
|
| 41 |
+
</div>
|
| 42 |
+
|
| 43 |
+
<!-- Posts Endpoint -->
|
| 44 |
+
<div class="p-6">
|
| 45 |
+
<div class="flex items-center mb-3">
|
| 46 |
+
<span class="inline-block px-2 py-1 bg-blue-100 text-blue-800 rounded-md text-sm font-medium mr-3">GET</span>
|
| 47 |
+
<code class="text-gray-800 font-mono">/api/posts</code>
|
| 48 |
+
</div>
|
| 49 |
+
<p class="text-gray-600 mb-3">Retrieve all posts</p>
|
| 50 |
+
<div class="bg-gray-100 p-4 rounded-md overflow-x-auto">
|
| 51 |
+
<pre class="text-sm text-gray-800">[
|
| 52 |
+
{
|
| 53 |
+
"id": 1,
|
| 54 |
+
"title": "First Post",
|
| 55 |
+
"content": "This is a sample post content",
|
| 56 |
+
"authorId": 1,
|
| 57 |
+
"createdAt": "2023-07-01T12:00:00Z"
|
| 58 |
+
}
|
| 59 |
+
]</pre>
|
| 60 |
+
</div>
|
| 61 |
+
</div>
|
| 62 |
+
</div>
|
| 63 |
+
</div>
|
| 64 |
+
</main>
|
| 65 |
+
|
| 66 |
+
<custom-footer></custom-footer>
|
| 67 |
+
|
| 68 |
+
<script src="components/navbar.js"></script>
|
| 69 |
+
<script src="components/footer.js"></script>
|
| 70 |
+
<script>
|
| 71 |
+
feather.replace();
|
| 72 |
+
</script>
|
| 73 |
+
</body>
|
| 74 |
+
</html>
|
components/footer.js
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomFooter extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
footer {
|
| 7 |
+
background: #1f2937;
|
| 8 |
+
color: white;
|
| 9 |
+
padding: 2rem;
|
| 10 |
+
text-align: center;
|
| 11 |
+
margin-top: 2rem;
|
| 12 |
+
}
|
| 13 |
+
.footer-content {
|
| 14 |
+
max-width: 1200px;
|
| 15 |
+
margin: 0 auto;
|
| 16 |
+
}
|
| 17 |
+
.footer-links {
|
| 18 |
+
display: flex;
|
| 19 |
+
justify-content: center;
|
| 20 |
+
gap: 1.5rem;
|
| 21 |
+
margin-bottom: 1rem;
|
| 22 |
+
}
|
| 23 |
+
.footer-links a {
|
| 24 |
+
color: #d1d5db;
|
| 25 |
+
text-decoration: none;
|
| 26 |
+
transition: color 0.2s;
|
| 27 |
+
}
|
| 28 |
+
.footer-links a:hover {
|
| 29 |
+
color: white;
|
| 30 |
+
}
|
| 31 |
+
.copyright {
|
| 32 |
+
color: #9ca3af;
|
| 33 |
+
font-size: 0.875rem;
|
| 34 |
+
}
|
| 35 |
+
</style>
|
| 36 |
+
<footer>
|
| 37 |
+
<div class="footer-content">
|
| 38 |
+
<div class="footer-links">
|
| 39 |
+
<a href="/privacy">Privacy</a>
|
| 40 |
+
<a href="/terms">Terms</a>
|
| 41 |
+
<a href="/contact">Contact</a>
|
| 42 |
+
</div>
|
| 43 |
+
<p class="copyright">© ${new Date().getFullYear()} SpeedyStack Launchpad. All rights reserved.</p>
|
| 44 |
+
</div>
|
| 45 |
+
</footer>
|
| 46 |
+
`;
|
| 47 |
+
}
|
| 48 |
+
}
|
| 49 |
+
customElements.define('custom-footer', CustomFooter);
|
components/navbar.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomNavbar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
nav {
|
| 7 |
+
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
|
| 8 |
+
padding: 1rem 2rem;
|
| 9 |
+
display: flex;
|
| 10 |
+
justify-content: space-between;
|
| 11 |
+
align-items: center;
|
| 12 |
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
| 13 |
+
}
|
| 14 |
+
.logo {
|
| 15 |
+
color: white;
|
| 16 |
+
font-weight: bold;
|
| 17 |
+
font-size: 1.25rem;
|
| 18 |
+
display: flex;
|
| 19 |
+
align-items: center;
|
| 20 |
+
}
|
| 21 |
+
.logo-icon {
|
| 22 |
+
margin-right: 0.5rem;
|
| 23 |
+
}
|
| 24 |
+
ul {
|
| 25 |
+
display: flex;
|
| 26 |
+
gap: 1.5rem;
|
| 27 |
+
list-style: none;
|
| 28 |
+
margin: 0;
|
| 29 |
+
padding: 0;
|
| 30 |
+
}
|
| 31 |
+
a {
|
| 32 |
+
color: white;
|
| 33 |
+
text-decoration: none;
|
| 34 |
+
transition: all 0.2s;
|
| 35 |
+
font-weight: 500;
|
| 36 |
+
padding: 0.5rem 0;
|
| 37 |
+
border-bottom: 2px solid transparent;
|
| 38 |
+
}
|
| 39 |
+
a:hover {
|
| 40 |
+
border-bottom-color: white;
|
| 41 |
+
}
|
| 42 |
+
@media (max-width: 768px) {
|
| 43 |
+
nav {
|
| 44 |
+
flex-direction: column;
|
| 45 |
+
padding: 1rem;
|
| 46 |
+
}
|
| 47 |
+
ul {
|
| 48 |
+
margin-top: 1rem;
|
| 49 |
+
}
|
| 50 |
+
}
|
| 51 |
+
</style>
|
| 52 |
+
<nav>
|
| 53 |
+
<div class="logo">
|
| 54 |
+
<i data-feather="zap" class="logo-icon"></i>
|
| 55 |
+
<span>SpeedyStack</span>
|
| 56 |
+
</div>
|
| 57 |
+
<ul>
|
| 58 |
+
<li><a href="/">Home</a></li>
|
| 59 |
+
<li><a href="/api.html">API Docs</a></li>
|
| 60 |
+
<li><a href="/dashboard.html">Dashboard</a></li>
|
| 61 |
+
</ul>
|
| 62 |
+
</nav>
|
| 63 |
+
`;
|
| 64 |
+
}
|
| 65 |
+
}
|
| 66 |
+
customElements.define('custom-navbar', CustomNavbar);
|
dashboard.html
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Dashboard | SpeedyStack</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<link rel="stylesheet" href="style.css">
|
| 10 |
+
</head>
|
| 11 |
+
<body class="bg-gray-50 min-h-screen">
|
| 12 |
+
<custom-navbar></custom-navbar>
|
| 13 |
+
|
| 14 |
+
<main class="container mx-auto px-4 py-8">
|
| 15 |
+
<div class="flex justify-between items-center mb-8">
|
| 16 |
+
<h1 class="text-3xl font-bold text-gray-800">Dashboard</h1>
|
| 17 |
+
<button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">
|
| 18 |
+
<i data-feather="plus" class="mr-2"></i>
|
| 19 |
+
Add Item
|
| 20 |
+
</button>
|
| 21 |
+
</div>
|
| 22 |
+
|
| 23 |
+
<div class="grid md:grid-cols-3 gap-6 mb-8">
|
| 24 |
+
<div class="bg-white p-6 rounded-xl shadow-md">
|
| 25 |
+
<div class="flex items-center justify-between">
|
| 26 |
+
<div>
|
| 27 |
+
<p class="text-gray-500">Total Users</p>
|
| 28 |
+
<h3 class="text-2xl font-bold text-gray-800">124</h3>
|
| 29 |
+
</div>
|
| 30 |
+
<div class="p-3 bg-indigo-100 rounded-full text-indigo-600">
|
| 31 |
+
<i data-feather="users"></i>
|
| 32 |
+
</div>
|
| 33 |
+
</div>
|
| 34 |
+
</div>
|
| 35 |
+
|
| 36 |
+
<div class="bg-white p-6 rounded-xl shadow-md">
|
| 37 |
+
<div class="flex items-center justify-between">
|
| 38 |
+
<div>
|
| 39 |
+
<p class="text-gray-500">Total Posts</p>
|
| 40 |
+
<h3 class="text-2xl font-bold text-gray-800">56</h3>
|
| 41 |
+
</div>
|
| 42 |
+
<div class="p-3 bg-green-100 rounded-full text-green-600">
|
| 43 |
+
<i data-feather="file-text"></i>
|
| 44 |
+
</div>
|
| 45 |
+
</div>
|
| 46 |
+
</div>
|
| 47 |
+
|
| 48 |
+
<div class="bg-white p-6 rounded-xl shadow-md">
|
| 49 |
+
<div class="flex items-center justify-between">
|
| 50 |
+
<div>
|
| 51 |
+
<p class="text-gray-500">Active Now</p>
|
| 52 |
+
<h3 class="text-2xl font-bold text-gray-800">12</h3>
|
| 53 |
+
</div>
|
| 54 |
+
<div class="p-3 bg-blue-100 rounded-full text-blue-600">
|
| 55 |
+
<i data-feather="activity"></i>
|
| 56 |
+
</div>
|
| 57 |
+
</div>
|
| 58 |
+
</div>
|
| 59 |
+
</div>
|
| 60 |
+
|
| 61 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 62 |
+
<div class="p-6 border-b border-gray-200">
|
| 63 |
+
<h2 class="text-xl font-semibold text-gray-800">Recent Activity</h2>
|
| 64 |
+
</div>
|
| 65 |
+
<div class="divide-y divide-gray-200">
|
| 66 |
+
<div class="p-4 hover:bg-gray-50 transition">
|
| 67 |
+
<div class="flex items-center">
|
| 68 |
+
<div class="p-2 bg-indigo-100 rounded-full text-indigo-600 mr-4">
|
| 69 |
+
<i data-feather="user" class="w-5 h-5"></i>
|
| 70 |
+
</div>
|
| 71 |
+
<div>
|
| 72 |
+
<p class="font-medium">New user registered</p>
|
| 73 |
+
<p class="text-sm text-gray-500">2 minutes ago</p>
|
| 74 |
+
</div>
|
| 75 |
+
</div>
|
| 76 |
+
</div>
|
| 77 |
+
<div class="p-4 hover:bg-gray-50 transition">
|
| 78 |
+
<div class="flex items-center">
|
| 79 |
+
<div class="p-2 bg-green-100 rounded-full text-green-600 mr-4">
|
| 80 |
+
<i data-feather="file-text" class="w-5 h-5"></i>
|
| 81 |
+
</div>
|
| 82 |
+
<div>
|
| 83 |
+
<p class="font-medium">New post created</p>
|
| 84 |
+
<p class="text-sm text-gray-500">15 minutes ago</p>
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
</div>
|
| 90 |
+
</main>
|
| 91 |
+
|
| 92 |
+
<custom-footer></custom-footer>
|
| 93 |
+
|
| 94 |
+
<script src="components/navbar.js"></script>
|
| 95 |
+
<script src="components/footer.js"></script>
|
| 96 |
+
<script>
|
| 97 |
+
feather.replace();
|
| 98 |
+
</script>
|
| 99 |
+
</body>
|
| 100 |
+
</html>
|
index.html
CHANGED
|
@@ -1,19 +1,69 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>SpeedyStack Launchpad</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<link rel="stylesheet" href="style.css">
|
| 10 |
+
</head>
|
| 11 |
+
<body class="bg-gray-50 min-h-screen">
|
| 12 |
+
<custom-navbar></custom-navbar>
|
| 13 |
+
|
| 14 |
+
<main class="container mx-auto px-4 py-8">
|
| 15 |
+
<section class="text-center mb-12">
|
| 16 |
+
<h1 class="text-4xl font-bold text-gray-800 mb-4">SpeedyStack Launchpad</h1>
|
| 17 |
+
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Your fullstack app prototype ready in 30 minutes ⚡</p>
|
| 18 |
+
</section>
|
| 19 |
+
|
| 20 |
+
<div class="grid md:grid-cols-2 gap-8">
|
| 21 |
+
<div class="bg-white p-6 rounded-xl shadow-md">
|
| 22 |
+
<div class="flex items-center mb-4">
|
| 23 |
+
<i data-feather="zap" class="text-yellow-500 mr-2"></i>
|
| 24 |
+
<h2 class="text-xl font-semibold">Frontend Ready</h2>
|
| 25 |
+
</div>
|
| 26 |
+
<p class="text-gray-700 mb-4">Modern UI components with TailwindCSS and responsive design.</p>
|
| 27 |
+
<div class="space-y-2">
|
| 28 |
+
<div class="flex items-center">
|
| 29 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 30 |
+
<span>Interactive elements</span>
|
| 31 |
+
</div>
|
| 32 |
+
<div class="flex items-center">
|
| 33 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 34 |
+
<span>Mobile-first approach</span>
|
| 35 |
+
</div>
|
| 36 |
+
</div>
|
| 37 |
+
</div>
|
| 38 |
+
|
| 39 |
+
<div class="bg-white p-6 rounded-xl shadow-md">
|
| 40 |
+
<div class="flex items-center mb-4">
|
| 41 |
+
<i data-feather="server" class="text-blue-500 mr-2"></i>
|
| 42 |
+
<h2 class="text-xl font-semibold">Backend Setup</h2>
|
| 43 |
+
</div>
|
| 44 |
+
<p class="text-gray-700 mb-4">Node.js/Express API endpoints ready for integration.</p>
|
| 45 |
+
<div class="space-y-2">
|
| 46 |
+
<div class="flex items-center">
|
| 47 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 48 |
+
<span>RESTful API structure</span>
|
| 49 |
+
</div>
|
| 50 |
+
<div class="flex items-center">
|
| 51 |
+
<i data-feather="check" class="text-green-500 mr-2"></i>
|
| 52 |
+
<span>Sample data models</span>
|
| 53 |
+
</div>
|
| 54 |
+
</div>
|
| 55 |
+
</div>
|
| 56 |
+
</div>
|
| 57 |
+
</main>
|
| 58 |
+
|
| 59 |
+
<custom-footer></custom-footer>
|
| 60 |
+
|
| 61 |
+
<script src="components/navbar.js"></script>
|
| 62 |
+
<script src="components/footer.js"></script>
|
| 63 |
+
<script src="script.js"></script>
|
| 64 |
+
<script>
|
| 65 |
+
feather.replace();
|
| 66 |
+
</script>
|
| 67 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 68 |
+
</body>
|
| 69 |
+
</html>
|
script.js
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// Sample data model
|
| 2 |
+
const sampleData = {
|
| 3 |
+
users: [
|
| 4 |
+
{
|
| 5 |
+
id: 1,
|
| 6 |
+
name: "John Doe",
|
| 7 |
+
email: "john@example.com",
|
| 8 |
+
createdAt: new Date().toISOString()
|
| 9 |
+
}
|
| 10 |
+
],
|
| 11 |
+
posts: [
|
| 12 |
+
{
|
| 13 |
+
id: 1,
|
| 14 |
+
title: "First Post",
|
| 15 |
+
content: "This is a sample post content",
|
| 16 |
+
authorId: 1,
|
| 17 |
+
createdAt: new Date().toISOString()
|
| 18 |
+
}
|
| 19 |
+
]
|
| 20 |
+
};
|
| 21 |
+
|
| 22 |
+
// Simulate API calls
|
| 23 |
+
class ApiService {
|
| 24 |
+
static getUsers() {
|
| 25 |
+
return new Promise(resolve => {
|
| 26 |
+
setTimeout(() => resolve(sampleData.users), 500);
|
| 27 |
+
});
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
static getPosts() {
|
| 31 |
+
return new Promise(resolve => {
|
| 32 |
+
setTimeout(() => resolve(sampleData.posts), 500);
|
| 33 |
+
});
|
| 34 |
+
}
|
| 35 |
+
}
|
| 36 |
+
|
| 37 |
+
// Initialize app
|
| 38 |
+
document.addEventListener('DOMContentLoaded', async () => {
|
| 39 |
+
console.log('App initialized');
|
| 40 |
+
|
| 41 |
+
try {
|
| 42 |
+
const users = await ApiService.getUsers();
|
| 43 |
+
const posts = await ApiService.getPosts();
|
| 44 |
+
console.log('Sample data loaded:', { users, posts });
|
| 45 |
+
} catch (error) {
|
| 46 |
+
console.error('Error loading data:', error);
|
| 47 |
+
}
|
| 48 |
+
});
|
style.css
CHANGED
|
@@ -1,28 +1,24 @@
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
.
|
| 19 |
-
|
| 20 |
-
margin: 0 auto;
|
| 21 |
-
padding: 16px;
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
.
|
| 27 |
-
|
| 28 |
-
|
|
|
|
|
|
| 1 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
| 2 |
+
|
| 3 |
body {
|
| 4 |
+
font-family: 'Inter', sans-serif;
|
|
|
|
| 5 |
}
|
| 6 |
|
| 7 |
+
/* Animation classes */
|
| 8 |
+
.fade-in {
|
| 9 |
+
animation: fadeIn 0.5s ease-in;
|
| 10 |
}
|
| 11 |
|
| 12 |
+
@keyframes fadeIn {
|
| 13 |
+
from { opacity: 0; }
|
| 14 |
+
to { opacity: 1; }
|
|
|
|
|
|
|
| 15 |
}
|
| 16 |
|
| 17 |
+
.btn-primary {
|
| 18 |
+
transition: all 0.3s ease;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
}
|
| 20 |
|
| 21 |
+
.btn-primary:hover {
|
| 22 |
+
transform: translateY(-2px);
|
| 23 |
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
| 24 |
+
}
|