diff --git a/frontend/allsafe/public/Evening Mood.ogg b/frontend/allsafe/public/Evening Mood.ogg
new file mode 100644
index 0000000..1940e5b
Binary files /dev/null and b/frontend/allsafe/public/Evening Mood.ogg differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/License.txt b/frontend/allsafe/public/Modern City Backgrounds/License.txt
new file mode 100644
index 0000000..673e1aa
--- /dev/null
+++ b/frontend/allsafe/public/Modern City Backgrounds/License.txt
@@ -0,0 +1 @@
+https://craftpix.net/file-licenses/
\ No newline at end of file
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 1/1.png b/frontend/allsafe/public/Modern City Backgrounds/city 1/1.png
new file mode 100644
index 0000000..d00de55
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 1/1.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 1/10.png b/frontend/allsafe/public/Modern City Backgrounds/city 1/10.png
new file mode 100644
index 0000000..efa2a01
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 1/10.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 1/2.png b/frontend/allsafe/public/Modern City Backgrounds/city 1/2.png
new file mode 100644
index 0000000..8bbf680
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 1/2.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 1/3.png b/frontend/allsafe/public/Modern City Backgrounds/city 1/3.png
new file mode 100644
index 0000000..4f1c9ca
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 1/3.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 1/4.png b/frontend/allsafe/public/Modern City Backgrounds/city 1/4.png
new file mode 100644
index 0000000..8394f6e
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 1/4.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 1/5.png b/frontend/allsafe/public/Modern City Backgrounds/city 1/5.png
new file mode 100644
index 0000000..47e27c9
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 1/5.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 1/6.png b/frontend/allsafe/public/Modern City Backgrounds/city 1/6.png
new file mode 100644
index 0000000..99d841a
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 1/6.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 2/1.png b/frontend/allsafe/public/Modern City Backgrounds/city 2/1.png
new file mode 100644
index 0000000..97b6d39
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 2/1.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 2/10.png b/frontend/allsafe/public/Modern City Backgrounds/city 2/10.png
new file mode 100644
index 0000000..5fb29e2
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 2/10.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 2/2.png b/frontend/allsafe/public/Modern City Backgrounds/city 2/2.png
new file mode 100644
index 0000000..e4215cd
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 2/2.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 2/3.png b/frontend/allsafe/public/Modern City Backgrounds/city 2/3.png
new file mode 100644
index 0000000..21b8d50
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 2/3.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 2/4.png b/frontend/allsafe/public/Modern City Backgrounds/city 2/4.png
new file mode 100644
index 0000000..325375d
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 2/4.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 2/5.png b/frontend/allsafe/public/Modern City Backgrounds/city 2/5.png
new file mode 100644
index 0000000..5af7cca
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 2/5.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 2/6.png b/frontend/allsafe/public/Modern City Backgrounds/city 2/6.png
new file mode 100644
index 0000000..027a39f
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 2/6.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 2/7.png b/frontend/allsafe/public/Modern City Backgrounds/city 2/7.png
new file mode 100644
index 0000000..89d839d
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 2/7.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 3/1.png b/frontend/allsafe/public/Modern City Backgrounds/city 3/1.png
new file mode 100644
index 0000000..6039e11
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 3/1.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 3/2.png b/frontend/allsafe/public/Modern City Backgrounds/city 3/2.png
new file mode 100644
index 0000000..8dbc977
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 3/2.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 3/3.png b/frontend/allsafe/public/Modern City Backgrounds/city 3/3.png
new file mode 100644
index 0000000..2667016
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 3/3.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 3/4.png b/frontend/allsafe/public/Modern City Backgrounds/city 3/4.png
new file mode 100644
index 0000000..67fd20a
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 3/4.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 3/5.png b/frontend/allsafe/public/Modern City Backgrounds/city 3/5.png
new file mode 100644
index 0000000..34d8cc8
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 3/5.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 3/6.png b/frontend/allsafe/public/Modern City Backgrounds/city 3/6.png
new file mode 100644
index 0000000..310690c
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 3/6.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 3/7.png b/frontend/allsafe/public/Modern City Backgrounds/city 3/7.png
new file mode 100644
index 0000000..1485282
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 3/7.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 4/1.png b/frontend/allsafe/public/Modern City Backgrounds/city 4/1.png
new file mode 100644
index 0000000..39cc74d
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 4/1.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 4/2.png b/frontend/allsafe/public/Modern City Backgrounds/city 4/2.png
new file mode 100644
index 0000000..e546415
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 4/2.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 4/3.png b/frontend/allsafe/public/Modern City Backgrounds/city 4/3.png
new file mode 100644
index 0000000..67f8f53
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 4/3.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 4/4.png b/frontend/allsafe/public/Modern City Backgrounds/city 4/4.png
new file mode 100644
index 0000000..f09ece1
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 4/4.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 4/5.png b/frontend/allsafe/public/Modern City Backgrounds/city 4/5.png
new file mode 100644
index 0000000..1d3ae57
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 4/5.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 4/7.png b/frontend/allsafe/public/Modern City Backgrounds/city 4/7.png
new file mode 100644
index 0000000..fdcf753
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 4/7.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 4/8.png b/frontend/allsafe/public/Modern City Backgrounds/city 4/8.png
new file mode 100644
index 0000000..57f813e
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 4/8.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 4/9.png b/frontend/allsafe/public/Modern City Backgrounds/city 4/9.png
new file mode 100644
index 0000000..3d559d5
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 4/9.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 5/1.png b/frontend/allsafe/public/Modern City Backgrounds/city 5/1.png
new file mode 100644
index 0000000..bdc147b
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 5/1.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 5/2.png b/frontend/allsafe/public/Modern City Backgrounds/city 5/2.png
new file mode 100644
index 0000000..679a524
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 5/2.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 5/3.png b/frontend/allsafe/public/Modern City Backgrounds/city 5/3.png
new file mode 100644
index 0000000..f9a1987
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 5/3.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 5/4.png b/frontend/allsafe/public/Modern City Backgrounds/city 5/4.png
new file mode 100644
index 0000000..21d7ec0
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 5/4.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 5/5.png b/frontend/allsafe/public/Modern City Backgrounds/city 5/5.png
new file mode 100644
index 0000000..0eceb3a
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 5/5.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 5/6.png b/frontend/allsafe/public/Modern City Backgrounds/city 5/6.png
new file mode 100644
index 0000000..28cc3d6
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 5/6.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 5/7.png b/frontend/allsafe/public/Modern City Backgrounds/city 5/7.png
new file mode 100644
index 0000000..415357b
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 5/7.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 6/1.png b/frontend/allsafe/public/Modern City Backgrounds/city 6/1.png
new file mode 100644
index 0000000..658f12b
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 6/1.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 6/2.png b/frontend/allsafe/public/Modern City Backgrounds/city 6/2.png
new file mode 100644
index 0000000..8c3a7c9
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 6/2.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 6/3.png b/frontend/allsafe/public/Modern City Backgrounds/city 6/3.png
new file mode 100644
index 0000000..7b1615d
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 6/3.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 6/4.png b/frontend/allsafe/public/Modern City Backgrounds/city 6/4.png
new file mode 100644
index 0000000..1738b39
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 6/4.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 6/5.png b/frontend/allsafe/public/Modern City Backgrounds/city 6/5.png
new file mode 100644
index 0000000..d92be90
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 6/5.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 6/6.png b/frontend/allsafe/public/Modern City Backgrounds/city 6/6.png
new file mode 100644
index 0000000..f6f1d05
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 6/6.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 6/7.png b/frontend/allsafe/public/Modern City Backgrounds/city 6/7.png
new file mode 100644
index 0000000..12ca319
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 6/7.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 6/8.png b/frontend/allsafe/public/Modern City Backgrounds/city 6/8.png
new file mode 100644
index 0000000..7524d1e
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 6/8.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 7/1.png b/frontend/allsafe/public/Modern City Backgrounds/city 7/1.png
new file mode 100644
index 0000000..dfaa558
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 7/1.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 7/2.png b/frontend/allsafe/public/Modern City Backgrounds/city 7/2.png
new file mode 100644
index 0000000..e4c9f8c
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 7/2.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 7/3.png b/frontend/allsafe/public/Modern City Backgrounds/city 7/3.png
new file mode 100644
index 0000000..9697005
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 7/3.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 7/4.png b/frontend/allsafe/public/Modern City Backgrounds/city 7/4.png
new file mode 100644
index 0000000..f70cd27
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 7/4.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 7/5.png b/frontend/allsafe/public/Modern City Backgrounds/city 7/5.png
new file mode 100644
index 0000000..ff6f3f9
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 7/5.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 7/6.png b/frontend/allsafe/public/Modern City Backgrounds/city 7/6.png
new file mode 100644
index 0000000..f224668
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 7/6.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 7/7.png b/frontend/allsafe/public/Modern City Backgrounds/city 7/7.png
new file mode 100644
index 0000000..4c59af3
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 7/7.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 8/1.png b/frontend/allsafe/public/Modern City Backgrounds/city 8/1.png
new file mode 100644
index 0000000..41740c7
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 8/1.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 8/2.png b/frontend/allsafe/public/Modern City Backgrounds/city 8/2.png
new file mode 100644
index 0000000..7b9e461
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 8/2.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 8/3.png b/frontend/allsafe/public/Modern City Backgrounds/city 8/3.png
new file mode 100644
index 0000000..3c2dd46
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 8/3.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 8/4.png b/frontend/allsafe/public/Modern City Backgrounds/city 8/4.png
new file mode 100644
index 0000000..975a541
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 8/4.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 8/5.png b/frontend/allsafe/public/Modern City Backgrounds/city 8/5.png
new file mode 100644
index 0000000..7587e96
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 8/5.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 8/6.png b/frontend/allsafe/public/Modern City Backgrounds/city 8/6.png
new file mode 100644
index 0000000..83e5fe8
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 8/6.png differ
diff --git a/frontend/allsafe/public/Modern City Backgrounds/city 8/7.png b/frontend/allsafe/public/Modern City Backgrounds/city 8/7.png
new file mode 100644
index 0000000..55efe96
Binary files /dev/null and b/frontend/allsafe/public/Modern City Backgrounds/city 8/7.png differ
diff --git a/frontend/allsafe/public/Retro Gaming Pixel 8.gif b/frontend/allsafe/public/Retro Gaming Pixel 8.gif
new file mode 100644
index 0000000..ea37400
Binary files /dev/null and b/frontend/allsafe/public/Retro Gaming Pixel 8.gif differ
diff --git a/frontend/allsafe/public/background/Anime Aesthetic.gif b/frontend/allsafe/public/background/Anime Aesthetic.gif
new file mode 100644
index 0000000..35c0349
Binary files /dev/null and b/frontend/allsafe/public/background/Anime Aesthetic.gif differ
diff --git a/frontend/allsafe/public/background/Lofi Art Aesthetic.gif b/frontend/allsafe/public/background/Lofi Art Aesthetic.gif
new file mode 100644
index 0000000..c07c27a
Binary files /dev/null and b/frontend/allsafe/public/background/Lofi Art Aesthetic.gif differ
diff --git a/frontend/allsafe/public/background/Pixel Art.gif b/frontend/allsafe/public/background/Pixel Art.gif
new file mode 100644
index 0000000..6311cde
Binary files /dev/null and b/frontend/allsafe/public/background/Pixel Art.gif differ
diff --git a/frontend/allsafe/public/background/Retro Gaming Pixel 8.gif b/frontend/allsafe/public/background/Retro Gaming Pixel 8.gif
new file mode 100644
index 0000000..ea37400
Binary files /dev/null and b/frontend/allsafe/public/background/Retro Gaming Pixel 8.gif differ
diff --git a/frontend/allsafe/public/background/city-aft.png b/frontend/allsafe/public/background/city-aft.png
new file mode 100644
index 0000000..5fb29e2
Binary files /dev/null and b/frontend/allsafe/public/background/city-aft.png differ
diff --git a/frontend/allsafe/public/background/city-night.png b/frontend/allsafe/public/background/city-night.png
new file mode 100644
index 0000000..efa2a01
Binary files /dev/null and b/frontend/allsafe/public/background/city-night.png differ
diff --git a/frontend/allsafe/public/background/city-pink.png b/frontend/allsafe/public/background/city-pink.png
new file mode 100644
index 0000000..7524d1e
Binary files /dev/null and b/frontend/allsafe/public/background/city-pink.png differ
diff --git a/frontend/allsafe/public/character/Bridget_cry.png b/frontend/allsafe/public/character/Bridget_cry.png
new file mode 100644
index 0000000..0c22f34
Binary files /dev/null and b/frontend/allsafe/public/character/Bridget_cry.png differ
diff --git a/frontend/allsafe/public/character/Bridget_happy.png b/frontend/allsafe/public/character/Bridget_happy.png
new file mode 100644
index 0000000..fab8796
Binary files /dev/null and b/frontend/allsafe/public/character/Bridget_happy.png differ
diff --git a/frontend/allsafe/public/character/Bridget_normal.png b/frontend/allsafe/public/character/Bridget_normal.png
new file mode 100644
index 0000000..6f9680e
Binary files /dev/null and b/frontend/allsafe/public/character/Bridget_normal.png differ
diff --git a/frontend/allsafe/public/character/Bridget_surprise.png b/frontend/allsafe/public/character/Bridget_surprise.png
new file mode 100644
index 0000000..9b7d453
Binary files /dev/null and b/frontend/allsafe/public/character/Bridget_surprise.png differ
diff --git a/frontend/allsafe/public/src/js/news/lineChart.js b/frontend/allsafe/public/src/js/news/lineChart.js
new file mode 100644
index 0000000..d2aed91
--- /dev/null
+++ b/frontend/allsafe/public/src/js/news/lineChart.js
@@ -0,0 +1,282 @@
+export function createLineChart(data, containerId) {
+ console.log('Creating line chart...')
+
+ // set up dimensions and margins of the graph
+ const container = document.getElementById(containerId)
+ const { width: containerWidth, height: containerHeight } =
+ container.getBoundingClientRect()
+
+ const lineMargin = { top: 50, right: 0, bottom: 100, left: 100 }
+ const width = containerWidth
+ const height = containerHeight
+ const totalWidth = width * 15
+
+ // aggregate data by month
+ function aggData(data) {
+ const grouped = d3.group(data, (d) => `${d.year}-${d.month}`)
+ return Array.from(grouped, ([key, value]) => {
+ const [year, month] = key.split('-').map(Number)
+ const no_of_reports = d3.sum(value, (d) => d.no_of_reports)
+ return {
+ year,
+ month,
+ date: new Date(year, month - 1),
+ no_of_reports,
+ }
+ })
+ }
+
+ // get data
+ const monthData = aggData(data)
+ const sortData = monthData.sort((a, b) => d3.ascending(a.date, b.date))
+
+ // set x scale
+ const x = d3
+ .scaleTime()
+ .domain(d3.extent(sortData, (d) => d.date))
+ .range([lineMargin.left, totalWidth - lineMargin.right])
+
+ // set y scale
+ const y = d3
+ .scaleLinear()
+ .domain([0, d3.max(sortData, (d) => d.no_of_reports)])
+ .nice()
+ .range([height - lineMargin.bottom, lineMargin.top])
+
+ // create line
+ const line = d3
+ .line()
+ .x((d) => x(d.date))
+ .y((d) => y(d.no_of_reports))
+ .curve(d3.curveCatmullRom.alpha(0.5))
+
+ // create y-axis svg
+ const yAxisSvg = d3
+ .create('svg')
+ .attr('class', 'y-axis-svg')
+ .attr('width', lineMargin.left)
+ .attr('height', height)
+ .style('position', 'absolute')
+ .style('left', '0px') // Adjust to ensure it's always visible
+ .style('top', '0px') // Adjust to ensure it's aligned properly
+
+ // create y-axis
+ const yAxis = d3.axisLeft(y).ticks(12)
+
+ yAxisSvg
+ .append('g')
+ .attr(
+ 'transform',
+ `translate(${lineMargin.left - 50}, ${lineMargin.bottom - 10})`
+ )
+ .call(yAxis)
+ .style('font-size', '16px')
+ .call((g) => g.select('.domain').remove())
+ .call((g) =>
+ g
+ .append('text')
+ .attr('x', -50)
+ //.attr('y', -20)
+ .style('font-size', '16px')
+ .attr('fill', 'currentColor')
+ .attr('text-anchor', 'start')
+ .text('No of Reports')
+ )
+
+ // create main svg
+ const mainSvg = d3
+ .create('svg')
+ .attr('class', 'chart-svg')
+ .attr('width', totalWidth)
+ .attr('height', height)
+ .attr('viewBox', `0 0 ${totalWidth} ${height}`)
+
+ // create x-axis
+ const axis = fc
+ .axisOrdinalBottom(x)
+ .ticks(d3.timeMonth.every(1))
+ .tickFormat(d3.timeFormat('%b %Y'))
+
+ const xAxis = fc.axisLabelRotate(axis).labelRotate(30) // You can adjust this angle as needed
+
+ mainSvg
+ .append('g')
+ .attr('transform', `translate(0,${height - lineMargin.bottom})`)
+ .call(xAxis)
+ .style('font-size', '20px')
+
+ // define gradient
+ const defs = mainSvg.append('defs')
+ const gradientId = 'gradient-line-area'
+
+ const gradient = defs
+ .append('linearGradient')
+ .attr('id', gradientId)
+ .attr('x1', '0%')
+ .attr('x2', '100%')
+ .attr('y1', '50%')
+ .attr('y2', '50%')
+
+ // gradient start
+ gradient.append('stop').attr('offset', '0%').attr('stop-color', '#f57c00')
+
+ // gradient end
+ gradient.append('stop').attr('offset', '100%').attr('stop-color', '#d32f2f')
+
+ // draw the line
+ const linePath = mainSvg
+ .append('path')
+ .datum(sortData)
+ .attr('fill', 'none')
+ .attr('stroke', `url(#${gradientId})`)
+ .style('stroke-width', 5)
+ .style('opacity', 0.4)
+ .attr('d', line)
+
+ // create area
+ const area = d3
+ .area()
+ .x((d) => x(d.date))
+ .y0(y(0))
+ .y1((d) => y(d.no_of_reports))
+ .curve(d3.curveCatmullRom.alpha(0.5))
+
+ const areaPath = mainSvg
+ .append('path')
+ .datum(sortData)
+ .attr('fill', `url(#${gradientId})`)
+ .attr('stroke', 'none')
+ .attr('d', area)
+ .style('opacity', 0.2)
+
+ // create dots
+ const dots = mainSvg
+ .append('g')
+ .selectAll('circle')
+ .data(sortData)
+ .enter()
+ .append('circle')
+ .attr('class', 'line-chart-dot')
+ .attr('r', 8)
+ .attr('fill', '#d32f2f')
+ .style('opacity', 0.8)
+ .attr('cx', (d) => x(d.date))
+ .attr('cy', (d) => y(d.no_of_reports))
+
+ // set mouse event handler
+ function handleMouseOver() {
+ linePath.style('opacity', 0.8)
+ dots.style('opacity', 0.5)
+ }
+
+ function handleMouseOut() {
+ linePath.style('opacity', 0.4)
+ dots.style('opacity', 0.8)
+ }
+
+ // update tooltip position
+ function updateTooltipPosition(event) {
+ tooltip
+ .style('left', `${event.pageX + 5}px`)
+ .style('top', `${event.pageY - 28}px`)
+ }
+
+ // get the tooltip data for area (sum the report numbers)
+ function calculateTooltipData(data) {
+ const minDate = d3.min(data, (d) => d.date)
+ const maxDate = d3.max(data, (d) => d.date)
+ const totalReports = d3.sum(data, (d) => d.no_of_reports)
+
+ return {
+ duration: `Duration: ${d3.timeFormat('%Y/%m')(minDate)} - ${d3.timeFormat('%Y/%m')(maxDate)}`,
+ totalReports,
+ }
+ }
+
+ // get tooltip
+ const tooltip = d3
+ .select('body')
+ .append('div')
+ .attr('class', 'tooltip')
+ .style('opacity', 0)
+
+ // tooltip functions
+ function showTooltip(event) {
+ const data = sortData
+ const tooltipData = calculateTooltipData(data)
+
+ tooltip
+ .style('opacity', 1)
+ .html(
+ `
+ ${tooltipData.duration}
+ Total reports: ${formatNumber.format(tooltipData.totalReports)}
+ `
+ )
+ .style('left', `${event.pageX + 5}px`)
+ .style('top', `${event.pageY - 28}px`)
+ }
+
+ function hideTooltip() {
+ tooltip.style('opacity', 0)
+ }
+
+ // tooltip events
+ areaPath
+ .on('mouseover', (event) => {
+ showTooltip(event)
+ })
+ .on('mousemove', (event) => {
+ updateTooltipPosition(event)
+ })
+ .on('mouseout', hideTooltip)
+
+ dots.on('mouseover', (event, d) => {
+ handleMouseOver()
+ d3.select(event.currentTarget).style('opacity', 1)
+ tooltip
+ .style('opacity', 1)
+ .html(
+ `Date: ${d3.timeFormat('%b %Y')(d.date)}
Number of Reports: ${formatNumber.format(d.no_of_reports)}`
+ )
+ .style('left', `${event.pageX + 5}px`)
+ .style('top', `${event.pageY - 28}px`)
+ })
+ .on('mousemove', (event) => {
+ updateTooltipPosition(event)
+ })
+ .on('mouseout', () => {
+ handleMouseOut()
+ tooltip.style('opacity', 0)
+ })
+
+ // update report number format
+ const formatNumber = new Intl.NumberFormat()
+
+ // append the svg to the container
+ container.appendChild(mainSvg.node())
+ container.appendChild(yAxisSvg.node())
+
+ // set scrolling
+ container.style.overflowX = 'auto'
+ container.style.overflowY = 'hidden'
+ container.style.whiteSpace = 'nowrap'
+
+ // set main svg width
+ mainSvg.style('width', `${totalWidth}px`)
+
+ // get right most data
+ const rightmostDate = d3.max(sortData, (d) => d.date)
+
+ // get pixel position
+ const scrollToDate = x(rightmostDate)
+
+ // get container central position
+ const containerCenter = width / 2
+ container.scrollLeft = scrollToDate - containerCenter + lineMargin.left
+
+ // ensure scrolling correctly after a slight delay
+ setTimeout(() => {
+ container.scrollLeft = scrollToDate - containerCenter + lineMargin.left
+ }, 100)
+}
diff --git a/frontend/allsafe/src/app/insights/page.tsx b/frontend/allsafe/src/app/insights/page.tsx
new file mode 100644
index 0000000..dfce1a0
--- /dev/null
+++ b/frontend/allsafe/src/app/insights/page.tsx
@@ -0,0 +1,262 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import '../style.css' // Assuming your CSS is in the src/styles folder
+import { cn } from '@/lib/utils'
+import { TypographyH2 } from '@/typography/h2'
+import { TypographyLead } from '@/typography/lead'
+import { TypographyH1 } from '@/typography/h1'
+import Image from 'next/image'
+import Link from 'next/link'
+
+const Insights = () => {
+ useEffect(() => {
+ // This will run after the component mounts
+ const script = document.createElement('script')
+ script.src = '/src/script.js'
+ script.type = 'module'
+ document.body.appendChild(script)
+
+ return () => {
+ // Clean up the script when the component unmounts
+ document.body.removeChild(script)
+ }
+ }, [])
+
+ return (
+
+ From January 2020 to July 2024, there have been 18,714
+ reported social media scams affecting young adults in
+ Australia. Comparing the whole year of 2023 and 2022,
+ reported scams increased by about 21%. The scam reported
+ peak is in January 2023, with 621 scams reported in just
+ a month.
+
+
+ Although the number of scam reports gradually decreased
+ from then, the monthly reported scams in 2024 are still
+ around 300.
+
+
+ If the scam is an unexploded boom without a trend for us
+ to prevent, how will scams influence the digital era if
+ we don’t have related knowledge to take proper action?
+
+
+
+ User Guide:
+ {' '}
+ Scroll to the left to discover the trend of social media
+ scams that have occurred with young adults since 2020;
+ hover over the graph to find the number of scams in each
+ month and throughout the whole period.
+
+ This word cloud highlights the most common words
+ scammers use to make their messages sound personal,
+ urgent, or convincing. These words are designed to trick
+ you into responding or taking action based on false
+ promises.
+
+
+ Have you ever received a message that seemed too good to
+ be true? Did it make you pause and wonder if you might
+ get easy money, or did it leave you feeling unsure?
+ Scammers use these tricks to either get you to pay for
+ something or steal your personal information.
+
+
+ Take a look at the word cloud. Can you spot the types of
+ scams that appear most often?
+
Filter by year
+ +
+ The sunburst chart shows the top 5 scams by the
+ number of reports, with each section showing their
+ percentage and sub-types.
+
+
+ Buying or Selling scams are the
+ most common, making up over 44% of the total and
+ over 427 reports within 2024.
+ Online Shopping Scams being the
+ largest sub-type at around 41% and having 1369
+ reports over the years.
+
+
+ Meanwhile, The smallest section,{' '}
+ Mobile Premium Service Scams, only
+ contributes about 1% which also among the{' '}
+ Buying or Selling.{' '}
+ Personal Information scams are the
+ second-largest, with 1643 reports all over the year.{' '}
+ Investment Scams in the same time
+ treated as the main sub-type.
+
+
+ This highlights how common online shopping scams and
+ personal data fraud are becoming.
+
+ While the top 5 most frequent scams align with the top 5
+ scams causing the most financial loss, their patterns
+ have some differences.
+
+
+ In 2024, the top 5 scams alone accounted for
+ approximately AUD 3,003,916 in losses, representing
+ about 94.74% of the total amount lost on social media
+ scams with young adults. Among these years, investment
+ scams have the highest financial impact, making up 50.4%
+ of the total losses, followed by dating and romance
+ scams, which account for around 17.4%.
+
+
+ The different patterns from the number of reports and
+ money loss indicate that no matter which type of scam
+ you are facing, the potential loss can accumulate into a
+ vast amount and continuously influence our daily lives.
+
+
+
Game over
-Play again?
-