Skip to content

Commit 2f6b742

Browse files
Thales-DuarteThales-Duarte
committed
feat: implement campaign creation screen following the prototype
1 parent aaf94aa commit 2f6b742

File tree

4 files changed

+582
-2
lines changed

4 files changed

+582
-2
lines changed

‎Dockerfile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
ARG PORT
22
FROM node:22-alpine as base
33
RUN apk add --no-cache g++ make py3-pip libc6-compat
4-
WORKDIR /app
4+
WORKDIR /frontend
55
COPY package*.json ./
66
EXPOSE ${PORT}
77

‎src/app/create-campaign/create-campaign.module.css

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
.navbar {
2+
background-color: #071013;
3+
display: flex;
4+
justify-content: space-between;
5+
align-items: center;
6+
padding: 12px 22px;
7+
}
8+
9+
.navLeft {
10+
display: flex;
11+
align-items: center;
12+
}
13+
14+
.siteName {
15+
color: #ffffff;
16+
font-size: 20px;
17+
margin-left: 10px;
18+
font-weight: bold;
19+
font-family: 'Cinzel', serif;
20+
}
21+
22+
.navRight img {
23+
border-radius: 50%;
24+
cursor: pointer;
25+
}
26+
27+
.mainContainer {
28+
background: linear-gradient(
29+
to bottom,
30+
rgba(223, 224, 226, 0.8),
31+
rgba(183, 153, 156, 0.4),
32+
rgba(247, 123, 32, 0.2)
33+
);
34+
min-height: 100vh;
35+
display: flex;
36+
justify-content: center;
37+
align-items: center;
38+
padding: 30px 16px;
39+
box-sizing: border-box;
40+
}
41+
42+
.formBox {
43+
background-color: #071013;
44+
padding: 32px;
45+
padding-bottom: 50px;
46+
border-radius: 8px;
47+
width: 100%;
48+
max-width: 900px;
49+
max-height: 90vh;
50+
min-height: 600px;
51+
display: flex;
52+
flex-direction: column;
53+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
54+
box-sizing: border-box;
55+
overflow-y: auto;
56+
}
57+
58+
.title {
59+
color: #DFE0E2;
60+
font-size: 24px;
61+
margin-bottom: 24px;
62+
font-family: 'Cinzel', serif;
63+
font-weight: bold;
64+
text-align: center;
65+
}
66+
67+
.columns {
68+
display: flex;
69+
flex-direction: column;
70+
gap: 2rem;
71+
}
72+
73+
@media (min-width: 768px) {
74+
.columns {
75+
flex-direction: row;
76+
}
77+
.descriptionField {
78+
height: 244px;
79+
width: 100%;
80+
}
81+
82+
}
83+
84+
.column {
85+
display: flex;
86+
flex-direction: column;
87+
flex: 1;
88+
min-width: 0;
89+
}
90+
91+
.column label {
92+
color: #DFE0E2;
93+
font-size: 12px;
94+
margin-bottom: 6px;
95+
font-family: 'Roboto', sans-serif;
96+
}
97+
98+
.inputField {
99+
width: 100%;
100+
padding: 12px;
101+
border-radius: 4px;
102+
border: none;
103+
background-color: #DFE0E2;
104+
font-size: 12px;
105+
margin-bottom: 16px;
106+
}
107+
108+
.descriptionField {
109+
height: 244px;
110+
resize: none;
111+
}
112+
113+
.cancelButton {
114+
font-family: 'Cinzel', serif;
115+
font-size: 14px;
116+
padding: 12px;
117+
background-color: #ccc;
118+
color: #000;
119+
border: none;
120+
border-radius: 0.6rem;
121+
margin-top: auto;
122+
cursor: pointer;
123+
}
124+
125+
.map {
126+
display: flex;
127+
align-items: flex-start;
128+
flex-wrap: nowrap; /* evita quebra no desktop */
129+
width: 100%;
130+
margin-bottom: 16px;
131+
gap: 8px;
132+
}
133+
134+
@media (max-width: 767px) {
135+
.map {
136+
flex-wrap: wrap; /* permite quebra no mobile */
137+
justify-content: center;
138+
gap: 12px;
139+
}
140+
}
141+
142+
.mapPreview {
143+
position: relative;
144+
width: 355px;
145+
height: 240px;
146+
background: #DFE0E2;
147+
border-radius: 4px;
148+
overflow: hidden;
149+
display: flex;
150+
align-items: center;
151+
justify-content: center;
152+
flex-shrink: 0;
153+
user-select: none;
154+
}
155+
156+
@media (max-width: 767px) {
157+
.mapPreview {
158+
width: 100%;
159+
max-width: 100%;
160+
}
161+
}
162+
163+
.sideIcons {
164+
display: flex;
165+
flex-direction: column;
166+
align-items: center;
167+
margin-left: 8px;
168+
margin-top: 8px;
169+
gap: 8px;
170+
flex-shrink: 0;
171+
}
172+
173+
174+
175+
.trashButton,
176+
.uploadButton,
177+
.zoomButton {
178+
background: #DFE0E2;
179+
color: #071013;
180+
border: none;
181+
padding: 8px;
182+
border-radius: 4px;
183+
cursor: pointer;
184+
font-size: 16px;
185+
transition: background-color 0.2s ease;
186+
user-select: none;
187+
}
188+
189+
.zoomReset {
190+
background: #DFE0E2;
191+
color: #071013;
192+
border: none;
193+
padding: 9px;
194+
border-radius: 4px;
195+
cursor: pointer;
196+
font-size: 16px;
197+
transition: background-color 0.2s ease;
198+
user-select: none;
199+
}
200+
201+
.trashButton {
202+
padding: 6px;
203+
margin-top: -8px;
204+
}
205+
206+
.trashButton:hover,
207+
.uploadButton:hover,
208+
.zoomButton:hover {
209+
background-color: #f77b20;
210+
color: white;
211+
}
212+
213+
.fileInput {
214+
display: none;
215+
}
216+
217+
.submitButton {
218+
font-family: 'Cinzel', serif;
219+
font-size: 14px;
220+
padding: 12px;
221+
background-color: #f77b20;
222+
color: white;
223+
border: none;
224+
border-radius: 0.6rem;
225+
cursor: pointer;
226+
transition: background-color 0.5s ease, color 0.5s ease;
227+
margin-top: auto;
228+
}
229+
230+
.submitButton:hover {
231+
border: 1px solid #f77b20;
232+
background: #071013;
233+
color: #f77b20;
234+
}
235+
236+
.errorMsg {
237+
min-height: 1.2em;
238+
color: #f77b20;
239+
font-size: 12px;
240+
margin-top: -12px;
241+
margin-bottom: 12px;
242+
font-family: 'Roboto', sans-serif;
243+
}
244+
245+
@media (max-width: 767px) {
246+
.sideIcons {
247+
flex-direction: row;
248+
margin-left: 0;
249+
margin-top: 0;
250+
justify-content: center;
251+
width: 100%;
252+
gap: 12px;
253+
}
254+
255+
.zoomButton {
256+
padding: 6px;
257+
margin-top: -8px;
258+
259+
}
260+
.zoomReset {
261+
262+
padding: 6px;
263+
margin-top: -8px;
264+
}
265+
}
266+
267+
268+
@media (max-width: 767px) {
269+
.submitButton {
270+
order: 1;
271+
width: 100%;
272+
}
273+
274+
.cancelButton {
275+
order: 2;
276+
width: 100%;
277+
margin-top: 12px;
278+
}
279+
280+
.column {
281+
display: flex;
282+
flex-direction: column;
283+
}
284+
}

0 commit comments

Comments
 (0)