Merge branch 'main' of https://github.com/raisfeld-ori/d_vault

src/pages/main_page/internal_apps/App.css

@@ -31,6 +31,7 @@
     width: 873px;
     max-width: 100%;
     display: flex;
+    z-index: 99;
     align-items: flex-start;
     background-color: #2f2f2f;
     height: 3.8svh;    
@@ -50,6 +51,20 @@
 
     display: flex;
     align-items: flex-start;
+    background-color: #333333df;
+    height: 50svh;    
+    backdrop-filter: blur(10px);
+
+}
+
+.frametest {
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+}
+
+.frametest2{
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
     background-color: #333;
     height: 50svh;    
 }
@@ -63,6 +78,9 @@
     font-size: 1.5em;
     text-align: left;
     font-weight: lighter;
+
+    color: rgb(189, 184, 184);
+
     font-style: italic;
 
 }

src/pages/main_page/main_page.css

@@ -4,6 +4,7 @@
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
+
 }
 .name{
   color: white;
@@ -17,6 +18,8 @@
   position: fixed;
   bottom: 0;
   height: 5svh;
+  backdrop-filter: blur(10px);
+
   width: 100%;
  }
 
@@ -101,4 +104,21 @@ color: white;
   margin-top: 1svh;
   margin-bottom: 1svh;
   margin-right: 1svh;
-}
+
+
+#background{
+
+  background-size: cover;
+}
+
+.hakari {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  z-index: -1;
+  object-fit: cover;
+ }
+
+

src/pages/main_page/main_page.tsx

@@ -1,27 +1,37 @@
+
+import React, { useState } from 'react';
 import './main_page.css';
-import './main_page.css';
-import { desktop_app } from './Grid';
+
 import Grid from './Grid';
 import folder from './assets/folder.png';
 import menu_icon from './assets/computer-laptop-color-icon.webp';
-import search from './assets/search.png';
-import terminal from './assets/Terminal-icon.png';
+
+import terminald from './assets/Terminal-icon.png';
 import file_system from './internal_apps/file_system';
-import { useState } from 'react';
+import ibetonhakari from './assets/TOCA2.mp4';;
+import { desktop_app } from './Grid';
 
-export default function main_page(){
+
+export default function MainPage() {
     const [fs, set_fs] = useState(<></>);
-    const example_app = desktop_app( "Dolphin", folder, file_system(set_fs));
-    const not_example_app = desktop_app("Search", search, () => {console.log("test");});
+    const example_app = desktop_app("Dolphin", folder, file_system(set_fs));
+    const not_example_app = desktop_app("Search", search, () => { console.log("test"); });
+    const terminal = desktop_app("Terminal", terminald, () => {});
+
+    return (
+        <div id='background'>
 
-    return <div id='background'>
-        {fs}
-        <Grid apps={[example_app, not_example_app]} gridSize={50} margin={100}/>
-        <nav className='navbar'>
-        <img className='homeimg' src={menu_icon} alt="" />
-        <img className='searchimg' src={search} alt="" />
-        <img className='terminalimg' src={terminal} alt="" />
-         <p className='time'>12:09 AM <br /> 12/10/2027</p>
-        </nav>
-    </div>
+            {fs}
+            <Grid apps={[example_app, not_example_app, terminal]} gridSize={50} margin={120} />
+            <nav className='navbar'>
+                <img className='homeimg' src={menu_icon} alt="" />
+                <img className='searchimg' src={search} alt="" />
+                <img className='terminalimg' src={terminald} alt="" />
+                <p className='time'>12:09 AM <br /> 12/10/2027</p>
+            </nav>
+            <video className='hakari' src={ibetonhakari} width="100%" height="100%" autoPlay muted>
+    Your browser does not support the video tag.
+</video>
+        </div>
+    );
 }