Skip to content

Commit ae57508

Browse files
novafurrynovafurry
committedJul 8, 2024·
chat is this a W commit?
1 parent 9879258 commit ae57508

File tree

7 files changed

+1847
-0
lines changed

7 files changed

+1847
-0
lines changed
 

‎assets/libs/lucide/lucide.ttf

631 KB
Binary file not shown.

‎assets/libs/lucide/main.css

+1,488
Large diffs are not rendered by default.

‎assets/libs/tailwind.js

+62
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎applications/Sysapps.novarepo ‎sysApps/Sysapps.novarepo

File renamed without changes.

‎sysApps/fm/index.css

+191
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
:root {
2+
--accent-color: #007bff;
3+
--accent-text-color: white;
4+
--sidebar-bg-color: #f5f5f5;
5+
--text-color-dark: #333;
6+
--toolbar-hover-bg-color: #0056b3;
7+
--border-color: #ddd;
8+
--file-item-hover-bg-color: #f0f0f0;
9+
}
10+
11+
/* Reset some default browser styles */
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
@font-face {
19+
font-family: fami;
20+
src: url(../../assets/font/famigrot/FamiljenGrotesk-VariableFont_wght.ttf);
21+
}
22+
23+
@font-face {
24+
font-family: famitalic;
25+
src: url(../../assets/font/famigrot/FamiljenGrotesk-Italic-VariableFont_wght.ttf);
26+
}
27+
28+
body {
29+
font-family: fami;
30+
}
31+
32+
/* Container for the entire file manager */
33+
.file-manager {
34+
display: flex;
35+
height: 100vh;
36+
overflow: hidden;
37+
}
38+
39+
/* Sidebar styling */
40+
.sidebar {
41+
width: 250px;
42+
background-color: var(--sidebar-bg-color);
43+
padding: 20px;
44+
transition: transform 0.3s ease-in-out;
45+
}
46+
47+
.sidebar-header h2 {
48+
font-size: 24px;
49+
margin-bottom: 20px;
50+
}
51+
52+
.sidebar-nav ul {
53+
list-style: none;
54+
}
55+
56+
.sidebar-nav ul li {
57+
margin: 10px 0;
58+
}
59+
60+
.sidebar-nav ul li a {
61+
text-decoration: none;
62+
color: var(--text-color-dark);
63+
font-size: 18px;
64+
}
65+
66+
/* Main content styling */
67+
.main-content {
68+
flex: 1;
69+
padding: 20px;
70+
display: flex;
71+
flex-direction: column;
72+
overflow-y: auto;
73+
}
74+
75+
.breadcrumb {
76+
margin-bottom: 20px;
77+
font-size: 16px;
78+
}
79+
80+
.breadcrumb a {
81+
text-decoration: none;
82+
color: var(--accent-color);
83+
}
84+
85+
.breadcrumb a:hover {
86+
text-decoration: underline;
87+
}
88+
89+
.toolbar {
90+
display: flex;
91+
gap: 10px;
92+
margin-bottom: 20px;
93+
}
94+
95+
.toolbar button {
96+
padding: 10px;
97+
border: none;
98+
background-color: var(--accent-color);
99+
color: var(--accent-text-color);
100+
border-radius: 5px;
101+
cursor: pointer;
102+
}
103+
104+
.toolbar button:hover {
105+
background-color: var(--toolbar-hover-bg-color);
106+
}
107+
108+
.file-grid {
109+
display: grid;
110+
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
111+
gap: 20px;
112+
}
113+
114+
.file-item {
115+
text-align: center;
116+
padding: 10px;
117+
border: 1px solid var(--border-color);
118+
border-radius: 5px;
119+
transition: background-color 0.3s;
120+
}
121+
122+
.file-item img {
123+
max-width: 50px;
124+
margin-bottom: 10px;
125+
}
126+
127+
.file-item p {
128+
font-size: 14px;
129+
}
130+
131+
.file-item:hover {
132+
background-color: var(--file-item-hover-bg-color);
133+
}
134+
135+
/* Sidebar Toggle Button */
136+
.sidebar-toggle {
137+
display: none;
138+
position: absolute;
139+
top: 10px;
140+
left: 20px;
141+
background-color: var(--accent-color);
142+
color: var(--accent-text-color);
143+
border: none;
144+
border-radius: 5px;
145+
padding: 10px;
146+
cursor: pointer;
147+
width: 5ch;
148+
height: 5ch;
149+
}
150+
.addFile {
151+
opacity: 0.5;
152+
width:2ch;
153+
position:relative;
154+
margin-top: -1ch;
155+
display: inline;
156+
}
157+
.afbtn{
158+
display: inline;
159+
position: relative;
160+
left: 1ch;
161+
}
162+
/* Media Queries for smaller screens */
163+
@media (max-width: 768px) {
164+
.sidebar {
165+
position: fixed;
166+
top: 0;
167+
left: 0;
168+
height: 100vh;
169+
transform: translateX(-100%);
170+
z-index: 10;
171+
}
172+
173+
.sidebar.show {
174+
transform: translateX(0);
175+
}
176+
177+
.sidebar-toggle {
178+
display: block;
179+
/* z-index: 9999999; */
180+
}
181+
182+
.breadcrumb {
183+
margin-top: -0.5ch;
184+
margin-left: 50px;
185+
}
186+
187+
.sidebar-header {
188+
margin-left: 5ch;
189+
margin-top: -1ch;
190+
}
191+
}

‎sysApps/fm/index.html

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>File Manager</title>
8+
<link rel="stylesheet" href="index.css">
9+
<link rel="stylesheet" href="../../assets/libs/lucide/main.css">
10+
</head>
11+
12+
<body>
13+
<div class="file-manager">
14+
<aside class="sidebar">
15+
<div class="sidebar-header">
16+
<button id="sidebar-toggle2" class="sidebar-toggle">
17+
<div class="icon-menu"></div>
18+
</button>
19+
<h2>File Manager</h2>
20+
</div>
21+
<nav class="sidebar-nav">
22+
<ul>
23+
<li><a href="#">Home</a></li>
24+
<li><a href="#">Downloads</a></li>
25+
<li><a href="#">Images</a></li>
26+
<li><a href="#">Documents</a></li>
27+
<li><a href="#">Music</a></li>
28+
<li><a href="#">Videos</a></li>
29+
</ul>
30+
</nav>
31+
</aside>
32+
<main class="main-content">
33+
<button id="sidebar-toggle" class="sidebar-toggle">
34+
<div class="icon-menu"></div>
35+
</button>
36+
<div class="breadcrumb">
37+
<a href="#">Home</a> / <a href="#">Documents</a> / Project Files
38+
</div>
39+
<div class="toolbar">
40+
<button>Upload</button>
41+
<button>Download</button>
42+
<button class="icon-file-plus afbtn">
43+
<select name="Add A file/Folder" class="addFile">
44+
<option value="" default>Add File</option>
45+
<option value=""></option>
46+
<option value=""></option>
47+
</select>
48+
</button>
49+
<button>
50+
<div class="icon-external-link"></div>
51+
</button>
52+
<button>
53+
<div class="icon-info"></div>
54+
</button>
55+
<button>
56+
<div class="icon-trash"></div>
57+
</button>
58+
<button>
59+
<div class="icon-share"></div>
60+
</button>
61+
</div>
62+
<div class="file-grid">
63+
<div class="file-item">
64+
<img src="folder-icon.png" alt="Folder">
65+
<p>Project Files</p>
66+
</div>
67+
<div class="file-item">
68+
<img src="doc-icon.png" alt="Document">
69+
<p>Document.docx</p>
70+
</div>
71+
<div class="file-item">
72+
<img src="image-icon.png" alt="Image">
73+
<p>Image.jpg</p>
74+
</div>
75+
<div class="file-item">
76+
<img src="audio-icon.png" alt="Audio">
77+
<p>Song.mp3</p>
78+
</div>
79+
<div class="file-item">
80+
<img src="video-icon.png" alt="Video">
81+
<p>Video.mp4</p>
82+
</div>
83+
<div class="file-item">
84+
<img src="ppt-icon.png" alt="Presentation">
85+
<p>Presentation.pptx</p>
86+
</div>
87+
88+
</div>
89+
</div>
90+
</main>
91+
</div>
92+
<script src="index.js"></script>
93+
</body>
94+
95+
</html>

‎sysApps/fm/index.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const sidebar = document.querySelector('.sidebar');
3+
const sidebarToggle = document.getElementById('sidebar-toggle');
4+
sidebarToggle.addEventListener('click', () => {
5+
sidebar.classList.toggle('show');
6+
});
7+
const sidebarToggle2 = document.getElementById('sidebar-toggle2');
8+
sidebarToggle2.addEventListener('click', () => {
9+
sidebar.classList.toggle('show');
10+
});
11+
});

0 commit comments

Comments
 (0)
Please sign in to comment.