Hugging Face's logo

Spaces:
Prime810
/
FaceFeel
Sleeping

App Files Community
Prime810 commited on
Commit
e7a9e25
·
verified ·
1 Parent(s): 7378fd4

Update Frontend/style.css

Browse files
Files changed (1) hide show
  1. Frontend/style.css +75 -112
Frontend/style.css CHANGED
@@ -1,153 +1,116 @@
1
  body {
2
  margin: 0;
3
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
4
- background: linear-gradient(to bottom right, #003973, #E5E5BE);
5
- color: #fff;
6
- display: flex;
7
- justify-content: center;
8
- align-items: center;
9
- min-height: 100vh;
10
- padding: 20px;
11
- }
12
-
13
- .container {
14
- max-width: 500px;
15
- width: 100%;
16
- background: #003973;
17
- border-radius: 20px;
18
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
19
- padding: 20px;
20
  text-align: center;
21
  }
22
 
23
- .title {
24
- font-size: 2.5rem;
25
- margin-bottom: 10px;
26
- font-weight: 700;
27
- }
28
-
29
- .subtitle {
30
- font-size: 1.2rem;
31
- color: #cfd9df;
32
- margin-bottom: 20px;
33
  }
34
 
35
- .camera-emoji-container {
36
- display: flex;
37
- justify-content: space-between;
38
- flex-wrap: wrap;
39
- gap: 15px;
40
- margin-bottom: 20px;
41
  }
42
 
43
- .camera-section,
44
- .emoji-section {
45
- flex: 1 1 45%;
46
- background-color: #004c99;
47
- border-radius: 15px;
48
- padding: 15px;
49
- position: relative;
50
  }
51
 
52
- .video-wrapper {
53
- position: relative;
54
- border-radius: 10px;
55
- overflow: hidden;
56
  }
57
 
58
  #videoElement {
59
  width: 100%;
60
- border-radius: 10px;
 
 
 
 
 
61
  }
62
 
63
- .back-button {
64
- position: absolute;
65
- top: 10px;
66
- left: 10px;
67
- background: rgba(255, 255, 255, 0.2);
68
- border: none;
69
- color: #fff;
70
- font-size: 1.5rem;
71
- border-radius: 50%;
72
- width: 35px;
73
- height: 35px;
74
- cursor: pointer;
75
  }
76
 
77
- #switchCamera,
78
- #capture {
79
- margin: 10px 5px 0;
80
- padding: 10px;
81
- background-color: #00bcd4;
82
  border: none;
83
- border-radius: 8px;
84
- color: #fff;
85
  font-size: 1rem;
 
 
86
  cursor: pointer;
87
- width: 100%;
88
- transition: background-color 0.3s ease;
89
  }
90
 
91
- #switchCamera:hover,
92
- #capture:hover {
93
- background-color: #0097a7;
94
  }
95
 
96
- .emoji-display {
97
- font-size: 5rem;
98
- margin-bottom: 10px;
99
  }
100
 
101
- .emotion-label {
102
- font-size: 1.5rem;
103
- font-weight: bold;
104
- color: #ffeb3b;
105
- }
106
-
107
- .captured-section {
108
- background-color: #004466;
109
- border-radius: 15px;
110
- padding: 15px;
111
- margin-top: 20px;
112
- text-align: center;
113
  }
114
 
115
- .captured-img-wrapper {
116
- max-width: 100%;
117
- height: auto;
118
- border-radius: 10px;
119
- overflow: hidden;
120
- margin-bottom: 10px;
121
  }
122
 
123
- #capturedImage {
124
- width: 100%;
125
- border-radius: 10px;
126
- display: block;
 
127
  }
128
 
129
- #downloadLink {
130
  display: inline-block;
131
- padding: 10px 20px;
132
- background-color: #00e676;
133
- color: #003973;
134
- font-weight: bold;
135
- border-radius: 8px;
136
  text-decoration: none;
137
- transition: background-color 0.3s ease;
 
138
  }
139
 
140
- #downloadLink:hover {
141
- background-color: #00c853;
 
142
  }
143
 
144
- @media screen and (max-width: 600px) {
145
- .camera-emoji-container {
146
- flex-direction: column;
147
- align-items: center;
148
- }
149
- .camera-section,
150
- .emoji-section {
151
- width: 100%;
152
- }
153
  }
 
 
 
 
 
 
1
  body {
2
  margin: 0;
3
+ font-family: 'Segoe UI', sans-serif;
4
+ background: linear-gradient(to bottom right, #141e30, #243b55);
5
+ color: #f3f3f3;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  text-align: center;
7
  }
8
 
9
+ header {
10
+ padding: 2rem 1rem;
11
+ background: linear-gradient(to right, #ff9a9e, #fad0c4);
12
+ color: transparent;
13
+ -webkit-background-clip: text;
14
+ background-clip: text;
 
 
 
 
15
  }
16
 
17
+ header h1 {
18
+ font-size: 3rem;
19
+ margin: 0;
 
 
 
20
  }
21
 
22
+ header p {
23
+ font-size: 1.2rem;
24
+ margin-top: 0.5rem;
 
 
 
 
25
  }
26
 
27
+ .camera-section {
28
+ padding: 1rem;
 
 
29
  }
30
 
31
  #videoElement {
32
  width: 100%;
33
+ max-width: 460px;
34
+ border-radius: 20px;
35
+ border: 4px solid rgba(255, 255, 255, 0.3);
36
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
37
+ object-fit: cover;
38
+ margin-bottom: 1rem;
39
  }
40
 
41
+ .btn-group {
42
+ margin-top: 1rem;
 
 
 
 
 
 
 
 
 
 
43
  }
44
 
45
+ .btn {
46
+ background: linear-gradient(to right, #6a11cb, #2575fc);
47
+ color: white;
48
+ padding: 12px 24px;
 
49
  border: none;
50
+ border-radius: 40px;
 
51
  font-size: 1rem;
52
+ font-weight: bold;
53
+ margin: 8px;
54
  cursor: pointer;
55
+ transition: all 0.3s ease;
56
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
57
  }
58
 
59
+ .btn:hover {
60
+ background: linear-gradient(to right, #43e97b, #38f9d7);
61
+ transform: scale(1.05);
62
  }
63
 
64
+ .result-section {
65
+ padding: 1rem;
 
66
  }
67
 
68
+ #capturedImagePreview img {
69
+ width: 100%;
70
+ max-width: 360px;
71
+ margin-top: 1rem;
72
+ border-radius: 16px;
73
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 
 
 
 
 
 
74
  }
75
 
76
+ #emojiDisplay img {
77
+ margin-top: 1rem;
78
+ width: 100px;
79
+ animation: bounce 1.2s ease-in-out infinite;
 
 
80
  }
81
 
82
+ #emotionText {
83
+ margin-top: 1rem;
84
+ font-size: 1.3rem;
85
+ font-weight: 500;
86
+ color: #c7ffec;
87
  }
88
 
89
+ #downloadEmoji {
90
  display: inline-block;
91
+ margin-top: 1rem;
92
+ background: linear-gradient(to right, #ee0979, #ff6a00);
93
+ padding: 12px 24px;
94
+ border-radius: 30px;
95
+ color: white;
96
  text-decoration: none;
97
+ font-weight: bold;
98
+ transition: 0.3s;
99
  }
100
 
101
+ #downloadEmoji:hover {
102
+ transform: scale(1.05);
103
+ box-shadow: 0 8px 16px rgba(238, 9, 121, 0.3);
104
  }
105
 
106
+ footer {
107
+ margin-top: 2rem;
108
+ padding: 1rem;
109
+ font-size: 0.9rem;
110
+ color: #aaa;
 
 
 
 
111
  }
112
+
113
+ @keyframes bounce {
114
+ 0%, 100% { transform: translateY(0); }
115
+ 50% { transform: translateY(-10px); }
116
+ }