From baffb279d4b46259c1e808e88365b9581fd445ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juliette=20Kalfl=C3=A8che?=
 <juliette.kalfleche@student-cs.fr>
Date: Thu, 9 Jun 2022 12:00:47 +0200
Subject: [PATCH] new searchbar

---
 frontend/src/assets/loupe.png          | Bin 0 -> 11199 bytes
 frontend/src/components/Banner.vue     |   5 +-
 frontend/src/components/MovieType.vue  |  14 +-
 frontend/src/components/SearchBar.vue  | 185 +++++++------------------
 frontend/src/components/SearchBar1.vue | 158 +++++++++++++++++++++
 frontend/src/views/Home.vue            |   9 +-
 6 files changed, 222 insertions(+), 149 deletions(-)
 create mode 100644 frontend/src/assets/loupe.png
 create mode 100644 frontend/src/components/SearchBar1.vue

diff --git a/frontend/src/assets/loupe.png b/frontend/src/assets/loupe.png
new file mode 100644
index 0000000000000000000000000000000000000000..1111b47095f0e4a1f01132dc777ea48b86b9461c
GIT binary patch
literal 11199
zcmeAS@N?(olHy`uVBq!ia0y~yU}6Aa4mJh`hA$OYelajGuoOFahH!9jaMW<5bTBY5
za29w(7BevL9RXp+soH$f3=9mCC9V-A!TD(=<%vb94CUqJdYO6I#mR{Use1WE>9gP2
zNHH)dFnGE+hE&XXd$)2*T4?3_kNKhgCB|lVFI{pnZ{jFZe#<dKL50I5P-S9*N%)Q<
zua&BVor{W#ch2mQ4D(6aGtuI>h1*%Ki!KLPlvV_?F-{D0aCDrtaJHm$)x3A|yR}4o
zORrYmFQ5P2^7owg>1*$2#c0{QS+)24=Xc-d)VfW0Wz2j-Jc8$qt!tSy_W_xNdpF|G
zvzE>L@Vz?c&H1$lW^LSmkH?17hR=q}#^~GgBQ{KHSmvGhsju#-D&48);400^$H2!n
ztta(m#59KUjA^c-=AFkqdJlL#SjSmkYyP2jUY3^1%C9*LAy<<UBsbI?ny+2)YI3#o
z8m2tPytyBq^DdEP^UM;JX7GJxc_2`D6VnabEsHE}d+uhv&JfNV&Ul?!TDg1D633ei
z8R8F84@^9ueeB;I{Vj{0-DZh#&*E6ewoawCSHbh>2F4f5m>VA-|CF`s_e;Cw){WlB
zKbc-S+dk<^gc-x#4ICD2B?s$uGrQxz-t^j4p0G!82hV<^2`aoN8xPz(@brM$rSh9<
zYT1q4jm8bO%YH5NytH8l^98-rjhByY(%B*Ao5!3P{=n(M=>yFhpL$I4`kM5hc8T@X
z#r7{}-P^>uL!v_a9goK(tr`4tSZk*L=$>(M^49~E2Tm>#7E$$Ny5#z>;*x8U@<(x<
z;P`ip|ClP|CM`K<#ZaNYVb%}s$&z{782@wb=}ePdspGloqIcu@NpWSuwTea`BU$%I
zM|7yHEPXcN-GlvIKe+oc)66DF9X>o!MKoXVL;4c;LyPncmd&Z@ExEj)|Fc(6;y1;+
zZ?;bR(cP(OZa$e$^3zL3&#WCEx&K=|(wAFi`%})0Y0?#s-^|Y+wcfunJKCf7fRBpj
zLNP}9W6!^zE%;n}$#>~JWd%=XGjR*{ia9^J8(-$FV~gulSy`sM#6PZFaQ_c!<9XbT
z%@b6vJ`z1J^@#qrV?NV-4;=sCpy+w(+0Fw$kLZ6m7IO0Nf&VOS6IH&Zsuh@hVENd+
z%W&^As|Qa#CRKeBdJy$UyfB&VWZI?2D|ah<&bl;j32QO;$L{ThJB#!Sv?eX_{3}#o
z|FL_kVd>NE14$~L3~yL#`hFa}IV15&;e!&Dm5==ta{Jx%PaWg2e$H5}>?vzJ{mZ3!
zYmew3Ip&foS|Bv(ilDyw+@*4Re@I<!$x)V7FyZ&iS}A#8w@1I5tNyNICc5{T!xUCl
z>@)xKQjF<8(;i-bkI8DA`3uxOD7+L<^laV4SaIrfgLlJpH*qD?J3bFmE_Jv5Yu*yA
zw$h;Pl<zsFbqstQ>zuVtzC7^sK;y+$k5{qRr5ko0Q1>)9Kg+kyRqJAR<Lk!w4n3Ek
z{9S)U4=5g3dZ6=St4Hf><~eS^vL4J{GMiP^^o~afqhp+_)w`1QFPxT4+c~2o=G&|n
zPAa}@yW<)6i0<If{}&`1#~Z`;Mn1M<$;#49_5_v+{sO-eMcFN~5xjSJ?=agi*jOp{
z_x#;iro-^Mk$3W+z2B7n>bQI6r{0-c67u%mfhNvK9v#KIH(ow8JzUQJ!Ro;>kOk|s
zc@M-qFkbRrGj#s%#%PcBqj$LOaIR5_<uPNswspc49v#+s{4#7h>~Rclgd)Ok+dBTT
zda&q)lZtJyxKu-J!{^4ui?}l<zCFO-u(~n3VYa9E-{VT%uMYEEQqF0g_%6+!%c5z^
z<^?v}7}A;L`}ABcUEaEv(W2$c%f~w}wu<EGzN~zoKUwcrc<{ZW`&I=$2zcNT<ov<w
zl3yd+XS)aGA2=C3oj368=>M_#viF&=2T_-13-qhoKD(OQ?GZ0u%M;IS>+!Gg%Zddm
zSD$fQ>P@}K9q0Lz^8@Rp)^p$YzrVxrLFvJF58t3K=htreqinGHdEoRVTydVeX1MB?
zs6G*Vuz5-G-QE8*_s4sC+%Jr8%Ac@i*7^x~XQnR6sq6bvTl$6R`ja)Pv0wU^-&S|L
zmKYyoT)_O%{`s=!K?&FYwM9;v_b%nq=EoPgql1feUp{*B?O%b8`d#Ob3?J=(FMB5S
zr*?|T0`te;UZ+&fC=slx`|rG(@hsath8ocuZhzjpT>ccB!=&={rO2Ki?`OzQuzOq0
z6t`K1XAZZG=b!f;lZ#~K&g!moKmK^z|B7vs@?5NEew+V3V3(~2@2%J)|L>WohBNHu
zHCi!g*W=|MCSNJL)cW7%(nC|N(;6=~o_;U<zxql`Oq08@_pD>x9_kle^&@<De2_PK
z5TSLiLb*Wt<NolAKaJ)ID`cwkEx+CVCx^|BQO4wj!>YnGhW$Og2gE-JhI(38*uC7k
z=^}SX$UY~lM-gw$ge%zZ*0p>{X6|3K<XQyB9mhY1L?%WzOlFgJ5={$#aQA@Kqk4Ab
zPrI4>7c6;nmUW#<ougFQJJxe5weD-)-J1VJY3{nY${Tu1j<ql8lVY^<|C3~LCPy{5
z@!h<{KUd`Jd29NA+&`a~rd$xycW`pZyzc`0Ie3k)PrjF?;hQG*lBZG6mgzT#-CL#7
zbJ3mgHEmP39<Z$VzIm0Uz>XO|?%z&)>X#5WZQ|rB6~~!pcf?n;P5iG=dtUqNtCC&C
zYR9&J+<G<WwJej3-=C)7@@tImk1Vb>ouPW*dguRIIXAm`nP*f?FRUwh?6zFmvt7#5
zvWFpk;y$mge|Oher>9C8d-8skd?Y@@YIEzCu6s9kviZzPkbL>J>f-+ArD?)1J2^ac
zKS>|a*DHPIcxf+h(A;Me;;d!<{*Ft3$NufCX~Lu=S=Xv(=2eL+wWl+7Z|<FDvUmH1
zck5a7j*GK<9=*-Jqx}c#(sh4$^+LKfHkHXQ{CoXpo7bfcXBqan{c#F%zs8V%#ylh_
z{+rU?H1jIED-&}MWPjqFx+L+J@+0wyR-1(0e+n<|VW{`}vuB0!>W>o?R$AyUo!kER
z4#S)2g>#m~oLe&Y`>mLs=b0WyXR!Zi_|d9du6Jnqj}<rj7SCPIzR&o%g6FF9?w#=l
zMbBewPRFNONbH#V!*a5*w1>H^SJsBf8P|88-OjjwW@*ckU%E<rYmKV@JvnpsfSx70
zXOJCtW9Simk)4}FE26InPHIcHd#P%D@v}zyz3HVbDyhYCAGuxD<uLxMzV~oqTVD8s
z)kn@RkGaY9C*+#oB$EyCYITJtrt%)ptZaAZG8X^A_3^V-c;2z^xgNcS^S|uL`*LW4
za(1KeXTE-sJhQjA7XDtm=dkk1_<Hw0O%s%*J<Scha!s1QnJ`K>9{$AFza&o9*ZSSB
z`%H7DRpu;NHk0>{^~cY;?(2@Z7cVu~+!);v&%t&!?2;`{koXzpy$6k|?mazmbLMfk
zAlG__KTHN0+ZgxHs!mwacAI%e+mD~-8P^zor^!isUapYaFz*Lz!i7I!?;0m^ZEPre
z^Ptw~`vH$xw_K0-|8e~M@6BSRsi~Sz<?n43wNL^{+$lWb|I6`neg*SHmX~Me`U}~s
zv!C30Amd%*#4jbr4YNDue`tQP`#|1Kb~mjXuRZ(^xtu@iSmgFCaN-w}eC4`D{F8n+
z{N2>w6|(QY@1H+1Dyu!s&AnC~%scS+i2s+m&nyKM-vTGzTKpxva=-fj2_8&8k{_x6
zP^k3&r#LYxRjk1BWAWDeYnbOvt_@kz7wvP?oa?VINGj9*f#aj+Is1P){8OB`>+So_
z`8WPPE4rjE?Rizkf2TQX9t+<IJEb6ZT~*&zFFNn~hdrLQ;7b2}^}2uGX8T_?kPA|;
zo%4h9uKzX$`^ohdOZ+4l^;GKQzFU8fpHT0yBrnow=lp;Fm$ZGHuq#FJsol@d=S_Rs
zuV~6E*C~CUoc*!7UbB6&#^<T`Z#Rg84SVB1bN;{U%<Ujfcx}s%%Devi0*)tm#0I=t
zQlBo{tXO)(=E3hH=ikO{ZvFBs$kX-){|$#fEbmO?RqyUm(Oj?GaQ4Xgk8z(DTCq82
zZT>D~Us!!s>e6+wNv}T2J$hcbK9c=S@bLtXToe9^mLHwBv(K$dHc<IHedhuG&iSwR
zKJ$Mq!LzcruJ;G$?d)}`dsjsS?e$Zs+xLBzd*fY@l&@RE?T+~y_NH)um}JG~d}+x(
zhd+DXo4yn9x?I8gQF!b1Kl`KHoGzWyQL0_lH}Ch}CuVybBW7K4J>q{Qu84m_w63yZ
zrdGas-M{a%9%o5%u4J9ZpQBng>DwgZEJ;q!%QG48xcrg2;C*g&s>%|v9||9Zw@i;=
z@403qG-*|Z>BrX&`ZrnLM4$HXV7=Y?Y2Rh*ebXjRxYFI-8P8pHQvQlDPteYLE`N@^
zQGI^hm}gSemYz+195J2!Jl_7nLE`%*Ew;={oN%SRUwFUXmr0XfOR}xB`8{#o(*Ai<
zLO*}3YI6*lKhL>}JN?V80Mq{==M6lb{;YkZo^myZiEmB1gbMG1C9^xOGgn_T<_U`Q
zvikX6*tEBC$-y`Nk@*6Dr&hH&Y8}6L#Q(^un@ln>=M6kgJy1TfUO2Qk(>GZ`^zmYl
z%+C^AX9dm4OAoj`y56M)YGXUTS|WKM>ydiW)E_V7wGQ7G+#eTm_WczTwxGwd&VN|e
z%&K3R$)obLRAWQ$57Wh7>(*!TEIDR9{Rd}+>G3NjY?D4|zg(JR7rNw}B;z}^x=%Nk
zdcO_6WX)8!d70q^sn;Hl)Z?zsi99dhvFap8f%eC2_o+2|!7}=t^D9C>DZF%bopkCG
z-=pjOS~r<=R%G%laoaWbM`yTdeb{vdk5yOK9Y{X1UNQ93v{}a-vgSB<&Myev#A~r)
znc;+x{Xyp>e?H&E=8!cjUcK&6=t=WeQVgEXfv5JmWj9!w_BNW7EDrutuFki%>tK!6
zE(TBLowL5Io4D+@?2nZ%l$OMlU1K=I(kGjySX(8;|9|4G2bV9hhLpsVFb3U?^ZZj5
zJ@rp*EVDx93Ngmno$<lTPK%cEHkjmC-)6K(ToL-^{pO3T9;Y5LKA7}ENz0<?OK3yL
zo=MUT>>H$~-+I!0ku}6XxL+pR+vgg?8`eEFH(I|ujQ3psYRVNp@d<o)GOgY-2Wb0T
zWB6n8QuKiD_oXkGR8qehd|3NJNoxZmSVqS3i&oWljSpvED5<1|J0<UDnjs(CVzT0-
zRKw!7IM?^*)bASVtc?BFTCyvBa&N$~>q{<8Da&DS^DN(Kc9-=ctH-LNS(gqv_=X>{
z()7(d&h~)yz&yd$FA3cHW(8+$4w7S^(zPv_IpEN@|Dj8acdBj;=HzwY{O;u$d}|}4
z#>45mT8=sf{rAfF^qp~<o46wHAvTAg%Q=kyjCXZ#{gHBToqdDh4C6Fc(V&a|4ewpV
z6<3z2n*6fkT(HPDhk;K~w)kes{Utq<52^4jYmu&vmxygJ>FDG=@M(kAs@+Dr7(AT|
zrC%Ocua^C*Z>7o7OHvK17jaK85xL!%y{LP}v420(97J=Hm<u8zM6c$s?vsvfS+X$m
zSEGaSlFh+Ol%{TBE-?O(QX)91ZCQ)#{$=ZDU-IiUXDDub?j{!G$l2Yvq-NcspYK^e
z*fEG^?_sQ9JX_DYq5r?<-A@(;?j?ek3)mfwO64=m6OVE=HFp<R$b2!&?md5>p2Mr_
z70egDDC=%#-0mi>2o|1h@H6}B(qq#9kH!i`9sN?rv!++i>C%O}La_%-(wMs!bx-&e
zc#6;AvN)sXSB=DX=CyyPsD+;5JMeuG_XLqgWeLG0f|oZi22AwIWSI5OcEOUWoMk`#
znQkzw@L0TLvCeaMaid=A#oQA_o*lo)>a+Nz{DLK(y+Ll@cY(qvu}&uTfQeUx^U`z)
z)^ELfNm8>LLod2|a9#ew&v3p=&*9Z^jSULBIx_EgR|!s7lDErxS3{;w4@A7YMDTLP
zuP4(()-QX{VDi^_ipk2rS@p~hY%j8Ua9#bv&sfc5ytsQpRp_B`hSeY!ymCyaE)fit
zSorhxiZ48>CJg;<;tHBq#1eeLCRu6OI&*$!un~%FSW@8oU*SP-gO(piKnyCdA-#k#
zXuVsb?V|1(ZkMg=J-=rEvNBNL#jrAb@sjJ2W;YLmY`*?Qwjp*A_k^lYC*}=iyBItl
z&f3SfgL%QDDHj+_{)R4?^lH1|u7*sI$PES$Eyv5(8KoISkFz-han9PucY|Stg&D&n
zuM1z+Gwfk^IJ%K>LP*oui>yA$(O}DuUrO=Q@${`%-SK)#m$BDp>(`MGOXr@_y~ygZ
zS8D0c=r_Lee@uFH{Y&YBm)0Vej4^Dfo4z-m5oS&40a*so^eNBm<E_oXj;*`kclmnY
zOG&RAj5FjxKCgBcH|U-3BChZ?OC&-*_K3+WyN{|@*S~yyVAcz!C2_q>{chrhy`cQa
zb^Qz2xaBQu3trCMzvP!`t?UNIfWjOGm8lC}erLMLu);#sgn=6r8Cm?Z>Q#1pXINpe
z_<-_7SD)nlFPKzXZ`to^$jo7#*Q4k3DwNZj!5fswvNB5;FINcMXIsHE^#X&8Ky1U3
z0N;Fucm3dW@FAc?@bV4j8``@#JQHW_<KCgQi(#ew;sdr9T|+K>VRZ<qowbj-Aijh#
z$lk5-s>y$u*UR)7CcV1+<>!08hAtDYU6oJoy>MDq=uyHr>5xh7ziR%5E)%P7&re;@
zTDIM07lWtbx1~RiGu&oa;qjRFz}<zRKJPbxoT{<#XZ|mCjm)5>Zy0nQuZ&VHb-yg#
zkb8iCF(k(vu(9EHc(rJmIm7o$f5KOJPnODOsFR6wajoN3DD}TA-C(_ld%`c%dklA^
zqFhb&JM|nc1)OCGa}hV}l?MfO_8!IvUK^Q64_0?qafQqkeC%bQ4Dya)MTBtvn(SYC
z2PRf1FSw$rYVvoxyST#F>_@C$r)|($b+h}KJcp9zeC5U5D-N(Z9MxLM*kEKQ=yB??
z=tWka$DR+)y--?G=bOW@Pdv=ERJBHFg2@in1D`>q67P~?h9yc<w=oywlrT<ednA#d
zva2IAMjTqS9X9#DHmsfLw>zjTRCf^%ILLdE)uZ{w$92E5omRa#`w>(m$8z#ESTktd
z>f=3dRWbC-vX)lIp#Re@{dxc2oN>FWxFT=TakdAmCTLX^GtFaH*m|?`B5O#2@k-7K
zU0WZwez87qt;4Bm!-Qw@{8}sPRo{G?`k{2C$x>PA26fHHnGM%n#T8bHZPs{fH~;h^
z?g?zBH^Ztp<C*73#WpO7n!|9WUvE*<>BS(4Nalb;y$#w8&5ODxOt~w)h<n8Yy$ADN
zC@pdHy~Yq@`9<qj@F6F~mAfPlyk6YB;=tSbt%p*04}8~Ly!&f5!^+q`)_J0_F05t@
zS*>$z{mNektbTD`@Ic)~SC3Q6ro`GxGi*I{PO8DXEy}gtt-;(~Tv4+-@<8TA*N_cd
z@r-MxMSEEBCsZE}KBU||X<0ef$Jd@yYc{Q8oY0n=Zq2~YY|guRf}O5%t*FAvoOCzw
zfQzmdSv_|8lrG8RjAwSR<ZfSbQkTK6OK(xr+5^`Ybx$bDbY}i=`oNtRN-AI9mL!yw
z2#UsV+DOH=OgSCGdmwem;>Ou|{tuon?w)XEyYXV~6)zsWU|N!B)&FC5-l`+Vi<TJ4
z`u_P9XsW*o)b^+n{y2GER$S0!36E9&n({{Plx?eYN{{6osCuLxKec8VsNK=8dLZr5
z^**hiw?S=^E!-XRYeF{(R+RZBD`@WDuT*z;#jM5IQp_tao>Qs&6nb`dwj`tH&a=vM
z&4u=+g`E8BQ+s&Jl_+kF^x1i)8@z1~D`+k*7XUT7euFe|Oc$`{T>b2NmK3vR<r$`T
zDs^jD%nAp!D<$u_{ZUyntGdDRD^K$h9<M0>ut#_QzuIBju=R-lu~n7swucom9X2<}
z3+{IdIs5ySB-=`z{|<jr-Ym`5f0z-tGP|zz$Jd3^D}MB|$hiMWd83+s)tG0}FB9e;
zj32X|uhuM|mpI{+G1nc}KTFok+WoPUVWsCiuRpskc;AaVZ{Ts(U~&8Zw`B?W4{prL
zI+^Q#>2%M!4m}s4;zs?6&r&(BP2RWehCpn`6%qCc_c~?o&I~^*l@KV)thiGBy;_~^
z3spH?J>N&KkNBU9`?L_$&UNkf++BDv+fm<g+q8)jxXPtIPTo8{hjH3<P&@mF3aFj^
zQ_$|WzHgS=OSauFJa2jHtw~i;@l9u4$=M&rTy--4s*zBT_Z;UxDsN5KuTND`d3#0!
z)Wh08ea*r-(xOWRK5M?W-n+Z;?kfo%&&gKZKPvBM|64X~;)JMYi;wtUi~D>J)Jy0S
zW9%2Qe_nl3?7;$1cV%|!0kcQyx%xMG_U!08IN^)Qe05OQLmzBe?bIKhx3kwR+|E2f
z<?FL_jrWHSmOXeOb<8Pi?R5eB%-@~mKfS)*;QgWav3Sq*m}pQRr=0iW<n7mU7~&$1
zCwRzyFMRa8-2UfLkWITMch2AQ_eoVv>V_$oUw6*G{`ZO4CFSl(zdp!5QZKZx^apjc
zE^KbNdgT1ex=+WXjyb>TnXg_a^nLQ$CDPMWc%LyndR}b5Q`G*iH?yQ-?n-z6XLUvD
z^ZuyvK6-oP{NuXM&p=w{1b5Cq^Y<B3&Cm8L{h|k~9z8Fx-zh84Ic<{!W1do7(D&KJ
zpZGhkWPSFu&bU~-{r;crf1H&{uV;78zw$RtyC4bNJ!Sb3{^)t`{+*2be^1|}{juc0
zM;nGW)9XE!T&ooS__=h#oC)<FDtkM=WLi}<eV?uUp@tz-OMODz9AVq=-)Hwfl^61S
zZ0Gq$MPB89hdHa)WXma^?tL;hjBa>()7|w_eI$>K=bsdLmHHXAAxk#tvb<BM%j28G
zpDr)zdH%!kBmUnUH}P87{$AmcdW&_(q#u=*9@iMopR+ZXG%wTqLER(uzX~@Q_85IX
z;L$3{dQQ2{j&Iie)3yea%HHujQvbW4Qo_RG`vDKupWct2KU}brcgE!E1Qp-6L66k`
zFNoxnnNS(CL}-rhpFgK3hCh{)@Vsm-5#bLSba=<`?W~Pi(B!>SOZ0ud+>th!f7aGu
z(kku07bbkX!=iJ-#w<v9Z|kP>pC!&ezOlo5VH)#xf&CIsPJBHOSK02KH6<9-3EnF6
z^Xi#o<(2%$FZI1W^7g=X4}VLK+|N>%F6&<`)^T5V=<~m&$9}MU>~>lg(`n6^HQk&+
zx^sTC<tE08#Cs1Xnsl&EsW&@tB!=Ba`!$EBq2F@b+y8Di{-0f5q4KnV>FrOg1nZYS
zlkO|5n6!6p*_{vO^Ryc!Bi%iM%;Z(-CZ3qNyWx4NtYW6cKmNB_C$2M{KX2tUY11tC
zUr%KAMm#yQcS*RSx2go|zpfvZlda#MvGkbq>Z8!D;=>m!=CSylv-Ak!EmPe4$*OAK
zlXKTUnBEIA{5Ro;t8)1^hW+!3CoJg^n<&@cJx_h-XNe6ak1ae`-PHKt`$)Xs>XTtY
z+P;O8*tX3n+3)q`&I;w_X)@}b&P56<tNY^|UY%e)Fz;uZ*Q?vBGvC`-n?JVjl-hLt
z;yUYz>d*Kde5i3&{hGpJ(Ozcz%-rz$gY3GckN#SI?DmX}<p0xO<E$FGiD5^_kNf|3
zeUkWaCugy$<{6C-@<;TwN}p{$a3_XY&G(_|fw@QipSwOa_keziw65pFZ;bC0>k3yI
zhcmN3l`_a=S6;F_;MOOn`E#HC-O1(?R4n89`yBfX!|cY*#k@02(gX_>KkmPO_{7!&
ze{2q`t@OO-`G?84Cx+$C?94M)a`PGFl>U|9QggU;z|ILIVZ$(IQs$W}w!0^vo73^n
zb{pq}DQ9&a2t5*?k@)oTfkQIP%g<SKev^B1*?Zlg&t^-m-DKX;`GYkrqEf_y`@He>
zEAxD-7ODLDzSXl(-63lsbHmjm`UZ#3Y;Q=FJm&Y-h-nU^jnkj^8N$iJ3R^EsJYWSf
zH;wtj@g?Ev-ulY6PEvoXZ+`hv+Hl2b`K5c0eU_i9U9z4vjmNG<>q6a<*?)HZ*nL0$
z4(EiZ7u!4IV-^+37TkH@yu#^?qm|t5Z0q=)kNg_0IMsXoc_cKGyYVoaoU7^8oCmT?
zjyo@|zwXuV+i=C{y=q-y=NYpg<qww}*@JowXO}eJ=kNUgH!FA@>$i6gpDV0<=+@9L
zw10<7`X0fGn+b<kI&Aj*Ua{q`ti;5hdS;A4tIsg(bNKV<QcDi=Ircue3>Q<MYNr3)
zC6m*?y!RJ>be%Ei^cjY8%5{aALF<%j7k$}!_-u*52k|B4H{JiQE75(&;-PEI{zL0y
zxA)~uTovLkc?-L~Ydv79nWJw7l{5O-?Jc}{V#)jinM=NFXH<wyj{9As{Bb|~vz0r9
z6}FzqdC+}CU(ffP)+J#PIpdi5u?^;o;>^(<|7XrVY5c<PfKCEufyK+rIn5hZPH;MV
zWcrejv*iuN4bQ)tUYeD`_aW-R<R5qIJYO#5ydhg*{6X`<?*q@~{;`!;+I#d1zsK3e
zC5lq4c20jD1qJ1)+|_@;=zR68vaJ8#$_MI4{`2_O&s@hD;h6R2+V`K|_j6WAuk@T^
z!lHa2UU>hGDKl<2@-r=;(6{(%@HFQAoHeWw-ha-YdU7(w_ds#O`HAnBot=6>UokV|
z--ItcHD8#5v&@*o8Q!bSHN3FZo%=icJ*FC|`PcKS)yx>v8Tzk(IscPugTP8gw?*6%
zO~wuVlk<eGB$zRqPY^r3x-p-*ye(|X`It**W84|nOZ+Y_%y5<3wz~0k<M!)+&hO;6
zsC+YDwe_VFGs8>Ws(7YvU3yDe<(Tr=@@^{jyNa2%N*-uj@>_PA?~l){KV~dxOXvOY
z`GEN%?!fZWrHl<*PW-ptV6tmM-;ViPtP8$Jg!MhmyEOZqoN8|8Gqe6L7S|?mMp}J)
z&bVZ`T-nNp^R>Tb$!4lQczv;T#q3>I7#M7%<L6yg>GwOKd|>jD+3T+L{QWNNQ6Aqv
z+y2{gpG(P+#tp1Xxc^n`Dx2SQDouESL2NbyLz$}Wu2QcO#Yru`4NYe{^b`)HJ(%w?
zU#EZZY~Kk>p3Pw0GqFTCDLQXeDC4fWkJY@H<_Z5w{yTfFx>@z$>w%>gTUSWCE#~GZ
z6Z}wgDKmCb)ppqm{+B<?c+>O>>@w4XE=_pjWcAqkmw`~S*D2=%o+_I^_RiV4iO)jL
zv*C3~BLf4s0cb6N^H=F5*5?<CGbGQNmp`%Z^xO=ymzuL*+`2Vk>keTB-n&IL^}7wN
zPn$i6DXYtvWX<^Vkza#Ig518q3o~RtD}2aW_T0~5-wt5~)}NLMq93~(3@`pHuc|h0
zf~rgr%>39L$I{bz!oOkji+*2+eK%M<9Nik@m1P5^_X<cDuZeN0YCoj#$4VjokCg-0
z7KtC>kHndhU!AdfAoFRi@FPEmd-Hp(8G{yFZfx(2=jk~)*V{AS=gir;4K;=84qV&#
zKSVwfXHG6k5iMZ*D#!m0;u_NfuN&lr_A5wS_TR=J&+sk9B8^%6%AfaFrtT0{Fg>92
zAm@_o<%``-hM~o>1uBQ3elR@(O0$06-Ek5<HzVa(?)kkrec%q~3Gs5KC2W<JA95dw
zvn8vgDZiAspP2jI|2V`ASrY;u_&hj%M4xZj?VDURY&YgVD^ypAzr#5}DoyOA%GTeV
z@d`fQi!?tZ&4Ri*Ye8(|eO5Wux`_sF&x;=DoN^dy(u$u4<}>>X><^gn?dj|(zd0|c
zDa7Y6En&Oe{N=@hc-|Q@J7p|pe)?JJun$yT7JP1qXMd+uchDd;Rr;mxRQJnz?^vF6
zTQdeRx_Qoju+RC=qQqHqd6y)wn0`49D&rXE74^VeaDT;&XHV)L+&#dw>tW2J<9l>B
za!%mdEKwm|p#PD(qx1CB1Nw}{FZ;}e?ce2g$FqB|&f?s|xPzr%@|{;0V?C>k*LNKz
zImLhJ7mnRv@nDVS`eRq1{jt0A<ZRz1@At<0Z?}8<{zdSS|2ns1W;3j0jbqy*AL09F
zQPQvTrU&vT+x;xNyKqUki2Hw^TXM4*R;s2ksZTstT|eW;(W5@|vm5R+@>M+R-+bB5
z<<I$L+8a41M5U>H*t}$J<L-|56rWROdtUgb>wU2JXun$TsG398Msdb^7pwRL?T_4k
z(?1z}V12-I=id59TaWxdvrA$&!%Ai`hUHB1jCtyH4>O~;G2B-(jd7pER~}Sa@BQce
zhSeK6Uo4pTf=MKc^Mlr<BmXlW?A-WNBwaQ$`oGbo+uzrz?0w?-_orDwNQt2Aw!RXn
zm)93_Uo5!6kg=$?LD^$|T))ik*S5~uS<`kmysmte^glMCIK%brC*e!pn?#PQEpX0Z
zFqs<oK;XgA1Kf?N2NIXezHw{M-o2bVSa%5SNYpW(lot?e`%S@=p(|bZf}k10tK;hq
zaC@9RV00;*oqYnIW>r{Br0q?%JIr?&{}jAA|M3rp{Z0Pc{|=mbq4Xs_hso*yo5Rkx
zURi9%HtVm{tPtB!(0=9P@9lkGZ2u@9U_MZLpn1u6O&g1E^TQ`^`)q#g!};*~X-xKg
zdQSey!WW9n7`lwO-k44cytJ3i*dzL&apT?cPyeI6Z!Kbv@ZWXA-tpGFc;~7sflnhj
zY(!#P<{ea9a5RTO#q=Og0`uKEcBkN*EL%cm=RcVg(zkX=wf+^G&kgGtj=PI5+5=K`
zwD%%w#`0%O&mSi`u1#WASgE;BFt%aY6Tb$Pm15o>YDHC#BsWJNl4bDp-6-@UtweCv
zG;2oPL}rDRo^}GU4O%m~V;X!LR5T|GK2UqKeP?exyT_!qHxicu&t4Qa57vEMpzbhf
z%1QN({TpV!Dg?2Qu3KVm<Q9LU$G1Tx^Te_H0ur@}##bL-XPmS|hfjU4ipH-)X{(OU
zW$+9VGh=*u6wXj{m^7u;*P(JF=LD71MB#wA93~ad$QvwE#An0Qjw%@qm(j#PN+#LJ
zG`r!_CNYb$P4dfBJoj$k)X?vrTvnjsDb*3rK4tpu#-Ee_8mM}{YPDv3`t<YUe=4e;
zuO@=n&(;2VdQG~bT+Vdr6z_o(OYA*8CsjT1bBL_uJ@6t0%qtN7p!MM43#X8i)(3JK
zJcI1C8@wA^FScfQ&2Ff@%Q!*hX_4|fmMIBlA2ypYOj<H0Pf6B3TlhlG@f!>tlZuMf
z7yO)7&EKH1QtzJdg_!c&3?7qSl~{Z*&0(7Lj8mGyGwALe&Ww3$?=dTQuA2Rw#pHaI
zG=t|QgC8Xhn{D!#6+ETH%9&<8b_W@qSfsu{GH)~E1Qp)d){GzZK5H^~28qn)>)0rI
z<Gd`0UCxwL!yJ*ztl-)8#Fp{!_wN^3Jtmptv3?NPaQDhA>jp{DdbLR^yhk72V7W3k
zSo^<;il>xPIn%4tM{WPesCY_Ql{0;M?wC-hZ_na6Noj}h1byj-`7blSsCsgx2pd#v
zV_5#x>cb=z*UzsT4(k0|{@w1$Bo)(U-v;q|&mi}kEEON8tCUV5id(vq^TQ*3&sSUY
z%oyYTsCq7n25Xz7_QFZ{!O{3hOFXyyWOa&e*#1OX%X8ALrM=dSb)TlItZXtf1*?DM
zC_Rfo|KB8)uM3~39q8V#;>oPB5o}}-n<_-fsTC~{8Pkj+h?!ER5G9ucOjd%`UJ@`}
z2xbH|oPelpRDu|5dZ6fmTwC$S`wV{`75v+(;(4iL8pHLV_ebkR3(jo#*Q(+fWV*R=
zKbzU)|BvbwH)K@&*P5iVGQ6ERUiEzIf3XKo9!}HuoW%Aq=z;Ko<S%6x?{m!I-y<g>
zS#?#^WRr&HB&jsM4_pr-9vD1GNYGE<PmtZf_Cv5hy1?>-?t_mLytIG)Kf=pChqrmA
RGXnzygQu&X%Q~loCIAbIX}$me

literal 0
HcmV?d00001

diff --git a/frontend/src/components/Banner.vue b/frontend/src/components/Banner.vue
index c317a04..20a6368 100644
--- a/frontend/src/components/Banner.vue
+++ b/frontend/src/components/Banner.vue
@@ -4,6 +4,7 @@
   <img class="logo" alt="Vue logo" src="../assets/logo.png" />
   <h1 class="text" >CaCaoCritics</h1>
   </div>
+  <SearchBar />
   <div class="menu">
   <BurgerMenu />
   </div>
@@ -12,12 +13,14 @@
 
 <script>
 import BurgerMenu from "@/components/BurgerMenu.vue";
+import SearchBar from "./SearchBar.vue";
 
 export default {
   name: "Banner",
   components: {
     BurgerMenu,
-  },
+    SearchBar
+},
 };
 </script>
 
diff --git a/frontend/src/components/MovieType.vue b/frontend/src/components/MovieType.vue
index 0e3e68f..9638fad 100644
--- a/frontend/src/components/MovieType.vue
+++ b/frontend/src/components/MovieType.vue
@@ -1,11 +1,18 @@
 <template>
 <div class="box">
 <h1>Genre</h1>
+<div class="check">
 <input type="checkbox" id="action" value="Action" v-model="genre">
 <label for="Action">Action</label>
-<br>
+</div>
+<div class="check">
 <input type="checkbox" id="horreur" value="Horreur" v-model="genre">
 <label for="horreur">Horreur</label>
+</div>
+<div class="check">
+<input type="checkbox" id="fantastique" value="Fantastique" v-model="genre">
+<label for="fantastique">Fantastique</label>
+</div>
 <br>
 </div>
 </template>
@@ -16,13 +23,14 @@
 
 <style scoped>
 .box {
+    display: flex;
+    flex-direction: column;
     margin-left: 20px;
     background-color: #912F56;
     width: 200px;
     border-radius: 20px;
     color:white;
-    justify-content: space-between;
-    
+    justify-content: center;
 }
 
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/SearchBar.vue b/frontend/src/components/SearchBar.vue
index cff3df5..c196022 100644
--- a/frontend/src/components/SearchBar.vue
+++ b/frontend/src/components/SearchBar.vue
@@ -1,158 +1,67 @@
 <template>
-<form id="content">
-  <input type="text" name="input" class="input" :class="{ square: closed}">
-  <button @click="toggleClose" type="reset" class="search" :class="{ close: closed }"></button>
-</form>
+   <input type="text" v-model="input" placeholder="Search movies..." />
 </template>
 
 <script>
-export default {
-    data: function() {
-        return {
-            closed: false
-        }
+export default  {
+  data: function () {
+    return {
+      moviename: "",
+      movies: [],
+      moviesLoadingError: "",
+    };
+  },
+  methods: {
+    fetchMovies: function () {
+      axios
+        .get(
+          `https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
+        )
+        .then((response) => {
+          this.movies = response.data.results;
+        })
+        .catch((error) => {
+          this.moviesLoadingError = "An error occured while e ing movies.";
+          console.error(error);
+        });
     },
-methods: {
-    toggleClose() {
-        this.closed = !this.closed
-    }
-},
-}
-
+  },
+};
 </script>
 
 <style scoped>
-
-#content {
-  height: 50px;
-  width: 300px;
-  transform: translate(-50%, -50%);
-  margin-top: 20px;
-}
-
-#content.on {
-  -webkit-animation-name: in-out;
-  animation-name: in-out;
-  -webkit-animation-duration: 0.7s;
-  animation-duration: 0.7s;
-  -webkit-animation-timing-function: linear;
-  animation-timing-function: linear;
-  -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-}
+@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
 
 input {
-  box-sizing: border-box;
-  width: 50px;
-  height: 50px;
-  border: 4px solid #000000;
-  border-radius: 50%;
-  background: none;
-  color: #fff;
+  display: block;
+  width: 350px;
+  margin: 20px auto;
+  padding: 10px 45px;
+  background: white url("../assets/loupe.png") no-repeat 15px center;
+  background-size: 15px 15px;
   font-size: 16px;
-  font-weight: 400;
-  font-family: Roboto;
-  outline: 0;
-  -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
-  transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
-  -webkit-transition-delay: 0.4s;
-  transition-delay: 0.4s;
-  -webkit-transform: translate(-100%, -50%);
-  -ms-transform: translate(-100%, -50%);
-  transform: translate(-100%, -50%);
+  border: none;
+  border-radius: 5px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
-.search {
-  background: none;
-  position: absolute;
-  top: 0px;
-  left: 0;
-  height: 50px;
-  width: 50px;
-  padding: 0;
-  border-radius: 100%;
-  outline: 0;
-  border: 0;
-  color: inherit;
-  cursor: pointer;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-  -webkit-transform: translate(-100%, -50%);
-  -ms-transform: translate(-100%, -50%);
-  transform: translate(-100%, -50%);
-
+.item {
+  width: 350px;
+  margin: 0 auto 10px auto;
+  padding: 10px 20px;
+  color: white;
+  border-radius: 5px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
 }
 
-.search:before {
-  content: "";
-  position: absolute;
-  width: 20px;
-  height: 4px;
-  background-color: #000;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-  margin-top: 26px;
-  margin-left: 17px;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-}
-
-.close {
-  -webkit-transition: 0.4s ease-in-out;
-  transition: 0.4s ease-in-out;
-  -webkit-transition-delay: 0.4s;
-  transition-delay: 0.4s;
-}
-
-.close:before {
-  content: "";
-  position: absolute;
-  width: 27px;
-  height: 4px;
-  margin-top: -1px;
-  margin-left: -13px;
-  background-color: #000;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-}
-
-.close:after {
-  content: "";
-  position: absolute;
-  width: 27px;
-  height: 4px;
-  background-color: #000;
-  margin-top: -1px;
-  margin-left: -13px;
+.movie {
+  background-color: rgb(97, 62, 252);
   cursor: pointer;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
 }
 
-.square {
-  box-sizing: border-box;
-  padding: 0 40px 0 10px;
-  width: 300px;
-  height: 50px;
-  border: 4px solid #000000;
-  border-radius: 0;
-  background: none;
-  color: #000;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 400;
-  outline: 0;
-  -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
-  transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
-  -webkit-transition-delay: 0.4s, 0s, 0.4s;
-  transition-delay: 0.4s, 0s, 0.4s;
-  /* -webkit-transform: translate(-100%, -50%);
-  -ms-transform: translate(-100%, -50%);
-  transform: translate(-100%, -50%); */
+.error {
+  background-color: tomato;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/SearchBar1.vue b/frontend/src/components/SearchBar1.vue
new file mode 100644
index 0000000..cff3df5
--- /dev/null
+++ b/frontend/src/components/SearchBar1.vue
@@ -0,0 +1,158 @@
+<template>
+<form id="content">
+  <input type="text" name="input" class="input" :class="{ square: closed}">
+  <button @click="toggleClose" type="reset" class="search" :class="{ close: closed }"></button>
+</form>
+</template>
+
+<script>
+export default {
+    data: function() {
+        return {
+            closed: false
+        }
+    },
+methods: {
+    toggleClose() {
+        this.closed = !this.closed
+    }
+},
+}
+
+</script>
+
+<style scoped>
+
+#content {
+  height: 50px;
+  width: 300px;
+  transform: translate(-50%, -50%);
+  margin-top: 20px;
+}
+
+#content.on {
+  -webkit-animation-name: in-out;
+  animation-name: in-out;
+  -webkit-animation-duration: 0.7s;
+  animation-duration: 0.7s;
+  -webkit-animation-timing-function: linear;
+  animation-timing-function: linear;
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+}
+
+input {
+  box-sizing: border-box;
+  width: 50px;
+  height: 50px;
+  border: 4px solid #000000;
+  border-radius: 50%;
+  background: none;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 400;
+  font-family: Roboto;
+  outline: 0;
+  -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
+  transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
+  -webkit-transition-delay: 0.4s;
+  transition-delay: 0.4s;
+  -webkit-transform: translate(-100%, -50%);
+  -ms-transform: translate(-100%, -50%);
+  transform: translate(-100%, -50%);
+}
+
+.search {
+  background: none;
+  position: absolute;
+  top: 0px;
+  left: 0;
+  height: 50px;
+  width: 50px;
+  padding: 0;
+  border-radius: 100%;
+  outline: 0;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+  -webkit-transform: translate(-100%, -50%);
+  -ms-transform: translate(-100%, -50%);
+  transform: translate(-100%, -50%);
+
+}
+
+.search:before {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 4px;
+  background-color: #000;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  margin-top: 26px;
+  margin-left: 17px;
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+}
+
+.close {
+  -webkit-transition: 0.4s ease-in-out;
+  transition: 0.4s ease-in-out;
+  -webkit-transition-delay: 0.4s;
+  transition-delay: 0.4s;
+}
+
+.close:before {
+  content: "";
+  position: absolute;
+  width: 27px;
+  height: 4px;
+  margin-top: -1px;
+  margin-left: -13px;
+  background-color: #000;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+}
+
+.close:after {
+  content: "";
+  position: absolute;
+  width: 27px;
+  height: 4px;
+  background-color: #000;
+  margin-top: -1px;
+  margin-left: -13px;
+  cursor: pointer;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.square {
+  box-sizing: border-box;
+  padding: 0 40px 0 10px;
+  width: 300px;
+  height: 50px;
+  border: 4px solid #000000;
+  border-radius: 0;
+  background: none;
+  color: #000;
+  font-family: Roboto;
+  font-size: 16px;
+  font-weight: 400;
+  outline: 0;
+  -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
+  transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
+  -webkit-transition-delay: 0.4s, 0s, 0.4s;
+  transition-delay: 0.4s, 0s, 0.4s;
+  /* -webkit-transform: translate(-100%, -50%);
+  -ms-transform: translate(-100%, -50%);
+  transform: translate(-100%, -50%); */
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index d6a1e90..aa64bae 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -18,7 +18,6 @@
     <br />
   <div class="search">
     <MovieType />
-    <SearchBar />
   </div>
     <div class="film-name">Le film est : {{ moviename }}</div>
     <li v-for="movie in movies" :key="movie.id">
@@ -111,11 +110,7 @@ a {
   margin-right: 5px;
 }
 .film {
-  text-align: center;
-}
-.search {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  display:flex;
+  align-self: center;
 }
 </style>
-- 
GitLab