-
Welcome to Doppar
-{runtime.version ?? 'Doppar'}
-Craft Fast-Loading PHP Application
-Starter kits
-To give you a head start building your new Doppar application, we are happy to offer application starter kits.
- - -System Architecture
-Doppar follows the Model-View-Controller (MVC) architectural pattern, a widely accepted standard in web application development.
- - -Routing
-With support for route prefix grouping, named routes, throttle route, middleware assignment, and RESTful resource routing, Doppar gives developers full control over how requests are handled.
- - -Authentication
-Doppar simplifies this process by providing built-in tools and scaffolding to help you implement user authentication quickly and securely.
- -
- GitHub
- Website
+
-
- 
-
-
-
-
-
-
-
+
);
}
diff --git a/src/Phaseolies/Console/Commands/stubs/frontend/components/react.tsx.stub b/src/Phaseolies/Console/Commands/stubs/frontend/components/react.tsx.stub
index 9d08ac49..cc911a53 100644
--- a/src/Phaseolies/Console/Commands/stubs/frontend/components/react.tsx.stub
+++ b/src/Phaseolies/Console/Commands/stubs/frontend/components/react.tsx.stub
@@ -8,38 +8,88 @@ const runtime = (window as Window & { __DOPPAR_FRONTEND__?: DopparRuntime }).__D
export default function App() {
return (
-
+
-
+
+
+ Application ready
+
+ Let's build something.
+ +
+
+
+ Learn
+
+
+
+
+ 01 · Learn
+ Read the documentation ↗
+
+
+
+ 02 · Explore
+ See what's new in 4.x ↗
+
+
+
+ 03 · Connect
+ Star the project on GitHub ↗
+
+
+ {runtime.version ?? 'Doppar'} · {runtime.phpVersion ?? ''} ·
+ {' '}
+ Doppar News ↗
+
+
+
+
{runtime.phpVersion ?? ''}
-
+ Welcome to Doppar
-{runtime.version ?? 'Doppar'}
-Craft Fast-Loading PHP Application
-Starter kits
-To give you a head start building your new Doppar application, we are happy to offer application starter kits.
- - -System Architecture
-Doppar follows the Model-View-Controller (MVC) architectural pattern, a widely accepted standard in web application development.
- - -Routing
-With support for route prefix grouping, named routes, throttle route, middleware assignment, and RESTful resource routing, Doppar gives developers full control over how requests are handled.
- - -Authentication
-Doppar simplifies this process by providing built-in tools and scaffolding to help you implement user authentication quickly and securely.
- -
- GitHub
- Website
+
-
-
-
-
-
-
-
-
-
+
);
}
diff --git a/src/Phaseolies/Console/Commands/stubs/frontend/components/svelte.stub b/src/Phaseolies/Console/Commands/stubs/frontend/components/svelte.stub
index 99e9151f..d76bf03a 100644
--- a/src/Phaseolies/Console/Commands/stubs/frontend/components/svelte.stub
+++ b/src/Phaseolies/Console/Commands/stubs/frontend/components/svelte.stub
@@ -2,36 +2,85 @@
const runtime = window.__DOPPAR_FRONTEND__ ?? {};
-
+
-
+
+
+ Application ready
+
+ Let's build something.
+ +
+
+
+ Learn
+
+
+
+
+ 01 · Learn
+ Read the documentation ↗
+
+
+
+ 02 · Explore
+ See what's new in 4.x ↗
+
+
+
+ 03 · Connect
+ Star the project on GitHub ↗
+
+
+ {runtime.version ?? 'Doppar'} · {runtime.phpVersion ?? ''} ·
+ {' '}
+ Doppar News ↗
+
+
+
+
{runtime.phpVersion ?? ''}
-
+ Welcome to Doppar
-{runtime.version ?? 'Doppar'}
-Craft Fast-Loading PHP Application
-Starter kits
-To give you a head start building your new Doppar application, we are happy to offer application starter kits.
- - -System Architecture
-Doppar follows the Model-View-Controller (MVC) architectural pattern, a widely accepted standard in web application development.
- - -Routing
-With support for route prefix grouping, named routes, throttle route, middleware assignment, and RESTful resource routing, Doppar gives developers full control over how requests are handled.
- - -Authentication
-Doppar simplifies this process by providing built-in tools and scaffolding to help you implement user authentication quickly and securely.
- -
- GitHub
- Website
+
-
- ![Logo]()
-
-
-
-
-
-
-
+
diff --git a/src/Phaseolies/Console/Commands/stubs/frontend/components/vue.stub b/src/Phaseolies/Console/Commands/stubs/frontend/components/vue.stub
index b627cb77..468e399c 100644
--- a/src/Phaseolies/Console/Commands/stubs/frontend/components/vue.stub
+++ b/src/Phaseolies/Console/Commands/stubs/frontend/components/vue.stub
@@ -3,37 +3,86 @@ const runtime = window.__DOPPAR_FRONTEND__ ?? {};
-
+
-
-
+
+
+
+ Application ready
+
+ Let's build something.
+ +
+
+
+ Learn
+
+
+
+
+ 01 · Learn
+ Read the documentation ↗
+
+
+
+ 02 · Explore
+ See what's new in 4.x ↗
+
+
+
+ 03 · Connect
+ Star the project on GitHub ↗
+
+
+ {runtime.version ?? 'Doppar'} · {runtime.phpVersion ?? ''} ·
+ Doppar News ↗
+
+
+
+
Welcome to Doppar
-{{ runtime.version ?? 'Doppar' }}
-Craft Fast-Loading PHP Application
-Starter kits
-To give you a head start building your new Doppar application, we are happy to offer application starter kits.
- - -System Architecture
-Doppar follows the Model-View-Controller (MVC) architectural pattern, a widely accepted standard in web application development.
- - -Routing
-With support for route prefix grouping, named routes, throttle route, middleware assignment, and RESTful resource routing, Doppar gives developers full control over how requests are handled.
- - -Authentication
-Doppar simplifies this process by providing built-in tools and scaffolding to help you implement user authentication quickly and securely.
- -
- GitHub
- Website
+ #yield('title')
-
+
+
+ [[ $status_code ]] · [[ $error_message ]]
-
+
-
-
-
+ .frame-toggle {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ width: 100%;
+ text-align: left;
+ background: none;
+ border: none;
+ padding: 13px 4px 13px 0;
+ min-height: 56px;
+ }
-
-
+
diff --git a/src/Phaseolies/Console/Commands/stubs/frontend/configs/tsconfig.stub b/src/Phaseolies/Console/Commands/stubs/frontend/configs/tsconfig.stub
index 7491ad18..13fb1b13 100644
--- a/src/Phaseolies/Console/Commands/stubs/frontend/configs/tsconfig.stub
+++ b/src/Phaseolies/Console/Commands/stubs/frontend/configs/tsconfig.stub
@@ -12,8 +12,8 @@
{{ jsxOption }}
"baseUrl": ".",
"paths": {
- "@/*": ["resources/client/js/*"]
+ "@/*": ["templates/client/js/*"]
}
},
- "include": ["resources/client/**/*.ts", "resources/client/**/*.tsx", "resources/client/**/*.vue", "resources/client/**/*.svelte"]
+ "include": ["templates/client/**/*.ts", "templates/client/**/*.tsx", "templates/client/**/*.vue", "templates/client/**/*.svelte"]
}
diff --git a/src/Phaseolies/Console/Commands/stubs/frontend/configs/vite.stub b/src/Phaseolies/Console/Commands/stubs/frontend/configs/vite.stub
index 40072f84..2cc73c21 100644
--- a/src/Phaseolies/Console/Commands/stubs/frontend/configs/vite.stub
+++ b/src/Phaseolies/Console/Commands/stubs/frontend/configs/vite.stub
@@ -46,8 +46,8 @@ export default defineConfig({
publicDir: false,
resolve: {
alias: {
- '~client': path.resolve(__dirname, 'resources/client'),
- '@': path.resolve(__dirname, 'resources/client/js'),
+ '~client': path.resolve(__dirname, 'templates/client'),
+ '@': path.resolve(__dirname, 'templates/client/js'),
},
},
server: {
diff --git a/src/Phaseolies/Console/Commands/stubs/frontend/css/bootstrap.stub b/src/Phaseolies/Console/Commands/stubs/frontend/css/bootstrap.stub
index 4e16b9cc..1e7290dc 100644
--- a/src/Phaseolies/Console/Commands/stubs/frontend/css/bootstrap.stub
+++ b/src/Phaseolies/Console/Commands/stubs/frontend/css/bootstrap.stub
@@ -1,11 +1,18 @@
@import "bootstrap/dist/css/bootstrap.min.css";
:root {
- --primary: #10b981;
- --background: #f9fafb;
+ --bg: #fbfbf9;
--card-bg: #ffffff;
- --text-color: #111827;
- --border: #d1d5db;
+ --card-border: #ececea;
+ --text-color: #18181b;
+ --muted: #6b7280;
+ --line: #e7e5e4;
+ --emerald: #10b981;
+ --emerald-soft: #34d399;
+ --orange: #fb923c;
+ --violet: #807dfc;
+ --yellow: #facc15;
+ --panel-bg: #0a0a0a;
color-scheme: light;
}
@@ -17,17 +24,16 @@ body {
margin: 0;
padding: 40px 20px;
min-height: 100vh;
- font-family: Poppins, "Segoe UI", sans-serif;
- background:
- radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 30%),
- radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.12), transparent 35%),
- var(--background);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ background: var(--bg);
color: var(--text-color);
}
a {
color: inherit;
- text-decoration: none;
}
code {
@@ -37,103 +43,203 @@ code {
font-family: "JetBrains Mono", monospace;
}
-.doppar-welcome-shell {
- max-width: 960px;
- margin: 0 auto;
- text-align: center;
+.doppar-welcome {
+ width: 100%;
+ max-width: 980px;
}
-.doppar-welcome-header {
- margin-bottom: 20px;
+.doppar-card {
+ display: grid;
+ grid-template-columns: 1.05fr 0.95fr;
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ border-radius: 28px;
+ overflow: hidden;
+ box-shadow: 0 50px 100px -40px rgba(15, 23, 42, 0.18);
}
-.doppar-welcome-logo {
- width: 48px;
- height: auto;
- margin-bottom: 10px;
+.doppar-panel {
+ padding: 56px 52px;
}
-.doppar-welcome-title {
- margin: 0;
- font-size: 2rem;
- font-weight: 700;
+.doppar-eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-family: "JetBrains Mono", monospace;
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--emerald);
+ margin-bottom: 18px;
}
-.doppar-cta-box {
- margin: 0 auto 40px;
- max-width: 600px;
- width: 100%;
- border: 2px solid var(--primary);
- border-radius: 12px;
- padding: 20px;
- background: #ecfdf5;
+.doppar-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: var(--emerald);
+ box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}
-.doppar-cta-box h3 {
- margin: 0 0 10px;
- font-size: 1.2rem;
+.doppar-heading {
+ font-family: "Space Grotesk", sans-serif;
+ font-weight: 700;
+ font-size: 1.85rem;
+ line-height: 1.2;
+ margin: 0 0 30px;
}
-.doppar-cta-box p {
- margin: 0;
+.doppar-steps {
+ margin-bottom: 34px;
}
-.doppar-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
- gap: 20px;
- max-width: 800px;
- margin: 0 auto 40px;
+.doppar-step {
+ position: relative;
+ padding-left: 30px;
+ padding-bottom: 22px;
}
-.doppar-card {
- background: var(--card-bg);
- padding: 20px;
- border: 1px solid var(--border);
- border-radius: 12px;
- text-align: left;
- transition: box-shadow .2s;
+.doppar-step:last-child {
+ padding-bottom: 0;
}
-.doppar-card:hover {
- box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
+.doppar-step::before {
+ content: "";
+ position: absolute;
+ left: 5px;
+ top: 20px;
+ bottom: -2px;
+ width: 1px;
+ background: var(--line);
}
-.doppar-card h3 {
- margin: 0 0 8px;
- font-size: 1rem;
+.doppar-step:last-child::before {
+ display: none;
}
-.doppar-card p {
- margin: 0;
- font-size: 14px;
- color: #4b5563;
+.doppar-step-marker {
+ position: absolute;
+ left: 0;
+ top: 2px;
+ width: 11px;
+ height: 11px;
+ border-radius: 50%;
+ border: 1.5px solid var(--emerald-soft);
+ background: #fff;
}
-.doppar-btn-group {
- margin-top: 20px;
+.doppar-step-marker::after {
+ content: "";
+ position: absolute;
+ inset: 2.5px;
+ border-radius: 50%;
+ background: var(--emerald-soft);
}
-.doppar-btn {
- display: inline-block;
- margin: 0 10px;
- padding: 10px 18px;
- background-color: #fff;
- color: #111827;
+.doppar-step-label {
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ color: #9ca3af;
+ margin-bottom: 4px;
+}
+
+.doppar-step a {
+ font-size: 14.5px;
+ font-weight: 600;
+ color: var(--text-color);
text-decoration: none;
- border: 1px solid var(--border);
- border-radius: 6px;
- font-weight: 500;
- transition: background .2s;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
}
-.doppar-btn:hover {
- background-color: #c4c9c8;
+.doppar-step a:hover {
+ color: var(--emerald);
}
-.doppar-footer {
- margin-top: 50px;
+.doppar-arrow {
+ font-size: 12px;
+ color: var(--orange);
+}
+
+.doppar-cta {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 13px 26px;
+ border-radius: 999px;
+ background: var(--yellow);
+ color: #171717;
+ text-decoration: none;
font-size: 13px;
+ font-weight: 700;
+ letter-spacing: 0.01em;
+ box-shadow: 0 14px 30px -12px rgba(250, 204, 21, 0.65);
+ transition: transform .15s ease, box-shadow .15s ease;
+}
+
+.doppar-cta:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 18px 34px -12px rgba(250, 204, 21, 0.8);
+}
+
+.doppar-meta {
+ margin-top: 30px;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 4px;
+ font-family: "JetBrains Mono", monospace;
+ font-size: 12px;
color: #9ca3af;
- text-align: center;
+}
+
+.doppar-meta img {
+ height: 14px;
+ width: auto;
+ margin-right: 6px;
+}
+
+.doppar-meta a {
+ color: var(--muted);
+ text-decoration: none;
+ border-bottom: 1px solid var(--line);
+}
+
+.doppar-meta a:hover {
+ color: var(--orange);
+ border-color: var(--orange);
+}
+
+.doppar-art {
+ position: relative;
+ background: var(--panel-bg);
+ min-height: 460px;
+}
+
+.doppar-art svg {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+}
+
+@media (max-width: 860px) {
+ .doppar-card {
+ grid-template-columns: 1fr;
+ }
+
+ .doppar-panel {
+ padding: 40px 28px;
+ order: 2;
+ }
+
+ .doppar-art {
+ min-height: 200px;
+ order: 1;
+ }
}
diff --git a/src/Phaseolies/Console/Commands/stubs/frontend/css/none.stub b/src/Phaseolies/Console/Commands/stubs/frontend/css/none.stub
index c9827968..6bd0a9b3 100644
--- a/src/Phaseolies/Console/Commands/stubs/frontend/css/none.stub
+++ b/src/Phaseolies/Console/Commands/stubs/frontend/css/none.stub
@@ -1,9 +1,16 @@
:root {
- --primary: #10b981;
- --background: #f9fafb;
+ --bg: #fbfbf9;
--card-bg: #ffffff;
- --text-color: #111827;
- --border: #d1d5db;
+ --card-border: #ececea;
+ --text-color: #18181b;
+ --muted: #6b7280;
+ --line: #e7e5e4;
+ --emerald: #10b981;
+ --emerald-soft: #34d399;
+ --orange: #fb923c;
+ --violet: #807dfc;
+ --yellow: #facc15;
+ --panel-bg: #0a0a0a;
color-scheme: light;
}
@@ -15,17 +22,16 @@ body {
margin: 0;
padding: 40px 20px;
min-height: 100vh;
- font-family: Poppins, "Segoe UI", sans-serif;
- background:
- radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 30%),
- radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.12), transparent 35%),
- var(--background);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ background: var(--bg);
color: var(--text-color);
}
a {
color: inherit;
- text-decoration: none;
}
code {
@@ -35,103 +41,203 @@ code {
font-family: "JetBrains Mono", monospace;
}
-.doppar-welcome-shell {
- max-width: 960px;
- margin: 0 auto;
- text-align: center;
+.doppar-welcome {
+ width: 100%;
+ max-width: 980px;
}
-.doppar-welcome-header {
- margin-bottom: 20px;
+.doppar-card {
+ display: grid;
+ grid-template-columns: 1.05fr 0.95fr;
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ border-radius: 28px;
+ overflow: hidden;
+ box-shadow: 0 50px 100px -40px rgba(15, 23, 42, 0.18);
}
-.doppar-welcome-logo {
- width: 48px;
- height: auto;
- margin-bottom: 10px;
+.doppar-panel {
+ padding: 56px 52px;
}
-.doppar-welcome-title {
- margin: 0;
- font-size: 2rem;
- font-weight: 700;
+.doppar-eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-family: "JetBrains Mono", monospace;
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--emerald);
+ margin-bottom: 18px;
}
-.doppar-cta-box {
- margin: 0 auto 40px;
- max-width: 600px;
- width: 100%;
- border: 2px solid var(--primary);
- border-radius: 12px;
- padding: 20px;
- background: #ecfdf5;
+.doppar-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: var(--emerald);
+ box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}
-.doppar-cta-box h3 {
- margin: 0 0 10px;
- font-size: 1.2rem;
+.doppar-heading {
+ font-family: "Space Grotesk", sans-serif;
+ font-weight: 700;
+ font-size: 1.85rem;
+ line-height: 1.2;
+ margin: 0 0 30px;
}
-.doppar-cta-box p {
- margin: 0;
+.doppar-steps {
+ margin-bottom: 34px;
}
-.doppar-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
- gap: 20px;
- max-width: 800px;
- margin: 0 auto 40px;
+.doppar-step {
+ position: relative;
+ padding-left: 30px;
+ padding-bottom: 22px;
}
-.doppar-card {
- background: var(--card-bg);
- padding: 20px;
- border: 1px solid var(--border);
- border-radius: 12px;
- text-align: left;
- transition: box-shadow .2s;
+.doppar-step:last-child {
+ padding-bottom: 0;
}
-.doppar-card:hover {
- box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
+.doppar-step::before {
+ content: "";
+ position: absolute;
+ left: 5px;
+ top: 20px;
+ bottom: -2px;
+ width: 1px;
+ background: var(--line);
}
-.doppar-card h3 {
- margin: 0 0 8px;
- font-size: 1rem;
+.doppar-step:last-child::before {
+ display: none;
}
-.doppar-card p {
- margin: 0;
- font-size: 14px;
- color: #4b5563;
+.doppar-step-marker {
+ position: absolute;
+ left: 0;
+ top: 2px;
+ width: 11px;
+ height: 11px;
+ border-radius: 50%;
+ border: 1.5px solid var(--emerald-soft);
+ background: #fff;
}
-.doppar-btn-group {
- margin-top: 20px;
+.doppar-step-marker::after {
+ content: "";
+ position: absolute;
+ inset: 2.5px;
+ border-radius: 50%;
+ background: var(--emerald-soft);
}
-.doppar-btn {
- display: inline-block;
- margin: 0 10px;
- padding: 10px 18px;
- background-color: #fff;
- color: #111827;
+.doppar-step-label {
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ color: #9ca3af;
+ margin-bottom: 4px;
+}
+
+.doppar-step a {
+ font-size: 14.5px;
+ font-weight: 600;
+ color: var(--text-color);
text-decoration: none;
- border: 1px solid var(--border);
- border-radius: 6px;
- font-weight: 500;
- transition: background .2s;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
}
-.doppar-btn:hover {
- background-color: #c4c9c8;
+.doppar-step a:hover {
+ color: var(--emerald);
}
-.doppar-footer {
- margin-top: 50px;
+.doppar-arrow {
+ font-size: 12px;
+ color: var(--orange);
+}
+
+.doppar-cta {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 13px 26px;
+ border-radius: 999px;
+ background: var(--yellow);
+ color: #171717;
+ text-decoration: none;
font-size: 13px;
+ font-weight: 700;
+ letter-spacing: 0.01em;
+ box-shadow: 0 14px 30px -12px rgba(250, 204, 21, 0.65);
+ transition: transform .15s ease, box-shadow .15s ease;
+}
+
+.doppar-cta:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 18px 34px -12px rgba(250, 204, 21, 0.8);
+}
+
+.doppar-meta {
+ margin-top: 30px;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 4px;
+ font-family: "JetBrains Mono", monospace;
+ font-size: 12px;
color: #9ca3af;
- text-align: center;
+}
+
+.doppar-meta img {
+ height: 14px;
+ width: auto;
+ margin-right: 6px;
+}
+
+.doppar-meta a {
+ color: var(--muted);
+ text-decoration: none;
+ border-bottom: 1px solid var(--line);
+}
+
+.doppar-meta a:hover {
+ color: var(--orange);
+ border-color: var(--orange);
+}
+
+.doppar-art {
+ position: relative;
+ background: var(--panel-bg);
+ min-height: 460px;
+}
+
+.doppar-art svg {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+}
+
+@media (max-width: 860px) {
+ .doppar-card {
+ grid-template-columns: 1fr;
+ }
+
+ .doppar-panel {
+ padding: 40px 28px;
+ order: 2;
+ }
+
+ .doppar-art {
+ min-height: 200px;
+ order: 1;
+ }
}
diff --git a/src/Phaseolies/Console/Commands/stubs/frontend/css/tailwind.stub b/src/Phaseolies/Console/Commands/stubs/frontend/css/tailwind.stub
index 6fee4dc9..7af62337 100644
--- a/src/Phaseolies/Console/Commands/stubs/frontend/css/tailwind.stub
+++ b/src/Phaseolies/Console/Commands/stubs/frontend/css/tailwind.stub
@@ -3,11 +3,18 @@
@source "../../views";
:root {
- --primary: #10b981;
- --background: #f9fafb;
+ --bg: #fbfbf9;
--card-bg: #ffffff;
- --text-color: #111827;
- --border: #d1d5db;
+ --card-border: #ececea;
+ --text-color: #18181b;
+ --muted: #6b7280;
+ --line: #e7e5e4;
+ --emerald: #10b981;
+ --emerald-soft: #34d399;
+ --orange: #fb923c;
+ --violet: #807dfc;
+ --yellow: #facc15;
+ --panel-bg: #0a0a0a;
color-scheme: light;
}
@@ -19,17 +26,16 @@ body {
margin: 0;
padding: 40px 20px;
min-height: 100vh;
- font-family: Poppins, "Segoe UI", sans-serif;
- background:
- radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 30%),
- radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.12), transparent 35%),
- var(--background);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ background: var(--bg);
color: var(--text-color);
}
a {
color: inherit;
- text-decoration: none;
}
code {
@@ -39,103 +45,203 @@ code {
font-family: "JetBrains Mono", monospace;
}
-.doppar-welcome-shell {
- max-width: 960px;
- margin: 0 auto;
- text-align: center;
+.doppar-welcome {
+ width: 100%;
+ max-width: 980px;
}
-.doppar-welcome-header {
- margin-bottom: 20px;
+.doppar-card {
+ display: grid;
+ grid-template-columns: 1.05fr 0.95fr;
+ background: var(--card-bg);
+ border: 1px solid var(--card-border);
+ border-radius: 28px;
+ overflow: hidden;
+ box-shadow: 0 50px 100px -40px rgba(15, 23, 42, 0.18);
}
-.doppar-welcome-logo {
- width: 48px;
- height: auto;
- margin-bottom: 10px;
+.doppar-panel {
+ padding: 56px 52px;
}
-.doppar-welcome-title {
- margin: 0;
- font-size: 2rem;
- font-weight: 700;
+.doppar-eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-family: "JetBrains Mono", monospace;
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--emerald);
+ margin-bottom: 18px;
}
-.doppar-cta-box {
- margin: 0 auto 40px;
- max-width: 600px;
- width: 100%;
- border: 2px solid var(--primary);
- border-radius: 12px;
- padding: 20px;
- background: #ecfdf5;
+.doppar-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: var(--emerald);
+ box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}
-.doppar-cta-box h3 {
- margin: 0 0 10px;
- font-size: 1.2rem;
+.doppar-heading {
+ font-family: "Space Grotesk", sans-serif;
+ font-weight: 700;
+ font-size: 1.85rem;
+ line-height: 1.2;
+ margin: 0 0 30px;
}
-.doppar-cta-box p {
- margin: 0;
+.doppar-steps {
+ margin-bottom: 34px;
}
-.doppar-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
- gap: 20px;
- max-width: 800px;
- margin: 0 auto 40px;
+.doppar-step {
+ position: relative;
+ padding-left: 30px;
+ padding-bottom: 22px;
}
-.doppar-card {
- background: var(--card-bg);
- padding: 20px;
- border: 1px solid var(--border);
- border-radius: 12px;
- text-align: left;
- transition: box-shadow .2s;
+.doppar-step:last-child {
+ padding-bottom: 0;
}
-.doppar-card:hover {
- box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
+.doppar-step::before {
+ content: "";
+ position: absolute;
+ left: 5px;
+ top: 20px;
+ bottom: -2px;
+ width: 1px;
+ background: var(--line);
}
-.doppar-card h3 {
- margin: 0 0 8px;
- font-size: 1rem;
+.doppar-step:last-child::before {
+ display: none;
}
-.doppar-card p {
- margin: 0;
- font-size: 14px;
- color: #4b5563;
+.doppar-step-marker {
+ position: absolute;
+ left: 0;
+ top: 2px;
+ width: 11px;
+ height: 11px;
+ border-radius: 50%;
+ border: 1.5px solid var(--emerald-soft);
+ background: #fff;
}
-.doppar-btn-group {
- margin-top: 20px;
+.doppar-step-marker::after {
+ content: "";
+ position: absolute;
+ inset: 2.5px;
+ border-radius: 50%;
+ background: var(--emerald-soft);
}
-.doppar-btn {
- display: inline-block;
- margin: 0 10px;
- padding: 10px 18px;
- background-color: #fff;
- color: #111827;
+.doppar-step-label {
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ color: #9ca3af;
+ margin-bottom: 4px;
+}
+
+.doppar-step a {
+ font-size: 14.5px;
+ font-weight: 600;
+ color: var(--text-color);
text-decoration: none;
- border: 1px solid var(--border);
- border-radius: 6px;
- font-weight: 500;
- transition: background .2s;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
}
-.doppar-btn:hover {
- background-color: #c4c9c8;
+.doppar-step a:hover {
+ color: var(--emerald);
}
-.doppar-footer {
- margin-top: 50px;
+.doppar-arrow {
+ font-size: 12px;
+ color: var(--orange);
+}
+
+.doppar-cta {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 13px 26px;
+ border-radius: 999px;
+ background: var(--yellow);
+ color: #171717;
+ text-decoration: none;
font-size: 13px;
+ font-weight: 700;
+ letter-spacing: 0.01em;
+ box-shadow: 0 14px 30px -12px rgba(250, 204, 21, 0.65);
+ transition: transform .15s ease, box-shadow .15s ease;
+}
+
+.doppar-cta:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 18px 34px -12px rgba(250, 204, 21, 0.8);
+}
+
+.doppar-meta {
+ margin-top: 30px;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 4px;
+ font-family: "JetBrains Mono", monospace;
+ font-size: 12px;
color: #9ca3af;
- text-align: center;
+}
+
+.doppar-meta img {
+ height: 14px;
+ width: auto;
+ margin-right: 6px;
+}
+
+.doppar-meta a {
+ color: var(--muted);
+ text-decoration: none;
+ border-bottom: 1px solid var(--line);
+}
+
+.doppar-meta a:hover {
+ color: var(--orange);
+ border-color: var(--orange);
+}
+
+.doppar-art {
+ position: relative;
+ background: var(--panel-bg);
+ min-height: 460px;
+}
+
+.doppar-art svg {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+}
+
+@media (max-width: 860px) {
+ .doppar-card {
+ grid-template-columns: 1fr;
+ }
+
+ .doppar-panel {
+ padding: 40px 28px;
+ order: 2;
+ }
+
+ .doppar-art {
+ min-height: 200px;
+ order: 1;
+ }
}
diff --git a/src/Phaseolies/Console/Commands/stubs/frontend/views/layouts/app.stub b/src/Phaseolies/Console/Commands/stubs/frontend/views/layouts/app.stub
index 7710ccdc..48b1338a 100644
--- a/src/Phaseolies/Console/Commands/stubs/frontend/views/layouts/app.stub
+++ b/src/Phaseolies/Console/Commands/stubs/frontend/views/layouts/app.stub
@@ -5,7 +5,8 @@
+
-
-
+
+
+
+ Application ready
+
+ Let's build something.
+ +
+
+
+ Learn
+
+
+
+
+ 01 · Learn
+ Read the documentation ↗
+
+
+
+ 02 · Explore
+ See what's new in 4.x ↗
+
+
+
+ 03 · Connect
+ Star the project on GitHub ↗
+
+ ![Doppar]()
+ {{ runtime.version ?? 'Doppar' }} · {{ runtime.phpVersion ?? '' }} ·
+ Doppar News ↗
+
+
+
+
-
-
+ .frame-toggle:hover {
+ background: color-mix(in srgb, var(--ink) 3%, transparent);
+ }
-
+ .vendor-tag {
+ font-size: 9.5px;
+ font-weight: 700;
+ letter-spacing: .06em;
+ text-transform: uppercase;
+ color: var(--muted);
+ border: 1px solid var(--line);
+ border-radius: 4px;
+ padding: 1px 5px;
+ flex: none;
+ }
-
-
+ .frame-main {
+ flex: 1;
+ min-width: 0;
+ }
-
-
-
+ .frame-file {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ font-size: 11px;
+ color: var(--muted);
+ margin-top: 2px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
-
-
- [[ $exception_class ]]
-
+ .frame-sig {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ font-size: 12.5px;
+ font-weight: 600;
+ color: var(--ink);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
-
-
-
-
-
-
-
-
- Doppar
- [[ $doppar_version ]]
-
-
- PHP
- [[ $php_version ]]
-
- - [[ $error_message ]] -
-
-
+ .chev {
+ width: 14px;
+ height: 14px;
+ color: var(--muted);
+ flex: none;
+ transition: transform .18s ease;
+ }
-
-
-
-
- [[ $request_method ]]
- [[ $request_url ]]
-
-
-
-
+ .frame-toggle[aria-expanded="true"] .chev,
+ .kv-toggle[aria-expanded="true"] .chev {
+ transform: rotate(180deg);
+ }
-
-
-
-
- Date
-
- [[ $timestamp ]]
-
-
- Status Code
-
-
-
- [[ $status_code ]]
-
-
-
- Method
-
-
- [[ $request_method ]]
-
-
-
+ .frame-body {
+ display: none;
+ border-top: 1px solid var(--line);
+ background: var(--surface-2);
+ }
-
-
-
+ .frame-body .code {
+ background: transparent;
+ }
-
-
-
-
-
-
-
-
- [[ $error_file ]]
- Line [[ $error_line ]]
-
-
- [[! $contents !]]-
-
+ .dual-col .panel {
+ margin-bottom: 0;
+ }
-
-
-
+ /* ============ DUAL COLUMN ============ */
+ .dual-col {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 18px;
+ margin-bottom: 18px;
+ }
-
-
-
-
- Stack Trace
- -
- #include('trace-frames', ['traces' => $traces])
-
-
- #include('template-headers', ['headers' => $headers])
-
+ @media (max-width: 760px) {
+ .dual-col {
+ grid-template-columns: 1fr;
+ }
+ }
-
-
-
+ .kv-toggle {
+ width: 100%;
+ background: none;
+ border: none;
+ text-align: left;
+ cursor: pointer;
+ padding: 0;
+ }
-
-
-
- #if (!empty($request_body))
-
- #else
-
-
-
- Request Body
- #if (!empty($request_body))
-
- #endif
-
-
-
- #endif
- Empty Request Body
-
+ .kv-panel {
+ display: none;
+ }
-
-
+ .kv-list {
+ padding: 6px 16px 14px;
+ }
-
-
-
-
-
-
-
- Routing
-
+ .kv-row {
+ display: flex;
+ align-items: baseline;
+ gap: 8px;
+ padding: 6px 0;
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ font-size: 12px;
+ }
-
-
-
+ .kv-key {
+ color: var(--muted);
+ text-transform: uppercase;
+ letter-spacing: .03em;
+ font-size: 10.5px;
+ flex: none;
+ }
-
- Route Name
-
-
- Name
-
-
-
- [[ $current_route_name ?? 'unnamed_route' ]]
-
-
-
-
+ .empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 34px 16px;
+ color: var(--muted);
+ gap: 8px;
+ }
-
- Controller
+ .kv-dots {
+ flex: 1;
+ border-bottom: 1px dashed var(--line);
+ margin-bottom: 4px;
+ min-width: 12px;
+ }
-
-
- Action
-
-
+ .kv-val {
+ color: var(--ink-soft);
+ text-align: right;
+ max-width: 60%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
- #if(!empty($current_route_action))
-
- [[ $current_route_action ]]
-
- #else
-
- Closure / No Action
-
- #endif
-
-
-
+ .empty-state span {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ font-size: 10.5px;
+ letter-spacing: .1em;
+ text-transform: uppercase;
+ }
-
- Middleware ([[ count($current_middleware ?? []) ]])
+ .empty-state svg {
+ width: 28px;
+ height: 28px;
+ opacity: .55;
+ }
- #if (!empty($current_middleware))
- #foreach(($current_middleware ?? []) as $index => $mw)
-
-
- [[ $index + 1 ]]
-
-
-
- [[ $mw ]]
-
-
- #endforeach
- #else
-
-
- No middleware
-
- #endif
-
-
+ /* ============ ROUTING ============ */
+ .routing-grid {
+ padding: 18px 16px 4px;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ gap: 18px 28px;
+ }
+ .field-label {
+ font-size: 10.5px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: .09em;
+ color: var(--muted);
+ margin-bottom: 10px;
+ }
+
+ .route-row {
+ display: flex;
+ align-items: baseline;
+ gap: 8px;
+ padding: 5px 0;
+ }
+
+ .route-key {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ font-size: 10.5px;
+ font-weight: 700;
+ color: var(--muted);
+ text-transform: uppercase;
+ flex: none;
+ }
+
+ .route-dots {
+ flex: 1;
+ border-bottom: 1px dashed var(--line);
+ margin-bottom: 4px;
+ }
+
+ .route-val {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--ink-soft);
+ word-break: break-all;
+ }
+
+ .route-none {
+ font-size: 12px;
+ font-style: italic;
+ color: var(--muted);
+ padding-bottom: 14px;
+ }
+
+ /* ============ INFO GRID ============ */
+ .info-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 18px;
+ margin-bottom: 18px;
+ }
+
+ @media (max-width: 760px) {
+ .info-grid {
+ grid-template-columns: 1fr;
+ }
+ }
+
+ .info-card {
+ padding: 16px;
+ }
+
+ .info-card .field-label {
+ margin-bottom: 12px;
+ }
+
+ .info-row {
+ margin-bottom: 12px;
+ }
+
+ .info-row:last-child {
+ margin-bottom: 0;
+ }
+
+ .info-row .k {
+ font-size: 10.5px;
+ color: var(--muted);
+ text-transform: uppercase;
+ letter-spacing: .04em;
+ margin-bottom: 2px;
+ }
+
+ .info-row .v {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ font-size: 13px;
+ color: var(--ink-soft);
+ font-variant-numeric: tabular-nums;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .foot {
+ text-align: center;
+ padding: 18px 0 36px;
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ font-size: 10px;
+ letter-spacing: .18em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+
+
+
+ Route Parameters
+ .json-body {
+ margin: 0;
+ padding: 14px 16px;
+ overflow-x: auto;
+ font-size: 12px;
+ line-height: 1.6;
+ color: var(--ink-soft);
+ background: var(--surface-2);
+ }
- #if (!empty($current_route_params))
- #foreach ($current_route_params as $key => $val)
-
-
- [[ $key ]]
-
-
-
- [[ $val ]]
-
-
- #endforeach
- #else
-
-
- No parameters
-
- #endif
-
+
+
+ [[ $status_code ]]
+
+
+
+
+
+
+
Uncaught — [[ $exception_class ]]
+[[ $error_message ]]
+
+ [[ count($traces) ]] frames
+
+
+ [[ $request_method ]]
+ [[ $request_url ]]
+
-
-
-
-
-
-
+
+
+
-
-
- System
+
+
+ [[ $error_file ]]
+ Line [[ $error_line ]]
-
-
-
- Server
- [[ $server_software ]]
-
-
+
-
-
- Platform
- [[ $platform ]]
+ [[! $contents !]]
+
+
+
+
+
- Stack Trace
+ [[ count($traces) ]] frames +
+
+
+
-
-
-
-
- Memory
+
+ #include('trace-frames', ['traces' => $traces])
-
-
-
Current Usage
- [[ number_format($memory_usage / 1024 / 1024, 2) ]] MB
+
+
+
+
+
+ #include('template-headers', ['headers' => $headers])
+
+
+
+
-
-
+
- Request Body
+ + #if (!empty($request_body)) + payload + #else + empty + #endif +
-
+ #endif
+ Peak Usage
- [[ number_format($peack_memory_usage / 1024 / 1024, 2) ]] MB
+ #if (!empty($request_body))
+ [[ json_encode($request_body, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) ]]
+
-
+
+ No payload on this request
+
-
-
+
-
-
+
+
-
-
- User
+
+
+
- #if ($user_info)
- Routing
+
- #else
-
-
-
-
-
ID
- [[ $user_info['id'] ]]
+ Route
+ Name[[ $current_route_name ?? 'unnamed_route' ]]
+
+ Action
+ #if (!empty($current_route_action))
+ [[ $current_route_action ]]
+ #else
+ Closure
+ #endif
+
-
+ Email
- [[ $user_info['email'] ]]
+ Middleware ([[ count($current_middleware ?? []) ]])
+ #if (!empty($current_middleware))
+ #foreach (($current_middleware ?? []) as $index => $mw)
+ [[ $index + 1 ]][[ $mw ]]
+ #endforeach
+ #else
+ No middleware
+ #endif
+
+
Route Parameters
+ #if (!empty($current_route_params))
+ #foreach ($current_route_params as $key => $val)
+ [[ $key ]][[ $val ]]
+ #endforeach
+ #else
+ No parameters
+ #endif
-
-
- #endif
+
+
+
+ No User
-
+
+
+
+
+
+
+
+
+
+
+
+ #else
+
- System
+ Server
[[ $server_software ]]
Platform
[[ $platform ]]
Memory
+ Current Usage
[[ number_format($memory_usage / 1024 / 1024, 2) ]] MB
Peak Usage
[[ number_format($peack_memory_usage / 1024 / 1024, 2) ]] MB
User
+ #if ($user_info)
+ ID
[[ $user_info['id'] ]]
Email
[[ $user_info['email'] ]]
+
+ No user
+
+ #endif
+
- Doppar Framework
-
- Doppar Framework · Request Diagnostic
+
+