* Fix plus submission dialog
* Different layout for portrait recordings
* Fix now preview found pulsing
* Fix bug with uneven milliseconds
* Improve consistency of video scaling
* Update previews on the hour
* Allow tap to toggle controls so zooming still works
* Use hash location insteaad of state for live camera view
* Add typing
* Show skeleton until video players finishes loading
* Clean up android logic
* Ensure mobile view video is consistent
* Cleanup
* Only show when not scrubbing
* Don't use loading
* Start preview at correct time too
* Fix react race condition
* Be wait for seek to show video player
* use a single source of truth for scrubbing
* simplify controller state
* Cleanup scrubbing logic
* Apply same logic to mobile
---------
Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
* Use dynamic imports to reduce initial load times
Remove videojs
* Convert to using hls.js instead of videojs
* Improve mobile controls experience
* Cleanup
* Ensure playback rate stays teh same when source changes
* Use webp for latest camera image
* Switch to hls.js on error
* Don't rerun error if hls already tried
* Fix error checking
* also check for media decode error to fallback to HLS
---------
Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
* Use skeleton for gif loading
* cache gifs as well
* Show skeleton when switching previews
* Fix touch controls for mobile
* Fix android mobile scrub logic
* Cleanup
* initial try
* add birdseye
* remove vite
* cleanup
* memoize
* remove console
* ensure birdseye is actually enabled in config
* birdseye first in select list and fix jsmpeg player size
* add minor ticks to timeline
* don't display motion events on veritcal bars on motion timeline
* color tweaks and spacing on config editor
* pad start and end of timeline to ensure handlebar is always visible
* Write preview frames as webp instead of jpg and ensure webp are cached in nginx
* Support preview player that shows current hour images
* Update to get preview player working
* Use timestamp based recordings check instead of calendar
* Start motion review from current time
* Adjust layout
* Use preview players for previews
* remove vite
* Cleanup
* Fix up the layout
* Cleanup review items
* Fix spacing
* Fix -1 text
* Cleanup scroll
* Show activity indicator when review items are null
* Show no preview text when not found
* Add padding to buttons
* Simplify comparisons
* Increase duration of alerts and detections
* Add key
* Fix cancel button
* Fix motion review when switching days
* Add reset buttons and make calendar apply immediately
* Adjust apis for motion and audio activity
* Write review thumbs as webp and reduce size
* Cleanup to use new preview video player
* Make it so motion persists the selected time
* Don't jump when player first starts
* Get autoplay working right
* Break preview only video player out
* Simplify
* Load after current preview changes
* Clear out waiting for seek state
* Start at correct time of hour
* Fix layout for tall video
* Fix switching between different hours
* Simplify book keeping of different time ranges
* Rewrite player to handle changing of previews outside of video player
* Simplify switching between cameras
* Fix previews causing cameras to not load
* Simplify listeners
* Always clear existing listener
* Save numbers as int instead of string
* Fix hover logic
* Fix delay for new alerts
* Fixup dialog and marking item as uploaded
* Make preview progress larger and easier to grab
* Allow hovering to control preview on desktop
* Add dialog for creating new camera group
* Support adding of camera groups and dynamically updating the config
* Support deleting and edit existing camera groups
* Don't show separator if user has no groups
* Formatting
* fix background
* Use different cursor for dragging preview
* Improve filters UI and add audio labels
* Use switch and adjust colors
* Disable chromecast button and remove dimming
* Change marked reviewed text
* mark items as reviewed when they are opened
* Update api to use json and add button to mark all as reviewed
* fix api so last24 hours has its own review summary
* fix sidebar spacing
* formatting
* Bug fixes
* Make motion activity respect filters
* dynamically manage aspect ratio
* full size
* always use camera aspect ratio for mobile
* no need for different handling for pano cams
* don't set aspect ratio on fullscreen
* Refactor activity api to send motion and audio data
* Prepare for using motion data timeline
* Get working
* reduce to 0
* fix
* Formatting
* fix typing
* add motion data to timelines and allow motion cameas to be selectable
* Fix tests
* cleanup
* Fix not loading preview when changing hours
* Split recording view for mobile and desktop and get desktop working
* Get stuff working well
* Handle onclick for video
* Fix camera grid
* set onclick
* Adjust remaining summary items when items are marked as reviewed
* Add api for filtering and show correct number when filtering
* Fix default group config
* Update review summary when data is reloaded
* Fix quick items not getting reviewed
* Add camera group config
* Add saving of camera group selection
* Implement camera groups in config and live view
* Fix warnings
* Add tooltips to camera group items on desktop
* Add camera groups to the filters for events
* Fix tooltips and group selection
* Cleanup
* adjust segment math
* simplify interp and fix math
* fix math and update dependency
* push debug
* Revert "push debug"
This reverts commit 07c171b341.
* Break detection grid into separate function
* Implement backward preview jump and jump lockout
* ensure lockout is engaged when starting
* Add preview only mode to make loading more efficeint
* remove scrollbar and match gaps/margins with live view
* Rewrite dynamic player to use html video for preview and fix grid gaps
* consistent check for aspect ratio for tall cameras
---------
Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
* Get live camera view working
* Get ptz working
* Add button for ptz presets
* Add camera feature buttons
* Add button for camera audio
* Cleanup
* Cleanup mobile live
* Only use landscape check on mobile
* Implement context menu for batch operations and implement apis
* reduce preview calculations on rerenders
* Add button to mark above items as reviewed
* Use context menu for mark as reviewed
* Cleanup
* use portal for tooltips
* Fix tooltips for desktop and mobile nav bars
---------
Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
* adapt timeline to mobile
* remove unused
* tweaks
* pointer cursor on segments
* make full recordings view look better on mobile
* explicitly set timeline width for md
* button positioning
* Simplify nav components
* Allow ability to choose live layout on mobile
* Combine event views
* Undo vite
* Fix autoplay
* Remove import
* Show filters on mobile view
* Spacing
* Don't separate properties
* make event bars clickable
* outline and scroll when segment is clicked
* match outline colors to event type
* hover thumbnails
* make event bars clickable
* outline and scroll when segment is clicked
* match outline colors to event type
* hover thumbnails
* fix merge from rebase
* remove minimap opacity classes
* live player outline colors
* safelist shadow classes
* don't load metadata until image has loaded
* correct class name and remove lazy loading pkg
* try refs
* hook
* don't load metadata until image has loaded
* correct class name and remove lazy loading pkg
* try refs
* hook
* don't show chips and date when image is loading
* add skeleton and change observer threshold
* remove debug
* use skeleton for live view too
* old activity indicator looks better on live
* fix gradients and lazy load with skeleton
* fading effects
* Convert preview player to use html5
* Cleanup
* Increase padding and use constant
* Firefox doesn't support high fps either
* Cleanup
* no need to special case firefox
* scroll minimap to keep it in view
* remove console log
* change ref
* rebase to dev
* rebase to dev
* rebase to dev
* fix history flexbox and live extra scrollbar
* remove extra class
* Reduce redundant code and don't pull new items when marking as reviewed
* Chunk recording times and run playback
* fix overwriting existing data
* Implement scrubbing
* Show refresh button
* Remove old history
* Fix race condition
* Cleanup handling
* Remove console
* Cleanups and fix safari preview speed on iOS
* Clarifying comment
* Update paging when loading page with no items
* Use chip for detections and show all the time
* make time ago dense
* Be smarter about paging empty
* Fix elevation
* Add ui for events
* Display data for review items
* Use preview thumbnails
* Implement paging
* Show icons for what was detected
* Show progress bar on preview thumbnail
* Hide the overlays on hover and update reviewed status
* Dim previews that have been reviewed
* Show audio icons
* Cleanup preview thumb player
* initial implementation of review timeline
* Use timeout for hover playback
* Break apart mobile and desktop views
* Show icons for sub labels
* autoplay first video on mobile
* Only show the last 24 hours by default
* Rework scrolling to fix nested scrolling
* Final scroll cleanups
---------
Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
* initial implementation of review timeline
* hooks
* clean up and comments
* reorganize components
* colors and tweaks
* remove touch events for now
* remove touch events for now
* fix vite config
* use unix timestamps everywhere
* fix corner rounding
* comparison
* use ReviewSegment type
* update mock review event generator
* severity type enum
* remove testing code
* Move safari function
* Use webrtc for safari
* Use taller aspect ratio for tall thumbnails
* Simplify thumbnail sizing
* Use correct aspect ratio on all devices
* Don't show gif until event is over and fix aspect
* Be more efficient about updating events
* ensure previews are sorted
* Don't show live view when window is not visible
* Move debug camera to separate view
* Improve jpg loading
* Ensure still is updated on player live finish
* Don't reload when window not visible
* Only disconnect instead of full remove
* Use start time instead of event over to determine gif
* Break out live page
* Improving layouts and add chip component
* Improve default camera player sizing
* Improve live updating
* Cleanup and fit figma
* Use fixed height
* Masonry layout
* Fix stuff
* Don't force heights
* Adjust scaling
* Cleanup
* remove sidebar (#9731)
* remove sidebar
* keep sidebar on mobile for now and add icons
* Fix revalidation
* Cleanup
* Cleanup width
* Add chips for activity on cameras
* Remove dashboard from header
* Use Inter font (#9735)
* Show still image when no activity is occurring
* remove unused search params
* add playing check for webrtc
* Don't use grid at all for single column
* Fix height on mobile
* a few style updates to better match figma (#9745)
* Remove active objects when they become stationary
* Move to sidebar only and make settings separate component
* Fix layout
* Animate visibility of chips
* Sidebar is full screen
* Fix tall aspect ratio cameras
* Fix complicated aspect logic
* remove
* Adjust thumbnail aspect and add text
* margin on single column layout
* Smaller event thumb text
* Simplify basic image view
* Only show the red dot when camera is recording
* Improve typing for camera toggles
* animate chips with react-transition-group (#9763)
* don't flash when going to still image
* revalidate
* tooltips and active tracking outline (#9766)
* tooltips
* fix tooltip provider and add active tracking outline
* remove unused icon
* remove figma comment
* Get live mode working for jsmpeg
* add small gradient below timeago on event thumbnails (#9767)
* Create live mode hook and make sure jsmpeg can be used
* Enforce env var
* Use print
* Remove unstable
* Add tooltips to thumbnails
* Put back vite
* Format
* Update web/src/components/player/JSMpegPlayer.tsx
---------
Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Co-authored-by: Blake Blackshear <blake@frigate.video>
* Show toast instead of text for success and errors
* Show correct times
* Start playing next hour when current hour ends
* Fix refreshing camera image
* Fix timeline
* Ensure viewport is always full screen
* Protect against hour with no cards and ensure data is consistent
* Reduce grouped up image refreshes
* Include current hour and fix scrubbing bugginess
* Scroll initially selected timeline in to view
* Expand timelne class type
* Use poster image for preview on video player instead of using separate image view
* Fix available streaming modes
* Incrase timing for grouping timline items
* Fix audio activity listener
* Fix player not switching views correctly
* Use player time to convert to timeline time
* Update sub labels for previous timeline items
* Show mini timeline bar for non selected items
* Rewrite desktop timeline to use separate dynamic video player component
* Extend improvements to mobile as well
* Improve time formatting
* Fix scroll
* Fix no preview case
* Mobile fixes
* Audio toggle fixes
* More fixes for mobile
* Improve scaling of graph motion activity
* Add keyboard shortcut hook and support shortcuts for playback page
* Fix sizing of dialog
* Improve height scaling of dialog
* simplify and fix layout system for timeline
* Fix timeilne items not working
* Implement basic Frigate+ submitting from timeline
* Add timeline graph component
* Add more custom colors and improve graph
* Add api and data
* Fix data sorting
* Add graph to timeline
* Only show timeline for selected hour
* Make data full range
* Break apart mobile and desktop timeline views
* Set aspect ratio for player correctly
* more modest default width
* Add timeline item card
* Get video player to fit
* get layout going
* More work on youtube view
* Get video scaling working
* Better dialog sizes
* Show all timelines for day
* Add full day of timelines
* Improve hooks
* Fix previews
* Separate mobile and desktop views and don't rerender
* cleanup
* Optimizations and improvements
* make preview dates more efficient
* Remove seekbar and use timeline as seekbar
* Improve background and scrubbing
* Move history card view to separate view and create timeline view
* Get custom time scrubber working
* Add back nav
* Show timeline bounding boxes
* Implement seeking limiter
* Use browser history to allow back button to close timeline viewer
* Fix mobile timeline and add more icons for detections
* Play when item is initially visible
* Add filter popover
* Add api filter hook and use UI with filtering
* Get history filtering working for cameras and labels
* Allow filtering on detail level
* Save timeline entries for api events
* reset
* fix width
* Fix mobile event timeago
* Reduce preview playback rate for safari browser
* Fix dashboard buttons
* Update recent events correctly
* Fix opening page on icon toggle
* Fix video player remote playback check
* fix history image
* Add sticky headers to history page
* Fix iOS empty frame
* reduce duplicate items and improve time format
* Organize data more effictively and ensure data is not overwritten
* Use icon to indicate preview
* Initial draft for filtering Frigate+ submits in frontend
* Hide filter when Frigate+ is not enabled
* Update http.py
* Revert "Update http.py"
This reverts commit fa292682d6.
* implement nginx caching
* bypass cache from frigate frontend, reduce to 5s
* set cache time to 2s
* cache 200s for 5s
* exclude vod endpoints from cache
* Show ongoing events separately
* Separate to separate event function
* Change icon type
* Hide in progress when date range search occurs
* Collapse in progress when filtering
* Fix event overlay
* Make tooltip more clear
Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>
---------
Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>
* Refactor media source handling in MsePlayer.js and Birdseye.jsx to support ManagedMediaSource
* lint
* Update docs to reflect iOS supporting mse
---------
Co-authored-by: Sergey Krashevich <svk@svk.su>
* CenterFocusString icon
* Add CenterFocusString to multiselect
* Rename CenterFocusString.jsx
* Rename icon and make it smaller
* Rename icon
* Fix lint and use icon
for speech
* remove unused vars
* Remove unused import
* Add attribute item to timeline
* Add face icon
* Add support for other icons
* Cleanup
* Ensure attributes are only updated once
* don't show _ in attributes
* Add capability to link directly to an event ID in the web UI
* Move event ID to searchParams, add View All button
* Use searchParams inside eventsFetcher
* Refactor Calendar component to update month details only when year or month changes
* Update web/src/components/Calendar.jsx
Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
---------
Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
* Refactor event label and sub-label score display in Events.jsx to include the event label and sub-label percentage
* Revert "Refactor event label and sub-label score display in Events.jsx to include the event label and sub-label percentage"
This reverts commit 87c23adf1e.
* Refactor event label and sub label score display in Events component
* Refactor video player div class names in Birdseye.jsx to be more responsive
* let's JSMpegPlayer dont takes up the entire screen
* Update Birdseye.jsx
* Add useState hook and toggle button for dynamic width adjustment and refactor code for readability in env.js and Birdseye.jsx
* fix stupid typo
* Swapped the controls around
* Remove useless comments
Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
* Add button styles to the Birdseye component's toggle width button
---------
Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
* Add functionality to update YAML config file with PUT request in HTTP endpoint
* Refactor copying of text to clipboard with Clipboard API and fallback to document.execCommand('copy') in CameraMap.jsx file
* Update YAML file from URL query parameters in frigate/http.py and add functionality to save motion masks, zones, and object masks in CameraMap.jsx
* formatting
* fix merging fuckup
* Refactor camera zone coordinate saving to use single query parameter per zone in CameraMap.jsx
* remove unnecessary print statements in util.py
* Refactor update_yaml_file function to separate the logic for updating YAML data into a new function update_yaml().
* fix merge errors
* Refactor code to improve error handling and add dependencies to useEffect hooks
* Initial audio classification model implementation
* fix mypy
* Keep audio labelmap local
* Cleanup
* Start adding config for audio
* Add the detector
* Add audio detection process keypoints
* Build out base config
* Load labelmap correctly
* Fix config bugs
* Start audio process
* Fix startup issues
* Try to cleanup restarting
* Add ffmpeg input args
* Get audio detection working
* Save event to db
* End events if not heard for 30 seconds
* Use not heard config
* Stop ffmpeg when shutting down
* Fixes
* End events correctly
* Use api instead of event queue to save audio events
* Get events working
* Close threads when stop event is sent
* remove unused
* Only start audio process if at least one camera is enabled
* Add const for float
* Cleanup labelmap
* Add audio icon in frontend
* Add ability to toggle audio with mqtt
* Set initial audio value
* Fix audio enabling
* Close logpipe
* Isort
* Formatting
* Fix web tests
* Fix web tests
* Handle cases where args are a string
* Remove log
* Cleanup process close
* Use correct field
* Simplify if statement
* Use var for localhost
* Add audio detectors docs
* Add restream docs to mention audio detection
* Add full config docs
* Fix links to other docs
---------
Co-authored-by: Jason Hunter <hunterjm@gmail.com>
* Show overlay when hovering on timeline box
* Make it work with mobile too
* Fix lint
* Fix ratio
* Update web/src/components/TimelineEventOverlay.jsx
Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>
* Show overlay when hovering on timeline box
* Make it work with mobile too
* Fix lint
* Fix ratio
* Remove label and make overlay respect selected theme
---------
Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>
* Load labels dynamically to include custom events and audio, do not include attribute labels
* Formatting
* Fix sorting
* Also filter tracked object list on camera page
* isort
* Don't fail before load
* Refactor date and time initialization in Export.jsx to use local timezone
* Update error message to include specific reason for failure in Export.jsx
* "Refactor storage stats calculation to use powers of 2 for more accurate values"
* replace 1000000 to 2^20
* Refactor storage unit size display to use binary prefixes
This commit updates the display of storage unit sizes in both the camera storage stats and the Storage component in the web UI to use binary prefixes (MiB and GiB) instead of decimal prefixes (MB and GB). This provides more accurate and consistent representation of storage sizes
* added timepicker as children to calendar
* new timepicker component
* Add timepicker
* new timePicker component
* timepicker as calendar child
* hover:border and rounded
* adjusted width
* complete rework
* more code comments
* memorization
* preselect hover, transition
* numberOfDaysSelected has minimum of 1
* prefill hours when component mounts
* persist hours when component mount
* accommodate for the new timePicker
* add reset state
* scroll into view
* reuse before, after
* fix LastDayInRange when a time is selected
* do not add hours if before is zero
* use hours instead of days
* useeffect to reset hour. check timerange before scroll
* scroll to last element, not first
* Add option for network bandwidth and only calculate if enabled
* Don't show network bandwidth in system stats page if not enabled
* Formatting
* Hide other rows as well
* Add docs
* Add config options for AMD and Intel GPU stats
* Fix stats access
* Update docs
* Use correct bool syntax
Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>
---------
Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>
* Add date and time inputs to Export component and ensure end time is larger than start time
* Update web/src/routes/Export.jsx
Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>
---------
Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>
* Add ability to export frigate clips
* Add http endpoint
* Add dir to nginx
* Add webUI
* Formatting
* Cleanup unused
* Optimize timelapse
* Fix pts
* Use JSON body for params
* Use hwaccel to encode when available
* Print ffmpeg command when fail
* Print ffmpeg command when fail
* Add separate ffmpeg preset for timelapse
* Add docs outlining the export directory
* Add export docs
* Use ''
* Fix playlist max time
* Lower max playlist time
* Add api docs for export
* isort fixes
* Update go2rtc to 1.3.0
* Increment to 1.3.1
* Increment to 1.3.2
* Update webrtc player to match latest
* Update version to 1.4.0
* Update mse player
* Update birdseye mse player
* remove logs
* Update docs to link to new version
* Final web lint fixes
* Update versions
* Move to events package
* Improve handling of external events
* Handle external events in the event queue
* Pass in event processor
* Check event json
* Fix json parsing and change defaults
* Fix snapshot saving
* Hide % score when not available
* Correct docs and add json example
* Save event png db
* Adjust image
* Formatting
* Add catch for failure ending event
* Add init to modules
* Fix naming
* Formatting
* Fix http creation
* fix test
* Change to PUT and include response in docs
* Add ability to set bounding box locations in snapshot
* Support multiple box annotations
* Cleanup docs example response
Co-authored-by: Blake Blackshear <blake@frigate.video>
* Cleanup docs wording
Co-authored-by: Blake Blackshear <blake@frigate.video>
* Store full frame for thumbnail
* Formatting
* Set thumbnail height to 175
* Formatting
---------
Co-authored-by: Blake Blackshear <blake@frigate.video>
* Add network bandwidth usage to System table display in System.jsx and update get_bandwidth_stats function in util.py to include go2rtc processes
* black...
* Add network bandwidth usage to system table in web UI and improve regex in get_bandwidth_stats function to include frigate detector processes
* black...
* Update bandwidth calculation to include both incoming and outgoing traffic
* black:(
* Do not show the loader during recordings api call
Showing the loader during the recordings API call will rerender the recordings list and rerenders the video player
* Fix defauting to 0 seekSeconds if recordings results are missings
* test refactor process stats
* Update util.py
* bugfix
* black formatting
* add missing processes field to StatsTrackingTypes class
* fix python checks and tests...
* use psutil for calcilate cpu utilization on get_cpu_stats
* black...black...black...
* add cpu average
* calculate statiscts for logger process
* add P-ID for other processes in System.jsx
* Apply suggestions from code review
Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
* make page beautiful again :)
---------
Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
* Organize event table to be more generalized
* Add appropriate fields to data
* Move tracked object logic to own function
* Add source type to event queue
* rename enum
* Fix types that are used in webUI
* remove redundant
* Formatting
* fix typing
* Rename enum
* Add support for ptz commands via websocket
* Fix startup issues
* Fix bugs
* Set config manually
* Add more commands
* Add presets
* Add zooming
* Fixes
* Set name
* Cleanup
* Add ability to set presets from UI
* Add ability to set preset from UI
* Cleanup for errors
* Ui tweaks
* Add visual design for pan / tilt
* Add pan/tilt support
* Support zooming
* Try to set wsdl
* Fix duplicate logs
* Catch auth errors
* Don't init onvif for disabled cameras
* Fix layout sizing
* Don't comment out
* Fix formatting
* Add ability to control camera with keyboard shortcuts
* Disallow user selection
* Fix mobile pressing
* Remove logs
* Substitute onvif password
* Add ptz controls ot birdseye
* Put wsdl back
* Add padding
* Formatting
* Catch onvif error
* Optimize layout for mobile and web
* Place ptz controls next to birdseye view in large layout
* Fix pt support
* Center text titles
* Update tests
* Update docs
* Write camera docs for PTZ
* Add MQTT docs for PTZ
* Add ptz info docs for http
* Fix test
* Make half width when full screen
* Fix preset panel logic
* Fix parsing
* Update mqtt.md
* Catch preset error
* Add onvif example to docs
* Remove template example from main camera docs
* Create timeline table
* Fix indexes
* Add other fields
* Adjust schema to be less descriptive
* Handle timeline queue from tracked object data
* Setup timeline queue in events
* Add source id for index
* Add other fields
* Fixes
* Formatting
* Store better data
* Add api with filtering
* Setup basic UI for timeline in events
* Cleanups
* Add recordings snapshot url
* Start working on timeline ui
* Add tooltip with info
* Improve icons
* Fix start time with clip
* Move player logic back to clips
* Make box in timeline relative coordinates
* Make region relative
* Get box overlay working
* Remove overlay when playing again
* Add disclaimer when selecting overlay points
* Add docs for new apis
* Fix mobile
* Fix docs
* Change color of bottom center box
* Fix vscode formatting
