Commit 2967cd14 authored by Jan Blackquill's avatar Jan Blackquill 🌈
Browse files

Improved gallery listing

Summary: The gallery listing is now a CardsLayout of cards with images and has a search bar.

Test Plan: {F8225697}

Reviewers: #vdg, #kirigami, mart

Reviewed By: #vdg, #kirigami, mart

Subscribers: plasma-devel

Tags: #plasma, #kirigami

Differential Revision: https://phabricator.kde.org/D28671
parent ae736f9f
......@@ -12,9 +12,10 @@ qt5_add_resources(RESOURCES resources.qrc)
if (CMAKE_SYSTEM_NAME STREQUAL "Android")
find_package(KF5Kirigami2 ${KF5_DEP_VERSION})
find_package(KF5ItemModels ${KF5_DEP_VERSION})
set(kirigami2gallery_EXTRA_LIBS Qt5::AndroidExtras
#FIXME: we shouldn't have to link to it but otherwise the lib won't be packaged on Android
Qt5::QuickControls2 KF5::Kirigami2)
Qt5::QuickControls2 KF5::Kirigami2 KF5::ItemModels)
endif()
find_program(kpackagetool_cmd kpackagetool5)
......
......@@ -21,6 +21,7 @@ import QtQuick 2.1
import QtQuick.Controls 2.0 as QQC2
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.11 as Kirigami
import org.kde.kitemmodels 1.0
Kirigami.ScrollablePage {
id: pageRoot
......@@ -60,153 +61,168 @@ Kirigami.ScrollablePage {
Kirigami.PagePool {
id: mainPagePool
}
ListView {
id: mainListView
currentIndex: -1
//currentIndex has focus, openPageIndex is the one actually open now
activeFocusOnTab: true
focus: true
ListModel {
id: galleryModel
ListElement {
title: "Buttons"
targetPage: "gallery/ButtonGallery.qml"
img: "img/buttons.svg"
}
ListElement {
title: "Selection Controls"
targetPage: "gallery/SelectionControlsGallery.qml"
img: "img/selection-controls.svg"
}
ListElement {
title: "Drawers"
targetPage: "gallery/DrawerGallery.qml"
img: "img/drawers.svg"
}
ListElement {
title: "Overlay Sheets"
targetPage: "gallery/OverlaySheetGallery.qml"
img: "img/overlay-sheets.svg"
}
ListElement {
title: "Progress Bar"
targetPage: "gallery/ProgressBarGallery.qml"
img: "img/progress-bar.svg"
}
ListElement {
title: "Slider"
targetPage: "gallery/SliderGallery.qml"
img: "img/slider.svg"
}
ListElement {
title: "Tab Bar"
targetPage: "gallery/TabBarGallery.qml"
img: "img/tabbar.svg"
}
ListElement {
title: "Text Field"
targetPage: "gallery/TextFieldGallery.qml"
img: "img/textfield.svg"
}
ListElement {
title: "Form Layout"
targetPage: "gallery/FormLayoutGallery.qml"
img: "img/formlayout.svg"
}
ListElement {
title: "Cards Layout"
targetPage: "gallery/CardsLayoutGallery.qml"
img: "img/cardlayout.svg"
}
ListElement {
title: "List View with Cards"
targetPage: "gallery/CardsListViewGallery.qml"
img: "img/cardlist.svg"
}
ListElement {
title: "Grid View with Cards"
targetPage: "gallery/CardsGridViewGallery.qml"
img: "img/cardgrid.svg"
}
ListElement {
title: "Inline Messages"
targetPage: "gallery/InlineMessagesGallery.qml"
img: "img/inlinemessage.svg"
}
ListElement {
title: "Multiple Columns"
targetPage: "gallery/MultipleColumnsGallery.qml"
img: "img/columnview.svg"
}
ListElement {
title: "Misc. Widgets"
targetPage: "gallery/MiscGallery.qml"
img: "img/miscwidgets.svg"
}
ListElement {
title: "List View"
targetPage: "gallery/ListViewGallery.qml"
img: "img/listview.svg"
}
ListElement {
title: "List Headers"
targetPage: "gallery/ListViewHeaderItemsGallery.qml"
img: "img/headers.svg"
}
ListElement {
title: "Non Scrollable Page"
targetPage: "gallery/NonScrollableGallery.qml"
img: "img/non-scroll-page.svg"
}
ListElement {
title: "Action Tool Bar"
targetPage: "gallery/ActionToolBarGallery.qml"
img: "img/action-tool-bar.svg"
}
ListElement {
title: "Colors"
targetPage: "gallery/ColorsGallery.qml"
img: "img/colors.svg"
}
ListElement {
title: "Color Sets"
targetPage: "gallery/ColorSetGallery.qml"
img: "img/colorsets.svg"
}
ListElement {
title: "Metrics"
targetPage: "gallery/MetricsGallery.qml"
img: "img/metrics.svg"
}
}
header: QQC2.ToolBar {
id: toolbar
RowLayout {
anchors.fill: parent
Kirigami.SearchField {
id: searchField
model: pageActions
property list<Kirigami.Action> pageActions: [
Kirigami.PagePoolAction {
text: qsTr("Buttons")
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/ButtonGallery.qml"
},
Kirigami.PagePoolAction {
text: qsTr("Selection Controls")
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/SelectionControlsGallery.qml"
},
Kirigami.PagePoolAction {
text: qsTr("Overlay Sheets")
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/OverlaySheetGallery.qml"
},
Kirigami.PagePoolAction {
text: qsTr("Drawers")
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/DrawerGallery.qml"
},
Kirigami.PagePoolAction {
text: "Progress Bar"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/ProgressBarGallery.qml"
},
Kirigami.PagePoolAction {
text: "Slider"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/SliderGallery.qml"
},
Kirigami.PagePoolAction {
text: "Tab Bar"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/TabBarGallery.qml"
},
Kirigami.PagePoolAction {
text: "Text Field"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/TextFieldGallery.qml"
},
Kirigami.PagePoolAction {
text: "Form Layout"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/FormLayoutGallery.qml"
},
Kirigami.PagePoolAction {
text: "Cards Layout"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/CardsLayoutGallery.qml"
},
Kirigami.PagePoolAction {
text: "List view of cards"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/CardsListViewGallery.qml"
},
Kirigami.PagePoolAction {
text: "Grid view of cards"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/CardsGridViewGallery.qml"
},
Kirigami.PagePoolAction {
text: "Inline Messages"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/InlineMessagesGallery.qml"
},
Kirigami.PagePoolAction {
text: "Multiple Columns"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/MultipleColumnsGallery.qml"
},
Kirigami.PagePoolAction {
text: "Misc widgets"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/MiscGallery.qml"
},
Kirigami.PagePoolAction {
text: "List View"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/ListViewGallery.qml"
},
Kirigami.PagePoolAction {
text: "List Headers"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/ListViewHeaderItemsGallery.qml"
},
Kirigami.PagePoolAction {
text: "Non Scrollable Page"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/NonScrollableGallery.qml"
},
Kirigami.PagePoolAction {
text: "Colors"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/ColorsGallery.qml"
},
Kirigami.PagePoolAction {
text: "Color Sets"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/ColorSetGallery.qml"
},
Kirigami.PagePoolAction {
text: "Metrics"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/MetricsGallery.qml"
},
Kirigami.PagePoolAction {
text: "Action Tool Bar"
pagePool: mainPagePool
basePage: pageRoot
page: "gallery/ActionToolBarGallery.qml"
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.maximumWidth: Kirigami.Units.gridUnit*30
}
}
}
ColumnLayout {
Kirigami.CardsLayout {
Repeater {
activeFocusOnTab: true
focus: true
model: KSortFilterProxyModel {
sourceModel: galleryModel
filterRole: "title"
filterRegularExpression: {
if (!searchAction.checked || searchField.text === "") return new RegExp()
return new RegExp("%1".arg(searchField.text), "i")
}
}
delegate: Kirigami.Card {
id: listItem
banner {
source: img
title: title
titleAlignment: Qt.AlignBottom | Qt.AlignLeft
}
showClickFeedback: true
onClicked: action.trigger()
highlighted: action.checked
implicitWidth: Kirigami.Units.gridUnit*30
implicitHeight: Kirigami.Units.gridUnit*10
Layout.maximumWidth: Kirigami.Units.gridUnit*30
Kirigami.PagePoolAction {
id: action
pagePool: mainPagePool
basePage: pageRoot
page: targetPage
}
}
}
]
delegate: Kirigami.BasicListItem {
id: listItem
reserveSpaceForIcon: false
//Accessible.role: Accessible.MenuItem
action: modelData
}
}
}
......
<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="384" height="192" fill="#009356"/>
<rect x="65.5" y="68.5" width="253" height="55" rx="15.5" fill="#00B86B" stroke="black"/>
<rect x="75.5" y="80.5" width="56" height="31" rx="7.5" fill="#00D485" stroke="black"/>
<rect x="142.5" y="80.5" width="78" height="31" rx="7.5" fill="#00D485" stroke="black"/>
<rect x="277.5" y="80.5" width="31" height="31" rx="7.5" fill="#00D485" stroke="black"/>
</svg>
<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="384" height="192" fill="#A20967"/>
<rect x="76.5" y="75.5" width="115" height="74" fill="#CB0B81" stroke="black" stroke-dasharray="10 10"/>
<rect x="192.5" y="75.5" width="115" height="74" fill="#CB0B81" stroke="black" stroke-dasharray="10 10"/>
<circle cx="192" cy="86" r="63.5" fill="#E93A9A" stroke="black" stroke-miterlimit="2.61313"/>
<path d="M184 54C170.704 54 160 64.7165 160 77.9922C160 91.2839 170.72 101.984 184 101.984C189.673 101.984 194.807 99.952 198.906 96.684L220.229 118L224 114.23L202.677 92.9144C205.961 88.8103 208 83.6721 208 77.9922C208 64.7005 197.28 54 184 54ZM184 59.3316C194.341 59.3316 202.667 67.6542 202.667 77.9922C202.667 88.3302 194.341 96.6528 184 96.6528C173.659 96.6528 165.333 88.3302 165.333 77.9922C165.333 67.6542 173.659 59.3316 184 59.3316Z" fill="black"/>
</svg>
<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="384" height="192" fill="#A20967"/>
<rect x="48.5" y="22.5" width="87" height="87" rx="4.5" fill="#E93A9A" stroke="black"/>
<path d="M48 48L136 48" stroke="black"/>
<path d="M57 68L128 68" stroke="black"/>
<path d="M57 73L114 73" stroke="black"/>
<path d="M57 83L114 83" stroke="black"/>
<path d="M57 93L114 93" stroke="black"/>
<path d="M57 78L119 78" stroke="black"/>
<path d="M57 88L119 88" stroke="black"/>
<rect x="81.5" y="36.5" width="21" height="21" rx="10.5" fill="#CB0B81" stroke="black"/>
<rect x="148.5" y="22.5" width="87" height="87" rx="4.5" fill="#E93A9A" stroke="black"/>
<path d="M148 48L236 48" stroke="black"/>
<path d="M157 68L228 68" stroke="black"/>
<path d="M157 73L214 73" stroke="black"/>
<path d="M157 83L214 83" stroke="black"/>
<path d="M157 93L214 93" stroke="black"/>
<path d="M157 78L219 78" stroke="black"/>
<path d="M157 88L219 88" stroke="black"/>
<rect x="181.5" y="36.5" width="21" height="21" rx="10.5" fill="#CB0B81" stroke="black"/>
<rect x="48.5" y="122.5" width="87" height="87" rx="4.5" fill="#E93A9A" stroke="black"/>
<path d="M48 148H136" stroke="black"/>
<path d="M57 168L128 168" stroke="black"/>
<path d="M57 173L114 173" stroke="black"/>
<path d="M57 183L114 183" stroke="black"/>
<path d="M57 178L119 178" stroke="black"/>
<path d="M57 188L119 188" stroke="black"/>
<rect x="81.5" y="136.5" width="21" height="21" rx="10.5" fill="#CB0B81" stroke="black"/>
<rect x="148.5" y="122.5" width="87" height="87" rx="4.5" fill="#E93A9A" stroke="black"/>
<path d="M148 148H236" stroke="black"/>
<path d="M157 168L228 168" stroke="black"/>
<path d="M157 173L214 173" stroke="black"/>
<path d="M157 183L214 183" stroke="black"/>
<path d="M157 178L219 178" stroke="black"/>
<path d="M157 188L219 188" stroke="black"/>
<rect x="181.5" y="136.5" width="21" height="21" rx="10.5" fill="#CB0B81" stroke="black"/>
<rect x="248.5" y="22.5" width="87" height="87" rx="4.5" fill="#E93A9A" stroke="black"/>
<path d="M248 48L336 48" stroke="black"/>
<path d="M257 68L328 68" stroke="black"/>
<path d="M257 73L314 73" stroke="black"/>
<path d="M257 83L314 83" stroke="black"/>
<path d="M257 93L314 93" stroke="black"/>
<path d="M257 78L319 78" stroke="black"/>
<path d="M257 88L319 88" stroke="black"/>
<rect x="281.5" y="36.5" width="21" height="21" rx="10.5" fill="#CB0B81" stroke="black"/>
<rect x="248.5" y="122.5" width="87" height="87" rx="4.5" fill="#E93A9A" stroke="black"/>
<path d="M248 148H336" stroke="black"/>
<path d="M257 168L328 168" stroke="black"/>
<path d="M257 173L314 173" stroke="black"/>
<path d="M257 183L314 183" stroke="black"/>
<path d="M257 178L319 178" stroke="black"/>
<path d="M257 188L319 188" stroke="black"/>
<rect x="281.5" y="136.5" width="21" height="21" rx="10.5" fill="#CB0B81" stroke="black"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="384" height="192" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="384" height="192" fill="#7D499A"/>
<rect x="78.5" y="22.5" width="87" height="87" rx="4.5" fill="#B875DC" stroke="black"/>
<path d="M78 48L166 48" stroke="black"/>
<path d="M87 68L158 68" stroke="black"/>
<path d="M87 73L144 73" stroke="black"/>
<path d="M87 83L144 83" stroke="black"/>
<path d="M87 93L144 93" stroke="black"/>
<path d="M87 78L149 78" stroke="black"/>
<path d="M87 88L149 88" stroke="black"/>
<rect x="111.5" y="36.5" width="21" height="21" rx="10.5" fill="#9C5BC0" stroke="black"/>
<rect x="218.5" y="22.5" width="87" height="87" rx="4.5" fill="#B875DC" stroke="black"/>
<path d="M218 48L306 48" stroke="black"/>
<path d="M227 68L298 68" stroke="black"/>
<path d="M227 73L284 73" stroke="black"/>
<path d="M227 83L284 83" stroke="black"/>
<path d="M227 93L284 93" stroke="black"/>
<path d="M227 78L289 78" stroke="black"/>
<path d="M227 88L289 88" stroke="black"/>
<rect x="251.5" y="36.5" width="21" height="21" rx="10.5" fill="#9C5BC0" stroke="black"/>
<rect x="78.5" y="122.5" width="87" height="87" rx="4.5" fill="#B875DC" stroke="black"/>
<path d="M78 148H166" stroke="black"/>
<path d="M87 168L158 168" stroke="black"/>
<path d="M87 173L144 173" stroke="black"/>
<path d="M87 183L144 183" stroke="black"/>
<path d="M87 178L149 178" stroke="black"/>
<path d="M87 188L149 188" stroke="black"/>
<rect x="111.5" y="136.5" width="21" height="21" rx="10.5" fill="#9C5BC0" stroke="black"/>
<rect x="218.5" y="122.5" width="87" height="87" rx="4.5" fill="#B875DC" stroke="black"/>
<path d="M218 148H306" stroke="black"/>
<path d="M227 168L298 168" stroke="black"/>
<path d="M227 173L284 173" stroke="black"/>
<path d="M227 183L284 183" stroke="black"/>
<path d="M227 178L289 178" stroke="black"/>
<path d="M227 188L289 188" stroke="black"/>
<rect x="251.5" y="136.5" width="21" height="21" rx="10.5" fill="#9C5BC0" stroke="black"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="384" height="192" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="384" height="192" fill="#5E44A0"/>
<rect x="111.5" y="32.5" width="161" height="43" rx="4.5" fill="#926EE4" stroke="black"/>
<path d="M164 47L252 47" stroke="black"/>
<path d="M164 54L225 54" stroke="black"/>
<path d="M164 61L225 61" stroke="black"/>
<rect x="134.5" y="43.5" width="21" height="21" rx="10.5" fill="#7655C8" stroke="black"/>
<rect x="111.5" y="92.5" width="161" height="43" rx="4.5" fill="#926EE4" stroke="black"/>
<path d="M164 107H252" stroke="black"/>
<path d="M164 114L225 114" stroke="black"/>
<path d="M164 121L225 121" stroke="black"/>
<rect x="134.5" y="103.5" width="21" height="21" rx="10.5" fill="#7655C8" stroke="black"/>
<rect x="111.5" y="152.5" width="161" height="43" rx="4.5" fill="#926EE4" stroke="black"/>
<path d="M164 167H252" stroke="black"/>
<path d="M164 174L225 174" stroke="black"/>
<path d="M164 181L225 181" stroke="black"/>
<rect x="134.5" y="163.5" width="21" height="21" rx="10.5" fill="#7655C8" stroke="black"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="384" height="192" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="384" height="192" fill="#686B6F"/>
<mask id="path-2-inside-1" fill="white">
<path d="M246.469 129.602C240.57 139.165 232.257 147.007 222.365 152.338C212.474 157.669 201.353 160.302 190.121 159.972C178.89 159.643 167.943 156.361 158.381 150.459C148.82 144.556 140.981 136.241 135.653 126.348L192 96L246.469 129.602Z"/>
</mask>
<path d="M246.469 129.602C240.57 139.165 232.257 147.007 222.365 152.338C212.474 157.669 201.353 160.302 190.121 159.972C178.89 159.643 167.943 156.361 158.381 150.459C148.82 144.556 140.981 136.241 135.653 126.348L192 96L246.469 129.602Z" fill="#3DD425" stroke="black" stroke-width="2" mask="url(#path-2-inside-1)"/>
<mask id="path-3-inside-2" fill="white">
<path d="M256 96C256 107.234 253.043 118.271 247.426 128C241.808 137.729 233.729 145.808 224 151.426L192 96H256Z"/>
</mask>
<path d="M256 96C256 107.234 253.043 118.271 247.426 128C241.808 137.729 233.729 145.808 224 151.426L192 96H256Z" fill="#E8CB2D" stroke="black" stroke-width="2" mask="url(#path-3-inside-2)"/>
<mask id="path-4-inside-3" fill="white">
<path d="M160 151.426C150.271 145.808 142.192 137.729 136.575 128C130.957 118.271 128 107.234 128 96L192 96L160 151.426Z"/>
</mask>
<path d="M160 151.426C150.271 145.808 142.192 137.729 136.575 128C130.957 118.271 128 107.234 128 96L192 96L160 151.426Z" fill="#3DAEE9" stroke="black" stroke-width="2" mask="url(#path-4-inside-3)"/>
<mask id="path-5-inside-4" fill="white">
<path d="M137.531 63.3983C143.431 53.835 151.744 45.9935 161.635 40.6622C171.527 35.3309 182.647 32.6978 193.879 33.0276C205.111 33.3574 216.058 36.6385 225.619 42.5411C235.181 48.4436 243.02 56.7594 248.348 66.6525L192.001 97L137.531 63.3983Z"/>
</mask>
<path d="M137.531 63.3983C143.431 53.835 151.744 45.9935 161.635 40.6622C171.527 35.3309 182.647 32.6978 193.879 33.0276C205.111 33.3574 216.058 36.6385 225.619 42.5411C235.181 48.4436 243.02 56.7594 248.348 66.6525L192.001 97L137.531 63.3983Z" fill="#E93D58" stroke="black" stroke-width="2" mask="url(#path-5-inside-4)"/>
<mask id="path-6-inside-5" fill="white">
<path d="M128 97C128 85.7656 130.958 74.7292 136.575 65C142.192 55.2708 150.271 47.1915 160 41.5744L192 97L128 97Z"/>
</mask>
<path d="M128 97C128 85.7656 130.958 74.7292 136.575 65C142.192 55.2708 150.271 47.1915 160 41.5744L192 97L128 97Z" fill="#926EE4" stroke="black" stroke-width="2" mask="url(#path-6-inside-5)"/>
<mask id="path-7-inside-6" fill="white">
<path d="M224 41.5744C233.73 47.1916 241.809 55.2708 247.426 65C253.043 74.7292 256 85.7657 256 97L192 97L224 41.5744Z"/>
</mask>
<path d="M224 41.5744C233.73 47.1916 241.809 55.2708 247.426 65C253.043 74.7292 256 85.7657 256 97L192 97L224 41.5744Z" fill="#EF973C" stroke="black" stroke-width="2" mask="url(#path-7-inside-6)"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="384" height="192" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="384" height="192" fill="#686B6F"/>
<rect x="107.5" y="11.5" width="79" height="79" rx="15.5" fill="#D1D5D9" stroke="black"/>
<rect x="197.5" y="11.5" width="79" height="79" rx="15.5" fill="#B6E521" stroke="black"/>
<rect x="107.5" y="101.5" width="79" height="79" rx="15.5" fill="#232629" stroke="black"/>
<rect x="197.5" y="101.5" width="79" height="79" rx="15.5" fill="#9B9EA2" stroke="black"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="384" height="192" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="384" height="192" fill="#A43E1E"/>
<rect x="-0.5" y="-0.5" width="128" height="32" fill="#E9643A" stroke="black"/>
<rect x="127.5" y="-0.5" width="129" height="32" fill="#E9643A" stroke="black"/>
<rect x="256.5" y="-0.5" width="128" height="32" fill="#E9643A" stroke="black"/>
<rect x="101.5" y="5.5" width="21" height="21" rx="4.5" fill="#CD4D25" stroke="black"/>
<rect x="357.5" y="5.5" width="21" height="21" rx="4.5" fill="#CD4D25" stroke="black"/>
<rect x="330.5" y="5.5" width="21" height="21" rx="4.5" fill="#CD4D25" stroke="black"/>
<rect x="127" y="32" width="1" height="160" fill="black"/>
<rect x="256" y="32" width="1" height="160" fill="black"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="384" height="192" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="384" height="192" fill="#A43E1E"/>
<rect x="-2.5" y="-2.5" width="147" height="196" fill="#CD4D25" stroke="black"/>
<rect x="13.5" y="13.5" width="26" height="26" rx="13" fill="#E9643A" stroke="black"/>
<rect x="44.5" y="21.5" width="80" height="10" fill="#E9643A" stroke="black"/>
<rect x="0.5" y="176.5" width="144" height="15" fill="#E9643A" stroke="black" stroke-dasharray="10 10"/>
<rect x="0.5" y="161.5" width="144" height="15" fill="#E9643A" stroke="black" stroke-dasharray="10 10"/>
<rect x="0.5" y="146.5" width="144" height="15" fill="#E9643A" stroke="black" stroke-dasharray="10 10"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="384" height="192" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="384" height="192" viewBox="0 0 384 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="384" height="192" fill="#228199"/>
<rect x="182.5" y="42.5" width="154" height="21" rx="4.5" fill="#3DAEE9" stroke="black"/>
<rect x="182.5" y="74.5" width="154" height="21" rx="4.5" fill="#3DAEE9" stroke="black"/>
<rect x="182.5" y="106.5" width="77" height="21" rx="4.5" fill="#2AA1BF" stroke="black"/>
<path d="M75 53L156 53" stroke="black"/>
<path d="M75 85L156 85" stroke="black"/>
</svg>