Hugging Face's logo

Spaces:
Prime810
/
FaceFeel
Sleeping

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

Update Frontend/style.css

Browse files
Files changed (1) hide show
  1. Frontend/style.css +109 -83
Frontend/style.css CHANGED
@@ -1,127 +1,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: 2.5rem;
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
- display: flex;
44
- flex-wrap: wrap;
45
- justify-content: center;
46
- gap: 10px;
 
 
 
 
 
 
47
  }
48
 
49
- .btn {
50
- background: linear-gradient(to right, #6a11cb, #2575fc);
51
- color: white;
52
- padding: 12px 24px;
 
53
  border: none;
54
- border-radius: 40px;
 
55
  font-size: 1rem;
56
- font-weight: bold;
57
  cursor: pointer;
58
- transition: all 0.3s ease;
59
- box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
60
  }
61
 
62
- .btn:hover {
63
- background: linear-gradient(to right, #43e97b, #38f9d7);
64
- transform: scale(1.05);
65
  }
66
 
67
- .result-section {
68
- padding: 1rem;
 
69
  }
70
 
71
- #capturedImagePreview img {
72
- width: 100%;
73
- max-width: 360px;
74
- margin-top: 1rem;
75
- border-radius: 16px;
76
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 
 
 
 
 
 
77
  }
78
 
79
- #emojiDisplay img {
80
- margin-top: 1rem;
81
- width: 100px;
82
- animation: bounce 1.2s ease-in-out infinite;
 
 
83
  }
84
 
85
- #emotionText {
86
- margin-top: 1rem;
87
- font-size: 1.3rem;
88
- font-weight: 500;
89
- color: #c7ffec;
90
  }
91
 
92
- #downloadEmoji {
93
  display: inline-block;
94
- margin-top: 1rem;
95
- background: linear-gradient(to right, #ee0979, #ff6a00);
96
- padding: 12px 24px;
97
- border-radius: 30px;
98
- color: white;
99
- text-decoration: none;
100
  font-weight: bold;
101
- transition: 0.3s;
102
- }
103
-
104
- #downloadEmoji:hover {
105
- transform: scale(1.05);
106
- box-shadow: 0 8px 16px rgba(238, 9, 121, 0.3);
107
  }
108
 
109
- @keyframes bounce {
110
- 0%, 100% { transform: translateY(0); }
111
- 50% { transform: translateY(-10px); }
112
  }
113
 
114
- /* Mobile responsiveness */
115
- @media (max-width: 600px) {
116
- header h1 {
117
- font-size: 2rem;
118
- }
119
- .btn {
120
- width: 90%;
121
- padding: 14px 0;
122
- font-size: 1.1rem;
123
  }
124
- #emojiDisplay img {
125
- width: 80px;
 
126
  }
127
  }
 
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
  }