diff --git a/pkgs/dartpad_ui/web/flutter_bootstrap.js b/pkgs/dartpad_ui/web/flutter_bootstrap.js new file mode 100644 index 000000000..a3a9638cd --- /dev/null +++ b/pkgs/dartpad_ui/web/flutter_bootstrap.js @@ -0,0 +1,28 @@ +{{flutter_js}} +{{flutter_build_config}} + +const serviceWorkerSettings = { + serviceWorkerVersion: {{flutter_service_worker_version}} +}; + +_flutter.loader.load({ + serviceWorkerSettings, +}); + +const splash = document.querySelector('#splash'); + +_initSplashTheme(); + +window.addEventListener('flutter-first-frame', () => { + splash.classList.add('done'); + + setTimeout(() => splash.remove(), 500); +}); + +async function _initSplashTheme() { + const queryParams = new URLSearchParams(window.location.search); + const queryTheme = queryParams.get('theme'); + const theme = ['light', 'dark'].includes(queryTheme) ? queryTheme : 'dark'; + + splash.classList.add(theme); +} diff --git a/pkgs/dartpad_ui/web/icons/Icon.svg b/pkgs/dartpad_ui/web/icons/Icon.svg new file mode 100644 index 000000000..0ae2d2a58 --- /dev/null +++ b/pkgs/dartpad_ui/web/icons/Icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pkgs/dartpad_ui/web/index.html b/pkgs/dartpad_ui/web/index.html index cd0867d87..af490df1d 100644 --- a/pkgs/dartpad_ui/web/index.html +++ b/pkgs/dartpad_ui/web/index.html @@ -8,83 +8,37 @@ - + + - + DartPad + - - - - - + + + - +
+ Loading indicator +
diff --git a/pkgs/dartpad_ui/web/styles/index.css b/pkgs/dartpad_ui/web/styles/index.css new file mode 100644 index 000000000..eb7edd86f --- /dev/null +++ b/pkgs/dartpad_ui/web/styles/index.css @@ -0,0 +1,112 @@ +.CodeMirror { + height: 100%; +} + +.squiggle-info { + border-bottom: 2px solid #7ea7d8; +} + +.squiggle-warning { + border-bottom: 2px solid #d9d077; +} + +.squiggle-error { + border-bottom: 2px solid #ef5350; +} + +.squiggle-deprecation { + text-decoration: line-through; + text-decoration-thickness: 10%; +} + +.CodeMirror-simplescroll-horizontal div, +.CodeMirror-simplescroll-vertical div { + position: absolute; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-radius: 4px; +} + +.CodeMirror-simplescroll-horizontal, +.CodeMirror-simplescroll-vertical { + position: absolute; + z-index: 6; +} + +.CodeMirror-simplescroll-horizontal { + bottom: 0; + left: 0; + height: 9px; +} + +.CodeMirror-simplescroll-horizontal div { + bottom: 0; + height: 100%; +} + +.CodeMirror-simplescroll-vertical { + right: 0; + top: 0; + width: 9px; +} + +.CodeMirror-simplescroll-vertical div { + right: 0; + width: 100%; +} + +#splash { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 999; + transition: opacity 500ms; +} + +#splash.light { + background-color: #f5f5f7; +} + +#splash.dark { + background-color: #1f2833; +} + +#splash.done { + opacity: 0; +} + +#splash img { + width: 28vmin; + animation: 1s ease-in-out 200ms infinite alternate breathe; + transition: opacity 500ms; +} + +#splash.done img { + animation: 500ms ease-in-out 0s 1 forwards zoom; + opacity: 0; +} + +@keyframes breathe { + from { + transform: scale(1); + } + + to { + transform: scale(0.95); + } +} + +@keyframes zoom { + from { + transform: scale(1); + } + + to { + transform: scale(0.01); + } +}