247 lines
8.9 KiB
QML
247 lines
8.9 KiB
QML
import QtQuick
|
|
|
|
Rectangle {
|
|
id: root
|
|
color: "#101012"
|
|
property int stage: 0
|
|
readonly property int visibleStage: Math.max(0, Math.min(5, stage))
|
|
|
|
Item {
|
|
id: scene
|
|
anchors.fill: parent
|
|
opacity: 0
|
|
|
|
Image {
|
|
id: background
|
|
anchors.fill: parent
|
|
source: "images/sfondo_costruttivista_fhd.png"
|
|
fillMode: Image.PreserveAspectCrop
|
|
asynchronous: true
|
|
cache: true
|
|
}
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
color: "#12000000"
|
|
opacity: overlayFade.value
|
|
}
|
|
|
|
// Accenti geometrici dimensionati rispetto allo schermo.
|
|
Item {
|
|
id: accents
|
|
anchors.fill: parent
|
|
|
|
Rectangle {
|
|
id: redBar
|
|
x: parent.width * 0.07
|
|
y: parent.height * 0.15
|
|
width: Math.max(5, parent.width * 0.008)
|
|
height: parent.height * 0.27
|
|
color: "#d83a28"
|
|
opacity: 0.9
|
|
transform: Translate { id: redShift; y: -root.height * 0.10 }
|
|
}
|
|
|
|
Rectangle {
|
|
id: creamLine
|
|
x: parent.width * 0.07
|
|
y: parent.height * 0.44
|
|
width: parent.width * 0.20
|
|
height: Math.max(2, parent.height * 0.004)
|
|
color: "#f0dfba"
|
|
opacity: 0.85
|
|
transform: Translate { id: lineShift; x: -root.width * 0.12 }
|
|
}
|
|
|
|
Rectangle {
|
|
id: darkBar
|
|
x: parent.width * 0.82
|
|
y: parent.height * 0.60
|
|
width: Math.max(4, parent.width * 0.005)
|
|
height: parent.height * 0.20
|
|
color: "#181719"
|
|
opacity: 0.75
|
|
transform: Translate { id: darkShift; y: root.height * 0.09 }
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: progressCue
|
|
width: Math.min(root.width * 0.76, 720)
|
|
height: Math.max(150, Math.min(root.height * 0.25, 230))
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.bottom: parent.bottom
|
|
anchors.bottomMargin: Math.max(28, root.height * 0.085)
|
|
color: "#d9151517"
|
|
border.color: "#66f0dfba"
|
|
border.width: Math.max(1, root.height * 0.002)
|
|
|
|
// Un grande marchio geometrico continua a ruotare anche quando lo
|
|
// stadio comunicato da Plasma non cambia.
|
|
Item {
|
|
id: loaderMark
|
|
width: Math.max(82, Math.min(progressCue.height * 0.62, 132))
|
|
height: width
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: Math.max(22, progressCue.width * 0.045)
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
anchors.margins: loaderMark.width * 0.09
|
|
radius: width / 2
|
|
color: "transparent"
|
|
border.color: "#f0dfba"
|
|
border.width: Math.max(5, loaderMark.width * 0.075)
|
|
opacity: 0.92
|
|
}
|
|
|
|
Item {
|
|
id: rotor
|
|
anchors.fill: parent
|
|
|
|
Rectangle {
|
|
width: parent.width * 0.48
|
|
height: Math.max(12, parent.height * 0.16)
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
color: "#d83a28"
|
|
}
|
|
|
|
Rectangle {
|
|
width: Math.max(11, parent.width * 0.14)
|
|
height: parent.height * 0.42
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.top: parent.top
|
|
color: "#f0dfba"
|
|
}
|
|
|
|
RotationAnimator on rotation {
|
|
from: 0
|
|
to: 360
|
|
duration: 1200
|
|
loops: Animation.Infinite
|
|
running: scene.opacity > 0
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
width: parent.width * 0.25
|
|
height: width
|
|
anchors.centerIn: parent
|
|
color: "#171719"
|
|
border.color: "#d83a28"
|
|
border.width: Math.max(3, width * 0.15)
|
|
rotation: 45
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: loadingInfo
|
|
anchors.left: loaderMark.right
|
|
anchors.leftMargin: Math.max(22, progressCue.width * 0.045)
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: Math.max(22, progressCue.width * 0.045)
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
height: Math.max(92, parent.height * 0.58)
|
|
|
|
Text {
|
|
id: statusLabel
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.top: parent.top
|
|
text: root.visibleStage === 5 ? "SESSIONE PRONTA" : "AVVIO DELLA SESSIONE"
|
|
color: "#f3e2bd"
|
|
font.pixelSize: Math.max(17, Math.min(root.width * 0.022, 30))
|
|
font.bold: true
|
|
font.letterSpacing: Math.max(1, font.pixelSize * 0.08)
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
Text {
|
|
anchors.left: parent.left
|
|
anchors.top: statusLabel.bottom
|
|
anchors.topMargin: 5
|
|
text: "CARICAMENTO / FASE " + root.visibleStage + " DI 5"
|
|
color: "#d83a28"
|
|
font.pixelSize: Math.max(11, Math.min(root.width * 0.012, 16))
|
|
font.bold: true
|
|
font.letterSpacing: 1
|
|
}
|
|
|
|
Row {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.bottom: parent.bottom
|
|
height: Math.max(18, Math.min(root.height * 0.026, 28))
|
|
spacing: Math.max(5, root.width * 0.005)
|
|
|
|
Repeater {
|
|
model: 5
|
|
Rectangle {
|
|
required property int index
|
|
width: (loadingInfo.width - 4 * parent.spacing) / 5
|
|
height: parent.height
|
|
color: index < root.visibleStage ? "#d83a28" : "#4df0dfba"
|
|
border.color: "#b3f0dfba"
|
|
border.width: 1
|
|
|
|
Behavior on color { ColorAnimation { duration: 260 } }
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
color: "#f0dfba"
|
|
opacity: 0
|
|
SequentialAnimation on opacity {
|
|
loops: Animation.Infinite
|
|
PauseAnimation { duration: index * 120 }
|
|
NumberAnimation { from: 0; to: 0.38; duration: 180 }
|
|
NumberAnimation { from: 0.38; to: 0; duration: 360 }
|
|
PauseAnimation { duration: (4 - index) * 120 + 280 }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
width: Math.max(10, progressCue.width * 0.025)
|
|
height: progressCue.height
|
|
color: "#d83a28"
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
}
|
|
}
|
|
}
|
|
|
|
QtObject { id: overlayFade; property real value: 0.0 }
|
|
|
|
ParallelAnimation {
|
|
id: intro
|
|
NumberAnimation { target: scene; property: "opacity"; from: 0; to: 1; duration: 700; easing.type: Easing.OutCubic }
|
|
NumberAnimation { target: overlayFade; property: "value"; from: 0; to: 1; duration: 900 }
|
|
NumberAnimation { target: redShift; property: "y"; to: 0; duration: 850; easing.type: Easing.OutCubic }
|
|
NumberAnimation { target: lineShift; property: "x"; to: 0; duration: 950; easing.type: Easing.OutCubic }
|
|
NumberAnimation { target: darkShift; property: "y"; to: 0; duration: 1050; easing.type: Easing.OutCubic }
|
|
}
|
|
|
|
NumberAnimation {
|
|
id: outro
|
|
target: scene
|
|
property: "opacity"
|
|
to: 0
|
|
duration: 450
|
|
easing.type: Easing.InOutQuad
|
|
}
|
|
|
|
Component.onCompleted: intro.start()
|
|
onStageChanged: {
|
|
if (stage === 5) {
|
|
outro.start()
|
|
} else if (scene.opacity === 0 && !intro.running) {
|
|
intro.start()
|
|
}
|
|
}
|
|
}
|