Skip to content

Commit

Permalink
Add Hal error screen on phones in portrait mode.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesalmeida
jamesalmeida committed Oct 3, 2024
1 parent df9597b commit 7b2fcf8
Show file tree
Hide file tree
Showing 6 changed files with 340 additions and 10 deletions.
2 changes: 1 addition & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<title>Tesla</title>

<!-- Sets the status bar style to transparent -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
</head>
Expand Down
28 changes: 26 additions & 2 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,20 @@ html, body { width:100%; overflow: hidden; }
font-weight: 600;
}

/* .screenTooSmallError {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: #343434;
z-index: 999999999;
border-radius: 3px;
color: #d0d0d0;
font-size: 16px;
text-align: center;
line-height: 16px;
} */

.small-screen-message {
display: none;
text-align: center;
Expand All @@ -333,7 +347,13 @@ html, body { width:100%; overflow: hidden; }
padding: 120px 5px;
height: 100dvh;
}


.screenTooSmallError {
display: flex;
align-items: center;
justify-content: center;
}

.small-screen-message {
display: block;
}
Expand Down Expand Up @@ -435,7 +455,6 @@ html, body { width:100%; overflow: hidden; }
}
}


/* -------------------- UTILITY CSS -------------------- */

.no-select {
Expand All @@ -445,6 +464,11 @@ html, body { width:100%; overflow: hidden; }
-ms-user-select: none;
}

.ctaBtn {
cursor: pointer;
box-sizing: content-box;
}

.ctaBtn:hover {
transform: scale(1.05);
filter: brightness(1.1);
Expand Down
4 changes: 3 additions & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import VolumeControl from './components/VolumeControl/VolumeControl';
import TemperatureControl from './components/TemperatureControl/TemperatureControl';
import BatteryStatus from './components/BatteryStatus/BatteryStatus';
import GearSelect from './components/GearSelect/GearSelect';
import ErrorScreen from './components/ErrorScreen/ErrorScreen';
import { useDots } from './utils/dots';
import './App.css';

Expand Down Expand Up @@ -322,6 +323,8 @@ function App() {
{isLoading && <LoadingScreen />}
<div id="displayBezel" ref={appContentRef} style={{display: isLoading ? 'none' : 'block'}}>
<div className="displayWrapper">
{/* <div className="screenTooSmallError">I'm sorry Dave, I'm afraid I can't do that{dots}</div> */}
<ErrorScreen />
<PanelGroup autoSaveId="example" direction="horizontal" className="horizontalPanelGroup">
<Panel
defaultSize={DEFAULT_LEFT_PANEL_SIZE}
Expand Down Expand Up @@ -401,7 +404,6 @@ function App() {
</div>
</div>
<div className="small-screen-message">
I'm sorry Dave, I'm afraid I can't do that{dots}<br />
Best viewed on a larger screen.<br />
<span>For now, try turning your phone sideways.<br />
At least until I tweak the mobile styles.</span>
Expand Down
278 changes: 278 additions & 0 deletions src/components/ErrorScreen/ErrorScreen.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,278 @@
.errorScreen {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: #343434;
z-index: 999999999;
border-radius: 3px;
color: #d0d0d0;
font-size: 16px;
text-align: center;
line-height: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.error-message {
position: relative;
top: 85px;
color: #000;
font-size: 20px;
font-weight: bold;
}

@keyframes pulse {
0% {
opacity: 1;
}

100% {
opacity: 0;
}
}

@-moz-keyframes pulse {
0% {
filter: alpha(opacity=100);
opacity: 1;
}

100% {
filter: alpha(opacity=0);
opacity: 0;
}
}

@-webkit-keyframes pulse {
0% {
filter: alpha(opacity=100);
opacity: 1;
}

100% {
filter: alpha(opacity=0);
opacity: 0;
}
}

@-ms-keyframes pulse {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
}

@-o-keyframes pulse {
0% {
filter: alpha(opacity=100);
opacity: 1;
}

100% {
filter: alpha(opacity=0);
opacity: 0;
}
}

.-circular,
.hal-eye .__ring:before,
.hal-eye .__oculus .__iris {
border-radius: 100%;
}

.hal {
height: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #adadad), color-stop(50%, #999999), color-stop(100%, #828282));
background-image: -webkit-linear-gradient(#adadad, #999999, #828282);
background-image: -moz-linear-gradient(#adadad, #999999, #828282);
background-image: -o-linear-gradient(#adadad, #999999, #828282);
background-image: linear-gradient(#adadad, #999999, #828282);
}

.hal-eye {
border: 2px solid rgba(0, 0, 0, 0.2);
top: 3%;
box-shadow: 0px 21px 5px rgba(0, 0, 0, 0.3);
height: 15em;
left: 50%;
margin: 0 0 0-7.5em;
position: relative;
width: 15em;
}

.hal-eye .__ring {
height: 100%;
padding: 0.5em;
position: relative;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a9a9a9), color-stop(20%, #ffffff), color-stop(40%, #595959), color-stop(65%, #b3b3b3), color-stop(100%, #666666));
background-image: -webkit-linear-gradient(#a9a9a9, #ffffff 20%, #595959 40%, #b3b3b3 65%, #666666);
background-image: -moz-linear-gradient(#a9a9a9, #ffffff 20%, #595959 40%, #b3b3b3 65%, #666666);
background-image: -o-linear-gradient(#a9a9a9, #ffffff 20%, #595959 40%, #b3b3b3 65%, #666666);
background-image: linear-gradient(#a9a9a9, #ffffff 20%, #595959 40%, #b3b3b3 65%, #666666);
}

.hal-eye .__ring:before {
content: '';
display: block;
height: 100%;
width: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #737373), color-stop(14%, #666666), color-stop(50%, #a9a9a9), color-stop(72%, #999999), color-stop(80%, #b7b7b7), color-stop(100%, #cccccc));
background-image: -webkit-linear-gradient(#737373, #666666 14%, #a9a9a9 50%, #999999 72%, #b7b7b7 80%, #cccccc);
background-image: -moz-linear-gradient(#737373, #666666 14%, #a9a9a9 50%, #999999 72%, #b7b7b7 80%, #cccccc);
background-image: -o-linear-gradient(#737373, #666666 14%, #a9a9a9 50%, #999999 72%, #b7b7b7 80%, #cccccc);
background-image: linear-gradient(#737373, #666666 14%, #a9a9a9 50%, #999999 72%, #b7b7b7 80%, #cccccc);
}

.hal-eye .__oculus {
background-color: #000;
border: 1px solid rgba(0, 0, 0, 0.5);
height: 80%;
left: 50%;
margin: -40% 0 0 -40%;
position: absolute;
top: 50%;
width: 80%;
}

.hal-eye .__oculus .__iris {
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
}

.hal-eye .__oculus .__iris.-narrow {
background-image: radial-gradient(circle, #fff063 2%, #fa0c02 10%, #c80901 30%, #310200 55%, #000000 85%);
z-index: 1;
}

.hal-eye .__oculus .__iris.-wide {
background-image: radial-gradient(circle, #fff063 5%, #fa0c02 15%, #c80901 40%, #0c0000 65%, #000000 85%);
-webkit-animation: pulse 2s ease-in-out infinite alternate;
-moz-animation: pulse 2s ease-in-out infinite alternate;
-ms-animation: pulse 2s ease-in-out infinite alternate;
-o-animation: pulse 2s ease-in-out infinite alternate;
animation: pulse 2s ease-in-out infinite alternate;
z-index: 2;
}

.hal-eye .__highlight {
background-color: rgba(255, 255, 255, 0.12);
border-radius: 100%;
box-shadow: 0 0 3px rgba(255, 255, 255, 0.12);
height: 8%;
left: 50%;
margin-left: -12%;
position: absolute;
top: 6%;
width: 24%;
}

.hal-eye .__highlight:before, .hal-eye .__highlight:after {
border-radius: 100%;
left: 50%;
position: absolute;
}

.hal-eye .__highlight:before {
content: '';
display: block;
height: 50%;
width: 50%;
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
margin-left: -25%;
top: 130%;
}

.hal-eye .__highlight:after {
content: '';
display: block;
height: 26%;
width: 26%;
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
margin-left: -13%;
top: 250%;
}

.hal-eye .__highlight.-alpha {
left: 75%;
margin-left: 0;
top: 30%;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}

.hal-eye .__highlight.-gamma {
left: 2%;
margin-left: 0;
top: 30%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}

@media only screen and (min-width: 30em) {
.hal {
/* min-height: 37.5em; */
}

.hal-eye {
height: 21.875em;
margin-left: -10.9375em;
width: 21.875em;
}
}

@media only screen and (min-width: 48em) {
.hal {
/* min-height: 50em; */
}

.hal-eye {
height: 31.25em;
margin-left: -15.625em;
width: 31.25em;
}
}

@media screen and (max-width: 768px) {
.errorScreen {
display: block;
}
.error-message {
top: 25px;
font-size: 12px;
font-weight: bold;
}
.hal {
height: 100%;
width: 100%;
}
.hal-eye {
top: 5%;
box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.3);
height: 8em;
left: 63%;
width: 8em;
}
.hal-eye .__ring {
height: 88%;
}
}
26 changes: 26 additions & 0 deletions src/components/ErrorScreen/ErrorScreen.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';
import { useDots } from '../../utils/dots';
import './ErrorScreen.css';


export default function ErrorScreen() {
const dots = useDots();

return (
<div id="page" className="errorScreen">
<div className="hal">
<div className="hal-eye -circular">
<div className="__ring -circular"></div>
<div className="__oculus -circular">
<div className="__iris -circular -narrow"></div>
<div className="__iris -circular -wide"></div>
<div className="__highlight -alpha"></div>
<div className="__highlight -beta"></div>
<div className="__highlight -gamma"></div>
</div>
</div>
<div className="error-message">I'm sorry, Dave. I'm afraid I can't do that{dots}</div>
</div>
</div>
);
}
Loading

0 comments on commit 7b2fcf8

Please sign in to comment.