Hugging Face's logo

Spaces:
AIAgentforDI
/
WFM
Sleeping

App Files Community
Dhom1 commited on
Commit
087e4b0
·
verified ·
1 Parent(s): ecb8455

Update src/style.css

Browse files
Files changed (1) hide show
  1. src/style.css +91 -129
src/style.css CHANGED
@@ -1,131 +1,93 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Health Matrix Style Test</title>
6
- <style>
7
- /* === General === */
8
- body {
9
- background-color: #f9fbfc;
10
- font-family: 'Segoe UI', sans-serif;
11
- }
12
- h1, h2, h3, .stMarkdown h3 {
13
- color: #004c97;
14
- }
15
- p, li {
16
- color: #555555;
17
- font-size: 1.05em;
18
- }
19
- .stDataFrame th {
20
- background-color: #e3f2fd !important;
21
- color: #004c97 !important;
22
- }
23
- .stButton > button {
24
- padding: 15px 30px;
25
- font-size: 16px;
26
- font-weight: bold;
27
- border: none;
28
- border-radius: 12px;
29
- background: linear-gradient(270deg, #36BA01, #009A22, #36BA01);
30
- background-size: 400% 400%;
31
- animation: gradientMove 6s ease infinite;
32
- transition: transform 0.2s ease, box-shadow 0.2s ease;
33
- color: white !important;
34
- cursor: pointer;
35
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
36
- }
37
- .stButton > button:hover {
38
- transform: scale(1.05);
39
- }
40
- .stButton > button:active {
41
- transform: scale(0.95);
42
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
43
- }
44
- @keyframes gradientMove {
45
- 0% { background-position: 0% 50%; }
46
- 50% { background-position: 100% 50%; }
47
- 100% { background-position: 0% 50%; }
48
- }
49
 
50
- /* === Cards === */
51
- .stat-cards {
52
- display: flex;
53
- justify-content: space-between;
54
- gap: 1.5rem;
55
- margin: 2rem 0;
56
- flex-wrap: wrap;
57
- }
58
- .stat-card {
59
- flex: 1;
60
- min-width: 220px;
61
- background: linear-gradient(135deg, #f1fdf9, #ffffff);
62
- padding: 1.5rem;
63
- border-radius: 16px;
64
- box-shadow: 0 6px 18px rgba(0,0,0,0.06);
65
- text-align: center;
66
- transition: transform 0.3s ease;
67
- position: relative;
68
- }
69
- .stat-card:hover {
70
- transform: scale(1.03);
71
- }
72
- .stat-icon {
73
- font-size: 30px;
74
- margin-bottom: 0.4rem;
75
- }
76
- .stat-label {
77
- color: #666;
78
- font-size: 1rem;
79
- }
80
- .stat-value {
81
- font-size: 2rem;
82
- font-weight: bold;
83
- color: #004c97;
84
- }
85
- .stat-change {
86
- font-size: 0.9rem;
87
- font-weight: 500;
88
- position: absolute;
89
- top: 1rem;
90
- right: 1.2rem;
91
- }
92
- .stat-up { color: #2e7d32; }
93
- .stat-down { color: #c62828; }
94
 
95
- .logo-center {
96
- display: flex;
97
- justify-content: center;
98
- margin-bottom: 1em;
99
- }
100
- </style>
101
- </head>
102
- <body>
103
-
104
- <div class="logo-center">
105
- <img src="https://www.healthmatrixcorp.com/web/image/website/1/logo/Health%20Matrix?unique=956ad7b" width="200" alt="Health Matrix Logo">
106
- </div>
107
-
108
- <h1>AI Shift Management Assistant</h1>
109
- <p>This is a preview of the Health Matrix visual style using your provided CSS.</p>
110
-
111
- <div class="stat-cards">
112
- <div class="stat-card">
113
- <div class="stat-icon">👥</div>
114
- <div class="stat-label">Total Staff</div>
115
- <div class="stat-value">87</div>
116
- <div class="stat-change stat-up">⬆️ 5%</div>
117
- </div>
118
- <div class="stat-card">
119
- <div class="stat-icon">📅</div>
120
- <div class="stat-label">Open Shifts</div>
121
- <div class="stat-value">12</div>
122
- <div class="stat-change stat-down">⬇️ 3%</div>
123
- </div>
124
- </div>
125
-
126
- <div class="stButton">
127
- <button>📲 Notify Eligible Employees</button>
128
- </div>
129
-
130
- </body>
131
- </html>
 
1
+ /* === General === */
2
+ body {
3
+ background-color: #f9fbfc;
4
+ font-family: 'Segoe UI', sans-serif;
5
+ }
6
+ h1, h2, h3, .stMarkdown h3 {
7
+ color: #004c97;
8
+ }
9
+ p, li {
10
+ color: #555555;
11
+ font-size: 1.05em;
12
+ }
13
+ .stDataFrame th {
14
+ background-color: #e3f2fd !important;
15
+ color: #004c97 !important;
16
+ }
17
+ .stButton > button {
18
+ padding: 15px 30px;
19
+ font-size: 16px;
20
+ font-weight: bold;
21
+ border: none;
22
+ border-radius: 12px;
23
+ background: linear-gradient(270deg, #36BA01, #009A22, #36BA01);
24
+ background-size: 400% 400%;
25
+ animation: gradientMove 6s ease infinite;
26
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
27
+ color: white !important;
28
+ cursor: pointer;
29
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
30
+ }
31
+ .stButton > button:hover {
32
+ transform: scale(1.05);
33
+ }
34
+ .stButton > button:active {
35
+ transform: scale(0.95);
36
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
37
+ }
38
+ @keyframes gradientMove {
39
+ 0% { background-position: 0% 50%; }
40
+ 50% { background-position: 100% 50%; }
41
+ 100% { background-position: 0% 50%; }
42
+ }
 
 
 
 
 
 
43
 
44
+ /* === Cards === */
45
+ .stat-cards {
46
+ display: flex;
47
+ justify-content: space-between;
48
+ gap: 1.5rem;
49
+ margin: 2rem 0;
50
+ flex-wrap: wrap;
51
+ }
52
+ .stat-card {
53
+ flex: 1;
54
+ min-width: 220px;
55
+ background: linear-gradient(135deg, #f1fdf9, #ffffff);
56
+ padding: 1.5rem;
57
+ border-radius: 16px;
58
+ box-shadow: 0 6px 18px rgba(0,0,0,0.06);
59
+ text-align: center;
60
+ transition: transform 0.3s ease;
61
+ position: relative;
62
+ }
63
+ .stat-card:hover {
64
+ transform: scale(1.03);
65
+ }
66
+ .stat-icon {
67
+ font-size: 30px;
68
+ margin-bottom: 0.4rem;
69
+ }
70
+ .stat-label {
71
+ color: #666;
72
+ font-size: 1rem;
73
+ }
74
+ .stat-value {
75
+ font-size: 2rem;
76
+ font-weight: bold;
77
+ color: #004c97;
78
+ }
79
+ .stat-change {
80
+ font-size: 0.9rem;
81
+ font-weight: 500;
82
+ position: absolute;
83
+ top: 1rem;
84
+ right: 1.2rem;
85
+ }
86
+ .stat-up { color: #2e7d32; }
87
+ .stat-down { color: #c62828; }
88
 
89
+ .logo-center {
90
+ display: flex;
91
+ justify-content: center;
92
+ margin-bottom: 1em;
93
+ }