update readme

README.md

@@ -1,3 +1,77 @@
 # PHP Profiler
 
 [![Code Checking](https://github.com/ArrayIterator/php.profiler/actions/workflows/code-checking.yml/badge.svg)](https://github.com/ArrayIterator/php.profiler/actions/workflows/code-checking.yml)
+
+
+## ATTENTION
+
+This package still under development, the profiler is ready but the UI is not yet ready. The UI is still under development.
+
+But the profiler is ready to use, you can use it by installing the package and use the profiler.
+You can customize the implementation of the Frontend or Backend.
+
+## UI & IMPLEMENTATION OF RENDERER
+
+Typescript & scss [**[assets](assets)**] is used to create the UI, the UI is created using the following technologies:
+
+### REQUIREMENT:
+
+- NodeJS (npm)
+  - TypeScript
+  - Webpack
+  - Sass
+- PHP 7.4 or higher
+- Composer
+
+### TASKS
+
+> BACKEND
+
+- [x] Benchmark Profiler
+- [x] Memory Profiler
+- [x] Time Profiler
+- [x] Render Profiler
+- [x] Code Styling & PhpStan
+
+> FRONTEND
+
+- [x] ToolBar (Chrome Like)
+- [x] Dark Mode & Light Mode (Auto Detect)
+- [x] Resizeable
+- [x] Action Size
+  - [x] Maximize
+  - [x] Minimize (restore)
+  - [x] Close
+
+#### Benchmark Tab
+
+- [ ] Filtering
+  - [x] Importer
+  - [x] Exporter
+  - [x] Restorer
+  - [x] Message (information about the import, export, restore)
+  - [ ] General Filter
+  - [ ] Performance Filter (Slow, Fast, Average)
+  - [ ] Search Filter (Follow the benchmark content)
+- [ ] Waterfall Profiling
+  - [ ] Using waterfall using div percentage
+  - [ ] Add additional information for certain table
+  - [ ] Clickable to show the detail of the benchmark
+
+#### Info Tab
+
+- [ ] Profiler Information
+  - [ ] Metadata of JSON
+  - [ ] RAM Usage & Limit (chart using pie chart from highchart.js)
+  - [ ] Additional Information
+  - [ ] Chart for benchmark (multiple chart type)
+
+#### Code Tab
+
+- [ ] Code Section
+  - [ ] Show collapsible code (pre of json)
+
+
+## LICENSE
+
+[MIT License](LICENSE)