Add themes to voice assistant app

Add four themes: "light", "dark", "textured-light", and "textured-dark" to the voice assistant app. Themes can be changed by modifying assets/config.json file. Bug-AGL: SPEC-4906 Signed-off-by: Malik Talha <talhamalik727x@gmail.com> Change-Id: I3e257da70543c7918e4f0cf96a62907390af8480
author: Malik Talha <talhamalik727x@gmail.com> 2023-11-16 22:04:56 +0500
committer: Malik Talha <talhamalik727x@gmail.com> 2023-11-16 22:04:56 +0500
commit: ecd34435c1a74b39bf41d59ad479fdc85d0afb7b (patch)
tree: 1ed954b6c53321f854355bf82d13b736364e595b
parent: d433980265de4eccd343dcbfc92c3e7416057842 (diff)
16 files changed, 1035 insertions, 177 deletions
diff --git a/.gitignore b/.gitignore
index a269bcb..3a46b83 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,7 +19,7 @@ migrate_working_dir/
 # The .vscode folder contains launch configuration and tasks you configure in
 # VS Code which you may wish to be included in version control, so this line
 # is commented out by default.
-#.vscode/
+.vscode/
 
 # Flutter/Dart/Pub related
 **/doc/api/
diff --git a/assets/agl_logo.png b/assets/agl_logo.png
deleted file mode 100644
index ffe5d19..0000000
--- a/assets/agl_logo.png
+++ /dev/null
diff --git a/assets/agl_logo_darkmode.png b/assets/agl_logo_darkmode.png
new file mode 100644
index 0000000..b2a32d1
--- /dev/null
+++ b/assets/agl_logo_darkmode.png
diff --git a/assets/agl_logo_lightmode.png b/assets/agl_logo_lightmode.png
new file mode 100644
index 0000000..9c66d55
--- /dev/null
+++ b/assets/agl_logo_lightmode.png
diff --git a/assets/background_texture.svg b/assets/background_texture.svg
new file mode 100644
index 0000000..5a05a97
--- /dev/null
+++ b/assets/background_texture.svg
@@ -0,0 +1,679 @@
+<svg width="1080" height="1840" viewBox="0 0 1080 1840" fill="none" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<radialGradient id="paint0_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 1376.5) rotate(-90) scale(880.5 540)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 634) rotate(90) scale(406 406)">
+<stop stop-color="#2962FF" stop-opacity="0"/>
+<stop offset="0.513053" stop-color="#2962FF" stop-opacity="0.782292"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint8_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint9_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint10_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint11_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint12_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint13_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint14_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint15_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint16_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint17_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint18_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint19_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint20_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint21_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint22_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint23_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint24_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint25_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint26_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint27_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint28_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint29_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint30_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint31_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint32_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint33_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint34_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint35_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint36_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint37_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint38_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint39_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint40_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint41_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint42_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint43_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint44_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint45_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint46_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint47_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint48_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint49_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint50_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint51_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint52_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint53_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint54_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint55_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint56_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint57_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint58_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint59_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint60_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint61_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint62_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint63_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint64_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint65_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint66_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint67_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(536 1396) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint68_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint69_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint70_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint71_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint72_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint73_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint74_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint75_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint76_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint77_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint78_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint79_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint80_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint81_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint82_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint83_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint84_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint85_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint86_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint87_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint88_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint89_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint90_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint91_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint92_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint93_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint94_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint95_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint96_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint97_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint98_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint99_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint100_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint101_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint102_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint103_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint104_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint105_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint106_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint107_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint108_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint109_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint110_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint111_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint112_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint113_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint114_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint115_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint116_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint117_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint118_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint119_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint120_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint121_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint122_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint123_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint124_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint125_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint126_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint127_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint128_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint129_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint130_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint131_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint132_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint133_radial_129_2056" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540 638) rotate(90) scale(324 516)">
+<stop stop-color="#2962FF"/>
+<stop offset="1" stop-color="#2962FF" stop-opacity="0"/>
+</radialGradient>
+</defs>
+<path d="M1080 496L1080 1840L-5.87481e-05 1840L0 496L1080 496Z" fill="url(#paint0_radial_129_2056)" fill-opacity="0.3"/>
+<path d="M0 190L1080 190L1080 1160L0 1160L0 190Z" fill="url(#paint1_radial_129_2056)" fill-opacity="0.5"/>
+<g opacity="0.5">
+<path d="M412 1072H411L411 1720H412L412 1072Z" fill="url(#paint2_radial_129_2056)"/>
+<path d="M812 1072H811L811 1720H812L812 1072Z" fill="url(#paint3_radial_129_2056)"/>
+<path d="M962 1072H961L961 1720H962L962 1072Z" fill="url(#paint4_radial_129_2056)"/>
+<path d="M1037 1072H1036V1720H1037V1072Z" fill="url(#paint5_radial_129_2056)"/>
+<path d="M312 1072H311L311 1720H312L312 1072Z" fill="url(#paint6_radial_129_2056)"/>
+<path d="M712 1072H711L711 1720H712L712 1072Z" fill="url(#paint7_radial_129_2056)"/>
+<path d="M862 1072H861L861 1720H862L862 1072Z" fill="url(#paint8_radial_129_2056)"/>
+<path d="M362 1072H361L361 1720H362L362 1072Z" fill="url(#paint9_radial_129_2056)"/>
+<path d="M762 1072H761L761 1720H762L762 1072Z" fill="url(#paint10_radial_129_2056)"/>
+<path d="M912 1072H911L911 1720H912L912 1072Z" fill="url(#paint11_radial_129_2056)"/>
+<path d="M987 1072H986L986 1720H987L987 1072Z" fill="url(#paint12_radial_129_2056)"/>
+<path d="M262 1072H261L261 1720H262L262 1072Z" fill="url(#paint13_radial_129_2056)"/>
+<path d="M662 1072H661L661 1720H662L662 1072Z" fill="url(#paint14_radial_129_2056)"/>
+<path d="M387 1072H386L386 1720H387L387 1072Z" fill="url(#paint15_radial_129_2056)"/>
+<path d="M787 1072H786L786 1720H787L787 1072Z" fill="url(#paint16_radial_129_2056)"/>
+<path d="M937 1072H936L936 1720H937L937 1072Z" fill="url(#paint17_radial_129_2056)"/>
+<path d="M1012 1072H1011L1011 1720H1012L1012 1072Z" fill="url(#paint18_radial_129_2056)"/>
+<path d="M287 1072H286L286 1720H287L287 1072Z" fill="url(#paint19_radial_129_2056)"/>
+<path d="M687 1072H686L686 1720H687L687 1072Z" fill="url(#paint20_radial_129_2056)"/>
+<path d="M837 1072H836L836 1720H837L837 1072Z" fill="url(#paint21_radial_129_2056)"/>
+<path d="M337 1072H336L336 1720H337L337 1072Z" fill="url(#paint22_radial_129_2056)"/>
+<path d="M737 1072H736L736 1720H737L737 1072Z" fill="url(#paint23_radial_129_2056)"/>
+<path d="M887 1072H886L886 1720H887L887 1072Z" fill="url(#paint24_radial_129_2056)"/>
+<path d="M237 1072H236L236 1720H237L237 1072Z" fill="url(#paint25_radial_129_2056)"/>
+<path d="M637 1072H636L636 1720H637L637 1072Z" fill="url(#paint26_radial_129_2056)"/>
+<path d="M212 1072H211L211 1720H212L212 1072Z" fill="url(#paint27_radial_129_2056)"/>
+<path d="M612 1072H611L611 1720H612L612 1072Z" fill="url(#paint28_radial_129_2056)"/>
+<path d="M112 1072H111L111 1720H112L112 1072Z" fill="url(#paint29_radial_129_2056)"/>
+<path d="M512 1072H511L511 1720H512L512 1072Z" fill="url(#paint30_radial_129_2056)"/>
+<path d="M162 1072H161L161 1720H162L162 1072Z" fill="url(#paint31_radial_129_2056)"/>
+<path d="M562 1072H561L561 1720H562L562 1072Z" fill="url(#paint32_radial_129_2056)"/>
+<path d="M62 1072H61L61 1720H62L62 1072Z" fill="url(#paint33_radial_129_2056)"/>
+<path d="M462 1072H461L461 1720H462L462 1072Z" fill="url(#paint34_radial_129_2056)"/>
+<path d="M187 1072H186L186 1720H187L187 1072Z" fill="url(#paint35_radial_129_2056)"/>
+<path d="M587 1072H586L586 1720H587L587 1072Z" fill="url(#paint36_radial_129_2056)"/>
+<path d="M87 1072H86L86 1720H87L87 1072Z" fill="url(#paint37_radial_129_2056)"/>
+<path d="M487 1072H486L486 1720H487L487 1072Z" fill="url(#paint38_radial_129_2056)"/>
+<path d="M137 1072H136L136 1720H137L137 1072Z" fill="url(#paint39_radial_129_2056)"/>
+<path d="M537 1072H536L536 1720H537L537 1072Z" fill="url(#paint40_radial_129_2056)"/>
+<path d="M37 1072H36L36 1720H37L37 1072Z" fill="url(#paint41_radial_129_2056)"/>
+<path d="M437 1072H436L436 1720H437L437 1072Z" fill="url(#paint42_radial_129_2056)"/>
+<path d="M1052 1095.04L20 1095.04V1096.04L1052 1096.04V1095.04Z" fill="url(#paint43_radial_129_2056)"/>
+<path d="M1052 1295.34L20 1295.34V1296.35L1052 1296.35V1295.34Z" fill="url(#paint44_radial_129_2056)"/>
+<path d="M1052 1495.65L20 1495.65V1496.66L1052 1496.66V1495.65Z" fill="url(#paint45_radial_129_2056)"/>
+<path d="M1052 1195.19L20 1195.19V1196.19L1052 1196.19V1195.19Z" fill="url(#paint46_radial_129_2056)"/>
+<path d="M1052 1395.5L20 1395.5V1396.5L1052 1396.5V1395.5Z" fill="url(#paint47_radial_129_2056)"/>
+<path d="M1052 1595.81H20V1596.81H1052V1595.81Z" fill="url(#paint48_radial_129_2056)"/>
+<path d="M1052 1145.11L20 1145.11V1146.11L1052 1146.11V1145.11Z" fill="url(#paint49_radial_129_2056)"/>
+<path d="M1052 1345.42L20 1345.42V1346.42L1052 1346.42V1345.42Z" fill="url(#paint50_radial_129_2056)"/>
+<path d="M1052 1545.73L20 1545.73V1546.73L1052 1546.73V1545.73Z" fill="url(#paint51_radial_129_2056)"/>
+<path d="M1052 1245.27L20 1245.27V1246.27L1052 1246.27V1245.27Z" fill="url(#paint52_radial_129_2056)"/>
+<path d="M1052 1445.58L20 1445.58V1446.58L1052 1446.58V1445.58Z" fill="url(#paint53_radial_129_2056)"/>
+<path d="M1052 1645.89H20V1646.89H1052V1645.89Z" fill="url(#paint54_radial_129_2056)"/>
+<path d="M1052 1120.07L20 1120.07V1121.08L1052 1121.08V1120.07Z" fill="url(#paint55_radial_129_2056)"/>
+<path d="M1052 1320.38L20 1320.38V1321.38L1052 1321.38V1320.38Z" fill="url(#paint56_radial_129_2056)"/>
+<path d="M1052 1520.69L20 1520.69V1521.69L1052 1521.69V1520.69Z" fill="url(#paint57_radial_129_2056)"/>
+<path d="M1052 1220.23L20 1220.23V1221.23L1052 1221.23V1220.23Z" fill="url(#paint58_radial_129_2056)"/>
+<path d="M1052 1420.54L20 1420.54V1421.54L1052 1421.54V1420.54Z" fill="url(#paint59_radial_129_2056)"/>
+<path d="M1052 1620.85H20V1621.85H1052V1620.85Z" fill="url(#paint60_radial_129_2056)"/>
+<path d="M1052 1170.15L20 1170.15V1171.15L1052 1171.15V1170.15Z" fill="url(#paint61_radial_129_2056)"/>
+<path d="M1052 1370.46L20 1370.46V1371.46L1052 1371.46V1370.46Z" fill="url(#paint62_radial_129_2056)"/>
+<path d="M1052 1570.77L20 1570.77V1571.77L1052 1571.77V1570.77Z" fill="url(#paint63_radial_129_2056)"/>
+<path d="M1052 1270.31L20 1270.31V1271.31L1052 1271.31V1270.31Z" fill="url(#paint64_radial_129_2056)"/>
+<path d="M1052 1470.62L20 1470.62V1471.62L1052 1471.62V1470.62Z" fill="url(#paint65_radial_129_2056)"/>
+<path d="M1052 1670.92H20V1671.93H1052V1670.92Z" fill="url(#paint66_radial_129_2056)"/>
+<path d="M1052 1695.96H20V1696.96H1052V1695.96Z" fill="url(#paint67_radial_129_2056)"/>
+</g>
+<g opacity="0.5">
+<path d="M416 314H415L415 962H416L416 314Z" fill="url(#paint68_radial_129_2056)"/>
+<path d="M816 314H815L815 962H816L816 314Z" fill="url(#paint69_radial_129_2056)"/>
+<path d="M966 314H965L965 962H966L966 314Z" fill="url(#paint70_radial_129_2056)"/>
+<path d="M1041 314H1040V962H1041V314Z" fill="url(#paint71_radial_129_2056)"/>
+<path d="M316 314H315L315 962H316L316 314Z" fill="url(#paint72_radial_129_2056)"/>
+<path d="M716 314H715L715 962H716L716 314Z" fill="url(#paint73_radial_129_2056)"/>
+<path d="M866 314H865L865 962H866L866 314Z" fill="url(#paint74_radial_129_2056)"/>
+<path d="M366 314H365L365 962H366L366 314Z" fill="url(#paint75_radial_129_2056)"/>
+<path d="M766 314H765L765 962H766L766 314Z" fill="url(#paint76_radial_129_2056)"/>
+<path d="M916 314H915L915 962H916L916 314Z" fill="url(#paint77_radial_129_2056)"/>
+<path d="M991 314H990L990 962H991L991 314Z" fill="url(#paint78_radial_129_2056)"/>
+<path d="M266 314H265L265 962H266L266 314Z" fill="url(#paint79_radial_129_2056)"/>
+<path d="M666 314H665L665 962H666L666 314Z" fill="url(#paint80_radial_129_2056)"/>
+<path d="M391 314H390L390 962H391L391 314Z" fill="url(#paint81_radial_129_2056)"/>
+<path d="M791 314H790L790 962H791L791 314Z" fill="url(#paint82_radial_129_2056)"/>
+<path d="M941 314H940L940 962H941L941 314Z" fill="url(#paint83_radial_129_2056)"/>
+<path d="M1016 314H1015L1015 962H1016L1016 314Z" fill="url(#paint84_radial_129_2056)"/>
+<path d="M291 314H290L290 962H291L291 314Z" fill="url(#paint85_radial_129_2056)"/>
+<path d="M691 314H690L690 962H691L691 314Z" fill="url(#paint86_radial_129_2056)"/>
+<path d="M841 314H840L840 962H841L841 314Z" fill="url(#paint87_radial_129_2056)"/>
+<path d="M341 314H340L340 962H341L341 314Z" fill="url(#paint88_radial_129_2056)"/>
+<path d="M741 314H740L740 962H741L741 314Z" fill="url(#paint89_radial_129_2056)"/>
+<path d="M891 314H890L890 962H891L891 314Z" fill="url(#paint90_radial_129_2056)"/>
+<path d="M241 314H240L240 962H241L241 314Z" fill="url(#paint91_radial_129_2056)"/>
+<path d="M641 314H640L640 962H641L641 314Z" fill="url(#paint92_radial_129_2056)"/>
+<path d="M216 314H215L215 962H216L216 314Z" fill="url(#paint93_radial_129_2056)"/>
+<path d="M616 314H615L615 962H616L616 314Z" fill="url(#paint94_radial_129_2056)"/>
+<path d="M116 314H115L115 962H116L116 314Z" fill="url(#paint95_radial_129_2056)"/>
+<path d="M516 314H515L515 962H516L516 314Z" fill="url(#paint96_radial_129_2056)"/>
+<path d="M166 314H165L165 962H166L166 314Z" fill="url(#paint97_radial_129_2056)"/>
+<path d="M566 314H565L565 962H566L566 314Z" fill="url(#paint98_radial_129_2056)"/>
+<path d="M66 314H65L65 962H66L66 314Z" fill="url(#paint99_radial_129_2056)"/>
+<path d="M466 314H465L465 962H466L466 314Z" fill="url(#paint100_radial_129_2056)"/>
+<path d="M191 314H190L190 962H191L191 314Z" fill="url(#paint101_radial_129_2056)"/>
+<path d="M591 314H590L590 962H591L591 314Z" fill="url(#paint102_radial_129_2056)"/>
+<path d="M91 314H90L90 962H91L91 314Z" fill="url(#paint103_radial_129_2056)"/>
+<path d="M491 314H490L490 962H491L491 314Z" fill="url(#paint104_radial_129_2056)"/>
+<path d="M141 314H140L140 962H141L141 314Z" fill="url(#paint105_radial_129_2056)"/>
+<path d="M541 314H540L540 962H541L541 314Z" fill="url(#paint106_radial_129_2056)"/>
+<path d="M41 314H40L40 962H41L41 314Z" fill="url(#paint107_radial_129_2056)"/>
+<path d="M441 314H440L440 962H441L441 314Z" fill="url(#paint108_radial_129_2056)"/>
+<path d="M1056 337.036L24 337.036V338.037L1056 338.037V337.036Z" fill="url(#paint109_radial_129_2056)"/>
+<path d="M1056 537.345L24 537.345V538.346L1056 538.346V537.345Z" fill="url(#paint110_radial_129_2056)"/>
+<path d="M1056 737.654L24 737.654V738.655L1056 738.655V737.654Z" fill="url(#paint111_radial_129_2056)"/>
+<path d="M1056 437.19L24 437.19V438.192L1056 438.192V437.19Z" fill="url(#paint112_radial_129_2056)"/>
+<path d="M1056 637.499L24 637.499V638.501L1056 638.501V637.499Z" fill="url(#paint113_radial_129_2056)"/>
+<path d="M1056 837.808L24 837.808V838.81L1056 838.81V837.808Z" fill="url(#paint114_radial_129_2056)"/>
+<path d="M1056 387.113L24 387.113V388.114L1056 388.114V387.113Z" fill="url(#paint115_radial_129_2056)"/>
+<path d="M1056 587.422L24 587.422V588.423L1056 588.423V587.422Z" fill="url(#paint116_radial_129_2056)"/>
+<path d="M1056 787.731L24 787.731V788.733L1056 788.733V787.731Z" fill="url(#paint117_radial_129_2056)"/>
+<path d="M1056 487.267L24 487.267V488.269L1056 488.269V487.267Z" fill="url(#paint118_radial_129_2056)"/>
+<path d="M1056 687.576L24 687.576V688.578L1056 688.578V687.576Z" fill="url(#paint119_radial_129_2056)"/>
+<path d="M1056 887.886L24 887.886V888.887L1056 888.887V887.886Z" fill="url(#paint120_radial_129_2056)"/>
+<path d="M1056 362.074L24 362.074V363.076L1056 363.076V362.074Z" fill="url(#paint121_radial_129_2056)"/>
+<path d="M1056 562.383L24 562.383V563.385L1056 563.385V562.383Z" fill="url(#paint122_radial_129_2056)"/>
+<path d="M1056 762.692L24 762.692V763.694L1056 763.694V762.692Z" fill="url(#paint123_radial_129_2056)"/>
+<path d="M1056 462.229L24 462.229V463.23L1056 463.23V462.229Z" fill="url(#paint124_radial_129_2056)"/>
+<path d="M1056 662.538L24 662.538V663.539L1056 663.539V662.538Z" fill="url(#paint125_radial_129_2056)"/>
+<path d="M1056 862.847L24 862.847V863.849L1056 863.849V862.847Z" fill="url(#paint126_radial_129_2056)"/>
+<path d="M1056 412.151L24 412.151V413.153L1056 413.153V412.151Z" fill="url(#paint127_radial_129_2056)"/>
+<path d="M1056 612.461L24 612.461V613.462L1056 613.462V612.461Z" fill="url(#paint128_radial_129_2056)"/>
+<path d="M1056 812.77L24 812.77V813.771L1056 813.771V812.77Z" fill="url(#paint129_radial_129_2056)"/>
+<path d="M1056 512.306L24 512.306V513.308L1056 513.308V512.306Z" fill="url(#paint130_radial_129_2056)"/>
+<path d="M1056 712.615L24 712.615V713.617L1056 713.617V712.615Z" fill="url(#paint131_radial_129_2056)"/>
+<path d="M1056 912.924L24 912.924V913.926L1056 913.926V912.924Z" fill="url(#paint132_radial_129_2056)"/>
+<path d="M1056 937.963L24 937.963V938.964L1056 938.964V937.963Z" fill="url(#paint133_radial_129_2056)"/>
+</g>
+</svg>
diff --git a/assets/config.json b/assets/config.json
index 6920f9b..355373a 100644
--- a/assets/config.json
+++ b/assets/config.json
@@ -1,4 +1,5 @@
 {
     "grpc_host": "127.0.0.1",
-    "grpc_port": 51053
+    "grpc_port": 51053,
+    "theme": "textured-dark"
 }
 \ No newline at end of file
diff --git a/lib/main.dart b/lib/main.dart
index b271b79..9dfbd54 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'models/app_state.dart';
 import 'screens/home_screen.dart';
 import 'screens/error_screen.dart';
@@ -62,19 +63,53 @@ class App extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: 'AGL Voice Assistant',
+      title: 'Voice Assistant',
       theme: ThemeData(
         useMaterial3: true,
-        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
+        colorScheme: config.theme == "dark" || config.theme == "textured-dark"
+            ? ColorScheme.dark(
+                primary: Colors.green,
+                onPrimary: Colors.black, // Text color on the primary background
+                secondary: Colors.greenAccent,
+                onSecondary:
+                    Colors.black, // Text color on the secondary background
+              )
+            : ColorScheme.light(
+                primary: Colors.green,
+                onPrimary: Colors.white, // Text color on the primary background
+                secondary: Colors.greenAccent,
+                onSecondary:
+                    Colors.white, // Text color on the secondary background
+              ),
       ),
-      home: Consumer<ServiceStatusProvider>(
-        builder: (context, provider, child) {
-          return provider.isServiceOnline
-              ? HomePage(config: config, wakeWord: provider.wakeWord)
-              : ErrorScreen(
-                  onRetry: onRetry, // Pass the callback to the ErrorScreen
-                ); // Conditionally render HomePage or ErrorScreen
-        },
+      home: Stack(
+        children: [
+          Container(
+            color: config.theme == "dark" || config.theme == "textured-dark"
+                ? Colors.black
+                : Colors
+                    .white, // Set the background color based on dark or light mode
+            width: double.infinity,
+            height: double.infinity,
+          ),
+          if (config.theme == 'textured-dark' ||
+              config.theme == 'textured-light')
+            SvgPicture.asset(
+              'assets/background_texture.svg',
+              width: double.infinity,
+              height: double.infinity,
+              fit: BoxFit.contain,
+            ),
+          Consumer<ServiceStatusProvider>(
+            builder: (context, provider, child) {
+              return provider.isServiceOnline
+                  ? HomePage(config: config, wakeWord: provider.wakeWord)
+                  : ErrorScreen(
+                      onRetry: onRetry,
+                    );
+            },
+          ),
+        ],
       ),
     );
   }
diff --git a/lib/screens/error_screen.dart b/lib/screens/error_screen.dart
index 04a5d30..21d6fd2 100644
--- a/lib/screens/error_screen.dart
+++ b/lib/screens/error_screen.dart
@@ -34,7 +34,7 @@ class ErrorScreen extends StatelessWidget {
                 textAlign: TextAlign.center,
                 style: TextStyle(
                   fontSize: 18,
-                  color: Colors.grey[700],
+                  color: Colors.grey[600],
                 ),
               ),
               SizedBox(height: 20),
diff --git a/lib/screens/home_screen.dart b/lib/screens/home_screen.dart
index bf1d020..a9d567b 100644
--- a/lib/screens/home_screen.dart
+++ b/lib/screens/home_screen.dart
@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_voiceassistant/widgets/try_commands.dart';
 import 'package:provider/provider.dart';
@@ -46,17 +48,29 @@ class HomePageState extends State<HomePage> {
     appState.isCommandProcessing = false;
 
     if (newMode == AssistantMode.wakeWord) {
-      appState.isWakeWordMode = true;
       addChatMessage(
           'Switched to Wake Word mode. I\'ll listen for the wake word "$_wakeWord" before responding.');
-      toggleWakeWordDetection(context, true);
+
+      // Close old ongoing wake word detection loop if any
+      if (appState.isWakeWordMode) {
+        appState.isWakeWordMode = false;
+        toggleWakeWordDetection(context, false);
+      }
+      // Start a new wake word detection loop
+      if (!appState.isWakeWordMode) {
+        appState.isWakeWordMode = true;
+        toggleWakeWordDetection(context, true);
+      }
     } else if (newMode == AssistantMode.manual) {
-      appState.isWakeWordMode = false;
       addChatMessage(
           'Switched to Manual mode. You can send commands directly by pressing record button.');
-      toggleWakeWordDetection(context, false);
+
+      // Close old ongoing wake word detection loop if any
+      if (appState.isWakeWordMode) {
+        appState.isWakeWordMode = false;
+        toggleWakeWordDetection(context, false);
+      }
     }
-    print(appState.isWakeWordMode);
     setState(() {}); // Trigger a rebuild
   }
 
@@ -334,6 +348,7 @@ class HomePageState extends State<HomePage> {
     final appState = context.watch<AppState>();
 
     return Scaffold(
+      backgroundColor: Colors.transparent,
       body: SingleChildScrollView(
         child: Center(
           child: SizedBox(
@@ -342,13 +357,21 @@ class HomePageState extends State<HomePage> {
             child: Column(
               mainAxisAlignment: MainAxisAlignment.start,
               children: [
-                Image.asset(
-                  'assets/agl_logo.png', // Replace with your logo image path
-                  width: 120, // Adjust the width as needed
-                  height: 120, // Adjust the height as needed
+                Container(
+                  margin: EdgeInsets.only(
+                      top: 25,
+                      bottom: 25), // Adjust the top and bottom margin as needed
+                  child: Image.asset(
+                    _config.theme == "dark" || _config.theme == "textured-dark"
+                        ? 'assets/agl_logo_darkmode.png'
+                        : 'assets/agl_logo_lightmode.png',
+                    width: 300,
+                    fit: BoxFit
+                        .contain, // Ensure the image fits within the specified dimensions
+                  ),
                 ),
                 Text(
-                  "AGL Voice Assistant",
+                  "Voice Assistant",
                   style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
                 ),
                 SizedBox(height: 15),
@@ -357,37 +380,52 @@ class HomePageState extends State<HomePage> {
                   children: [
                     Flexible(
                       flex: 1,
-                      child: Card(
-                        elevation: 4, // Add elevation for shadow
-                        shape: RoundedRectangleBorder(
-                          borderRadius: BorderRadius.circular(12),
-                        ),
-                        child: Padding(
-                          padding: EdgeInsets.all(16),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                'Assistant Mode',
-                                style: TextStyle(
-                                  fontSize: 18,
-                                  fontWeight: FontWeight.bold,
-                                ),
-                              ),
-                              SizedBox(height: 16), // Add spacing if needed
-                              Center(
-                                child: Consumer<AppState>(
-                                  builder: (context, appState, _) {
-                                    return AssistantModeChoice(
-                                      onModeChanged: (newMode) {
-                                        changeAssistantMode(context, newMode);
-                                        print(newMode);
+                      child: ClipRect(
+                        child: BackdropFilter(
+                          filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
+                          child: Card(
+                            color: _config.theme == "textured-dark" ||
+                                    _config.theme == "textured-light"
+                                ? Colors.transparent
+                                : null,
+                            elevation: 4, // Add elevation for shadow
+                            shadowColor: _config.theme == "textured-dark" ||
+                                    _config.theme == "textured-light"
+                                ? Colors.transparent
+                                : null,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(12),
+                            ),
+                            child: Padding(
+                              padding: EdgeInsets.all(16),
+                              child: Column(
+                                crossAxisAlignment: CrossAxisAlignment.start,
+                                children: [
+                                  Text(
+                                    'Assistant Mode',
+                                    style: TextStyle(
+                                      fontSize: 18,
+                                      fontWeight: FontWeight.bold,
+                                    ),
+                                  ),
+                                  SizedBox(height: 16), // Add spacing if needed
+                                  Center(
+                                    child: Consumer<AppState>(
+                                      builder: (context, appState, _) {
+                                        return AssistantModeChoice(
+                                          onModeChanged: (newMode) {
+                                            changeAssistantMode(
+                                                context, newMode);
+                                            print(newMode);
+                                          },
+                                          theme: _config.theme,
+                                        );
                                       },
-                                    );
-                                  },
-                                ),
+                                    ),
+                                  ),
+                                ],
                               ),
-                            ],
+                            ),
                           ),
                         ),
                       ),
@@ -397,37 +435,52 @@ class HomePageState extends State<HomePage> {
 
                     Flexible(
                       flex: 1,
-                      child: Card(
-                        elevation: 4, // Add elevation for shadow
-                        shape: RoundedRectangleBorder(
-                          borderRadius: BorderRadius.circular(12),
-                        ),
-                        child: Padding(
-                          padding: EdgeInsets.all(16),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                'Intent Engine',
-                                style: TextStyle(
-                                  fontSize: 18,
-                                  fontWeight: FontWeight.bold,
-                                ),
-                              ),
-                              SizedBox(height: 16), // Add spacing if needed
-                              Center(
-                                child: Consumer<AppState>(
-                                  builder: (context, appState, _) {
-                                    return NLUEngineChoice(
-                                      onEngineChanged: (newEngine) {
-                                        changeIntentEngine(context, newEngine);
-                                        print(newEngine);
+                      child: ClipRect(
+                        child: BackdropFilter(
+                          filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
+                          child: Card(
+                            color: _config.theme == "textured-dark" ||
+                                    _config.theme == "textured-light"
+                                ? Colors.transparent
+                                : null,
+                            elevation: 4, // Add elevation for shadow
+                            shadowColor: _config.theme == "textured-dark" ||
+                                    _config.theme == "textured-light"
+                                ? Colors.transparent
+                                : null,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(12),
+                            ),
+                            child: Padding(
+                              padding: EdgeInsets.all(16),
+                              child: Column(
+                                crossAxisAlignment: CrossAxisAlignment.start,
+                                children: [
+                                  Text(
+                                    'Intent Engine',
+                                    style: TextStyle(
+                                      fontSize: 18,
+                                      fontWeight: FontWeight.bold,
+                                    ),
+                                  ),
+                                  SizedBox(height: 16), // Add spacing if needed
+                                  Center(
+                                    child: Consumer<AppState>(
+                                      builder: (context, appState, _) {
+                                        return NLUEngineChoice(
+                                          onEngineChanged: (newEngine) {
+                                            changeIntentEngine(
+                                                context, newEngine);
+                                            print(newEngine);
+                                          },
+                                          theme: _config.theme,
+                                        );
                                       },
-                                    );
-                                  },
-                                ),
+                                    ),
+                                  ),
+                                ],
                               ),
-                            ],
+                            ),
                           ),
                         ),
                       ),
@@ -439,10 +492,12 @@ class HomePageState extends State<HomePage> {
                   scrollController: _scrollController,
                   chatMessages: chatMessages,
                   addChatMessage: addChatMessage,
+                  theme: _config.theme,
                 ),
                 SizedBox(height: 10),
                 if (!appState.isWakeWordMode || appState.isWakeWordDetected)
-                  TryCommandsSection(onCommandTap: handleCommandTap),
+                  TryCommandsSection(
+                      onCommandTap: handleCommandTap, theme: _config.theme),
                 SizedBox(height: 30),
                 if (!appState.isWakeWordMode || appState.isWakeWordDetected)
                   if (!appState.isCommandProcessing)
diff --git a/lib/utils/app_config.dart b/lib/utils/app_config.dart
index 8f5c566..eacb10f 100644
--- a/lib/utils/app_config.dart
+++ b/lib/utils/app_config.dart
@@ -5,8 +5,10 @@ import 'package:flutter/services.dart';
 class AppConfig {
   late String grpcHost;
   late int grpcPort;
+  late String theme;
 
-  AppConfig({required this.grpcHost, required this.grpcPort});
+  AppConfig(
+      {required this.grpcHost, required this.grpcPort, required this.theme});
 
   factory AppConfig.fromAsset() {
     return AppConfig._();
@@ -21,6 +23,7 @@ class AppConfig {
     return AppConfig(
       grpcHost: jsonMap['grpc_host'],
       grpcPort: jsonMap['grpc_port'],
+      theme: jsonMap['theme'],
     );
   }
 }
diff --git a/lib/widgets/assistant_mode_choice.dart b/lib/widgets/assistant_mode_choice.dart
index d0c1953..c2afe5b 100644
--- a/lib/widgets/assistant_mode_choice.dart
+++ b/lib/widgets/assistant_mode_choice.dart
@@ -75,8 +75,10 @@ enum AssistantMode { wakeWord, manual }
 
 class AssistantModeChoice extends StatefulWidget {
   final Function(AssistantMode) onModeChanged;
+  final String theme;
 
-  const AssistantModeChoice({Key? key, required this.onModeChanged})
+  const AssistantModeChoice(
+      {Key? key, required this.onModeChanged, required this.theme})
       : super(key: key);
 
   @override
@@ -85,11 +87,14 @@ class AssistantModeChoice extends StatefulWidget {
 
 class AssistantModeChoiceState extends State<AssistantModeChoice> {
   late AssistantMode _selectedMode;
+  late String _theme;
 
   @override
   void initState() {
     super.initState();
     _selectedMode = AssistantMode.manual; // Initialize the selection
+    _theme = widget.theme;
+    print(widget.theme);
   }
 
   @override
@@ -112,7 +117,9 @@ class AssistantModeChoiceState extends State<AssistantModeChoice> {
               ),
               color: _selectedMode == AssistantMode.wakeWord
                   ? Colors.green
-                  : Colors.white,
+                  : _theme == "dark" || _theme == "textured-dark"
+                      ? Colors.black
+                      : Colors.white,
               border: Border.all(
                 color: Colors.transparent,
               ),
@@ -157,7 +164,9 @@ class AssistantModeChoiceState extends State<AssistantModeChoice> {
               ),
               color: _selectedMode == AssistantMode.manual
                   ? Colors.green
-                  : Colors.white,
+                  : _theme == "dark" || _theme == "textured-dark"
+                      ? Colors.black
+                      : Colors.white,
               border: Border.all(
                 color: Colors.transparent,
               ),
diff --git a/lib/widgets/chat_section.dart b/lib/widgets/chat_section.dart
index ca48cab..0a6a053 100644
--- a/lib/widgets/chat_section.dart
+++ b/lib/widgets/chat_section.dart
@@ -1,56 +1,71 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 
 class ChatSection extends StatelessWidget {
   final ScrollController scrollController;
   final List<ChatMessage> chatMessages;
   final Function(String text, {bool isUserMessage}) addChatMessage;
+  final String theme;
 
   ChatSection({
     required this.scrollController,
     required this.chatMessages,
     required this.addChatMessage,
+    required this.theme,
   });
 
   @override
   @override
   Widget build(BuildContext context) {
-    return Card(
-      elevation: 4, // Add a subtle shadow
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(12),
-      ),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          // Chat heading
-          Container(
-            padding: EdgeInsets.fromLTRB(12, 12, 0, 0),
-            // alignment: Alignment.l,
-            child: Text(
-              'Conversation Logs',
-              style: TextStyle(
-                fontWeight: FontWeight.bold,
-                fontSize: 18,
-              ),
-              textAlign: TextAlign.left,
-            ),
+    return ClipRect(
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
+        child: Card(
+          color: theme == "textured-dark" || theme == "textured-light"
+              ? Colors.transparent
+              : null,
+          elevation: 4, // Add a subtle shadow
+          shadowColor: theme == "textured-dark" || theme == "textured-light"
+              ? Colors.transparent
+              : null,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
           ),
-          // Chat messages with fixed height
-          Container(
-            padding: EdgeInsets.all(10),
-            height: 180, // Adjust the height as needed
-            child: ListView.builder(
-              controller: scrollController,
-              itemCount: chatMessages.length,
-              itemBuilder: (context, index) {
-                final message = chatMessages[index];
-                return ChatMessageTile(message: message);
-              },
-            ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // Chat heading
+              Container(
+                padding: EdgeInsets.fromLTRB(12, 12, 0, 0),
+                // alignment: Alignment.l,
+                child: Text(
+                  'Conversation Logs',
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 18,
+                  ),
+                  textAlign: TextAlign.left,
+                ),
+              ),
+              // Chat messages with fixed height
+              Container(
+                padding: EdgeInsets.all(10),
+                height: 180, // Adjust the height as needed
+                child: ListView.builder(
+                  controller: scrollController,
+                  itemCount: chatMessages.length,
+                  itemBuilder: (context, index) {
+                    final message = chatMessages[index];
+                    return ChatMessageTile(message: message);
+                  },
+                ),
+              ),
+              // User input field (if needed)
+              // ...
+            ],
           ),
-          // User input field (if needed)
-          // ...
-        ],
+        ),
       ),
     );
   }
@@ -82,7 +97,7 @@ class ChatMessageTile extends StatelessWidget {
           children: [
             if (!message.isUserMessage)
               CircleAvatar(
-                backgroundColor: Colors.green[400],
+                backgroundColor: Colors.green,
                 child: Icon(
                   Icons.smart_toy_outlined,
                   color: Colors.white,
@@ -103,8 +118,7 @@ class ChatMessageTile extends StatelessWidget {
                         ? Radius.circular(0)
                         : Radius.circular(16),
                   ),
-                  color:
-                      message.isUserMessage ? Colors.blue : Colors.green[400],
+                  color: message.isUserMessage ? Colors.blue : Colors.green,
                 ),
                 child: Text(
                   message.text,
diff --git a/lib/widgets/nlu_engine_choice.dart b/lib/widgets/nlu_engine_choice.dart
index 22b7074..32db7dd 100644
--- a/lib/widgets/nlu_engine_choice.dart
+++ b/lib/widgets/nlu_engine_choice.dart
@@ -73,8 +73,10 @@ enum NLUEngine { snips, rasa }
 
 class NLUEngineChoice extends StatefulWidget {
   final Function(NLUEngine) onEngineChanged;
+  final String theme;
 
-  const NLUEngineChoice({Key? key, required this.onEngineChanged})
+  const NLUEngineChoice(
+      {Key? key, required this.onEngineChanged, required this.theme})
       : super(key: key);
 
   @override
@@ -83,11 +85,13 @@ class NLUEngineChoice extends StatefulWidget {
 
 class _NLUEngineChoiceState extends State<NLUEngineChoice> {
   late NLUEngine _selectedEngine;
+  late String _theme;
 
   @override
   void initState() {
     super.initState();
     _selectedEngine = NLUEngine.snips; // Initialize the selection
+    _theme = widget.theme;
   }
 
   @override
@@ -110,7 +114,9 @@ class _NLUEngineChoiceState extends State<NLUEngineChoice> {
               ),
               color: _selectedEngine == NLUEngine.snips
                   ? Colors.green
-                  : Colors.white,
+                  : _theme == "dark" || _theme == "textured-dark"
+                      ? Colors.black
+                      : Colors.white,
               border: Border.all(
                 color: Colors.transparent,
               ),
@@ -155,7 +161,9 @@ class _NLUEngineChoiceState extends State<NLUEngineChoice> {
               ),
               color: _selectedEngine == NLUEngine.rasa
                   ? Colors.green
-                  : Colors.white,
+                  : _theme == "dark" || _theme == "textured-dark"
+                      ? Colors.black
+                      : Colors.white,
               border: Border.all(
                 color: Colors.transparent,
               ),
diff --git a/lib/widgets/try_commands.dart b/lib/widgets/try_commands.dart
index 0670bd2..3e47e9c 100644
--- a/lib/widgets/try_commands.dart
+++ b/lib/widgets/try_commands.dart
@@ -1,64 +1,75 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 
 class TryCommandsSection extends StatelessWidget {
   final Future<void> Function(String) onCommandTap; // Define a callback
+  final String theme;
 
-  TryCommandsSection({required this.onCommandTap});
+  TryCommandsSection({required this.onCommandTap, required this.theme});
 
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-        width: double.infinity,
-        child: Card(
-          // padding: EdgeInsets.all(16),
-          // decoration: BoxDecoration(
-          //   borderRadius: BorderRadius.circular(12),
-          // ),
-          elevation: 4, // Add a subtle shadow
-          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(12),
-          ),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Container(
-                padding: EdgeInsets.fromLTRB(12, 12, 0, 0),
-                child: Text(
-                  "Try Commands",
-                  style: TextStyle(
-                    fontSize: 18,
-                    fontWeight: FontWeight.bold,
+      width: double.infinity,
+      child: ClipRect(
+        child: BackdropFilter(
+          filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
+          child: Card(
+            color: theme == "textured-dark" || theme == "textured-light"
+                ? Colors.transparent
+                : null,
+            elevation: 4, // Add a subtle shadow
+            shadowColor: theme == "textured-dark" || theme == "textured-light"
+                ? Colors.transparent
+                : null,
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Container(
+                  padding: EdgeInsets.fromLTRB(12, 12, 0, 0),
+                  child: Text(
+                    "Try Commands",
+                    style: TextStyle(
+                      fontSize: 18,
+                      fontWeight: FontWeight.bold,
+                    ),
+                    textAlign: TextAlign.left,
                   ),
-                  textAlign: TextAlign.left,
                 ),
-              ),
-              Container(
-                padding: EdgeInsets.fromLTRB(12, 0, 12, 0),
-                child: Text(
-                  "(Tap on any of the following commands to try them out)",
-                  style: TextStyle(fontSize: 14, fontStyle: FontStyle.italic),
-                  textAlign: TextAlign.left,
+                Container(
+                  padding: EdgeInsets.fromLTRB(12, 0, 12, 0),
+                  child: Text(
+                    "(Tap on any of the following commands to try them out)",
+                    style: TextStyle(fontSize: 14, fontStyle: FontStyle.italic),
+                    textAlign: TextAlign.left,
+                  ),
                 ),
-              ),
-              SizedBox(height: 6),
-              Container(
-                padding: EdgeInsets.fromLTRB(12, 0, 12, 12),
-                child: Wrap(
-                  spacing: 10,
-                  children: [
-                    buildCommandButton("Set the volume to fifty percent"),
-                    buildCommandButton("Set the fan speed to max"),
-                    buildCommandButton(
-                        "Increase the temperature by three degrees"),
-                    buildCommandButton(
-                        "Decrease the fan speed by five percent"),
-                    buildCommandButton("Can you reduce the volume"),
-                  ],
+                SizedBox(height: 6),
+                Container(
+                  padding: EdgeInsets.fromLTRB(12, 0, 12, 12),
+                  child: Wrap(
+                    spacing: 10,
+                    children: [
+                      buildCommandButton("Set the volume to fifty percent"),
+                      buildCommandButton("Set the fan speed to max"),
+                      buildCommandButton(
+                          "Increase the temperature by three degrees"),
+                      buildCommandButton(
+                          "Decrease the fan speed by five percent"),
+                      buildCommandButton("Can you reduce the volume"),
+                    ],
+                  ),
                 ),
-              ),
-            ],
+              ],
+            ),
           ),
-        ));
+        ),
+      ),
+    );
   }
 
   Widget buildCommandButton(String commandText) {
diff --git a/pubspec.lock b/pubspec.lock
index d6aeae5..76b76e9 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -102,6 +102,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
+  flutter_svg:
+    dependency: "direct main"
+    description:
+      name: flutter_svg
+      sha256: "6ff9fa12892ae074092de2fa6a9938fb21dbabfdaa2ff57dc697ff912fc8d4b2"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.6"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -203,6 +211,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.8.3"
+  path_drawing:
+    dependency: transitive
+    description:
+      name: path_drawing
+      sha256: bbb1934c0cbb03091af082a6389ca2080345291ef07a5fa6d6e078ba8682f977
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.1"
+  path_parsing:
+    dependency: transitive
+    description:
+      name: path_parsing
+      sha256: e3e67b1629e6f7e8100b367d3db6ba6af4b1f0bb80f64db18ef1fbabd2fa9ccf
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.1"
+  petitparser:
+    dependency: transitive
+    description:
+      name: petitparser
+      sha256: cb3798bef7fc021ac45b308f4b51208a152792445cce0448c9a4ba5879dd8750
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.4.0"
   pointycastle:
     dependency: transitive
     description:
@@ -296,6 +328,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.4"
+  xml:
+    dependency: transitive
+    description:
+      name: xml
+      sha256: "5bc72e1e45e941d825fd7468b9b4cc3b9327942649aeb6fc5cdbf135f0a86e84"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.3.0"
 sdks:
   dart: ">=3.0.0 <4.0.0"
-  flutter: ">=1.16.0"
+  flutter: ">=2.11.0-0.1.pre"
diff --git a/pubspec.yaml b/pubspec.yaml
index 2dfd425..58186da 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -13,6 +13,7 @@ dependencies:
   provider: ^6.0.0
   grpc: ^3.1.0
   protobuf: ^2.1.0
+  flutter_svg: ^1.1.6
 
 dev_dependencies:
   flutter_test:
@@ -23,5 +24,7 @@ dev_dependencies:
 flutter:
   uses-material-design: true
   assets:
-    - assets/agl_logo.png
-    - assets/config.json
-\ No newline at end of file
+    - assets/config.json
+    - assets/agl_logo_lightmode.png
+    - assets/agl_logo_darkmode.png
+    - assets/background_texture.svg
+\ No newline at end of file
author	Malik Talha <talhamalik727x@gmail.com>	2023-11-16 22:04:56 +0500
committer	Malik Talha <talhamalik727x@gmail.com>	2023-11-16 22:04:56 +0500
commit	ecd34435c1a74b39bf41d59ad479fdc85d0afb7b (patch)
tree	1ed954b6c53321f854355bf82d13b736364e595b
parent	d433980265de4eccd343dcbfc92c3e7416057842 (diff)