Hugging Face's logo

Spaces:
Sephiroth1984
/
system
Running

App Files Community
Sephiroth1984 commited on
Commit
4c4c641
·
verified ·
1 Parent(s): 7264f90

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +164 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: System
3
- emoji: 👀
4
  colorFrom: green
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: system
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,164 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>仓储管理系统</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* 自定义滚动条样式 */
11
+ .custom-scrollbar::-webkit-scrollbar {
12
+ width: 6px;
13
+ }
14
+ .custom-scrollbar::-webkit-scrollbar-track {
15
+ background: #f1f1f1;
16
+ border-radius: 10px;
17
+ }
18
+ .custom-scrollbar::-webkit-scrollbar-thumb {
19
+ background: #cbd5e0;
20
+ border-radius: 10px;
21
+ }
22
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
23
+ background: #a0aec0;
24
+ }
25
+
26
+ /* 菜单项悬停效果 */
27
+ .menu-item:hover {
28
+ background-color: #edf2f7;
29
+ transform: translateX(4px);
30
+ transition: all 0.2s ease;
31
+ }
32
+
33
+ /* 主内容区过渡效果 */
34
+ .main-content {
35
+ transition: margin-left 0.3s ease;
36
+ }
37
+
38
+ /* 响应式调整 */
39
+ @media (max-width: 768px) {
40
+ .sidebar {
41
+ transform: translateX(-100%);
42
+ position: absolute;
43
+ z-index: 50;
44
+ height: 100%;
45
+ }
46
+ .sidebar.active {
47
+ transform: translateX(0);
48
+ }
49
+ .main-content {
50
+ margin-left: 0 !important;
51
+ }
52
+ .mobile-menu-btn {
53
+ display: block;
54
+ }
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-50 h-screen overflow-hidden">
59
+ <!-- 顶部信息展示栏 -->
60
+ <header class="bg-white shadow-sm">
61
+ <div class="flex items-center justify-between px-6 py-3">
62
+ <!-- 左侧：系统名称/logo -->
63
+ <div class="flex items-center space-x-4">
64
+ <button class="mobile-menu-btn hidden text-gray-600 hover:text-gray-900">
65
+ <i class="fas fa-bars text-xl"></i>
66
+ </button>
67
+ <h1 class="text-xl font-semibold text-gray-800">仓储管理系统</h1>
68
+ </div>
69
+
70
+ <!-- 中间：仓库信息展示区（预留） -->
71
+ <div class="warehouse-info flex-1 mx-8">
72
+ <!-- 这里可以自定义仓库信息展示内容 -->
73
+ <div class="text-center text-gray-500">仓库信息展示区</div>
74
+ </div>
75
+
76
+ <!-- 右侧：用户账户信息 -->
77
+ <div class="account-info flex items-center space-x-4">
78
+ <!-- 这里可以自定义账户信息展示内容 -->
79
+ <div class="text-gray-500">账户信息展示区</div>
80
+ <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center">
81
+ <i class="fas fa-user text-gray-600"></i>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </header>
86
+
87
+ <div class="flex h-full overflow-hidden">
88
+ <!-- 左侧菜单栏 -->
89
+ <aside class="sidebar w-64 bg-white shadow-md flex flex-col">
90
+ <!-- 菜单滚动区域 -->
91
+ <div class="menu-container flex-1 overflow-y-auto custom-scrollbar py-4">
92
+ <!-- 这里可以自定义菜单内容 -->
93
+ <div class="text-gray-500 px-6 py-2">一级菜单1</div>
94
+ <div class="text-gray-500 px-6 py-2">一级菜单2</div>
95
+ <div class="text-gray-500 px-6 py-2">一级菜单3</div>
96
+ <div class="text-gray-500 px-6 py-2">一级菜单4</div>
97
+ <div class="text-gray-500 px-6 py-2">一级菜单5</div>
98
+ <div class="text-gray-500 px-6 py-2">一级菜单6</div>
99
+ <div class="text-gray-500 px-6 py-2">一级菜单7</div>
100
+ <div class="text-gray-500 px-6 py-2">一级菜单8</div>
101
+ <div class="text-gray-500 px-6 py-2">一级菜单9</div>
102
+ <div class="text-gray-500 px-6 py-2">一级菜单10</div>
103
+ <div class="text-gray-500 px-6 py-2">一级菜单11</div>
104
+ <div class="text-gray-500 px-6 py-2">一级菜单12</div>
105
+ <div class="text-gray-500 px-6 py-2">一级菜单13</div>
106
+ <div class="text-gray-500 px-6 py-2">一级菜单14</div>
107
+ <div class="text-gray-500 px-6 py-2">一级菜单15</div>
108
+ </div>
109
+
110
+ <!-- 菜单底部固定区域 -->
111
+ <div class="menu-footer border-t border-gray-200 p-4">
112
+ <!-- 这里可以添加固定内容，如系统设置等 -->
113
+ <div class="text-gray-500">系统设置</div>
114
+ </div>
115
+ </aside>
116
+
117
+ <!-- 主内容区 -->
118
+ <main class="main-content flex-1 overflow-y-auto custom-scrollbar bg-gray-50" style="margin-left: 16rem;">
119
+ <div class="p-6">
120
+ <!-- 这里可以自定义主内容区 -->
121
+ <div class="bg-white rounded-lg shadow-sm p-6">
122
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">欢迎使用仓储管理系统</h2>
123
+ <p class="text-gray-600">请从左侧菜单选择功能模块，或在上方仓库信息区切换仓库。</p>
124
+ </div>
125
+ </div>
126
+ </main>
127
+ </div>
128
+
129
+ <script>
130
+ // 移动端菜单切换
131
+ document.addEventListener('DOMContentLoaded', function() {
132
+ const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
133
+ const sidebar = document.querySelector('.sidebar');
134
+ const mainContent = document.querySelector('.main-content');
135
+
136
+ if (mobileMenuBtn) {
137
+ mobileMenuBtn.addEventListener('click', function() {
138
+ sidebar.classList.toggle('active');
139
+ });
140
+ }
141
+
142
+ // 点击主内容区关闭移动端菜单
143
+ mainContent.addEventListener('click', function() {
144
+ if (window.innerWidth <= 768 && sidebar.classList.contains('active')) {
145
+ sidebar.classList.remove('active');
146
+ }
147
+ });
148
+
149
+ // 窗口大小变化时调整布局
150
+ window.addEventListener('resize', function() {
151
+ if (window.innerWidth > 768) {
152
+ sidebar.classList.remove('active');
153
+ }
154
+ });
155
+
156
+ // 为菜单项添加悬停效果
157
+ const menuItems = document.querySelectorAll('.menu-container > div');
158
+ menuItems.forEach(item => {
159
+ item.classList.add('menu-item', 'px-6', 'py-3', 'cursor-pointer', 'rounded-md', 'my-1', 'mx-2');
160
+ });
161
+ });
162
+ </script>
163
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Sephiroth1984/system" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
164
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 请帮我规划一个仓储系统的首页框架，框架采用顶部信息展示栏展示仓库，账号登信息，顶部信息展示栏下方左侧设计菜单栏，菜单栏需要增加上下滑动模块功能。顶部信息和菜单展示内容请不要设计，稍后利用该框架用户进行自定义