今天和大家分享一个纯用web（html+css+js）实现的一个优美的个人信息菜单资料展示。
项目结构很简单只有一个html文件+一个css样式文件以及一个js脚本文件。
项目实现的功能：
1：进入首页是一个天气样式页面（显示当前时间+天气状态+进入主题的跳跃按钮）
2：点击按钮进入主题内容页面时需要输入密码（自定义1234）
3：主题内容是一个多样式菜单，展示自定义的一些内容（城市天气，个人美食，热爱影视等等）
代码如下：
html：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - App Menu With Lock Screen</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="root"></div>
<!-- partial -->
<script src='https://unpkg.com/react@17/umd/react.development.js'></script>
<script src='https://unpkg.com/react-dom@17/umd/react-dom.development.js'></script>
<script src='https://unpkg.com/browse/@types/[email protected]/index.d.ts'></script>
<script src='https://unpkg.com/browse/@types/[email protected]/index.d.ts'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.1/index.min.js'></script>
<script src='https://codepen.io/Hyperplexed/pen/xxYJYjM/54407644e24173ad6019b766443bf2a6.js'></script><script src="./script.js"></script>
</body>
</html>
css
/* -- */
@keyframes blink {
from, 25%, to {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(720deg);
}
to {
transform: rotate(1440deg);
}
}
@keyframes bounce {
from, 6.66%, 17.66%, 33.33% {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
13.33%, 14.33% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0) scaleY(1.1);
}
23.33% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0) scaleY(1.05);
}
26.66% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0) scaleY(0.95);
}
30% {
transform: translate3d(0, -4px, 0) scaleY(1.02);
}
}
body {
margin: 0px;
overflow-x: hidden;
padding: 0px;
}
body::-webkit-scrollbar-track {
background-color: #1e1e1e;
}
body::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 100px;
}
body::-webkit-scrollbar {
height: 4px;
width: 4px;
}
body input, body h1, body h3, body a, body span {
color: #5a5a5a;
font-family: "Rubik", sans-serif;
font-weight: 400;
margin: 0px;
padding: 0px;
}
.background-image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.clear-button {
backdrop-filter: blur(3px);
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 100px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.clear-button:hover {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
}
#app {
background-color: #1e1e1e;
}
#app.logged-out #app-info {
margin-left: 40px;
opacity: 1;
transform: translateX(0%);
}
#app.logged-out #app-background {
cursor: pointer;
}
#app.logged-out #sign-in-button-wrapper {
opacity: 1;
pointer-events: all;
transform: translate(-50%, -40px);
}
#app.logging-in #app-background #app-background-image, #app.verifying-log-in #app-background #app-background-image, #app.log-in-error #app-background #app-background-image {
filter: blur(8px);
transform: scale(1.2);
}
#app.logging-in #app-pin-wrapper, #app.log-in-error #app-pin-wrapper {
opacity: 1;
pointer-events: all;
transform: translate(-50%, -50%) scale(1);
}
#app.verifying-log-in #app-loading-icon {
opacity: 1;
transform: translate(-50%, -50%);
}
#app.log-in-error #app-pin-wrapper #app-pin .app-pin-digit {
background-color: rgba(239, 83, 80, 0.05);
border-color: rgba(239, 83, 80, 0.5);
}
#app.logged-in #app-menu {
height: auto;
overflow: initial;
opacity: 1;
pointer-events: all;
transform: translateY(0%);
}
#app .scrollable-component {
cursor: grab;
overflow: auto;
user-select: none;
width: 100%;
}
#app .scrollable-component:active {
cursor: grabbing;
}
#app .scrollable-component::-webkit-scrollbar {
height: 0px;
width: 0px;
}
#app #app-loading-icon {
left: 50%;
opacity: 0;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%, 0%);
transition: opacity 250ms, transform 250ms;
z-index: 2;
}
#app #app-loading-icon i {
animation: 2s spin ease-in-out infinite;
color: white;
font-size: 2em;
}
#app #app-background {
height: 100%;
left: 0px;
overflow: hidden;
position: fixed;
top: 0px;
width: 100%;
z-index: 1;
}
#app #app-background #app-background-image {
background-image: url("https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2076&q=80");
height: 100%;
transition: filter 250ms, transform 250ms;
width: 100%;
}
#app #app-info {
bottom: 0px;
left: 0px;
margin: 40px;
margin-left: 0px;
opacity: 0;
position: absolute;
transform: translateX(-100%);
transition: margin 250ms, opacity 250ms, transform 250ms;
z-index: 2;
}
#app .user-status-button {
cursor: pointer;
margin-top: 10px;
outline: none;
padding: 10px;
width: 100px;
}
#app .user-status-button i {
color: whitesmoke;
font-size: 1.25em;
}
#app #sign-in-button-wrapper {
bottom: 0px;
left: 50%;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translate(-50%, 40px);
transition: opacity 250ms, transform 250ms;
z-index: 2;
}
#app #sign-in-button-wrapper #sign-in-button:not(:hover) {
animation: bounce 3s infinite;
animation-delay: 3s;
}
#app .info {
align-items: flex-end;
display: flex;
}
#app .info .time {
color: whitesmoke;
font-size: 6em;
height: 80px;
line-height: 80px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
#app .info .weather {
display: inline-flex;
height: 20px;
margin-bottom: 6px;
margin-left: 20px;
}
#app .info .weather i, #app .info .weather span {
align-items: center;
display: inline-flex;
}
#app .info .weather i {
color: #fdd835;
font-size: 0.9em;
}
#app .info .weather span {
color: white;
}
#app .info .weather .weather-type {
height: 20px;
}
#app .info .weather .weather-temperature-value {
font-size: 1.5em;
height: 20px;
margin-left: 5px;
}
#app .info .weather .weather-temperature-unit {
align-items: flex-start;
font-size: 0.8em;
margin-left: 3px;
}
#app .reminder {
display: flex;
gap: 6px;
margin-top: 10px;
}
#app .reminder i, #app .reminder div {
display: inline-flex;
}
#app .reminder i {
color: whitesmoke;
font-size: 0.8em;
height: 12px;
line-height: 12px;
}
#app .reminder span {
color: rgba(255, 255, 255, 0.8);
font-size: 1.1em;
}
#app .reminder .reminder-icon {
align-items: center;
height: 20px;
}
#app .reminder .reminder-time {
align-items: flex-end;
color: #1e1e1e;
font-size: 0.8em;
height: 20px;
}
#app #quick-nav {
display: flex;
gap: 10px;
margin-top: 20px;
overflow: auto;
padding-bottom: 5px;
width: 100%;
z-index: 3;
}
#app #quick-nav .quick-nav-item {
padding: 10px 20px;
}
#app #quick-nav .quick-nav-item:last-of-type {
margin-right: 10px;
}
#app #quick-nav .quick-nav-item .quick-nav-item-label {
color: whitesmoke;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
}
#app #youtube-link {
align-items: center;
display: inline-flex;
gap: 5px;
margin-top: 10px;
padding: 10px 20px;
text-decoration: none;
}
#app #youtube-link i, #app #youtube-link span {
height: 20px;
line-height: 20px;
}
#app #youtube-link i {
color: #ef5350;
}
#app #youtube-link span {
color: white;
}
#app .menu-section {
margin-top: 60px;
}
#app .menu-section .menu-section-title {
align-items: center;
display: flex;
gap: 6px;
}
#app .menu-section .menu-section-title i, #app .menu-section .menu-section-title span {
color: whitesmoke;
}
#app .menu-section .menu-section-title i {
font-size: 1em;
}
#app .menu-section .menu-section-title .menu-section-title-text {
color: rgba(255, 255, 255, 0.8);
font-size: 1.25em;
}
#app .menu-section .menu-section-content {
margin-top: 15px;
padding-top: 5px;
}
#app #restaurants-section .menu-section-content {
display: flex;
gap: 1em;
}
#app #restaurants-section .menu-section-content .restaurant-card {
border-radius: 10px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
cursor: pointer;
height: 14vw;
max-height: 240px;
position: relative;
transition: transform 250ms;
width: 25%;
}
#app #restaurants-section .menu-section-content .restaurant-card:hover {
transform: translateY(-5px);
}
#app #restaurants-section .menu-section-content .restaurant-card:hover .restaurant-card-content .restaurant-card-content-items {
margin-bottom: 30px;
}
#app #restaurants-section .menu-section-content .restaurant-card .restaurant-card-content {
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
border-radius: 10px;
height: 100%;
width: 100%;
}
#app #restaurants-section .menu-section-content .restaurant-card .restaurant-card-content .restaurant-card-content-items {
bottom: 0px;
display: flex;
flex-direction: column;
margin: 20px;
position: absolute;
right: 0px;
text-align: right;
transition: margin 250ms;
}
#app #restaurants-section .menu-section-content .restaurant-card .restaurant-card-content .restaurant-card-content-items .restaurant-card-title {
color: whitesmoke;
font-size: 1.5em;
}
#app #restaurants-section .menu-section-content .restaurant-card .restaurant-card-content .restaurant-card-content-items .restaurant-card-desc {
color: #42a5f5;
font-size: 0.9em;
}
#app #weather-section .menu-section-content {
display: flex;
gap: 1em;
padding: 5px 0px;
width: 100%;
}
#app #weather-section .menu-section-content .day-card {
backdrop-filter: blur(3px);
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
height: 8vw;
max-height: 160px;
min-height: 140px;
min-width: 180px;
position: relative;
transition: transform 250ms;
width: calc(100% / 7);
}
#app #weather-section .menu-section-content .day-card:last-of-type {
margin-right: 5px;
}
#app #weather-section .menu-section-content .day-card .day-card-content {
display: flex;
flex-direction: column;
height: calc(100% - 20px);
justify-content: space-evenly;
padding: 10px;
}
#app #weather-section .menu-section-content .day-card .day-card-content i, #app #weather-section .menu-section-content .day-card .day-card-content span {
color: whitesmoke;
text-align: center;
}
#app #weather-section .menu-section-content .day-card .day-card-content .day-weather-temperature {
align-items: flex-start;
display: flex;
font-size: 0.9em;
justify-content: center;
}
#app #weather-section .menu-section-content .day-card .day-card-content .day-weather-temperature .day-weather-temperature-unit {
font-size: 0.8em;
margin-left: 3px;
}
#app #weather-section .menu-section-content .day-card .day-card-content .day-weather-icon {
font-size: 3.5em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
#app #weather-section .menu-section-content .day-card .day-card-content .day-weather-icon.sunny {
color: #fdd835;
}
#app #weather-section .menu-section-content .day-card .day-card-content .day-weather-icon.rainy, #app #weather-section .menu-section-content .day-card .day-card-content .day-weather-icon.stormy {
color: #42a5f5;
}
#app #weather-section .menu-section-content .day-card .day-card-content .day-name {
font-size: 0.9em;
text-transform: uppercase;
}
#app #tools-section .menu-section-content {
display: flex;
gap: 1em;
}
#app #tools-section .menu-section-content .tool-card {
background-color: #1e1e1e;
border-radius: 10px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
cursor: pointer;
height: 8vw;
max-height: 160px;
min-height: 140px;
overflow: hidden;
position: relative;
transition: transform 250ms;
width: calc(100% / 6);
}
#app #tools-section .menu-section-content .tool-card:hover {
transform: translateY(-5px);
}
#app #tools-section .menu-section-content .tool-card:hover .tool-card-background {
filter: grayscale(25%);
}
#app #tools-section .menu-section-content .tool-card .tool-card-background {
border-radius: 10px;
filter: grayscale(100%);
height: 100%;
left: 0px;
opacity: 0.5;
position: absolute;
top: 0px;
transition: filter 250ms;
width: 100%;
}
#app #tools-section .menu-section-content .tool-card .tool-card-content {
background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
border-radius: 10px;
display: flex;
flex-direction: column;
height: calc(100% - 40px);
justify-content: space-between;
padding: 20px;
position: relative;
width: calc(100% - 40px);
z-index: 2;
}
#app #tools-section .menu-section-content .tool-card .tool-card-content .tool-card-content-header {
display: flex;
flex-direction: column;
gap: 2px;
}
#app #tools-section .menu-section-content .tool-card .tool-card-content .tool-card-content-header .tool-card-label {
color: #42a5f5;
font-size: 0.8em;
text-transform: uppercase;
}
#app #tools-section .menu-section-content .tool-card .tool-card-content .tool-card-content-header .tool-card-name {
color: whitesmoke;
font-size: 1.25em;
}
#app #tools-section .menu-section-content .tool-card .tool-card-content .tool-card-icon {
color: whitesmoke;
font-size: 2em;
}
#app #movies-section .menu-section-content {
display: flex;
gap: 1em;
}
#app #movies-section .menu-section-content #movie-card-1 .movie-card-content {
background: linear-gradient(to top, rgba(57, 73, 171, 0.4), transparent, rgba(0, 0, 0, 0.4));
}
#app #movies-section .menu-section-content #movie-card-2 .movie-card-content {
background: linear-gradient(to top, rgba(103, 58, 183, 0.4), transparent, rgba(0, 0, 0, 0.4));
}
#app #movies-section .menu-section-content #movie-card-3 .movie-card-content {
background: linear-gradient(to top, rgba(239, 83, 80, 0.4), transparent, rgba(0, 0, 0, 0.4));
}
#app #movies-section .menu-section-content #movie-card-4 .movie-card-content {
background: linear-gradient(to top, rgba(42, 252, 152, 0.4), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
}
#app #movies-section .menu-section-content .movie-card {
background-color: #1e1e1e;
border-radius: 10px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
cursor: pointer;
height: 40vw;
max-height: 600px;
min-height: 460px;
min-width: 260px;
overflow: hidden;
position: relative;
transition: transform 250ms;
width: calc(100% / 4);
}
#app #movies-section .menu-section-content .movie-card:hover {
transform: translateY(-5px);
}
#app #movies-section .menu-section-content .movie-card:hover .movie-card-background {
transform: scale(1.05);
}
#app #movies-section .menu-section-content .movie-card:hover .movie-card-content i {
transform: translate(-20%, -20%) scale(1.2);
}
#app #movies-section .menu-section-content .movie-card .movie-card-background {
border-radius: 10px;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
transition: transform 250ms;
width: 100%;
z-index: 1;
}
#app #movies-section .menu-section-content .movie-card .movie-card-content {
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
border-radius: 10px;
height: 100%;
position: relative;
z-index: 2;
}
#app #movies-section .menu-section-content .movie-card .movie-card-content .movie-card-info {
display: flex;
flex-direction: column;
gap: 5px;
padding: 30px;
}
#app #movies-section .menu-section-content .movie-card .movie-card-content .movie-card-info span {
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
#app #movies-section .menu-section-content .movie-card .movie-card-content .movie-card-info .movie-card-title {
color: whitesmoke;
font-size: 2em;
}
#app #movies-section .menu-section-content .movie-card .movie-card-content .movie-card-info .movie-card-desc {
color: #c8c8c8;
font-size: 0.9em;
}
#app #movies-section .menu-section-content .movie-card .movie-card-content i {
bottom: 0px;
color: whitesmoke;
font-size: 5em;
padding: 30px;
position: absolute;
right: 0px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
transition: transform 250ms;
}
#app #app-pin-wrapper {
left: 50%;
opacity: 0;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%, -30%) scale(0.8);
transition: opacity 250ms, transform 250ms;
z-index: 2;
}
#app #app-pin-wrapper #app-pin-label {
color: whitesmoke;
font-size: 0.9em;
margin: 10px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
#app #app-pin-wrapper #app-pin-label #app-pin-cancel-text {
cursor: pointer;
margin-left: 2px;
}
#app #app-pin-wrapper #app-pin-label #app-pin-cancel-text:hover {
text-decoration: underline;
}
#app #app-pin-wrapper #app-pin-label #app-pin-error-text {
color: #ef5350;
}
#app #app-pin-wrapper #app-pin-hidden-input {
background-color: transparent;
border: none;
height: 0px;
outline: none;
pointer-events: none;
position: absolute;
width: 0px;
}
#app #app-pin-wrapper #app-pin {
display: flex;
gap: 10px;
}
#app #app-pin-wrapper #app-pin .app-pin-digit {
align-items: center;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.06);
display: inline-flex;
font-size: 3em;
height: 80px;
justify-content: center;
position: relative;
transition: background-color 250ms, border-color 250ms;
width: 60px;
}
#app #app-pin-wrapper #app-pin .app-pin-digit:after, #app #app-pin-wrapper #app-pin .app-pin-digit:before {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.06);
content: "";
position: absolute;
transition: opacity 250ms, transform 250ms;
z-index: 2;
}
#app #app-pin-wrapper #app-pin .app-pin-digit:before {
background-color: whitesmoke;
border-radius: 10px;
bottom: 0px;
height: 3px;
left: 15%;
opacity: 0;
transform: translateY(0px);
width: 70%;
}
#app #app-pin-wrapper #app-pin .app-pin-digit:after {
background-color: whitesmoke;
border-radius: 20px;
height: 20px;
opacity: 0;
transform: scale(0.25);
width: 20px;
}
#app #app-pin-wrapper #app-pin .app-pin-digit.focused:before {
animation: blink 2s ease-in-out infinite;
opacity: 1;
transform: translateY(-10px);
}
#app #app-pin-wrapper #app-pin .app-pin-digit.hidden:after {
opacity: 1;
transform: scale(1);
}
#app #app-pin-wrapper #app-pin .app-pin-digit.hidden .app-pin-digit-value {
opacity: 0;
transform: scale(0.25);
}
#app #app-pin-wrapper #app-pin .app-pin-digit .app-pin-digit-value {
color: whitesmoke;
transition: opacity 250ms, transform 250ms;
}
#app #app-menu {
height: 100vh;
overflow: hidden;
opacity: 0;
pointer-events: none;
position: relative;
transform: translateY(-10%);
transition: opacity 250ms, transform 250ms;
z-index: 2;
}
#app #app-menu #app-menu-content-wrapper {
background: linear-gradient(to bottom, transparent, #1e1e1e);
margin-top: 30vh;
min-height: 80vh;
padding: 80px;
padding-top: 0px;
}
#app #app-menu #app-menu-content-wrapper #app-menu-content {
margin: auto;
max-width: 1600px;
position: relative;
}
#app #app-menu #app-menu-content-wrapper #app-menu-content #app-menu-content-header {
display: flex;
justify-content: space-between;
}
@media (max-width: 1300px) {
#app.logged-out #sign-in-button-wrapper {
transform: translate(-40px, 0px);
}
#app #sign-in-button-wrapper {
bottom: 40px;
left: auto;
right: 0px;
transform: translate(40px, 0px);
}
#app #app-menu #app-menu-content-wrapper {
padding: 30px;
}
#app #app-menu #app-menu-content-wrapper #app-menu-content #restaurants-section .menu-section-content {
flex-wrap: wrap;
}
#app #app-menu #app-menu-content-wrapper #app-menu-content #restaurants-section .menu-section-content .restaurant-card {
height: 30vw;
max-height: 300px;
position: relative;
width: calc(50% - 0.5em);
}
#app #app-menu #app-menu-content-wrapper #app-menu-content #tools-section .menu-section-content {
flex-wrap: wrap;
}
#app #app-menu #app-menu-content-wrapper #app-menu-content #tools-section .menu-section-content .tool-card {
width: calc(33.33% - 0.69em);
}
}
@media (max-width: 600px) {
#app .info .time {
font-size: 4em;
height: 60px;
line-height: 60px;
}
#app .user-status-button {
width: 60px;
}
#app #app-menu #app-menu-content-wrapper #app-menu-content #restaurants-section .menu-section-content {
flex-direction: column;
}
#app #app-menu #app-menu-content-wrapper #app-menu-content #restaurants-section .menu-section-content .restaurant-card {
height: 40vw;
position: relative;
width: 100%;
}
#app #app-menu #app-menu-content-wrapper #app-menu-content #tools-section .menu-section-content {
flex-wrap: wrap;
}
#app #app-menu #app-menu-content-wrapper #app-menu-content #tools-section .menu-section-content .tool-card {
width: calc(50% - 0.5em);
}
}
@media (max-width: 400px) {
#app #app-menu #app-menu-content-wrapper #app-menu-content #tools-section .menu-section-content {
flex-wrap: wrap;
}
#app #app-menu #app-menu-content-wrapper #app-menu-content #tools-section .menu-section-content .tool-card {
width: 100%;
}
}js
"use strict";
var UserStatus;
(function (UserStatus) {
UserStatus["LoggedIn"] = "Logged In";
UserStatus["LoggingIn"] = "Logging In";
UserStatus["LoggedOut"] = "Logged Out";
UserStatus["LogInError"] = "Log In Error";
UserStatus["VerifyingLogIn"] = "Verifying Log In";
})(UserStatus || (UserStatus = {}));
var Default;
(function (Default) {
Default["PIN"] = "1234";
})(Default || (Default = {}));
var WeatherType;
(function (WeatherType) {
WeatherType["Cloudy"] = "Cloudy";
WeatherType["Rainy"] = "Rainy";
WeatherType["Stormy"] = "Stormy";
WeatherType["Sunny"] = "Sunny";
})(WeatherType || (WeatherType = {}));
const defaultPosition = () => ({
left: 0,
x: 0
});
const N = {
clamp: (min, value, max) => Math.min(Math.max(min, value), max),
rand: (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
};
const T = {
format: (date) => {
const hours = T.formatHours(date.getHours()), minutes = date.getMinutes(), seconds = date.getSeconds();
return `${hours}:${T.formatSegment(minutes)}`;
},
formatHours: (hours) => {
return hours % 12 === 0 ? 12 : hours % 12;
},
formatSegment: (segment) => {
return segment < 10 ? `0${segment}` : segment;
}
};
const LogInUtility = {
verify: async (pin) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (pin === Default.PIN) {
resolve(true);
}
else {
reject(`Invalid pin: ${pin}`);
}
}, N.rand(300, 700));
});
}
};
const useCurrentDateEffect = () => {
const [date, setDate] = React.useState(new Date());
React.useEffect(() => {
const interval = setInterval(() => {
const update = new Date();
if (update.getSeconds() !== date.getSeconds()) {
setDate(update);
}
}, 100);
return () => clearInterval(interval);
}, [date]);
return date;
};
const ScrollableComponent = (props) => {
const ref = React.useRef(null);
const [state, setStateTo] = React.useState({
grabbing: false,
position: defaultPosition()
});
const handleOnMouseDown = (e) => {
setStateTo(Object.assign(Object.assign({}, state), { grabbing: true, position: {
x: e.clientX,
left: ref.current.scrollLeft
} }));
};
const handleOnMouseMove = (e) => {
if (state.grabbing) {
const left = Math.max(0, state.position.left + (state.position.x - e.clientX));
ref.current.scrollLeft = left;
}
};
const handleOnMouseUp = () => {
if (state.grabbing) {
setStateTo(Object.assign(Object.assign({}, state), { grabbing: false }));
}
};
return (React.createElement("div", { ref: ref, className: classNames("scrollable-component", props.className), id: props.id, onMouseDown: handleOnMouseDown, onMouseMove: handleOnMouseMove, onMouseUp: handleOnMouseUp, onMouseLeave: handleOnMouseUp }, props.children));
};
const WeatherSnap = () => {
const [temperature] = React.useState(N.rand(65, 85));
return (React.createElement("span", { className: "weather" },
React.createElement("i", { className: "weather-type", className: "fa-duotone fa-sun" }),
React.createElement("span", { className: "weather-temperature-value" }, temperature),
React.createElement("span", { className: "weather-temperature-unit" }, "\u00B0F")));
};
const Reminder = () => {
return (React.createElement("div", { className: "reminder" },
React.createElement("div", { className: "reminder-icon" },
React.createElement("i", { className: "fa-regular fa-bell" })),
React.createElement("span", { className: "reminder-text" },
"Extra cool people meeting ",
React.createElement("span", { className: "reminder-time" }, "10AM"))));
};
const Time = () => {
const date = useCurrentDateEffect();
return (React.createElement("span", { className: "time" }, T.format(date)));
};
const Info = (props) => {
return (React.createElement("div", { id: props.id, className: "info" },
React.createElement(Time, null),
React.createElement(WeatherSnap, null)));
};
const PinDigit = (props) => {
const [hidden, setHiddenTo] = React.useState(false);
React.useEffect(() => {
if (props.value) {
const timeout = setTimeout(() => {
setHiddenTo(true);
}, 500);
return () => {
setHiddenTo(false);
clearTimeout(timeout);
};
}
}, [props.value]);
return (React.createElement("div", { className: classNames("app-pin-digit", { focused: props.focused, hidden }) },
React.createElement("span", { className: "app-pin-digit-value" }, props.value || "")));
};
const Pin = () => {
const { userStatus, setUserStatusTo } = React.useContext(AppContext);
const [pin, setPinTo] = React.useState("");
const ref = React.useRef(null);
React.useEffect(() => {
if (userStatus === UserStatus.LoggingIn || userStatus === UserStatus.LogInError) {
ref.current.focus();
}
else {
setPinTo("");
}
}, [userStatus]);
React.useEffect(() => {
if (pin.length === 4) {
const verify = async () => {
try {
setUserStatusTo(UserStatus.VerifyingLogIn);
if (await LogInUtility.verify(pin)) {
setUserStatusTo(UserStatus.LoggedIn);
}
}
catch (err) {
console.error(err);
setUserStatusTo(UserStatus.LogInError);
}
};
verify();
}
if (userStatus === UserStatus.LogInError) {
setUserStatusTo(UserStatus.LoggingIn);
}
}, [pin]);
const handleOnClick = () => {
ref.current.focus();
};
const handleOnCancel = () => {
setUserStatusTo(UserStatus.LoggedOut);
};
const handleOnChange = (e) => {
if (e.target.value.length <= 4) {
setPinTo(e.target.value.toString());
}
};
const getCancelText = () => {
return (React.createElement("span", { id: "app-pin-cancel-text", onClick: handleOnCancel }, "Cancel"));
};
const getErrorText = () => {
if (userStatus === UserStatus.LogInError) {
return (React.createElement("span", { id: "app-pin-error-text" }, "Invalid"));
}
};
return (React.createElement("div", { id: "app-pin-wrapper" },
React.createElement("input", { disabled: userStatus !== UserStatus.LoggingIn && userStatus !== UserStatus.LogInError, id: "app-pin-hidden-input", maxLength: 4, ref: ref, type: "number", value: pin, onChange: handleOnChange }),
React.createElement("div", { id: "app-pin", onClick: handleOnClick },
React.createElement(PinDigit, { focused: pin.length === 0, value: pin[0] }),
React.createElement(PinDigit, { focused: pin.length === 1, value: pin[1] }),
React.createElement(PinDigit, { focused: pin.length === 2, value: pin[2] }),
React.createElement(PinDigit, { focused: pin.length === 3, value: pin[3] })),
React.createElement("h3", { id: "app-pin-label" },
"Enter PIN (1234) ",
getErrorText(),
" ",
getCancelText())));
};
const MenuSection = (props) => {
const getContent = () => {
if (props.scrollable) {
return (React.createElement(ScrollableComponent, { className: "menu-section-content" }, props.children));
}
return (React.createElement("div", { className: "menu-section-content" }, props.children));
};
return (React.createElement("div", { id: props.id, className: "menu-section" },
React.createElement("div", { className: "menu-section-title" },
React.createElement("i", { className: props.icon }),
React.createElement("span", { className: "menu-section-title-text" }, props.title)),
getContent()));
};
const QuickNav = () => {
const getItems = () => {
return [{
id: 1,
label: "Weather"
}, {
id: 2,
label: "Food"
}, {
id: 3,
label: "Apps"
}, {
id: 4,
label: "Movies"
}].map((item) => {
return (React.createElement("div", { key: item.id, className: "quick-nav-item clear-button" },
React.createElement("span", { className: "quick-nav-item-label" }, item.label)));
});
};
return (React.createElement(ScrollableComponent, { id: "quick-nav" }, getItems()));
};
const Weather = () => {
const getDays = () => {
return [{
id: 1,
name: "Mon",
temperature: N.rand(60, 80),
weather: WeatherType.Sunny
}, {
id: 2,
name: "Tues",
temperature: N.rand(60, 80),
weather: WeatherType.Sunny
}, {
id: 3,
name: "Wed",
temperature: N.rand(60, 80),
weather: WeatherType.Cloudy
}, {
id: 4,
name: "Thurs",
temperature: N.rand(60, 80),
weather: WeatherType.Rainy
}, {
id: 5,
name: "Fri",
temperature: N.rand(60, 80),
weather: WeatherType.Stormy
}, {
id: 6,
name: "Sat",
temperature: N.rand(60, 80),
weather: WeatherType.Sunny
}, {
id: 7,
name: "Sun",
temperature: N.rand(60, 80),
weather: WeatherType.Cloudy
}].map((day) => {
const getIcon = () => {
switch (day.weather) {
case WeatherType.Cloudy:
return "fa-duotone fa-clouds";
case WeatherType.Rainy:
return "fa-duotone fa-cloud-drizzle";
case WeatherType.Stormy:
return "fa-duotone fa-cloud-bolt";
case WeatherType.Sunny:
return "fa-duotone fa-sun";
}
};
return (React.createElement("div", { key: day.id, className: "day-card" },
React.createElement("div", { className: "day-card-content" },
React.createElement("span", { className: "day-weather-temperature" },
day.temperature,
React.createElement("span", { className: "day-weather-temperature-unit" }, "\u00B0F")),
React.createElement("i", { className: classNames("day-weather-icon", getIcon(), day.weather.toLowerCase()) }),
React.createElement("span", { className: "day-name" }, day.name))));
});
};
return (React.createElement(MenuSection, { icon: "fa-solid fa-sun", id: "weather-section", scrollable: true, title: "How's it look out there?" }, getDays()));
};
const Tools = () => {
const getTools = () => {
return [{
icon: "fa-solid fa-cloud-sun",
id: 1,
image: "https://images.unsplash.com/photo-1492011221367-f47e3ccd77a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fHdlYXRoZXJ8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
label: "Weather",
name: "Cloudly"
}, {
icon: "fa-solid fa-calculator-simple",
id: 2,
image: "https://images.unsplash.com/photo-1587145820266-a5951ee6f620?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Y2FsY3VsYXRvcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
label: "Calc",
name: "Mathio"
}, {
icon: "fa-solid fa-piggy-bank",
id: 3,
image: "https://images.unsplash.com/photo-1579621970588-a35d0e7ab9b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8YmFua3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
label: "Bank",
name: "Cashy"
}, {
icon: "fa-solid fa-plane",
id: 4,
image: "https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YWlycGxhbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
label: "Travel",
name: "Fly-er-io-ly"
}, {
icon: "fa-solid fa-gamepad-modern",
id: 5,
image: "https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dmlkZW8lMjBnYW1lc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
label: "Games",
name: "Gamey"
}, {
icon: "fa-solid fa-video",
id: 6,
image: "https://images.unsplash.com/photo-1578022761797-b8636ac1773c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHZpZGVvJTIwY2hhdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
label: "Video Chat",
name: "Chatty"
}].map((tool) => {
const styles = {
backgroundImage: `url(${tool.image})`
};
return (React.createElement("div", { key: tool.id, className: "tool-card" },
React.createElement("div", { className: "tool-card-background background-image", style: styles }),
React.createElement("div", { className: "tool-card-content" },
React.createElement("div", { className: "tool-card-content-header" },
React.createElement("span", { className: "tool-card-label" }, tool.label),
React.createElement("span", { className: "tool-card-name" }, tool.name)),
React.createElement("i", { className: classNames(tool.icon, "tool-card-icon") }))));
});
};
return (React.createElement(MenuSection, { icon: "fa-solid fa-toolbox", id: "tools-section", title: "What's Appening?" }, getTools()));
};
const Restaurants = () => {
const getRestaurants = () => {
return [{
desc: "The best burgers in town",
id: 1,
image: "https://images.unsplash.com/photo-1606131731446-5568d87113aa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YnVyZ2Vyc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
title: "Burgers"
}, {
desc: "The worst ice-cream around",
id: 2,
image: "https://images.unsplash.com/photo-1576506295286-5cda18df43e7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8aWNlJTIwY3JlYW18ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
title: "Ice Cream"
}, {
desc: "This 'Za be gettin down",
id: 3,
image: "https://images.unsplash.com/photo-1590947132387-155cc02f3212?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cGl6emF8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
title: "Pizza"
}, {
desc: "BBQ ain't need no rhyme",
id: 4,
image: "https://images.unsplash.com/photo-1529193591184-b1d58069ecdd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8YmFyYmVxdWV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
title: "BBQ"
}].map((restaurant) => {
const styles = {
backgroundImage: `url(${restaurant.image})`
};
return (React.createElement("div", { key: restaurant.id, className: "restaurant-card background-image", style: styles },
React.createElement("div", { className: "restaurant-card-content" },
React.createElement("div", { className: "restaurant-card-content-items" },
React.createElement("span", { className: "restaurant-card-title" }, restaurant.title),
React.createElement("span", { className: "restaurant-card-desc" }, restaurant.desc)))));
});
};
return (React.createElement(MenuSection, { icon: "fa-regular fa-pot-food", id: "restaurants-section", title: "Get it delivered!" }, getRestaurants()));
};
const Movies = () => {
const getMovies = () => {
return [{
desc: "A tale of some people watching over a large portion of space.",
id: 1,
icon: "fa-solid fa-galaxy",
image: "https://images.unsplash.com/photo-1596727147705-61a532a659bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFydmVsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
title: "Protectors of the Milky Way"
}, {
desc: "Some people leave their holes to disrupt some things.",
id: 2,
icon: "fa-solid fa-hat-wizard",
image: "https://images.unsplash.com/photo-1535666669445-e8c15cd2e7d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bG9yZCUyMG9mJTIwdGhlJTIwcmluZ3N8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
title: "Hole People"
}, {
desc: "A boy with a dent in his head tries to stop a bad guy. And by bad I mean bad at winning.",
id: 3,
icon: "fa-solid fa-broom-ball",
image: "https://images.unsplash.com/photo-1632266484284-a11d9e3a460a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGhhcnJ5JTIwcG90dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
title: "Pot of Hair"
}, {
desc: "A long drawn out story of some people fighting over some space. Cuz there isn't enough of it.",
id: 4,
icon: "fa-solid fa-starship-freighter",
image: "https://images.unsplash.com/photo-1533613220915-609f661a6fe1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c3RhciUyMHdhcnN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
title: "Area Fights"
}].map((movie) => {
const styles = {
backgroundImage: `url(${movie.image})`
};
const id = `movie-card-${movie.id}`;
return (React.createElement("div", { key: movie.id, id: id, className: "movie-card" },
React.createElement("div", { className: "movie-card-background background-image", style: styles }),
React.createElement("div", { className: "movie-card-content" },
React.createElement("div", { className: "movie-card-info" },
React.createElement("span", { className: "movie-card-title" }, movie.title),
React.createElement("span", { className: "movie-card-desc" }, movie.desc)),
React.createElement("i", { className: movie.icon }))));
});
};
return (React.createElement(MenuSection, { icon: "fa-solid fa-camera-movie", id: "movies-section", scrollable: true, title: "Popcorn time!" }, getMovies()));
};
const UserStatusButton = (props) => {
const { userStatus, setUserStatusTo } = React.useContext(AppContext);
const handleOnClick = () => {
setUserStatusTo(props.userStatus);
};
return (React.createElement("button", { id: props.id, className: "user-status-button clear-button", disabled: userStatus === props.userStatus, type: "button", onClick: handleOnClick },
React.createElement("i", { className: props.icon })));
};
const Menu = () => {
return (React.createElement("div", { id: "app-menu" },
React.createElement("div", { id: "app-menu-content-wrapper" },
React.createElement("div", { id: "app-menu-content" },
React.createElement("div", { id: "app-menu-content-header" },
React.createElement("div", { className: "app-menu-content-header-section" },
React.createElement(Info, { id: "app-menu-info" }),
React.createElement(Reminder, null)),
React.createElement("div", { className: "app-menu-content-header-section" },
React.createElement(UserStatusButton, { icon: "fa-solid fa-arrow-right-from-arc", id: "sign-out-button", userStatus: UserStatus.LoggedOut }))),
React.createElement(QuickNav, null),
React.createElement("a", { id: "youtube-link", className: "clear-button", href: "https://www.youtube.com/c/Hyperplexed", target: "_blank" },
React.createElement("i", { className: "fa-brands fa-youtube" }),
React.createElement("span", null, "Hyperplexed")),
React.createElement(Weather, null),
React.createElement(Restaurants, null),
React.createElement(Tools, null),
React.createElement(Movies, null)))));
};
const Background = () => {
const { userStatus, setUserStatusTo } = React.useContext(AppContext);
const handleOnClick = () => {
if (userStatus === UserStatus.LoggedOut) {
setUserStatusTo(UserStatus.LoggingIn);
}
};
return (React.createElement("div", { id: "app-background", onClick: handleOnClick },
React.createElement("div", { id: "app-background-image", className: "background-image" })));
};
const Loading = () => {
return (React.createElement("div", { id: "app-loading-icon" },
React.createElement("i", { className: "fa-solid fa-spinner-third" })));
};
const AppContext = React.createContext(null);
const App = () => {
const [userStatus, setUserStatusTo] = React.useState(UserStatus.LoggedOut);
const getStatusClass = () => {
return userStatus.replace(/\s+/g, "-").toLowerCase();
};
return (React.createElement(AppContext.Provider, { value: { userStatus, setUserStatusTo } },
React.createElement("div", { id: "app", className: getStatusClass() },
React.createElement(Info, { id: "app-info" }),
React.createElement(Pin, null),
React.createElement(Menu, null),
React.createElement(Background, null),
React.createElement("div", { id: "sign-in-button-wrapper" },
React.createElement(UserStatusButton, { icon: "fa-solid fa-arrow-right-to-arc", id: "sign-in-button", userStatus: UserStatus.LoggingIn })),
React.createElement(Loading, null))));
};
ReactDOM.render(React.createElement(App, null), document.getElementById("root"));部分运行截图：
需要源码文件可以后台私信我。