66 |
74 | );
75 | }
76 |
77 | render() {
78 | return (
79 |
67 | 
68 |
69 |
68 |
70 | 
71 |
72 |
73 |
71 |
80 | {this.displayUrlBar()}
81 |
82 |
83 | )
84 | }
85 | }
86 |
87 | export default Chrome
88 |
89 | export const displayChrome = () => {
90 | return
71 |
102 | )
103 | }
104 | }
105 |
106 | export default Gedit;
107 |
108 | export const displayGedit = () => {
109 | return
72 | Send a Message to Me
73 |
77 |
74 |
76 | Send
75 |
78 |
79 |
92 | {
93 | (this.state.sending
94 | ?
95 |
80 |
81 | 1
82 |
83 |
84 |
85 | 2
86 |
87 |
88 |
89 | 3
90 |
91 |
96 | 
97 |
98 | : null
99 | )
100 | }
101 |
97 |
22 |
34 | )
35 | }
36 |
37 | export default Settings
38 |
39 |
40 | export const displaySettings = () => {
41 | return
23 |
24 |
25 | {
26 | Object.keys(wallpapers).map((name, index) => {
27 | return (
28 |
29 | );
30 | })
31 | }
32 |
33 |
66 | 
71 |
72 | Trash is Empty
73 |
74 |
75 | );
76 | };
77 |
78 | showTrashItems = () => {
79 | return (
80 |
71 |
72 | Trash is Empty
73 |
74 |
81 | {this.trashItems.map((item, index) => {
82 | return (
83 |
97 | );
98 | };
99 |
100 | render() {
101 | return (
102 |
89 |
94 | );
95 | })}
96 |
90 | 
91 |
92 | {item.name}
93 |
103 |
118 | );
119 | }
120 | }
121 |
122 | export default Trash;
123 |
124 | export const displayTrash = () => {
125 | return
104 | Trash
105 |
116 | {this.state.empty ? this.emptyScreen() : this.showTrashItems()}
117 |
106 |
115 |
107 | Restore
108 |
109 |
112 | Empty
113 |
114 | {
38 | this.setState({ showTitle: true });
39 | }}
40 | onMouseLeave={() => {
41 | this.setState({ showTitle: false });
42 | }}
43 | className={(this.props.isClose[this.id] === false && this.props.isFocus[this.id] ? "bg-white bg-opacity-10 " : "") + " w-auto p-2 outline-none relative transition hover:bg-white hover:bg-opacity-10 rounded m-1"}
44 | id={"sidebar-" + this.props.id}
45 | >
46 | 
47 |
48 | {
49 | (
50 | this.props.isClose[this.id] === false
51 | ?
52 | : null
53 | )
54 | }
55 |
64 | );
65 | }
66 | }
67 |
68 | export default SideBarApp;
69 |
--------------------------------------------------------------------------------
/components/base/ubuntu_app.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export class UbuntuApp extends Component {
4 |
5 | openApp = () => {
6 | this.props.openApp(this.props.id);
7 | }
8 |
9 | render() {
10 | return (
11 |
61 | {this.props.title}
62 |
63 |
17 |
18 | {this.props.name}
19 |
20 |
21 | )
22 | }
23 | }
24 |
25 | export default UbuntuApp
26 |
--------------------------------------------------------------------------------
/components/context menus/default.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | function DefaultMenu(props) {
4 | return (
5 |
67 | );
68 | }
69 |
70 | function Devider() {
71 | return (
72 |
73 |
74 |
75 | );
76 | }
77 |
78 | export default DefaultMenu;
79 |
--------------------------------------------------------------------------------
/components/context menus/desktop-menu.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 |
3 | function DesktopMenu(props) {
4 |
5 | const [isFullScreen, setIsFullScreen] = useState(false)
6 |
7 | useEffect(() => {
8 | document.addEventListener('fullscreenchange', checkFullScreen);
9 | return () => {
10 | document.removeEventListener('fullscreenchange', checkFullScreen);
11 | };
12 | }, [])
13 |
14 |
15 | const openTerminal = () => {
16 | props.openApp("terminal");
17 | }
18 |
19 | const openSettings = () => {
20 | props.openApp("settings");
21 | }
22 |
23 | const checkFullScreen = () => {
24 | if (document.fullscreenElement) {
25 | setIsFullScreen(true)
26 | } else {
27 | setIsFullScreen(false)
28 | }
29 | }
30 |
31 | const goFullScreen = () => {
32 | // make website full screen
33 | try {
34 | if (document.fullscreenElement) {
35 | document.exitFullscreen()
36 | } else {
37 | document.documentElement.requestFullscreen()
38 | }
39 | }
40 | catch (e) {
41 | console.log(e)
42 | }
43 | }
44 |
45 | return (
46 |
77 | )
78 | }
79 |
80 | function Devider() {
81 | return (
82 |
83 |
84 |
85 | );
86 | }
87 |
88 |
89 | export default DesktopMenu
90 |
--------------------------------------------------------------------------------
/components/screen/all-applications.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import UbuntuApp from '../base/ubuntu_app';
3 |
4 | export class AllApplications extends React.Component {
5 | constructor() {
6 | super();
7 | this.state = {
8 | query: "",
9 | apps: [],
10 | category: 0 // 0 for all, 1 for frequent
11 | }
12 | }
13 |
14 | componentDidMount() {
15 | this.setState({
16 | apps: this.props.apps
17 | })
18 | }
19 |
20 | handleChange = (e) => {
21 | this.setState({
22 | query: e.target.value,
23 | apps: e.target.value === "" || e.target.value === null ?
24 | this.props.apps : this.state.apps.filter(
25 | (app) => app.title.toLowerCase().includes(e.target.value.toLowerCase())
26 | )
27 | })
28 | }
29 |
30 | renderApps = () => {
31 |
32 | let appsJsx = [];
33 | let frequentAppsInfo = JSON.parse(localStorage.getItem("frequentApps"));
34 | let getFrequentApps = () => {
35 | let frequentApps = [];
36 | if (frequentAppsInfo) {
37 | frequentAppsInfo.forEach((app_info) => {
38 | let app = this.props.apps.find(app => app.id === app_info.id);
39 | if (app) {
40 | frequentApps.push(app);
41 | }
42 | })
43 | }
44 | return frequentApps;
45 | }
46 |
47 | let apps = this.state.category === 0 ? [...this.state.apps] : getFrequentApps();
48 | apps.forEach((app, index) => {
49 | const props = {
50 | name: app.title,
51 | id: app.id,
52 | icon: app.icon,
53 | openApp: this.props.openApp
54 | }
55 |
56 | appsJsx.push(
57 |
74 |
99 | )
100 | }
101 | }
102 |
103 | export default AllApplications;
--------------------------------------------------------------------------------
/components/screen/booting_screen.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | function BootingScreen(props) {
4 | return (
5 |
75 |
83 |
76 | 
77 |
81 |
82 |
77 |
81 |
84 | {this.renderApps()}
85 |
86 |
87 |
98 |
88 |
92 | Frequent
89 | {this.state.category === 1 ? 90 | : } 91 |
93 |
97 | All
94 | {this.state.category === 0 ? 95 | : } 96 |
17 | 
24 | 
54 |
71 |
72 | );
73 | }
74 |
75 | export default BootingScreen;
76 |
--------------------------------------------------------------------------------
/components/screen/lock_screen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Clock from '../util components/clock';
3 |
4 | export default function LockScreen(props) {
5 |
6 | const wallpapers = {
7 | "wall-1": "./images/wallpapers/wall-1.webp",
8 | "wall-2": "./images/wallpapers/wall-2.webp",
9 | "wall-3": "./images/wallpapers/wall-3.webp",
10 | "wall-4": "./images/wallpapers/wall-4.webp",
11 | "wall-5": "./images/wallpapers/wall-5.webp",
12 | "wall-6": "./images/wallpapers/wall-6.webp",
13 | "wall-7": "./images/wallpapers/wall-7.webp",
14 | "wall-8": "./images/wallpapers/wall-8.webp",
15 | };
16 |
17 | if (props.isLocked) {
18 | window.addEventListener('click', props.unLockScreen);
19 | window.addEventListener('keypress', props.unLockScreen);
20 | };
21 |
22 | return (
23 |
24 |
27 | {props.isShutDown ? (
28 |
45 | )}
46 |
47 |
29 | 
36 |
37 | ) : (
38 |
36 |
45 | )}
46 |
54 |
71 |
24 |
25 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/components/screen/navbar.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Clock from '../util components/clock';
3 | import Status from '../util components/status';
4 | import StatusCard from '../util components/status_card';
5 |
6 | export default class Navbar extends Component {
7 | constructor() {
8 | super();
9 | this.state = {
10 | status_card: false
11 | };
12 | }
13 |
14 | render() {
15 | return (
16 |
26 |
36 |
27 |
29 |
30 |
32 |
33 | Click or Press a key to unlock
34 |
35 |
17 |
56 | );
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/components/screen/side_bar.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import SideBarApp from '../base/side_bar_app';
3 |
4 | let renderApps = (props) => {
5 | let sideBarAppsJsx = [];
6 | props.apps.forEach((app, index) => {
7 | if (props.favourite_apps[app.id] === false) return;
8 | sideBarAppsJsx.push(
9 |
23 | Activities
24 |
25 |
31 |
33 | {
37 | this.setState({ status_card: true });
38 | }}
39 | // removed onBlur from here
40 | className={
41 | 'relative pr-3 pl-3 outline-none transition duration-100 ease-in-out border-b-2 border-transparent focus:border-ubb-orange py-1 '
42 | }
43 | >
44 | {
50 | // this prop is used in statusCard component in handleClickOutside callback using react-onclickoutside
51 | this.setState({ status_card: false });
52 | }}
53 | />
54 |
55 |
30 | {
31 | (
32 | Object.keys(props.closed_windows).length !== 0
33 | ? renderApps(props)
34 | : null
35 | )
36 | }
37 |
39 |
40 |
41 | )
42 | }
43 |
44 | export function AllApps(props) {
45 |
46 | const [title, setTitle] = useState(false);
47 |
48 | return (
49 | {
53 | setTitle(true);
54 | }}
55 | onMouseLeave={() => {
56 | setTitle(false);
57 | }}
58 | onClick={props.showApps}
59 | >
60 |
72 | );
73 | }
--------------------------------------------------------------------------------
/components/ubuntu.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import BootingScreen from './screen/booting_screen';
3 | import Desktop from './screen/desktop';
4 | import LockScreen from './screen/lock_screen';
5 | import Navbar from './screen/navbar';
6 | import ReactGA from 'react-ga4';
7 |
8 | export default class Ubuntu extends Component {
9 | constructor() {
10 | super();
11 | this.state = {
12 | screen_locked: false,
13 | bg_image_name: 'wall-2',
14 | booting_screen: true,
15 | shutDownScreen: false
16 | };
17 | }
18 |
19 | componentDidMount() {
20 | this.getLocalData();
21 | }
22 |
23 | setTimeOutBootScreen = () => {
24 | setTimeout(() => {
25 | this.setState({ booting_screen: false });
26 | }, 2000);
27 | };
28 |
29 | getLocalData = () => {
30 | // Get Previously selected Background Image
31 | let bg_image_name = localStorage.getItem('bg-image');
32 | if (bg_image_name !== null && bg_image_name !== undefined) {
33 | this.setState({ bg_image_name });
34 | }
35 |
36 | let booting_screen = localStorage.getItem('booting_screen');
37 | if (booting_screen !== null && booting_screen !== undefined) {
38 | // user has visited site before
39 | this.setState({ booting_screen: false });
40 | } else {
41 | // user is visiting site for the first time
42 | localStorage.setItem('booting_screen', false);
43 | this.setTimeOutBootScreen();
44 | }
45 |
46 | // get shutdown state
47 | let shut_down = localStorage.getItem('shut-down');
48 | if (shut_down !== null && shut_down !== undefined && shut_down === 'true') this.shutDown();
49 | else {
50 | // Get previous lock screen state
51 | let screen_locked = localStorage.getItem('screen-locked');
52 | if (screen_locked !== null && screen_locked !== undefined) {
53 | this.setState({ screen_locked: screen_locked === 'true' ? true : false });
54 | }
55 | }
56 | };
57 |
58 | lockScreen = () => {
59 | // google analytics
60 | ReactGA.send({ hitType: "pageview", page: "/lock-screen", title: "Lock Screen" });
61 | ReactGA.event({
62 | category: `Screen Change`,
63 | action: `Set Screen to Locked`
64 | });
65 |
66 | document.getElementById('status-bar').blur();
67 | setTimeout(() => {
68 | this.setState({ screen_locked: true });
69 | }, 100); // waiting for all windows to close (transition-duration)
70 | localStorage.setItem('screen-locked', true);
71 | };
72 |
73 | unLockScreen = () => {
74 | ReactGA.send({ hitType: "pageview", page: "/desktop", title: "Custom Title" });
75 |
76 | window.removeEventListener('click', this.unLockScreen);
77 | window.removeEventListener('keypress', this.unLockScreen);
78 |
79 | this.setState({ screen_locked: false });
80 | localStorage.setItem('screen-locked', false);
81 | };
82 |
83 | changeBackgroundImage = (img_name) => {
84 | this.setState({ bg_image_name: img_name });
85 | localStorage.setItem('bg-image', img_name);
86 | };
87 |
88 | shutDown = () => {
89 | ReactGA.send({ hitType: "pageview", page: "/switch-off", title: "Custom Title" });
90 |
91 | ReactGA.event({
92 | category: `Screen Change`,
93 | action: `Switched off the Ubuntu`
94 | });
95 |
96 | document.getElementById('status-bar').blur();
97 | this.setState({ shutDownScreen: true });
98 | localStorage.setItem('shut-down', true);
99 | };
100 |
101 | turnOn = () => {
102 | ReactGA.send({ hitType: "pageview", page: "/desktop", title: "Custom Title" });
103 |
104 | this.setState({ shutDownScreen: false, booting_screen: true });
105 | this.setTimeOutBootScreen();
106 | localStorage.setItem('shut-down', false);
107 | };
108 |
109 | render() {
110 | return (
111 |
61 | 
62 |
71 |
62 |
68 | Show Applications
69 |
70 |
112 |
125 | );
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/components/util components/background-image.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function BackgroundImage(props) {
4 | const bg_images = {
5 | "wall-1": "./images/wallpapers/wall-1.webp",
6 | "wall-2": "./images/wallpapers/wall-2.webp",
7 | "wall-3": "./images/wallpapers/wall-3.webp",
8 | "wall-4": "./images/wallpapers/wall-4.webp",
9 | "wall-5": "./images/wallpapers/wall-5.webp",
10 | "wall-6": "./images/wallpapers/wall-6.webp",
11 | "wall-7": "./images/wallpapers/wall-7.webp",
12 | "wall-8": "./images/wallpapers/wall-8.webp",
13 | };
14 | return (
15 |
16 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/components/util components/clock.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react'
2 |
3 | export default class Clock extends Component {
4 | constructor() {
5 | super();
6 | this.month_list = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
7 | this.day_list = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
8 | this.state = {
9 | hour_12: true,
10 | current_time: new Date()
11 | };
12 | }
13 |
14 | componentDidMount() {
15 | this.update_time = setInterval(() => {
16 | this.setState({ current_time: new Date() });
17 | }, 10 * 1000);
18 | }
19 |
20 | componentWillUnmount() {
21 | clearInterval(this.update_time);
22 | }
23 |
24 | render() {
25 | const { current_time } = this.state;
26 |
27 | let day = this.day_list[current_time.getDay()];
28 | let hour = current_time.getHours();
29 | let minute = current_time.getMinutes();
30 | let month = this.month_list[current_time.getMonth()];
31 | let date = current_time.getDate().toLocaleString();
32 | let meridiem = (hour < 12 ? "AM" : "PM");
33 |
34 | if (minute.toLocaleString().length === 1) {
35 | minute = "0" + minute
36 | }
37 |
38 | if (this.state.hour_12 && hour > 12) hour -= 12;
39 |
40 | let display_time;
41 | if (this.props.onlyTime) {
42 | display_time = hour + ":" + minute + " " + meridiem;
43 | }
44 | else if (this.props.onlyDay) {
45 | display_time = day + " " + month + " " + date;
46 | }
47 | else display_time = day + " " + month + " " + date + " " + hour + ":" + minute + " " + meridiem;
48 | return {display_time};
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/components/util components/small_arrow.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function SmallArrow(props) {
4 | let angle = props.angle ? props.angle : "up"; // default value is up
5 | return (
6 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/components/util components/status.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import SmallArrow from "./small_arrow";
3 |
4 | export default function Status() {
5 | return (
6 |
7 |
8 | 
14 |
15 |
16 | 
22 |
23 |
24 | 
30 |
31 |
32 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/files/cv_ver1.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/files/cv_ver1.pdf
--------------------------------------------------------------------------------
/images/logos/bitmoji.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/logos/bitmoji.JPG
--------------------------------------------------------------------------------
/images/logos/bitmoji.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/logos/bitmoji.png
--------------------------------------------------------------------------------
/images/logos/fevicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/logos/fevicon.png
--------------------------------------------------------------------------------
/images/logos/fevicon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/logos/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/logos/logo.png
--------------------------------------------------------------------------------
/images/logos/logo_1024.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/logos/logo_1024.png
--------------------------------------------------------------------------------
/images/logos/logo_1200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/logos/logo_1200.png
--------------------------------------------------------------------------------
/images/logos/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/logos/search.png
--------------------------------------------------------------------------------
/images/memes/used-sudo-command.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/memes/used-sudo-command.webp
--------------------------------------------------------------------------------
/images/wallpapers/wall-1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/wallpapers/wall-1.webp
--------------------------------------------------------------------------------
/images/wallpapers/wall-2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/wallpapers/wall-2.webp
--------------------------------------------------------------------------------
/images/wallpapers/wall-3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/wallpapers/wall-3.webp
--------------------------------------------------------------------------------
/images/wallpapers/wall-4.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/wallpapers/wall-4.webp
--------------------------------------------------------------------------------
/images/wallpapers/wall-5.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/wallpapers/wall-5.webp
--------------------------------------------------------------------------------
/images/wallpapers/wall-6.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/wallpapers/wall-6.webp
--------------------------------------------------------------------------------
/images/wallpapers/wall-7.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/wallpapers/wall-7.webp
--------------------------------------------------------------------------------
/images/wallpapers/wall-8.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dawidolko/Ubuntu-Simulaing-System-GUI/cc3485044afead9916612072851390de2f81b401/images/wallpapers/wall-8.webp
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ubuntu.dawidolko.pl",
3 | "version": "2.0.0",
4 | "private": true,
5 | "homepage": "https://ubuntu.dawidolko.pl",
6 | "scripts": {
7 | "dev": "next dev",
8 | "build": "next build",
9 | "start": "next start",
10 | "export": "next export"
11 | },
12 | "engines": {
13 | "node": ">=16.x"
14 | },
15 | "dependencies": {
16 | "@emailjs/browser": "^3.10.0",
17 | "autoprefixer": "^10.4.13",
18 | "expr-eval": "^2.0.2",
19 | "jquery": "^3.6.3",
20 | "next": "^13.1.2",
21 | "postcss": "^8.4.21",
22 | "prop-types": "^15.8.1",
23 | "react": "^18.2.0",
24 | "react-dom": "^18.2.0",
25 | "react-draggable": "^4.4.5",
26 | "react-ga4": "^2.1.0",
27 | "react-onclickoutside": "^6.12.2",
28 | "tailwindcss": "^3.2.4"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import 'tailwindcss/tailwind.css'
2 | import '../styles/index.css'
3 |
4 | function MyApp({ Component, pageProps }) {
5 | return
14 |
15 |
16 |
22 |
23 |
24 |
30 |
31 |
32 |