274 lines
		
	
	
		
			6.9 KiB
		
	
	
	
		
			QML
		
	
	
	
			
		
		
	
	
			274 lines
		
	
	
		
			6.9 KiB
		
	
	
	
		
			QML
		
	
	
	
/*
 | 
						|
 *   Copyright 2023 Valeria Fadeeva <valeria@fadeeva.me>
 | 
						|
 *
 | 
						|
 *   This program is free software; you can redistribute it and/or modify
 | 
						|
 *   it under the terms of the GNU Affero General Public License version 3,
 | 
						|
 *   or (at your option) any later version, as published by the Free
 | 
						|
 *   Software Foundation
 | 
						|
 *
 | 
						|
 *   This program is distributed in the hope that it will be useful,
 | 
						|
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 | 
						|
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 | 
						|
 *   GNU Affero General Public License for more details
 | 
						|
 *
 | 
						|
 *   You should have received a copy of the GNU Affero General Public
 | 
						|
 *   License along with this program; if not, write to the
 | 
						|
 *   Free Software Foundation, Inc.,
 | 
						|
 *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 | 
						|
 */
 | 
						|
 | 
						|
import QtQuick 2.11
 | 
						|
import QtQuick.Layouts 1.11
 | 
						|
import QtQuick.Controls 2.4
 | 
						|
import Qt5Compat.GraphicalEffects
 | 
						|
 | 
						|
Pane {
 | 
						|
    id: root
 | 
						|
 | 
						|
    height: Screen.height
 | 
						|
    width: Screen.ScreenWidth
 | 
						|
 | 
						|
    LayoutMirroring.enabled: false
 | 
						|
    LayoutMirroring.childrenInherit: true
 | 
						|
 | 
						|
    padding: 0
 | 
						|
    palette.button: "transparent"
 | 
						|
    palette.highlight: "#E03D3D"
 | 
						|
    palette.text: "#A03d40"
 | 
						|
    palette.buttonText: "#A03d40"
 | 
						|
    palette.window: "#1C1B20"
 | 
						|
 | 
						|
    font.family: "Noto Sans"
 | 
						|
    font.pointSize: parseInt(height / 80)
 | 
						|
    focus: true
 | 
						|
 | 
						|
    TextMetrics {
 | 
						|
        id: units
 | 
						|
        text: "M"
 | 
						|
        property int gridUnit: boundingRect.height
 | 
						|
        property int largeSpacing: units.gridUnit
 | 
						|
        property int smallSpacing: Math.max(2, gridUnit/4)
 | 
						|
    }
 | 
						|
 | 
						|
    property int stage
 | 
						|
 | 
						|
    onStageChanged: {
 | 
						|
        if (stage == 1) {
 | 
						|
            inOpacityAnimationContent.running = true;
 | 
						|
            lineAnimation.running = true;
 | 
						|
        }
 | 
						|
        else if (stage == 4) {
 | 
						|
            outOpacityAnimationForm.running = true;
 | 
						|
            outOpacityAnimationContent.running = true;
 | 
						|
        }
 | 
						|
    }
 | 
						|
 | 
						|
    Item {
 | 
						|
        id: sizeHelper
 | 
						|
 | 
						|
        anchors.fill: parent
 | 
						|
        height: parent.height
 | 
						|
        width: parent.width
 | 
						|
 | 
						|
        Rectangle {
 | 
						|
            id: tintLayer
 | 
						|
 | 
						|
            anchors.fill: parent
 | 
						|
            width: parent.width
 | 
						|
            height: parent.height
 | 
						|
            color: "#000000"
 | 
						|
            opacity: 0.0
 | 
						|
            z: 1
 | 
						|
        }
 | 
						|
 | 
						|
        Rectangle {
 | 
						|
            id: form
 | 
						|
 | 
						|
            height: parent.height
 | 
						|
            width: parent.width / 3
 | 
						|
            anchors.horizontalCenter: undefined
 | 
						|
            anchors.left: parent.left
 | 
						|
            anchors.right: undefined
 | 
						|
            opacity: 0.0
 | 
						|
            z: 1
 | 
						|
        }
 | 
						|
 | 
						|
        Image {
 | 
						|
            id: backgroundImage
 | 
						|
 | 
						|
            height: parent.height
 | 
						|
            width: parent.width
 | 
						|
            anchors.left: parent.left
 | 
						|
            anchors.right: parent.right
 | 
						|
 | 
						|
            horizontalAlignment: Image.AlignHCenter
 | 
						|
            verticalAlignment: Image.AlignVCenter
 | 
						|
 | 
						|
            source: "images/background.png"
 | 
						|
            fillMode: Image.PreserveAspectCrop
 | 
						|
            //fillMode: Image.PreserveAspectFit
 | 
						|
            asynchronous: true
 | 
						|
            cache: true
 | 
						|
            clip: true
 | 
						|
            mipmap: true
 | 
						|
        }
 | 
						|
 | 
						|
        ShaderEffectSource {
 | 
						|
            id: blurMask
 | 
						|
 | 
						|
            sourceItem: backgroundImage
 | 
						|
            width: form.width
 | 
						|
            height: parent.height
 | 
						|
            anchors.centerIn: form
 | 
						|
            sourceRect: Qt.rect(x,y,width,height)
 | 
						|
            visible: true
 | 
						|
        }
 | 
						|
 | 
						|
        GaussianBlur {
 | 
						|
            id: blur
 | 
						|
 | 
						|
            height: parent.height
 | 
						|
            width: form.width
 | 
						|
            source: blurMask
 | 
						|
            radius: 100
 | 
						|
            samples: 201
 | 
						|
            cached: true
 | 
						|
            anchors.centerIn: form
 | 
						|
            visible: true
 | 
						|
        }
 | 
						|
    }
 | 
						|
 | 
						|
    Item {
 | 
						|
        id: content
 | 
						|
        anchors.rightMargin: 0
 | 
						|
        anchors.bottomMargin: 0
 | 
						|
        anchors.leftMargin: 0
 | 
						|
        anchors.topMargin: 0
 | 
						|
        anchors.fill: form
 | 
						|
        opacity: 0
 | 
						|
 | 
						|
        Text {
 | 
						|
        visible: true
 | 
						|
        height: 1470
 | 
						|
        width: 1920
 | 
						|
            Text {
 | 
						|
                id: text
 | 
						|
                font.pointSize: 48
 | 
						|
                x: (form.width - width) / 2
 | 
						|
                y: (form.height / 3) * 2
 | 
						|
                anchors.centerIn: form
 | 
						|
                text: "Welcome!"
 | 
						|
                visible: true
 | 
						|
                color: "#A03d40"
 | 
						|
            }
 | 
						|
        }
 | 
						|
 | 
						|
        Image {
 | 
						|
            id: logo
 | 
						|
            property real size: units.gridUnit * 15
 | 
						|
            anchors.centerIn: form
 | 
						|
            source: "images/logo.svg"
 | 
						|
            sourceSize.width: size
 | 
						|
            sourceSize.height: size
 | 
						|
            x: (form.width - width) / 2
 | 
						|
            y: (form.height / 3) * 2.2
 | 
						|
        }
 | 
						|
 | 
						|
        Image {
 | 
						|
            id: topRect
 | 
						|
            anchors.left: form.left
 | 
						|
            y: form.height
 | 
						|
            source: "images/rectangle.svg"
 | 
						|
 | 
						|
            Rectangle {
 | 
						|
                radius: 3
 | 
						|
                color: "#1d212f"
 | 
						|
                height: 6
 | 
						|
                width: form.width
 | 
						|
                anchors
 | 
						|
                {
 | 
						|
                    bottom: parent.bottom
 | 
						|
                    bottomMargin:0
 | 
						|
                    left: parent.left
 | 
						|
                }
 | 
						|
 | 
						|
                Rectangle
 | 
						|
                {
 | 
						|
                    radius: 3
 | 
						|
                    color: "#FFFFFF"
 | 
						|
                    width: (form.width / 6) * (stage - 0.00)
 | 
						|
                    anchors
 | 
						|
                    {
 | 
						|
                        left: parent.left
 | 
						|
                        top: parent.top
 | 
						|
                        bottom: parent.bottom
 | 
						|
                    }
 | 
						|
                    Behavior on width {
 | 
						|
                        PropertyAnimation {
 | 
						|
                            duration: 200
 | 
						|
                            easing.type: Easing.InOutQuad
 | 
						|
                        }
 | 
						|
                    }
 | 
						|
                }
 | 
						|
            }
 | 
						|
        }
 | 
						|
 | 
						|
        SequentialAnimation {
 | 
						|
            id: lineAnimation
 | 
						|
            running: false
 | 
						|
 | 
						|
            ParallelAnimation {
 | 
						|
                PropertyAnimation {
 | 
						|
                    property: "y"
 | 
						|
                    target: topRect
 | 
						|
                    to: (form.height / 3) * 2
 | 
						|
                    duration: 1500
 | 
						|
                    easing.type: Easing.InOutBack
 | 
						|
                    easing.overshoot: 1.0
 | 
						|
                }
 | 
						|
            }
 | 
						|
        }
 | 
						|
 | 
						|
        OpacityAnimator {
 | 
						|
            id: inOpacityAnimationContent
 | 
						|
            running: false
 | 
						|
            target: content
 | 
						|
            from: 0
 | 
						|
            to: 1
 | 
						|
            duration: 1000
 | 
						|
            easing.type: Easing.InOutQuad
 | 
						|
        }
 | 
						|
 | 
						|
        OpacityAnimator {
 | 
						|
            id: outOpacityAnimationContent
 | 
						|
            running: false
 | 
						|
            target: content
 | 
						|
            from: 1
 | 
						|
            to: 0
 | 
						|
            duration: 5000
 | 
						|
            easing.type: Easing.InOutQuad
 | 
						|
        }
 | 
						|
 | 
						|
        OpacityAnimator {
 | 
						|
            id: inOpacityAnimationForm
 | 
						|
            running: false
 | 
						|
            target: blur
 | 
						|
            from: 0
 | 
						|
            to: 1
 | 
						|
            duration: 1000
 | 
						|
            easing.type: Easing.InOutQuad
 | 
						|
        }
 | 
						|
 | 
						|
        OpacityAnimator {
 | 
						|
            id: outOpacityAnimationForm
 | 
						|
            running: false
 | 
						|
            target: blur
 | 
						|
            from: 1
 | 
						|
            to: 0
 | 
						|
            duration: 5000
 | 
						|
            easing.type: Easing.InOutQuad
 | 
						|
        }
 | 
						|
 | 
						|
    }
 | 
						|
}
 |