\chapter{UI design}
'UI' means 'User Interface'.

Our user can't use our application without UI. 

It is very important for normal people.

\section{Choose a framework}
There's has a lot of UI framework available for us to use. Especially when it comes to websites.

We could do this design for Windows, using WPF, or we could do this design for Android, using Flutter.

But it's too much for me to do that. I just want to have a simple UI that makes my thesis more trustable.

So I'll simply use vue.js\cite{vue} to do this job.

In addition, because the UI is not the focus of this thesis, Python is, so I will not put the UI code on this thesis.


\section{Main pages}
\begin{itemize}
    \item home page: in this page, we can sign up or log in
    \item contact list page: from this page, we can see those people that we can contact
    \item chat page: in this page, we can send message to people, and also see messages that others sent to us
\end{itemize}

\subsection{Home page}
\includegraphics[scale=0.2]{figures/the_home_page.png}

\subsection{Contacts page}
\includegraphics[scale=0.2]{figures/the_contacts_page.png}

\subsection{Chat page}
\subsubsection{User 1}
\includegraphics[scale=0.2]{figures/the_chat_page1.png}%
\subsubsection{User 2}
\includegraphics[scale=0.2]{figures/the_chat_page2.png}%