boot and login screen

Procfile

@@ -0,0 +1 @@
+web: npm start

public/index.html

@@ -20,8 +20,8 @@
   <div id="root"></div>
   <script type="text/javascript" src="dycalendar.js"></script>
   <script type="text/javascript" src="console.js"></script>
-  <div id="warningmsg">Even Microsoft couldn't make it far with windows on phone then how could I?</div>
-  <button id="probtn" onclick="removeWarning()">Proceed anyway</button>
+  <!-- <div id="warningmsg">Even Microsoft couldn't make it far with windows on phone then how could I?</div> -->
+  <!-- <button id="probtn" onclick="removeWarning()">Proceed anyway</button> -->
 </body>
 
 </html>

public/style.css

@@ -84,114 +84,3 @@ h5 {
     width: 800px;
   }
 }
-
-/* Loader css */
-#loader {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background: #000000;
-  z-index: 99999999999999;
-  display: grid;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-}
-
-.circledots {
-  position: relative;
-  top: 0;
-  left: 0;
-  transform: scale(.9);
-  width: 50px;
-  height: 50px;
-  margin: auto;
-}
-
-.circledots .circle {
-  position: absolute;
-  width: 38px;
-  height: 38px;
-  opacity: 0;
-  border-radius: 100px;
-  transform: rotate(225deg);
-  animation-iteration-count: infinite;
-  animation-name: orbit;
-  animation-duration: 5.5s;
-}
-
-.circledots .circle:after {
-  content: '';
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  clip-path: circle(100%);
-  border-radius: 100px;
-  background: #fff;
-}
-
-.circledots .circle:nth-child(2) {
-  animation-delay: 240ms;
-}
-
-.circledots .circle:nth-child(3) {
-  animation-delay: 480ms;
-}
-
-.circledots .circle:nth-child(4) {
-  animation-delay: 720ms;
-}
-
-.circledots .circle:nth-child(5) {
-  animation-delay: 960ms;
-}
-
-@keyframes orbit {
-  0% {
-    transform: rotate(225deg);
-    opacity: 1;
-    animation-timing-function: ease-out;
-  }
-
-  7% {
-    transform: rotate(345deg);
-    animation-timing-function: linear;
-  }
-
-  30% {
-    transform: rotate(455deg);
-    animation-timing-function: ease-in-out;
-  }
-
-  39% {
-    transform: rotate(690deg);
-    animation-timing-function: linear;
-  }
-
-  70% {
-    transform: rotate(815deg);
-    opacity: 1;
-    animation-timing-function: ease-out;
-  }
-
-  75% {
-    transform: rotate(945deg);
-    animation-timing-function: ease-out;
-  }
-
-  76% {
-    transform: rotate(945deg);
-    opacity: 0;
-  }
-
-  100% {
-    transform: rotate(945deg);
-    opacity: 0;
-  }
-}
-
-#loads {
-  fill: #0178D4 !important;
-}

src/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import {
   useSelector,
   useDispatch
@@ -8,7 +8,8 @@ import './short.css';
 
 import {
   Background,
-  BootScreen
+  BootScreen,
+  LockScreen
 } from './containers/background';
 import Taskbar from './components/taskbar';
 import ActMenu from './components/menu';
@@ -24,6 +25,8 @@ import * as Applications from './containers/applications';
 
 function App() {
   const apps = useSelector(state => state.apps);
+  const wall = useSelector(state => state.wallpaper);
+  const [booted, setBoot] = useState(false);
   const dispatch = useDispatch();
 
   const afterMath = (event) => {
@@ -75,13 +78,14 @@ function App() {
   });
 
   window.addEventListener("load", e => {
-    // document.querySelector('#loader').remove();
+    setBoot(true);
   });
 
   return (
     <div className="App">
-      {/* <BootScreen/> */}
-      <div className="">
+      {!booted?<BootScreen/>:null}
+      {wall.locked?<LockScreen/>:null}
+      <div className="appwrap">
         <Background/>
         <div className="desktop" data-menu="desk">
           <DesktopApp/>

src/components/start/startmenu.scss

@@ -45,6 +45,7 @@
   &[data-align="left"] {
     left: 8px;
   }
+
   background: rgba(255, 255, 255, 0.88);
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);

src/containers/background/back.css

@@ -1,20 +0,0 @@
-.background{
-  min-width: 100vw;
-  min-height: 100vh;
-  background-color: #fefefe;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-
-.bootscreen{
-  position: absolute;
-  top: 0;
-  left: 0;
-  min-width: 100vw;
-  min-height: 100vh;
-  background-color: #010001;
-  z-index: 20000;
-  display: grid;
-  place-items: center;
-}

src/containers/background/back.scss

@@ -0,0 +1,237 @@
+.appwrap {
+  position: relative;
+  z-index: 0;
+}
+
+.background {
+  min-width: 100vw;
+  min-height: 100vh;
+  background-color: #fefefe;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.bootscreen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 100vw;
+  min-height: 100vh;
+  background-color: #010001;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+}
+/* Loader css */
+
+#loader {
+  position: relative;
+  top: 0;
+  left: 0;
+  /* height: 100%; */
+  /* width: 100%; */
+  display: grid;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+
+.circledots {
+  position: relative;
+  top: 0;
+  left: 0;
+  transform: rotate(-45deg);
+  width: 50px;
+  height: 50px;
+}
+
+.circledots .circle {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  opacity: 0;
+  border-radius: 100px;
+  transform: rotate(225deg);
+  animation-iteration-count: infinite;
+  animation-name: orbit;
+  animation-duration: 5.5s;
+}
+
+.circledots .circle:after {
+  content: '';
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  clip-path: circle(100%);
+  border-radius: 100px;
+  background: #aaa;
+}
+
+.circledots .circle:nth-child(2) {
+  animation-delay: 240ms;
+}
+
+.circledots .circle:nth-child(3) {
+  animation-delay: 480ms;
+}
+
+.circledots .circle:nth-child(4) {
+  animation-delay: 720ms;
+}
+
+.circledots .circle:nth-child(5) {
+  animation-delay: 960ms;
+}
+@keyframes orbit {
+  0% {
+    transform: rotate(225deg);
+    opacity: 1;
+    animation-timing-function: ease-out;
+  }
+
+  7% {
+    transform: rotate(345deg);
+    animation-timing-function: linear;
+  }
+
+  30% {
+    transform: rotate(455deg);
+    animation-timing-function: ease-in-out;
+  }
+
+  39% {
+    transform: rotate(690deg);
+    animation-timing-function: linear;
+  }
+
+  70% {
+    transform: rotate(815deg);
+    opacity: 1;
+    animation-timing-function: ease-out;
+  }
+
+  75% {
+    transform: rotate(945deg);
+    animation-timing-function: ease-out;
+  }
+
+  76% {
+    transform: rotate(945deg);
+    opacity: 0;
+  }
+
+  100% {
+    transform: rotate(945deg);
+    opacity: 0;
+  }
+}
+
+.lockscreen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 100vw;
+  min-height: 100vh;
+  z-index: 1;
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: all 1s ease-in-out;
+
+  &[data-unlock="true"]{
+    opacity: 0;
+  }
+
+  &::after {
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+    transition: all 200ms ease-in-out;
+  }
+
+  &[data-blur="true"]::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    -webkit-backdrop-filter: blur(25px);
+    backdrop-filter: blur(25px);
+    background: rgba(0, 0, 0, 0.1);
+  }
+}
+
+.bottomInfo {
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+}
+
+.splashScreen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transform: translateY(0);
+  transition: all 200ms ease-in-out;
+
+  &[data-faded="true"] {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-200px);
+  }
+}
+
+.fadeinScreen {
+  position: absolute;
+  top: 25%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  opacity: 0;
+  transform: translateY(60px);
+  transition: all 400ms ease-in-out;
+  pointer-events: none;
+
+  &[data-faded="false"] {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0px);
+  }
+
+  &[data-unlock="true"]{
+    opacity: 0;
+  }
+
+  input {
+    width: 200px;
+    background: rgba(28, 28, 40, 0.6);
+    font-size: 12px;
+    padding: 8px 12px;
+    font-weight: 500;
+    color: #cfcfcf;
+    border: 1px solid rgba(117, 117, 164, 0.6);
+
+    &::-webkit-input-placeholder {
+      font-weight: 400;
+      color: rgba(207, 207, 207, 0.6);
+    }
+  }
+}
+
+.lockOpt{
+  margin-top: 10px;
+
+  .uicon{
+    margin: 0 4px;
+    cursor: pointer;
+
+    &[data-payload="true"]{
+      box-sizing: border-box;
+      border: 1px solid #888;
+    }
+  }
+}

src/containers/background/index.js

@@ -1,28 +1,127 @@
-import React from 'react';
-import {useSelector, useDispatch} from 'react-redux';
-import {Icon, Image} from '../../utils/general';
+import React, {useState, useEffect} from 'react';
+import {
+  useSelector,
+  useDispatch
+} from 'react-redux';
+import {
+  Icon,
+  Image
+} from '../../utils/general';
 
-import './back.css';
+import './back.scss';
 
-export const Background = ()=>{
-  const wallpaper = useSelector(state => state.wallpaper);
+export const Background = () => {
+  const wall = useSelector(state => state.wallpaper);
   const dispatch = useDispatch();
 
   return (
     <div className="background" style={{
-      backgroundImage: `url(${`/img/wallpaper/${wallpaper.theme}/${wallpaper.src}`})`
+      backgroundImage: `url(${`/img/wallpaper/${wall.theme}/${wall.src}`})`
     }}>
     </div>
   );
 }
 
-export const BootScreen = ()=>{
-  const wallpaper = useSelector(state => state.wallpaper);
+export const BootScreen = () => {
   const dispatch = useDispatch();
 
   return (
     <div className="bootscreen">
-      <Image src="asset/bootlogo" w={160}/>
+      <div>
+        <Image src="asset/bootlogo" w={180}/>
+        <div className="mt-48" id="loader">
+          <div class="circledots">
+            <div class='circle'></div>
+            <div class='circle'></div>
+            <div class='circle'></div>
+            <div class='circle'></div>
+            <div class='circle'></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const LockScreen = () => {
+  const wall = useSelector(state => state.wallpaper);
+  const [lock, setLock] = useState(false);
+  const [unlocked, setUnLock] = useState(false);
+  const [password, setPass] = useState("");
+  const [passType, setType] = useState(1);
+  const [forgot, setForget] = useState(false);
+  const dispatch = useDispatch();
+
+  const action = (e)=>{
+    var act = e.target.dataset.action,
+        payload = e.target.dataset.payload;
+
+    if(act=="splash") setLock(true);
+    else if (act=="inpass"){
+      var val = e.target.value
+      if(!passType){
+        val = val.substring(0,4)
+        val = !Number(val)?"":val
+      }
+      setPass(val)
+    }else if (act=="forgot") setForget(true);
+    else if (act=="pinlock") setType(0);
+    else if (act=="passkey") setType(1);
+
+    if (act=="pinlock" || act=="passkey") setPass("");
+  }
+
+  const proceed = ()=>{
+    setUnLock(true);
+    setTimeout(()=>{
+      dispatch({type: "WALLUNLOCK"})
+    },1000)
+  }
+
+  return (
+    <div className="lockscreen" data-unlock={unlocked} style={{
+        backgroundImage: `url(${`/img/wallpaper/lock.jpg`})`
+      }} onClick={action} data-action="splash" data-blur={lock}>
+      <div className="splashScreen mt-40" data-faded={lock}>
+        <div className="text-6xl font-semibold text-gray-100">
+          {new Date().toLocaleTimeString("en-US",{
+            hour: 'numeric', minute: 'numeric', hour12: true
+          })}
+        </div>
+        <div className="text-lg font-medium text-gray-200">
+          {new Date().toLocaleDateString("en-US",{
+            weekday: "long", month:"long",day: "numeric"
+          })}
+        </div>
+      </div>
+      <div className="fadeinScreen" data-faded={!lock} data-unlock={unlocked}>
+        <Image className="rounded-full overflow-hidden"
+          src="/img/asset/prof.jpg" w={160} ext/>
+        <div className="mt-2 text-xl font-medium text-gray-200">Blue Edge</div>
+        <div className="flex items-center mt-6">
+          <input type={passType?"text":"password"} value={password} onChange={action}
+            data-action="inpass" placeholder={passType?"Password":"PIN"}/>
+          <Icon className="-ml-6 handcr" fafa="faArrowRight" width={14}
+            color="rgba(170, 170, 170, 0.6)" onClick={proceed}/>
+        </div>
+        <div className="text-xs text-gray-400 mt-4 handcr"
+          onClick={action} data-action="forgot">
+          {!forgot?`I forgot my ${passType?"password":"pin"}`:"Not my problem"}
+        </div>
+        <div className="text-xs text-gray-400 mt-6">
+          Sign-in options
+        </div>
+        <div className="lockOpt flex">
+          <Icon src="pinlock" onClick={action} ui width={36}
+            click="pinlock" payload={passType==0}/>
+          <Icon src="passkey" onClick={action} ui width={36}
+            click="passkey" payload={passType==1}/>
+        </div>
+      </div>
+      <div className="bottomInfo flex">
+        <Icon className="mx-2" src="wifi" ui width={14} invert/>
+        <Icon className="mx-2" src="battery" ui width={16} invert/>
+      </div>
     </div>
   );
 }

src/reducers/wallpaper.js

@@ -1,10 +1,13 @@
 const defState = {
   theme: "default",
-  src: "img0.jpg"
+  src: "img0.jpg",
+  locked: true
 }
 
 const wallReducer = (state=defState, action)=>{
   switch(action.type){
+    case 'WALLUNLOCK':
+      return {...state, locked: false};
     default:
       return state
   }