From 8a0a1309a2c8e3a94989a0717864dd6ca2274b76 Mon Sep 17 00:00:00 2001 From: SPP User Date: Sun, 25 Oct 2026 17:42:38 +0100 Subject: [PATCH] MaxLAN-Branding: Logo in der Kopfzeile, Farben aus dem Logo Team A in Logo-Blau, Team B in Logo-Rot, schwarze Kopfzeile mit rotem Abschluss; CT/T-Farben aus den Emblemen, Warnungen in Orange. Co-Authored-By: Claude Opus 5.5 --- README.md | 1 + client/index.html | 6 +- client/public/brand/maxlan-logo.webp | Bin 0 -> 12838 bytes client/src/App.jsx | 9 +-- client/src/styles.css | 81 ++++++++++++++++----------- 5 files changed, 55 insertions(+), 42 deletions(-) create mode 100644 client/public/brand/maxlan-logo.webp diff --git a/README.md b/README.md index bf112aa..b876dc2 100644 --- a/README.md +++ b/README.md @@ -166,6 +166,7 @@ Die Wahl wird als `mp_teamname_1` (Team mit CT-Start) und `mp_teamname_2` (T-Sta - **Map-Bilder** liegen lokal unter `client/public/maps/.webp` (960 px breit, je ca. 50–90 KB). `"image"` in `map-pools.json` verweist darauf. Neue oder fehlende Bilder lädt `npm run images` von [ghostcap-gaming/cs2-map-images](https://github.com/ghostcap-gaming/cs2-map-images), verkleinert sie und trägt den Pfad ein (`npm run images -- --force` lädt alle neu). Die Bilder stammen aus dem Spiel; die Rechte liegen bei Valve. Ohne Bild zeigt die Kachel ein Muster in der Map-Farbe. - **Seiten-Embleme** für CT und T liegen unter `client/public/sides/ct.png` und `client/public/sides/t.png` (quadratisch, z. B. 256×256). Fehlt eine Datei, erscheint ein schlichtes Ersatzsymbol. +- **Logo und Farben:** Das MaxLAN-e.V.-Logo liegt freigestellt unter `client/public/brand/maxlan-logo.webp`. Die Farben stehen als Variablen am Anfang von `client/src/styles.css`: Logo-Blau `#344A99` für Team A und Hauptbuttons, Logo-Rot `#A72A1C` für Team B und den Abschluss der Kopfzeile, jeweils aufgehellt für die Lesbarkeit. - Bestehende Matches behalten die Map-Liste, mit der sie erstellt wurden. Neue Bilder erscheinen in neu erstellten Matches. > Die mitgelieferten Map-Pools entsprechen dem Stand der Entwicklung. Valve ändert den aktiven Map-Pool regelmäßig. Map-IDs bitte gegen die eigene Serverinstallation prüfen. Eine Map, die nicht existiert, führt zu „Konfiguration fehlgeschlagen“ mit Meldung. diff --git a/client/index.html b/client/index.html index 95d5713..c0bd84c 100644 --- a/client/index.html +++ b/client/index.html @@ -3,9 +3,9 @@ - - CS2 Mapveto - + + CS2 Mapveto – MaxLAN e.V. + GTF^iNk&ECMFV*$VenIMj{Ux86z< zI)fI|pXj`66FFE-I)TC;Fu!gK*RVe1{0YMHf(_h(@!0XR0qZU8dh_6HIeq5A8PRN@ z1m0d}&sduU!&(hj!94ElDT6nq(?|o{i;kXka8K$p-UNHV(Nkc%)Mly${)m%j4*XtC zX4+7gb@Id&{0x-%} zfW&FXkXJ&O>l6|<$uT@Cp~18Zi7|2zOTaA4JS5(dlei=y$uaaI;bqWKbR?n8aR-U> z$dmJUR7Bp~B?MOc z9Z2*f0b^z&5ZH8+6FDj3(1Z^H+mqx-UJ>!wX#x`G$eG+D0&^Xz5|+rRoEMQa%0l2e zIhI2r-VF{QFhI`bez5*DbWpona!60<_Sol?qLyaU zD7T&=4UOLYX686B` z{Nc8%P*{t5W%LH_ps;y7ZWo?d4NBWryKX%wqe*}`x0#-PhUud+lz!d?$7Ol%pz!6) zr!2_y_M;7)L3L$+KwYp2)u{Ih+ zTcKVxo+2d126dahgVgkp22|JKntm1T3rNjP2kI?UFunMv1ezw^Uh)wA0{ZKg+onNA^vMl95rRd=vOiODGqC@d=MV~4Hbj| z+Z-`rU*lT1pX8y`BkoXCjD8nI$Zw7)ib+HC7xX9&eujiFq_wz!jwj;Wk`knH`v*!u z$DE>!IK+QHPx7#0EzWh7_+-Mo2CHDdnjT#%v0+gfT?^_}vcXigv)NC!!raKx4I8%9 zWaS~uu*>xLW5pYf{7+9$&1UoY`Q_!M)oQ)IzP-J*+wZNQHDBeCvvEQ+|M19KTGGI^ zyB`c59E3vQ@ZsUnQ6zGF9F0a}u~0t|jh*Il7Z(@j=jYjMCX+ckOQ+MPr>RtIQrxPX zTT&bNkJW2ueS!U8@Zca63WpC5kB%ady1|Yn=6me+I+3dd+0DTCG+pl}fo>N?19nan?&dgSm%VtyZgkuNarh z<#KLBRIJ8ZFZ)e}tMwXZy%H2g_cA6_{d=g_IHR@|s@7|q_3DACK)GIHtwt4WSL!wE z_41}sqGq;QtyU|QN~K&b=Ui6i3-uc3$&d8}-fe@PD!6?Xs^E_sI1&`1|sApcEGt1sryuB2!(+aFgwdEcaB{^0G1_?(}%Iry^U4tlzLb z4vISKKz=TSf1d4BYOjy0??1Pwkv7+rfP+q}ObE+31^36KHCkpvNKyzg-CDfa(h=Af z8K%Fukko_jxLN~0O#}dHT=$q2MF(71P`BHOa!l`|64t=JPn-!h{FAc^p&>0kdTnSH z>@ngzV8e^>i=2pjb2zn0H%bkb74{0nh82#f=68(?EiRZjSYKJDiAxTW|M2l ze)hq>LcFtVi0U!+!GzF{vVo2q9ss8#jIOw@lr5NXx0!B~Er2~l+^1~qaT!_2&8k`B zirUWP2V0W357{uU1%LP>2Z|s)}q6#6I-Ig>w;G zkUXqpp6k(eF2UUxV50(CUQWhTPn`*eKgoNif7Z?b9FaImaNVkMo1!{XP0=CPJ$$su zhAjbuAEF{kM!2wJGk&nI6Tg=YAuVW=>uvbwm_X-MOMU=2)WG%11fQDs9&=kv2q~EX zdxTVG*qX!Y&LO(3gqmE>E?aTGu%$_5l{}>q)5i1wpvZMo*m=I8M zZ)K4QNdf0I^LvcrayjrhR6MQWGWu%iW~m~i@IG)%-Stm6BWkR2;) zT#tP!POVUe33F`YZMGPxzF@2NsL4RQSB3kF4VfOh=&Q43Np*tlbwozi%E%iN=6{GD zm<(HZ`c@}B=z@QLk&Bwn-KD@a4fmWrp91=18#f2c-3bg!GLYFE4R1>~2twP}bm=ZDk#D#AE`}wrw;PQ{qh70)OT|L|A)n6|3WZ{^SSppu?#>5srmj|x;{IJOWmR!!EoAAQ;pO{?+x)-*^;$y-ILy1rO3#KGAtt+9i zvNGXrb62qIf)*5$_o~AC0MkRtV0O$z-RPNg@(OdY&=nJAEgizXw^){-?XnVb-P)EP z_8rn<;7MGauQvsYbE*bSxjF@5oYaaUqH@GL$8~AtA8foi$nm7ljT)kaO%1=;*w>T} zv?eaiw($z9rBd>fqIjGLlxAD8&Syg=;&*2}1%JPb#AIhApLF=a*VgP@0D; zgU;1!gJ+UN9g{Gwl4g{a^FZ9AA53L)0oePZr3L7mR7HJ}5Bph$y>F|!;Gv+bBjWWu zqT|`D>)jwM>8ryuI%Wm!F;Q5|A{!ktVc*Q~i_H}*HB^Mup-&ajXsm5FC7WvwYC-EQ zK~ds8K*tjoQ67eFN$n0doeuRQ?}LmZ;_q!Ry$+j5!R`+%#Gr7Qa_WNWh=%?v+DaI9 zf1(GCW~8+I#5!~hmikHcGS|7$E`Gvg6A|!7$S|j@Am+P!DVTnE(PYGE6+dCX zAfo|M-)j8fovW5uB<{JkQDvBj)?Z;*a+AOwGgk&h6QevwCDyxHMTWz(zP(5?dv$yN zaCd!?I`l7$kj%qki8W^AFO=;6-oy;}lVsfAQiT;s#)H#~Tle|WgNzN<7ItM}QX^)cd~hjC?qX#4`kd6M~I;^f;3 zI-gP3vBY;potKpr;Im)CF5 z`HrOCn7AaOWpvI_w{a5u7i7Ais@T+rz$GGK086;`@9^WZ!q zxmzaAh?dd$hPsXaf!|9O{i=#xoC-tPL#)1-ms}IpCQOuw3MRa!T#>y#n*HOAf zGm5a`WU#2}iwux*NU=Vti6m>e`H1s>~2;e-a&U zhpiM$jO9(Nm|1^;aclPv7XbTX4~JI~*19zw3vXM*yaJO+D-jb>bS{(GDoncmY{OrC zbHsY6sMM{QGF1!^`=J@+N6k%{FuP%95N2P4f3*v+?-BEz8mx6`sMGoGBq{tfg`zpC zFf_<)*c7n#H`@SvhPd6IYRcW3rw$%cIR}d#b3q2bsl0{jKUx19TaEZP)WFxJDRy{X zRk2}Z&78|xjZ8NzRQ_aVV4qe%DK(WY&3*@<9G+nr86l$Wrnw_?l(V#AZaixaf3a1t z`$=g{34Gm|p07^dt5?zak%69X17jY4{I-QlA|kiBq=f}5mt-~l*L!A5k=j``mF^5h z%yH)DzR`iHBMVe9R~xi6TK(H4!CfZR`%19houQJF$8GAkX2xS>*;HYe7_UrZ|6Yq= zpHN0uN-ABNu@>KJh|Ib!jBb|6a?Hdb@dn-v8WH+?H`q2w{otDltaoQ<8UuHUB%dq5remnU<`LEVtf1x;ii0~vvb_qh=?wCL`@LTn`4v1mgPz#}B>spG z2`A7lxbH~AGd`?2fS$M>hjgGjzV@)=XB*6~W29w&gAF&1pE}nJX*%)2h69Js2ACH~ z+eJQ1ID5)WKGN9F7kBimf;T`~AF{nTdI~&o(mc(D6$j5ESRY9HTQ1ByckWr<-TL*_ zxy~Is^I%;e8yx>&dUNbtvxLYN7nm^Z(D?_(&pEQmZKj|@C&IBqwi)JmaOm7J6v;+U zS>VulW0Q*mH?drD(3>O06sAoibJ9yp%Xb&^dJKSrtUlVZ2Tap|5yIs`z!tj_NV6Jxcw*lN9iBzf3UxOAC~`B+gx{joAzV$ z-`l?&zG(k-|1JHi+&AivU=QLS&%fb+clQtIAN#NS5BVOzKc0VT|Fiy^_y6XP{g>`n zxlilA@4x4MxqN_sGXB&5tJ?4V&;S2$-|qkOfBJiYe<=SI|DV~*{s;cg^#8yAL*KPu zw?Fc}L%*PZYX8mo|NqzM1O9)g2mFuz-s0cDKX?7P`pf-$@jvj}+Gp@T;r|UeBfkJY z0k7Y79iuxPm7qNtBdXCdZ|gts{bw{6sGsXc{LfvFUO&42!(XQ){^jCDL6Z_8bC>P{ zEI0l;=JNk=8C%3*i|ns){@iIcHm_=j3{WHt>IevzP(Vbwf&wMf5D_k*fQfSdb;?8p zvyh-qpwX26PoC;oH#1%-H=1`Z5-JRskx*pBii0L3R2eZMm0MK0kd*|_ng;`N0wYJ2 zLLtH^rjcXbzYoyM#EOF^BvctOBB05M6$VU5s4`(4c}$)fD^Ps|NIggHTCT?2GVh;7 zmwfsxyXVnmqISoD;~Gsw>eJ3=oCBI`gi+w@SI9^wDqq zVh7G3Eb)7HI0OiWbIkxsKn+yel^8ob|R!*GvRA-*=jIDdt0j3ucwr0-pUtmC%?;9wk2usAi z(6hS0;?_G-(A+pw{DG0Wm-S7$y1s(c(nG|HZ}muv*&rSSi56(Oc@)1{D9wS8a;sK* zF+PddIeDNcK$h)OI-fHAlE>*G=GiEw^_!;pPy%PbZ|ZA&vb&vn$RMI6lZy&w*V3<$ z09<+^u-hb(MPuWzhd^Is1vzaA7;L`)?GO-iBTw-a!mi<98 z=D1uf`s7%y1RdKeEO%ai$GoXEPH~~sIt|ia$Ax_fMd$0|5u}`Cmve(`c)=QRIdUe* zaU!6}i4_J+4HE(EH8#d^gpb3$OD{j=%;1;z!PeKjFg%OI*SBiSp0hiW?@zF7sIu>$ zMV5*PsFmecX*E5aH33P`-OuN+eS^%SZb0QZrX*AuF(RPJH!J|LzU;h6s4`+jKp_v6 zDVut*8Uj-EL@wKGpE_Xem5?B$ky&@oqRYO07G3k`uz&#m@+F`rbU{uzfqM7!toM2; zaBXyodOV@aT|=pdhKGI5pE3Mhjz&dL5WOB|I<4k9>@Cyg0Wd8j6ynCIVp#N*l%MOW zO0pC?Nzt$8{9le-XZKk`Az=f7UFEc><(pV?ZHR$Z!7nOWx;797MFgV!2$vGUKM9qr zc`GyOEYQ_yCG}emAODlECL}y0+I)EP`ralUTrJj$$Y~)FGj(YI-fmCps17d3JNqn% zZb*8mTO6$Yn9p1nu~<%tbTKHeoIaWTF4YHz6I9`e?l)|>VP05CJU>KWYJbkjc&eC4 zbx2dkcdCY;JG^c98n}k13z%b%SR+Cq>gPCk(EB?ByG9o78|vtdakKgS#E<|005~}+ z7D*i6v9H6a(R_IIfEq&(0|o2LG%+3U5rQ<;7E}oior%;Ltt>>8g|nZRCJs)harchx zA72BD?NS8~8a^s@*+*L;i2>3Ex(2kI{kKMXL)$m8yYoE-hTXz^YAwfPRk4|>u@QHk?Z z?!6foK-q}^000Q4nwm4%A-U5BHIaG`aI#LW=X>vkSk7)Z5hWh7B}j}yFW9NmDj(pI z3IV*868?Cj&?q+qj5(u!yV=KLwQ4)tBZMl4`}rp*4a$M)90NW_!_g(PewLd%=q@M! z8PvwX2)N^T0A<9@%mr$JMq)B?y+m2HE>AvKR}}{yT%Yt8oh9>gzk0%XT`*^d+e5cAiNpW^000S92ETZ1?N78bcsW3; zDwzdh$88axme4IQpR4B%Qnd?v39D2?aky>@^*D`WXn(CI^>1o8W< z%e#Y1t^Bt(>)DarUmP?iOW5ReYkYwYGY6qn(sY$RPUc#zthM05?T=`#2aa6K;nF-h zXvshR+fV-4H~#As{p0g*`IT+CWHehbZI*`&002v6)p@K|q>VC~tSk`_gXH{KV!GK$ zb7n)OJcDG(F(1}V4Dmgzj;!BqVGv0sCpA#s&OIkr4|wE24b`Ko16&XkT9z7~78ZhQJ>n}X;Q=v^sn?$rEjf`tx{ z*A!C~bGxxoL!NYVHKlD!d>_Y6tRSCPh?zm_PVLverHpts32dqFp`=2@H@X>8+e=#H)r!%y^X~i zfxj!$gi%M;k*4iM>tgn6C#aTA!GijsE5eIBbO1}ZgsuO?0bAR9SLK*9dwqKindtY2 zhia?&@DBWZL$SnTP72oc5SaJrWGOv-(jN#(y|6!(&9-}NZbOO~j9HyoL4(I|tQk;j zsPVV%YUx}(b$;a#sD>7&6d9_NXgnA~A13viByR`**YCRH_NUTF zEUe1)J`OdQTzZ7>xQ01oTuxRQ;@$J4ta~ko7_6(SRGfbiujUeiVo24~Bz7b6#y(az zs_4*bkm=1e1<+VhY73ySk9+{I@E;^2#~_pj==pg3Ap5AB)GI z1@nfVmFgAsRGSzx`)F@IQ;)kh?$B_8zExJwj&^4*Wf_2$J0-xWiS{-dgbnDlFeuSV z<0Czs3AmIB#hiYVL01@`eig+jC(roV>5D>VPb_ZEG{iG96cxdtcyQ&EXc{1}J`^07 z_!id*<7DQWfM~7PAT*B<`?!6hi2c4{%<$^u+iKMx&?e5Sumz$8>`*(2@rc;}&CFBV z#WNU$tdHCxzpi90o)Y1{+HWT8Oez1K*i%@S62h8enBgedHvelDAqamdy)I*KVS2+XeiO4G&&2EeAAS9|X3fWLmpWy*{TjSCpfHcX_ zA8OqIZKJG=1YyCYb2{Y5+`BZXSJ}|cvdMKQ43ZCJhiC=%+}?=F08dETKv<~&^} zMJnnvc-TEcun&@-uqQ=uV8krG{7xca{(WmTvsVT36Y^*7PLKD}OV6i@3D;%WHKqY5 zK-Eiv^tJBD+$(gT?G=We7R92fk51lDeue5%s31gK0Q8%cMo!K-6St=@o6H@Pan(y) zEu&N<4g%;%RUMgX0-37r0<81Z2gEaA*YqmvQN8c4CC_e&LxQPA_zfTQa-98wY>=I)2aJQKY=Y zeFG09<}J4!^gO<8@aHe#%Q})*&@eScxruM>@rXnb1`C7>->Py{s(>8}7$3qs2MSgI zsNmkQbP|wwe;122EcylEvcrhMhX+{+_D*VAleu!6XOQ}s&?z!Vp_O7LA3&-liKzht`(!F=}MM*J$;q*JNPmSo;A*hA_kHOO$r2h`y(U%Z1KkwW9y0 z$82f6&{AYl-9@)j0R9se_oyBC?0^3|Mpbdhox9aX{X+a*e(mL=XWR5f^~BcvQ<+BU zp7l-%#7bd}9+l{QRG{%Ki6?K`Z~Fh`of}ukm&zhRPvi_sG|%f9q-EEzPeCym9kKW8 z_d0AQD35PAN0^d)O*XeN`~J1SR?VJ}{+`CHjLsOqZpw97ioU!441rW*{?C0Mr&3qw zqKzc=3yRaUP?z~t;xi#$KS2&ik|yy|^=9A1wOyZlZR5wUN!Y|pObaw?_czuADBDpw;#62G&ybT2MV^u$jM*dc5mIF z%ptb-r<3_{=ES=|W}S;fi`ods9UWbS3xki*Bi{Owf6hoJ@~3TzSM2L^gC&;&%9A2g z{lJ?}Q{TUS5xXuX&|m?(m~jdwlD=Be(!wXZUA_UTI_CN&{+gEKkqhN5k2|#)pb#O4 z+lyiL>Cs^lQvpSZi4lXeA>5)EhQt9Zh!y;mmvyMepoU^M>huI#(hV}V<|~M$FtK$% zs6USi?m%r`-}F9QKX-RRHV*Cz>F<>I>sMc65o4j=VU4&%;u){HEg?Ih6-m))GQX8W z{$3ZOLa2_2bja#=(SyQ#=n{{}|Nc}wff4C7I^h@G9zx}RYf!IkF|Q;n^>Y|D)R9cz7WZh3}ji z8oCb0dUk$RAp-Lswee9R~drHAT%HCB7tP)i8-L%`(x zWg@sL57{VkF|()dr={H|B^23ZeYM+_siK^b`hWR+wSUHXz-!y-PQ|vPV1ao z<#5~mi+~JJ7B;zb%VJ4(&UwR4GfS_;*q_WJ3b~uV&4&54PM;Ks@Gd1l->D=YGq%S5YUvwT)s3OkyD?S zs1|RnOchX3HZZe1i$^1mS9I}buLe^WeH;LR{8Rx!@G;7nJkl*6-QF&vC}@VEf)Ezn z5o+^Jk^-4mB<0oQK_fCMQEU3O2%}tD(R9xp;Ob!_QF|&4uw_6)iSbM{4I;{ zX#2S@W-0Qq)wlR}(^cR~p0i{e@7=XrrJ`pwIYm4hLYqneaRpw2GM=UFt@Lc6v`_SY zt%r4n8=ZnuorBuKbg=A>uqB(O3}b`(_71A@tF)mp#*E z_I71t_BMzk5_YAS+o(XQBErR(t+jz6_R|ulT*wH&`&a3<<8*KKYavzAeg6Oi4xO8l z^qt)K=PbwPr3*lZwRP3H`iHQ5%7C-lBL4^n#dJ)sYTA@Nc63=6!TqTv#OtMpkU z{s_GJdZ`eUZz6GTDoh3Ki;9eA*hHsR6nH}Uc@$gl!VU`+ z;hS

D2q(c=Y>@$YPGr1SOH4z{YWIFd3UXjP4!E#(e-#Hfl?;$b76XNGSRMB8``( zt1A*Q50;()qSVJP0mNt3P&APcnqo=4umAC2=y`AD$V>18dgFg!`ay49dFTa5PxOD4 zn;v}l1J7h5xq34wjK(P8G95#%zW(w(YOMCN)859CI&G?hX@>2NsEo;J! zn6YqAO{inVUEA0I4Q3?>NSGhm6XpgGsa;`!fuivSL3pJ%jWUomLp>H|y@-yTucf&C zk6HlgEK*_9Y$)F!(3UVzkQE_QWo8pbrW$g^GI?v|5 zSwo|{MnVTL`^Z2%e`#Y@1DA)7dXvr1r>I!33cLjn#vPHGpW zC9(26luF{dir1G9tZspyT`!6HOtmcCql0BO)T{GHxe$l>ZBY3;oia)qz zReTR#v~Pz=_{&65omq`NC7bM_Wk+q03UF8PT3av`(_xDnXJK)};Nl3J8U;H(2IIII z1Hk2~2fUc%T{-4yn(`$fj#WPlA;u!m|iFmxdR^4RCMKc7~Dfp47)$ebE1ba*@XurA$# z@sI5#fR!Q;J>ffx-qF1)WHe|zHXHip%bc)7crtuTJ4i%iW*J@Ar@4iQj@UV7@$m#D z^>w_>k483r{=vobpuYrXR>rAGg;_H}?+}3L0(O-#GrTXe|D@}zx}h?HX1*<#HQwck zcsHBI8r;XiXm*sLExaid{cc`YVi(!V$Egh=Wtp_Co3Le7?b={d$RKfr599wD*oSE2 z`F&whV|D41wp+wBoX23fR*glZb{;vdfqt*AZCmLCjlU3KFCYhxd8*FhVUQ8ju+g97_D`j8)oYI(^E)Itfto4(u(oCf zc0Y{@bNKlRp)x;QLt-=l001E=g_V43DIEgWAY+nzbDwxNkphNHb#nI6V?xyU;qEu> zc_0U340lxZ5wrp-k-6jMDL`Y!Q7;$&2LagdnBt&hNnOWSQV3XBI0-?R{x*k-lB4;- zUhzSItSS=q`?CKvPnh~PpfCbt%`HygT zE)06(86ad5HPo%NC*Eq$j72?NK(&Y?@Be7z;>AziI%53?4_XkK*>6k-hIIBx|4#q% z?eE6WBj}{Jm7|W&(cTjpK#+A0)F&IF-SAJ+Cns-M%e{Ep$H%hK@N$#6$&Pu+b=SZE z4tsMq^S-x#M#0QaFa9swTB zqYh>x=Cl3QtTXO<*oWyf<+|_0?5}?G^+3GkHL)Y&0Zv%0@>-v!pfB!R?iKvQtCcFt zj?uPQgvpOfFh=TDitoE)@8UzT8l5MX0$oX7gFyW|*Xj z|A6ZM|HR?{;z57n0fv)(2foEA%!WJtOr8uB@X5>MRR8BK5H^51fnKynFV+-RXm><@ z)02r(oyi9>Oc!iZ0cj~31w@@Qo=KLFQO+nqDd2$LR{(1fGoiLTWK zJ3pOqh?7ck$@g@4bkZ<_YrR_KN;s=*1aO5&C-M%%eq(IUW zD-hHC2z%-b

- - - CS2 Mapveto + + MaxLAN e.V. + CS2 Mapveto {config?.server.simulated && ( diff --git a/client/src/styles.css b/client/src/styles.css index 80bc200..338d146 100644 --- a/client/src/styles.css +++ b/client/src/styles.css @@ -1,21 +1,31 @@ /* ---------- Tokens ---------- */ :root { - --bg: #10151f; - --surface: #161d2a; - --surface-2: #1d2636; - --line: #2a3448; - --line-strong: #3a4760; - --text: #e6ebf2; - --muted: #8a96ab; + /* MaxLAN-Farben aus dem Logo: Blau #344A99, Rot #A72A1C auf Schwarz */ + --brand-blue: #344a99; + --brand-red: #a72a1c; - --team-a: #3cc6c0; - --team-b: #e86fa0; - --ct: #6ca8e8; - --t: #dda84a; + --bg: #090b11; + --bg-rgb: 9, 11, 17; + --surface: #11141e; + --surface-2: #191d2b; + --line: #232939; + --line-strong: #343c53; + --text: #e8ebf3; + --muted: #8b93a8; + + /* Teamfarben: Logo-Blau und -Rot, aufgehellt für Lesbarkeit auf dunklem Grund */ + --team-a: #6383e6; + --team-b: #e5503c; + --primary: #3b5bcc; + --primary-hover: #4a6ae0; + --link: #7b97f0; + /* Seitenfarben aus den CT/T-Emblemen */ + --ct: #9fb3d1; + --t: #d2bd8e; --ok: #49d48f; --pending: #e8c25a; - --error: #f0605d; + --error: #ff8a3d; --demo: #b39bff; --display: 'Barlow Condensed', 'Arial Narrow', sans-serif; @@ -39,12 +49,12 @@ h1 { font-size: clamp(2rem, 4vw, 2.75rem); } h2 { font-size: 1.375rem; } h3 { font-size: 1.0625rem; } p { margin: 0 0 .75em; } -a { color: var(--ct); } +a { color: var(--link); } code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .875em; } .muted { color: var(--muted); } .small { font-size: .875rem; } .lead { color: var(--muted); max-width: 60ch; font-size: 1.0625rem; } -:focus-visible { outline: 2px solid var(--ct); outline-offset: 2px; } +:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } .tone-ok { color: var(--ok); } .tone-pending { color: var(--pending); } @@ -57,12 +67,15 @@ code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-siz /* ---------- Layout ---------- */ .topbar { display: flex; align-items: center; gap: 16px; - padding: 12px clamp(16px, 4vw, 40px); - border-bottom: 1px solid var(--line); - background: var(--surface); + padding: 10px clamp(16px, 4vw, 40px); + /* Schwarz wie der Logo-Hintergrund, roter Abschluss wie das X */ + border-bottom: 2px solid var(--brand-red); + background: #000; position: sticky; top: 0; z-index: 10; } -.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 1.25rem var(--display); } +.brand { display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; } +.brand-logo { height: 42px; width: auto; display: block; } +.brand-app { font: 600 1.125rem var(--display); color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line-strong); white-space: nowrap; } .topbar nav { margin-left: auto; display: flex; align-items: center; gap: 16px; } .nav-link { color: var(--muted); text-decoration: none; } .nav-link:hover { color: var(--text); } @@ -84,16 +97,16 @@ code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-siz } .btn:hover:not(:disabled) { border-color: var(--muted); } .btn:disabled { opacity: .45; cursor: not-allowed; } -.btn-primary { background: var(--team-a); border-color: var(--team-a); color: #06201f; } -.btn-primary:hover:not(:disabled) { background: #5ad6d0; border-color: #5ad6d0; } -.btn-danger { background: var(--error); border-color: var(--error); color: #2a0606; } +.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } +.btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); } +.btn-danger { background: var(--error); border-color: var(--error); color: #2a1204; } .btn-ct { background: color-mix(in srgb, var(--ct) 22%, var(--surface)); border-color: var(--ct); } .btn-t { background: color-mix(in srgb, var(--t) 22%, var(--surface)); border-color: var(--t); } .btn-ghost { background: transparent; } .btn-sm { padding: 5px 12px; font-size: .875rem; } .btn-lg { padding: 13px 22px; font-size: 1.0625rem; } .btn.danger, .link-btn.danger { color: var(--error); } -.link-btn { background: none; border: 0; padding: 0; color: var(--ct); font: inherit; font-size: .875rem; cursor: pointer; } +.link-btn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-size: .875rem; cursor: pointer; } .link-btn:disabled { opacity: .5; cursor: not-allowed; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } @@ -102,13 +115,13 @@ input, select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px 12px; min-width: 0; } -input:focus, select:focus { border-color: var(--ct); outline: none; } +input:focus, select:focus { border-color: var(--link); outline: none; } .hint { color: var(--muted); font-size: .8125rem; } .field-error { color: var(--error); font-size: .875rem; margin-top: 6px; } .row { display: flex; gap: 10px; flex-wrap: wrap; } .alert { border: 1px solid var(--line-strong); background: var(--surface); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; } -.alert-error { border-color: var(--error); color: #ffc9c7; } +.alert-error { border-color: var(--error); color: #ffd2b8; } .alert-demo { border-color: color-mix(in srgb, var(--demo) 55%, transparent); background: color-mix(in srgb, var(--demo) 9%, var(--surface)); color: #ded3ff; font-size: .875rem; } .empty { text-align: center; padding: 80px 16px; } @@ -131,7 +144,7 @@ input:focus, select:focus { border-color: var(--ct); outline: none; } .vs { color: var(--muted); font: 500 .9375rem var(--body); } .vs.big { font-size: 1.25rem; align-self: center; } .match-row-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .875rem; color: var(--muted); } -.mine { color: var(--team-a); } +.mine { color: var(--link); } .group-closed .match-row-teams { opacity: .7; } /* ---------- Match erstellen ---------- */ @@ -150,9 +163,9 @@ input:focus, select:focus { border-color: var(--ct); outline: none; } .choice-card strong { font: 600 1.375rem var(--display); } .choice-card span { color: var(--muted); font-size: .875rem; } .choice-card small { color: var(--muted); } -.choice-card.is-on { border-color: var(--team-a); box-shadow: inset 0 0 0 1px var(--team-a); } +.choice-card.is-on { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); } .choice-card.is-off { opacity: .45; cursor: not-allowed; } -.choice-card:has(input:focus-visible) { outline: 2px solid var(--ct); outline-offset: 2px; } +.choice-card:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; } .flow-preview { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 12px 0 0; } .flow-step { font-size: .75rem; padding: 3px 8px; border-radius: 3px; background: var(--surface-2); display: flex; flex-direction: column; line-height: 1.2; } .flow-step small { color: var(--muted); font-size: .6875rem; } @@ -243,7 +256,7 @@ input:focus, select:focus { border-color: var(--ct); outline: none; } /* Abdunkeln nach unten, damit Name und Status auf jedem Bild lesbar bleiben */ .map-art::after { content: ''; position: absolute; inset: 0; - background: linear-gradient(180deg, rgba(16, 21, 31, .05) 30%, rgba(16, 21, 31, .88) 100%); + background: linear-gradient(180deg, rgba(var(--bg-rgb), .05) 30%, rgba(var(--bg-rgb), .88) 100%); } .map-name, .map-status { position: relative; z-index: 1; } .map-name { font: 700 1.625rem/1 var(--display); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); } @@ -251,7 +264,7 @@ input:focus, select:focus { border-color: var(--ct); outline: none; } .map-tile:not(:disabled) { cursor: pointer; } .map-tile:not(:disabled):hover { transform: translateY(-2px); } .map-tile:focus-visible { outline: none; } -.map-tile:focus-visible::after { content: ''; position: absolute; inset: 0; z-index: 3; box-shadow: inset 0 0 0 3px var(--ct); } +.map-tile:focus-visible::after { content: ''; position: absolute; inset: 0; z-index: 3; box-shadow: inset 0 0 0 3px var(--link); } /* Gebannt: entsättigt, mit diagonalem Strich in der Farbe des bannenden Teams */ .map-tile.status-banned { filter: grayscale(.9) brightness(.6); } @@ -277,14 +290,14 @@ input:focus, select:focus { border-color: var(--ct); outline: none; } .veto-confirm .btn { width: 100%; } .side-choice { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .side-choice-art { opacity: .45; } -.side-choice-art::after { background: linear-gradient(90deg, rgba(16, 21, 31, .92), rgba(16, 21, 31, .55)); } +.side-choice-art::after { background: linear-gradient(90deg, rgba(var(--bg-rgb), .92), rgba(var(--bg-rgb), .55)); } .side-choice-body { position: relative; z-index: 1; padding: 18px; } .side-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .side-option { --side: var(--ct); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--text); - background: color-mix(in srgb, var(--side) 16%, rgba(16, 21, 31, .75)); + background: color-mix(in srgb, var(--side) 16%, rgba(var(--bg-rgb), .75)); border: 2px solid color-mix(in srgb, var(--side) 70%, transparent); border-radius: var(--radius); transition: background .15s, border-color .15s, transform .15s; } @@ -292,7 +305,7 @@ input:focus, select:focus { border-color: var(--ct); outline: none; } .side-option .side-icon { grid-row: 1 / 3; color: var(--side); } .side-option-name { font: 700 1.375rem/1.1 var(--display); color: var(--side); } .side-option-sub { font-size: .8125rem; color: var(--muted); } -.side-option:hover:not(:disabled) { background: color-mix(in srgb, var(--side) 28%, rgba(16, 21, 31, .75)); border-color: var(--side); transform: translateY(-1px); } +.side-option:hover:not(:disabled) { background: color-mix(in srgb, var(--side) 28%, rgba(var(--bg-rgb), .75)); border-color: var(--side); transform: translateY(-1px); } .side-option:disabled { opacity: .5; cursor: not-allowed; } .side-icon { flex: none; } @@ -376,7 +389,7 @@ input:focus, select:focus { border-color: var(--ct); outline: none; } .event-log ol { list-style: none; padding: 0; margin: 0; max-height: 360px; overflow-y: auto; font-size: .875rem; } .event-log li { display: flex; gap: 4px; padding: 5px 0; border-bottom: 1px solid var(--line); } -.event-log li.ev-server span { color: color-mix(in srgb, var(--text) 80%, var(--ct)); } +.event-log li.ev-server span { color: color-mix(in srgb, var(--text) 80%, var(--link)); } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 50; @@ -396,6 +409,8 @@ input:focus, select:focus { border-color: var(--ct); outline: none; } .match-grid { grid-template-columns: 1fr; } .topbar { flex-wrap: wrap; gap: 8px 16px; } .demo-flag { order: 3; } + .brand-logo { height: 26px; } + .brand-app { font-size: 1rem; padding-left: 10px; } .create-teams { grid-template-columns: 1fr; } .vs.big { justify-self: center; } .map-grid { grid-template-columns: repeat(2, 1fr); }