From 29b5bafe16ba82773da97c77951309d585bc9a6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?= =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?= Date: Mon, 13 Feb 2023 20:41:27 +0800 Subject: Shorten names Use something like import "qeduport" as Eduport --- CardDetail.ui.qml | 126 ++++++++ CardGrid.ui.qml | 198 ++++++++++++ Checkout.ui.qml | 702 ++++++++++++++++++++++++++++++++++++++++++ CheckoutFlickable.ui.qml | 702 ------------------------------------------ ClassicDetailFlickable.ui.qml | 193 ------------ Counter.ui.qml | 74 +++++ CounterItem.ui.qml | 74 ----- CourseDetailClassic.ui.qml | 193 ++++++++++++ DefaultHomeFlickable.ui.qml | 92 ------ DetailCardItem.ui.qml | 126 -------- GridCardItem.ui.qml | 198 ------------ GridMinimal.ui.qml | 16 + Header.qml | 68 ++++ HeaderToolBar.qml | 68 ---- HomeDefault.ui.qml | 92 ++++++ MinimalGridStackView.ui.qml | 16 - Qeduport.qmlproject | 5 +- SignIn.ui.qml | 212 +++++++++++++ SignInFlickable.ui.qml | 212 ------------- SignUp.ui.qml | 241 +++++++++++++++ SignUpFlickable.ui.qml | 241 --------------- 21 files changed, 1924 insertions(+), 1925 deletions(-) create mode 100644 CardDetail.ui.qml create mode 100644 CardGrid.ui.qml create mode 100644 Checkout.ui.qml delete mode 100644 CheckoutFlickable.ui.qml delete mode 100644 ClassicDetailFlickable.ui.qml create mode 100644 Counter.ui.qml delete mode 100644 CounterItem.ui.qml create mode 100644 CourseDetailClassic.ui.qml delete mode 100644 DefaultHomeFlickable.ui.qml delete mode 100644 DetailCardItem.ui.qml delete mode 100644 GridCardItem.ui.qml create mode 100644 GridMinimal.ui.qml create mode 100644 Header.qml delete mode 100644 HeaderToolBar.qml create mode 100644 HomeDefault.ui.qml delete mode 100644 MinimalGridStackView.ui.qml create mode 100644 SignIn.ui.qml delete mode 100644 SignInFlickable.ui.qml create mode 100644 SignUp.ui.qml delete mode 100644 SignUpFlickable.ui.qml diff --git a/CardDetail.ui.qml b/CardDetail.ui.qml new file mode 100644 index 0000000..e7f4ffe --- /dev/null +++ b/CardDetail.ui.qml @@ -0,0 +1,126 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtGraphicalEffects 1.15 + +Item { + property string imageSource: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg" + property alias buy: buy + + DropShadow { + source: rectangle + color: Qt.rgba(.113, .227, .325, .15) + anchors.fill: rectangle + } + + Rectangle { + id: rectangle + radius: 10 + anchors { + top: parent.top + topMargin: 25.6 + left: parent.left + leftMargin: 12.8 + right: parent.right + rightMargin: 12.8 + bottom: parent.bottom + } + + Image { + id: image + source: imageSource + sourceSize { + width: parent.width - 16 + height: parent.width * 3 / 4 + } + width: sourceSize.width + height: sourceSize.height + anchors { + top: parent.top + topMargin: 8 + horizontalCenter: parent.horizontalCenter + } + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: image.width + height: image.height + radius: 10 + } + } + } + + Item { + id: body + width: parent.width - 16 + anchors { + top: image.bottom + horizontalCenter: parent.horizontalCenter + bottom: parent.bottom + bottomMargin: 8 + } + + Item { + id: info + width: parent.width - 32 + anchors { + top: parent.top + topMargin: 16 + horizontalCenter: parent.horizontalCenter + bottom: buttons.top + bottomMargin: 16 + } + } + + Item { + id: buttons + width: parent.width - 32 + height: 40.5 + anchors { + horizontalCenter: parent.horizontalCenter + bottom: parent.bottom + bottomMargin: 16 + } + + Button { + id: trial + text: qsTr("Free trial") + contentItem: Text { + text: trial.text + font.pixelSize: 15 + color: trial.down ? "#ffffff" + : "#066ac9" + } + background: Rectangle { + color: trial.down ? "#066ac9" + : "#ffffff" + border.color: "#066ac9" + radius: 8 + } + height: parent.height + anchors.left: parent.left + } + + Button { + id: buy + text: qsTr("Buy course") + contentItem: Text { + text: buy.text + font.pixelSize: 15 + color: "#ffffff" + } + background: Rectangle { + color: buy.down ? "#0aa073" + : "#0cbc87" + border.color: buy.down + ? "#0a966c" : "#0cbc87" + radius: 8 + } + height: parent.height + anchors.right: parent.right + } + } + } + } + + height: width * 1.2 +} diff --git a/CardGrid.ui.qml b/CardGrid.ui.qml new file mode 100644 index 0000000..2bfa20d --- /dev/null +++ b/CardGrid.ui.qml @@ -0,0 +1,198 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtGraphicalEffects 1.15 + +Item { + property string imageSource: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" + readonly property color allLevelsColor: "#ff6f42c1" + readonly property color beginnerColor: "#ff0cbc87" + readonly property color intermediateColor: "#ff17a2b8" + readonly property color allLevelsBackgroundColor: "#1a6f42c1" + readonly property color beginnerBackgroundColor: "#1a0cbc87" + readonly property color intermediateBackgroundColor: "#1a17a2b8" + property string badgeText: "Beginner" + property color badgeColor: "#ff0cbc87" + property color badgeBackgroundColor: "#1a0cbc87" + property string titleText: "Sketch from A to Z: for app designer" + property alias imageArea: imageArea + property alias titleArea: titleArea +// property string textTruncateText: "Rooms oh fully taken by worse do. Points afraid but may end afraid but.." + property bool doesntEmbed: Qt.platform.os == "android" + || Qt.platform.os == "linux" + || Qt.platform.os == "osx" + || Qt.platform.os == "unix" + || Qt.platform.os == "windows" + + DropShadow { + source: rectangle + color: Qt.rgba(.113, .227, .325, .15) + anchors.fill: rectangle + } + + Rectangle { + id: rectangle + radius: 10 + anchors { + top: parent.top + topMargin: 25.6 + left: parent.left + leftMargin: 12.8 + right: parent.right + rightMargin: 12.8 + bottom: parent.bottom + } + + Image { + id: image + source: imageSource + sourceSize { + width: parent.width + height: parent.width * 3 / 4 + } + anchors.top: parent.top + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: image.width + height: image.height + radius: 10 + } + } + + MouseArea { + id: imageArea + anchors.fill: parent + } + } + + Item { + id: body + width: parent.width + anchors { + top: image.bottom + bottom: footer.top + } + + Item { + id: badgeAndFavorite + height: body.height / 6 + anchors { + top: parent.top + topMargin: 16 + left: parent.left + leftMargin: 20 + right: parent.right + rightMargin: 20 + } + + Rectangle { + id: badge + color: badgeBackgroundColor + implicitWidth: badgeLabel.width + 18 + implicitHeight: badgeLabel.height + 6 + radius: 6 + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + } + + FontLoader { + id: roboto + name: "Roboto" + source: doesntEmbed ? "" + : "Roboto/Roboto-Regular.ttf" + } + + Label { + id: badgeLabel + text: badgeText + color: badgeColor + font { + family: doesntEmbed + ? "Roboto" + : roboto.name + pixelSize: 13 + } + anchors.centerIn: parent + } + } + + Image { + id: favorite + source: "Font-Awesome/svgs/solid/heart.svg" + sourceSize { + height: parent.height / 1.5 + } + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } + } + + } + + FontLoader { + id: heebo + name: "Heebo" + source: "Heebo/Heebo-Bold.ttf" + } + + Label { + id: title + width: parent.width + text: titleText + wrapMode: Text.Wrap + font { + family: heebo.name + pixelSize: 21 + } + anchors { + top: badgeAndFavorite.bottom + topMargin: 8 + left: parent.left + leftMargin: 20 + right: parent.right + rightMargin: 20 + } + + MouseArea { + id: titleArea + anchors.fill: parent + } + } +/* + Label { + id: textTruncate + text: textTruncateText + wrapMode: Text.Wrap + font { + weight: Font.Light + pointSize: 14 + } + } +*/ + Item { + id: listInline + height: badgeAndFavorite.height + anchors { + top: title.bottom + topMargin: 8 + left: parent.left + leftMargin: 20 + right: parent.right + rightMargin: 20 + } + } + } + + Item { + id: footer + width: parent.width + height: (parent.height - image.sourceSize.height) / 3 + anchors.bottom: parent.bottom + } + } + + width: 323.9 + height: 446.583 +} diff --git a/Checkout.ui.qml b/Checkout.ui.qml new file mode 100644 index 0000000..46b4880 --- /dev/null +++ b/Checkout.ui.qml @@ -0,0 +1,702 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +Flickable { + property alias header: header + property alias checkoutAlert: alert + property alias checkoutLogin: login + property alias checkoutName: name + property alias checkoutEmail: email + property alias checkoutMobile: mobile + property alias checkoutCountry: country + property alias checkoutState: province + property alias checkoutPostal: postal + property alias checkoutAddress: address + property alias checkoutBanks: banks + property alias checkoutTotalValue: totalValue + property alias checkoutPlaceOrder: placeOrder + property alias checkoutPremium: premium + contentHeight: body.height + + ColumnLayout { + id: body + anchors { + top: parent.top + left: parent.left + right: parent.right + } + + Header { + id: header + Layout.fillWidth: true + } + + GridLayout { + columns: width < 1200 ? 1 : 2 + rows: width < 1200 ? 2 : 1 + columnSpacing: 0 + rowSpacing: 0 + Layout.fillWidth: true + + ColumnLayout { + + RowLayout { + id: alert + Layout.alignment: Qt.AlignHCenter + + Label { + text: qsTr("Already have an account?") + font.pointSize: 15 + } + + Text { + id: login + text: "" + qsTr( + "Log in") + "" + font.pointSize: 15 + font.underline: false + } + } + + Rectangle { + Layout.fillWidth: true + implicitHeight: personal.height + Layout.margins: 16 + radius: 8 + ColumnLayout { + id: personal + anchors { + left: parent.left + right: parent.right + } + + Label { + text: qsTr("Personal Details") + font.pointSize: 22 + font.family: "roboto" + Layout.fillWidth: true + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 + } + + GridLayout { + Layout.margins: 16 + columns: width < 768 ? 1 : 2 + rows: width < 768 ? 4 : 7 + columnSpacing: 0 + rowSpacing: 16 + + ColumnLayout { + + Label { + text: qsTr("Your name *") + font.pointSize: 12 + font.family: "roboto" + Layout.fillWidth: true + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + TextField { + id: name + placeholderText: qsTr("Name") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + ColumnLayout { + + Label { + text: qsTr("Email address *") + font.pointSize: 12 + font.family: "roboto" + Layout.fillWidth: true + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + TextField { + id: email + placeholderText: qsTr("Email") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + ColumnLayout { + + Label { + text: qsTr("Mobile number *") + font.pointSize: 12 + font.family: "roboto" + Layout.fillWidth: true + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + TextField { + id: mobile + placeholderText: qsTr("Mobile number") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + ColumnLayout { + + Label { + text: qsTr("Select country *") + font.pointSize: 12 + font.family: "roboto" + Layout.fillWidth: true + } + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + TextField { + id: country + placeholderText: qsTr("Select country") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + ColumnLayout { + + Label { + text: qsTr("Select state *") + font.pointSize: 12 + font.family: "roboto" + Layout.fillWidth: true + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + TextField { + id: province + placeholderText: qsTr( + "Select state") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + ColumnLayout { + + Label { + text: qsTr("Postal code *") + font.pointSize: 12 + font.family: "roboto" + Layout.fillWidth: true + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + TextField { + id: postal + placeholderText: qsTr("PIN code") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + ColumnLayout { + + Label { + text: qsTr("Address *") + font.pointSize: 12 + font.family: "roboto" + Layout.fillWidth: true + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + TextField { + id: address + placeholderText: qsTr("Address") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + } + + ColumnLayout { + + Label { + text: qsTr("Payment method") + font.pointSize: 22 + font.family: "roboto" + Layout.fillWidth: true + Layout.margins: 16 + } + + ColumnLayout { + + Rectangle { + implicitHeight: paymentCard.height + Layout.margins: 16 + Layout.fillWidth: true + border.width: 1 + radius: 8 + border.color: "#4d000000" + + ColumnLayout { + id: paymentCard + anchors { + left: parent.left + right: parent.right + } + Label { + text: qsTr("Credit or Debit Card") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + padding: 16 + } + } + } + + Rectangle { + implicitHeight: paymentNetBanking.height + Layout.margins: 16 + Layout.fillWidth: true + border.width: 1 + radius: 8 + border.color: "#4d000000" + + ColumnLayout { + id: paymentNetBanking + anchors { + left: parent.left + right: parent.right + } + + Label { + text: qsTr("Pay with Net Banking") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 + } + + ColumnLayout { + Layout.margins: 16 + Label { + text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.") + font.pointSize: 14 + font.family: "roboto" + wrapMode: Text.Wrap + Layout.fillWidth: true + } + + Label { + text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.") + font.pointSize: 14 + font.family: "roboto" + wrapMode: Text.Wrap + Layout.fillWidth: true + } + + ComboBox { + id: banks + Layout.fillWidth: true + font.pointSize: 14 + font.family: "roboto" + Layout.topMargin: 24 + model: ListModel { + ListElement { + label: "Please choose one" + } + ListElement { + label: "Bank of America" + } + ListElement { + label: "Bank of India" + } + ListElement { + label: "Bank of London" + } + } + delegate: ItemDelegate { + contentItem: Text { + text: label + font.pointSize: 16 + font.family: "roboto" + } + } + background: Rectangle { + radius: 8 + implicitHeight: 36 + implicitWidth: 200 + color: "#f5f7f9" + } + } + } + } + } + } + } + } + } + } + + GridLayout { + columns: width < 786 ? 1 : 2 + rows: width < 786 ? 2 : 1 + columnSpacing: 0 + rowSpacing: 0 + Layout.alignment: Qt.AlignTop + + Rectangle { + Layout.fillWidth: true + implicitHeight: orderSummary.height + Layout.margins: 16 + radius: 8 + + ColumnLayout { + id: orderSummary + anchors { + left: parent.left + right: parent.right + } + Label { + text: qsTr("Order Summary") + font.pointSize: 22 + font.family: "roboto" + Layout.fillWidth: true + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 + } + + ColumnLayout { + Layout.margins: 16 + spacing: 16 + + Item { + Layout.fillWidth: true + implicitHeight: codeLabel.implicitHeight + codeValue.implicitHeight + + Label { + id: codeLabel + text: qsTr("Transaction code") + font.pointSize: 14 + font.family: "roboto" + anchors.verticalCenter: parent.verticalCenter + } + + Label { + id: codeValue + text: "AB12365E" + font.pointSize: 14 + font.family: "roboto" + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } + } + } + + RowLayout { + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + TextField { + placeholderText: qsTr("COUPON CODE") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + + Button { + text: qsTr("Apply") + font.pointSize: 14 + font.family: "roboto" + implicitHeight: 56 + contentItem: Text { + color: "#ffffff" + text: "Apply" + padding: 12 + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + + background: Rectangle { + color: "#066ac9" + radius: 8 + } + } + } + } + + ColumnLayout { + Layout.margins: 16 + Item { + Layout.fillWidth: true + implicitHeight: priceLabel.implicitHeight + + priceValue.implicitHeight + + Label { + id: priceLabel + text: qsTr("Original Price") + font.pointSize: 15 + anchors.verticalCenter: parent.verticalCenter + } + + Label { + id: priceValue + text: "$500" + font.pointSize: 15 + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } + } + } + + Item { + Layout.fillWidth: true + implicitHeight: discountLabel.implicitHeight + + discountValue.implicitHeight + + Label { + id: discountLabel + text: qsTr("Coupon Discount") + font.pointSize: 15 + anchors.verticalCenter: parent.verticalCenter + } + + Label { + id: discountValue + text: "-" + "$20" + font.pointSize: 15 + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } + } + } + + Item { + Layout.fillWidth: true + implicitHeight: totalLabel.implicitHeight + + totalValue.implicitHeight + + Label { + id: totalLabel + text: qsTr("Total") + font.pointSize: 21 + anchors.verticalCenter: parent.verticalCenter + } + + Label { + id: totalValue + text: "$480" + font.pointSize: 21 + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } + } + } + } + + Button { + id: placeOrder + Layout.margins: 16 + Layout.fillWidth: true + text: qsTr("Place Order") + font.pointSize: 14 + font.family: "roboto" + implicitHeight: 36 + contentItem: Text { + color: "#ffffff" + text: "Place order" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + background: Rectangle { + color: "#0cbc87" + radius: 8 + } + } + } + } + + Rectangle { + id: premium + Layout.fillWidth: true + implicitHeight: premiumAdCard.height + radius: 8 + color: "#1d3b53" + Layout.margins: 16 + + ColumnLayout { + id: premiumAdCard + anchors { + left: parent.left + right: parent.right + } + Layout.margins: 16 + + Label { + text: qsTr("Access 25K Online courses from 120 institutions, Start today!") + wrapMode: Text.Wrap + font.pointSize: 22 + font.family: "roboto" + color: "#ffffff" + Layout.fillWidth: true + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 + } + + Label { + text: qsTr("Here is the description of premium features which will allow users to get benefits and save a lot of money") + font.pointSize: 16 + font.family: "roboto" + color: "#ffffff" + wrapMode: Text.Wrap + Layout.fillWidth: true + Layout.margins: 16 + } + + Button { + text: qsTr("Purchase Premium") + font.pointSize: 14 + Layout.margins: 16 + font.family: "roboto" + implicitHeight: 36 + contentItem: Text { + color: "#000000" + text: "Purchase premium" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + background: Rectangle { + color: "#f7c32e" + radius: 8 + } + } + } + } + } + } + } +} diff --git a/CheckoutFlickable.ui.qml b/CheckoutFlickable.ui.qml deleted file mode 100644 index 565b528..0000000 --- a/CheckoutFlickable.ui.qml +++ /dev/null @@ -1,702 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 - -Flickable { - property alias header: header - property alias checkoutAlert: alert - property alias checkoutLogin: login - property alias checkoutName: name - property alias checkoutEmail: email - property alias checkoutMobile: mobile - property alias checkoutCountry: country - property alias checkoutState: province - property alias checkoutPostal: postal - property alias checkoutAddress: address - property alias checkoutBanks: banks - property alias checkoutTotalValue: totalValue - property alias checkoutPlaceOrder: placeOrder - property alias checkoutPremium: premium - contentHeight: body.height - - ColumnLayout { - id: body - anchors { - top: parent.top - left: parent.left - right: parent.right - } - - HeaderToolBar { - id: header - Layout.fillWidth: true - } - - GridLayout { - columns: width < 1200 ? 1 : 2 - rows: width < 1200 ? 2 : 1 - columnSpacing: 0 - rowSpacing: 0 - Layout.fillWidth: true - - ColumnLayout { - - RowLayout { - id: alert - Layout.alignment: Qt.AlignHCenter - - Label { - text: qsTr("Already have an account?") - font.pointSize: 15 - } - - Text { - id: login - text: "" + qsTr( - "Log in") + "" - font.pointSize: 15 - font.underline: false - } - } - - Rectangle { - Layout.fillWidth: true - implicitHeight: personal.height - Layout.margins: 16 - radius: 8 - ColumnLayout { - id: personal - anchors { - left: parent.left - right: parent.right - } - - Label { - text: qsTr("Personal Details") - font.pointSize: 22 - font.family: "roboto" - Layout.fillWidth: true - Layout.rightMargin: 16 - Layout.leftMargin: 16 - Layout.topMargin: 16 - } - - GridLayout { - Layout.margins: 16 - columns: width < 768 ? 1 : 2 - rows: width < 768 ? 4 : 7 - columnSpacing: 0 - rowSpacing: 16 - - ColumnLayout { - - Label { - text: qsTr("Your name *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: name - placeholderText: qsTr("Name") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Email address *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: email - placeholderText: qsTr("Email") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Mobile number *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: mobile - placeholderText: qsTr("Mobile number") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Select country *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: country - placeholderText: qsTr("Select country") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Select state *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: province - placeholderText: qsTr( - "Select state") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Postal code *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: postal - placeholderText: qsTr("PIN code") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Address *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: address - placeholderText: qsTr("Address") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Payment method") - font.pointSize: 22 - font.family: "roboto" - Layout.fillWidth: true - Layout.margins: 16 - } - - ColumnLayout { - - Rectangle { - implicitHeight: paymentCard.height - Layout.margins: 16 - Layout.fillWidth: true - border.width: 1 - radius: 8 - border.color: "#4d000000" - - ColumnLayout { - id: paymentCard - anchors { - left: parent.left - right: parent.right - } - Label { - text: qsTr("Credit or Debit Card") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - padding: 16 - } - } - } - - Rectangle { - implicitHeight: paymentNetBanking.height - Layout.margins: 16 - Layout.fillWidth: true - border.width: 1 - radius: 8 - border.color: "#4d000000" - - ColumnLayout { - id: paymentNetBanking - anchors { - left: parent.left - right: parent.right - } - - Label { - text: qsTr("Pay with Net Banking") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.rightMargin: 16 - Layout.leftMargin: 16 - Layout.topMargin: 16 - } - - ColumnLayout { - Layout.margins: 16 - Label { - text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.") - font.pointSize: 14 - font.family: "roboto" - wrapMode: Text.Wrap - Layout.fillWidth: true - } - - Label { - text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.") - font.pointSize: 14 - font.family: "roboto" - wrapMode: Text.Wrap - Layout.fillWidth: true - } - - ComboBox { - id: banks - Layout.fillWidth: true - font.pointSize: 14 - font.family: "roboto" - Layout.topMargin: 24 - model: ListModel { - ListElement { - label: "Please choose one" - } - ListElement { - label: "Bank of America" - } - ListElement { - label: "Bank of India" - } - ListElement { - label: "Bank of London" - } - } - delegate: ItemDelegate { - contentItem: Text { - text: label - font.pointSize: 16 - font.family: "roboto" - } - } - background: Rectangle { - radius: 8 - implicitHeight: 36 - implicitWidth: 200 - color: "#f5f7f9" - } - } - } - } - } - } - } - } - } - } - - GridLayout { - columns: width < 786 ? 1 : 2 - rows: width < 786 ? 2 : 1 - columnSpacing: 0 - rowSpacing: 0 - Layout.alignment: Qt.AlignTop - - Rectangle { - Layout.fillWidth: true - implicitHeight: orderSummary.height - Layout.margins: 16 - radius: 8 - - ColumnLayout { - id: orderSummary - anchors { - left: parent.left - right: parent.right - } - Label { - text: qsTr("Order Summary") - font.pointSize: 22 - font.family: "roboto" - Layout.fillWidth: true - Layout.rightMargin: 16 - Layout.leftMargin: 16 - Layout.topMargin: 16 - } - - ColumnLayout { - Layout.margins: 16 - spacing: 16 - - Item { - Layout.fillWidth: true - implicitHeight: codeLabel.implicitHeight + codeValue.implicitHeight - - Label { - id: codeLabel - text: qsTr("Transaction code") - font.pointSize: 14 - font.family: "roboto" - anchors.verticalCenter: parent.verticalCenter - } - - Label { - id: codeValue - text: "AB12365E" - font.pointSize: 14 - font.family: "roboto" - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - } - - RowLayout { - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - placeholderText: qsTr("COUPON CODE") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - - Button { - text: qsTr("Apply") - font.pointSize: 14 - font.family: "roboto" - implicitHeight: 56 - contentItem: Text { - color: "#ffffff" - text: "Apply" - padding: 12 - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 - } - - background: Rectangle { - color: "#066ac9" - radius: 8 - } - } - } - } - - ColumnLayout { - Layout.margins: 16 - Item { - Layout.fillWidth: true - implicitHeight: priceLabel.implicitHeight - + priceValue.implicitHeight - - Label { - id: priceLabel - text: qsTr("Original Price") - font.pointSize: 15 - anchors.verticalCenter: parent.verticalCenter - } - - Label { - id: priceValue - text: "$500" - font.pointSize: 15 - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - } - - Item { - Layout.fillWidth: true - implicitHeight: discountLabel.implicitHeight - + discountValue.implicitHeight - - Label { - id: discountLabel - text: qsTr("Coupon Discount") - font.pointSize: 15 - anchors.verticalCenter: parent.verticalCenter - } - - Label { - id: discountValue - text: "-" + "$20" - font.pointSize: 15 - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - } - - Item { - Layout.fillWidth: true - implicitHeight: totalLabel.implicitHeight - + totalValue.implicitHeight - - Label { - id: totalLabel - text: qsTr("Total") - font.pointSize: 21 - anchors.verticalCenter: parent.verticalCenter - } - - Label { - id: totalValue - text: "$480" - font.pointSize: 21 - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - } - } - - Button { - id: placeOrder - Layout.margins: 16 - Layout.fillWidth: true - text: qsTr("Place Order") - font.pointSize: 14 - font.family: "roboto" - implicitHeight: 36 - contentItem: Text { - color: "#ffffff" - text: "Place order" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 - } - background: Rectangle { - color: "#0cbc87" - radius: 8 - } - } - } - } - - Rectangle { - id: premium - Layout.fillWidth: true - implicitHeight: premiumAdCard.height - radius: 8 - color: "#1d3b53" - Layout.margins: 16 - - ColumnLayout { - id: premiumAdCard - anchors { - left: parent.left - right: parent.right - } - Layout.margins: 16 - - Label { - text: qsTr("Access 25K Online courses from 120 institutions, Start today!") - wrapMode: Text.Wrap - font.pointSize: 22 - font.family: "roboto" - color: "#ffffff" - Layout.fillWidth: true - Layout.rightMargin: 16 - Layout.leftMargin: 16 - Layout.topMargin: 16 - } - - Label { - text: qsTr("Here is the description of premium features which will allow users to get benefits and save a lot of money") - font.pointSize: 16 - font.family: "roboto" - color: "#ffffff" - wrapMode: Text.Wrap - Layout.fillWidth: true - Layout.margins: 16 - } - - Button { - text: qsTr("Purchase Premium") - font.pointSize: 14 - Layout.margins: 16 - font.family: "roboto" - implicitHeight: 36 - contentItem: Text { - color: "#000000" - text: "Purchase premium" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 - } - background: Rectangle { - color: "#f7c32e" - radius: 8 - } - } - } - } - } - } - } -} diff --git a/ClassicDetailFlickable.ui.qml b/ClassicDetailFlickable.ui.qml deleted file mode 100644 index 5ec7c5d..0000000 --- a/ClassicDetailFlickable.ui.qml +++ /dev/null @@ -1,193 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 -import QtGraphicalEffects 1.15 - -Flickable { - id: flickable - property alias header: header - property alias detailImage: image - property alias detailPrice: price - property alias detailOriginalPrice: originalPrice - property alias detailDiscount: discount - property alias detailTime: time - property alias detailTrial: trial - property alias detailBuy: buy - contentHeight: body.height - - ColumnLayout { - id: body - anchors { - top: parent.top - left: parent.left - right: parent.right - } - - HeaderToolBar { - id: header - Layout.fillWidth: true - } - - Item { - Layout.fillWidth: true - implicitHeight: width * 1.2 - - DropShadow { - source: rectangle - color: Qt.rgba(.113, .227, .325, .15) - anchors.fill: rectangle - } - - Rectangle { - id: rectangle - radius: 10 - anchors { - top: parent.top - topMargin: 25.6 - left: parent.left - leftMargin: 12.8 - right: parent.right - rightMargin: 12.8 - bottom: parent.bottom - } - - Image { - id: image - source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg" - sourceSize { - width: parent.width - 16 - height: parent.width * 3 / 4 - } - width: sourceSize.width - height: sourceSize.height - anchors { - top: parent.top - topMargin: 8 - horizontalCenter: parent.horizontalCenter - } - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: image.width - height: image.height - radius: 10 - } - } - } - - ColumnLayout { - width: parent.width - 16 - anchors { - top: image.bottom - horizontalCenter: parent.horizontalCenter - bottom: parent.bottom - bottomMargin: 8 - } - - RowLayout { - Layout.topMargin: 16 - Layout.bottomMargin: 16 - - ColumnLayout { - spacing: 8 - RowLayout { - implicitWidth: price.width + originalPrice.width + discountLabel.width - Label { - id: price - text: "$150" - font.pixelSize: 32 - font.family: "roboto" - } - - Label { - id: originalPrice - text: "$350" - color: "#4d000000" - font.pixelSize: 14 - font.strikeout: true - font.family: "roboto" - } - - Rectangle { - id: discountLabel - implicitWidth: discount.width - implicitHeight: discount.height - radius: 4 - color: "#fd7e14" - Label { - id: discount - text: qsTr("60% off") - font.pixelSize: 12 - font.family: "roboto" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - bottomPadding: 2 - topPadding: 2 - rightPadding: 8 - leftPadding: 8 - } - } - } - - RowLayout { - id: time - - Label { - text: qsTr("5 days left at this price") - font.pixelSize: 14 - font.family: "roboto" - color: "#d6293e" - } - } - } - } - - RowLayout { - Layout.bottomMargin: 16 - Layout.fillWidth: true - spacing: 16 - Button { - id: trial - text: qsTr("Free trial") - Layout.fillWidth: true - contentItem: Text { - horizontalAlignment: Text.AlignHCenter - text: trial.text - font.pixelSize: 14 - font.family: "roboto" - color: trial.down ? "#ffffff" - : "#066ac9" - } - background: Rectangle { - color: trial.down ? "#066ac9" - : "#ffffff" - border.color: "#066ac9" - radius: 8 - } - } - - Button { - id: buy - text: qsTr("Buy course") - Layout.fillWidth: true - contentItem: Text { - horizontalAlignment: Text.AlignHCenter - text: buy.text - font.pixelSize: 14 - font.family: "roboto" - color: "#ffffff" - } - background: Rectangle { - color: buy.down ? "#0aa073" - : "#0cbc87" - border.color: buy.down - ? "#0a966c" : "#0cbc87" - radius: 8 - } - } - } - } - } - } - } -} diff --git a/Counter.ui.qml b/Counter.ui.qml new file mode 100644 index 0000000..cc979d2 --- /dev/null +++ b/Counter.ui.qml @@ -0,0 +1,74 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +Item { + property alias area: area + + Rectangle { + color: bgColor + radius: 8 + anchors { + top: parent.top + topMargin: 25.6 + left: parent.left + leftMargin: 12.8 + right: parent.right + rightMargin: 12.8 + bottom: parent.bottom + } + + RowLayout { + anchors { + top: parent.top + topMargin: 25.6 + left: parent.left + leftMargin: 25.6 + right: parent.right + rightMargin: 25.6 + bottom: parent.bottom + bottomMargin: 25.6 + } + + Image { + source: icon + sourceSize.height: parent.height + } + + ColumnLayout { + FontLoader { + id: bold + name: "Heebo" + source: "Heebo/Heebo-Bold.ttf" + } + + Label { + text: count + font { + family: bold.name + pixelSize: 21 + } + } + + FontLoader { + id: medium + name: "Heebo" + source: "Heebo/Heebo-Bold.ttf" + } + + Label { + text: title + font { + family: medium.name + pixelSize: 15 + } + } + } + } + + MouseArea { + id: area + anchors.fill: parent + } + } +} diff --git a/CounterItem.ui.qml b/CounterItem.ui.qml deleted file mode 100644 index cc979d2..0000000 --- a/CounterItem.ui.qml +++ /dev/null @@ -1,74 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 - -Item { - property alias area: area - - Rectangle { - color: bgColor - radius: 8 - anchors { - top: parent.top - topMargin: 25.6 - left: parent.left - leftMargin: 12.8 - right: parent.right - rightMargin: 12.8 - bottom: parent.bottom - } - - RowLayout { - anchors { - top: parent.top - topMargin: 25.6 - left: parent.left - leftMargin: 25.6 - right: parent.right - rightMargin: 25.6 - bottom: parent.bottom - bottomMargin: 25.6 - } - - Image { - source: icon - sourceSize.height: parent.height - } - - ColumnLayout { - FontLoader { - id: bold - name: "Heebo" - source: "Heebo/Heebo-Bold.ttf" - } - - Label { - text: count - font { - family: bold.name - pixelSize: 21 - } - } - - FontLoader { - id: medium - name: "Heebo" - source: "Heebo/Heebo-Bold.ttf" - } - - Label { - text: title - font { - family: medium.name - pixelSize: 15 - } - } - } - } - - MouseArea { - id: area - anchors.fill: parent - } - } -} diff --git a/CourseDetailClassic.ui.qml b/CourseDetailClassic.ui.qml new file mode 100644 index 0000000..7be1b4e --- /dev/null +++ b/CourseDetailClassic.ui.qml @@ -0,0 +1,193 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 + +Flickable { + id: flickable + property alias header: header + property alias detailImage: image + property alias detailPrice: price + property alias detailOriginalPrice: originalPrice + property alias detailDiscount: discount + property alias detailTime: time + property alias detailTrial: trial + property alias detailBuy: buy + contentHeight: body.height + + ColumnLayout { + id: body + anchors { + top: parent.top + left: parent.left + right: parent.right + } + + Header { + id: header + Layout.fillWidth: true + } + + Item { + Layout.fillWidth: true + implicitHeight: width * 1.2 + + DropShadow { + source: rectangle + color: Qt.rgba(.113, .227, .325, .15) + anchors.fill: rectangle + } + + Rectangle { + id: rectangle + radius: 10 + anchors { + top: parent.top + topMargin: 25.6 + left: parent.left + leftMargin: 12.8 + right: parent.right + rightMargin: 12.8 + bottom: parent.bottom + } + + Image { + id: image + source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg" + sourceSize { + width: parent.width - 16 + height: parent.width * 3 / 4 + } + width: sourceSize.width + height: sourceSize.height + anchors { + top: parent.top + topMargin: 8 + horizontalCenter: parent.horizontalCenter + } + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: image.width + height: image.height + radius: 10 + } + } + } + + ColumnLayout { + width: parent.width - 16 + anchors { + top: image.bottom + horizontalCenter: parent.horizontalCenter + bottom: parent.bottom + bottomMargin: 8 + } + + RowLayout { + Layout.topMargin: 16 + Layout.bottomMargin: 16 + + ColumnLayout { + spacing: 8 + RowLayout { + implicitWidth: price.width + originalPrice.width + discountLabel.width + Label { + id: price + text: "$150" + font.pixelSize: 32 + font.family: "roboto" + } + + Label { + id: originalPrice + text: "$350" + color: "#4d000000" + font.pixelSize: 14 + font.strikeout: true + font.family: "roboto" + } + + Rectangle { + id: discountLabel + implicitWidth: discount.width + implicitHeight: discount.height + radius: 4 + color: "#fd7e14" + Label { + id: discount + text: qsTr("60% off") + font.pixelSize: 12 + font.family: "roboto" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + bottomPadding: 2 + topPadding: 2 + rightPadding: 8 + leftPadding: 8 + } + } + } + + RowLayout { + id: time + + Label { + text: qsTr("5 days left at this price") + font.pixelSize: 14 + font.family: "roboto" + color: "#d6293e" + } + } + } + } + + RowLayout { + Layout.bottomMargin: 16 + Layout.fillWidth: true + spacing: 16 + Button { + id: trial + text: qsTr("Free trial") + Layout.fillWidth: true + contentItem: Text { + horizontalAlignment: Text.AlignHCenter + text: trial.text + font.pixelSize: 14 + font.family: "roboto" + color: trial.down ? "#ffffff" + : "#066ac9" + } + background: Rectangle { + color: trial.down ? "#066ac9" + : "#ffffff" + border.color: "#066ac9" + radius: 8 + } + } + + Button { + id: buy + text: qsTr("Buy course") + Layout.fillWidth: true + contentItem: Text { + horizontalAlignment: Text.AlignHCenter + text: buy.text + font.pixelSize: 14 + font.family: "roboto" + color: "#ffffff" + } + background: Rectangle { + color: buy.down ? "#0aa073" + : "#0cbc87" + border.color: buy.down + ? "#0a966c" : "#0cbc87" + radius: 8 + } + } + } + } + } + } + } +} diff --git a/DefaultHomeFlickable.ui.qml b/DefaultHomeFlickable.ui.qml deleted file mode 100644 index 8266ad5..0000000 --- a/DefaultHomeFlickable.ui.qml +++ /dev/null @@ -1,92 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 - -Flickable { - property alias header: header - property alias counter: counter - property alias popular: popular - contentHeight: body.height - - ColumnLayout { - id: body - anchors { - top: parent.top - left: parent.left - right: parent.right - } - - HeaderToolBar { - id: header - Layout.fillWidth: true - } - - Item { - implicitHeight: counter.height + popular.height - Layout.fillWidth: true - - GridView { - id: counter - interactive: false - cellWidth: width < 576 ? width - : width < 1200 ? width / 2 - : width / 4 - cellHeight: 125.6 - height: width < 576 ? cellHeight * count - : width < 1200 ? cellHeight * count / 2 - : cellHeight - anchors { - top: parent.top - left: parent.left - right: parent.right - } - - model: ListModel { - ListElement { - icon: "Font-Awesome/svgs/solid/tv.svg" - count: "10K" - title: qsTr("Online Courses") - bgColor: "#26f7c32e" - } - ListElement { - icon: "Font-Awesome/svgs/solid/user-tie.svg" - count: "200+" - title: qsTr("Expert Tutors") - bgColor: "#1a1d3b53" - } - ListElement { - icon: "Font-Awesome/svgs/solid/user-graduate.svg" - count: "60K+" - title: qsTr("Online Students") - bgColor: "#1a6f42c1" - } - ListElement { - icon: "Bootstrap/icons/patch-check-fill.svg" - count: "6K+" - title: qsTr("Certified Courses") - bgColor: "#1a17a2b8" - } - } - } - - GridView { - id: popular - interactive: false - cellWidth: width < 576 ? width - : width < 768 ? width / 2 - : width < 992 ? width / 3 - : width / 4 - cellHeight: cellWidth * 1.3 - height: width < 576 ? cellHeight * count - : width < 768 ? cellHeight * count / 2 - : width < 992 ? cellHeight * count / 3 - : cellHeight * count / 4 - anchors { - top: counter.bottom - left: parent.left - right: parent.right - } - } - } - } -} diff --git a/DetailCardItem.ui.qml b/DetailCardItem.ui.qml deleted file mode 100644 index e7f4ffe..0000000 --- a/DetailCardItem.ui.qml +++ /dev/null @@ -1,126 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtGraphicalEffects 1.15 - -Item { - property string imageSource: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg" - property alias buy: buy - - DropShadow { - source: rectangle - color: Qt.rgba(.113, .227, .325, .15) - anchors.fill: rectangle - } - - Rectangle { - id: rectangle - radius: 10 - anchors { - top: parent.top - topMargin: 25.6 - left: parent.left - leftMargin: 12.8 - right: parent.right - rightMargin: 12.8 - bottom: parent.bottom - } - - Image { - id: image - source: imageSource - sourceSize { - width: parent.width - 16 - height: parent.width * 3 / 4 - } - width: sourceSize.width - height: sourceSize.height - anchors { - top: parent.top - topMargin: 8 - horizontalCenter: parent.horizontalCenter - } - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: image.width - height: image.height - radius: 10 - } - } - } - - Item { - id: body - width: parent.width - 16 - anchors { - top: image.bottom - horizontalCenter: parent.horizontalCenter - bottom: parent.bottom - bottomMargin: 8 - } - - Item { - id: info - width: parent.width - 32 - anchors { - top: parent.top - topMargin: 16 - horizontalCenter: parent.horizontalCenter - bottom: buttons.top - bottomMargin: 16 - } - } - - Item { - id: buttons - width: parent.width - 32 - height: 40.5 - anchors { - horizontalCenter: parent.horizontalCenter - bottom: parent.bottom - bottomMargin: 16 - } - - Button { - id: trial - text: qsTr("Free trial") - contentItem: Text { - text: trial.text - font.pixelSize: 15 - color: trial.down ? "#ffffff" - : "#066ac9" - } - background: Rectangle { - color: trial.down ? "#066ac9" - : "#ffffff" - border.color: "#066ac9" - radius: 8 - } - height: parent.height - anchors.left: parent.left - } - - Button { - id: buy - text: qsTr("Buy course") - contentItem: Text { - text: buy.text - font.pixelSize: 15 - color: "#ffffff" - } - background: Rectangle { - color: buy.down ? "#0aa073" - : "#0cbc87" - border.color: buy.down - ? "#0a966c" : "#0cbc87" - radius: 8 - } - height: parent.height - anchors.right: parent.right - } - } - } - } - - height: width * 1.2 -} diff --git a/GridCardItem.ui.qml b/GridCardItem.ui.qml deleted file mode 100644 index 2bfa20d..0000000 --- a/GridCardItem.ui.qml +++ /dev/null @@ -1,198 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtGraphicalEffects 1.15 - -Item { - property string imageSource: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" - readonly property color allLevelsColor: "#ff6f42c1" - readonly property color beginnerColor: "#ff0cbc87" - readonly property color intermediateColor: "#ff17a2b8" - readonly property color allLevelsBackgroundColor: "#1a6f42c1" - readonly property color beginnerBackgroundColor: "#1a0cbc87" - readonly property color intermediateBackgroundColor: "#1a17a2b8" - property string badgeText: "Beginner" - property color badgeColor: "#ff0cbc87" - property color badgeBackgroundColor: "#1a0cbc87" - property string titleText: "Sketch from A to Z: for app designer" - property alias imageArea: imageArea - property alias titleArea: titleArea -// property string textTruncateText: "Rooms oh fully taken by worse do. Points afraid but may end afraid but.." - property bool doesntEmbed: Qt.platform.os == "android" - || Qt.platform.os == "linux" - || Qt.platform.os == "osx" - || Qt.platform.os == "unix" - || Qt.platform.os == "windows" - - DropShadow { - source: rectangle - color: Qt.rgba(.113, .227, .325, .15) - anchors.fill: rectangle - } - - Rectangle { - id: rectangle - radius: 10 - anchors { - top: parent.top - topMargin: 25.6 - left: parent.left - leftMargin: 12.8 - right: parent.right - rightMargin: 12.8 - bottom: parent.bottom - } - - Image { - id: image - source: imageSource - sourceSize { - width: parent.width - height: parent.width * 3 / 4 - } - anchors.top: parent.top - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: image.width - height: image.height - radius: 10 - } - } - - MouseArea { - id: imageArea - anchors.fill: parent - } - } - - Item { - id: body - width: parent.width - anchors { - top: image.bottom - bottom: footer.top - } - - Item { - id: badgeAndFavorite - height: body.height / 6 - anchors { - top: parent.top - topMargin: 16 - left: parent.left - leftMargin: 20 - right: parent.right - rightMargin: 20 - } - - Rectangle { - id: badge - color: badgeBackgroundColor - implicitWidth: badgeLabel.width + 18 - implicitHeight: badgeLabel.height + 6 - radius: 6 - anchors { - left: parent.left - verticalCenter: parent.verticalCenter - } - - FontLoader { - id: roboto - name: "Roboto" - source: doesntEmbed ? "" - : "Roboto/Roboto-Regular.ttf" - } - - Label { - id: badgeLabel - text: badgeText - color: badgeColor - font { - family: doesntEmbed - ? "Roboto" - : roboto.name - pixelSize: 13 - } - anchors.centerIn: parent - } - } - - Image { - id: favorite - source: "Font-Awesome/svgs/solid/heart.svg" - sourceSize { - height: parent.height / 1.5 - } - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - - } - - FontLoader { - id: heebo - name: "Heebo" - source: "Heebo/Heebo-Bold.ttf" - } - - Label { - id: title - width: parent.width - text: titleText - wrapMode: Text.Wrap - font { - family: heebo.name - pixelSize: 21 - } - anchors { - top: badgeAndFavorite.bottom - topMargin: 8 - left: parent.left - leftMargin: 20 - right: parent.right - rightMargin: 20 - } - - MouseArea { - id: titleArea - anchors.fill: parent - } - } -/* - Label { - id: textTruncate - text: textTruncateText - wrapMode: Text.Wrap - font { - weight: Font.Light - pointSize: 14 - } - } -*/ - Item { - id: listInline - height: badgeAndFavorite.height - anchors { - top: title.bottom - topMargin: 8 - left: parent.left - leftMargin: 20 - right: parent.right - rightMargin: 20 - } - } - } - - Item { - id: footer - width: parent.width - height: (parent.height - image.sourceSize.height) / 3 - anchors.bottom: parent.bottom - } - } - - width: 323.9 - height: 446.583 -} diff --git a/GridMinimal.ui.qml b/GridMinimal.ui.qml new file mode 100644 index 0000000..860e37c --- /dev/null +++ b/GridMinimal.ui.qml @@ -0,0 +1,16 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 + +StackView { + property alias grid: grid + + id: stack + initialItem: GridView { + id: grid + cellWidth: width < 576 ? stack.width : width < 768 + ? stack.width / 2 : width < 992 ? stack.width / 3 + : stack.width / 4 + cellHeight: cellWidth * 1.3 + ScrollBar.vertical: ScrollBar {} + } +} diff --git a/Header.qml b/Header.qml new file mode 100644 index 0000000..761a16a --- /dev/null +++ b/Header.qml @@ -0,0 +1,68 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +ToolBar { + property alias optionsMenu: optionsMenu + property alias optionProfile: profile + property alias optionSettings: settings + property alias optionHelp: help + property alias optionSign: sign + property bool doesntEmbed: Qt.platform.os == "android" + || Qt.platform.os == "linux" + || Qt.platform.os == "osx" + || Qt.platform.os == "unix" + || Qt.platform.os == "windows" + + background: Rectangle { + implicitHeight: 64 + } + + FontLoader { + id: roboto + name: "Roboto" + source: doesntEmbed ? "" : "Roboto/Roboto-Medium.ttf" + } + + RowLayout { + anchors.fill: parent + layoutDirection: Qt.RightToLeft + ToolButton { + icon.source: "https://eduport.webestica.com/assets/images/avatar/01.jpg" + icon.color: "transparent" + onClicked: optionsMenu.open() + background: Rectangle { + implicitHeight: 64 + } + + Menu { + id: optionsMenu + y: parent.height + Action { + id: profile + text: qsTr("Edit Profile") + } + Action { + id: settings + text: qsTr("Account Settings") + } + Action { + id: help + text: qsTr("Help") + } + Action { + id: sign + text: qsTr("Sign Out") + } + delegate: MenuItem { + font { + family: doesntEmbed ? "Roboto" + : roboto.name + pixelSize: 15 + weight: Font.Medium + } + } + } + } + } +} diff --git a/HeaderToolBar.qml b/HeaderToolBar.qml deleted file mode 100644 index 761a16a..0000000 --- a/HeaderToolBar.qml +++ /dev/null @@ -1,68 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 - -ToolBar { - property alias optionsMenu: optionsMenu - property alias optionProfile: profile - property alias optionSettings: settings - property alias optionHelp: help - property alias optionSign: sign - property bool doesntEmbed: Qt.platform.os == "android" - || Qt.platform.os == "linux" - || Qt.platform.os == "osx" - || Qt.platform.os == "unix" - || Qt.platform.os == "windows" - - background: Rectangle { - implicitHeight: 64 - } - - FontLoader { - id: roboto - name: "Roboto" - source: doesntEmbed ? "" : "Roboto/Roboto-Medium.ttf" - } - - RowLayout { - anchors.fill: parent - layoutDirection: Qt.RightToLeft - ToolButton { - icon.source: "https://eduport.webestica.com/assets/images/avatar/01.jpg" - icon.color: "transparent" - onClicked: optionsMenu.open() - background: Rectangle { - implicitHeight: 64 - } - - Menu { - id: optionsMenu - y: parent.height - Action { - id: profile - text: qsTr("Edit Profile") - } - Action { - id: settings - text: qsTr("Account Settings") - } - Action { - id: help - text: qsTr("Help") - } - Action { - id: sign - text: qsTr("Sign Out") - } - delegate: MenuItem { - font { - family: doesntEmbed ? "Roboto" - : roboto.name - pixelSize: 15 - weight: Font.Medium - } - } - } - } - } -} diff --git a/HomeDefault.ui.qml b/HomeDefault.ui.qml new file mode 100644 index 0000000..4521611 --- /dev/null +++ b/HomeDefault.ui.qml @@ -0,0 +1,92 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +Flickable { + property alias header: header + property alias counter: counter + property alias popular: popular + contentHeight: body.height + + ColumnLayout { + id: body + anchors { + top: parent.top + left: parent.left + right: parent.right + } + + Header { + id: header + Layout.fillWidth: true + } + + Item { + implicitHeight: counter.height + popular.height + Layout.fillWidth: true + + GridView { + id: counter + interactive: false + cellWidth: width < 576 ? width + : width < 1200 ? width / 2 + : width / 4 + cellHeight: 125.6 + height: width < 576 ? cellHeight * count + : width < 1200 ? cellHeight * count / 2 + : cellHeight + anchors { + top: parent.top + left: parent.left + right: parent.right + } + + model: ListModel { + ListElement { + icon: "Font-Awesome/svgs/solid/tv.svg" + count: "10K" + title: qsTr("Online Courses") + bgColor: "#26f7c32e" + } + ListElement { + icon: "Font-Awesome/svgs/solid/user-tie.svg" + count: "200+" + title: qsTr("Expert Tutors") + bgColor: "#1a1d3b53" + } + ListElement { + icon: "Font-Awesome/svgs/solid/user-graduate.svg" + count: "60K+" + title: qsTr("Online Students") + bgColor: "#1a6f42c1" + } + ListElement { + icon: "Bootstrap/icons/patch-check-fill.svg" + count: "6K+" + title: qsTr("Certified Courses") + bgColor: "#1a17a2b8" + } + } + } + + GridView { + id: popular + interactive: false + cellWidth: width < 576 ? width + : width < 768 ? width / 2 + : width < 992 ? width / 3 + : width / 4 + cellHeight: cellWidth * 1.3 + height: width < 576 ? cellHeight * count + : width < 768 ? cellHeight * count / 2 + : width < 992 ? cellHeight * count / 3 + : cellHeight * count / 4 + anchors { + top: counter.bottom + left: parent.left + right: parent.right + } + } + } + } +} diff --git a/MinimalGridStackView.ui.qml b/MinimalGridStackView.ui.qml deleted file mode 100644 index 860e37c..0000000 --- a/MinimalGridStackView.ui.qml +++ /dev/null @@ -1,16 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 - -StackView { - property alias grid: grid - - id: stack - initialItem: GridView { - id: grid - cellWidth: width < 576 ? stack.width : width < 768 - ? stack.width / 2 : width < 992 ? stack.width / 3 - : stack.width / 4 - cellHeight: cellWidth * 1.3 - ScrollBar.vertical: ScrollBar {} - } -} diff --git a/Qeduport.qmlproject b/Qeduport.qmlproject index f5afbda..310e650 100644 --- a/Qeduport.qmlproject +++ b/Qeduport.qmlproject @@ -1,7 +1,8 @@ import QmlProject 1.1 Project { - mainUiFile: "CheckoutFlickable.ui.qml" + mainFile: "RecentlyViewedCard.ui.qml" + mainUiFile: "Checkout.ui.qml" QmlFiles { directory: "." @@ -24,6 +25,4 @@ Project { multilanguageSupport: true supportedLanguages: ["en", "id"] primaryLanguage: "en" - - mainFile: "RecentlyViewedCard.ui.qml" } diff --git a/SignIn.ui.qml b/SignIn.ui.qml new file mode 100644 index 0000000..bff46de --- /dev/null +++ b/SignIn.ui.qml @@ -0,0 +1,212 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +Flickable { + property alias signInEmail: email + property alias signInPassword: password + property alias signInButton: button + property alias signInSignUp: signUp + contentHeight: container.height + + FontLoader { + id: heebo + name: "Heebo" + source: "Heebo/Heebo-Bold.ttf" + } + + GridLayout { + id: container + anchors { + top: parent.top + left: parent.left + right: parent.right + } + + ColumnLayout { + Layout.rightMargin: 16 + Layout.leftMargin: 16 + + ColumnLayout { + spacing: 16 + ColumnLayout { + id: columnLayout + + Label { + id: signInTitle + text: qsTr("Login into Eduport") + wrapMode: Text.Wrap + Layout.fillWidth: true + font.family: heebo.name + font.weight: Font.Medium + font.pointSize: 40 + } + + Label { + id: signInSubtitle + color: "#6c757d" + text: qsTr("Nice to see you! Please log in with your account.") + wrapMode: Text.Wrap + Layout.fillWidth: true + font.weight: Font.Normal + font.pointSize: 22 + font.family: "Roboto" + } + } + ColumnLayout { + Label { + text: qsTr("Email address *") + font.pixelSize: 16 + font.family: "Roboto" + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + + RowLayout { + anchors.fill: parent + Image { + id: envelope + source: "Bootstrap/icons/envelope-fill.svg" + sourceSize { + width: 24 + height: 24 + } + Layout.margins: 16 + } + TextField { + id: email + placeholderText: qsTr("E-mail") + font.pixelSize: 16 + font.family: "Roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + ColumnLayout { + Label { + text: qsTr("Password *") + font.pixelSize: 16 + font.family: "Roboto" + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + + RowLayout { + anchors.fill: parent + Image { + source: "Font-Awesome/svgs/solid/lock.svg" + Layout.maximumHeight: 24 + Layout.maximumWidth: 24 + Layout.margins: 16 + } + TextField { + id: password + placeholderText: qsTr("password") + echoMode: TextInput.Password + font.pixelSize: 16 + font.family: "Roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + Label { + id: passwordHelper + text: "Your password must be 8 characters at least" + font.pixelSize: 12 + color: "#6c757d" + } + RowLayout { + Layout.fillWidth: true + CheckBox { + id: rememberCheckBox + text: qsTr("Remember me") + font.pointSize: 14 + font.family: "Roboto" + Layout.fillWidth: true + contentItem: Text { + color: "#6c757d" + text: rememberCheckBox.text + font: rememberCheckBox.font + verticalAlignment: Text.AlignVCenter + leftPadding: rememberCheckBox.indicator.width + rememberCheckBox.spacing + } + } + Text { + id: forgotPassword + text: "Forgot password?" + font.family: "Roboto" + font.pointSize: 14 + horizontalAlignment: Text.AlignRight + Layout.fillWidth: true + linkColor: Qt.rgba(.0235, .416, + .788, 1.0) + } + } + Button { + id: button + text: qsTr("Login") + font.pixelSize: 16 + implicitHeight: 40 + Layout.fillWidth: true + + contentItem: Text { + color: "#ffffff" + text: "Login" + horizontalAlignment: Text + .AlignHCenter + verticalAlignment: Text + .AlignVCenter + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + + background: Rectangle { + color: button.down + ? "#055aab" : "#066ac9" + radius: 8 + } + } + } + + RowLayout { + Layout.alignment: Qt.AlignHCenter + Label { + text: qsTr("Don't have an account?") + font.pixelSize: 16 + font.family: "Roboto" + } + Text { + id: signUp + text: "Signup here" + font.pixelSize: 16 + font.family: "Roboto" + font.underline: false + linkColor: Qt.rgba(.0235, .416, .788, + 1.0) + } + } + } + } +} diff --git a/SignInFlickable.ui.qml b/SignInFlickable.ui.qml deleted file mode 100644 index bff46de..0000000 --- a/SignInFlickable.ui.qml +++ /dev/null @@ -1,212 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 - -Flickable { - property alias signInEmail: email - property alias signInPassword: password - property alias signInButton: button - property alias signInSignUp: signUp - contentHeight: container.height - - FontLoader { - id: heebo - name: "Heebo" - source: "Heebo/Heebo-Bold.ttf" - } - - GridLayout { - id: container - anchors { - top: parent.top - left: parent.left - right: parent.right - } - - ColumnLayout { - Layout.rightMargin: 16 - Layout.leftMargin: 16 - - ColumnLayout { - spacing: 16 - ColumnLayout { - id: columnLayout - - Label { - id: signInTitle - text: qsTr("Login into Eduport") - wrapMode: Text.Wrap - Layout.fillWidth: true - font.family: heebo.name - font.weight: Font.Medium - font.pointSize: 40 - } - - Label { - id: signInSubtitle - color: "#6c757d" - text: qsTr("Nice to see you! Please log in with your account.") - wrapMode: Text.Wrap - Layout.fillWidth: true - font.weight: Font.Normal - font.pointSize: 22 - font.family: "Roboto" - } - } - ColumnLayout { - Label { - text: qsTr("Email address *") - font.pixelSize: 16 - font.family: "Roboto" - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - - RowLayout { - anchors.fill: parent - Image { - id: envelope - source: "Bootstrap/icons/envelope-fill.svg" - sourceSize { - width: 24 - height: 24 - } - Layout.margins: 16 - } - TextField { - id: email - placeholderText: qsTr("E-mail") - font.pixelSize: 16 - font.family: "Roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - Label { - text: qsTr("Password *") - font.pixelSize: 16 - font.family: "Roboto" - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - - RowLayout { - anchors.fill: parent - Image { - source: "Font-Awesome/svgs/solid/lock.svg" - Layout.maximumHeight: 24 - Layout.maximumWidth: 24 - Layout.margins: 16 - } - TextField { - id: password - placeholderText: qsTr("password") - echoMode: TextInput.Password - font.pixelSize: 16 - font.family: "Roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - Label { - id: passwordHelper - text: "Your password must be 8 characters at least" - font.pixelSize: 12 - color: "#6c757d" - } - RowLayout { - Layout.fillWidth: true - CheckBox { - id: rememberCheckBox - text: qsTr("Remember me") - font.pointSize: 14 - font.family: "Roboto" - Layout.fillWidth: true - contentItem: Text { - color: "#6c757d" - text: rememberCheckBox.text - font: rememberCheckBox.font - verticalAlignment: Text.AlignVCenter - leftPadding: rememberCheckBox.indicator.width + rememberCheckBox.spacing - } - } - Text { - id: forgotPassword - text: "Forgot password?" - font.family: "Roboto" - font.pointSize: 14 - horizontalAlignment: Text.AlignRight - Layout.fillWidth: true - linkColor: Qt.rgba(.0235, .416, - .788, 1.0) - } - } - Button { - id: button - text: qsTr("Login") - font.pixelSize: 16 - implicitHeight: 40 - Layout.fillWidth: true - - contentItem: Text { - color: "#ffffff" - text: "Login" - horizontalAlignment: Text - .AlignHCenter - verticalAlignment: Text - .AlignVCenter - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 - } - - background: Rectangle { - color: button.down - ? "#055aab" : "#066ac9" - radius: 8 - } - } - } - - RowLayout { - Layout.alignment: Qt.AlignHCenter - Label { - text: qsTr("Don't have an account?") - font.pixelSize: 16 - font.family: "Roboto" - } - Text { - id: signUp - text: "Signup here" - font.pixelSize: 16 - font.family: "Roboto" - font.underline: false - linkColor: Qt.rgba(.0235, .416, .788, - 1.0) - } - } - } - } -} diff --git a/SignUp.ui.qml b/SignUp.ui.qml new file mode 100644 index 0000000..c0afebe --- /dev/null +++ b/SignUp.ui.qml @@ -0,0 +1,241 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +Flickable { + property alias signUpEmail: email + property alias signUpPassword: password + property alias signUpConfirmPassword: confirmPassword + property alias signUpButton: button + property alias signUpSignIn: signIn + contentHeight: container.height + + FontLoader { + id: heebo + name: "Heebo" + source: "Heebo/Heebo-Bold.ttf" + } + + GridLayout { + id: container + anchors { + top: parent.top + left: parent.left + right: parent.right + } + + ColumnLayout { + Layout.margins: 16 + + ColumnLayout { + spacing: 16 + + ColumnLayout { + id: columnLayout + + Label { + id: signUpTitle + text: qsTr("Sign up for your account!") + wrapMode: Text.Wrap + Layout.fillWidth: true + font.family: heebo.name + font.weight: Font.Medium + font.pointSize: 40 + } + + Label { + id: signUpSubtitle + color: "#6c757d" + text: qsTr("Nice to see you! Please Sign up with your account.") + wrapMode: Text.Wrap + Layout.fillWidth: true + font.weight: Font.Normal + font.pointSize: 22 + font.family: "Roboto" + } + } + + ColumnLayout { + + Label { + text: qsTr("Email address *") + font.pixelSize: 16 + font.family: "Roboto" + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + + RowLayout { + anchors.fill: parent + + Image { + id: envelope + source: "Bootstrap/icons/envelope-fill.svg" + Layout.maximumHeight: 24 + Layout.maximumWidth: 24 + Layout.margins: 16 + } + + TextField { + id: email + placeholderText: qsTr("E-mail") + font.pixelSize: 16 + font.family: "Roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + ColumnLayout { + + Label { + text: qsTr("Password *") + font.pixelSize: 16 + font.family: "Roboto" + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + + RowLayout { + anchors.fill: parent + + Image { + source: "Font-Awesome/svgs/solid/lock.svg" + Layout.maximumHeight: 24 + Layout.maximumWidth: 24 + Layout.margins: 16 + } + + TextField { + id: password + placeholderText: "*********" + echoMode: TextInput.Password + font.pixelSize: 16 + font.family: "Roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + ColumnLayout { + + Label { + text: qsTr("Confirm Password *") + font.pixelSize: 16 + font.family: "Roboto" + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + + RowLayout { + anchors.fill: parent + + Image { + source: "Font-Awesome/svgs/solid/lock.svg" + Layout.maximumHeight: 24 + Layout.maximumWidth: 24 + Layout.margins: 16 + } + + TextField { + id: confirmPassword + placeholderText: "*********" + echoMode: TextInput.Password + font.pixelSize: 16 + font.family: "Roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + RowLayout { + + CheckBox { + id: agreementCheckBox + text: "By signing up, you agree to the terms of service" + font.pointSize: 14 + font.family: "Roboto" + Layout.fillWidth: true + contentItem: Text { + color: "#6c757d" + text: agreementCheckBox.text + font: agreementCheckBox.font + verticalAlignment: Text.AlignVCenter + leftPadding: agreementCheckBox.indicator.width + agreementCheckBox.spacing + } + } + } + + Button { + id: button + text: qsTr("Sign Up") + font.pixelSize: 16 + implicitHeight: 40 + Layout.fillWidth: true + contentItem: Text { + color: "#ffffff" + text: "Sign Up" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + background: Rectangle { + color: button.down ? "#055aab" : "#066ac9" + radius: 8 + } + } + } + + RowLayout { + Layout.alignment: Qt.AlignHCenter + + Label { + text: qsTr("Already have an account?") + font.pixelSize: 16 + font.family: "Roboto" + } + + Text { + id: signIn + text: "Sign in here" + font.pixelSize: 16 + font.family: "Roboto" + font.underline: false + linkColor: Qt.rgba(.0235, .416, .788, 1.0) + } + } + } + } +} diff --git a/SignUpFlickable.ui.qml b/SignUpFlickable.ui.qml deleted file mode 100644 index c0afebe..0000000 --- a/SignUpFlickable.ui.qml +++ /dev/null @@ -1,241 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 - -Flickable { - property alias signUpEmail: email - property alias signUpPassword: password - property alias signUpConfirmPassword: confirmPassword - property alias signUpButton: button - property alias signUpSignIn: signIn - contentHeight: container.height - - FontLoader { - id: heebo - name: "Heebo" - source: "Heebo/Heebo-Bold.ttf" - } - - GridLayout { - id: container - anchors { - top: parent.top - left: parent.left - right: parent.right - } - - ColumnLayout { - Layout.margins: 16 - - ColumnLayout { - spacing: 16 - - ColumnLayout { - id: columnLayout - - Label { - id: signUpTitle - text: qsTr("Sign up for your account!") - wrapMode: Text.Wrap - Layout.fillWidth: true - font.family: heebo.name - font.weight: Font.Medium - font.pointSize: 40 - } - - Label { - id: signUpSubtitle - color: "#6c757d" - text: qsTr("Nice to see you! Please Sign up with your account.") - wrapMode: Text.Wrap - Layout.fillWidth: true - font.weight: Font.Normal - font.pointSize: 22 - font.family: "Roboto" - } - } - - ColumnLayout { - - Label { - text: qsTr("Email address *") - font.pixelSize: 16 - font.family: "Roboto" - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - - RowLayout { - anchors.fill: parent - - Image { - id: envelope - source: "Bootstrap/icons/envelope-fill.svg" - Layout.maximumHeight: 24 - Layout.maximumWidth: 24 - Layout.margins: 16 - } - - TextField { - id: email - placeholderText: qsTr("E-mail") - font.pixelSize: 16 - font.family: "Roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Password *") - font.pixelSize: 16 - font.family: "Roboto" - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - - RowLayout { - anchors.fill: parent - - Image { - source: "Font-Awesome/svgs/solid/lock.svg" - Layout.maximumHeight: 24 - Layout.maximumWidth: 24 - Layout.margins: 16 - } - - TextField { - id: password - placeholderText: "*********" - echoMode: TextInput.Password - font.pixelSize: 16 - font.family: "Roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Confirm Password *") - font.pixelSize: 16 - font.family: "Roboto" - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - - RowLayout { - anchors.fill: parent - - Image { - source: "Font-Awesome/svgs/solid/lock.svg" - Layout.maximumHeight: 24 - Layout.maximumWidth: 24 - Layout.margins: 16 - } - - TextField { - id: confirmPassword - placeholderText: "*********" - echoMode: TextInput.Password - font.pixelSize: 16 - font.family: "Roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - RowLayout { - - CheckBox { - id: agreementCheckBox - text: "By signing up, you agree to the terms of service" - font.pointSize: 14 - font.family: "Roboto" - Layout.fillWidth: true - contentItem: Text { - color: "#6c757d" - text: agreementCheckBox.text - font: agreementCheckBox.font - verticalAlignment: Text.AlignVCenter - leftPadding: agreementCheckBox.indicator.width + agreementCheckBox.spacing - } - } - } - - Button { - id: button - text: qsTr("Sign Up") - font.pixelSize: 16 - implicitHeight: 40 - Layout.fillWidth: true - contentItem: Text { - color: "#ffffff" - text: "Sign Up" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 - } - background: Rectangle { - color: button.down ? "#055aab" : "#066ac9" - radius: 8 - } - } - } - - RowLayout { - Layout.alignment: Qt.AlignHCenter - - Label { - text: qsTr("Already have an account?") - font.pixelSize: 16 - font.family: "Roboto" - } - - Text { - id: signIn - text: "Sign in here" - font.pixelSize: 16 - font.family: "Roboto" - font.underline: false - linkColor: Qt.rgba(.0235, .416, .788, 1.0) - } - } - } - } -} -- cgit v1.2.3