nodejs-quickstart-structure 2.0.1 → 2.1.1

package/templates/common/views/pug/index.pug

@@ -1,40 +1,271 @@
 doctype html
 html(lang="en")
-  head
-    meta(charset="UTF-8")
-    meta(name="viewport", content="width=device-width, initial-scale=1.0")
-    title= projectName
-    link(rel="stylesheet", href="/css/style.css")
-  body
-    .container
-      header.header
-        .logo 🚀
-        h1 Welcome to #{projectName}
-        p.subtitle A production-ready Node.js microservice starter.
-
-      .card-grid
-        .card
-          h3 Architecture
-          p #{architecture}
-        .card
-          h3 Database
-          p #{database}
-        .card
-          h3 Communication
-          p #{communication}
-
-      if communication === 'Kafka'
-        .status-card
-          .status-icon 🔄
-          .status-content
-            h3 Kafka Connected
-            p Connection to broker established successfully.
-      else 
-        .status-card
-          .status-icon ✅
-          .status-content
-            h3 API Active
-            p REST API is running and ready to accept requests.
-
-      footer
-        p Generated with ❤️ by Node.js Quickstart Generator
+    head
+        meta(charset="UTF-8")
+        meta(name="viewport" content="width=device-width, initial-scale=1.0")
+        title= projectName
+        link(href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet")
+        style.
+            :root {
+                --primary: #6366f1;
+                --primary-glow: rgba(99, 102, 241, 0.4);
+                --bg-dark: #0f172a;
+                --card-bg: rgba(255, 255, 255, 0.03);
+                --card-border: rgba(255, 255, 255, 0.08);
+                --text-main: #f8fafc;
+                --text-muted: #94a3b8;
+                --success: #22c55e;
+            }
+
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+                font-family: 'Poppins', sans-serif;
+            }
+
+            body {
+                background-color: var(--bg-dark);
+                color: var(--text-main);
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                overflow-x: hidden;
+                position: relative;
+                padding: 40px 20px;
+            }
+
+            .background-blobs {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                z-index: -1;
+                filter: blur(100px);
+            }
+
+            .blob {
+                position: absolute;
+                width: 500px;
+                height: 500px;
+                border-radius: 50%;
+                opacity: 0.3;
+                animation: float 25s infinite alternate;
+            }
+
+            .blob-1 {
+                background: radial-gradient(circle, #6366f1 0%, transparent 70%);
+                top: -200px;
+                left: -100px;
+            }
+
+            .blob-2 {
+                background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
+                bottom: -200px;
+                right: -100px;
+                animation-delay: -5s;
+            }
+
+            @keyframes float {
+                0% { transform: translate(0, 0) scale(1); }
+                100% { transform: translate(150px, 80px) scale(1.3); }
+            }
+
+            .container {
+                width: 100%;
+                max-width: 1000px;
+                z-index: 1;
+                animation: fadeIn 0.8s ease-out;
+            }
+
+            @keyframes fadeIn {
+                from { opacity: 0; transform: translateY(20px); }
+                to { opacity: 1; transform: translateY(0); }
+            }
+
+            .hero-card {
+                background: var(--card-bg);
+                backdrop-filter: blur(16px);
+                -webkit-backdrop-filter: blur(16px);
+                border: 1px solid var(--card-border);
+                border-radius: 32px;
+                padding: 60px 40px;
+                text-align: center;
+                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+                margin-bottom: 40px;
+            }
+
+            .logo {
+                font-size: 64px;
+                margin-bottom: 24px;
+                display: inline-block;
+                animation: bounce 3s infinite ease-in-out;
+            }
+
+            @keyframes bounce {
+                0%, 100% { transform: translateY(0); }
+                50% { transform: translateY(-10px); }
+            }
+
+            h1 {
+                font-size: 48px;
+                font-weight: 600;
+                margin-bottom: 12px;
+                background: linear-gradient(to right, #fff, #94a3b8);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+
+            .subtitle {
+                font-size: 18px;
+                color: var(--text-muted);
+                margin-bottom: 40px;
+                max-width: 600px;
+                margin-left: auto;
+                margin-right: auto;
+            }
+
+            .btn-group {
+                display: flex;
+                gap: 16px;
+                justify-content: center;
+                flex-wrap: wrap;
+            }
+
+            .btn {
+                padding: 14px 28px;
+                border-radius: 14px;
+                font-size: 16px;
+                font-weight: 600;
+                text-decoration: none;
+                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+
+            .btn-primary {
+                background: var(--primary);
+                color: white;
+                box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
+            }
+
+            .btn-primary:hover {
+                transform: scale(1.05);
+                background: #4f46e5;
+                box-shadow: 0 15px 25px -5px rgba(99, 102, 241, 0.4);
+            }
+
+            .btn-secondary {
+                background: rgba(255, 255, 255, 0.05);
+                color: white;
+                border: 1px solid var(--card-border);
+            }
+
+            .btn-secondary:hover {
+                background: rgba(255, 255, 255, 0.1);
+                transform: scale(1.05);
+            }
+
+            .feature-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+                gap: 24px;
+            }
+
+            .feature-card {
+                background: var(--card-bg);
+                backdrop-filter: blur(8px);
+                border: 1px solid var(--card-border);
+                border-radius: 20px;
+                padding: 24px;
+                transition: all 0.3s ease;
+            }
+
+            .feature-card:hover {
+                transform: translateY(-5px);
+                background: rgba(255, 255, 255, 0.06);
+                border-color: var(--primary);
+            }
+
+            .feature-card h3 {
+                font-size: 14px;
+                text-transform: uppercase;
+                letter-spacing: 1px;
+                color: var(--text-muted);
+                margin-bottom: 8px;
+            }
+
+            .feature-card p {
+                font-size: 20px;
+                font-weight: 600;
+                color: #fff;
+            }
+
+            .status-badge {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                background: rgba(34, 197, 94, 0.1);
+                border: 1px solid rgba(34, 197, 94, 0.2);
+                color: var(--success);
+                padding: 8px 16px;
+                border-radius: 99px;
+                font-size: 14px;
+                font-weight: 500;
+                margin-top: 32px;
+            }
+
+            footer {
+                margin-top: 60px;
+                text-align: center;
+                font-size: 14px;
+                color: var(--text-muted);
+            }
+
+            @media (max-width: 640px) {
+                h1 { font-size: 32px; }
+                .hero-card { padding: 40px 20px; }
+            }
+    body
+        div.background-blobs
+            div.blob.blob-1
+            div.blob.blob-2
+        div.container
+            div.hero-card
+                div.logo 🚀
+                h1 Welcome to #{projectName}
+                p.subtitle Your enterprise-grade Node.js microservice is live and ready for production.
+                
+                div.btn-group
+                    if auth && auth.includes('JWT')
+                        a.btn.btn-primary(href="/login") Sign In
+                        a.btn.btn-secondary(href="/signup") Create Account
+                    
+                    a.btn.btn-secondary(href=(communication === 'GraphQL' ? '/graphql' : '/api-docs'))
+                        span Explore Docs
+                        svg(width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
+                            path(d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6")
+                            polyline(points="15 3 21 3 21 9")
+                            line(x1="10" y1="14" x2="21" y2="3")
+
+                if communication === 'Kafka'
+                    div.status-badge
+                        | 🔄 Kafka Connected
+                else
+                    div.status-badge
+                        | ✅ API Service Active
+
+            div.feature-grid
+                div.feature-card
+                    h3 Architecture
+                    p= architecture
+                div.feature-card
+                    h3 Core Stack
+                    p #{database} & #{communication}
+                div.feature-card
+                    h3 Environment
+                    p Node.js & Docker Ready
+
+            footer
+                p Generated with ❤️ by Node.js Quickstart Generator

package/templates/common/views/pug/login.pug.ejs

@@ -0,0 +1,195 @@
+doctype html
+html(lang="en")
+    head
+        meta(charset="UTF-8")
+        meta(name="viewport" content="width=device-width, initial-scale=1.0")
+        title Login - <%= projectName %>
+        link(href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet")
+        style.
+            :root {
+                --primary: #6366f1;
+                --primary-glow: rgba(99, 102, 241, 0.5);
+                --bg-dark: #0f172a;
+                --card-bg: rgba(255, 255, 255, 0.03);
+                --card-border: rgba(255, 255, 255, 0.08);
+                --text-main: #f8fafc;
+                --text-muted: #94a3b8;
+            }
+
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+                font-family: 'Poppins', sans-serif;
+            }
+
+            body {
+                background-color: var(--bg-dark);
+                color: var(--text-main);
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                overflow: hidden;
+                position: relative;
+            }
+
+            .background-blobs {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                z-index: -1;
+                filter: blur(80px);
+            }
+
+            .blob {
+                position: absolute;
+                width: 400px;
+                height: 400px;
+                border-radius: 50%;
+                opacity: 0.4;
+                animation: float 20s infinite alternate;
+            }
+
+            .blob-1 {
+                background: radial-gradient(circle, #6366f1 0%, transparent 70%);
+                top: -100px;
+                left: -100px;
+            }
+
+            .blob-2 {
+                background: radial-gradient(circle, #ec4899 0%, transparent 70%);
+                bottom: -150px;
+                right: -100px;
+                animation-delay: -5s;
+            }
+
+            @keyframes float {
+                0% { transform: translate(0, 0) scale(1); }
+                100% { transform: translate(100px, 50px) scale(1.2); }
+            }
+
+            .auth-card {
+                background: var(--card-bg);
+                backdrop-filter: blur(12px);
+                -webkit-backdrop-filter: blur(12px);
+                border: 1px solid var(--card-border);
+                border-radius: 24px;
+                padding: 48px;
+                width: 100%;
+                max-width: 440px;
+                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+                z-index: 1;
+                animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+
+            @keyframes slideUp {
+                from { opacity: 0; transform: translateY(20px); }
+                to { opacity: 1; transform: translateY(0); }
+            }
+
+            .auth-card h2 {
+                font-size: 32px;
+                font-weight: 600;
+                margin-bottom: 8px;
+                text-align: center;
+                background: linear-gradient(to right, #fff, #94a3b8);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+
+            .subtitle {
+                text-align: center;
+                color: var(--text-muted);
+                font-size: 14px;
+                margin-bottom: 32px;
+            }
+
+            .form-group {
+                margin-bottom: 24px;
+            }
+
+            .form-group label {
+                display: block;
+                margin-bottom: 8px;
+                font-size: 14px;
+                font-weight: 500;
+                color: var(--text-muted);
+            }
+
+            .form-group input {
+                width: 100%;
+                background: rgba(255, 255, 255, 0.05);
+                border: 1px solid var(--card-border);
+                border-radius: 12px;
+                padding: 12px 16px;
+                color: #fff;
+                font-size: 15px;
+                transition: all 0.3s ease;
+                outline: none;
+            }
+
+            .form-group input:focus {
+                background: rgba(255, 255, 255, 0.08);
+                border-color: var(--primary);
+                box-shadow: 0 0 0 4px var(--primary-glow);
+            }
+
+            .btn-primary {
+                width: 100%;
+                background: var(--primary);
+                color: white;
+                border: none;
+                border-radius: 12px;
+                padding: 14px;
+                font-size: 16px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                margin-top: 8px;
+            }
+
+            .btn-primary:hover {
+                transform: translateY(-2px);
+                background: #4f46e5;
+                box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
+            }
+
+            .footer {
+                margin-top: 32px;
+                text-align: center;
+                font-size: 14px;
+                color: var(--text-muted);
+            }
+
+            .footer a {
+                color: var(--primary);
+                text-decoration: none;
+                font-weight: 500;
+            }
+
+            .back-link {
+                display: inline-block;
+                margin-top: 16px;
+                font-size: 13px;
+                opacity: 0.6;
+            }
+    body
+        div.background-blobs
+            div.blob.blob-1
+            div.blob.blob-2
+        div.auth-card
+            h2 Welcome Back
+            p.subtitle Please enter your details to sign in
+            form(action="/api/auth/login" method="POST")
+                div.form-group
+                    label(for="email") Email Address
+                    input(type="email" id="email" name="email" placeholder="name@example.com" required)
+                div.form-group
+                    label(for="password") Password
+                    input(type="password" id="password" name="password" placeholder="••••••••" required)
+                button.btn-primary(type="submit") Sign In
+            div.footer
+                p Don't have an account? 
+                    a(href="/signup") Create account
+                a.back-link(href="/") ← Back to home