Hugging Face's logo

Spaces:
smf2010
/
ysfj
Running

App Files Community
smf2010 commited on
Commit
2cc0bc0
•
1 Parent(s): 5976327

Upload style-project.css

Browse files
Files changed (1) hide show
  1. style-project.css +158 -0
style-project.css ADDED
@@ -0,0 +1,158 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ background-image: url('https://bing.shangzhenyang.com/api/1080p');
4
+ background-repeat: no-repeat;
5
+ background-size: cover;
6
+ background-attachment: fixed;
7
+ background-position-x: center;
8
+ margin: 0;
9
+ padding: 0;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ height: 100vh;
14
+ text-align: center;
15
+ }
16
+
17
+ .container {
18
+ backdrop-filter: blur(10px);
19
+ -webkit-backdrop-filter: blur(10px);
20
+ -moz-backdrop-filter: blur(10px);
21
+ -o-backdrop-filter: blur(10px);
22
+ transition: transform 0.3s ease;
23
+ background-color: rgba(255, 255, 255, 0.5);
24
+ max-width: 600px;
25
+ padding: 20px;
26
+ border-radius: 10px;
27
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ .container:hover {
31
+ transform: scale(1.05);
32
+ }
33
+
34
+ h2 {
35
+ font-size: 18px;
36
+ margin-bottom: 20px;
37
+ color: #333;
38
+ }
39
+
40
+ p {
41
+ font-size: 18px;
42
+ margin-bottom: 30px;
43
+ color: #777;
44
+ }
45
+
46
+ a {
47
+ color: #007bff;
48
+ text-decoration: none;
49
+ font-weight: bold;
50
+ }
51
+
52
+ a:hover {
53
+ text-decoration: underline;
54
+ }
55
+
56
+ h1 {
57
+ font-size: 24px;
58
+ }
59
+
60
+ form {
61
+ margin-top: 20px;
62
+ }
63
+
64
+ input[type=text] {
65
+ border: none;
66
+ backdrop-filter: blur(10px);
67
+ -webkit-backdrop-filter: blur(10px);
68
+ -moz-backdrop-filter: blur(10px);
69
+ -o-backdrop-filter: blur(10px);
70
+ width: 100%;
71
+ background-color: rgba(255, 255, 255, 0.5);
72
+ padding: 10px;
73
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
74
+ margin-bottom: 10px;
75
+ border-radius: 100px;
76
+ box-sizing: border-box;
77
+ }
78
+
79
+ button {
80
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
81
+ padding: 10px 20px;
82
+ background-color: #3399ff;
83
+ color: #fff;
84
+ border: none;
85
+ cursor: pointer;
86
+ }
87
+
88
+ .result, .error {
89
+ margin-top: 20px;
90
+ text-align: left;
91
+ }
92
+
93
+ .result-container, .error-container {
94
+ text-align: center;
95
+ }
96
+
97
+ .error-container {
98
+ color: red;
99
+ }
100
+
101
+ @media screen and (min-width: 768px) {
102
+ form {
103
+ display: flex;
104
+ justify-content: center;
105
+ }
106
+
107
+ input[type=text] {
108
+ width: 300px;
109
+ margin-right: 10px;
110
+ margin-bottom: 0;
111
+ }
112
+ }
113
+
114
+ #overlay {
115
+ display: none;
116
+ position: fixed;
117
+ top: 0;
118
+ left: 0;
119
+ width: 100%;
120
+ height: 100%;
121
+ background-color: rgba(255, 255, 255, 0);
122
+ z-index: 99;
123
+ }
124
+
125
+ .modal {
126
+ z-index: 999;
127
+ display: none;
128
+ position: fixed;
129
+ top: 50%;
130
+ left: 50%;
131
+ transform: translate(-50%, -50%);
132
+ background-color: #fff;
133
+ padding: 20px;
134
+ box-sizing: border-box;
135
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
136
+ background-color: rgba(255, 255, 255, 0.4);
137
+ backdrop-filter: blur(30px);
138
+ -webkit-backdrop-filter: blur(30px);
139
+ -moz-backdrop-filter: blur(30px);
140
+ -o-backdrop-filter: blur(30px);
141
+ border-radius: 20px;
142
+ }
143
+
144
+ #close {
145
+ position: absolute;
146
+ top: 10px;
147
+ right: 10px;
148
+ cursor: pointer;
149
+ }
150
+
151
+ .button-container {
152
+ display: flex;
153
+ justify-content: space-between;
154
+ }
155
+
156
+ .button-container button {
157
+ margin-right: 10px;
158
+ }