mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
feat(qt6): Material Design 3 frontpage — tonal surfaces, pill buttons, proper type scale
Full MD3 pass on FrontPage and light theme: - Tonal surface containers (surfaceContainer, High, Highest) - Rounded pill buttons (radius 22) and cards (radius 12-16) - MD3 type scale with DemiBold/Bold weight hierarchy - Level badges with rounded-square containers instead of circles - Proper onSurface/onSurfaceVariant color roles - Light theme: cool blue-gray (#e8eaf2 bg, #f0f1f8 paper) - Blue gradient hero wash, tonal stats strip - Tag chips with tinted backgrounds matching level accent Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -8,7 +8,6 @@ Rectangle {
|
||||
id: root
|
||||
color: Theme.background
|
||||
|
||||
// ── DBAL connection ──
|
||||
DBALProvider { id: dbal }
|
||||
|
||||
property bool dbalOnline: dbal.connected
|
||||
@@ -18,17 +17,13 @@ Rectangle {
|
||||
function loadPlatformStatus() {
|
||||
dbal.ping(function(success) {
|
||||
if (success) {
|
||||
dbal.execute("core/version", {}, function(result, error) {
|
||||
if (result && result.version) platformVersion = result.version
|
||||
})
|
||||
dbal.execute("core/stats", {}, function(result, error) {
|
||||
if (result) {
|
||||
publicStats = {
|
||||
users: result.totalUsers || publicStats.users,
|
||||
packages: result.totalPackages || publicStats.packages,
|
||||
workflows: result.totalWorkflows || publicStats.workflows,
|
||||
backends: result.totalBackends || publicStats.backends
|
||||
}
|
||||
dbal.execute("core/version", {}, function(r, e) { if (r && r.version) platformVersion = r.version })
|
||||
dbal.execute("core/stats", {}, function(r, e) {
|
||||
if (r) publicStats = {
|
||||
users: r.totalUsers || publicStats.users,
|
||||
packages: r.totalPackages || publicStats.packages,
|
||||
workflows: r.totalWorkflows || publicStats.workflows,
|
||||
backends: r.totalBackends || publicStats.backends
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -37,50 +32,31 @@ Rectangle {
|
||||
|
||||
Component.onCompleted: loadPlatformStatus()
|
||||
|
||||
// ── Palette — cool/techy, theme-aware ──
|
||||
readonly property color accentBlue: "#6366F1" // indigo-500
|
||||
readonly property color accentCyan: "#06B6D4" // cyan-500
|
||||
readonly property color accentViolet: "#8B5CF6" // violet-500
|
||||
readonly property color accentAmber: "#F59E0B" // amber-500
|
||||
readonly property color accentRose: "#F43F5E" // rose-500
|
||||
// Theme-aware surface colors (work in both light and dark)
|
||||
// ── MD3-inspired palette ──
|
||||
readonly property bool isDark: Theme.mode === "dark"
|
||||
readonly property color subtleText: isDark ? Qt.rgba(1, 1, 1, 0.45) : Qt.rgba(0, 0, 0, 0.45)
|
||||
readonly property color subtleBorder: isDark ? Qt.rgba(1, 1, 1, 0.08) : Qt.rgba(0, 0, 0, 0.08)
|
||||
readonly property color cardBg: isDark ? Qt.rgba(1, 1, 1, 0.03) : Qt.rgba(0, 0, 0, 0.02)
|
||||
readonly property color accentBlue: "#6366F1"
|
||||
readonly property color accentCyan: "#06B6D4"
|
||||
readonly property color accentViolet: "#8B5CF6"
|
||||
readonly property color accentAmber: "#F59E0B"
|
||||
readonly property color accentRose: "#F43F5E"
|
||||
|
||||
// ── Level definitions ──
|
||||
// MD3 tonal surfaces
|
||||
readonly property color surfaceContainer: isDark ? Qt.rgba(1, 1, 1, 0.05) : Qt.rgba(0.31, 0.31, 0.44, 0.06)
|
||||
readonly property color surfaceContainerHigh: isDark ? Qt.rgba(1, 1, 1, 0.08) : Qt.rgba(0.31, 0.31, 0.44, 0.10)
|
||||
readonly property color surfaceContainerHighest: isDark ? Qt.rgba(1, 1, 1, 0.12) : Qt.rgba(0.31, 0.31, 0.44, 0.14)
|
||||
readonly property color onSurface: Theme.text
|
||||
readonly property color onSurfaceVariant: Theme.textSecondary
|
||||
readonly property color outline: Theme.border
|
||||
readonly property color outlineVariant: isDark ? Qt.rgba(1, 1, 1, 0.06) : Qt.rgba(0, 0, 0, 0.08)
|
||||
readonly property color primaryContainer: isDark ? Qt.rgba(accentBlue.r, accentBlue.g, accentBlue.b, 0.15) : Qt.rgba(accentBlue.r, accentBlue.g, accentBlue.b, 0.12)
|
||||
|
||||
// ── Data ──
|
||||
property var levels: [
|
||||
{
|
||||
level: 1, name: "Public", accent: "#94A3B8", // slate-400
|
||||
icon: "\u2302", // house
|
||||
desc: "Explore the platform. Browse the component library, storybook, and public API.",
|
||||
tags: ["Landing", "Storybook", "Docs"]
|
||||
},
|
||||
{
|
||||
level: 2, name: "User", accent: "#6366F1", // indigo
|
||||
icon: "\u2605", // star
|
||||
desc: "Your space. Dashboard, profile, forum, gallery, and all installed packages.",
|
||||
tags: ["Dashboard", "Profile", "Forum", "Gallery"]
|
||||
},
|
||||
{
|
||||
level: 3, name: "Admin", accent: "#06B6D4", // cyan
|
||||
icon: "\u2699", // gear
|
||||
desc: "Moderate and manage. User tables, audit logs, content moderation tools.",
|
||||
tags: ["Users", "Audit", "Moderation"]
|
||||
},
|
||||
{
|
||||
level: 4, name: "God", accent: "#8B5CF6", // violet
|
||||
icon: "\u26A1", // lightning
|
||||
desc: "The builder tier. Visual workflow canvas, schema browser, page builder, 14 power tools.",
|
||||
tags: ["Workflows", "Schemas", "Pages", "14 tools"]
|
||||
},
|
||||
{
|
||||
level: 5, name: "Super God", accent: "#F43F5E", // rose
|
||||
icon: "\u2B50", // star
|
||||
desc: "Platform control. Multi-tenant management, system config, god-level promotions.",
|
||||
tags: ["Tenants", "Config", "Promote"]
|
||||
}
|
||||
{ level: 1, name: "Public", accent: "#94A3B8", desc: "Explore the platform. Component library, storybook, and public API.", tags: ["Landing", "Storybook", "Docs"] },
|
||||
{ level: 2, name: "User", accent: accentBlue, desc: "Your space. Dashboard, profile, forum, gallery, and packages.", tags: ["Dashboard", "Profile", "Forum", "Gallery"] },
|
||||
{ level: 3, name: "Admin", accent: accentCyan, desc: "Moderate and manage. User tables, audit logs, content tools.", tags: ["Users", "Audit", "Moderation"] },
|
||||
{ level: 4, name: "God", accent: accentViolet, desc: "The builder tier. Visual workflows, schema browser, 14 power tools.", tags: ["Workflows", "Schemas", "Pages", "14 tools"] },
|
||||
{ level: 5, name: "Super God", accent: accentRose, desc: "Platform control. Multi-tenant management, system config.", tags: ["Tenants", "Config", "Promote"] }
|
||||
]
|
||||
|
||||
property var techStack: [
|
||||
@@ -109,126 +85,154 @@ Rectangle {
|
||||
width: parent.width
|
||||
spacing: 0
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
// HERO
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 360
|
||||
Layout.preferredHeight: 380
|
||||
color: "transparent"
|
||||
|
||||
// Subtle gradient — stronger in light mode for warmth
|
||||
// Blue gradient wash
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
gradient: Gradient {
|
||||
orientation: Gradient.Horizontal
|
||||
GradientStop { position: 0.0; color: isDark ? Qt.rgba(0.39, 0.4, 0.95, 0.06) : Qt.rgba(0.30, 0.45, 0.90, 0.15) }
|
||||
GradientStop { position: 0.5; color: isDark ? "transparent" : Qt.rgba(0.35, 0.55, 0.95, 0.06) }
|
||||
GradientStop { position: 1.0; color: isDark ? Qt.rgba(0.55, 0.36, 0.96, 0.04) : Qt.rgba(0.50, 0.40, 0.92, 0.12) }
|
||||
}
|
||||
}
|
||||
// Vertical blue wash in light mode
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
visible: !isDark
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0.0; color: Qt.rgba(0.35, 0.50, 0.95, 0.10) }
|
||||
GradientStop { position: 0.6; color: Qt.rgba(0.40, 0.55, 0.90, 0.04) }
|
||||
GradientStop { position: 0.0; color: isDark ? Qt.rgba(0.39, 0.4, 0.95, 0.06) : Qt.rgba(0.30, 0.40, 0.90, 0.12) }
|
||||
GradientStop { position: 0.7; color: isDark ? "transparent" : Qt.rgba(0.35, 0.45, 0.88, 0.04) }
|
||||
GradientStop { position: 1.0; color: "transparent" }
|
||||
}
|
||||
}
|
||||
|
||||
// Top-down fade line
|
||||
Rectangle {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: 1
|
||||
color: subtleBorder
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.centerIn: parent
|
||||
width: Math.min(parent.width - 80, 720)
|
||||
spacing: 16
|
||||
|
||||
// Version pill
|
||||
// Version pill — MD3 small chip
|
||||
Rectangle {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
width: versionLabel.implicitWidth + 20
|
||||
height: 24
|
||||
radius: 12
|
||||
color: Qt.rgba(0.39, 0.4, 0.95, 0.12)
|
||||
border.color: Qt.rgba(0.39, 0.4, 0.95, 0.25)
|
||||
border.width: 1
|
||||
width: vLabel.implicitWidth + 24
|
||||
height: 28
|
||||
radius: 14
|
||||
color: primaryContainer
|
||||
|
||||
CText {
|
||||
id: versionLabel
|
||||
id: vLabel
|
||||
anchors.centerIn: parent
|
||||
text: "v" + platformVersion
|
||||
variant: "caption"
|
||||
color: accentBlue
|
||||
font.family: "monospace"
|
||||
font.pixelSize: 12
|
||||
color: accentBlue
|
||||
}
|
||||
}
|
||||
|
||||
CText {
|
||||
variant: "h1"
|
||||
text: "MetaBuilder"
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
font.pixelSize: 48
|
||||
font.pixelSize: 52
|
||||
font.weight: Font.Black
|
||||
font.letterSpacing: -1.5
|
||||
font.letterSpacing: -2
|
||||
color: onSurface
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
||||
CText {
|
||||
variant: "body1"
|
||||
text: "The universal platform for building data-driven applications."
|
||||
font.pixelSize: 17
|
||||
color: onSurfaceVariant
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
opacity: isDark ? 0.5 : 0.7
|
||||
font.pixelSize: 16
|
||||
}
|
||||
|
||||
CText {
|
||||
variant: "body2"
|
||||
text: "95% JSON config \u00B7 5% infrastructure \u00B7 Desktop + Web + CLI"
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
opacity: isDark ? 0.3 : 0.5
|
||||
font.family: "monospace"
|
||||
text: "95% JSON config \u00B7 5% infrastructure \u00B7 Desktop + Web + CLI"
|
||||
font.pixelSize: 13
|
||||
font.family: "monospace"
|
||||
color: onSurfaceVariant
|
||||
opacity: isDark ? 0.4 : 0.55
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.topMargin: 16
|
||||
spacing: 10
|
||||
Layout.topMargin: 20
|
||||
spacing: 12
|
||||
|
||||
CButton {
|
||||
text: "Get Started"
|
||||
variant: "primary"
|
||||
onClicked: appWindow.currentView = "login"
|
||||
// MD3 filled button
|
||||
Rectangle {
|
||||
width: getStartedText.implicitWidth + 40
|
||||
height: 44
|
||||
radius: 22
|
||||
color: accentBlue
|
||||
|
||||
CText {
|
||||
id: getStartedText
|
||||
anchors.centerIn: parent
|
||||
text: "Get Started"
|
||||
font.pixelSize: 14
|
||||
font.weight: Font.DemiBold
|
||||
color: "#ffffff"
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: appWindow.currentView = "login"
|
||||
}
|
||||
}
|
||||
CButton {
|
||||
text: "Storybook"
|
||||
variant: "ghost"
|
||||
onClicked: appWindow.currentView = "storybook"
|
||||
|
||||
// MD3 outlined button
|
||||
Rectangle {
|
||||
width: sbText.implicitWidth + 32
|
||||
height: 44
|
||||
radius: 22
|
||||
color: "transparent"
|
||||
border.color: outline
|
||||
border.width: 1
|
||||
|
||||
CText {
|
||||
id: sbText
|
||||
anchors.centerIn: parent
|
||||
text: "Storybook"
|
||||
font.pixelSize: 14
|
||||
color: accentBlue
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: appWindow.currentView = "storybook"
|
||||
}
|
||||
}
|
||||
CButton {
|
||||
text: "Packages"
|
||||
variant: "ghost"
|
||||
onClicked: appWindow.currentView = "marketplace"
|
||||
|
||||
Rectangle {
|
||||
width: pkgText.implicitWidth + 32
|
||||
height: 44
|
||||
radius: 22
|
||||
color: "transparent"
|
||||
border.color: outline
|
||||
border.width: 1
|
||||
|
||||
CText {
|
||||
id: pkgText
|
||||
anchors.centerIn: parent
|
||||
text: "Packages"
|
||||
font.pixelSize: 14
|
||||
color: accentBlue
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: appWindow.currentView = "marketplace"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// STATS STRIP
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
// STATS
|
||||
// ════════════════════════════════════════════════════════
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 80
|
||||
color: isDark ? cardBg : Qt.rgba(0.35, 0.50, 0.90, 0.07)
|
||||
Layout.preferredHeight: 88
|
||||
color: surfaceContainer
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
@@ -249,22 +253,21 @@ Rectangle {
|
||||
|
||||
RowLayout {
|
||||
anchors.centerIn: parent
|
||||
spacing: 8
|
||||
spacing: 10
|
||||
|
||||
CText {
|
||||
text: modelData.value
|
||||
font.pixelSize: 22
|
||||
font.pixelSize: 24
|
||||
font.weight: Font.Bold
|
||||
font.family: "monospace"
|
||||
color: accentBlue
|
||||
}
|
||||
CText {
|
||||
text: modelData.label
|
||||
variant: "caption"
|
||||
font.family: "monospace"
|
||||
font.pixelSize: 10
|
||||
font.letterSpacing: 1.5
|
||||
opacity: isDark ? 0.3 : 0.55
|
||||
font.family: "monospace"
|
||||
font.letterSpacing: 2
|
||||
color: onSurfaceVariant
|
||||
}
|
||||
}
|
||||
|
||||
@@ -273,17 +276,17 @@ Rectangle {
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 1
|
||||
height: 28
|
||||
color: subtleBorder
|
||||
height: 32
|
||||
color: outlineVariant
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
// ACCESS LEVELS
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 48
|
||||
@@ -291,24 +294,14 @@ Rectangle {
|
||||
Layout.rightMargin: 40
|
||||
spacing: 24
|
||||
|
||||
RowLayout {
|
||||
CText {
|
||||
text: "Access Levels"
|
||||
font.pixelSize: 22
|
||||
font.weight: Font.Bold
|
||||
color: onSurface
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
spacing: 8
|
||||
CText {
|
||||
variant: "h3"
|
||||
text: "Access Levels"
|
||||
font.weight: Font.Bold
|
||||
}
|
||||
Rectangle {
|
||||
width: 40
|
||||
height: 2
|
||||
radius: 1
|
||||
color: accentBlue
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
}
|
||||
|
||||
// Level cards — horizontal strip
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 12
|
||||
@@ -317,12 +310,13 @@ Rectangle {
|
||||
model: levels
|
||||
delegate: Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 180
|
||||
radius: 8
|
||||
color: cardBg
|
||||
border.color: lvlMA.containsMouse ? modelData.accent : subtleBorder
|
||||
Layout.preferredHeight: 196
|
||||
radius: 16
|
||||
color: lvlMA.containsMouse ? surfaceContainerHighest : surfaceContainerHigh
|
||||
border.color: lvlMA.containsMouse ? modelData.accent : outlineVariant
|
||||
border.width: 1
|
||||
|
||||
Behavior on color { ColorAnimation { duration: 200 } }
|
||||
Behavior on border.color { ColorAnimation { duration: 200 } }
|
||||
|
||||
MouseArea {
|
||||
@@ -341,32 +335,33 @@ Rectangle {
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 14
|
||||
spacing: 6
|
||||
anchors.margins: 16
|
||||
spacing: 8
|
||||
|
||||
// Header row: accent bar + level number + name
|
||||
RowLayout {
|
||||
spacing: 8
|
||||
spacing: 10
|
||||
|
||||
// MD3 small badge
|
||||
Rectangle {
|
||||
width: 3
|
||||
height: 20
|
||||
radius: 1.5
|
||||
color: modelData.accent
|
||||
width: 28
|
||||
height: 28
|
||||
radius: 8
|
||||
color: Qt.rgba(modelData.accent.r, modelData.accent.g, modelData.accent.b, isDark ? 0.2 : 0.15)
|
||||
|
||||
CText {
|
||||
anchors.centerIn: parent
|
||||
text: modelData.level.toString()
|
||||
font.pixelSize: 12
|
||||
font.weight: Font.Bold
|
||||
color: modelData.accent
|
||||
}
|
||||
}
|
||||
|
||||
CText {
|
||||
text: "L" + modelData.level
|
||||
font.family: "monospace"
|
||||
font.pixelSize: 11
|
||||
font.bold: true
|
||||
color: modelData.accent
|
||||
}
|
||||
|
||||
CText {
|
||||
variant: "subtitle1"
|
||||
text: modelData.name
|
||||
font.bold: true
|
||||
font.pixelSize: 16
|
||||
font.weight: Font.DemiBold
|
||||
color: onSurface
|
||||
}
|
||||
|
||||
Item { Layout.fillWidth: true }
|
||||
@@ -374,47 +369,45 @@ Rectangle {
|
||||
CText {
|
||||
visible: modelData.level > appWindow.currentLevel
|
||||
text: "\uD83D\uDD12"
|
||||
font.pixelSize: 12
|
||||
opacity: isDark ? 0.3 : 0.5
|
||||
font.pixelSize: 14
|
||||
opacity: isDark ? 0.3 : 0.4
|
||||
}
|
||||
}
|
||||
|
||||
CText {
|
||||
variant: "body2"
|
||||
text: modelData.desc
|
||||
font.pixelSize: 13
|
||||
wrapMode: Text.Wrap
|
||||
Layout.fillWidth: true
|
||||
opacity: isDark ? 0.45 : 0.65
|
||||
color: onSurfaceVariant
|
||||
lineHeight: 1.4
|
||||
font.pixelSize: 12
|
||||
}
|
||||
|
||||
Item { Layout.fillHeight: true }
|
||||
|
||||
// Tags — subtle, monospace
|
||||
Flow {
|
||||
Layout.fillWidth: true
|
||||
spacing: 4
|
||||
spacing: 6
|
||||
|
||||
Repeater {
|
||||
model: modelData.tags
|
||||
Rectangle {
|
||||
width: tagText.implicitWidth + 12
|
||||
height: 20
|
||||
radius: 4
|
||||
width: tText.implicitWidth + 16
|
||||
height: 24
|
||||
radius: 8
|
||||
color: Qt.rgba(
|
||||
levels[index] ? parseInt(levels[index].accent.substr(1,2), 16) / 255 : 0.5,
|
||||
levels[index] ? parseInt(levels[index].accent.substr(3,2), 16) / 255 : 0.5,
|
||||
levels[index] ? parseInt(levels[index].accent.substr(5,2), 16) / 255 : 0.5,
|
||||
0.1)
|
||||
levels[index].accent.r,
|
||||
levels[index].accent.g,
|
||||
levels[index].accent.b,
|
||||
isDark ? 0.12 : 0.10)
|
||||
|
||||
CText {
|
||||
id: tagText
|
||||
id: tText
|
||||
anchors.centerIn: parent
|
||||
text: modelData
|
||||
font.pixelSize: 10
|
||||
font.family: "monospace"
|
||||
opacity: 0.6
|
||||
font.pixelSize: 11
|
||||
font.weight: Font.Medium
|
||||
color: levels[index].accent
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -425,9 +418,9 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
// TECH STACK
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 48
|
||||
@@ -435,21 +428,12 @@ Rectangle {
|
||||
Layout.rightMargin: 40
|
||||
spacing: 24
|
||||
|
||||
RowLayout {
|
||||
CText {
|
||||
text: "Stack"
|
||||
font.pixelSize: 22
|
||||
font.weight: Font.Bold
|
||||
color: onSurface
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
spacing: 8
|
||||
CText {
|
||||
variant: "h3"
|
||||
text: "Stack"
|
||||
font.weight: Font.Bold
|
||||
}
|
||||
Rectangle {
|
||||
width: 28
|
||||
height: 2
|
||||
radius: 1
|
||||
color: accentViolet
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
}
|
||||
|
||||
GridLayout {
|
||||
@@ -462,10 +446,10 @@ Rectangle {
|
||||
model: techStack
|
||||
delegate: Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 68
|
||||
radius: 6
|
||||
color: cardBg
|
||||
border.color: subtleBorder
|
||||
Layout.preferredHeight: 72
|
||||
radius: 12
|
||||
color: surfaceContainerHigh
|
||||
border.color: outlineVariant
|
||||
border.width: 1
|
||||
|
||||
RowLayout {
|
||||
@@ -474,26 +458,26 @@ Rectangle {
|
||||
spacing: 12
|
||||
|
||||
Rectangle {
|
||||
width: 3
|
||||
height: 32
|
||||
radius: 1.5
|
||||
width: 4
|
||||
height: 36
|
||||
radius: 2
|
||||
color: modelData.accent
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 2
|
||||
spacing: 3
|
||||
|
||||
CText {
|
||||
text: modelData.name
|
||||
font.bold: true
|
||||
font.pixelSize: 13
|
||||
font.pixelSize: 14
|
||||
font.weight: Font.DemiBold
|
||||
color: onSurface
|
||||
}
|
||||
CText {
|
||||
text: modelData.desc
|
||||
variant: "caption"
|
||||
font.pixelSize: 11
|
||||
opacity: isDark ? 0.4 : 0.6
|
||||
font.pixelSize: 12
|
||||
color: onSurfaceVariant
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -502,9 +486,9 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
// STATUS
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 48
|
||||
@@ -512,21 +496,12 @@ Rectangle {
|
||||
Layout.rightMargin: 40
|
||||
spacing: 20
|
||||
|
||||
RowLayout {
|
||||
CText {
|
||||
text: "Status"
|
||||
font.pixelSize: 22
|
||||
font.weight: Font.Bold
|
||||
color: onSurface
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
spacing: 8
|
||||
CText {
|
||||
variant: "h3"
|
||||
text: "Status"
|
||||
font.weight: Font.Bold
|
||||
}
|
||||
Rectangle {
|
||||
width: 36
|
||||
height: 2
|
||||
radius: 1
|
||||
color: accentCyan
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
@@ -537,39 +512,39 @@ Rectangle {
|
||||
model: services
|
||||
delegate: Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 52
|
||||
radius: 6
|
||||
color: cardBg
|
||||
border.color: subtleBorder
|
||||
Layout.preferredHeight: 56
|
||||
radius: 12
|
||||
color: surfaceContainerHigh
|
||||
border.color: outlineVariant
|
||||
border.width: 1
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 12
|
||||
anchors.rightMargin: 12
|
||||
spacing: 8
|
||||
anchors.leftMargin: 14
|
||||
anchors.rightMargin: 14
|
||||
spacing: 10
|
||||
|
||||
Rectangle {
|
||||
width: 7
|
||||
height: 7
|
||||
radius: 3.5
|
||||
width: 8
|
||||
height: 8
|
||||
radius: 4
|
||||
color: modelData.status === "online" ? accentBlue :
|
||||
modelData.status === "standby" ? accentAmber : accentRose
|
||||
}
|
||||
|
||||
CText {
|
||||
text: modelData.name
|
||||
font.pixelSize: 12
|
||||
font.pixelSize: 13
|
||||
color: onSurface
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
CText {
|
||||
text: modelData.status
|
||||
font.pixelSize: 10
|
||||
font.pixelSize: 11
|
||||
font.family: "monospace"
|
||||
color: modelData.status === "online" ? accentBlue :
|
||||
modelData.status === "standby" ? accentAmber : accentRose
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -577,9 +552,9 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
// QUICK LOGIN
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 48
|
||||
@@ -589,9 +564,10 @@ Rectangle {
|
||||
|
||||
CText {
|
||||
text: "Quick Access"
|
||||
variant: "h4"
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
font.pixelSize: 22
|
||||
font.weight: Font.Bold
|
||||
color: onSurface
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
@@ -607,17 +583,17 @@ Rectangle {
|
||||
]
|
||||
delegate: Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 56
|
||||
radius: 6
|
||||
color: credMA2.containsMouse ? Qt.rgba(accentBlue.r, accentBlue.g, accentBlue.b, 0.06) : cardBg
|
||||
border.color: credMA2.containsMouse ? modelData.accent : subtleBorder
|
||||
Layout.preferredHeight: 60
|
||||
radius: 16
|
||||
color: cMA.containsMouse ? surfaceContainerHighest : surfaceContainerHigh
|
||||
border.color: cMA.containsMouse ? modelData.accent : outlineVariant
|
||||
border.width: 1
|
||||
|
||||
Behavior on border.color { ColorAnimation { duration: 150 } }
|
||||
Behavior on color { ColorAnimation { duration: 150 } }
|
||||
Behavior on border.color { ColorAnimation { duration: 150 } }
|
||||
|
||||
MouseArea {
|
||||
id: credMA2
|
||||
id: cMA
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
@@ -626,15 +602,23 @@ Rectangle {
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 12
|
||||
anchors.rightMargin: 12
|
||||
spacing: 10
|
||||
anchors.leftMargin: 14
|
||||
anchors.rightMargin: 14
|
||||
spacing: 12
|
||||
|
||||
Rectangle {
|
||||
width: 3
|
||||
height: 24
|
||||
radius: 1.5
|
||||
color: modelData.accent
|
||||
width: 32
|
||||
height: 32
|
||||
radius: 10
|
||||
color: Qt.rgba(modelData.accent.r, modelData.accent.g, modelData.accent.b, isDark ? 0.2 : 0.15)
|
||||
|
||||
CText {
|
||||
anchors.centerIn: parent
|
||||
text: modelData.level.toString()
|
||||
font.pixelSize: 13
|
||||
font.weight: Font.Bold
|
||||
color: modelData.accent
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
@@ -643,21 +627,23 @@ Rectangle {
|
||||
|
||||
CText {
|
||||
text: modelData.label
|
||||
font.bold: true
|
||||
font.pixelSize: 13
|
||||
font.pixelSize: 14
|
||||
font.weight: Font.DemiBold
|
||||
color: onSurface
|
||||
}
|
||||
CText {
|
||||
text: modelData.user + " / " + modelData.pass
|
||||
font.pixelSize: 10
|
||||
font.pixelSize: 11
|
||||
font.family: "monospace"
|
||||
opacity: isDark ? 0.3 : 0.5
|
||||
color: onSurfaceVariant
|
||||
}
|
||||
}
|
||||
|
||||
CText {
|
||||
text: "\u2192"
|
||||
font.pixelSize: 16
|
||||
opacity: credMA2.containsMouse ? 0.8 : 0.2
|
||||
font.pixelSize: 18
|
||||
color: onSurfaceVariant
|
||||
opacity: cMA.containsMouse ? 1.0 : 0.3
|
||||
Behavior on opacity { NumberAnimation { duration: 150 } }
|
||||
}
|
||||
}
|
||||
@@ -666,23 +652,15 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
// FOOTER
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ════════════════════════════════════════════════════════
|
||||
Item { Layout.preferredHeight: 48 }
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 48
|
||||
color: "transparent"
|
||||
|
||||
Rectangle {
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: 1
|
||||
color: subtleBorder
|
||||
}
|
||||
Layout.preferredHeight: 52
|
||||
color: surfaceContainer
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
@@ -691,17 +669,18 @@ Rectangle {
|
||||
|
||||
CText {
|
||||
text: "\u00a9 2026 MetaBuilder"
|
||||
font.pixelSize: 11
|
||||
opacity: 0.25
|
||||
font.pixelSize: 12
|
||||
color: onSurfaceVariant
|
||||
}
|
||||
|
||||
Item { Layout.fillWidth: true }
|
||||
|
||||
CText {
|
||||
text: "Qt6 \u00B7 Next.js \u00B7 C++ \u00B7 JSON"
|
||||
font.pixelSize: 11
|
||||
font.pixelSize: 12
|
||||
font.family: "monospace"
|
||||
opacity: 0.2
|
||||
color: onSurfaceVariant
|
||||
opacity: isDark ? 0.4 : 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ QtObject {
|
||||
readonly property var themes: ({
|
||||
system: { name: "System", mode: "dark", primary: "#6366f1", background: "#0d0d0d", paper: "#1a1a1a", surface: "#242424", text: "#ffffff", textSecondary: "#a0a0a0", border: "#333333", error: "#ef4444", warning: "#f59e0b", success: "#22c55e", info: "#3b82f6" },
|
||||
dark: { name: "Dark", mode: "dark", primary: "#6366f1", background: "#0d0d0d", paper: "#1a1a1a", surface: "#242424", text: "#ffffff", textSecondary: "#a0a0a0", border: "#333333", error: "#ef4444", warning: "#f59e0b", success: "#22c55e", info: "#3b82f6" },
|
||||
light: { name: "Light", mode: "light", primary: "#4f46e5", background: "#d6d9e4", paper: "#c6c9d6", surface: "#bdbfc9", text: "#111118", textSecondary: "#333345", border: "#a4a8ba", error: "#d32f2f", warning: "#ed6c02", success: "#2e7d32", info: "#0288d1" },
|
||||
light: { name: "Light", mode: "light", primary: "#4f46e5", background: "#e8eaf2", paper: "#f0f1f8", surface: "#e0e2ec", text: "#1b1b22", textSecondary: "#44464f", border: "#c4c6d4", error: "#ba1a1a", warning: "#ed6c02", success: "#2e7d32", info: "#0061a4" },
|
||||
midnight: { name: "Midnight", mode: "dark", primary: "#6366f1", background: "#0f172a", paper: "#1e293b", surface: "#334155", text: "#f1f5f9", textSecondary: "#94a3b8", border: "#334155", error: "#ef4444", warning: "#f59e0b", success: "#22c55e", info: "#3b82f6" },
|
||||
forest: { name: "Forest", mode: "dark", primary: "#22c55e", background: "#0a1f0a", paper: "#14331a", surface: "#1a4d23", text: "#ecfdf5", textSecondary: "#a7f3d0", border: "#166534", error: "#ef4444", warning: "#f59e0b", success: "#22c55e", info: "#3b82f6" },
|
||||
ocean: { name: "Ocean", mode: "dark", primary: "#0ea5e9", background: "#0c1929", paper: "#132f4c", surface: "#1e4976", text: "#e0f2fe", textSecondary: "#7dd3fc", border: "#0369a1", error: "#ef4444", warning: "#f59e0b", success: "#22c55e", info: "#0ea5e9" },
|
||||
|
||||
Reference in New Issue
Block a user