merged improvements by @Tronic247

2026-01-08 21:48:01 -05:00 · 2021-08-30 03:00:13 +05:30
parent 0cf7ad9f2d
commit 37ada59be2
27 changed files with 318 additions and 171 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -12,19 +12,19 @@ jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
-    
+
    steps:
    - name: Checkout code
      uses: actions/checkout@v2
-    
+
    - name: Install Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '16.6.1'
-    
+
    - name: Install NPM packages
      run: npm ci
-    
+
    - name: Build project
      run: CI=false npm run build

@@ -33,13 +33,13 @@ jobs:
      with:
        name: production-files
        path: ./build
-  
+
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/master'
-    
+
    steps:
    - name: Download artifact
      uses: actions/download-artifact@v2
--- a/.github/workflows/windows.yml
+++ b/.github/workflows/windows.yml
@@ -12,19 +12,19 @@ jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
-    
+
    steps:
    - name: Checkout code
      uses: actions/checkout@v2
-    
+
    - name: Install Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '16.6.1'
-    
+
    - name: Install NPM packages
      run: npm ci
-    
+
    - name: Build project
      run: CI=false npm run build

@@ -33,48 +33,47 @@ jobs:
      with:
        name: production-files
        path: ./build
-  
+
  deploy:
    name: electron
    needs: build
    runs-on: windows-latest
-    
+
    steps:
    - name: Checkout code
      uses: actions/checkout@v2
      with:
        repository: win11bot/electron
        path: ./build
-     
+
    - name: Install Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '16.6.1'
-        
+
    - name: Download artifact
      uses: actions/download-artifact@v2
      with:
        name: production-files
        path: ./build/public
-        
+
    - name: Install NPM packages
      run: cd ./build && npm i && npm install -g electron-packager
-      
+
    - name: Build
      run: cd ./build && npm run electron-packager D:\a\windows11\windows11\build --platform=win32 --arch=x64
-      
-    - uses: actions/upload-artifact@v2 
+
+    - uses: actions/upload-artifact@v2
      with:
        name: win11-build
        path: ./build/win11-win32-x64
-     
+
    - uses: papeloto/action-zip@v1
      with:
        files: ./build
        dest: source.zip
-        
-    - uses: actions/upload-artifact@v2 
+
+    - uses: actions/upload-artifact@v2
      with:
        name: win11-source
        path: source.zip     
-      
--- a/.gitignore
+++ b/.gitignore
@@ -13,7 +13,7 @@ todo*
 # production
 /build
 *.py
-rough.*
+rough*

 # misc
 .DS_Store
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/img/asset/aliyss.png
+++ b/public/img/asset/aliyss.png
--- a/public/img/asset/bootlogo.png
+++ b/public/img/asset/bootlogo.png
--- a/public/img/asset/lucina.png
+++ b/public/img/asset/lucina.png
--- a/public/index.html
+++ b/public/index.html
@@ -4,14 +4,14 @@
 <head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Windows 11 made in React" />
  <meta name="og:description" content="Windows 11 made in React." />
  <meta name="og:color" content="#303030" />
-  <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
-  <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
-  <title>Win 11 in React</title>
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <title>Windows 11 in React</title>
  <link rel="stylesheet" href="dycalendar.css">
 </head>

--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Windows 11",
+  "name": "Windows 11 in React",
  "icons": [
    {
      "src": "favicon.ico",
@@ -8,14 +8,9 @@
      "type": "image/x-icon"
    },
    {
-      "src": "logo192.png",
+      "src": "favicon.png",
      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "sizes": "174x174"
    }
  ],
  "start_url": ".",
--- a/public/style.css
+++ b/public/style.css
@@ -84,3 +84,114 @@ 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;
+}
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,15 @@
 import React from 'react';
-import {useSelector, useDispatch} from 'react-redux';
+import {
+  useSelector,
+  useDispatch
+} from 'react-redux';
 import './index.css';
 import './short.css';

-import Background from './containers/background';
+import {
+  Background,
+  BootScreen
+} from './containers/background';
 import Taskbar from './components/taskbar';
 import ActMenu from './components/menu';
 import {
@@ -20,25 +26,27 @@ function App() {
  const apps = useSelector(state => state.apps);
  const dispatch = useDispatch();

-  const afterMath = (event)=>{
+  const afterMath = (event) => {
    var ess = [
-      ["START","STARTHID"],
-      ["PANE","PANEHIDE"],
-      ["WIDG","WIDGHIDE"],
-      ["CALN","CALNHIDE"],
-      ["MENU","MENUHIDE"]
+      ["START", "STARTHID"],
+      ["PANE", "PANEHIDE"],
+      ["WIDG", "WIDGHIDE"],
+      ["CALN", "CALNHIDE"],
+      ["MENU", "MENUHIDE"]
    ];

    var actionType = "";
-    try{
+    try {
      actionType = event.target.dataset.action || "";
-    }catch(err){}
+    } catch (err) {}

    var actionType0 = getComputedStyle(event.target).getPropertyValue('--prefix');

    ess.forEach((item, i) => {
-      if(!actionType.startsWith(item[0]) && !actionType0.startsWith(item[0])){
-        dispatch({type: item[1]});
+      if (!actionType.startsWith(item[0]) && !actionType0.startsWith(item[0])) {
+        dispatch({
+          type: item[1]
+        });
      }
    });
  }
@@ -52,9 +60,12 @@ function App() {
      left: e.clientX
    };

-    if(e.target.dataset.menu!=null){
+    if (e.target.dataset.menu != null) {
      data.menu = e.target.dataset.menu;
-      dispatch({ type: 'MENUSHOW', payload: data});
+      dispatch({
+        type: 'MENUSHOW',
+        payload: data
+      });
    }

  });
@@ -63,22 +74,29 @@ function App() {
    afterMath(e);
  });

+  window.addEventListener("load", e => {
+    // document.querySelector('#loader').remove();
+  });
+
  return (
    <div className="App">
-      <Background/>
-      <div className="desktop" data-menu="desk">
-        <DesktopApp/>
-        {Object.keys(Applications).map((key,idx)=>{
-          var WinApp = Applications[key];
-          return <WinApp/>;
-        })}
-        <StartMenu/>
-        <SidePane/>
-        <WidPane/>
-        <CalnWid/>
+      {/* <BootScreen/> */}
+      <div className="">
+        <Background/>
+        <div className="desktop" data-menu="desk">
+          <DesktopApp/>
+          {Object.keys(Applications).map((key,idx)=>{
+            var WinApp = Applications[key];
+            return <WinApp/>;
+          })}
+          <StartMenu/>
+          <SidePane/>
+          <WidPane/>
+          <CalnWid/>
+        </div>
+        <Taskbar/>
+        <ActMenu/>
      </div>
-      <Taskbar/>
-      <ActMenu/>
    </div>
  );
 }
--- a/src/components/menu/menu.scss
+++ b/src/components/menu/menu.scss
@@ -52,6 +52,7 @@
  &[data-dsb="true"]{
    color: #aaa;
    font-weight: 400;
+    pointer-events: none;
  }

  .uicon{
--- a/src/components/start/index.js
+++ b/src/components/start/index.js
@@ -447,7 +447,7 @@ export const WidPane = () => {

  return (
    <div className="widPaneCont" data-hide={widget.hide} style={{'--prefix':'WIDG'}}>
-      <div className="WidPane" loading="lazy">
+      <div className="WidPane thinScroll" loading="lazy">
        <div className="widtop">
          <Icon fafa="faEllipsisH" width={12}/>
        </div>
--- a/src/components/start/searchpane.scss
+++ b/src/components/start/searchpane.scss
@@ -1,10 +1,10 @@
-.searchMenu{
+.searchMenu {
  min-height: 500px;
  padding: 12px;
  text-align: left;
 }

-.searchBar{
+.searchBar {
  height: 30px;
  border: solid 2px #0e60e4;
  border-radius: 6px;
@@ -12,35 +12,35 @@
  display: flex;
  padding: 0 10px;

-  .uicon{
+  .uicon {
    filter: brightness(0.6);
    margin-right: 12px;
  }

-  input{
+  input {
    width: 400px;
    color: #222;
  }
 }

-.opts div{
+.opts div {
  border: solid 0 #1f4aff;
  cursor: pointer;

-  &[value="true"]{
+  &[value="true"] {
    border-bottom-width: 2px;
  }
 }

-.leftSide{
+.leftSide {
  width: 100%;
 }

-.leftSide[data-width="true"]{
+.leftSide[data-width="true"] {
  width: 32%;
 }

-.rightSide{
+.rightSide {
  margin: 8px;
  height: 400px;
  background: #fafafa;
@@ -48,7 +48,7 @@
  flex-direction: column;
  align-items: center;

-  .hline{
+  .hline {
    width: 90%;
    height: 1px;
    border-radius: 10px;
@@ -56,7 +56,7 @@
  }
 }

-.topApp{
+.topApp {
  width: 19%;
  display: flex;
  flex-direction: column;
@@ -64,20 +64,20 @@
  border-radius: 4px;
 }

-.qksrch{
+.qksrch {
  color: #111;
 }

-.qksrch svg{
+.qksrch svg {
  color: #333;
 }

-.calnpane{
+.calnpane {
  position: absolute;
  bottom: 12px;
  right: 12px;
  // width: 280px;
-  min-height: 300px;
+  // min-height: 300px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
--- a/src/components/start/sidepane.scss
+++ b/src/components/start/sidepane.scss
@@ -11,9 +11,10 @@
  overflow: hidden;
  transition: all ease-in-out 200ms;
  z-index: 9999;
+  transform: translateX(0);

  &[data-hide="true"] {
-    right: -330px;
+    transform: translateX(330px);
  }
 }

@@ -55,6 +56,7 @@
  background: rgba(255, 255, 255, 0.9);
  border: solid 0.1px rgba(17, 17, 17, 0.1);
  transition: all 0.1s ease;
+
  &[data-state="true"] {
    background: rgb(0, 90, 255);

@@ -89,13 +91,17 @@
  left: 0;
  width: 610px;
  height: 100%;
-  padding: 5px;
+  margin: 6px;
  overflow: hidden;
-  transition: all ease-in-out 200ms;
+  transform: translateX(0);
+  -webkit-backdrop-filter: blur(40px);
+  backdrop-filter: blur(40px);
+  transition: all 0.3s cubic-bezier(.77,0,.18,1);
  z-index: 9999;

  &[data-hide="true"] {
-    left: -620px;
+    transform: translateX(-110%);
+    transition: all 0.6s cubic-bezier(.77,0,.18,1);
  }
 }

@@ -103,32 +109,13 @@
  width: 100%;
  border-radius: 8px;
  height: calc(100% - 12px);
-  backdrop-filter: blur(40px);
-  -webkit-backdrop-filter: blur(40px);
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
-
  overflow-x: hidden;
  overflow-y: scroll;

-  &::-webkit-scrollbar {
-    width: 1.6px;
-    background-color: transparent;
-  }
-
-  &:hover::-webkit-scrollbar-thumb{
-    background: rgba(0, 0, 0, 0.4);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    width: 1.6px;
-    box-sizing: border-box;
-    border-radius: 10px;
-    background-color: transparent;
-  }
-
  .widtop {
    width: 96%;
    display: flex;
@@ -161,9 +148,9 @@
      border-radius: 6px;
      box-sizing: border-box;
      background: rgb(255,255,255);
-      background: -webkit-linear-gradient(top left, rgba(255,255,255,0.9951330874146533) 0%, rgba(255,243,190,1) 80%);
-      background: -o-linear-gradient(top left, rgba(255,255,255,0.9951330874146533) 0%, rgba(255,243,190,1) 80%);
-      background: linear-gradient(to bottom right, rgba(255,255,255,0.9951330874146533) 0%, rgba(255,243,190,1) 80%);
+      background: -webkit-linear-gradient(top left, #fefefe 0%, #fff3be 80%);
+      background: -o-linear-gradient(top left, #fefefe 0%, #fff3be 80%);
+      background: linear-gradient(to bottom right, #fefefe 0%, #fff3be 80%);
      display: flex;
      flex-direction: column;
      align-items: center;
@@ -350,7 +337,7 @@
        background-position: center;
        z-index: 1;

-        &::after{
+        &::after {
          content: "";
          position: absolute;
          top: 0;
@@ -365,14 +352,13 @@
          z-index: -1;
        }

-        &::before{
+        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
-
          backdrop-filter: brightness(0.8);
          -webkit-backdrop-filter: brightness(0.8);
          filter: blur(10px);
@@ -389,7 +375,7 @@
          }
        }

-        .infotextCont{
+        .infotextCont {
          position: absolute;
          bottom: 6px;
          padding-right: 10px;
@@ -411,7 +397,7 @@
          text-align: justify;
        }

-        a{
+        a {
          text-decoration: none;
          font-size: 0.64em;
          color: #c1e2ff;
@@ -441,7 +427,7 @@
  background: -o-linear-gradient(top left, rgba(230, 230, 230, 1) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(to bottom right, rgba(230, 230, 230, 1) 0%, rgba(255,255,255,1) 100%);

-  &::after{
+  &::after {
    content: "source: saurav.tech/NewsAPI";
    position: absolute;
    bottom: 0;
--- a/src/components/start/startmenu.scss
+++ b/src/components/start/startmenu.scss
@@ -1,5 +1,5 @@
 .desktopCont {
-  width: fit-content;
+  width: 0;
  height: 100%;
  display: grid;
  grid-auto-flow: column;
@@ -35,17 +35,16 @@
  left: 0;
  // left: calc(50% - 260px);
  // height: 200px;
-  &[data-align="center"]{
+  &[data-align="center"] {
    margin-left: auto;
    margin-right: auto;
    right: 0;
    text-align: center;
  }

-  &[data-align="left"]{
+  &[data-align="left"] {
    left: 8px;
  }
-
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
@@ -165,7 +164,7 @@
    margin: 10px 0;
    position: relative;

-    &[value="true"] .pnIcon::before{
+    &[value="true"] .pnIcon::before {
      content: "";
      position: absolute;
      top: -2px;
--- a/src/containers/applications/apps/assets/index.js
+++ b/src/containers/applications/apps/assets/index.js
@@ -1,20 +1,8 @@
 import React from 'react';

 export const Mark = (props) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={76}
-      height={95}
-      viewBox="0 0 760 950"
-      {...props}>
-      <path
-        d="M120 881c0-155 96-575 144-630 7-9 25-48 40-88 31-82 50-104 71-82 14 15 81 162 120 264 51 136 105 412 105 542v63h-30c-30 0-30-1-30-55v-55H180v55c0 54 0 55-30 55h-30v-69zm343-98l107-6v-44c0-84-95-447-122-464-15-10-148-12-172-3-27 10-114 328-123 452l-6 72h105c58 0 153-3 211-7zm-89-588c-4-8-10-15-15-15s-9 7-9 15 7 15 15 15c9 0 12-6 9-15z"
-        fill="#020202"
-      />
-      <path
-        fill={props.color || "#111"}
-        d="M150 880v-70h420v140H150v-70zM305 213c10-42 47-123 55-123 9 0 60 112 60 134 0 13-11 16-61 16h-61l7-27z" />
-    </svg>
-  );
+  return (<svg xmlns="https://www.w3.org/2000/svg" width={76} height={95} viewBox="0 0 760 950" {...props}>
+    <path d="M120 881c0-155 96-575 144-630 7-9 25-48 40-88 31-82 50-104 71-82 14 15 81 162 120 264 51 136 105 412 105 542v63h-30c-30 0-30-1-30-55v-55H180v55c0 54 0 55-30 55h-30v-69zm343-98l107-6v-44c0-84-95-447-122-464-15-10-148-12-172-3-27 10-114 328-123 452l-6 72h105c58 0 153-3 211-7zm-89-588c-4-8-10-15-15-15s-9 7-9 15 7 15 15 15c9 0 12-6 9-15z" fill="#020202"/>
+    <path fill={props.color || "#111"} d="M150 880v-70h420v140H150v-70zM305 213c10-42 47-123 55-123 9 0 60 112 60 134 0 13-11 16-61 16h-61l7-27z"/>
+  </svg>);
 }
--- a/src/containers/applications/apps/discord.js
+++ b/src/containers/applications/apps/discord.js
@@ -9,6 +9,21 @@ export const DScord = ()=>{
  const wnapp = useSelector(state => state.apps.discord);
  const [url, setUrl] = useState(null);
  const dispatch = useDispatch();
+  const servers = [
+    {
+      src: "arrtective.png",
+      link: "https://discord.io/arttective"
+    },{
+      src: "mimi.png",
+      link: "https://discord.gg/AGSCfjgDMc"
+    },{
+      src: "narjiday.png",
+      link: "https://discord.gg/K9wcgZJfXS"
+    },{
+      src: "aliyss.png",
+      link: "https://discord.gg/zAypMTH"
+    }
+  ]

  useEffect(()=>{
    if(url==null){
@@ -34,14 +49,10 @@ export const DScord = ()=>{
              <hr/>
              <Icon className="wnServer svIcon" src="./img/asset/server.gif" click="EXTERNAL"
                    payload="https://discord.gg/qmEZwUhb4b" ext width={48}/>
-              <Icon className="svIcon" src="./img/asset/arrtective.png" click="EXTERNAL"
-                    payload="https://discord.io/arttective" ext width={48}/>
-              <Icon className="svIcon" src="./img/asset/mimi.png" click="EXTERNAL"
-                    payload="https://discord.gg/AGSCfjgDMc" ext width={48}/>
-              <Icon className="svIcon" src="./img/asset/narjiday.png" click="EXTERNAL"
-                    payload="https://discord.gg/K9wcgZJfXS" ext width={48}/>
-              <Icon className="svIcon" src="./img/asset/lucina.png" click="EXTERNAL"
-                    payload="https://discord.gg/zAypMTH" ext width={48}/>
+              {servers.map(server=>(
+                <Icon className="svIcon" src={"./img/asset/"+server.src}
+                  click="EXTERNAL" payload={server.link} ext width={48}/>
+              ))}
            </div>
          </div>
          <div className="flex-grow overflow-hidden">
--- a/src/containers/applications/apps/spotify.js
+++ b/src/containers/applications/apps/spotify.js
@@ -357,7 +357,8 @@ const Search = ({sid, paused, action,action2})=>{
  const [recentSearches, setRecent] = useState([
    "Perfect",
    "Agar tum sath ho",
-    "One Republic"
+    "One Republic",
+    "Cheap thrills"
  ]);

  const handleQuery = (e)=>{
@@ -394,7 +395,7 @@ const Search = ({sid, paused, action,action2})=>{
      <div className="absolute w-full flex top-0 -mt-8">
        <div className="flex bg-gray-100 px-4 w-max rounded-full overflow-hidden">
          <input className="w-64 ml-2 bg-transparent py-3 rounded-full text-base"
-            value={query} defaultValue={query} type="text" placeholder="Artist, song or album"
+            value={query} type="text" placeholder="Artist, song or album"
            onChange={handleQuery}/>
          <Icon className="handcr" icon="search" onClick={searchSpotify}/>
        </div>
--- a/src/containers/applications/apps/terminal.js
+++ b/src/containers/applications/apps/terminal.js
@@ -275,7 +275,7 @@ export const WnTerminal = ()=>{
              <div className="cmdLine actmd">
                {pwd}>
                <div className="ipcmd" id="curcmd" contentEditable
-                  data-action="enter" onKeyDown={action}></div>
+                  data-action="enter" onKeyDown={action} spellCheck="false"></div>
                {/* <input id="curcmd" className="ipcmd" type="text" defaultValue="tyler"/> */}
              </div>
            </div>
--- a/src/containers/applications/tabs.scss
+++ b/src/containers/applications/tabs.scss
@@ -185,9 +185,9 @@
    position: absolute;
    bottom: 0;
    background: rgb(255,255,255);
-    background: -webkit-linear-gradient(bottom, rgba(244, 244, 244, 1) 10%, rgba(135, 135, 135, 0.4) 50%, rgba(0,0,0,0) 100%);
-    background: -o-linear-gradient(bottom, rgba(244, 244, 244, 1) 10%, rgba(135, 135, 135, 0.4) 50%, rgba(0,0,0,0) 100%);
-    background: linear-gradient(to top, rgba(244, 244, 244, 1) 10%, rgba(135, 135, 135, 0.4) 50%, rgba(0,0,0,0) 100%);
+    background: -webkit-linear-gradient(bottom, #f4f4f4 10%, rgba(135, 135, 135, 0.4) 50%, rgba(0,0,0,0) 100%);
+    background: -o-linear-gradient(bottom, #f4f4f4 10%, rgba(135, 135, 135, 0.4) 50%, rgba(0,0,0,0) 100%);
+    background: linear-gradient(to top, #f4f4f4 10%, rgba(135, 135, 135, 0.4) 50%, rgba(0,0,0,0) 100%);
  }
 }

@@ -245,23 +245,23 @@

 .amzApps {
  background: #670cd7;
-  background: -webkit-linear-gradient(48deg, rgba(82, 47, 139, 1) 0%, rgba(113, 35, 133, 1) 100%);
-  background: -o-linear-gradient(48deg, rgba(82, 47, 139, 1) 0%, rgba(113, 35, 133, 1) 100%);
-  background: linear-gradient(138deg, rgba(82, 47, 139, 1) 0%, rgba(113, 35, 133, 1) 100%);
+  background: -webkit-linear-gradient(48deg, #522f8b 0%, rgba(113, 35, 133, 1) 100%);
+  background: -o-linear-gradient(48deg, #522f8b 0%, rgba(113, 35, 133, 1) 100%);
+  background: linear-gradient(138deg, #522f8b 0%, rgba(113, 35, 133, 1) 100%);
 }

 .amzGames {
  background: #214458;
-  background: -webkit-linear-gradient(47deg, rgba(33,68,88,1) 0%, rgba(9,134,146,1) 100%);
-  background: -o-linear-gradient(47deg, rgba(33,68,88,1) 0%, rgba(9,134,146,1) 100%);
-  background: linear-gradient(137deg, rgba(33,68,88,1) 0%, rgba(9,134,146,1) 100%);
+  background: -webkit-linear-gradient(47deg, #214458 0%, #098793 100%);
+  background: -o-linear-gradient(47deg, #214458 0%, #098793 100%);
+  background: linear-gradient(137deg, #214458 0%, #098793 100%);
 }

 .amzMovies {
  background: #217558;
-  background: -webkit-linear-gradient(47deg, rgba(33,117,88,1) 0%, rgba(15,163,69,1) 100%);
-  background: -o-linear-gradient(47deg, rgba(33,117,88,1) 0%, rgba(15,163,69,1) 100%);
-  background: linear-gradient(137deg, rgba(33,117,88,1) 0%, rgba(15,163,69,1) 100%);
+  background: -webkit-linear-gradient(47deg, #217558 0%, #0fa345 100%);
+  background: -o-linear-gradient(47deg, #217558 0%, #0fa345 100%);
+  background: linear-gradient(137deg, #217558 0%, #0fa345 100%);
 }

 .ribcont {
@@ -293,9 +293,9 @@
 .cmdLine {
  font-size: 0.84em;
  color: rgba(255, 255, 255, 0.72);
-  font-family: monospace, sans-serif;
+  font-family: "consolas", monospace;
  height: 1.2em;
-  font-weight: lighter;
+  font-weight: 400;
  overflow: hidden;
  max-width: 100%;
 }
--- a/src/containers/applications/wnapp.css
+++ b/src/containers/applications/wnapp.css
@@ -1,5 +1,5 @@
 /*
-      www.OnlineWebFonts.Com 
+      www.OnlineWebFonts.Com
 */
@font-face {font-family: "Spotify";
    src: url("https://db.onlinewebfonts.com/t/1ccdd11fd9d1d81756c40d7acb17d0aa.eot"); /* IE9*/
--- a/src/containers/background/back.css
+++ b/src/containers/background/back.css
@@ -6,3 +6,15 @@
  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;
+}
--- a/src/containers/background/index.js
+++ b/src/containers/background/index.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import {useSelector, useDispatch} from 'react-redux';
+import {Icon, Image} from '../../utils/general';

 import './back.css';

-const Background = ()=>{
+export const Background = ()=>{
  const wallpaper = useSelector(state => state.wallpaper);
  const dispatch = useDispatch();

@@ -15,4 +16,13 @@ const Background = ()=>{
  );
 }

-export default Background;
+export const BootScreen = ()=>{
+  const wallpaper = useSelector(state => state.wallpaper);
+  const dispatch = useDispatch();
+
+  return (
+    <div className="bootscreen">
+      <Image src="asset/bootlogo" w={160}/>
+    </div>
+  );
+}
--- a/src/index.css
+++ b/src/index.css
@@ -21,7 +21,7 @@ body {
  width: 100vw;
  height: 100vh;
  user-select: none;
-  overflow: hidden;
+  overflow: hidden !important;
 }

 body:before {
@@ -44,7 +44,7 @@ body[data-sepia="true"]:before {
 }

 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, "Consolas", Courier New, monospace;
 }

 .App {
@@ -142,6 +142,11 @@ img[data-flip='true'], svg[data-flip='true'] {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }

+input {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue';
+}
+
 .ltShad0 {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
 }
@@ -214,15 +219,26 @@ img[data-flip='true'], svg[data-flip='true'] {
  transition: all 200ms ease-in-out;
 }

+a {
+  text-decoration: none;
+  color: #0080E1;
+}
+
+#textpad {
+  font-family: Consolas, monospace;
+  /* font-size: 18px; */
+  font-weight: 500;
+}
+
 .acol {
  color: #aaa;
 }

-#probtn{
+#probtn {
  display: none;
 }

-#warningmsg{
+#warningmsg {
  display: none;
 }

@@ -231,18 +247,18 @@ img[data-flip='true'], svg[data-flip='true'] {
    display: none;
  }

-  body[data-force="false"]{
+  body[data-force="false"] {
    display: grid;
    background: #2b2a2f;
    place-items: center;
    overflow: hidden;
  }

-  body[data-force="false"]::before{
+  body[data-force="false"]::before {
    display: none;
  }

-  body[data-force="false"] #warningmsg{
+  body[data-force="false"] #warningmsg {
    display: block;
    font-size: 1.6rem;
    color: #fefefe;
@@ -257,7 +273,7 @@ img[data-flip='true'], svg[data-flip='true'] {
    pointer-events: none;
  }

-  body[data-force="false"] #probtn{
+  body[data-force="false"] #probtn {
    display: block;
    color: #aaa;
    font-weight: 600;
--- a/src/utils/general.scss
+++ b/src/utils/general.scss
@@ -109,7 +109,7 @@

  90%{
    opacity: 0;
-    transform: scale(0);
+    transform: scale(0.8);
  }

  100%{
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,8 +1,8 @@
 import icons from './apps';

 var iconIdx = {
-  taskbar: [3,4,5,6],
-  desktop: [8,7,4,6,5,54,55],
+  taskbar: [3,4,5,6,39],
+  desktop: [8,55,7,4,6,5,54,39],
  pinned: [5,51,37,31,21,48,6,35,15,28,52,10,39,44,13,46,54,56],
  recent: [21,44,46,54,13,39,5]
 };