| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756675767586759676067616762676367646765676667676768676967706771677267736774677567766777677867796780678167826783678467856786678767886789679067916792679367946795679667976798679968006801680268036804680568066807680868096810681168126813681468156816681768186819682068216822682368246825682668276828682968306831683268336834683568366837683868396840684168426843684468456846684768486849685068516852685368546855685668576858685968606861686268636864686568666867686868696870687168726873687468756876687768786879688068816882688368846885688668876888688968906891689268936894689568966897689868996900690169026903690469056906690769086909691069116912691369146915691669176918691969206921692269236924692569266927692869296930693169326933693469356936693769386939694069416942694369446945694669476948694969506951695269536954695569566957695869596960696169626963696469656966696769686969697069716972697369746975697669776978697969806981698269836984698569866987698869896990699169926993699469956996699769986999700070017002700370047005700670077008700970107011701270137014701570167017701870197020702170227023702470257026702770287029703070317032703370347035703670377038703970407041704270437044704570467047704870497050705170527053705470557056705770587059706070617062706370647065706670677068706970707071707270737074707570767077707870797080708170827083708470857086708770887089709070917092709370947095709670977098709971007101710271037104710571067107710871097110711171127113711471157116711771187119712071217122712371247125712671277128712971307131713271337134713571367137713871397140714171427143714471457146714771487149715071517152715371547155715671577158715971607161716271637164716571667167716871697170717171727173717471757176717771787179718071817182718371847185718671877188718971907191719271937194719571967197719871997200720172027203720472057206720772087209721072117212721372147215721672177218721972207221722272237224722572267227722872297230723172327233723472357236723772387239724072417242724372447245724672477248724972507251725272537254725572567257725872597260726172627263726472657266726772687269727072717272727372747275727672777278727972807281728272837284728572867287728872897290729172927293729472957296729772987299730073017302730373047305730673077308730973107311731273137314731573167317731873197320732173227323732473257326732773287329733073317332733373347335733673377338733973407341734273437344734573467347734873497350735173527353735473557356735773587359736073617362736373647365736673677368736973707371737273737374737573767377737873797380738173827383738473857386738773887389739073917392739373947395739673977398739974007401740274037404740574067407740874097410741174127413741474157416741774187419742074217422742374247425742674277428742974307431743274337434743574367437743874397440744174427443744474457446744774487449745074517452745374547455745674577458745974607461746274637464746574667467746874697470747174727473747474757476747774787479748074817482748374847485748674877488748974907491749274937494749574967497749874997500750175027503750475057506750775087509751075117512751375147515751675177518751975207521752275237524752575267527752875297530753175327533753475357536753775387539754075417542754375447545754675477548754975507551755275537554755575567557755875597560756175627563756475657566756775687569757075717572757375747575757675777578757975807581758275837584758575867587758875897590759175927593759475957596759775987599760076017602760376047605760676077608760976107611761276137614761576167617761876197620762176227623762476257626762776287629763076317632763376347635763676377638763976407641764276437644764576467647764876497650765176527653765476557656765776587659766076617662766376647665766676677668766976707671767276737674767576767677767876797680768176827683768476857686768776887689769076917692769376947695769676977698769977007701770277037704770577067707770877097710771177127713771477157716771777187719772077217722772377247725772677277728772977307731773277337734773577367737773877397740774177427743774477457746774777487749775077517752775377547755775677577758775977607761776277637764776577667767776877697770777177727773777477757776777777787779778077817782778377847785778677877788778977907791779277937794779577967797779877997800780178027803780478057806780778087809781078117812781378147815781678177818781978207821782278237824782578267827782878297830783178327833783478357836783778387839784078417842784378447845784678477848784978507851785278537854785578567857785878597860786178627863786478657866786778687869787078717872787378747875787678777878787978807881788278837884788578867887788878897890789178927893789478957896789778987899790079017902790379047905790679077908790979107911791279137914791579167917791879197920792179227923792479257926792779287929793079317932793379347935793679377938793979407941794279437944794579467947794879497950795179527953795479557956795779587959796079617962796379647965796679677968796979707971797279737974797579767977797879797980798179827983798479857986798779887989799079917992799379947995799679977998799980008001800280038004800580068007800880098010801180128013801480158016801780188019802080218022802380248025802680278028802980308031803280338034803580368037803880398040804180428043804480458046804780488049805080518052805380548055805680578058805980608061806280638064806580668067806880698070807180728073807480758076807780788079808080818082808380848085808680878088808980908091809280938094809580968097809880998100810181028103810481058106810781088109811081118112811381148115811681178118811981208121812281238124812581268127812881298130813181328133813481358136813781388139814081418142814381448145814681478148814981508151815281538154815581568157815881598160816181628163816481658166816781688169817081718172817381748175817681778178817981808181818281838184818581868187818881898190819181928193819481958196819781988199820082018202820382048205820682078208820982108211821282138214821582168217821882198220822182228223822482258226822782288229823082318232823382348235823682378238823982408241824282438244824582468247824882498250825182528253825482558256825782588259826082618262826382648265826682678268826982708271827282738274827582768277827882798280828182828283828482858286828782888289829082918292829382948295829682978298829983008301830283038304830583068307830883098310831183128313831483158316831783188319832083218322832383248325832683278328832983308331833283338334833583368337833883398340834183428343834483458346834783488349835083518352835383548355835683578358835983608361836283638364836583668367836883698370837183728373837483758376837783788379838083818382838383848385838683878388838983908391839283938394839583968397839883998400840184028403840484058406840784088409841084118412841384148415841684178418841984208421842284238424842584268427842884298430843184328433843484358436843784388439844084418442844384448445844684478448844984508451845284538454845584568457845884598460846184628463846484658466846784688469847084718472847384748475847684778478847984808481848284838484848584868487848884898490849184928493849484958496849784988499850085018502850385048505850685078508850985108511851285138514851585168517851885198520852185228523852485258526852785288529853085318532853385348535853685378538853985408541854285438544854585468547854885498550855185528553855485558556855785588559856085618562856385648565856685678568856985708571857285738574857585768577857885798580858185828583858485858586858785888589859085918592859385948595859685978598859986008601860286038604860586068607860886098610861186128613861486158616861786188619862086218622862386248625862686278628862986308631863286338634863586368637863886398640864186428643864486458646864786488649865086518652865386548655865686578658865986608661866286638664866586668667866886698670867186728673867486758676867786788679868086818682868386848685868686878688868986908691869286938694869586968697869886998700870187028703870487058706870787088709871087118712871387148715871687178718871987208721872287238724872587268727872887298730873187328733873487358736873787388739874087418742874387448745874687478748874987508751875287538754875587568757875887598760876187628763876487658766876787688769877087718772877387748775877687778778877987808781878287838784878587868787878887898790879187928793879487958796879787988799880088018802880388048805880688078808880988108811881288138814881588168817881888198820882188228823882488258826882788288829883088318832883388348835883688378838883988408841884288438844884588468847884888498850885188528853885488558856885788588859886088618862886388648865886688678868886988708871887288738874887588768877887888798880888188828883888488858886888788888889889088918892889388948895889688978898889989008901890289038904890589068907890889098910891189128913891489158916891789188919892089218922892389248925892689278928892989308931893289338934893589368937893889398940894189428943894489458946894789488949895089518952895389548955895689578958895989608961896289638964896589668967896889698970897189728973897489758976897789788979898089818982898389848985898689878988898989908991899289938994899589968997899889999000900190029003900490059006900790089009901090119012901390149015901690179018901990209021902290239024902590269027902890299030903190329033903490359036903790389039904090419042904390449045904690479048904990509051905290539054905590569057905890599060906190629063906490659066906790689069907090719072907390749075907690779078907990809081908290839084908590869087908890899090909190929093909490959096909790989099910091019102910391049105910691079108910991109111911291139114911591169117911891199120912191229123912491259126912791289129913091319132913391349135913691379138913991409141914291439144914591469147914891499150915191529153915491559156915791589159916091619162916391649165916691679168916991709171917291739174917591769177917891799180918191829183918491859186918791889189919091919192919391949195919691979198919992009201920292039204920592069207920892099210921192129213921492159216921792189219922092219222922392249225922692279228922992309231923292339234923592369237923892399240924192429243924492459246924792489249925092519252925392549255925692579258925992609261926292639264926592669267926892699270927192729273927492759276927792789279928092819282928392849285928692879288928992909291929292939294929592969297929892999300930193029303930493059306930793089309931093119312931393149315931693179318931993209321932293239324932593269327932893299330933193329333933493359336933793389339934093419342934393449345934693479348934993509351935293539354935593569357935893599360936193629363936493659366936793689369937093719372937393749375937693779378937993809381938293839384938593869387938893899390939193929393939493959396939793989399940094019402940394049405940694079408940994109411941294139414941594169417941894199420942194229423942494259426942794289429943094319432943394349435943694379438943994409441944294439444944594469447944894499450945194529453945494559456945794589459946094619462946394649465946694679468946994709471947294739474947594769477947894799480948194829483948494859486948794889489949094919492949394949495949694979498949995009501950295039504950595069507950895099510951195129513951495159516951795189519952095219522952395249525952695279528952995309531953295339534953595369537953895399540954195429543954495459546954795489549955095519552955395549555955695579558955995609561956295639564956595669567956895699570957195729573957495759576957795789579958095819582958395849585958695879588958995909591959295939594959595969597959895999600960196029603960496059606960796089609961096119612961396149615961696179618961996209621962296239624962596269627962896299630963196329633963496359636963796389639964096419642964396449645964696479648964996509651965296539654965596569657965896599660966196629663966496659666966796689669967096719672967396749675967696779678967996809681968296839684968596869687968896899690969196929693969496959696969796989699970097019702970397049705970697079708970997109711971297139714971597169717971897199720972197229723972497259726972797289729973097319732973397349735973697379738973997409741974297439744974597469747974897499750975197529753975497559756975797589759976097619762976397649765976697679768976997709771977297739774977597769777977897799780978197829783978497859786978797889789979097919792979397949795979697979798979998009801980298039804980598069807980898099810981198129813981498159816981798189819982098219822982398249825982698279828982998309831983298339834983598369837983898399840984198429843984498459846984798489849985098519852985398549855985698579858985998609861986298639864986598669867986898699870987198729873987498759876987798789879988098819882988398849885988698879888988998909891989298939894989598969897989898999900990199029903990499059906990799089909991099119912991399149915991699179918991999209921992299239924992599269927992899299930993199329933993499359936993799389939994099419942994399449945994699479948994999509951995299539954995599569957995899599960996199629963996499659966996799689969997099719972997399749975997699779978997999809981998299839984998599869987998899899990999199929993999499959996999799989999100001000110002100031000410005100061000710008100091001010011100121001310014100151001610017100181001910020100211002210023100241002510026100271002810029100301003110032100331003410035100361003710038100391004010041100421004310044100451004610047100481004910050100511005210053100541005510056100571005810059100601006110062100631006410065100661006710068100691007010071100721007310074100751007610077100781007910080100811008210083100841008510086100871008810089100901009110092100931009410095100961009710098100991010010101101021010310104101051010610107101081010910110101111011210113101141011510116101171011810119101201012110122101231012410125101261012710128101291013010131101321013310134101351013610137101381013910140101411014210143101441014510146101471014810149101501015110152101531015410155101561015710158101591016010161101621016310164101651016610167101681016910170101711017210173101741017510176101771017810179101801018110182101831018410185101861018710188101891019010191101921019310194101951019610197101981019910200102011020210203102041020510206102071020810209102101021110212102131021410215102161021710218102191022010221102221022310224102251022610227102281022910230102311023210233102341023510236102371023810239102401024110242102431024410245102461024710248102491025010251102521025310254102551025610257102581025910260102611026210263102641026510266102671026810269102701027110272102731027410275102761027710278102791028010281102821028310284102851028610287102881028910290102911029210293102941029510296102971029810299103001030110302103031030410305103061030710308103091031010311103121031310314103151031610317103181031910320103211032210323103241032510326103271032810329103301033110332103331033410335103361033710338103391034010341103421034310344103451034610347103481034910350103511035210353103541035510356103571035810359103601036110362103631036410365103661036710368103691037010371103721037310374103751037610377103781037910380103811038210383103841038510386103871038810389103901039110392103931039410395103961039710398103991040010401104021040310404104051040610407104081040910410104111041210413104141041510416104171041810419104201042110422104231042410425104261042710428104291043010431104321043310434104351043610437104381043910440104411044210443104441044510446104471044810449104501045110452104531045410455104561045710458104591046010461104621046310464104651046610467104681046910470104711047210473104741047510476104771047810479104801048110482104831048410485104861048710488104891049010491104921049310494104951049610497104981049910500105011050210503105041050510506105071050810509105101051110512105131051410515105161051710518105191052010521105221052310524105251052610527105281052910530105311053210533105341053510536105371053810539105401054110542105431054410545105461054710548105491055010551105521055310554105551055610557105581055910560105611056210563105641056510566105671056810569105701057110572105731057410575105761057710578105791058010581105821058310584105851058610587105881058910590105911059210593105941059510596105971059810599106001060110602106031060410605106061060710608106091061010611106121061310614106151061610617106181061910620106211062210623106241062510626106271062810629106301063110632106331063410635106361063710638106391064010641106421064310644106451064610647106481064910650106511065210653106541065510656106571065810659106601066110662106631066410665106661066710668106691067010671106721067310674106751067610677106781067910680106811068210683106841068510686106871068810689106901069110692106931069410695106961069710698106991070010701107021070310704107051070610707107081070910710107111071210713107141071510716107171071810719107201072110722107231072410725107261072710728107291073010731107321073310734107351073610737107381073910740107411074210743107441074510746 |
- <!DOCTYPE html>
- <html lang="el" class="dark">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>DebTik | Debian Linux Router</title>
- <link rel="icon" type="image/svg+xml" href="debtik-emblem.svg">
- <link rel="alternate icon" type="image/png" href="debtik-logo.png">
- <script src="https://cdn.tailwindcss.com"></script>
- <script>
- tailwind.config = {
- darkMode: 'class',
- theme: {
- extend: {
- colors: {
- brand: {
- 50: '#ecfdf5',
- 100: '#d1fae5',
- 400: '#34d399',
- 500: '#10b981',
- 600: '#059669',
- 700: '#047857',
- 800: '#065f46',
- 900: '#064e3b',
- }
- }
- }
- }
- }
- </script>
- <link rel="stylesheet" href="style.css?v=2.1">
- </head>
- <body class="bg-[#0b101e] text-slate-100 min-h-screen flex flex-col font-sans antialiased selection:bg-brand-500 selection:text-white">
- <!-- Toast Notification Container -->
- <div id="toast-container" class="fixed top-5 right-5 z-50 flex flex-col space-y-2 pointer-events-none"></div>
- <!-- Main Layout -->
- <div class="flex flex-1 overflow-hidden h-screen">
- <!-- Sidebar -->
- <aside id="sidebar" class="w-64 bg-[#0f172a]/95 border-r border-slate-800 flex flex-col flex-shrink-0 transition-all duration-300 z-30">
- <!-- Brand Header -->
- <div class="h-16 flex items-center px-4 border-b border-slate-800 justify-between bg-slate-950/60">
- <div class="flex items-center space-x-3">
- <img src="debtik-emblem.svg" alt="DebTik" class="w-9 h-9 rounded-xl shadow-lg shadow-rose-900/40 object-contain p-0.5 bg-slate-900 border border-slate-800 flex-shrink-0" />
- <div class="leading-tight">
- <div class="font-black text-sm tracking-wide text-white flex items-center gap-1.5">
- <span>Deb<span class="text-rose-500">T</span><span class="text-sky-400">ik</span></span>
- <span class="text-[9px] bg-rose-500/20 text-rose-300 font-mono px-1.5 py-0.5 rounded border border-rose-500/30 font-bold">ROUTER</span>
- </div>
- <div class="text-[10px] text-slate-400 font-medium">Debian Linux Router</div>
- </div>
- </div>
- </div>
- <!-- Live Health Pill -->
- <div class="px-4 py-3 border-b border-slate-800/60 bg-slate-900/40">
- <div class="flex items-center justify-between text-xs mb-1.5">
- <span class="text-slate-400 font-medium">Gateway Status</span>
- <span class="flex items-center text-emerald-400 font-medium text-[11px]">
- <span class="relative flex h-2 w-2 mr-1.5">
- <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
- <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
- </span>
- Online
- </span>
- </div>
- <div class="text-[11px] text-slate-400 font-mono truncate" id="side-gateway-ip">GW: Scanning...</div>
- </div>
- <!-- Navigation Menu -->
- <nav class="flex-1 px-3 py-3 space-y-1 overflow-y-auto">
- <!-- CATEGORY: OVERVIEW -->
- <div class="px-3 pt-2 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">Overview</div>
- <a href="#dashboard" onclick="navigate('dashboard')" id="nav-dashboard"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group bg-brand-500/10 text-brand-400 border border-brand-500/20">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
- </svg>
- <span>Dashboard</span>
- </div>
- </a>
- <!-- CATEGORY: NETWORKING -->
- <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">Networking</div>
- <a href="#interfaces" onclick="navigate('interfaces')" id="nav-interfaces"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
- </svg>
- <span>Interfaces</span>
- </div>
- <span id="badge-ifaces-count" class="text-[10px] bg-slate-800 text-slate-300 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </a>
- <a href="#dhcp-client" onclick="navigate('dhcp-client')" id="nav-dhcp-client"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
- </svg>
- <span>DHCP Client</span>
- </div>
- <span id="badge-dhcp-client-count" class="text-[10px] bg-slate-800 text-slate-300 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </a>
- <a href="#dhcp-server" onclick="navigate('dhcp-server')" id="nav-dhcp-server"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
- </svg>
- <span>DHCP Server</span>
- </div>
- <span id="badge-dhcp-server-count" class="text-[10px] bg-emerald-950 text-emerald-300 border border-emerald-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </a>
- <a href="#bridge" onclick="navigate('bridge')" id="nav-bridge"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18M5 14v4a2 2 0 002 2h2a2 2 0 002-2v-4m6 0v4a2 2 0 002 2h2a2 2 0 002-2v-4M4 10V6a2 2 0 012-2h12a2 2 0 012 2v4" />
- </svg>
- <span>Bridge</span>
- </div>
- <span id="badge-bridge-count" class="text-[10px] bg-sky-950 text-sky-300 border border-sky-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </a>
- <a href="#firewall" onclick="navigate('firewall')" id="nav-firewall"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
- </svg>
- <span>Firewall</span>
- </div>
- <span id="badge-firewall-count" class="text-[10px] bg-emerald-950 text-emerald-400 border border-emerald-800/50 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </a>
- <!-- CATEGORY: ROUTING -->
- <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">Routing</div>
- <a href="#routes" onclick="navigate('routes')" id="nav-routes"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
- </svg>
- <span>Routes & Policy</span>
- </div>
- <span id="badge-routes-count" class="text-[10px] bg-slate-800 text-slate-300 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </a>
- <a href="#bgp" onclick="navigate('bgp')" id="nav-bgp"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
- </svg>
- <span>BGP Routing</span>
- </div>
- <div class="flex items-center gap-1.5">
- <span id="badge-bgp-dot" class="w-2 h-2 rounded-full bg-slate-600" title="BGP Status"></span>
- <span id="badge-bgp-count" class="text-[10px] bg-purple-950 text-purple-300 border border-purple-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </div>
- </a>
- <a href="#ospf" onclick="navigate('ospf')" id="nav-ospf"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
- </svg>
- <span>OSPF Routing</span>
- </div>
- <div class="flex items-center gap-1.5">
- <span id="badge-ospf-dot" class="w-2 h-2 rounded-full bg-slate-600" title="OSPF Status"></span>
- <span id="badge-ospf-count" class="text-[10px] bg-indigo-950 text-indigo-300 border border-indigo-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </div>
- </a>
- <a href="#routing-filters" onclick="navigate('routing-filters')" id="nav-routing-filters"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
- </svg>
- <span>Routing Filters</span>
- </div>
- <span id="badge-filters-count" class="text-[10px] bg-slate-800 text-slate-300 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </a>
- <!-- CATEGORY: HIGH AVAILABILITY -->
- <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">High Availability</div>
- <a href="#vrrp" onclick="navigate('vrrp')" id="nav-vrrp"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
- </svg>
- <span>VRRP (HA)</span>
- </div>
- <div class="flex items-center gap-1.5">
- <span id="badge-vrrp-dot" class="w-2 h-2 rounded-full bg-slate-600" title="VRRP State"></span>
- <span id="badge-vrrp-count" class="text-[10px] bg-emerald-950 text-emerald-300 border border-emerald-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </div>
- </a>
- <!-- CATEGORY: WAN & ACCESS -->
- <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">WAN & Access</div>
- <a href="#pppoe" onclick="navigate('pppoe')" id="nav-pppoe"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
- </svg>
- <span>PPPoE Client</span>
- </div>
- <span id="badge-pppoe-status" class="w-2 h-2 rounded-full bg-slate-600"></span>
- </a>
- <!-- CATEGORY: VPN & TUNNELS -->
- <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">VPN & Tunnels</div>
- <a href="#wireguard" onclick="navigate('wireguard')" id="nav-wireguard"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
- </svg>
- <span>WireGuard</span>
- </div>
- <span id="badge-wg-status" class="w-2 h-2 rounded-full bg-slate-600"></span>
- </a>
- <a href="#ipsec" onclick="navigate('ipsec')" id="nav-ipsec"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
- </svg>
- <span>IPSec (IKEv2)</span>
- </div>
- <span id="badge-ipsec-status" class="w-2 h-2 rounded-full bg-slate-600"></span>
- </a>
- <a href="#l2tp" onclick="navigate('l2tp')" id="nav-l2tp"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
- </svg>
- <span>L2TP Client</span>
- </div>
- <span id="badge-l2tp-status" class="w-2 h-2 rounded-full bg-slate-600"></span>
- </a>
- <a href="#pptp" onclick="navigate('pptp')" id="nav-pptp"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
- </svg>
- <span>PPTP Client</span>
- </div>
- <span id="badge-pptp-status" class="w-2 h-2 rounded-full bg-slate-600"></span>
- </a>
- <a href="#ppp" onclick="navigate('ppp')" id="nav-ppp"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
- </svg>
- <span>PPP (Servers & Users)</span>
- </div>
- <span id="badge-ppp-sessions" class="text-[10px] bg-violet-950 text-violet-300 border border-violet-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </a>
- <a href="#eoip" onclick="navigate('eoip')" id="nav-eoip"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
- </svg>
- <span>EoIP Tunnels</span>
- </div>
- <span id="badge-eoip-count" class="text-[10px] bg-slate-800 text-slate-300 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </a>
- <a href="#aerotun" onclick="navigate('aerotun')" id="nav-aerotun"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
- </svg>
- <span class="flex items-center gap-1.5">
- <span>AeroTUN</span>
- <span class="text-[9px] px-1 py-0.2 rounded bg-sky-500/20 text-sky-300 border border-sky-500/30 font-semibold font-mono">LZ4</span>
- </span>
- </div>
- <span id="badge-aerotun-count" class="text-[10px] bg-slate-800 text-slate-300 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </a>
- <!-- CATEGORY: DIAGNOSTICS & TOOLS -->
- <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">Diagnostics</div>
- <a href="#tools" onclick="navigate('tools')" id="nav-tools"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
- </svg>
- <span>Troubleshooting Tools</span>
- </div>
- <span class="text-[10px] bg-amber-950 text-amber-300 border border-amber-800/40 px-1.5 py-0.2 rounded-full font-mono">Tools</span>
- </a>
- <a href="#bwtest" onclick="navigate('bwtest')" id="nav-bwtest"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
- </svg>
- <span class="flex items-center gap-1.5">
- <span>Bandwidth Test</span>
- <span class="text-[9px] px-1 py-0.2 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 font-semibold font-mono">BwTest</span>
- </span>
- </div>
- <span id="badge-bwtest-server" class="text-[10px] bg-emerald-950 text-emerald-300 border border-emerald-800/40 px-1.5 py-0.2 rounded-full font-mono">2000</span>
- </a>
- <!-- CATEGORY: SYSTEM -->
- <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">System</div>
- <a href="#persistence" onclick="navigate('persistence')" id="nav-persistence"
- class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
- <div class="flex items-center space-x-2.5">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
- </svg>
- <span>Debian Config</span>
- </div>
- <span class="text-[10px] bg-slate-800 text-slate-400 px-1.5 py-0.2 rounded">.cfg</span>
- </a>
- </nav>
- <!-- Sidebar Footer: Host System Metrics -->
- <div class="p-4 border-t border-slate-800/80 bg-slate-900/60">
- <div class="flex items-center justify-between text-xs text-slate-400 mb-2">
- <span class="truncate font-mono" id="side-hostname">debian-lxc</span>
- <span class="text-[11px] text-slate-500" id="side-uptime">0h 0m</span>
- </div>
- <div class="mb-2">
- <div class="flex justify-between text-[11px] text-slate-400 mb-1">
- <span>CPU Usage</span>
- <span id="side-cpu-val" class="font-mono text-slate-300">0.0%</span>
- </div>
- <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
- <div id="side-cpu-bar" class="bg-brand-500 h-full rounded-full transition-all duration-500" style="width: 5%"></div>
- </div>
- </div>
- <div>
- <div class="flex justify-between text-[11px] text-slate-400 mb-1">
- <span>RAM Usage</span>
- <span id="side-ram-val" class="font-mono text-slate-300">0%</span>
- </div>
- <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
- <div id="side-ram-bar" class="bg-cyan-500 h-full rounded-full transition-all duration-500" style="width: 25%"></div>
- </div>
- </div>
- </div>
- </aside>
- <!-- Main Content Area -->
- <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
- <!-- Top Navbar -->
- <header class="h-16 bg-[#0f172a]/80 backdrop-blur border-b border-slate-800 flex items-center justify-between px-6 z-20">
- <div class="flex items-center space-x-4">
- <button onclick="toggleSidebar()" class="lg:hidden p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800">
- <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
- </svg>
- </button>
- <div class="flex items-center gap-3">
- <img src="debtik-emblem.svg" alt="DebTik" class="w-7 h-7 sm:hidden" />
- <div>
- <h1 id="page-title" class="text-lg font-bold text-white tracking-tight">Dashboard Overview</h1>
- <p id="page-subtitle" class="text-xs text-slate-400">DebTik - Debian Linux Router appliance management</p>
- </div>
- </div>
- </div>
- <div class="flex items-center gap-3">
- <div class="hidden sm:flex items-center gap-2 px-3 py-1 bg-slate-900/90 border border-slate-800 rounded-xl shadow-sm">
- <img src="debtik-emblem.svg" alt="DebTik" class="w-5 h-5" />
- <span class="text-xs font-black text-white tracking-wide">Deb<span class="text-rose-500">T</span><span class="text-sky-400">ik</span></span>
- <span class="text-[10px] text-slate-400 font-mono">Debian Linux Router</span>
- </div>
- </div>
- </header>
- <!-- Scrollable Main Viewport -->
- <main class="flex-1 overflow-y-auto p-6 space-y-6">
- <!-- ================= SECTION: DASHBOARD ================= -->
- <section id="section-dashboard" class="space-y-6">
- <!-- DebTik Hero Brand Banner -->
- <div class="bg-gradient-to-r from-slate-900 via-[#0f172a] to-slate-900 border border-slate-800 rounded-2xl p-5 flex flex-wrap items-center justify-between gap-4 shadow-xl relative overflow-hidden">
- <div class="absolute -right-10 -bottom-10 w-64 h-64 bg-rose-500/5 rounded-full blur-3xl pointer-events-none"></div>
- <div class="flex items-center gap-4 z-10">
- <img src="debtik-logo.png" alt="DebTik - Debian Linux Router" class="w-16 h-16 sm:w-20 sm:h-20 rounded-xl shadow-2xl border border-slate-700/80 object-cover" />
- <div>
- <div class="flex items-center gap-2 mb-1">
- <h2 class="text-xl sm:text-2xl font-black text-white tracking-tight flex items-center gap-2">
- <span>Deb<span class="text-rose-500">T</span><span class="text-sky-400">ik</span></span>
- </h2>
- <span class="px-2 py-0.5 text-[10px] font-mono font-bold rounded-full bg-rose-500/15 text-rose-300 border border-rose-500/30">Debian Linux Router</span>
- <span class="px-2 py-0.5 text-[10px] font-mono font-bold rounded-full bg-emerald-500/15 text-emerald-300 border border-emerald-500/30">v7 Engine</span>
- </div>
- <p class="text-xs text-slate-400 max-w-xl">Enterprise-grade network routing appliance combining the rock-solid stability of Debian Linux with high-performance dynamic routing & advanced policy control.</p>
- </div>
- </div>
- <div class="flex items-center gap-3 z-10">
- <div class="px-3 py-2 bg-slate-950/80 border border-slate-800 rounded-xl text-right">
- <div class="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">Engine</div>
- <div class="text-xs font-mono font-bold text-white flex items-center gap-1.5 justify-end">
- <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
- <span>BIRD 2 + nftables</span>
- </div>
- </div>
- </div>
- </div>
- <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
- <!-- CPU Usage -->
- <div class="bg-slate-900/80 border border-slate-800 rounded-xl p-5 relative overflow-hidden group hover:border-slate-700 transition">
- <div class="flex items-center justify-between mb-3">
- <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">CPU Usage</span>
- <div class="p-2 bg-emerald-500/10 text-emerald-400 rounded-lg">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M3 9h2m-2 6h2m14-6h2m-2 6h2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
- </svg>
- </div>
- </div>
- <div class="flex items-baseline justify-between">
- <div class="flex items-baseline space-x-2">
- <span id="dash-cpu-val" class="text-2xl font-bold text-white">0.0%</span>
- <span id="dash-cpu-cores" class="text-xs text-slate-400 font-mono">0 Cores</span>
- </div>
- <span id="dash-cpu-status" class="text-[11px] font-semibold text-emerald-400 uppercase px-2 py-0.5 rounded bg-emerald-500/10">Normal</span>
- </div>
- <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden my-2.5">
- <div id="dash-cpu-bar" class="h-full rounded-full bg-emerald-500 transition-all duration-500" style="width: 0%"></div>
- </div>
- <div class="text-xs text-slate-400 flex items-center justify-between">
- <span>Load: <span id="dash-cpu-load" class="font-mono text-slate-300">0.00, 0.00, 0.00</span></span>
- <span class="text-[11px] text-slate-500 font-mono">Container vCPU</span>
- </div>
- </div>
- <!-- RAM Usage -->
- <div class="bg-slate-900/80 border border-slate-800 rounded-xl p-5 relative overflow-hidden group hover:border-slate-700 transition">
- <div class="flex items-center justify-between mb-3">
- <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">RAM Usage</span>
- <div class="p-2 bg-indigo-500/10 text-indigo-400 rounded-lg">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
- </svg>
- </div>
- </div>
- <div class="flex items-baseline justify-between">
- <div class="flex items-baseline space-x-2">
- <span id="dash-ram-val" class="text-2xl font-bold text-white">0%</span>
- <span id="dash-ram-used-total" class="text-xs text-slate-400 font-mono">0 / 0 MB</span>
- </div>
- <span id="dash-ram-status" class="text-[11px] font-semibold text-indigo-400 uppercase px-2 py-0.5 rounded bg-indigo-500/10">Active</span>
- </div>
- <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden my-2.5">
- <div id="dash-ram-bar" class="h-full rounded-full bg-indigo-500 transition-all duration-500" style="width: 0%"></div>
- </div>
- <div class="text-xs text-slate-400 flex items-center justify-between">
- <span>Free: <span id="dash-ram-free" class="font-mono text-slate-300">0 MB</span></span>
- <span class="text-[11px] text-slate-500 font-mono">Dynamic Alloc</span>
- </div>
- </div>
- <!-- Live Traffic -->
- <div class="bg-slate-900/80 border border-slate-800 rounded-xl p-5 relative overflow-hidden group hover:border-slate-700 transition">
- <div class="flex items-center justify-between mb-3">
- <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Live Traffic</span>
- <div class="p-2 bg-amber-500/10 text-amber-400 rounded-lg">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
- </svg>
- </div>
- </div>
- <div class="space-y-1">
- <div class="flex items-center justify-between text-xs">
- <span class="text-slate-400 flex items-center gap-1.5"><span class="text-emerald-400 font-bold">↓</span> RX:</span>
- <span id="stat-traffic-rx" class="font-mono font-semibold text-emerald-400 text-sm">0 B/s</span>
- </div>
- <div class="flex items-center justify-between text-xs">
- <span class="text-slate-400 flex items-center gap-1.5"><span class="text-cyan-400 font-bold">↑</span> TX:</span>
- <span id="stat-traffic-tx" class="font-mono font-semibold text-cyan-400 text-sm">0 B/s</span>
- </div>
- </div>
- <div class="mt-2.5 pt-2 border-t border-slate-800/80 text-[11px] text-slate-500 flex items-center justify-between font-mono">
- <span>Throughput</span>
- <span class="text-emerald-400 font-semibold flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> Streaming</span>
- </div>
- </div>
- </div>
- <!-- Port Matrix -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
- <div class="flex items-center justify-between mb-4">
- <div>
- <h3 class="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
- <span>Hardware & Virtual Port Matrix</span>
- <span class="text-[10px] bg-slate-800 text-slate-400 font-normal px-2 py-0.5 rounded-full">Live Hardware State</span>
- </h3>
- </div>
- </div>
- <div id="port-matrix" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3"></div>
- </div>
- <!-- Quick Overview: Interfaces -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
- <div class="flex items-center justify-between mb-4">
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <span>Interfaces Overview</span>
- <span class="text-[10px] bg-slate-800 text-slate-400 font-normal px-2 py-0.5 rounded-full">Active Ports & Addresses</span>
- </h3>
- <button onclick="navigate('interfaces')" class="text-xs text-brand-400 hover:text-brand-300 font-medium">View All Interfaces →</button>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs">
- <thead class="text-slate-400 border-b border-slate-800 text-[11px] uppercase tracking-wider">
- <tr>
- <th class="pb-2.5">Interface</th>
- <th class="pb-2.5">Role / Type</th>
- <th class="pb-2.5">MAC Address</th>
- <th class="pb-2.5">IP Address</th>
- <th class="pb-2.5">Live Traffic</th>
- <th class="pb-2.5 text-right">Status</th>
- </tr>
- </thead>
- <tbody id="quick-interfaces-table" class="divide-y divide-slate-800/60 font-mono"></tbody>
- </table>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: INTERFACES (HIERARCHICAL TREE) ================= -->
- <section id="section-interfaces" class="hidden space-y-6">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex flex-wrap items-center justify-between gap-4">
- <div class="relative flex-1 min-w-[280px]">
- <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
- </svg>
- </div>
- <input type="text" id="iface-search" oninput="renderInterfacesList()"
- placeholder="Search interfaces by Name or IP (e.g. eth0, 192.168.1.1)..."
- class="w-full bg-slate-800/90 border border-slate-700 rounded-lg pl-10 pr-4 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-brand-500 transition">
- </div>
- <div class="flex items-center space-x-2">
- <button onclick="expandAllIfaces(true)" class="text-xs text-cyan-400 hover:text-cyan-300 font-medium px-3 py-2 rounded-lg bg-cyan-950/50 hover:bg-cyan-950 border border-cyan-800/60 transition flex items-center gap-1.5">
- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
- <span>Expand All</span>
- </button>
- <button onclick="expandAllIfaces(false)" class="text-xs text-slate-400 hover:text-slate-300 font-medium px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 transition flex items-center gap-1.5">
- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
- <span>Collapse All</span>
- </button>
- </div>
- </div>
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden shadow-2xl">
- <div class="p-4 border-b border-slate-800 bg-slate-950/40 flex items-center justify-between">
- <div>
- <h3 class="text-sm font-bold text-white">Interface Table View</h3>
- </div>
- <div class="text-xs text-slate-400">
- <span id="ifaces-list-summary" class="font-mono">Loading interfaces...</span>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs">
- <thead class="text-slate-400 bg-slate-950/80 border-b border-slate-800 uppercase tracking-wider text-[11px]">
- <tr>
- <th class="py-3 px-3 font-semibold w-8 text-center"></th>
- <th class="py-3 px-4 font-semibold">Interface / Type</th>
- <th class="py-3 px-4 font-semibold">Role & Alias</th>
- <th class="py-3 px-4 font-semibold">IP Address (CIDR)</th>
- <th class="py-3 px-4 font-semibold">MAC & MTU</th>
- <th class="py-3 px-4 font-semibold">Throughput (RX/TX)</th>
- <th class="py-3 px-4 font-semibold">Link State</th>
- <th class="py-3 px-4 font-semibold text-right">Actions</th>
- </tr>
- </thead>
- <tbody id="interfaces-tree-tbody" class="divide-y divide-slate-800 font-mono"></tbody>
- </table>
- </div>
- <div id="interfaces-empty-state" class="hidden p-12 text-center text-slate-500">
- No interfaces found matching your search.
- </div>
- </div>
- </section>
- <!-- ================= SECTION: DHCP CLIENT ================= -->
- <section id="section-dhcp-client" class="hidden space-y-6">
- <div class="flex items-center justify-between">
- <button onclick="openDHCPClientModal()" class="px-4 py-2 rounded-lg font-semibold text-xs bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition flex items-center gap-1.5">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
- <span>+ Add</span>
- </button>
- </div>
- <!-- KPI Summary Cards -->
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
- <div class="text-xs text-slate-400">Total Configured</div>
- <div id="dhcp-stat-total" class="text-xl font-bold text-white font-mono mt-1">0</div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
- <div class="text-xs text-slate-400">Bound Leases</div>
- <div id="dhcp-stat-bound" class="text-xl font-bold text-emerald-400 font-mono mt-1">0</div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
- <div class="text-xs text-slate-400">Searching / Requesting</div>
- <div id="dhcp-stat-searching" class="text-xl font-bold text-amber-400 font-mono mt-1">0</div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
- <div class="text-xs text-slate-400">Disabled</div>
- <div id="dhcp-stat-disabled" class="text-xl font-bold text-slate-500 font-mono mt-1">0</div>
- </div>
- </div>
- <!-- DHCP Clients Table -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <div>
- <h3 class="text-xs font-bold text-white">DHCP Client Interfaces</h3>
- <p class="text-[11px] text-slate-400 mt-0.5">Active leases, assigned IP addresses, default gateways and lease duration</p>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px]">
- <tr>
- <th class="py-3 px-4">Interface</th>
- <th class="py-3 px-4">Status</th>
- <th class="py-3 px-4">IP Address / Netmask</th>
- <th class="py-3 px-4">Gateway</th>
- <th class="py-3 px-4">DHCP Server</th>
- <th class="py-3 px-4">DNS Servers</th>
- <th class="py-3 px-4">Expires In</th>
- <th class="py-3 px-4">Options</th>
- <th class="py-3 px-4 text-right">Actions</th>
- </tr>
- </thead>
- <tbody id="dhcp-clients-tbody" class="divide-y divide-slate-800 font-mono"></tbody>
- </table>
- </div>
- <div id="dhcp-clients-empty" class="hidden p-12 text-center text-slate-500">
- <div class="text-3xl mb-2">⚡</div>
- <div class="font-semibold text-slate-400 text-sm">No DHCP Clients Configured</div>
- <div class="text-xs mt-1 text-slate-500">Click “Add DHCP Client” to automatically obtain an IP on any interface.</div>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: DHCP SERVER ================= -->
- <section id="section-dhcp-server" class="hidden space-y-6">
- <div class="bg-gradient-to-r from-emerald-950/40 via-slate-900 to-slate-900 border border-emerald-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 tracking-wide uppercase">Core Network Service</span>
- <h2 class="text-base font-bold text-white flex items-center gap-2">
- <span>DHCP Server & Subnets</span>
- <span class="px-2 py-0.5 text-[10px] rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 font-mono font-normal">Enterprise Engine</span>
- </h2>
- </div>
- <p class="text-xs text-slate-400">Dynamic Host Configuration Protocol server, subnet network parameters (NTP, TFTP/PXE, DNS, Option Codes), active lease allocations & static IP reservations.</p>
- </div>
- <div class="flex items-center gap-2">
- <button onclick="openDHCPServerSetupModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-emerald-600/30 hover:bg-emerald-600/50 text-emerald-300 border border-emerald-500/40 transition flex items-center gap-1.5" title="Run Quick 1-Click DHCP Setup Wizard">
- <span>⚡ DHCP Setup</span>
- </button>
- <button id="dhcp-server-primary-add-btn" onclick="handleDHCPServerPrimaryAdd()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20 transition flex items-center gap-1.5">
- <span>+ Add Server</span>
- </button>
- <button onclick="loadDHCPServer(true)" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition" title="Refresh">
- <span>🔄</span>
- </button>
- </div>
- </div>
- <!-- DHCP Subtabs -->
- <div class="flex items-center border-b border-slate-800 overflow-x-auto space-x-1">
- <button id="dhcp-server-tab-btn-servers" onclick="switchDHCPServerTab('servers')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-emerald-500 text-white transition flex items-center gap-2 whitespace-nowrap">
- <span>DHCP</span>
- <span id="dhcp-server-tab-badge-servers" class="px-1.5 py-0.2 rounded-full text-[10px] bg-slate-800 text-slate-300 font-mono">0</span>
- </button>
- <button id="dhcp-server-tab-btn-networks" onclick="switchDHCPServerTab('networks')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>Networks</span>
- <span id="dhcp-server-tab-badge-networks" class="px-1.5 py-0.2 rounded-full text-[10px] bg-slate-800 text-slate-300 font-mono">0</span>
- </button>
- <button id="dhcp-server-tab-btn-leases" onclick="switchDHCPServerTab('leases')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>Leases</span>
- <span id="dhcp-server-tab-badge-leases" class="px-1.5 py-0.2 rounded-full text-[10px] bg-slate-800 text-slate-300 font-mono">0</span>
- </button>
- <button id="dhcp-server-tab-btn-options" onclick="switchDHCPServerTab('options')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>Options</span>
- <span id="dhcp-server-tab-badge-options" class="px-1.5 py-0.2 rounded-full text-[10px] bg-slate-800 text-slate-300 font-mono">0</span>
- </button>
- </div>
- <!-- KPI Summary Cards -->
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Active Servers</div>
- <div id="dhcp-server-stat-active" class="text-xl font-bold text-white font-mono mt-1">0 / 0</div>
- <div class="text-[10px] text-slate-500 mt-0.5">Instances online</div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/></svg>
- </div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Active Leases</div>
- <div id="dhcp-server-stat-leases" class="text-xl font-bold text-emerald-400 font-mono mt-1">0</div>
- <div id="dhcp-server-stat-leases-sub" class="text-[10px] text-slate-500 mt-0.5">0 dynamic, 0 static</div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/20 flex items-center justify-center text-sky-400">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
- </div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Configured Subnets</div>
- <div id="dhcp-server-stat-networks" class="text-xl font-bold text-cyan-400 font-mono mt-1">0</div>
- <div class="text-[10px] text-slate-500 mt-0.5">DHCP network scopes</div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center text-cyan-400">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
- </div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">DHCP Engine</div>
- <div class="text-xs font-bold text-emerald-300 font-mono mt-1">dnsmasq v2.91</div>
- <div class="text-[10px] text-slate-400 mt-0.5">Authoritative Mode • Port 67</div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
- </div>
- </div>
- </div>
- <!-- SUBTAB 1: SERVERS -->
- <div id="dhcp-server-subtab-servers" class="space-y-4">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <div>
- <h3 class="text-xs font-bold text-white">DHCP Server Instances</h3>
- <p class="text-[11px] text-slate-400 mt-0.5">Per-interface DHCP daemon listeners and address pools</p>
- </div>
- <div class="text-xs text-slate-400 font-mono">
- <span class="text-emerald-400">R</span> = Running | <span class="text-rose-400">X</span> = Disabled
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-12 text-center">Flag</th>
- <th class="py-2.5 px-3">Name</th>
- <th class="py-2.5 px-3">Interface</th>
- <th class="py-2.5 px-3">Assigned Network</th>
- <th class="py-2.5 px-3">Address Pool</th>
- <th class="py-2.5 px-3">Lease Time</th>
- <th class="py-2.5 px-3">Authoritative</th>
- <th class="py-2.5 px-3">Active Leases</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="dhcp-server-tbody" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="dhcp-server-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No DHCP servers configured. Click "+ Add Server" or "⚡ DHCP Setup" to configure one.
- </div>
- </div>
- </div>
- <!-- SUBTAB 2: NETWORKS -->
- <div id="dhcp-server-subtab-networks" class="hidden space-y-4">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <div>
- <h3 class="text-xs font-bold text-white">DHCP Subnet Networks</h3>
- <p class="text-[11px] text-slate-400 mt-0.5">Subnet parameters, Gateways, DNS, NTP servers, and TFTP / PXE Boot options</p>
- </div>
- <button onclick="openAddDHCPNetworkModal()" class="text-xs font-semibold px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white transition">
- + Add Network
- </button>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3">Address</th>
- <th class="py-2.5 px-3">Gateway</th>
- <th class="py-2.5 px-3">Netmask</th>
- <th class="py-2.5 px-3">DNS Servers</th>
- <th class="py-2.5 px-3">Domain</th>
- <th class="py-2.5 px-3">NTP Servers (Opt 42)</th>
- <th class="py-2.5 px-3">Next Server (TFTP)</th>
- <th class="py-2.5 px-3">Boot File (PXE)</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="dhcp-networks-tbody" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="dhcp-networks-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No DHCP networks configured. Click "+ Add Network" to configure subnet parameters.
- </div>
- </div>
- </div>
- <!-- SUBTAB 3: LEASES -->
- <div id="dhcp-server-subtab-leases" class="hidden space-y-4">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <div>
- <h3 class="text-xs font-bold text-white">DHCP Leases & Static Reservations</h3>
- <p class="text-[11px] text-slate-400 mt-0.5">Active dynamic leases and static MAC-to-IP reservations</p>
- </div>
- <div class="flex items-center gap-2">
- <span class="text-xs text-slate-400 font-mono">
- <span class="text-sky-400">D</span> = Dynamic | <span class="text-purple-400">S</span> = Static | <span class="text-rose-400">X</span> = Disabled
- </span>
- <button onclick="openAddDHCPStaticLeaseModal()" class="text-xs font-semibold px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white transition">
- + Add Static Lease
- </button>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-12 text-center">Flag</th>
- <th class="py-2.5 px-3">Address</th>
- <th class="py-2.5 px-3">MAC Address</th>
- <th class="py-2.5 px-3">Host Name</th>
- <th class="py-2.5 px-3">Server</th>
- <th class="py-2.5 px-3">Expires After</th>
- <th class="py-2.5 px-3">Status</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="dhcp-leases-tbody" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="dhcp-leases-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No active leases or static reservations found.
- </div>
- </div>
- </div>
- <!-- SUBTAB 4: OPTIONS -->
- <div id="dhcp-server-subtab-options" class="hidden space-y-4">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <div>
- <h3 class="text-xs font-bold text-white">Custom DHCP Options (Codes 1-254)</h3>
- <p class="text-[11px] text-slate-400 mt-0.5">Standard & Vendor DHCP Options (NTP, TFTP, UniFi Inform, CAPWAP, VoIP)</p>
- </div>
- <button onclick="openAddDHCPOptionModal()" class="text-xs font-semibold px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white transition">
- + Add Option
- </button>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3">Name</th>
- <th class="py-2.5 px-3">Code</th>
- <th class="py-2.5 px-3">Value</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="dhcp-options-tbody" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="dhcp-options-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No custom DHCP options configured.
- </div>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: BRIDGE ================= -->
- <section id="section-bridge" class="hidden space-y-6">
- <!-- Bridge Navigation Header -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex flex-wrap items-center justify-between gap-4">
- <div class="flex items-center space-x-3">
- <div class="p-2.5 rounded-lg bg-sky-500/10 border border-sky-500/20 text-sky-400">
- <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18M5 14v4a2 2 0 002 2h2a2 2 0 002-2v-4m6 0v4a2 2 0 002 2h2a2 2 0 002-2v-4M4 10V6a2 2 0 012-2h12a2 2 0 012 2v4" />
- </svg>
- </div>
- <div>
- <div class="flex items-center gap-2">
- <h2 class="text-base font-bold text-white">Bridge Interfaces</h2>
- <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-sky-500/20 text-sky-300 border border-sky-500/30 font-semibold">IEEE 802.1D / 802.1Q</span>
- </div>
- <p class="text-xs text-slate-400">Layer 2 software bridge with Rapid Spanning Tree Protocol (RSTP), 802.1Q VLAN filtering, horizon port isolation, and dynamic forwarding database (FDB).</p>
- </div>
- </div>
- <div class="flex items-center space-x-3">
- <button id="bridge-top-action-btn" onclick="openCurrentBridgeModal()" class="flex items-center space-x-2 bg-gradient-to-r from-sky-600 to-cyan-600 hover:from-sky-500 hover:to-cyan-500 text-white font-semibold text-xs px-4 py-2.5 rounded-lg shadow-lg shadow-sky-500/20 transition">
- <span>+ Add Bridge</span>
- </button>
- </div>
- </div>
- <!-- Bridge Subtabs Nav -->
- <div class="bg-slate-900/60 border border-slate-800/80 rounded-xl overflow-hidden p-1 flex flex-wrap items-center justify-between gap-2">
- <div class="flex items-center space-x-1">
- <button id="bridge-subtab-btn-bridges" onclick="switchBridgeSubTab('bridges')" class="px-4 py-2 text-xs font-bold rounded-lg bg-slate-800 text-white shadow-sm transition flex items-center gap-2">
- <span>Bridges</span>
- <span id="bridge-badge-bridges" class="px-1.5 py-0.2 rounded text-[10px] bg-sky-950 text-sky-300 border border-sky-800/40">0</span>
- </button>
- <button id="bridge-subtab-btn-ports" onclick="switchBridgeSubTab('ports')" class="px-4 py-2 text-xs font-bold rounded-lg text-slate-400 hover:text-slate-200 transition flex items-center gap-2">
- <span>Ports</span>
- <span id="bridge-badge-ports" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="bridge-subtab-btn-vlans" onclick="switchBridgeSubTab('vlans')" class="px-4 py-2 text-xs font-bold rounded-lg text-slate-400 hover:text-slate-200 transition flex items-center gap-2">
- <span>VLANs</span>
- <span id="bridge-badge-vlans" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="bridge-subtab-btn-hosts" onclick="switchBridgeSubTab('hosts')" class="px-4 py-2 text-xs font-bold rounded-lg text-slate-400 hover:text-slate-200 transition flex items-center gap-2">
- <span>Hosts (MAC Table)</span>
- <span id="bridge-badge-hosts" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- </div>
- <!-- Stats Bar -->
- <div class="flex items-center space-x-4 px-3 text-xs font-mono text-slate-400">
- <div>Bridges: <span id="bridge-stat-bridges" class="font-bold text-white">0</span></div>
- <div>Ports: <span id="bridge-stat-ports" class="font-bold text-sky-400">0</span></div>
- <div>Learned MACs: <span id="bridge-stat-hosts" class="font-bold text-emerald-400">0</span></div>
- </div>
- </div>
- <!-- ================= SUBTAB 1: BRIDGES ================= -->
- <div id="bridge-subtab-bridges" class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white">Configured Bridges</h3>
- <span id="bridge-count-badge" class="text-xs font-mono text-slate-400">0 Bridges</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-10 text-center">#</th>
- <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
- <th class="py-2.5 px-3">Name</th>
- <th class="py-2.5 px-3">MTU</th>
- <th class="py-2.5 px-3">MAC Address</th>
- <th class="py-2.5 px-3">STP</th>
- <th class="py-2.5 px-3">VLAN Filtering</th>
- <th class="py-2.5 px-3">PVID</th>
- <th class="py-2.5 px-3">Ports</th>
- <th class="py-2.5 px-3">IP Addresses</th>
- <th class="py-2.5 px-3">Traffic</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="bridge-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="bridge-empty-bridges" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No bridge interfaces configured. Click "+ Add Bridge" to create one.
- </div>
- </div>
- <!-- ================= SUBTAB 2: PORTS ================= -->
- <div id="bridge-subtab-ports" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">Bridge Ports</h3>
- <span id="bridge-ports-count-badge" class="text-xs font-mono text-slate-400">0 Ports</span>
- </div>
- <div class="flex items-center space-x-2">
- <label class="text-xs text-slate-400">Filter Bridge:</label>
- <select id="bridge-ports-filter-bridge" onchange="renderBridgePorts()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white">
- <option value="">All Bridges</option>
- </select>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-10 text-center">#</th>
- <th class="py-2.5 px-3 w-12 text-center" title="Flags: X=Disabled">Flag</th>
- <th class="py-2.5 px-3">Interface</th>
- <th class="py-2.5 px-3">Bridge</th>
- <th class="py-2.5 px-3">PVID</th>
- <th class="py-2.5 px-3">Frame Types</th>
- <th class="py-2.5 px-3">Ingress Filter</th>
- <th class="py-2.5 px-3">Horizon</th>
- <th class="py-2.5 px-3">Role / Status</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="bridge-ports-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="bridge-empty-ports" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No bridge ports configured. Click "+ Add Port" to attach a physical NIC, VLAN or EoIP tunnel.
- </div>
- </div>
- <!-- ================= SUBTAB 3: VLANS ================= -->
- <div id="bridge-subtab-vlans" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">Bridge VLAN Filtering Table</h3>
- <span id="bridge-vlans-count-badge" class="text-xs font-mono text-slate-400">0 Entries</span>
- </div>
- <div class="flex items-center space-x-2">
- <label class="text-xs text-slate-400">Filter Bridge:</label>
- <select id="bridge-vlans-filter-bridge" onchange="renderBridgeVLANs()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white">
- <option value="">All Bridges</option>
- </select>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-10 text-center">#</th>
- <th class="py-2.5 px-3 w-12 text-center" title="Flags: X=Disabled">Flag</th>
- <th class="py-2.5 px-3">Bridge</th>
- <th class="py-2.5 px-3">VLAN IDs</th>
- <th class="py-2.5 px-3">Tagged Member Ports</th>
- <th class="py-2.5 px-3">Untagged Member Ports</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="bridge-vlans-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="bridge-empty-vlans" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No bridge VLAN filtering entries configured. Click "+ Add VLAN Entry" to configure 802.1Q tagged ports.
- </div>
- </div>
- <!-- ================= SUBTAB 4: HOSTS (MAC TABLE) ================= -->
- <div id="bridge-subtab-hosts" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">Forwarding Database (MAC Table)</h3>
- <span id="bridge-hosts-count-badge" class="text-xs font-mono text-slate-400">0 Entries</span>
- </div>
- <div class="flex items-center space-x-2">
- <input type="text" id="bridge-hosts-search" oninput="renderBridgeHosts()" placeholder="Search MAC or Interface..." class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white">
- <select id="bridge-hosts-filter-bridge" onchange="loadBridgeHosts()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white">
- <option value="">All Bridges</option>
- </select>
- <button onclick="loadBridgeHosts()" class="px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-semibold text-slate-200 border border-slate-700">🔄 Refresh</button>
- <button onclick="flushBridgeHosts()" class="px-2.5 py-1 rounded-lg bg-rose-950/60 hover:bg-rose-900/80 text-rose-300 border border-rose-800/40 text-xs font-semibold">🗑️ Flush Dynamic</button>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3">MAC Address</th>
- <th class="py-2.5 px-3">Interface / Port</th>
- <th class="py-2.5 px-3">Bridge</th>
- <th class="py-2.5 px-3">VLAN</th>
- <th class="py-2.5 px-3">Age (s)</th>
- <th class="py-2.5 px-3">Flags (L=Local, S=Static, D=Dynamic)</th>
- </tr>
- </thead>
- <tbody id="bridge-hosts-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="bridge-empty-hosts" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No MAC addresses learned in the forwarding database.
- </div>
- </div>
- </section>
- <!-- ================= SECTION: PPPoE CLIENTS ================= -->
- <section id="section-pppoe" class="hidden space-y-6">
- <div class="bg-gradient-to-r from-blue-950/40 via-slate-900 to-slate-900 border border-blue-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-blue-500/20 text-blue-300 border border-blue-500/30 tracking-wide uppercase">WAN Access</span>
- <h2 class="text-base font-bold text-white">PPPoE Client Sessions</h2>
- </div>
- <p class="text-xs text-slate-400">Point-to-Point Protocol over Ethernet (PPPoE) client management with automated reconnection, default gateway negotiation, and peer DNS acquisition.</p>
- </div>
- <div class="flex items-center gap-2">
- <button onclick="navigate('ppp'); switchPPPSubTab('pppoe')" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-blue-300 border border-blue-900/40 transition flex items-center gap-1.5" title="Configure Router as PPPoE Access Concentrator Server">
- <span>⚙ Server Settings</span>
- </button>
- <button onclick="openAddPPPoEModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-500/20 transition flex items-center gap-1.5">
- <span>+ Add PPPoE Client</span>
- </button>
- </div>
- </div>
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white">Configured PPPoE Interfaces</h3>
- <span id="pppoe-count-badge" class="text-xs font-mono bg-slate-800 text-slate-300 px-2.5 py-0.5 rounded-full">0 Interfaces</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
- <th class="py-2.5 px-3">Name</th>
- <th class="py-2.5 px-3">Interface</th>
- <th class="py-2.5 px-3">User</th>
- <th class="py-2.5 px-3">Profile</th>
- <th class="py-2.5 px-3">Assigned IP</th>
- <th class="py-2.5 px-3">Device</th>
- <th class="py-2.5 px-3 text-center">Def. Route</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="pppoe-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="pppoe-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No PPPoE clients configured. Click "+ Add PPPoE Client" to add a connection.
- </div>
- </div>
- </section>
- <!-- ================= SECTION: WIREGUARD ================= -->
- <section id="section-wireguard" class="hidden space-y-6">
- <div class="bg-gradient-to-r from-rose-950/40 via-slate-900 to-slate-900 border border-rose-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-rose-500/20 text-rose-300 border border-rose-500/30 tracking-wide uppercase">Cryptographic VPN</span>
- <h2 class="text-base font-bold text-white">WireGuard VPN Suite</h2>
- </div>
- <p class="text-xs text-slate-400">High-performance multi-interface WireGuard VPN with kernel-accelerated cryptography, peer roaming, and endpoint keepalives.</p>
- </div>
- <div class="flex items-center space-x-2.5">
- <button onclick="openAddWGInterfaceModal()" class="text-xs font-semibold px-3.5 py-2 rounded-lg bg-rose-600 hover:bg-rose-500 text-white shadow-lg shadow-rose-500/20 transition">
- + Add Interface
- </button>
- <button onclick="openAddWGPeerModal()" class="text-xs font-semibold px-3.5 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-white border border-slate-700 transition">
- + Add Peer
- </button>
- </div>
- </div>
- <!-- Sub Tabs: Interfaces / Peers -->
- <div class="flex border-b border-slate-800 space-x-2">
- <button id="wg-subtab-btn-ifaces" onclick="switchWGSubTab('ifaces')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-rose-500 text-white transition flex items-center gap-2">
- <span>Interfaces</span>
- <span id="wg-subtab-badge-ifaces" class="px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="wg-subtab-btn-peers" onclick="switchWGSubTab('peers')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2">
- <span>Peers</span>
- <span id="wg-subtab-badge-peers" class="px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- </div>
- <!-- Sub-Tab 1: Interfaces -->
- <div id="wg-subtab-ifaces" class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white">WireGuard Interfaces</h3>
- <span id="wg-ifaces-count" class="text-xs font-mono text-slate-400">0 Interfaces</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
- <th class="py-2.5 px-3">Name</th>
- <th class="py-2.5 px-3">Listen Port</th>
- <th class="py-2.5 px-3">Tunnel Address</th>
- <th class="py-2.5 px-3">Public Key</th>
- <th class="py-2.5 px-3">MTU</th>
- <th class="py-2.5 px-3 text-center">Peers</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="wg-ifaces-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="wg-ifaces-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No WireGuard interfaces configured. Click "+ Add Interface" to create wg0.
- </div>
- </div>
- <!-- Sub-Tab 2: Peers -->
- <div id="wg-subtab-peers" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">WireGuard Peers</h3>
- <span id="wg-peers-count" class="text-xs font-mono text-slate-400">0 Peers</span>
- </div>
- <div class="flex items-center gap-2">
- <label class="text-xs text-slate-400 font-sans">Filter Interface:</label>
- <select id="wg-peers-filter-iface" onchange="renderWGPeers()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white font-mono">
- <option value="">All Interfaces</option>
- </select>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Active, X=Disabled">Flag</th>
- <th class="py-2.5 px-3">Interface</th>
- <th class="py-2.5 px-3">Peer Name</th>
- <th class="py-2.5 px-3">Public Key</th>
- <th class="py-2.5 px-3">Allowed IPs</th>
- <th class="py-2.5 px-3">Endpoint</th>
- <th class="py-2.5 px-3">Latest Handshake</th>
- <th class="py-2.5 px-3">Traffic (RX/TX)</th>
- <th class="py-2.5 px-3 text-right font-sans">Action</th>
- </tr>
- </thead>
- <tbody id="wg-peers-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="wg-peers-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No peers found for the selected interface. Click "+ Add Peer" to add a client or branch.
- </div>
- </div>
- </section>
- <!-- ================= SECTION: IPSEC ================= -->
- <section id="section-ipsec" class="hidden space-y-6">
- <div class="bg-gradient-to-r from-amber-950/40 via-slate-900 to-slate-900 border border-amber-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-amber-500/20 text-amber-300 border border-amber-500/30 tracking-wide uppercase">Site-to-Site & Roadwarrior</span>
- <h2 class="text-base font-bold text-white">IPSec (IKEv2) Tunnels</h2>
- </div>
- <p class="text-xs text-slate-400">Enterprise IKEv2 / IPsec cryptographic tunnels with policy routing, automated SA rekeying, and Roadwarrior mobile client support.</p>
- </div>
- <div class="flex items-center gap-2">
- <button onclick="openIPSecServerModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-amber-300 border border-amber-900/40 transition flex items-center gap-1.5" title="Configure Router as IPSec IKEv2 Roadwarrior Mobile Client Server">
- <span>⚙ Roadwarrior Server</span>
- </button>
- <button onclick="openAddIPSecModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-amber-600 hover:bg-amber-500 text-white shadow-lg shadow-amber-500/20 transition">
- + Add IPSec Tunnel
- </button>
- </div>
- </div>
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white">Configured IPSec Tunnels</h3>
- <span id="ipsec-sas-badge" class="text-xs font-mono bg-slate-800 text-slate-300 px-2.5 py-0.5 rounded-full">0 Active SAs</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-12 text-center" title="Tunnel Status: Green=Active SA, Red=Down">Status</th>
- <th class="py-2.5 px-4">Tunnel Name</th>
- <th class="py-2.5 px-4">Remote Gateway</th>
- <th class="py-2.5 px-4">Phase 1 (IKE)</th>
- <th class="py-2.5 px-4">Phase 2 Selectors (Subnets)</th>
- <th class="py-2.5 px-4">Phase 2 (ESP)</th>
- <th class="py-2.5 px-4 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="ipsec-table-body" class="divide-y divide-slate-800"></tbody>
- </table>
- </div>
- <div id="ipsec-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No IPSec tunnels configured. Click "+ Add IPSec Tunnel" to set up site-to-site networking.
- </div>
- </div>
- </section>
- <!-- ================= SECTION: L2TP CLIENT ================= -->
- <section id="section-l2tp" class="hidden space-y-6">
- <div class="bg-gradient-to-r from-cyan-950/40 via-slate-900 to-slate-900 border border-cyan-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 tracking-wide uppercase">L2TP Client</span>
- <h2 class="text-base font-bold text-white">L2TP Client Sessions</h2>
- </div>
- <p class="text-xs text-slate-400">Layer 2 Tunneling Protocol (L2TP) multi-instance client manager with optional IPsec pre-shared key encapsulation.</p>
- </div>
- <div class="flex items-center gap-2">
- <button onclick="navigate('ppp'); switchPPPSubTab('l2tp')" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-cyan-300 border border-cyan-900/40 transition flex items-center gap-1.5" title="Configure Router as L2TP Server">
- <span>⚙ Server Settings</span>
- </button>
- <button onclick="openAddL2TPModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20 transition">
- + Add L2TP Client
- </button>
- </div>
- </div>
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white">Configured L2TP Clients</h3>
- <span id="l2tp-count-badge" class="text-xs font-mono bg-slate-800 text-slate-300 px-2.5 py-0.5 rounded-full">0 Clients</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
- <th class="py-2.5 px-3">Name</th>
- <th class="py-2.5 px-3">Server Address</th>
- <th class="py-2.5 px-3">User</th>
- <th class="py-2.5 px-3">Profile</th>
- <th class="py-2.5 px-3">Assigned IP</th>
- <th class="py-2.5 px-3">Device</th>
- <th class="py-2.5 px-3 text-center">Def. Route</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="l2tp-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="l2tp-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No L2TP clients configured. Click "+ Add L2TP Client" to add a tunnel.
- </div>
- </div>
- </section>
- <!-- ================= SECTION: PPTP CLIENT ================= -->
- <section id="section-pptp" class="hidden space-y-6">
- <div class="bg-gradient-to-r from-purple-950/40 via-slate-900 to-slate-900 border border-purple-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-purple-500/20 text-purple-300 border border-purple-500/30 tracking-wide uppercase">PPTP Client</span>
- <h2 class="text-base font-bold text-white">PPTP Client Sessions</h2>
- </div>
- <p class="text-xs text-slate-400">Point-to-Point Tunneling Protocol (PPTP) client management with MPPE-128 stateful encryption and automated routing.</p>
- </div>
- <div class="flex items-center gap-2">
- <button onclick="navigate('ppp'); switchPPPSubTab('pptp')" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-purple-300 border border-purple-900/40 transition flex items-center gap-1.5" title="Configure Router as PPTP Server">
- <span>⚙ Server Settings</span>
- </button>
- <button onclick="openAddPPTPModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20 transition">
- + Add PPTP Client
- </button>
- </div>
- </div>
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white">Configured PPTP Clients</h3>
- <span id="pptp-count-badge" class="text-xs font-mono bg-slate-800 text-slate-300 px-2.5 py-0.5 rounded-full">0 Clients</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
- <th class="py-2.5 px-3">Name</th>
- <th class="py-2.5 px-3">Server Address</th>
- <th class="py-2.5 px-3">User</th>
- <th class="py-2.5 px-3">Profile</th>
- <th class="py-2.5 px-3">Assigned IP</th>
- <th class="py-2.5 px-3">Device</th>
- <th class="py-2.5 px-3 text-center">MPPE</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="pptp-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="pptp-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No PPTP clients configured. Click "+ Add PPTP Client" to add a tunnel.
- </div>
- </div>
- </section>
- <!-- ================= SECTION: PPP SERVERS & SECRETS ================= -->
- <section id="section-ppp" class="hidden space-y-6">
- <div class="bg-gradient-to-r from-violet-950/40 via-slate-900 to-slate-900 border border-violet-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-violet-500/20 text-violet-300 border border-violet-500/30 tracking-wide uppercase">Subscriber Access</span>
- <h2 class="text-base font-bold text-white">PPP Servers, Secrets & Profiles</h2>
- </div>
- <p class="text-xs text-slate-400">Centralized subscriber credentials, dynamic address assignment pools, and multi-protocol VPN access concentrators.</p>
- </div>
- <div class="flex items-center space-x-2.5">
- <button id="ppp-primary-add-btn" onclick="openCurrentPPPModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-violet-600 hover:bg-violet-500 text-white shadow-lg shadow-violet-500/20 transition flex items-center gap-1.5">
- <span>+ Add User (Secret)</span>
- </button>
- </div>
- </div>
- <!-- Sub Tabs: Secrets / Profiles / PPPoE Server / PPTP Server / L2TP Server / Active Sessions -->
- <div class="flex border-b border-slate-800 space-x-1 overflow-x-auto">
- <button id="ppp-subtab-btn-secrets" onclick="switchPPPSubTab('secrets')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-violet-500 text-white transition flex items-center gap-2 whitespace-nowrap">
- <span>Secrets (Users)</span>
- <span id="ppp-badge-secrets" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="ppp-subtab-btn-profiles" onclick="switchPPPSubTab('profiles')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>Profiles (Pools)</span>
- <span id="ppp-badge-profiles" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="ppp-subtab-btn-pppoe" onclick="switchPPPSubTab('pppoe')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>PPPoE Server</span>
- <span id="ppp-badge-pppoe-state" class="w-2 h-2 rounded-full bg-slate-600"></span>
- </button>
- <button id="ppp-subtab-btn-pptp" onclick="switchPPPSubTab('pptp')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>PPTP Server</span>
- <span id="ppp-badge-pptp-state" class="w-2 h-2 rounded-full bg-slate-600"></span>
- </button>
- <button id="ppp-subtab-btn-l2tp" onclick="switchPPPSubTab('l2tp')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>L2TP Server</span>
- <span id="ppp-badge-l2tp-state" class="w-2 h-2 rounded-full bg-slate-600"></span>
- </button>
- <button id="ppp-subtab-btn-active" onclick="switchPPPSubTab('active')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>Active Sessions</span>
- <span id="ppp-badge-active" class="px-1.5 py-0.2 rounded text-[10px] bg-emerald-950 text-emerald-400 border border-emerald-800/40">0</span>
- </button>
- </div>
- <!-- TAB 1: SECRETS (USERS) -->
- <div id="ppp-subtab-secrets" class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white">PPP Secrets (Subscriber Credentials)</h3>
- <span id="secrets-count-badge" class="text-xs font-mono text-slate-400">0 Users</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-12 text-center">Flag</th>
- <th class="py-2.5 px-3">Name (Username)</th>
- <th class="py-2.5 px-3">Service</th>
- <th class="py-2.5 px-3">Profile</th>
- <th class="py-2.5 px-3">Local Address</th>
- <th class="py-2.5 px-3">Remote Address</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="secrets-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="secrets-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No PPP secrets configured. Click "+ Add User" to define an account.
- </div>
- </div>
- <!-- TAB 2: PROFILES (POOLS) -->
- <div id="ppp-subtab-profiles" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white">PPP Profiles (IP Pools & Policies)</h3>
- <span id="profiles-count-badge" class="text-xs font-mono text-slate-400">0 Profiles</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3">Profile Name</th>
- <th class="py-2.5 px-3">Local Address</th>
- <th class="py-2.5 px-3">Remote Address (Pool)</th>
- <th class="py-2.5 px-3">DNS Servers</th>
- <th class="py-2.5 px-3">Encryption</th>
- <th class="py-2.5 px-3 text-center">Only One</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="profiles-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- </div>
- <!-- TAB 3: PPPoE SERVER -->
- <div id="ppp-subtab-pppoe" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl p-6">
- <form onsubmit="savePPPoEServerConfig(event)" class="max-w-2xl space-y-5">
- <div class="flex items-center justify-between border-b border-slate-800 pb-4">
- <div>
- <h3 class="text-sm font-bold text-white">PPPoE Access Concentrator Server</h3>
- <p class="text-xs text-slate-400">Listens on physical interface or VLAN for PPPoE Discovery (PADI) packets</p>
- </div>
- <div class="flex items-center gap-3">
- <span id="pppoe-server-status-pill" class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-slate-800 text-slate-400">STOPPED</span>
- <label class="relative inline-flex items-center cursor-pointer">
- <input type="checkbox" id="pppoe-server-enabled" class="sr-only peer">
- <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs font-sans">
- <div>
- <label class="block text-slate-300 font-medium mb-1">Service Name</label>
- <input type="text" id="pppoe-server-name" placeholder="proxmox-pppoe" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block text-slate-300 font-medium mb-1">Listen Interface</label>
- <select id="pppoe-server-iface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
- </div>
- <div>
- <label class="block text-slate-300 font-medium mb-1">Default Profile</label>
- <select id="pppoe-server-profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
- </div>
- <div>
- <label class="block text-slate-300 font-medium mb-1">Max MTU / MRU</label>
- <input type="number" id="pppoe-server-mtu" value="1480" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div class="flex items-center space-x-2 pt-2">
- <input type="checkbox" id="pppoe-server-onesession" class="rounded bg-slate-800 border-slate-700 text-blue-600">
- <label for="pppoe-server-onesession" class="text-xs text-slate-300">One Session Per Host (limit 1 PPPoE session per client MAC)</label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end">
- <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-500/20 transition">
- Apply PPPoE Server Settings
- </button>
- </div>
- </form>
- </div>
- <!-- TAB 4: PPTP SERVER -->
- <div id="ppp-subtab-pptp" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl p-6">
- <form onsubmit="savePPTPServerConfig(event)" class="max-w-2xl space-y-5">
- <div class="flex items-center justify-between border-b border-slate-800 pb-4">
- <div>
- <h3 class="text-sm font-bold text-white">PPTP Server Settings</h3>
- <p class="text-xs text-slate-400">Point-to-Point Tunneling Server listening on TCP port 1723 with MPPE-128 encryption</p>
- </div>
- <div class="flex items-center gap-3">
- <span id="pptp-server-status-pill" class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-slate-800 text-slate-400">STOPPED</span>
- <label class="relative inline-flex items-center cursor-pointer">
- <input type="checkbox" id="pptp-server-enabled" class="sr-only peer">
- <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs font-sans">
- <div>
- <label class="block text-slate-300 font-medium mb-1">Port</label>
- <input type="number" id="pptp-server-port" value="1723" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block text-slate-300 font-medium mb-1">Default Profile</label>
- <select id="pptp-server-profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
- </div>
- </div>
- <div class="flex items-center space-x-2 pt-2">
- <input type="checkbox" id="pptp-server-mppe" checked class="rounded bg-slate-800 border-slate-700 text-purple-600">
- <label for="pptp-server-mppe" class="text-xs text-slate-300">Require 128-bit MPPE Encryption (MS-CHAPv2)</label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end">
- <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20 transition">
- Apply PPTP Server Settings
- </button>
- </div>
- </form>
- </div>
- <!-- TAB 5: L2TP SERVER -->
- <div id="ppp-subtab-l2tp" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl p-6">
- <form onsubmit="saveL2TPServerConfig(event)" class="max-w-2xl space-y-5">
- <div class="flex items-center justify-between border-b border-slate-800 pb-4">
- <div>
- <h3 class="text-sm font-bold text-white">L2TP Server Settings</h3>
- <p class="text-xs text-slate-400">Layer 2 Tunneling Protocol Server listening on UDP port 1701 with optional IPSec</p>
- </div>
- <div class="flex items-center gap-3">
- <span id="l2tp-server-status-pill" class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-slate-800 text-slate-400">STOPPED</span>
- <label class="relative inline-flex items-center cursor-pointer">
- <input type="checkbox" id="l2tp-server-enabled" class="sr-only peer">
- <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-600"></div>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs font-sans">
- <div>
- <label class="block text-slate-300 font-medium mb-1">Port</label>
- <input type="number" id="l2tp-server-port" value="1701" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block text-slate-300 font-medium mb-1">Default Profile</label>
- <select id="l2tp-server-profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
- </div>
- <div>
- <label class="block text-slate-300 font-medium mb-1">Use IPSec</label>
- <select id="l2tp-server-useipsec" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- <option value="no">no</option>
- <option value="yes">yes</option>
- <option value="required">required</option>
- </select>
- </div>
- <div>
- <label class="block text-slate-300 font-medium mb-1">IPSec Secret (PSK)</label>
- <input type="password" id="l2tp-server-ipsecsecret" placeholder="Optional Pre-Shared Key" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end">
- <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20 transition">
- Apply L2TP Server Settings
- </button>
- </div>
- </form>
- </div>
- <!-- TAB 6: ACTIVE SESSIONS -->
- <div id="ppp-subtab-active" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white">Active PPP Connections</h3>
- <button onclick="loadPPPSessions()" class="text-xs text-slate-400 hover:text-white px-2 py-1 rounded bg-slate-800">Refresh</button>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3">Interface</th>
- <th class="py-2.5 px-3">Username</th>
- <th class="py-2.5 px-3">Service</th>
- <th class="py-2.5 px-3">Client IP Address</th>
- <th class="py-2.5 px-3">Uptime</th>
- <th class="py-2.5 px-3">RX / TX Traffic</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="active-ppp-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="active-ppp-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No active PPP sessions currently connected.
- </div>
- </div>
- </section>
- <!-- ================= SECTION: EoIP TUNNELS ================= -->
- <section id="section-eoip" class="hidden space-y-6">
- <div class="bg-gradient-to-r from-emerald-950/40 via-slate-900 to-slate-900 border border-emerald-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 tracking-wide uppercase">Layer 2 Tunneling</span>
- <h2 class="text-base font-bold text-white">EoIP Tunnels (Ethernet over IP)</h2>
- </div>
- <p class="text-xs text-slate-400">Ethernet over IP (EoIP / GRETAP) encapsulation protocol to transparently bridge Layer 2 broadcast domains across IP networks.</p>
- </div>
- <button onclick="openAddEoIPModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20 transition flex items-center gap-1.5">
- <span>+ Add EoIP Tunnel</span>
- </button>
- </div>
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white">Configured EoIP Interfaces</h3>
- <span id="eoip-count-badge" class="text-xs font-mono bg-slate-800 text-slate-300 px-2.5 py-0.5 rounded-full">0 Tunnels</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
- <th class="py-2.5 px-3">Name</th>
- <th class="py-2.5 px-3">Tunnel ID</th>
- <th class="py-2.5 px-3">Tunnel IP</th>
- <th class="py-2.5 px-3">Remote Address</th>
- <th class="py-2.5 px-3">Local Address</th>
- <th class="py-2.5 px-3">MAC Address</th>
- <th class="py-2.5 px-3">MTU</th>
- <th class="py-2.5 px-3">RX / TX Traffic</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="eoip-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="eoip-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No EoIP tunnels configured. Click "+ Add EoIP Tunnel" to create one.
- </div>
- </div>
- </section>
- <!-- ================= SECTION: AeroTUN ================= -->
- <section id="section-aerotun" class="hidden space-y-6">
- <div class="bg-gradient-to-r from-sky-950/50 via-slate-900 to-slate-900 border border-sky-800/40 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-sky-500/20 text-sky-300 border border-sky-500/30 tracking-wide uppercase">Encrypted Tunnel</span>
- <h2 class="text-base font-bold text-white flex items-center gap-2">
- <span>AeroTUN High-Speed VPN</span>
- <span class="px-2 py-0.5 text-[10px] rounded-full bg-cyan-500/20 text-cyan-300 border border-cyan-500/40 font-mono font-normal">ChaCha20-Poly1305 + LZ4</span>
- </h2>
- </div>
- <p class="text-xs text-slate-400">Custom ultra-lightweight Layer 3 IP tunnel over UDP with dynamic adaptive LZ4 compression, sliding window anti-replay protection, and roaming NAT traversal.</p>
- </div>
- <div class="flex items-center gap-2.5">
- <button onclick="loadAeroTUN(true)" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition flex items-center gap-1.5" title="Refresh AeroTUN Status">
- <span>🔄 Refresh</span>
- </button>
- <button onclick="openAddAeroTUNModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-500/20 transition flex items-center gap-1.5">
- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
- <span>+ Add AeroTUN Tunnel</span>
- </button>
- </div>
- </div>
- <!-- Summary Metric Cards -->
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Active Tunnels</div>
- <div id="aerotun-stat-active" class="text-xl font-bold text-white font-mono mt-1">0 / 0</div>
- <div class="text-[10px] text-slate-500 mt-0.5">Instances online</div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/20 flex items-center justify-center text-sky-400">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
- </div>
- </div>
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Compression Savings</div>
- <div id="aerotun-stat-saved" class="text-xl font-bold text-emerald-400 font-mono mt-1">0 B</div>
- <div id="aerotun-stat-ratio" class="text-[10px] text-emerald-300 font-mono mt-0.5">1.00x (0% saved)</div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
- </div>
- </div>
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Wire Traffic</div>
- <div id="aerotun-stat-traffic" class="text-sm font-bold text-white font-mono mt-1">↓ 0 B / ↑ 0 B</div>
- <div class="text-[10px] text-slate-500 mt-0.5">UDP Wire Transmit / Receive</div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center text-cyan-400">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
- </div>
- </div>
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">AEAD Cipher & Anti-Replay</div>
- <div class="text-xs font-bold text-sky-300 font-mono mt-1">ChaCha20-Poly1305</div>
- <div class="text-[10px] text-slate-400 mt-0.5">64-pkt Sliding Window Active</div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
- </div>
- </div>
- </div>
- <!-- AeroTUN Interfaces Table -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <div class="flex items-center gap-2">
- <h3 class="text-sm font-bold text-white">Configured AeroTUN Tunnels</h3>
- <span id="aerotun-count-badge" class="text-xs font-mono bg-slate-800 text-slate-300 px-2.5 py-0.5 rounded-full">0 Tunnels</span>
- </div>
- <div class="text-xs text-slate-400">
- <span class="font-mono text-emerald-400">R</span> = Running | <span class="font-mono text-rose-400">X</span> = Disabled
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
- <th class="py-2.5 px-3">Name</th>
- <th class="py-2.5 px-3">Mode</th>
- <th class="py-2.5 px-3">Port / Remote Endpoint</th>
- <th class="py-2.5 px-3">Tunnel IP (CIDR)</th>
- <th class="py-2.5 px-3">Compression</th>
- <th class="py-2.5 px-3">Active Peer</th>
- <th class="py-2.5 px-3">Payload Traffic</th>
- <th class="py-2.5 px-3">Wire Traffic</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="aerotun-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="aerotun-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No AeroTUN interfaces configured. Click "+ Add AeroTUN Tunnel" to create a fast encrypted tunnel.
- </div>
- </div>
- </section>
- <!-- ================= SECTION: FIREWALL ================= -->
- <section id="section-firewall" class="hidden space-y-6">
- <div class="bg-gradient-to-r from-emerald-950/40 via-slate-900 to-slate-900 border border-emerald-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 tracking-wide uppercase">Packet Inspection</span>
- <h2 class="text-base font-bold text-white">Firewall & Traffic Controller</h2>
- </div>
- <p class="text-xs text-slate-400">Enterprise stateful inspection firewall, network address translation (NAT), packet marking (Mangle), IP address lists, and active connection tracking (conntrack).</p>
- </div>
- <div class="flex items-center space-x-2.5">
- <button id="fw-primary-add-btn" onclick="openCurrentFWModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20 transition flex items-center gap-1.5">
- <span>+ Add Rule</span>
- </button>
- <button onclick="resetFirewallCounters()" class="text-xs font-medium px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition" title="Reset all packet & byte counters to zero">
- Reset Counters
- </button>
- </div>
- </div>
- <!-- Sub Tabs: Filter / NAT / Mangle / Address Lists / Connections -->
- <div class="flex border-b border-slate-800 space-x-1 overflow-x-auto">
- <button id="fw-subtab-btn-filter" onclick="switchFWSubTab('filter')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-emerald-500 text-white transition flex items-center gap-2 whitespace-nowrap">
- <span>Filter Rules</span>
- <span id="fw-badge-filter" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="fw-subtab-btn-nat" onclick="switchFWSubTab('nat')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>NAT</span>
- <span id="fw-badge-nat" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="fw-subtab-btn-mangle" onclick="switchFWSubTab('mangle')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>Mangle</span>
- <span id="fw-badge-mangle" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="fw-subtab-btn-addrlist" onclick="switchFWSubTab('addrlist')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>Address Lists</span>
- <span id="fw-badge-addrlist" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="fw-subtab-btn-geo" onclick="switchFWSubTab('geo')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>Geo-Location</span>
- <span id="fw-badge-geo" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="fw-subtab-btn-connections" onclick="switchFWSubTab('connections')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>Connections</span>
- <span id="fw-badge-connections" class="px-1.5 py-0.2 rounded text-[10px] bg-emerald-950 text-emerald-400 border border-emerald-800/40">0</span>
- </button>
- </div>
- <!-- ================= TAB 1: FILTER RULES ================= -->
- <div id="fw-subtab-filter" class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">Firewall Filter Rules</h3>
- <span id="filter-count-badge" class="text-xs font-mono text-slate-400">0 Rules</span>
- </div>
- <div class="flex items-center gap-2">
- <label class="text-xs text-slate-400 font-sans">Chain:</label>
- <select id="filter-filter-chain" onchange="renderFilterRules()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white font-mono">
- <option value="">All Chains</option>
- <option value="input">input</option>
- <option value="forward">forward</option>
- <option value="output">output</option>
- </select>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-10 text-center">#</th>
- <th class="py-2.5 px-3 w-12 text-center" title="Flags: X=Disabled, C=Comment">Flag</th>
- <th class="py-2.5 px-3">Chain</th>
- <th class="py-2.5 px-3">Src. Address</th>
- <th class="py-2.5 px-3">Dst. Address</th>
- <th class="py-2.5 px-3">Protocol</th>
- <th class="py-2.5 px-3">Ports</th>
- <th class="py-2.5 px-3">In / Out</th>
- <th class="py-2.5 px-3">Action</th>
- <th class="py-2.5 px-3">Packets / Bytes</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Order & Actions</th>
- </tr>
- </thead>
- <tbody id="filter-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="filter-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No filter rules found in this chain. Click "+ Add Rule" to create one.
- </div>
- </div>
- <!-- ================= TAB 2: NAT RULES ================= -->
- <div id="fw-subtab-nat" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">NAT Rules</h3>
- <span id="nat-count-badge" class="text-xs font-mono text-slate-400">0 Rules</span>
- </div>
- <div class="flex items-center gap-2">
- <label class="text-xs text-slate-400 font-sans">Chain:</label>
- <select id="nat-filter-chain" onchange="renderNATRules()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white font-mono">
- <option value="">All Chains</option>
- <option value="srcnat">srcnat (SNAT / Masquerade)</option>
- <option value="dstnat">dstnat (Port Forwarding)</option>
- </select>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-10 text-center">#</th>
- <th class="py-2.5 px-3 w-12 text-center">Flag</th>
- <th class="py-2.5 px-3">Chain</th>
- <th class="py-2.5 px-3">Src. Address</th>
- <th class="py-2.5 px-3">Dst. Address</th>
- <th class="py-2.5 px-3">Proto/Port</th>
- <th class="py-2.5 px-3">Out / In</th>
- <th class="py-2.5 px-3">Action</th>
- <th class="py-2.5 px-3">To Address:Port</th>
- <th class="py-2.5 px-3">Packets / Bytes</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Order & Actions</th>
- </tr>
- </thead>
- <tbody id="nat-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="nat-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No NAT rules configured. Click "+ Add Rule" to add masquerade or port forwarding.
- </div>
- </div>
- <!-- ================= TAB 3: MANGLE RULES ================= -->
- <div id="fw-subtab-mangle" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">Mangle Packet & Connection Marking</h3>
- <span id="mangle-count-badge" class="text-xs font-mono text-slate-400">0 Rules</span>
- </div>
- <div class="flex items-center gap-2">
- <label class="text-xs text-slate-400 font-sans">Chain:</label>
- <select id="mangle-filter-chain" onchange="renderMangleRules()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white font-mono">
- <option value="">All Chains</option>
- <option value="prerouting">prerouting</option>
- <option value="forward">forward</option>
- <option value="postrouting">postrouting</option>
- <option value="input">input</option>
- <option value="output">output</option>
- </select>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-10 text-center">#</th>
- <th class="py-2.5 px-3 w-12 text-center">Flag</th>
- <th class="py-2.5 px-3">Chain</th>
- <th class="py-2.5 px-3">Src. Address</th>
- <th class="py-2.5 px-3">Dst. Address</th>
- <th class="py-2.5 px-3">Action</th>
- <th class="py-2.5 px-3">New Mark / Value</th>
- <th class="py-2.5 px-3 text-center">Pass</th>
- <th class="py-2.5 px-3">Packets / Bytes</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Order & Actions</th>
- </tr>
- </thead>
- <tbody id="mangle-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="mangle-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No mangle rules configured. Click "+ Add Rule" to mark connections or routing for Multi-WAN.
- </div>
- </div>
- <!-- ================= TAB 4: ADDRESS LISTS ================= -->
- <div id="fw-subtab-addrlist" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">Address Lists (ipset)</h3>
- <span id="addrlist-count-badge" class="text-xs font-mono text-slate-400">0 Entries</span>
- </div>
- <div class="flex items-center gap-2">
- <label class="text-xs text-slate-400 font-sans">List:</label>
- <select id="addrlist-filter-name" onchange="renderAddressLists()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white font-mono">
- <option value="">All Lists</option>
- </select>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-10 text-center">#</th>
- <th class="py-2.5 px-3 w-12 text-center">Flag</th>
- <th class="py-2.5 px-3">List Name</th>
- <th class="py-2.5 px-3">IP Address / CIDR</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="addrlist-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="addrlist-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No address list entries configured. Click "+ Add Item" to define a group of IPs/subnets.
- </div>
- </div>
- <!-- ================= TAB 5: ACTIVE CONNECTIONS ================= -->
- <div id="fw-subtab-connections" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">Active Conntrack Connections</h3>
- <span id="conns-count-badge" class="text-xs font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 px-2 py-0.5 rounded-full">0 Flows</span>
- </div>
- <div class="flex items-center gap-2 flex-wrap">
- <input type="text" id="conns-search-input" oninput="renderConnections()" placeholder="Filter IP, port..." class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1 text-xs text-white font-mono focus:outline-none focus:border-emerald-500">
- <select id="conns-filter-proto" onchange="renderConnections()" class="bg-slate-800 border border-slate-700 rounded-lg px-2 py-1 text-xs text-white font-mono">
- <option value="">All Proto</option>
- <option value="TCP">TCP</option>
- <option value="UDP">UDP</option>
- <option value="ICMP">ICMP</option>
- </select>
- <button onclick="loadConnections()" class="text-xs text-emerald-400 hover:text-emerald-300 font-semibold px-2 py-1 bg-slate-800 rounded border border-slate-700">Refresh</button>
- </div>
- </div>
- <div class="overflow-x-auto max-h-[550px] overflow-y-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/80 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans sticky top-0 z-10 backdrop-blur-sm">
- <tr>
- <th class="py-2.5 px-3">Proto</th>
- <th class="py-2.5 px-3">Source Address</th>
- <th class="py-2.5 px-3">Destination Address</th>
- <th class="py-2.5 px-3">Reply Source</th>
- <th class="py-2.5 px-3">Reply Dest</th>
- <th class="py-2.5 px-3">TCP State</th>
- <th class="py-2.5 px-3">Mark</th>
- <th class="py-2.5 px-3">Timeout</th>
- <th class="py-2.5 px-3 text-right font-sans">Action</th>
- </tr>
- </thead>
- <tbody id="conns-table-body" class="divide-y divide-slate-800/60"></tbody>
- </table>
- </div>
- <div id="conns-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No active connections found matching your search.
- </div>
- </div>
- <!-- ================= TAB 5: GEO-LOCATION ================= -->
- <div id="fw-subtab-geo" class="hidden space-y-4">
- <!-- Geo Header & Scheduler Status -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex flex-wrap items-center justify-between gap-4">
- <div class="flex items-center space-x-3">
- <div class="p-2.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-400">
- <span class="text-xl">🌍</span>
- </div>
- <div>
- <div class="flex items-center gap-2">
- <h3 class="text-sm font-bold text-white">Geo-Location IP Filtering</h3>
- <span id="geo-status-badge" class="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">Auto-Update ON</span>
- </div>
- <p class="text-xs text-slate-400">Aggregated country CIDR databases loaded into Linux kernel <code class="text-emerald-300">ipset</code>. Usable anywhere in Filter, NAT, and Mangle rules.</p>
- </div>
- </div>
- <!-- Controls -->
- <div class="flex items-center flex-wrap gap-2">
- <div class="flex items-center space-x-1.5 bg-slate-950/60 border border-slate-800 px-3 py-1.5 rounded-lg text-xs font-mono">
- <span class="text-slate-400">Schedule:</span>
- <span id="geo-interval-label" class="font-bold text-white">Every 24h</span>
- </div>
- <button onclick="openGeoIntervalModal()" class="text-xs font-semibold px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition">
- ⚙️ Settings
- </button>
- <button id="geo-btn-update-now" onclick="triggerGeoUpdateNow()" class="text-xs font-semibold px-3.5 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20 transition flex items-center gap-1.5">
- <span id="geo-update-spinner" class="hidden animate-spin text-xs">⏳</span>
- <span>🔄 Update Now</span>
- </button>
- </div>
- </div>
- <!-- Stats Bar -->
- <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
- <div class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3">
- <span class="text-[10px] uppercase font-bold text-slate-500 block">Countries in Rules</span>
- <span id="geo-stat-active-countries" class="text-base font-bold font-mono text-emerald-400">0</span>
- </div>
- <div class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3">
- <span class="text-[10px] uppercase font-bold text-slate-500 block">Total Subnets in Kernel</span>
- <span id="geo-stat-total-subnets" class="text-base font-bold font-mono text-cyan-400">0</span>
- </div>
- <div class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3">
- <span class="text-[10px] uppercase font-bold text-slate-500 block">Last Synced</span>
- <span id="geo-stat-last-sync" class="text-xs font-mono text-slate-300">-</span>
- </div>
- <div class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3">
- <span class="text-[10px] uppercase font-bold text-slate-500 block">Next Scheduled Run</span>
- <span id="geo-stat-next-sync" class="text-xs font-mono text-slate-300">-</span>
- </div>
- </div>
- <!-- Filters & Country Table -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center flex-wrap gap-2">
- <input type="text" id="geo-search-input" oninput="renderGeoCountries()" placeholder="Search country name or code (e.g. Greece, GR, Germany)..." class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 w-64">
- <select id="geo-continent-filter" onchange="renderGeoCountries()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-white font-mono">
- <option value="">All Continents</option>
- <option value="Europe">Europe</option>
- <option value="Asia">Asia</option>
- <option value="Americas">Americas</option>
- <option value="Africa">Africa</option>
- <option value="Oceania">Oceania</option>
- </select>
- <label class="flex items-center space-x-1.5 text-xs text-slate-300 cursor-pointer ml-2">
- <input type="checkbox" id="geo-filter-inuse-only" onchange="renderGeoCountries()" class="rounded bg-slate-800 border-slate-700 text-emerald-500">
- <span>In Use by Rules only</span>
- </label>
- <label class="flex items-center space-x-1.5 text-xs text-slate-300 cursor-pointer ml-2">
- <input type="checkbox" id="geo-filter-cached-only" onchange="renderGeoCountries()" class="rounded bg-slate-800 border-slate-700 text-cyan-500">
- <span>Cached Only</span>
- </label>
- </div>
- <div class="flex items-center space-x-2">
- <span class="text-xs text-slate-400 font-sans">Quick Filter:</span>
- <button onclick="quickFilterGeo('GR')" class="px-2.5 py-1 text-xs rounded bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 font-mono">🇬🇷 GR</button>
- <button onclick="quickFilterGeo('Europe')" class="px-2.5 py-1 text-xs rounded bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 font-mono">🇪🇺 Europe</button>
- <button onclick="quickFilterGeo('HIGHRISK')" class="px-2.5 py-1 text-xs rounded bg-rose-950/40 hover:bg-rose-900/50 text-rose-300 border border-rose-800/50 font-mono">🚫 High-Risk</button>
- <button onclick="quickFilterGeo('')" class="px-2.5 py-1 text-xs rounded bg-slate-800 hover:bg-slate-700 text-slate-400 border border-slate-700 font-mono">Reset</button>
- </div>
- </div>
- <div class="overflow-x-auto max-h-[600px] overflow-y-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/80 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans sticky top-0 z-10 backdrop-blur-sm">
- <tr>
- <th class="py-2.5 px-3 w-16 text-center">Code</th>
- <th class="py-2.5 px-3">Country Name</th>
- <th class="py-2.5 px-3">Continent</th>
- <th class="py-2.5 px-3">Subnets</th>
- <th class="py-2.5 px-3">Kernel IPSet</th>
- <th class="py-2.5 px-3">Rule Usage</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="geo-table-body" class="divide-y divide-slate-800/60"></tbody>
- </table>
- </div>
- <div id="geo-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No countries found matching your search.
- </div>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: ROUTES & POLICY ================= -->
- <section id="section-routes" class="hidden space-y-6">
- <!-- Top Routing Switcher Bar -->
- <div class="flex items-center gap-1.5 p-1 bg-slate-900/90 border border-slate-800 rounded-xl w-fit">
- <button onclick="navigate('routes')" class="px-3.5 py-1.5 text-xs font-bold rounded-lg transition bg-cyan-600/20 text-cyan-300 border border-cyan-500/40 shadow-sm flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
- </svg>
- <span>Routes & Policy</span>
- </button>
- <button onclick="navigate('bgp')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
- </svg>
- <span>BGP Routing</span>
- </button>
- <button onclick="navigate('ospf')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
- </svg>
- <span>OSPF Routing</span>
- </button>
- <button onclick="navigate('routing-filters')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
- </svg>
- <span>Policy Filters</span>
- </button>
- </div>
- <div class="bg-gradient-to-r from-cyan-950/40 via-slate-900 to-slate-900 border border-cyan-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 tracking-wide uppercase">Routing Tables</span>
- <h2 class="text-base font-bold text-white">IP Routes & Policy Rules</h2>
- </div>
- <p class="text-xs text-slate-400">Kernel FIB/RIB routing tables, static gateways, multipath uplinks, and policy routing (ip rule / fwmark lookup).</p>
- </div>
- <div class="flex items-center space-x-2.5">
- <button onclick="openAddRouteModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20 transition">
- + Add Route
- </button>
- <button onclick="openAddPolicyRuleModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-white border border-slate-700 transition">
- + Add Rule
- </button>
- <button onclick="openAddTableModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition">
- + New Table
- </button>
- </div>
- </div>
- <!-- Sub Tabs: Routes / Policy Rules / Tables -->
- <div class="flex border-b border-slate-800 space-x-1">
- <button id="routes-subtab-btn-routes" onclick="switchRoutesSubTab('routes')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-cyan-500 text-white transition flex items-center gap-2">
- <span>Routes</span>
- <span id="routes-badge-routes" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="routes-subtab-btn-rules" onclick="switchRoutesSubTab('rules')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2">
- <span>Policy Routing Rules</span>
- <span id="routes-badge-rules" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="routes-subtab-btn-tables" onclick="switchRoutesSubTab('tables')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2">
- <span>Routing Tables</span>
- <span id="routes-badge-tables" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- </div>
- <!-- Sub-Tab 1: Routes Table -->
- <div id="routes-subtab-routes" class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">Active Routing Table (RIB)</h3>
- <span id="routes-count-badge" class="text-xs font-mono text-slate-400">0 Routes</span>
- </div>
- <div class="flex items-center gap-2">
- <label class="text-xs text-slate-400 font-sans">Table Filter:</label>
- <select id="routes-filter-table" onchange="renderRoutesList()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white font-mono">
- <option value="">All Tables</option>
- <option value="main">main</option>
- </select>
- <button onclick="loadRoutes()" class="text-xs text-cyan-400 hover:text-cyan-300 font-semibold px-2 py-1 bg-slate-800 rounded border border-slate-700">Refresh</button>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-16 text-center" title="Flags: D=Dynamic, A=Active, C=Connect, S=Static, X=Disabled">Flags</th>
- <th class="py-2.5 px-3">Dst. Address</th>
- <th class="py-2.5 px-3">Gateway</th>
- <th class="py-2.5 px-3">Distance</th>
- <th class="py-2.5 px-3">Table / Mark</th>
- <th class="py-2.5 px-3">Interface</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="routes-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="routes-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No routes found.
- </div>
- </div>
- <!-- Sub-Tab 2: Policy Rules -->
- <div id="routes-subtab-rules" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">Policy Routing Rules (ip rule)</h3>
- <span id="rules-count-badge" class="text-xs font-mono text-slate-400">0 Rules</span>
- </div>
- <div class="flex items-center gap-2">
- <label class="flex items-center gap-1.5 text-xs text-slate-400 hover:text-white cursor-pointer select-none bg-slate-800/80 hover:bg-slate-800 border border-slate-700/80 px-2.5 py-1 rounded-lg transition">
- <input type="checkbox" id="prule-show-system" onchange="renderPolicyRules()" class="rounded bg-slate-900 border-slate-700 text-cyan-500 focus:ring-0 w-3.5 h-3.5">
- <span>Show System / Default Rules</span>
- </label>
- <button onclick="loadRoutes()" class="text-xs text-cyan-400 hover:text-cyan-300 font-semibold px-2 py-1 bg-slate-800 rounded border border-slate-700">Refresh</button>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-16">Pref</th>
- <th class="py-2.5 px-3">Src. Address</th>
- <th class="py-2.5 px-3">Dst. Address</th>
- <th class="py-2.5 px-3">Routing Mark (fwmark)</th>
- <th class="py-2.5 px-3">Lookup Table</th>
- <th class="py-2.5 px-3">Action</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="rules-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="rules-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No policy rules configured. Click "+ Add Rule" to route traffic based on routing-mark or source IP.
- </div>
- </div>
- <!-- Sub-Tab 3: Routing Tables -->
- <div id="routes-subtab-tables" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white">Defined Routing Tables</h3>
- <span id="tables-count-badge" class="text-xs font-mono text-slate-400">0 Tables</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-20">FIB ID</th>
- <th class="py-2.5 px-3">Table Name</th>
- <th class="py-2.5 px-3">Comment / Purpose</th>
- </tr>
- </thead>
- <tbody id="tables-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: BGP ROUTING ================= -->
- <section id="section-bgp" class="hidden space-y-6">
- <!-- Top Routing Switcher Bar -->
- <div class="flex items-center gap-1.5 p-1 bg-slate-900/90 border border-slate-800 rounded-xl w-fit">
- <button onclick="navigate('routes')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
- </svg>
- <span>Routes & Policy</span>
- </button>
- <button onclick="navigate('bgp')" class="px-3.5 py-1.5 text-xs font-bold rounded-lg transition bg-purple-600/20 text-purple-300 border border-purple-500/40 shadow-sm flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
- </svg>
- <span>BGP Routing</span>
- </button>
- <button onclick="navigate('ospf')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
- </svg>
- <span>OSPF Routing</span>
- </button>
- <button onclick="navigate('routing-filters')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
- </svg>
- <span>Policy Filters</span>
- </button>
- </div>
- <div class="bg-gradient-to-r from-purple-950/40 via-slate-900 to-slate-900 border border-purple-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-purple-500/20 text-purple-300 border border-purple-500/30 tracking-wide uppercase">BGP Routing</span>
- <h2 class="text-base font-bold text-white">BGP Dynamic Routing</h2>
- <span id="bgp-live-status-pill" class="text-[10px] px-2 py-0.5 rounded font-mono bg-slate-800 text-slate-400 border border-slate-700">Checking...</span>
- </div>
- <p class="text-xs text-slate-400">High-Performance BIRD 2 BGP Engine: Multi-Instance / Multi-AS peering sessions, programmable route filters, prefix announcements, and BGP routing table (RIB).</p>
- </div>
- <div class="flex items-center space-x-2 flex-wrap gap-y-2">
- <button onclick="openBgpInstanceModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-purple-300 border border-purple-900/50 transition flex items-center gap-1.5">
- <span>⚙ BGP Settings</span>
- </button>
- <button onclick="openAddBgpPeerModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20 transition">
- + Add BGP Peer
- </button>
- <button onclick="openAddBgpNetworkModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition">
- + Add Network
- </button>
- <button onclick="loadDynamicRouting()" class="text-xs text-slate-400 hover:text-white px-2.5 py-2 bg-slate-800 rounded-lg border border-slate-700 transition">
- Refresh
- </button>
- </div>
- </div>
- <!-- BGP Sub-Tabs -->
- <div class="flex border-b border-slate-800 space-x-1 overflow-x-auto">
- <button id="bgp-subtab-btn-bgp-peers" onclick="switchBgpSubTab('bgp-peers')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-purple-500 text-white transition flex items-center gap-2 whitespace-nowrap">
- <span>BGP Peer Connections</span>
- <span id="dyn-badge-bgp-peers" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="bgp-subtab-btn-bgp-nets" onclick="switchBgpSubTab('bgp-nets')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>Advertised Networks</span>
- <span id="dyn-badge-bgp-nets" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- <button id="bgp-subtab-btn-bgp-routes" onclick="switchBgpSubTab('bgp-routes')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>BGP Routes (RIB)</span>
- <span id="dyn-badge-bgp-routes" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
- </button>
- </div>
- <!-- Sub-Tab 1: BGP Peers -->
- <div id="dyn-subtab-bgp-peers" class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">Configured BGP Peers</h3>
- <span id="bgp-peers-count-badge" class="text-xs font-mono text-slate-400">0 Peers</span>
- <span id="bgp-live-status-pill" class="text-[10px] px-2 py-0.5 rounded font-mono bg-slate-800 text-slate-400 border border-slate-700">Checking...</span>
- </div>
- <div class="flex items-center gap-2">
- <button onclick="loadDynamicRouting()" class="text-xs text-purple-400 hover:text-purple-300 font-semibold px-2.5 py-1 bg-slate-800 rounded border border-slate-700">Refresh</button>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-16 text-center">Flags</th>
- <th class="py-2.5 px-3">Name</th>
- <th class="py-2.5 px-3">Remote Address</th>
- <th class="py-2.5 px-3">Remote AS</th>
- <th class="py-2.5 px-3">State</th>
- <th class="py-2.5 px-3">Uptime</th>
- <th class="py-2.5 px-3">Prefixes (RX/TX)</th>
- <th class="py-2.5 px-3">Routing Filters</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="bgp-peers-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="bgp-peers-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No BGP peers configured. Click "+ Add BGP Peer" to establish an eBGP or iBGP peering session.
- </div>
- </div>
- <!-- Sub-Tab 2: BGP Networks -->
- <div id="dyn-subtab-bgp-nets" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">Advertised BGP Networks</h3>
- <span id="bgp-nets-count-badge" class="text-xs font-mono text-slate-400">0 Networks</span>
- </div>
- <button onclick="openAddBgpNetworkModal()" class="text-xs font-semibold px-3 py-1.5 rounded-lg bg-purple-600 hover:bg-purple-500 text-white transition">
- + Add Network
- </button>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3">Network (CIDR)</th>
- <th class="py-2.5 px-3">Status</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="bgp-nets-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="bgp-nets-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No networks advertised. Click "+ Add Network" to announce your IP prefixes to BGP peers.
- </div>
- </div>
- <!-- Sub-Tab 3: BGP Routes -->
- <div id="dyn-subtab-bgp-routes" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white">BGP Routing Information Base (show ip bgp)</h3>
- <span id="bgp-routes-count-badge" class="text-xs font-mono text-slate-400">0 Routes</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3">Prefix</th>
- <th class="py-2.5 px-3">Next Hop</th>
- <th class="py-2.5 px-3">Metric</th>
- <th class="py-2.5 px-3">Weight</th>
- <th class="py-2.5 px-3">AS Path</th>
- <th class="py-2.5 px-3">Origin</th>
- </tr>
- </thead>
- <tbody id="bgp-routes-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="bgp-routes-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No active routes in BGP table. Check peer connections and ensure BGP is enabled.
- </div>
- </div>
- </section>
- <!-- ================= SECTION: OSPF ROUTING ================= -->
- <section id="section-ospf" class="hidden space-y-6">
- <!-- Top Routing Switcher Bar -->
- <div class="flex items-center gap-1.5 p-1 bg-slate-900/90 border border-slate-800 rounded-xl w-fit">
- <button onclick="navigate('routes')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
- </svg>
- <span>Routes & Policy</span>
- </button>
- <button onclick="navigate('bgp')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
- </svg>
- <span>BGP Routing</span>
- </button>
- <button onclick="navigate('ospf')" class="px-3.5 py-1.5 text-xs font-bold rounded-lg transition bg-indigo-600/20 text-indigo-300 border border-indigo-500/40 shadow-sm flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
- </svg>
- <span>OSPF Routing</span>
- </button>
- <button onclick="navigate('routing-filters')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
- </svg>
- <span>Policy Filters</span>
- </button>
- </div>
- <!-- OSPF Window Container -->
- <div class="bg-[#131b26] border border-[#243347] rounded-md shadow-2xl overflow-hidden text-xs flex flex-col min-h-[560px]">
- <!-- Window Tab Bar Header -->
- <div class="flex items-center justify-between border-b border-[#243347] bg-[#101721] px-2 pt-1 text-xs select-none">
- <div class="flex items-center space-x-1 overflow-x-auto">
- <div class="flex items-center gap-1.5 px-3 py-2 text-sky-400 font-bold border-r border-[#243347] mr-1">
- <span>🔀</span>
- <span>OSPF</span>
- <span class="text-[10px]">▼</span>
- </div>
- <button id="ospf-tab-btn-instances" onclick="switchOspfTab('instances')" class="px-3 py-2 text-xs font-semibold border-b-2 border-sky-500 text-white transition flex items-center gap-1.5 whitespace-nowrap">
- <span>Instances</span>
- </button>
- <button id="ospf-tab-btn-areas" onclick="switchOspfTab('areas')" class="px-3 py-2 text-xs font-semibold border-b-2 border-transparent text-slate-400 hover:text-white transition flex items-center gap-1.5 whitespace-nowrap">
- <span>Areas</span>
- </button>
- <button id="ospf-tab-btn-area-ranges" onclick="switchOspfTab('area-ranges')" class="px-3 py-2 text-xs font-semibold border-b-2 border-transparent text-slate-400 hover:text-white transition flex items-center gap-1.5 whitespace-nowrap">
- <span>Area Ranges</span>
- </button>
- <button id="ospf-tab-btn-templates" onclick="switchOspfTab('templates')" class="px-3 py-2 text-xs font-semibold border-b-2 border-transparent text-slate-400 hover:text-white transition flex items-center gap-1.5 whitespace-nowrap">
- <span>Interface Templates</span>
- </button>
- <button id="ospf-tab-btn-interfaces" onclick="switchOspfTab('interfaces')" class="px-3 py-2 text-xs font-semibold border-b-2 border-transparent text-slate-400 hover:text-white transition flex items-center gap-1.5 whitespace-nowrap">
- <span>Interfaces</span>
- </button>
- <button id="ospf-tab-btn-static-nbrs" onclick="switchOspfTab('static-nbrs')" class="px-3 py-2 text-xs font-semibold border-b-2 border-transparent text-slate-400 hover:text-white transition flex items-center gap-1.5 whitespace-nowrap">
- <span>Static Neighbors</span>
- </button>
- <button id="ospf-tab-btn-neighbors" onclick="switchOspfTab('neighbors')" class="px-3 py-2 text-xs font-semibold border-b-2 border-transparent text-slate-400 hover:text-white transition flex items-center gap-1.5 whitespace-nowrap">
- <span>Neighbors</span>
- </button>
- <button id="ospf-tab-btn-lsa" onclick="switchOspfTab('lsa')" class="px-3 py-2 text-xs font-semibold border-b-2 border-transparent text-slate-400 hover:text-white transition flex items-center gap-1.5 whitespace-nowrap">
- <span>LSA</span>
- </button>
- </div>
- <div class="flex items-center gap-1 text-slate-400 pr-2">
- <button onclick="loadOspfAll()" title="Refresh" class="hover:text-white p-1">🔄</button>
- <span class="text-slate-600">|</span>
- <button title="Fullscreen" class="hover:text-white p-1">⛶</button>
- <button title="Close" class="hover:text-white p-1">✕</button>
- </div>
- </div>
- <!-- ================= TAB 1: INSTANCES ================= -->
- <div id="ospf-pane-instances" class="flex-1 flex flex-col">
- <!-- Toolbar -->
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <div class="flex items-center space-x-2">
- <button onclick="openOspfInstanceModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-sky-600 hover:text-white text-sky-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedOspfInstance()" id="btn-ospf-inst-enable" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>▶</span> <span>Enable</span>
- </button>
- <button onclick="disableSelectedOspfInstance()" id="btn-ospf-inst-disable" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>⏸</span> <span>Disable</span>
- </button>
- <button onclick="removeSelectedOspfInstance()" id="btn-ospf-inst-remove" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>✕</span> <span>Remove</span>
- </button>
- <button onclick="promptCommentOspfInstance()" id="btn-ospf-inst-comment" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>💬</span> <span>Comment</span>
- </button>
- </div>
- <div class="flex items-center space-x-2">
- <div class="relative">
- <input type="text" id="filter-ospf-instances" oninput="renderOspfInstances()" placeholder="Find..." class="bg-[#15202e] border border-[#26374d] rounded px-2 py-0.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-sky-500 w-32">
- </div>
- <button class="px-2 py-1 bg-[#15202e] hover:bg-[#1a2737] text-slate-300 border border-[#233346] rounded flex items-center gap-1">
- <span>▼</span> <span>Filter</span>
- </button>
- </div>
- </div>
- <!-- Table -->
- <div class="flex-1 overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-[#0e1622] border-b border-[#243347] text-[11px] font-sans select-none">
- <tr>
- <th class="py-2 px-3 w-8 text-center cursor-pointer" onclick="sortOspfTable('instances', 'id')">#</th>
- <th class="py-2 px-3 w-12 text-center cursor-pointer" onclick="sortOspfTable('instances', 'flags')">Flags</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('instances', 'comment')">Comment</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('instances', 'name')">Name <span id="sort-ospf-instances-name">▲</span></th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('instances', 'version')">Version</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('instances', 'vrf')">VRF</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('instances', 'router_id')">Router ID</th>
- </tr>
- </thead>
- <tbody id="ospf-instances-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <!-- Footer -->
- <div class="bg-[#101721] border-t border-[#243347] px-3 py-1.5 flex items-center justify-between text-[11px] font-mono text-slate-400 select-none">
- <span id="ospf-instances-footer-count">0</span>
- <span class="flex items-center gap-1.5 text-emerald-400"><span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> ▶ Live</span>
- </div>
- </div>
- <!-- ================= TAB 2: AREAS ================= -->
- <div id="ospf-pane-areas" class="hidden flex-1 flex flex-col">
- <!-- Toolbar -->
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <div class="flex items-center space-x-2">
- <button onclick="openOspfAreaModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-sky-600 hover:text-white text-sky-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedOspfArea()" id="btn-ospf-area-enable" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>▶</span> <span>Enable</span>
- </button>
- <button onclick="disableSelectedOspfArea()" id="btn-ospf-area-disable" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>⏸</span> <span>Disable</span>
- </button>
- <button onclick="removeSelectedOspfArea()" id="btn-ospf-area-remove" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>✕</span> <span>Remove</span>
- </button>
- <button onclick="promptCommentOspfArea()" id="btn-ospf-area-comment" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>💬</span> <span>Comment</span>
- </button>
- </div>
- <div class="flex items-center space-x-2">
- <div class="relative">
- <input type="text" id="filter-ospf-areas" oninput="renderOspfAreas()" placeholder="Find..." class="bg-[#15202e] border border-[#26374d] rounded px-2 py-0.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-sky-500 w-32">
- </div>
- <button class="px-2 py-1 bg-[#15202e] hover:bg-[#1a2737] text-slate-300 border border-[#233346] rounded flex items-center gap-1">
- <span>▼</span> <span>Filter</span>
- </button>
- </div>
- </div>
- <!-- Table -->
- <div class="flex-1 overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-[#0e1622] border-b border-[#243347] text-[11px] font-sans select-none">
- <tr>
- <th class="py-2 px-3 w-8 text-center cursor-pointer" onclick="sortOspfTable('areas', 'id')">#</th>
- <th class="py-2 px-3 w-12 text-center cursor-pointer" onclick="sortOspfTable('areas', 'flags')">Flags</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('areas', 'comment')">Comment</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('areas', 'name')">Name <span id="sort-ospf-areas-name">▲</span></th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('areas', 'instance')">Instance</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('areas', 'area_id')">Area ID</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('areas', 'area_type')">Type</th>
- </tr>
- </thead>
- <tbody id="ospf-areas-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <!-- Footer -->
- <div class="bg-[#101721] border-t border-[#243347] px-3 py-1.5 flex items-center justify-between text-[11px] font-mono text-slate-400 select-none">
- <span id="ospf-areas-footer-count">0</span>
- <span class="flex items-center gap-1.5 text-emerald-400"><span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> ▶ Live</span>
- </div>
- </div>
- <!-- ================= TAB 3: AREA RANGES ================= -->
- <div id="ospf-pane-area-ranges" class="hidden flex-1 flex flex-col">
- <!-- Toolbar -->
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <div class="flex items-center space-x-2">
- <button onclick="openOspfAreaRangeModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-sky-600 hover:text-white text-sky-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedOspfAreaRange()" id="btn-ospf-range-enable" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>▶</span> <span>Enable</span>
- </button>
- <button onclick="disableSelectedOspfAreaRange()" id="btn-ospf-range-disable" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>⏸</span> <span>Disable</span>
- </button>
- <button onclick="removeSelectedOspfAreaRange()" id="btn-ospf-range-remove" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>✕</span> <span>Remove</span>
- </button>
- <button onclick="promptCommentOspfAreaRange()" id="btn-ospf-range-comment" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>💬</span> <span>Comment</span>
- </button>
- </div>
- <div class="flex items-center space-x-2">
- <div class="relative">
- <input type="text" id="filter-ospf-area-ranges" oninput="renderOspfAreaRanges()" placeholder="Find..." class="bg-[#15202e] border border-[#26374d] rounded px-2 py-0.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-sky-500 w-32">
- </div>
- <button class="px-2 py-1 bg-[#15202e] hover:bg-[#1a2737] text-slate-300 border border-[#233346] rounded flex items-center gap-1">
- <span>▼</span> <span>Filter</span>
- </button>
- </div>
- </div>
- <!-- Table -->
- <div class="flex-1 overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-[#0e1622] border-b border-[#243347] text-[11px] font-sans select-none">
- <tr>
- <th class="py-2 px-3 w-8 text-center cursor-pointer" onclick="sortOspfTable('ranges', 'id')">#</th>
- <th class="py-2 px-3 w-12 text-center cursor-pointer" onclick="sortOspfTable('ranges', 'flags')">Flags</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('ranges', 'comment')">Comment</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('ranges', 'area')">Area <span id="sort-ospf-ranges-area">▲</span></th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('ranges', 'prefix')">Prefix</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('ranges', 'cost')">Cost</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('ranges', 'advertise')">Advertise</th>
- </tr>
- </thead>
- <tbody id="ospf-ranges-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <!-- Footer -->
- <div class="bg-[#101721] border-t border-[#243347] px-3 py-1.5 flex items-center justify-between text-[11px] font-mono text-slate-400 select-none">
- <span id="ospf-ranges-footer-count">0</span>
- <span class="flex items-center gap-1.5 text-emerald-400"><span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> ▶ Live</span>
- </div>
- </div>
- <!-- ================= TAB 4: INTERFACE TEMPLATES ================= -->
- <div id="ospf-pane-templates" class="hidden flex-1 flex flex-col">
- <!-- Toolbar -->
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <div class="flex items-center space-x-2">
- <button onclick="openOspfTemplateModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-sky-600 hover:text-white text-sky-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedOspfTemplate()" id="btn-ospf-tmpl-enable" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>▶</span> <span>Enable</span>
- </button>
- <button onclick="disableSelectedOspfTemplate()" id="btn-ospf-tmpl-disable" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>⏸</span> <span>Disable</span>
- </button>
- <button onclick="removeSelectedOspfTemplate()" id="btn-ospf-tmpl-remove" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>✕</span> <span>Remove</span>
- </button>
- <button onclick="promptCommentOspfTemplate()" id="btn-ospf-tmpl-comment" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>💬</span> <span>Comment</span>
- </button>
- </div>
- <div class="flex items-center space-x-2">
- <div class="relative">
- <input type="text" id="filter-ospf-templates" oninput="renderOspfTemplates()" placeholder="Find..." class="bg-[#15202e] border border-[#26374d] rounded px-2 py-0.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-sky-500 w-32">
- </div>
- <button class="px-2 py-1 bg-[#15202e] hover:bg-[#1a2737] text-slate-300 border border-[#233346] rounded flex items-center gap-1">
- <span>▼</span> <span>Filter</span>
- </button>
- </div>
- </div>
- <!-- Table -->
- <div class="flex-1 overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-[#0e1622] border-b border-[#243347] text-[11px] font-sans select-none">
- <tr>
- <th class="py-2 px-3 w-8 text-center cursor-pointer" onclick="sortOspfTable('templates', 'index')">#</th>
- <th class="py-2 px-3 w-12 text-center cursor-pointer" onclick="sortOspfTable('templates', 'flags')">Flags</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('templates', 'comment')">Comment</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('templates', 'interfaces')">Interfaces <span id="sort-ospf-templates-interfaces">▲</span></th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('templates', 'area')">Area</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('templates', 'networks')">Networks</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('templates', 'network_type')">Network Type</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('templates', 'cost')">Cost</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('templates', 'priority')">Priority</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('templates', 'auth')">Auth</th>
- </tr>
- </thead>
- <tbody id="ospf-templates-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <!-- Footer -->
- <div class="bg-[#101721] border-t border-[#243347] px-3 py-1.5 flex items-center justify-between text-[11px] font-mono text-slate-400 select-none">
- <span id="ospf-templates-footer-count">0</span>
- <span class="flex items-center gap-1.5 text-emerald-400"><span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> ▶ Live</span>
- </div>
- </div>
- <!-- ================= TAB 5: INTERFACES (LIVE DYNAMIC) ================= -->
- <div id="ospf-pane-interfaces" class="hidden flex-1 flex flex-col">
- <!-- Toolbar -->
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <div class="text-slate-400 italic font-sans text-[11px]">Dynamic live kernel interfaces registered in OSPF daemon</div>
- <div class="flex items-center space-x-2">
- <div class="relative">
- <input type="text" id="filter-ospf-interfaces" oninput="renderOspfLiveInterfaces()" placeholder="Find..." class="bg-[#15202e] border border-[#26374d] rounded px-2 py-0.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-sky-500 w-32">
- </div>
- <button class="px-2 py-1 bg-[#15202e] hover:bg-[#1a2737] text-slate-300 border border-[#233346] rounded flex items-center gap-1">
- <span>▼</span> <span>Filter</span>
- </button>
- </div>
- </div>
- <!-- Table -->
- <div class="flex-1 overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-[#0e1622] border-b border-[#243347] text-[11px] font-sans select-none">
- <tr>
- <th class="py-2 px-3 w-12 text-center cursor-pointer" onclick="sortOspfTable('live_ifaces', 'flags')">Flags</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('live_ifaces', 'interface')">Interface <span id="sort-ospf-live_ifaces-interface">▲</span></th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('live_ifaces', 'address')">Address</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('live_ifaces', 'area')">Area</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('live_ifaces', 'instance_id')">Instance ID</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('live_ifaces', 'state')">State</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('live_ifaces', 'cost')">Cost</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('live_ifaces', 'priority')">Priority</th>
- </tr>
- </thead>
- <tbody id="ospf-live-interfaces-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <!-- Footer -->
- <div class="bg-[#101721] border-t border-[#243347] px-3 py-1.5 flex items-center justify-between text-[11px] font-mono text-slate-400 select-none">
- <span id="ospf-live-interfaces-footer-count">0</span>
- <span class="flex items-center gap-1.5 text-emerald-400"><span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> ▶ Live</span>
- </div>
- </div>
- <!-- ================= TAB 6: STATIC NEIGHBORS ================= -->
- <div id="ospf-pane-static-nbrs" class="hidden flex-1 flex flex-col">
- <!-- Toolbar -->
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <div class="flex items-center space-x-2">
- <button onclick="openOspfStaticNbrModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-sky-600 hover:text-white text-sky-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedOspfStaticNbr()" id="btn-ospf-snbr-enable" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>▶</span> <span>Enable</span>
- </button>
- <button onclick="disableSelectedOspfStaticNbr()" id="btn-ospf-snbr-disable" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>⏸</span> <span>Disable</span>
- </button>
- <button onclick="removeSelectedOspfStaticNbr()" id="btn-ospf-snbr-remove" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>✕</span> <span>Remove</span>
- </button>
- <button onclick="promptCommentOspfStaticNbr()" id="btn-ospf-snbr-comment" disabled class="px-2.5 py-1 bg-[#15202e] text-slate-500 border border-[#233346] rounded flex items-center gap-1 font-medium disabled:opacity-50">
- <span>💬</span> <span>Comment</span>
- </button>
- </div>
- <div class="flex items-center space-x-2">
- <div class="relative">
- <input type="text" id="filter-ospf-static-nbrs" oninput="renderOspfStaticNbrs()" placeholder="Find..." class="bg-[#15202e] border border-[#26374d] rounded px-2 py-0.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-sky-500 w-32">
- </div>
- <button class="px-2 py-1 bg-[#15202e] hover:bg-[#1a2737] text-slate-300 border border-[#233346] rounded flex items-center gap-1">
- <span>▼</span> <span>Filter</span>
- </button>
- </div>
- </div>
- <!-- Table -->
- <div class="flex-1 overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-[#0e1622] border-b border-[#243347] text-[11px] font-sans select-none">
- <tr>
- <th class="py-2 px-3 w-8 text-center cursor-pointer" onclick="sortOspfTable('snbrs', 'id')">#</th>
- <th class="py-2 px-3 w-12 text-center cursor-pointer" onclick="sortOspfTable('snbrs', 'flags')">Flags</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('snbrs', 'comment')">Comment</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('snbrs', 'address')">Address <span id="sort-ospf-snbrs-address">▲</span></th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('snbrs', 'area')">Area</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('snbrs', 'poll_interval')">Poll Interval</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('snbrs', 'cost')">Cost</th>
- </tr>
- </thead>
- <tbody id="ospf-snbrs-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <!-- Footer -->
- <div class="bg-[#101721] border-t border-[#243347] px-3 py-1.5 flex items-center justify-between text-[11px] font-mono text-slate-400 select-none">
- <span id="ospf-snbrs-footer-count">0</span>
- <span class="flex items-center gap-1.5 text-emerald-400"><span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> ▶ Live</span>
- </div>
- </div>
- <!-- ================= TAB 7: NEIGHBORS (LIVE DYNAMIC) ================= -->
- <div id="ospf-pane-neighbors" class="hidden flex-1 flex flex-col">
- <!-- Toolbar -->
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <div class="text-slate-400 italic font-sans text-[11px]">Discovered OSPF neighbor adjacencies</div>
- <div class="flex items-center space-x-2">
- <div class="relative">
- <input type="text" id="filter-ospf-neighbors" oninput="renderOspfNeighbors()" placeholder="Find..." class="bg-[#15202e] border border-[#26374d] rounded px-2 py-0.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-sky-500 w-32">
- </div>
- <button class="px-2 py-1 bg-[#15202e] hover:bg-[#1a2737] text-slate-300 border border-[#233346] rounded flex items-center gap-1">
- <span>▼</span> <span>Filter</span>
- </button>
- </div>
- </div>
- <!-- Table -->
- <div class="flex-1 overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-[#0e1622] border-b border-[#243347] text-[11px] font-sans select-none">
- <tr>
- <th class="py-2 px-3 w-12 text-center cursor-pointer" onclick="sortOspfTable('neighbors', 'flags')">Flags</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('neighbors', 'comment')">Comment</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('neighbors', 'instance')">Instance</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('neighbors', 'area')">Area</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('neighbors', 'address')">Address <span id="sort-ospf-neighbors-address">▲</span></th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('neighbors', 'state')">State</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('neighbors', 'state_changes')">State Changes</th>
- </tr>
- </thead>
- <tbody id="ospf-neighbors-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <!-- Footer -->
- <div class="bg-[#101721] border-t border-[#243347] px-3 py-1.5 flex items-center justify-between text-[11px] font-mono text-slate-400 select-none">
- <span id="ospf-neighbors-footer-count">0</span>
- <span class="flex items-center gap-1.5 text-emerald-400"><span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> ▶ Live</span>
- </div>
- </div>
- <!-- ================= TAB 8: LSA (LINK-STATE DATABASE) ================= -->
- <div id="ospf-pane-lsa" class="hidden flex-1 flex flex-col">
- <!-- Toolbar -->
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <div class="text-slate-400 italic font-sans text-[11px]">BIRD Link-State Database (LSADB) advertisements</div>
- <div class="flex items-center space-x-2">
- <div class="relative">
- <input type="text" id="filter-ospf-lsa" oninput="renderOspfLSA()" placeholder="Find..." class="bg-[#15202e] border border-[#26374d] rounded px-2 py-0.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-sky-500 w-32">
- </div>
- <button class="px-2 py-1 bg-[#15202e] hover:bg-[#1a2737] text-slate-300 border border-[#233346] rounded flex items-center gap-1">
- <span>▼</span> <span>Filter</span>
- </button>
- </div>
- </div>
- <!-- Table -->
- <div class="flex-1 overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-[#0e1622] border-b border-[#243347] text-[11px] font-sans select-none">
- <tr>
- <th class="py-2 px-3 w-12 text-center cursor-pointer" onclick="sortOspfTable('lsa', 'flags')">Flags</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('lsa', 'instance')">Instance <span id="sort-ospf-lsa-instance">▲</span></th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('lsa', 'area')">Area</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('lsa', 'type')">Type</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('lsa', 'originator')">Originator</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('lsa', 'id')">ID</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('lsa', 'link')">Link</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('lsa', 'link_index')">Link In...</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('lsa', 'sequence')">Sequence</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('lsa', 'age')">Age</th>
- </tr>
- </thead>
- <tbody id="ospf-lsa-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <!-- Footer -->
- <div class="bg-[#101721] border-t border-[#243347] px-3 py-1.5 flex items-center justify-between text-[11px] font-mono text-slate-400 select-none">
- <span id="ospf-lsa-footer-count">0</span>
- <span class="flex items-center gap-1.5 text-emerald-400"><span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> ▶ Live</span>
- </div>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: ROUTING FILTERS ================= -->
- <section id="section-routing-filters" class="hidden space-y-4">
- <!-- Top Routing Switcher Bar -->
- <div class="flex items-center gap-1.5 p-1 bg-slate-900/90 border border-slate-800 rounded-xl w-fit">
- <button onclick="navigate('routes')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
- </svg>
- <span>Routes & Policy</span>
- </button>
- <button onclick="navigate('bgp')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
- </svg>
- <span>BGP Routing</span>
- </button>
- <button onclick="navigate('ospf')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
- </svg>
- <span>OSPF Routing</span>
- </button>
- <button onclick="navigate('routing-filters')" class="px-3.5 py-1.5 text-xs font-bold rounded-lg transition bg-emerald-600/20 text-emerald-300 border border-emerald-500/40 shadow-sm flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
- </svg>
- <span>Policy Filters</span>
- </button>
- </div>
- <!-- Routing Filter Window Container -->
- <div class="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-2xl">
- <!-- Window Titlebar with Filter Tabs -->
- <div class="bg-slate-950 border-b border-slate-800 px-3 py-1.5 flex flex-wrap items-center justify-between gap-2">
- <div class="flex items-center gap-3">
- <div class="flex items-center gap-2 text-emerald-400 font-bold text-xs">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
- </svg>
- <span>Routing Filters</span>
- </div>
- <!-- Filter Navigation Tabs -->
- <div class="flex items-center gap-1 border-l border-slate-800 pl-3">
- <button id="tab-rf-rules" onclick="switchRoutingFilterTab('rules')" class="px-3 py-1 text-xs font-semibold rounded bg-emerald-600/20 text-emerald-300 border border-emerald-500/30 transition">
- Rules
- </button>
- <button id="tab-rf-select-rules" onclick="switchRoutingFilterTab('select-rules')" class="px-3 py-1 text-xs font-semibold rounded text-slate-400 hover:text-white hover:bg-slate-800 transition">
- Select Rules
- </button>
- <button id="tab-rf-community-lists" onclick="switchRoutingFilterTab('community-lists')" class="px-3 py-1 text-xs font-semibold rounded text-slate-400 hover:text-white hover:bg-slate-800 transition">
- Community Lists
- </button>
- <button id="tab-rf-as-lists" onclick="switchRoutingFilterTab('as-lists')" class="px-3 py-1 text-xs font-semibold rounded text-slate-400 hover:text-white hover:bg-slate-800 transition">
- AS Lists
- </button>
- </div>
- </div>
- <div class="flex items-center gap-2 text-slate-400 text-xs">
- <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-semibold">BIRD 2 Engine</span>
- <button onclick="loadDynamicRouting(true)" class="p-1 hover:text-white rounded" title="Reload routing">↻</button>
- </div>
- </div>
- <!-- Routing Filter Toolbar -->
- <div class="bg-slate-900/90 border-b border-slate-800 px-3 py-2 flex flex-wrap items-center justify-between gap-2 text-xs">
- <div class="flex items-center gap-1.5">
- <button onclick="openRoutingFilterNewModal()" class="px-2.5 py-1 rounded font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-sm flex items-center gap-1">
- <span>+ New</span>
- </button>
- <button id="btn-rf-enable-selected" onclick="toggleSelectedRoutingFilter(false)" class="px-2.5 py-1 rounded font-medium bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition">
- Enable
- </button>
- <button id="btn-rf-disable-selected" onclick="toggleSelectedRoutingFilter(true)" class="px-2.5 py-1 rounded font-medium bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition">
- Disable
- </button>
- <button id="btn-rf-remove-selected" onclick="removeSelectedRoutingFilter()" class="px-2.5 py-1 rounded font-medium bg-slate-800 hover:bg-rose-950 text-rose-400 border border-slate-700 transition">
- Remove
- </button>
- </div>
- <div class="flex items-center gap-2.5">
- <!-- Filter by Chain (Visible in Rules and Select Rules tabs) -->
- <div id="rf-chain-filter-container" class="flex items-center gap-1.5">
- <label class="text-[11px] text-slate-400 font-medium">Chain:</label>
- <select id="routing-filter-chain-select" onchange="filterRoutingFiltersByChain(this.value)" class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-white font-mono">
- <option value="all">All Chains</option>
- </select>
- </div>
- <!-- Find / Search Input -->
- <div class="relative">
- <input type="text" id="rf-search-input" oninput="searchRoutingFilters(this.value)" placeholder="Find..." class="bg-slate-800 border border-slate-700 rounded px-2.5 py-1 text-xs text-white pl-6 w-36 focus:w-48 transition-all">
- <svg class="w-3 h-3 text-slate-400 absolute left-2 top-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
- </svg>
- </div>
- </div>
- </div>
- <!-- TAB 1: RULES -->
- <div id="tab-content-rf-rules" class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/70 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans select-none">
- <tr>
- <th class="py-2 px-2 text-center w-10 cursor-pointer hover:text-white" onclick="sortFilterTable('rules', 'flags')">Flags</th>
- <th class="py-2 px-2 w-12 cursor-pointer hover:text-white" onclick="sortFilterTable('rules', 'rule_order')"># <span id="sort-icon-rules-rule_order">▲</span></th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('rules', 'chain')">Chain <span id="sort-icon-rules-chain"></span></th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('rules', 'rule')">Rule Syntax <span id="sort-icon-rules-rule"></span></th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('rules', 'comment')">Comment <span id="sort-icon-rules-comment"></span></th>
- <th class="py-2 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="routing-filter-rules-tbody" class="divide-y divide-slate-800/60"></tbody>
- </table>
- <div id="rf-rules-empty" class="hidden p-8 text-center text-slate-500 text-xs font-sans">
- No filter rules configured. Click "+ New" to add a routing filter rule.
- </div>
- </div>
- <!-- TAB 2: SELECT RULES -->
- <div id="tab-content-rf-select-rules" class="hidden overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/70 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans select-none">
- <tr>
- <th class="py-2 px-2 text-center w-10 cursor-pointer hover:text-white" onclick="sortFilterTable('select-rules', 'flags')">Flags</th>
- <th class="py-2 px-2 w-12 cursor-pointer hover:text-white" onclick="sortFilterTable('select-rules', 'rule_order')"># <span id="sort-icon-select-rules-rule_order">▲</span></th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('select-rules', 'chain')">Chain <span id="sort-icon-select-rules-chain"></span></th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('select-rules', 'rule')">Rule Syntax <span id="sort-icon-select-rules-rule"></span></th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('select-rules', 'comment')">Comment <span id="sort-icon-select-rules-comment"></span></th>
- <th class="py-2 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="routing-filter-select-rules-tbody" class="divide-y divide-slate-800/60"></tbody>
- </table>
- <div id="rf-select-rules-empty" class="hidden p-8 text-center text-slate-500 text-xs font-sans">
- No select rules configured. Click "+ New" to add a route selection rule.
- </div>
- </div>
- <!-- TAB 3: COMMUNITY LISTS -->
- <div id="tab-content-rf-community-lists" class="hidden overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/70 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans select-none">
- <tr>
- <th class="py-2 px-2 text-center w-10 cursor-pointer hover:text-white" onclick="sortFilterTable('community-lists', 'flags')">Flags</th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('community-lists', 'name')">List Name <span id="sort-icon-community-lists-name">▲</span></th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('community-lists', 'communities')">Communities <span id="sort-icon-community-lists-communities"></span></th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('community-lists', 'regexp')">RegExp <span id="sort-icon-community-lists-regexp"></span></th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('community-lists', 'comment')">Comment <span id="sort-icon-community-lists-comment"></span></th>
- <th class="py-2 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="routing-filter-comm-lists-tbody" class="divide-y divide-slate-800/60"></tbody>
- </table>
- <div id="rf-comm-lists-empty" class="hidden p-8 text-center text-slate-500 text-xs font-sans">
- No BGP community lists configured. Click "+ New" to add a named community set.
- </div>
- </div>
- <!-- TAB 4: AS LISTS -->
- <div id="tab-content-rf-as-lists" class="hidden overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/70 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans select-none">
- <tr>
- <th class="py-2 px-2 text-center w-10 cursor-pointer hover:text-white" onclick="sortFilterTable('as-lists', 'flags')">Flags</th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('as-lists', 'name')">List Name <span id="sort-icon-as-lists-name">▲</span></th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('as-lists', 'range')">Range / ASNs <span id="sort-icon-as-lists-range"></span></th>
- <th class="py-2 px-3 cursor-pointer hover:text-white" onclick="sortFilterTable('as-lists', 'comment')">Comment <span id="sort-icon-as-lists-comment"></span></th>
- <th class="py-2 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="routing-filter-as-lists-tbody" class="divide-y divide-slate-800/60"></tbody>
- </table>
- <div id="rf-as-lists-empty" class="hidden p-8 text-center text-slate-500 text-xs font-sans">
- No AS number lists configured. Click "+ New" to define reusable AS ranges.
- </div>
- </div>
- <!-- Live Status Footer -->
- <div class="px-3 py-1.5 bg-slate-950/80 border-t border-slate-800 flex items-center justify-between text-[11px] text-slate-400">
- <div class="flex items-center gap-2">
- <span id="rf-status-count" class="font-bold text-white">0</span>
- <span class="flex items-center gap-1 text-emerald-400">
- <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
- <span>Live</span>
- </span>
- </div>
- <span class="text-[10px] text-slate-500 font-mono">BIRD 2 Dynamic Routing Policy Engine</span>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: VRRP HIGH AVAILABILITY ================= -->
- <section id="section-vrrp" class="hidden space-y-6">
- <div class="bg-gradient-to-r from-emerald-950/40 via-slate-900 to-slate-900 border border-emerald-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 tracking-wide uppercase">High Availability</span>
- <h2 class="text-base font-bold text-white flex items-center gap-2">
- <span>VRRP Virtual Routers</span>
- <span class="px-2 py-0.5 text-[10px] rounded-full bg-slate-800 text-slate-300 border border-slate-700 font-mono font-normal">Active / Backup Failover</span>
- </h2>
- </div>
- <p class="text-xs text-slate-400">Virtual Router Redundancy Protocol (VRRPv3/v2) with automated Virtual IP (VIP) failover, preemptive election, priority ranking, and virtual MAC routing.</p>
- </div>
- <div class="flex items-center gap-2">
- <button onclick="openAddVRRPModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20 transition flex items-center gap-1.5">
- <span>+ Add VRRP Instance</span>
- </button>
- <button onclick="loadVRRP(true)" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition" title="Refresh">
- <span>🔄</span>
- </button>
- </div>
- </div>
- <!-- KPI Summary Cards -->
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
- <div class="text-xs text-slate-400">Total VRRP Routers</div>
- <div id="vrrp-stat-total" class="text-xl font-bold text-white font-mono mt-1">0</div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
- <div class="text-xs text-slate-400">Master Instances (Active VIP)</div>
- <div id="vrrp-stat-master" class="text-xl font-bold text-emerald-400 font-mono mt-1">0</div>
- <div class="text-[10px] text-slate-500 mt-0.5">Holding virtual IP gateways</div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
- <div class="text-xs text-slate-400">Backup Instances (Standby)</div>
- <div id="vrrp-stat-backup" class="text-xl font-bold text-sky-400 font-mono mt-1">0</div>
- <div class="text-[10px] text-slate-500 mt-0.5">Listening for heartbeats</div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
- <div class="text-xs text-slate-400">Redundancy Protocol</div>
- <div class="text-xl font-bold text-amber-300 font-mono mt-1">VRRPv3</div>
- <div class="text-[10px] text-slate-500 mt-0.5">keepalived HA engine</div>
- </div>
- </div>
- <!-- VRRP Table View -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <div>
- <h3 class="text-xs font-bold text-white">Configured VRRP Instances</h3>
- <p class="text-[11px] text-slate-400 mt-0.5">Virtual router instances, priority weights, virtual IP addresses and live election states</p>
- </div>
- <div class="text-xs text-slate-400 font-mono">
- <span class="text-emerald-400 font-bold">M</span> = Master | <span class="text-sky-400 font-bold">B</span> = Backup | <span class="text-rose-400 font-bold">X</span> = Disabled
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-12 text-center">Flag</th>
- <th class="py-2.5 px-3">Name</th>
- <th class="py-2.5 px-3">Interface</th>
- <th class="py-2.5 px-3 text-center">VRID</th>
- <th class="py-2.5 px-3 text-center">Priority</th>
- <th class="py-2.5 px-3">Virtual IP (VIP)</th>
- <th class="py-2.5 px-3 text-center">Preempt</th>
- <th class="py-2.5 px-3">Virtual MAC</th>
- <th class="py-2.5 px-3 text-center">Live State</th>
- <th class="py-2.5 px-3">Comment</th>
- <th class="py-2.5 px-3 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="vrrp-table-tbody" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="vrrp-table-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No VRRP instances configured. Click "+ Add VRRP Instance" to configure high availability redundancy.
- </div>
- </div>
- </section>
- <!-- ================= SECTION: DEBIAN CONFIG PERSISTENCE ================= -->
- <section id="section-persistence" class="hidden space-y-6">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
- <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
- <div>
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <span>Debian /etc/network/interfaces.d/ Persistence</span>
- <span class="text-[10px] bg-brand-500/20 text-brand-400 px-2 py-0.5 rounded border border-brand-500/30">Debian Native</span>
- </h3>
- <p class="text-xs text-slate-400 mt-1">Changes saved to <code class="text-brand-400">/etc/network/interfaces.d/vlans.cfg</code> survive container reboots.</p>
- </div>
- <div class="flex items-center space-x-3">
- <button onclick="loadDebianConfig()" class="text-xs bg-slate-800 hover:bg-slate-700 text-slate-300 px-3 py-2 rounded-lg border border-slate-700 transition">Re-generate Preview</button>
- <button onclick="saveDebianConfig()" class="flex items-center space-x-2 bg-brand-600 hover:bg-brand-500 text-white font-medium text-xs px-4 py-2 rounded-lg shadow-lg shadow-brand-500/20 transition">
- <span>Save to Debian Config</span>
- </button>
- </div>
- </div>
- <div class="relative">
- <pre id="debian-config-view" class="bg-slate-950 p-4 rounded-lg font-mono text-xs text-slate-300 overflow-x-auto border border-slate-800 max-h-96 leading-relaxed">Loading config preview...</pre>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: TROUBLESHOOT TOOLS ================= -->
- <section id="section-tools" class="hidden space-y-6">
- <!-- Top Banner -->
- <div class="bg-gradient-to-r from-amber-950/40 via-slate-900 to-slate-900 border border-amber-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-amber-500/20 text-amber-300 border border-amber-500/30 tracking-wide uppercase">Diagnostics</span>
- <h2 class="text-base font-bold text-white">Troubleshoot & Diagnostic Tools</h2>
- </div>
- <p class="text-xs text-slate-400">Comprehensive network diagnostic suite: ICMP echo latency, path route tracing, continuous MTR telemetry, DNS resolution, and TCP port probing.</p>
- </div>
- </div>
- <!-- Tools Subtabs Navigation -->
- <div class="flex items-center gap-1 border-b border-slate-800 pb-0 overflow-x-auto">
- <button id="tools-subtab-btn-ping" onclick="switchToolsSubTab('ping')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-amber-400 text-amber-300 transition flex items-center gap-2 whitespace-nowrap">
- <span>Ping (ICMP)</span>
- </button>
- <button id="tools-subtab-btn-traceroute" onclick="switchToolsSubTab('traceroute')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>Traceroute</span>
- </button>
- <button id="tools-subtab-btn-mtr" onclick="switchToolsSubTab('mtr')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>MTR Telemetry</span>
- </button>
- <button id="tools-subtab-btn-dns" onclick="switchToolsSubTab('dns')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>DNS Resolution</span>
- </button>
- <button id="tools-subtab-btn-port" onclick="switchToolsSubTab('port')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
- <span>Port Probe (TCP Check)</span>
- </button>
- </div>
- <!-- ================= SUBTAB: PING ================= -->
- <div id="tools-view-ping" class="space-y-5">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
- <form id="tools-ping-form" onsubmit="executePing(event)" class="space-y-4">
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
- <div class="md:col-span-2">
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Target Host or IP *</label>
- <input type="text" id="tools-ping-target" required placeholder="e.g. 8.8.8.8, 1.1.1.1, google.com" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Count</label>
- <select id="tools-ping-count" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- <option value="0">Continuous (Until Stopped)</option>
- <option value="4" selected>4 packets</option>
- <option value="5">5 packets</option>
- <option value="10">10 packets</option>
- <option value="20">20 packets</option>
- <option value="50">50 packets</option>
- <option value="100">100 packets</option>
- </select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Source Interface</label>
- <select id="tools-ping-iface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- <option value="">Auto (Default Route)</option>
- </select>
- </div>
- </div>
- <div class="flex flex-wrap items-center justify-between gap-4 pt-2">
- <div class="flex items-center space-x-6 text-xs">
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="tools-ping-df" class="rounded text-amber-500 bg-slate-800 border-slate-700">
- <span>Don't Fragment (DF bit)</span>
- </label>
- <div class="flex items-center space-x-2">
- <span class="text-slate-400">Size (bytes):</span>
- <input type="number" id="tools-ping-size" value="56" min="1" max="65500" class="w-20 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-white font-mono">
- </div>
- </div>
- <button type="submit" id="tools-ping-btn" class="px-5 py-2 rounded-lg font-semibold text-xs bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition flex items-center gap-2">
- <span id="tools-ping-spinner" class="hidden animate-spin">↻</span>
- <span id="tools-ping-btn-text">Start Ping</span>
- </button>
- </div>
- </form>
- </div>
- <!-- Ping Results Container -->
- <div id="tools-ping-results" class="hidden space-y-4">
- <!-- KPI Summary Cards -->
- <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-3 text-center">
- <div class="text-[10px] text-slate-400 uppercase">Packets Sent</div>
- <div id="tools-ping-stat-sent" class="text-base font-bold text-white font-mono mt-1">0</div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-3 text-center">
- <div class="text-[10px] text-slate-400 uppercase">Received</div>
- <div id="tools-ping-stat-recv" class="text-base font-bold text-emerald-400 font-mono mt-1">0</div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-3 text-center">
- <div class="text-[10px] text-slate-400 uppercase">Packet Loss</div>
- <div id="tools-ping-stat-loss" class="text-base font-bold font-mono mt-1">0%</div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-3 text-center">
- <div class="text-[10px] text-slate-400 uppercase">Avg RTT</div>
- <div id="tools-ping-stat-avg" class="text-base font-bold text-cyan-400 font-mono mt-1">0 ms</div>
- </div>
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-3 text-center">
- <div class="text-[10px] text-slate-400 uppercase">Min / Max</div>
- <div id="tools-ping-stat-minmax" class="text-xs font-bold text-purple-300 font-mono mt-1.5">-</div>
- </div>
- </div>
- <!-- Replies Table -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-3 border-b border-slate-800 flex items-center justify-between">
- <div class="flex items-center gap-2.5">
- <span class="text-xs font-bold text-white">ICMP Echo Replies</span>
- <span id="tools-ping-status-badge" class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold"></span>
- </div>
- <button type="button" onclick="clearPingTable()" class="text-[11px] text-slate-400 hover:text-white px-2 py-0.5 rounded bg-slate-800/60 hover:bg-slate-800 border border-slate-700/60 transition">Clear</button>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2 px-3"># Seq</th>
- <th class="py-2 px-3">Responder</th>
- <th class="py-2 px-3">Bytes</th>
- <th class="py-2 px-3">TTL</th>
- <th class="py-2 px-3">Latency (RTT)</th>
- <th class="py-2 px-3 text-right">Status</th>
- </tr>
- </thead>
- <tbody id="tools-ping-tbody" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- </div>
- <!-- Raw CLI Drawer -->
- <details class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3 text-xs">
- <summary class="cursor-pointer text-slate-400 font-medium hover:text-white">Raw CLI Console Output</summary>
- <pre id="tools-ping-raw" class="mt-2 bg-slate-950 p-3 rounded font-mono text-[11px] text-slate-300 overflow-x-auto border border-slate-800 leading-relaxed"></pre>
- </details>
- </div>
- </div>
- <!-- ================= SUBTAB: TRACEROUTE ================= -->
- <div id="tools-view-traceroute" class="hidden space-y-5">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
- <form id="tools-traceroute-form" onsubmit="executeTraceroute(event)" class="space-y-4">
- <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
- <div class="md:col-span-2">
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Target Host or IP *</label>
- <input type="text" id="tools-tr-target" required placeholder="e.g. 1.1.1.1 or google.com" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Max Hops</label>
- <input type="number" id="tools-tr-maxhops" value="15" min="1" max="30" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Protocol</label>
- <select id="tools-tr-proto" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- <option value="icmp" selected>ICMP Echo (-I)</option>
- <option value="udp">UDP Probe</option>
- </select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Source Interface</label>
- <select id="tools-tr-iface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- <option value="">Auto (Default Route)</option>
- </select>
- </div>
- </div>
- <div class="flex items-center justify-between pt-2">
- <label class="flex items-center space-x-2 text-xs text-slate-300 cursor-pointer">
- <input type="checkbox" id="tools-tr-resolve" class="rounded text-amber-500 bg-slate-800 border-slate-700">
- <span>Resolve Hostnames (Reverse DNS)</span>
- </label>
- <button type="submit" id="tools-tr-btn" class="px-5 py-2 rounded-lg font-semibold text-xs bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition flex items-center gap-2">
- <span id="tools-tr-spinner" class="hidden animate-spin">↻</span>
- <span id="tools-tr-btn-text">Start Traceroute</span>
- </button>
- </div>
- </form>
- </div>
- <div id="tools-tr-results" class="hidden space-y-4">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-3 border-b border-slate-800 flex items-center justify-between">
- <div class="flex items-center gap-2.5">
- <span class="text-xs font-bold text-white">Route Hops</span>
- <span id="tools-tr-hops-count" class="text-xs font-mono text-slate-400">0 Hops</span>
- </div>
- <button type="button" onclick="clearTracerouteTable()" class="text-[11px] text-slate-400 hover:text-white px-2 py-0.5 rounded bg-slate-800/60 hover:bg-slate-800 border border-slate-700/60 transition">Clear</button>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-16">Hop #</th>
- <th class="py-2.5 px-3">Gateway Host / IP</th>
- <th class="py-2.5 px-3">RTT 1</th>
- <th class="py-2.5 px-3">RTT 2</th>
- <th class="py-2.5 px-3 text-right">Status</th>
- </tr>
- </thead>
- <tbody id="tools-tr-tbody" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- </div>
- <details class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3 text-xs">
- <summary class="cursor-pointer text-slate-400 font-medium hover:text-white">Raw CLI Console Output</summary>
- <pre id="tools-tr-raw" class="mt-2 bg-slate-950 p-3 rounded font-mono text-[11px] text-slate-300 overflow-x-auto border border-slate-800 leading-relaxed"></pre>
- </details>
- </div>
- </div>
- <!-- ================= SUBTAB: MTR ================= -->
- <div id="tools-view-mtr" class="hidden space-y-5">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
- <form id="tools-mtr-form" onsubmit="executeMTR(event)" class="space-y-4">
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
- <div class="md:col-span-2">
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Target Host or IP *</label>
- <input type="text" id="tools-mtr-target" required placeholder="e.g. 1.1.1.1 or 8.8.8.8" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Cycle Count</label>
- <select id="tools-mtr-count" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- <option value="2">2 cycles (Fast)</option>
- <option value="3" selected>3 cycles</option>
- <option value="5">5 cycles</option>
- <option value="10">10 cycles (Deep)</option>
- </select>
- </div>
- </div>
- <div class="flex justify-end pt-2">
- <button type="submit" id="tools-mtr-btn" class="px-5 py-2 rounded-lg font-semibold text-xs bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition flex items-center gap-2">
- <span id="tools-mtr-spinner" class="hidden">↻</span>
- <span>Start MTR Report</span>
- </button>
- </div>
- </form>
- </div>
- <div id="tools-mtr-results" class="hidden space-y-4">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-3 border-b border-slate-800 flex items-center justify-between">
- <span class="text-xs font-bold text-white">MTR Route Telemetry</span>
- <span id="tools-mtr-hops-count" class="text-xs font-mono text-slate-400">0 Hops</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3 w-16">Hop #</th>
- <th class="py-2.5 px-3">Host / Router</th>
- <th class="py-2.5 px-3">Loss %</th>
- <th class="py-2.5 px-3">Sent</th>
- <th class="py-2.5 px-3">Last (ms)</th>
- <th class="py-2.5 px-3">Avg (ms)</th>
- <th class="py-2.5 px-3">Best (ms)</th>
- <th class="py-2.5 px-3">Worst (ms)</th>
- <th class="py-2.5 px-3">StDev</th>
- </tr>
- </thead>
- <tbody id="tools-mtr-tbody" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- </div>
- <details class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3 text-xs">
- <summary class="cursor-pointer text-slate-400 font-medium hover:text-white">Raw CLI Console Output</summary>
- <pre id="tools-mtr-raw" class="mt-2 bg-slate-950 p-3 rounded font-mono text-[11px] text-slate-300 overflow-x-auto border border-slate-800 leading-relaxed"></pre>
- </details>
- </div>
- </div>
- <!-- ================= SUBTAB: DNS LOOKUP ================= -->
- <div id="tools-view-dns" class="hidden space-y-5">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
- <form id="tools-dns-form" onsubmit="executeDNS(event)" class="space-y-4">
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
- <div class="md:col-span-2">
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Domain Name *</label>
- <input type="text" id="tools-dns-domain" required placeholder="e.g. cloudflare.com, google.com" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Record Type</label>
- <select id="tools-dns-type" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- <option value="A" selected>A (IPv4)</option>
- <option value="AAAA">AAAA (IPv6)</option>
- <option value="CNAME">CNAME</option>
- <option value="MX">MX (Mail)</option>
- <option value="TXT">TXT</option>
- <option value="NS">NS (Nameserver)</option>
- <option value="SOA">SOA</option>
- <option value="ANY">ANY</option>
- </select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Custom DNS Server (Optional)</label>
- <input type="text" id="tools-dns-server" placeholder="e.g. 1.1.1.1, 8.8.8.8" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- </div>
- <div class="flex justify-end pt-2">
- <button type="submit" id="tools-dns-btn" class="px-5 py-2 rounded-lg font-semibold text-xs bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition flex items-center gap-2">
- <span id="tools-dns-spinner" class="hidden">↻</span>
- <span>Resolve Domain</span>
- </button>
- </div>
- </form>
- </div>
- <div id="tools-dns-results" class="hidden space-y-4">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-3 border-b border-slate-800 flex items-center justify-between">
- <div class="flex items-center gap-2">
- <span class="text-xs font-bold text-white">DNS Answer Records</span>
- <span id="tools-dns-meta" class="text-[11px] font-mono text-cyan-300"></span>
- </div>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-3">Name</th>
- <th class="py-2.5 px-3">TTL (s)</th>
- <th class="py-2.5 px-3">Class</th>
- <th class="py-2.5 px-3">Type</th>
- <th class="py-2.5 px-3">Value / Target</th>
- </tr>
- </thead>
- <tbody id="tools-dns-tbody" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- </div>
- <details class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3 text-xs">
- <summary class="cursor-pointer text-slate-400 font-medium hover:text-white">Raw CLI Console Output</summary>
- <pre id="tools-dns-raw" class="mt-2 bg-slate-950 p-3 rounded font-mono text-[11px] text-slate-300 overflow-x-auto border border-slate-800 leading-relaxed"></pre>
- </details>
- </div>
- </div>
- <!-- ================= SUBTAB: PORT PROBE ================= -->
- <div id="tools-view-port" class="hidden space-y-5">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
- <form id="tools-port-form" onsubmit="executePortProbe(event)" class="space-y-4">
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
- <div class="md:col-span-2">
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Target Host or IP *</label>
- <input type="text" id="tools-port-target" required placeholder="e.g. 1.1.1.1, 192.168.131.1" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Port (TCP) *</label>
- <input type="number" id="tools-port-num" required min="1" max="65535" value="80" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Timeout (s)</label>
- <input type="number" id="tools-port-timeout" value="3" min="1" max="10" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- </div>
- <!-- Quick Presets -->
- <div class="flex flex-wrap items-center gap-2 pt-1">
- <span class="text-[11px] text-slate-400">Quick Ports:</span>
- <button type="button" onclick="setPortPreset(80)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-cyan-300 border border-slate-700">HTTP: 80</button>
- <button type="button" onclick="setPortPreset(443)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-emerald-300 border border-slate-700">HTTPS: 443</button>
- <button type="button" onclick="setPortPreset(22)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-purple-300 border border-slate-700">SSH: 22</button>
- <button type="button" onclick="setPortPreset(53)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-indigo-300 border border-slate-700">DNS: 53</button>
- <button type="button" onclick="setPortPreset(179)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-amber-300 border border-slate-700">BGP: 179</button>
- <button type="button" onclick="setPortPreset(8291)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-pink-300 border border-slate-700">Remote Mgmt: 8291</button>
- <button type="button" onclick="setPortPreset(8006)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-orange-300 border border-slate-700">PVE: 8006</button>
- </div>
- <div class="flex justify-end pt-2">
- <button type="submit" id="tools-port-btn" class="px-5 py-2 rounded-lg font-semibold text-xs bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition flex items-center gap-2">
- <span id="tools-port-spinner" class="hidden">↻</span>
- <span>Probe Port</span>
- </button>
- </div>
- </form>
- </div>
- <div id="tools-port-results" class="hidden space-y-4">
- <div id="tools-port-banner" class="rounded-xl p-5 border flex items-center justify-between">
- <div class="flex items-center gap-3">
- <span id="tools-port-icon" class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm"></span>
- <div>
- <h3 id="tools-port-title" class="text-sm font-bold"></h3>
- <p id="tools-port-sub" class="text-xs mt-0.5 font-mono"></p>
- </div>
- </div>
- <div class="text-right">
- <div class="text-[10px] uppercase text-slate-400">Handshake Latency</div>
- <div id="tools-port-latency" class="text-base font-bold font-mono text-white"></div>
- </div>
- </div>
- <details class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3 text-xs">
- <summary class="cursor-pointer text-slate-400 font-medium hover:text-white">Handshake Details</summary>
- <pre id="tools-port-raw" class="mt-2 bg-slate-950 p-3 rounded font-mono text-[11px] text-slate-300 overflow-x-auto border border-slate-800 leading-relaxed"></pre>
- </details>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: BANDWIDTH TEST (BwTest) ================= -->
- <section id="section-bwtest" class="hidden space-y-6">
- <!-- Top Banner -->
- <div class="bg-gradient-to-r from-emerald-950/50 via-slate-900 to-slate-900 border border-emerald-800/40 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
- <div>
- <div class="flex items-center gap-2 mb-1">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 tracking-wide uppercase">Throughput Benchmark</span>
- <h2 class="text-base font-bold text-white flex items-center gap-2">
- <span>Bandwidth Test Engine</span>
- <span class="px-2 py-0.5 text-[10px] rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 font-mono font-normal">UDP & TCP Line-Rate</span>
- </h2>
- </div>
- <p class="text-xs text-slate-400">High-performance network throughput benchmark with line-rate packet generation, token-bucket pacing, sliding-window RFC 3550 jitter telemetry, and bidirectional stream testing.</p>
- </div>
- <!-- Server Status & Controls -->
- <div class="flex items-center gap-3">
- <div class="flex items-center gap-2 bg-slate-950/80 px-3 py-1.5 rounded-lg border border-slate-800 text-xs font-mono">
- <span id="bwtest-server-indicator" class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
- <span class="text-slate-400">Server:</span>
- <span id="bwtest-server-badge" class="text-emerald-400 font-bold">Port 2000 (Active)</span>
- </div>
- <button onclick="openBwTestServerModal()" class="text-xs font-semibold px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition flex items-center gap-1.5">
- <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/></svg>
- <span>Server Settings</span>
- </button>
- </div>
- </div>
- <!-- 4 Top KPI Cards (Live Gauges) -->
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
- <!-- TX Card -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
- <span class="w-2 h-2 rounded-full bg-cyan-400"></span>
- <span>Upload (TX)</span>
- </div>
- <div class="flex items-baseline gap-1 mt-1 font-mono">
- <span id="bwtest-stat-tx-mbps" class="text-2xl font-bold text-cyan-400">0.00</span>
- <span class="text-xs text-slate-400">Mbps</span>
- </div>
- <div class="text-[10px] text-slate-500 mt-0.5 font-mono">
- Peak: <span id="bwtest-stat-tx-peak" class="text-cyan-300 font-semibold">0.00 Mbps</span> • <span id="bwtest-stat-tx-pkts">0</span> pkts
- </div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center text-cyan-400">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
- </div>
- </div>
- <!-- RX Card -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
- <span class="w-2 h-2 rounded-full bg-purple-400"></span>
- <span>Download (RX)</span>
- </div>
- <div class="flex items-baseline gap-1 mt-1 font-mono">
- <span id="bwtest-stat-rx-mbps" class="text-2xl font-bold text-purple-400">0.00</span>
- <span class="text-xs text-slate-400">Mbps</span>
- </div>
- <div class="text-[10px] text-slate-500 mt-0.5 font-mono">
- Peak: <span id="bwtest-stat-rx-peak" class="text-purple-300 font-semibold">0.00 Mbps</span> • <span id="bwtest-stat-rx-pkts">0</span> pkts
- </div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-400">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
- </div>
- </div>
- <!-- Packet Loss & Jitter -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Loss & Jitter</div>
- <div class="flex items-baseline gap-2 mt-1 font-mono">
- <span id="bwtest-stat-loss" class="text-2xl font-bold text-emerald-400">0.0%</span>
- <span class="text-xs text-slate-400">(0 lost)</span>
- </div>
- <div class="text-[10px] text-slate-500 mt-0.5 font-mono">
- Jitter: <span id="bwtest-stat-jitter" class="text-slate-300 font-semibold">0.00 ms</span>
- </div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
- </div>
- </div>
- <!-- Time & Transferred Data -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Elapsed & Volume</div>
- <div class="flex items-baseline gap-1 mt-1 font-mono">
- <span id="bwtest-stat-time" class="text-2xl font-bold text-white">0.0s</span>
- <span id="bwtest-stat-target-dur" class="text-xs text-slate-400">/ 10s</span>
- </div>
- <div class="text-[10px] text-slate-500 mt-0.5 font-mono">
- Data: <span id="bwtest-stat-data" class="text-slate-300 font-semibold">0.0 MB</span>
- </div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-slate-300">
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
- </div>
- </div>
- </div>
- <!-- Main Grid: Benchmark Controls + Live Telemetry Graph -->
- <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
- <!-- Left Panel: Test Setup Form (5 cols) -->
- <div class="lg:col-span-5 bg-slate-900/90 border border-slate-800 rounded-xl p-5 space-y-4">
- <div class="border-b border-slate-800 pb-3 flex items-center justify-between">
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <span>Test Parameters</span>
- </h3>
- <span id="bwtest-run-status-badge" class="px-2 py-0.5 rounded text-[10px] font-mono bg-slate-800 text-slate-400 border border-slate-700 font-semibold">IDLE</span>
- </div>
- <form id="bwtest-form" onsubmit="startBwTest(event)" class="space-y-4">
- <!-- Target Host & Port -->
- <div>
- <div class="flex justify-between items-center mb-1">
- <label class="block text-xs font-semibold text-slate-300">Target IP or Hostname</label>
- <div class="flex gap-1 text-[10px] font-mono">
- <button type="button" onclick="setBwTestTarget('127.0.0.1')" class="px-1.5 py-0.5 bg-slate-800 hover:bg-slate-700 text-cyan-400 rounded transition border border-slate-700">127.0.0.1</button>
- <button type="button" onclick="setBwTestTarget('192.168.131.56')" class="px-1.5 py-0.5 bg-slate-800 hover:bg-slate-700 text-emerald-400 rounded transition border border-slate-700">eth0</button>
- </div>
- </div>
- <div class="grid grid-cols-3 gap-2">
- <div class="col-span-2">
- <input type="text" id="bwtest-input-target" required value="127.0.0.1" placeholder="e.g. 192.168.88.1 or router.lan" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-emerald-500">
- </div>
- <div>
- <input type="number" id="bwtest-input-port" required value="2000" min="1" max="65535" placeholder="Port" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-emerald-500" title="Control Port (default 2000)">
- </div>
- </div>
- </div>
- <!-- Direction (Both / TX / RX) -->
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Traffic Direction</label>
- <div class="grid grid-cols-3 gap-2">
- <button type="button" id="bwtest-dir-both" onclick="setBwTestDirection('both')" class="py-2 px-2 rounded-lg text-xs font-bold border transition text-center bg-emerald-600/20 border-emerald-500/50 text-emerald-300 shadow-sm">
- Both (Full Duplex)
- </button>
- <button type="button" id="bwtest-dir-tx" onclick="setBwTestDirection('tx')" class="py-2 px-2 rounded-lg text-xs font-medium border border-slate-800 bg-slate-950 text-slate-400 hover:text-white transition text-center">
- Transmit (TX)
- </button>
- <button type="button" id="bwtest-dir-rx" onclick="setBwTestDirection('rx')" class="py-2 px-2 rounded-lg text-xs font-medium border border-slate-800 bg-slate-950 text-slate-400 hover:text-white transition text-center">
- Receive (RX)
- </button>
- </div>
- <input type="hidden" id="bwtest-input-direction" value="both">
- </div>
- <!-- Protocol & Streams -->
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Protocol</label>
- <select id="bwtest-input-protocol" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-emerald-500">
- <option value="udp" selected>UDP (Loss & Jitter)</option>
- <option value="tcp">TCP (Stream)</option>
- </select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Parallel Streams</label>
- <select id="bwtest-input-streams" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-emerald-500">
- <option value="1" selected>1 Stream</option>
- <option value="2">2 Streams</option>
- <option value="4">4 Streams</option>
- <option value="8">8 Streams</option>
- </select>
- </div>
- </div>
- <!-- Bandwidth Limit -->
- <div>
- <div class="flex justify-between items-center mb-1">
- <label class="block text-xs font-semibold text-slate-300">Bandwidth Target Limit</label>
- <div class="flex gap-1 text-[10px] font-mono">
- <button type="button" onclick="setBwTestLimit(0)" class="px-1.5 py-0.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded transition border border-slate-700">Max</button>
- <button type="button" onclick="setBwTestLimit(50000000)" class="px-1.5 py-0.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded transition border border-slate-700">50M</button>
- <button type="button" onclick="setBwTestLimit(100000000)" class="px-1.5 py-0.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded transition border border-slate-700">100M</button>
- <button type="button" onclick="setBwTestLimit(1000000000)" class="px-1.5 py-0.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded transition border border-slate-700">1G</button>
- </div>
- </div>
- <select id="bwtest-input-limit" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-emerald-500">
- <option value="0" selected>Unlimited (Line Rate / Maximum)</option>
- <option value="10000000">10 Mbps</option>
- <option value="50000000">50 Mbps</option>
- <option value="100000000">100 Mbps</option>
- <option value="250000000">250 Mbps</option>
- <option value="500000000">500 Mbps</option>
- <option value="1000000000">1 Gbps</option>
- </select>
- </div>
- <!-- Packet Size & Duration -->
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Packet Payload Size</label>
- <select id="bwtest-input-pktsize" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-emerald-500">
- <option value="1472" selected>1500 (Standard MTU)</option>
- <option value="8972">9000 (Jumbo Frame)</option>
- <option value="512">512 (Small Payload)</option>
- <option value="64">64 (Min VoIP / Small)</option>
- </select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Duration</label>
- <select id="bwtest-input-duration" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-emerald-500">
- <option value="10" selected>10 Seconds</option>
- <option value="30">30 Seconds</option>
- <option value="60">60 Seconds</option>
- <option value="0">Continuous (Until Stop)</option>
- </select>
- </div>
- </div>
- <!-- Action Buttons -->
- <div class="pt-2 flex items-center gap-3">
- <button type="submit" id="bwtest-btn-start" class="flex-1 py-2.5 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs shadow-lg shadow-emerald-500/20 transition flex items-center justify-center gap-2">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
- <span>Run Bandwidth Test</span>
- </button>
- <button type="button" id="bwtest-btn-stop" onclick="stopBwTest()" disabled class="py-2.5 px-4 rounded-lg bg-slate-800 hover:bg-rose-600 text-slate-400 hover:text-white font-bold text-xs transition border border-slate-700 disabled:opacity-40 disabled:hover:bg-slate-800 disabled:hover:text-slate-400 flex items-center justify-center gap-2">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/></svg>
- <span>Stop</span>
- </button>
- </div>
- </form>
- </div>
- <!-- Right Panel: Real-Time Dynamic Graph & Interval Log (7 cols) -->
- <div class="lg:col-span-7 space-y-4">
- <!-- Live Chart Card -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
- <div class="flex items-center justify-between mb-3">
- <div class="flex items-center gap-3">
- <h3 class="text-sm font-bold text-white">Live Real-Time Throughput</h3>
- <div class="flex items-center gap-3 text-xs font-mono">
- <span class="flex items-center gap-1.5 text-cyan-400"><span class="w-2.5 h-1 bg-cyan-400 rounded-full"></span> TX (Upload)</span>
- <span class="flex items-center gap-1.5 text-purple-400"><span class="w-2.5 h-1 bg-purple-400 rounded-full"></span> RX (Download)</span>
- </div>
- </div>
- <span id="bwtest-graph-rate" class="text-xs font-mono text-slate-400">0.00 Mbps total</span>
- </div>
- <div class="relative w-full h-52 bg-slate-950 rounded-lg border border-slate-800/80 overflow-hidden">
- <canvas id="bwtest-chart" class="w-full h-full block"></canvas>
- <div id="bwtest-chart-placeholder" class="absolute inset-0 flex items-center justify-center text-xs text-slate-500 font-sans pointer-events-none">
- Start a test to stream live throughput waveform in real time
- </div>
- </div>
- </div>
- <!-- Second-by-Second Breakdown Table -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-3 border-b border-slate-800 flex items-center justify-between">
- <h4 class="text-xs font-bold text-white uppercase tracking-wider">Interval Telemetry Log</h4>
- <span id="bwtest-sample-count" class="text-[10px] font-mono text-slate-400">0 samples</span>
- </div>
- <div class="overflow-x-auto max-h-48 overflow-y-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/70 border-b border-slate-800 text-[10px] uppercase font-sans sticky top-0">
- <tr>
- <th class="py-1.5 px-3">Interval</th>
- <th class="py-1.5 px-3 text-cyan-400">TX Rate</th>
- <th class="py-1.5 px-3 text-purple-400">RX Rate</th>
- <th class="py-1.5 px-3">Loss %</th>
- <th class="py-1.5 px-3">Jitter</th>
- <th class="py-1.5 px-3">Total Volume</th>
- </tr>
- </thead>
- <tbody id="bwtest-samples-tbody" class="divide-y divide-slate-800/60">
- <tr>
- <td colspan="6" class="p-4 text-center text-slate-500 text-xs font-sans">No test active. Click "Run Bandwidth Test" to benchmark link.</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- <!-- Benchmark History Table -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <div>
- <h3 class="text-sm font-bold text-white">Recent Benchmark History</h3>
- <p class="text-[11px] text-slate-400 mt-0.5">Summary of previous bandwidth test runs recorded on this router.</p>
- </div>
- <button onclick="loadBwTestHistory()" class="text-xs font-semibold px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition">
- <span>🔄 Refresh</span>
- </button>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs font-mono">
- <thead class="text-slate-400 bg-slate-950/70 border-b border-slate-800 text-[10px] uppercase font-sans">
- <tr>
- <th class="py-2.5 px-4">Session ID</th>
- <th class="py-2.5 px-4">Target Server</th>
- <th class="py-2.5 px-4">Protocol</th>
- <th class="py-2.5 px-4">Direction</th>
- <th class="py-2.5 px-4">Duration</th>
- <th class="py-2.5 px-4 text-cyan-400">Avg / Peak TX</th>
- <th class="py-2.5 px-4 text-purple-400">Avg / Peak RX</th>
- <th class="py-2.5 px-4">Packet Loss</th>
- <th class="py-2.5 px-4">Avg Jitter</th>
- <th class="py-2.5 px-4">Date / Time</th>
- </tr>
- </thead>
- <tbody id="bwtest-history-tbody" class="divide-y divide-slate-800/80">
- <tr>
- <td colspan="10" class="p-6 text-center text-slate-500 text-xs font-sans">No past benchmark runs recorded yet.</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </section>
- </main>
- </div>
- </div>
- <!-- ================= MODAL: CREATE VLAN ================= -->
- <div id="vlan-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 class="text-sm font-bold text-white">Create New VLAN Interface</h3>
- <button onclick="closeVlanModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="vlan-form" onsubmit="submitCreateVlan(event)" class="p-6 space-y-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Parent Interface *</label>
- <select id="vlan-parent" onchange="autoSuggestVlanName()" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-cyan-500 font-mono"></select>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">VLAN ID (1-4094) *</label>
- <input type="number" id="vlan-id" min="1" max="4094" placeholder="10" required oninput="autoSuggestVlanName()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Interface Name</label>
- <input type="text" id="vlan-name" placeholder="eth0.10" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- </div>
- <div>
- <div class="flex items-center justify-between mb-1.5">
- <label class="text-xs font-semibold text-slate-300">Router IP Address & CIDR</label>
- <div class="flex space-x-1">
- <button type="button" onclick="setSubnetPreset('/24')" class="text-[10px] bg-slate-800 text-slate-400 px-1.5 py-0.5 rounded">/24</button>
- <button type="button" onclick="setSubnetPreset('/23')" class="text-[10px] bg-slate-800 text-slate-400 px-1.5 py-0.5 rounded">/23</button>
- <button type="button" onclick="setSubnetPreset('/16')" class="text-[10px] bg-slate-800 text-slate-400 px-1.5 py-0.5 rounded">/16</button>
- </div>
- </div>
- <input type="text" id="vlan-ip" placeholder="192.168.10.1/24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Role Tag</label>
- <select id="vlan-role" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white">
- <option value="LAN">LAN</option>
- <option value="GUEST">Guest Network</option>
- <option value="IOT">IoT / Smart Home</option>
- <option value="DMZ">DMZ / Isolated</option>
- <option value="MGMT">Management</option>
- <option value="WAN">WAN / Uplink</option>
- </select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Description / Alias</label>
- <input type="text" id="vlan-desc" placeholder="Guest WiFi Subnet" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white">
- </div>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeVlanModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" id="vlan-submit-btn" class="px-5 py-2 rounded-lg text-xs font-semibold bg-gradient-to-r from-brand-600 to-cyan-600 text-white">Create VLAN</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: EDIT INTERFACE ================= -->
- <div id="iface-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div>
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <span id="modal-iface-name">eth0</span>
- <span id="modal-iface-badge" class="text-[10px] font-mono px-2 py-0.5 rounded bg-slate-800 text-slate-300">Ethernet</span>
- </h3>
- </div>
- <button onclick="closeIfaceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <div class="p-6 space-y-5">
- <div class="grid grid-cols-2 gap-4 p-3 bg-slate-950/60 rounded-xl border border-slate-800/80">
- <div>
- <span class="block text-[11px] text-slate-400 mb-1">Administrative Link</span>
- <div class="flex items-center space-x-2">
- <button id="modal-btn-up" onclick="setIfaceState(currentModalIface, 'up')" class="px-3 py-1 rounded text-xs font-semibold bg-emerald-600/30 text-emerald-400 border border-emerald-500/40">UP</button>
- <button id="modal-btn-down" onclick="setIfaceState(currentModalIface, 'down')" class="px-3 py-1 rounded text-xs font-semibold bg-slate-800 text-slate-400 hover:bg-rose-600/30 hover:text-rose-400">DOWN</button>
- </div>
- </div>
- <div>
- <span class="block text-[11px] text-slate-400 mb-1">MTU Size</span>
- <div class="flex items-center space-x-2">
- <input type="number" id="modal-iface-mtu" min="68" max="9000" class="w-24 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-white font-mono">
- <button onclick="applyMTU()" class="text-xs bg-slate-800 hover:bg-slate-700 text-white px-2.5 py-1 rounded border border-slate-700">Set</button>
- </div>
- </div>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Assigned IP Addresses</label>
- <div id="modal-ip-list" class="space-y-1.5 mb-3 font-mono text-xs"></div>
- <div class="flex space-x-2">
- <input type="text" id="modal-new-ip" placeholder="192.168.100.1/24" class="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- <button onclick="addInterfaceIP()" class="bg-brand-600 hover:bg-brand-500 text-white px-4 py-2 rounded-lg text-xs font-semibold">+ Add IP</button>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Role Tag</label>
- <select id="modal-iface-role" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white">
- <option value="WAN">WAN / Uplink</option>
- <option value="LAN">LAN</option>
- <option value="DMZ">DMZ</option>
- <option value="GUEST">Guest</option>
- <option value="IOT">IoT</option>
- <option value="MGMT">Management</option>
- </select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Description</label>
- <input type="text" id="modal-iface-desc" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white">
- </div>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-between items-center">
- <button id="modal-delete-vlan-btn" onclick="confirmDeleteVlan(currentModalIface)" class="hidden text-xs text-rose-400 hover:text-rose-300">Delete VLAN</button>
- <div class="flex space-x-3">
- <button onclick="closeIfaceModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800">Close</button>
- <button onclick="saveInterfaceMetadata()" class="px-5 py-2 rounded-lg text-xs font-semibold bg-brand-600 hover:bg-brand-500 text-white">Save Changes</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- ================= MODAL: PPPoE CLIENT ================= -->
- <div id="pppoe-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 id="pppoe-modal-title" class="text-sm font-bold text-white">Add PPPoE Client Interface</h3>
- <button onclick="closePPPoEModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSavePPPoE(event)" class="p-6 space-y-4">
- <input type="hidden" id="pppoe-modal-edit-orig">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Name *</label>
- <input type="text" id="pppoe-modal-name" placeholder="pppoe-out1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-blue-500">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Interface *</label>
- <select id="pppoe-modal-iface" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-blue-500"></select>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Username *</label>
- <input type="text" id="pppoe-modal-user" placeholder="user@isp" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-blue-500">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Password *</label>
- <input type="password" id="pppoe-modal-pass" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-blue-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Service Name (Optional)</label>
- <input type="text" id="pppoe-modal-service" placeholder="ISP Service" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">PPP Profile</label>
- <select id="pppoe-modal-profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-blue-500">
- <option value="default" selected>default</option>
- <option value="default-encryption">default-encryption</option>
- </select>
- </div>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">MTU</label>
- <input type="number" id="pppoe-modal-mtu" value="1492" min="576" max="1500" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- <div class="grid grid-cols-3 gap-2 pt-2 border-t border-slate-800/80">
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="pppoe-modal-defroute" checked class="rounded bg-slate-800 border-slate-700 text-blue-500">
- <span class="text-xs text-slate-300 font-medium">Default Route</span>
- </label>
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="pppoe-modal-reconnect" checked class="rounded bg-slate-800 border-slate-700 text-blue-500">
- <span class="text-xs text-slate-300 font-medium">Auto-Reconnect</span>
- </label>
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="pppoe-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
- <span class="text-xs text-slate-300 font-medium">Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closePPPoEModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-500/20">Save PPPoE</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: WIREGUARD INTERFACE ================= -->
- <!-- ================= MODAL: ADD / EDIT WIREGUARD INTERFACE ================= -->
- <div id="wg-iface-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div class="flex items-center gap-2">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-rose-500/20 text-rose-300 border border-rose-500/30 tracking-wide uppercase">Cryptographic VPN</span>
- <h3 id="wg-iface-modal-title" class="text-sm font-bold text-white">Add WireGuard Interface</h3>
- </div>
- <button onclick="closeAddWGInterfaceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveWGInterface(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="wg-iface-modal-edit-orig">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Interface Name *</label>
- <input type="text" id="wg-iface-modal-name" placeholder="wg0" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-rose-500">
- <p class="text-[10px] text-slate-500 mt-1">e.g. wg0, wg-office, wgx-Space</p>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Listen Port *</label>
- <input type="number" id="wg-iface-modal-port" value="51820" min="1" max="65535" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-rose-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Tunnel IP (CIDR)</label>
- <input type="text" id="wg-iface-modal-addr" placeholder="10.10.0.1/24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-rose-500">
- <p class="text-[10px] text-slate-500 mt-1">Assigned IP/mask, or leave blank</p>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">MTU</label>
- <input type="number" id="wg-iface-modal-mtu" value="1420" min="1280" max="1500" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment / Alias</label>
- <input type="text" id="wg-iface-modal-comment" placeholder="e.g. Main Roadwarrior Server, Site-to-Site tunnel" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-rose-500">
- </div>
- <div class="bg-slate-950/60 border border-slate-800/80 rounded-xl p-3.5 space-y-3">
- <div class="flex items-center justify-between">
- <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider font-mono">Cryptographic Keypair</span>
- <button type="button" onclick="generateWGInterfaceKeys()" class="text-[11px] text-rose-400 hover:text-rose-300 font-semibold flex items-center gap-1">
- <span>⚡ Generate New Keypair</span>
- </button>
- </div>
- <div>
- <div class="flex items-center justify-between mb-1">
- <label class="text-[11px] font-semibold text-slate-300">Public Key</label>
- <button type="button" onclick="copyWGInterfacePubKey()" class="text-[10px] text-cyan-400 hover:text-cyan-300">📋 Copy Public Key</button>
- </div>
- <input type="text" id="wg-iface-modal-pubkey" readonly class="w-full bg-slate-900 border border-slate-800 rounded-lg px-3 py-2 text-slate-300 font-mono text-[11px]">
- </div>
- <div>
- <div class="flex items-center justify-between mb-1">
- <label class="text-[11px] font-semibold text-slate-300">Private Key (Secret) *</label>
- <button type="button" onclick="toggleWGPrivKeyVisibility()" id="btn-toggle-wg-privkey" class="text-[10px] text-slate-400 hover:text-white">👁️ Show</button>
- </div>
- <input type="password" id="wg-iface-modal-privkey" required oninput="onWGInterfacePrivKeyInput()" class="w-full bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-[11px] focus:outline-none focus:border-rose-500">
- <p class="text-[10px] text-slate-500 mt-1">You can paste any existing base64 private key; the public key will update automatically.</p>
- </div>
- </div>
- <div class="pt-1">
- <label class="flex items-center space-x-2.5 cursor-pointer">
- <input type="checkbox" id="wg-iface-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500 focus:ring-rose-500">
- <span class="font-medium text-slate-300">Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeAddWGInterfaceModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800 transition">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-rose-600 hover:bg-rose-500 text-white shadow-lg shadow-rose-500/20 transition">Save Interface</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT WIREGUARD PEER ================= -->
- <div id="wg-peer-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div class="flex items-center gap-2">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-rose-500/20 text-rose-300 border border-rose-500/30 tracking-wide uppercase">Peer Connection</span>
- <h3 id="wg-peer-modal-title" class="text-sm font-bold text-white">Add WireGuard Peer</h3>
- </div>
- <button onclick="closeAddWGPeerModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveWGPeer(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="wg-peer-modal-edit-orig-iface">
- <input type="hidden" id="wg-peer-modal-edit-orig-pubkey">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">WireGuard Interface *</label>
- <select id="wg-peer-modal-iface" onchange="checkWGPeerKeyValidity()" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-rose-500"></select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Peer Name / Alias *</label>
- <input type="text" id="wg-peer-modal-name" placeholder="Laptop, iPhone, Branch-Athens" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-rose-500">
- </div>
- </div>
- <div>
- <div class="flex items-center justify-between mb-1.5">
- <label class="font-semibold text-slate-300">Peer Public Key *</label>
- <button type="button" onclick="generatePeerKeypairHelper()" class="text-[11px] text-cyan-400 hover:text-cyan-300 font-semibold flex items-center gap-1">
- <span>⚡ Generate Client Keypair</span>
- </button>
- </div>
- <input type="text" id="wg-peer-modal-pubkey" oninput="checkWGPeerKeyValidity()" placeholder="Base64 44-character public key" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-rose-500">
-
- <!-- Warning if user tries to paste interface's own public key -->
- <div id="wg-peer-key-warning" class="hidden text-rose-400 text-[11px] font-sans mt-1.5 bg-rose-950/50 p-2.5 rounded-lg border border-rose-800/70">
- ⚠️ <strong>Invalid Key:</strong> The peer public key cannot be the same as the interface's own public key. A WireGuard node cannot connect to itself!
- </div>
- <!-- Box showing generated client secret key if generated here -->
- <div id="wg-peer-gen-key-box" class="hidden mt-2.5 bg-slate-950/80 p-3 rounded-xl border border-cyan-800/60 text-xs font-mono space-y-1.5">
- <div class="flex items-center justify-between text-[11px] text-cyan-300 font-bold font-sans">
- <span>Generated Client Private Key (Secret):</span>
- <button type="button" onclick="copyGeneratedPeerPrivKey()" class="text-white hover:text-cyan-300 font-semibold text-[10px] bg-slate-800 px-2 py-0.5 rounded border border-slate-700">📋 Copy Secret</button>
- </div>
- <input type="text" id="wg-peer-gen-privkey" readonly class="w-full bg-slate-900 border border-slate-800 rounded px-2.5 py-1.5 text-slate-300 text-xs font-mono">
- <p class="text-[10px] text-slate-400 font-sans">Copy and save this private key to configure the client device (e.g. phone or remote router).</p>
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Allowed IPs (CIDR) *</label>
- <input type="text" id="wg-peer-modal-allowedips" placeholder="e.g. 10.10.0.2/32, 192.168.20.0/24 or 0.0.0.0/0" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-rose-500">
- <p class="text-[10px] text-slate-500 mt-1">IP ranges routed to/from this peer (comma-separated)</p>
- </div>
- <div class="grid grid-cols-3 gap-3">
- <div class="col-span-2">
- <label class="block font-semibold text-slate-300 mb-1.5">Endpoint Host/IP (Optional)</label>
- <input type="text" id="wg-peer-modal-endpoint" placeholder="e.g. 10.2.145.253 or vpn.example.com" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-rose-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Endpoint Port</label>
- <input type="number" id="wg-peer-modal-port" placeholder="51820" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-rose-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Keepalive (seconds)</label>
- <input type="number" id="wg-peer-modal-keepalive" value="25" min="0" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-rose-500">
- <p class="text-[10px] text-slate-500 mt-1">25s recommended for NAT traversal</p>
- </div>
- <div>
- <div class="flex items-center justify-between mb-1.5">
- <label class="font-semibold text-slate-300">Preshared Key</label>
- <button type="button" onclick="generatePeerPSK()" class="text-[10px] text-purple-400 hover:text-purple-300 font-semibold">Generate</button>
- </div>
- <input type="password" id="wg-peer-modal-preshared" placeholder="Optional PSK" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-rose-500">
- </div>
- </div>
- <div class="pt-1">
- <label class="flex items-center space-x-2.5 cursor-pointer">
- <input type="checkbox" id="wg-peer-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500 focus:ring-rose-500">
- <span class="font-medium text-slate-300">Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeAddWGPeerModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800 transition">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-rose-600 hover:bg-rose-500 text-white shadow-lg shadow-rose-500/20 transition">Save Peer</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: IPSEC TUNNEL (FORTIGATE PHASE 1 & PHASE 2 STYLE) ================= -->
- <div id="ipsec-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-2xl shadow-2xl overflow-hidden animate-in">
- <!-- Modal Header -->
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
- <div class="flex items-center gap-2.5">
- <div class="w-8 h-8 rounded-lg bg-amber-500/10 border border-amber-500/30 flex items-center justify-center text-amber-400">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
- </svg>
- </div>
- <div>
- <h3 id="ipsec-modal-title" class="text-sm font-bold text-white">IPsec Tunnel (FortiGate Style)</h3>
- <p class="text-[11px] text-slate-400">Phase 1 (IKE Gateway) & Phase 2 (Traffic Selectors / Multi-Subnet)</p>
- </div>
- </div>
- <button onclick="closeAddIPSecModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <!-- FortiGate Phase Navigation Tabs -->
- <div class="flex border-b border-slate-800 bg-slate-950/40 px-6 pt-2 gap-2 text-xs">
- <button type="button" id="tab-btn-ipsec-p1" onclick="switchIpsecModalTab('p1')" class="px-4 py-2 font-bold rounded-t-lg transition border-b-2 border-amber-500 text-amber-300 bg-slate-900/80">
- Phase 1 (Network & IKE)
- </button>
- <button type="button" id="tab-btn-ipsec-p2" onclick="switchIpsecModalTab('p2')" class="px-4 py-2 font-medium rounded-t-lg transition text-slate-400 hover:text-white hover:bg-slate-800/60">
- Phase 2 (Selectors & Subnets)
- </button>
- </div>
- <form onsubmit="submitSaveIPSec(event)" class="p-6 space-y-4 max-h-[75vh] overflow-y-auto text-xs">
- <!-- PHASE 1 TAB CONTENT -->
- <div id="ipsec-tab-content-p1" class="space-y-4">
- <!-- General / Network -->
- <div class="p-4 bg-slate-950/40 border border-slate-800 rounded-xl space-y-3">
- <div class="text-[11px] font-bold text-amber-400 uppercase tracking-wider">Network & Gateway</div>
-
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Tunnel Name *</label>
- <input type="text" id="ipsec-modal-name" placeholder="e.g. to_branch_office" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono focus:border-amber-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Remote Gateway IP / FQDN *</label>
- <input type="text" id="ipsec-modal-remotegw" placeholder="e.g. 198.51.100.2 or vpn.remote.com" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono focus:border-amber-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Outgoing Interface</label>
- <select id="ipsec-modal-iface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="%any">Auto (%any)</option>
- </select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Local Gateway IP (Optional)</label>
- <input type="text" id="ipsec-modal-localaddrs" placeholder="%any (Default)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Comments</label>
- <input type="text" id="ipsec-modal-comments" placeholder="P2P Tunnel to Branch Office FortiGate" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white">
- </div>
- </div>
- <!-- Authentication -->
- <div class="p-4 bg-slate-950/40 border border-slate-800 rounded-xl space-y-3">
- <div class="text-[11px] font-bold text-amber-400 uppercase tracking-wider">Authentication</div>
- <div class="grid grid-cols-3 gap-3">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">IKE Version</label>
- <select id="ipsec-modal-ikeversion" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="ikev2" selected>IKEv2 (Recommended)</option>
- <option value="ikev1">IKEv1</option>
- </select>
- </div>
- <div class="col-span-2">
- <label class="block font-semibold text-slate-300 mb-1">Pre-Shared Key (PSK) *</label>
- <div class="relative">
- <input type="password" id="ipsec-modal-psk" placeholder="Enter secure pre-shared key" required class="w-full bg-slate-800 border border-slate-700 rounded-lg pl-3 pr-10 py-1.5 text-white font-mono focus:border-amber-500">
- <button type="button" onclick="toggleIpsecPskVisibility()" class="absolute right-2.5 top-2 text-slate-400 hover:text-white" title="Show/Hide Key">
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
- </svg>
- </button>
- </div>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block font-medium text-slate-400 mb-1">Local ID (Optional)</label>
- <input type="text" id="ipsec-modal-localid" placeholder="e.g. my-router-id" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- <div>
- <label class="block font-medium text-slate-400 mb-1">Remote ID (Optional)</label>
- <input type="text" id="ipsec-modal-remoteid" placeholder="e.g. remote-router-id" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- </div>
- <!-- Phase 1 Proposals & Timers -->
- <div class="p-4 bg-slate-950/40 border border-slate-800 rounded-xl space-y-3">
- <div class="text-[11px] font-bold text-amber-400 uppercase tracking-wider">Phase 1 Cryptographic Proposals</div>
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">IKE Proposals</label>
- <input type="text" id="ipsec-modal-ikeprop" value="aes256-sha256-modp2048,default" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <p class="text-[10px] text-slate-500 mt-0.5">e.g. aes256-sha256-modp2048,default</p>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Diffie-Hellman Group</label>
- <select id="ipsec-modal-dhgroup" onchange="updateIpsecIkeProposalFromDH(this.value)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="modp2048" selected>Group 14 (2048-bit MODP)</option>
- <option value="ecp256">Group 19 (256-bit ECP)</option>
- <option value="ecp384">Group 20 (384-bit ECP)</option>
- <option value="modp1536">Group 5 (1536-bit MODP)</option>
- <option value="modp1024">Group 2 (1024-bit MODP)</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">IKE Keylife (seconds)</label>
- <input type="number" id="ipsec-modal-ikekeylife" value="86400" min="60" max="604800" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Dead Peer Detection (DPD)</label>
- <select id="ipsec-modal-dpd" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="on-demand" selected>On-Demand (Recommended)</option>
- <option value="periodic">Periodic</option>
- <option value="disabled">Disabled</option>
- </select>
- </div>
- </div>
- </div>
- </div>
- <!-- PHASE 2 TAB CONTENT -->
- <div id="ipsec-tab-content-p2" class="hidden space-y-4">
- <!-- Phase 2 Parameters -->
- <div class="p-4 bg-slate-950/40 border border-slate-800 rounded-xl space-y-3">
- <div class="text-[11px] font-bold text-amber-400 uppercase tracking-wider">Phase 2 Parameters & PFS</div>
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Phase 2 Name</label>
- <input type="text" id="ipsec-modal-p2name" placeholder="Auto: <Name>_p2" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">ESP Keylife (seconds)</label>
- <input type="number" id="ipsec-modal-espkeylife" value="28800" min="60" max="604800" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">ESP Proposals</label>
- <input type="text" id="ipsec-modal-espprop" value="aes256-sha256-modp2048,default" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <p class="text-[10px] text-slate-500 mt-0.5">e.g. aes256-sha256-modp2048,default</p>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">PFS Key Group (Perfect Forward Secrecy)</label>
- <select id="ipsec-modal-pfsgroup" onchange="updateIpsecEspProposalFromPFS(this.value)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="modp2048" selected>Group 14 (2048-bit MODP)</option>
- <option value="ecp256">Group 19 (256-bit ECP)</option>
- <option value="ecp384">Group 20 (384-bit ECP)</option>
- <option value="none">None (No PFS)</option>
- </select>
- </div>
- </div>
- <div class="flex items-center gap-6 pt-1">
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="ipsec-modal-autostart" checked class="rounded bg-slate-800 border-slate-700 text-amber-500">
- <span class="font-medium text-slate-300">Auto-negotiate / Always-On (Start)</span>
- </label>
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="ipsec-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
- <span class="font-medium text-slate-300">Disabled (X)</span>
- </label>
- </div>
- </div>
- <!-- PHASE 2 SELECTORS: DYNAMIC MULTI-SUBNETS (FortiGate Style) -->
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
- <!-- Local Subnets (Local Address / Selectors) -->
- <div class="p-4 bg-slate-950/60 border border-slate-800 rounded-xl space-y-3">
- <div class="flex items-center justify-between">
- <div>
- <div class="text-[11px] font-bold text-cyan-400 uppercase tracking-wider">Local Subnets (Selectors)</div>
- <p class="text-[10px] text-slate-400">Subnets on this router to encrypt</p>
- </div>
- <button type="button" onclick="addIpsecLocalSubnet('')" class="px-2 py-1 text-[11px] font-semibold bg-cyan-600 hover:bg-cyan-500 text-white rounded shadow-sm flex items-center gap-1">
- <span>+ Subnet</span>
- </button>
- </div>
- <!-- Container for dynamic local subnets -->
- <div id="ipsec-modal-local-subnets-container" class="space-y-2 max-h-48 overflow-y-auto pr-1"></div>
- </div>
- <!-- Remote Subnets (Remote Address / Selectors) -->
- <div class="p-4 bg-slate-950/60 border border-slate-800 rounded-xl space-y-3">
- <div class="flex items-center justify-between">
- <div>
- <div class="text-[11px] font-bold text-purple-400 uppercase tracking-wider">Remote Subnets (Selectors)</div>
- <p class="text-[10px] text-slate-400">Subnets on remote router to access</p>
- </div>
- <button type="button" onclick="addIpsecRemoteSubnet('')" class="px-2 py-1 text-[11px] font-semibold bg-purple-600 hover:bg-purple-500 text-white rounded shadow-sm flex items-center gap-1">
- <span>+ Subnet</span>
- </button>
- </div>
- <!-- Container for dynamic remote subnets -->
- <div id="ipsec-modal-remote-subnets-container" class="space-y-2 max-h-48 overflow-y-auto pr-1"></div>
- </div>
- </div>
- </div>
- <!-- Footer -->
- <div class="pt-4 border-t border-slate-800 flex items-center justify-between">
- <button type="button" onclick="closeAddIPSecModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800">Cancel</button>
- <div class="flex items-center space-x-2">
- <button type="button" id="btn-ipsec-switch-step" onclick="toggleIpsecPhaseStep()" class="px-4 py-2 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-amber-300 border border-slate-700">
- Next: Phase 2 Selectors →
- </button>
- <button type="submit" class="px-5 py-2 rounded-lg text-xs font-bold bg-amber-600 hover:bg-amber-500 text-white shadow-lg shadow-amber-500/20">
- Save Tunnel (OK)
- </button>
- </div>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: L2TP CLIENT ================= -->
- <div id="l2tp-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 id="l2tp-modal-title" class="text-sm font-bold text-white">Add L2TP Client Interface</h3>
- <button onclick="closeL2TPModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveL2TP(event)" class="p-6 space-y-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Client Interface Name *</label>
- <input type="text" id="l2tp-modal-name" placeholder="l2tp-out1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Connect To (Server IP / Host) *</label>
- <input type="text" id="l2tp-modal-server" placeholder="vpn.example.com or 203.0.113.1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Username *</label>
- <input type="text" id="l2tp-modal-user" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Password *</label>
- <input type="password" id="l2tp-modal-pass" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">PPP Profile</label>
- <select id="l2tp-modal-profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
- <option value="default-encryption" selected>default-encryption (MPPE-128)</option>
- <option value="default">default (No encryption)</option>
- </select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">IPSec Secret / PSK (Optional)</label>
- <input type="password" id="l2tp-modal-ipsec" placeholder="Optional Pre-Shared Key" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4 pt-2">
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="l2tp-modal-defroute" checked class="rounded bg-slate-800 border-slate-700 text-cyan-500">
- <span class="text-xs text-slate-300 font-medium">Default Route</span>
- </label>
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="l2tp-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
- <span class="text-xs text-slate-300 font-medium">Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeL2TPModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20">Save L2TP</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: PPTP CLIENT ================= -->
- <div id="pptp-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 id="pptp-modal-title" class="text-sm font-bold text-white">Add PPTP Client Interface</h3>
- <button onclick="closePPTPModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSavePPTP(event)" class="p-6 space-y-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Client Interface Name *</label>
- <input type="text" id="pptp-modal-name" placeholder="pptp-out1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-purple-500">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Connect To (Server IP / Host) *</label>
- <input type="text" id="pptp-modal-server" placeholder="vpn.example.com or 203.0.113.1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-purple-500">
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Username *</label>
- <input type="text" id="pptp-modal-user" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-purple-500">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Password *</label>
- <input type="password" id="pptp-modal-pass" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-purple-500">
- </div>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">PPP Profile</label>
- <select id="pptp-modal-profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-purple-500">
- <option value="default-encryption" selected>default-encryption (MPPE-128)</option>
- <option value="default">default (No encryption)</option>
- </select>
- </div>
- <div class="grid grid-cols-3 gap-2 pt-2 border-t border-slate-800/80">
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="pptp-modal-mppe" checked class="rounded bg-slate-800 border-slate-700 text-purple-500">
- <span class="text-xs text-slate-300 font-medium">MPPE-128</span>
- </label>
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="pptp-modal-defroute" checked class="rounded bg-slate-800 border-slate-700 text-purple-500">
- <span class="text-xs text-slate-300 font-medium">Default Route</span>
- </label>
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="pptp-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
- <span class="text-xs text-slate-300 font-medium">Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closePPTPModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20">Save PPTP</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: FIREWALL FILTER RULE ================= -->
- <div id="filter-modal" class="fixed inset-0 bg-black/60 backdrop-blur-[2px] z-50 hidden flex items-center justify-center p-2 sm:p-4">
- <div id="filter-modal-window" class="bg-[#131b26] border border-[#243347] rounded-md shadow-2xl w-full max-w-[720px] max-h-[92vh] flex flex-col overflow-hidden text-xs select-none">
-
- <!-- Window Title Bar -->
- <div class="bg-[#162335] border-b border-[#223145] px-3.5 py-1.5 flex items-center justify-between shrink-0">
- <div class="flex items-center gap-2">
- <!-- WinBox v4 Logo -->
- <div class="flex items-center gap-0.5 text-cyan-400 font-bold font-mono text-[11px] leading-none">
- <svg class="w-3.5 h-3.5 text-cyan-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
- <path d="M4 5l3.5 10L11 5" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M15 5v5h4m0-5v10" stroke-linecap="round" stroke-linejoin="round"/>
- <circle cx="12" cy="20" r="1.5" fill="currentColor"/>
- </svg>
- <span class="text-cyan-400 font-bold text-xs tracking-tight">v4</span>
- </div>
- <span class="text-slate-200 font-medium text-xs">Firewall Rule ></span>
- <span id="fw-modal-badge" class="bg-[#0078d4] text-white text-[11px] px-2 py-0.5 rounded font-mono font-medium">New...</span>
- </div>
- <div class="flex items-center gap-2">
- <button type="button" onclick="toggleMaximizeFilterModal()" title="Maximize / Restore" class="text-slate-400 hover:text-white p-0.5 text-xs transition-colors">
- <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
- </button>
- <button type="button" onclick="closeFilterModal()" title="Close" class="text-slate-400 hover:text-rose-400 p-0.5 text-xs font-bold leading-none transition-colors">✕</button>
- </div>
- </div>
- <!-- Window Tabs Bar -->
- <div class="bg-[#111923] border-b border-[#1f2d3e] px-2 flex items-center gap-1 shrink-0">
- <button type="button" onclick="switchFwRuleTab('general')" id="fw-tab-btn-general" class="fw-rule-tab-btn bg-[#182638] text-white border-t-2 border-sky-400 px-3.5 py-1.5 text-xs font-medium transition-colors">General</button>
- <button type="button" onclick="switchFwRuleTab('advanced')" id="fw-tab-btn-advanced" class="fw-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Advanced</button>
- <button type="button" onclick="switchFwRuleTab('extra')" id="fw-tab-btn-extra" class="fw-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Extra</button>
- <button type="button" onclick="switchFwRuleTab('action')" id="fw-tab-btn-action" class="fw-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Action</button>
- <button type="button" onclick="switchFwRuleTab('statistics')" id="fw-tab-btn-statistics" class="fw-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Statistics</button>
- </div>
- <!-- Window Body (Split Layout: Left Tab Content + Right Action Sidebar) -->
- <div class="flex-1 flex min-h-0 overflow-hidden">
-
- <!-- Form Content Container (Scrollable) -->
- <form id="fw-rule-form" onsubmit="event.preventDefault(); applyFilterRule(true);" class="flex-1 overflow-y-auto px-4 py-3 min-w-0 space-y-1">
- <input type="hidden" id="filter-modal-id">
- <!-- TAB PANE: GENERAL -->
- <div id="fw-pane-general" class="fw-rule-pane space-y-1">
- <!-- Enabled -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Enabled</label>
- <div class="flex items-center">
- <input type="checkbox" id="filter-modal-enabled" checked class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
- </div>
- </div>
- <!-- Comment -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Comment</label>
- <div class="flex-1">
- <input type="text" id="filter-modal-comment" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- Chain -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Chain</label>
- <div class="flex-1">
- <select id="filter-modal-chain" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
- <option value="forward" selected>forward</option>
- <option value="input">input</option>
- <option value="output">output</option>
- </select>
- </div>
- </div>
- <!-- Src. Address -->
- <div class="flex items-center text-xs py-1" id="fw-row-src">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('src', true)" id="fw-plus-src" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-src" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-src" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="fw-val-src" placeholder="192.168.1.0/24" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('src', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Address -->
- <div class="flex items-center text-xs py-1" id="fw-row-dst">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('dst', true)" id="fw-plus-dst" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-dst" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-dst" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="fw-val-dst" placeholder="0.0.0.0/0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('dst', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Src. Address List -->
- <div class="flex items-center text-xs py-1" id="fw-row-srclist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('srclist', true)" id="fw-plus-srclist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-srclist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-srclist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="fw-val-srclist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleFwField('srclist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Address List -->
- <div class="flex items-center text-xs py-1" id="fw-row-dstlist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('dstlist', true)" id="fw-plus-dstlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-dstlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-dstlist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="fw-val-dstlist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleFwField('dstlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Src. Geo Location -->
- <div class="flex items-center text-xs py-1" id="fw-row-srcgeo">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Geo Location</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('srcgeo', true)" id="fw-plus-srcgeo" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-srcgeo" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-srcgeo" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="fw-val-srcgeo" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleFwField('srcgeo', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Geo Location -->
- <div class="flex items-center text-xs py-1" id="fw-row-dstgeo">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Geo Location</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('dstgeo', true)" id="fw-plus-dstgeo" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-dstgeo" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-dstgeo" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="fw-val-dstgeo" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleFwField('dstgeo', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Protocol -->
- <div class="flex items-center text-xs py-1" id="fw-row-proto">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Protocol</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('proto', true)" id="fw-plus-proto" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-proto" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-proto" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="fw-val-proto" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="tcp">6 (tcp)</option>
- <option value="udp">17 (udp)</option>
- <option value="icmp">1 (icmp)</option>
- <option value="gre">47 (gre)</option>
- <option value="esp">50 (esp)</option>
- <option value="ipip">4 (ipip)</option>
- <option value="vrrp">112 (vrrp)</option>
- <option value="all">all</option>
- </select>
- <button type="button" onclick="toggleFwField('proto', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Src. Port -->
- <div class="flex items-center text-xs py-1" id="fw-row-sport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('sport', true)" id="fw-plus-sport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-sport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-sport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="fw-val-sport" placeholder="80 or 1024-65535" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('sport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Port -->
- <div class="flex items-center text-xs py-1" id="fw-row-dport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('dport', true)" id="fw-plus-dport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-dport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-dport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="fw-val-dport" placeholder="80,443" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('dport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Any. Port -->
- <div class="flex items-center text-xs py-1" id="fw-row-anyport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Any. Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('anyport', true)" id="fw-plus-anyport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-anyport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-anyport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="fw-val-anyport" placeholder="53" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('anyport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- In. Interface -->
- <div class="flex items-center text-xs py-1" id="fw-row-iniface">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Interface</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('iniface', true)" id="fw-plus-iniface" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-iniface" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-iniface" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="fw-val-iniface" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleFwField('iniface', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Out. Interface -->
- <div class="flex items-center text-xs py-1" id="fw-row-outiface">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Interface</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('outiface', true)" id="fw-plus-outiface" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-outiface" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-outiface" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="fw-val-outiface" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleFwField('outiface', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- In. Interface List -->
- <div class="flex items-center text-xs py-1" id="fw-row-inifacelist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Interface List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('inifacelist', true)" id="fw-plus-inifacelist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-inifacelist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-inifacelist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="fw-val-inifacelist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="all">all</option>
- <option value="none">none</option>
- <option value="dynamic">dynamic</option>
- <option value="LAN">LAN</option>
- <option value="WAN">WAN</option>
- </select>
- <button type="button" onclick="toggleFwField('inifacelist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Out. Interface List -->
- <div class="flex items-center text-xs py-1" id="fw-row-outifacelist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Interface List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('outifacelist', true)" id="fw-plus-outifacelist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-outifacelist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-outifacelist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="fw-val-outifacelist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="all">all</option>
- <option value="none">none</option>
- <option value="dynamic">dynamic</option>
- <option value="LAN">LAN</option>
- <option value="WAN">WAN</option>
- </select>
- <button type="button" onclick="toggleFwField('outifacelist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Packet Mark -->
- <div class="flex items-center text-xs py-1" id="fw-row-pktmark">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Mark</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('pktmark', true)" id="fw-plus-pktmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-pktmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-pktmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="fw-val-pktmark" placeholder="e.g. qos_voip" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('pktmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Connection Mark -->
- <div class="flex items-center text-xs py-1" id="fw-row-connmark">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Mark</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('connmark', true)" id="fw-plus-connmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-connmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-connmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="fw-val-connmark" placeholder="e.g. wan1_conn" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('connmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Routing Mark -->
- <div class="flex items-center text-xs py-1" id="fw-row-routingmark">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Routing Mark</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('routingmark', true)" id="fw-plus-routingmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-routingmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-routingmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="fw-val-routingmark" placeholder="e.g. to_wan2" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('routingmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Connection Type -->
- <div class="flex items-center text-xs py-1" id="fw-row-conntype">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Type</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('conntype', true)" id="fw-plus-conntype" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-conntype" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <select id="fw-val-conntype" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="ftp">ftp</option>
- <option value="h323">h323</option>
- <option value="irc">irc</option>
- <option value="pptp">pptp</option>
- <option value="sip">sip</option>
- <option value="tftp">tftp</option>
- </select>
- <button type="button" onclick="toggleFwField('conntype', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Connection State -->
- <div class="flex items-center text-xs py-1" id="fw-row-cs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection State</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('cs', true)" id="fw-plus-cs" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-cs" class="hidden flex-1 flex flex-wrap items-center gap-2 min-w-0 bg-[#15202e] border border-[#26374d] rounded px-2 py-1">
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-cs-established" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">established</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-cs-related" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">related</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-cs-new" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">new</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-cs-invalid" class="rounded bg-[#101721] border-[#2b3e56] text-rose-500"><span class="text-slate-300">invalid</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-cs-untracked" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500"><span class="text-slate-300">untracked</span></label>
- <button type="button" onclick="toggleFwField('cs', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0 ml-auto" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Connection NAT State -->
- <div class="flex items-center text-xs py-1" id="fw-row-natstate">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection NAT State</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('natstate', true)" id="fw-plus-natstate" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-natstate" class="hidden flex-1 flex items-center gap-3 min-w-0 bg-[#15202e] border border-[#26374d] rounded px-2 py-1">
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-nat-srcnat" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">srcnat</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-nat-dstnat" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">dstnat</span></label>
- <button type="button" onclick="toggleFwField('natstate', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0 ml-auto" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- </div>
- <!-- TAB PANE: ADVANCED (Screenshot 2) -->
- <div id="fw-pane-advanced" class="fw-rule-pane hidden space-y-1">
- <!-- Layer7 Protocol -->
- <div class="flex items-center text-xs py-1" id="fw-row-layer7">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Layer7 Protocol</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('layer7', true)" id="fw-plus-layer7" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-layer7" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-layer7" placeholder="e.g. youtube_regex" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('layer7', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Content -->
- <div class="flex items-center text-xs py-1" id="fw-row-content">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Content</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('content', true)" id="fw-plus-content" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-content" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-content" placeholder="e.g. facebook.com" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('content', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Connection Bytes -->
- <div class="flex items-center text-xs py-1" id="fw-row-connbytes">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Bytes</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('connbytes', true)" id="fw-plus-connbytes" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-connbytes" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-connbytes" placeholder="e.g. 0-500000" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('connbytes', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Connection Rate -->
- <div class="flex items-center text-xs py-1" id="fw-row-connrate">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Rate</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('connrate', true)" id="fw-plus-connrate" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-connrate" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-connrate" placeholder="e.g. 0-100k" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('connrate', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Per Connection Classifier -->
- <div class="flex items-center text-xs py-1" id="fw-row-pcc">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Per Connection Classifier</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('pcc', true)" id="fw-plus-pcc" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-pcc" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-pcc" placeholder="both-addresses:2/0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('pcc', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Src. MAC Address -->
- <div class="flex items-center text-xs py-1" id="fw-row-srcmac">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. MAC Address</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('srcmac', true)" id="fw-plus-srcmac" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-srcmac" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="fw-inv-srcmac" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="fw-val-srcmac" placeholder="e.g. 00:11:22:33:44:55" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('srcmac', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Out. Bridge Port -->
- <div class="flex items-center text-xs py-1" id="fw-row-outbridgeport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Bridge Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('outbridgeport', true)" id="fw-plus-outbridgeport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-outbridgeport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-outbridgeport" placeholder="e.g. eth1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('outbridgeport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- In. Bridge Port -->
- <div class="flex items-center text-xs py-1" id="fw-row-inbridgeport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Bridge Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('inbridgeport', true)" id="fw-plus-inbridgeport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-inbridgeport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-inbridgeport" placeholder="e.g. eth0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('inbridgeport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- In. Bridge Port List -->
- <div class="flex items-center text-xs py-1" id="fw-row-inbridgeportlist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Bridge Port List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('inbridgeportlist', true)" id="fw-plus-inbridgeportlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-inbridgeportlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-inbridgeportlist" placeholder="e.g. LAN" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('inbridgeportlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Out. Bridge Port List -->
- <div class="flex items-center text-xs py-1" id="fw-row-outbridgeportlist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Bridge Port List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('outbridgeportlist', true)" id="fw-plus-outbridgeportlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-outbridgeportlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-outbridgeportlist" placeholder="e.g. WAN" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('outbridgeportlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- IPsec Policy -->
- <div class="flex items-center text-xs py-1" id="fw-row-ipsec">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IPsec Policy</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('ipsec', true)" id="fw-plus-ipsec" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-ipsec" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <select id="fw-val-ipsec" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="in:ipsec">in:ipsec</option>
- <option value="out:ipsec">out:ipsec</option>
- <option value="in:none">in:none</option>
- <option value="out:none">out:none</option>
- </select>
- <button type="button" onclick="toggleFwField('ipsec', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TLS Host -->
- <div class="flex items-center text-xs py-1" id="fw-row-tlshost">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TLS Host</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('tlshost', true)" id="fw-plus-tlshost" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-tlshost" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-tlshost" placeholder="e.g. *.netflix.com" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('tlshost', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Ingress Priority -->
- <div class="flex items-center text-xs py-1" id="fw-row-ingresspriority">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Ingress Priority</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('ingresspriority', true)" id="fw-plus-ingresspriority" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-ingresspriority" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-ingresspriority" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('ingresspriority', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Priority -->
- <div class="flex items-center text-xs py-1" id="fw-row-priority">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Priority</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('priority', true)" id="fw-plus-priority" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-priority" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-priority" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('priority', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- DSCP -->
- <div class="flex items-center text-xs py-1" id="fw-row-dscp">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">DSCP</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('dscp', true)" id="fw-plus-dscp" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-dscp" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-dscp" placeholder="0-63 (e.g. 46 for EF)" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('dscp', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TCP MSS -->
- <div class="flex items-center text-xs py-1" id="fw-row-tcpmss">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TCP MSS</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('tcpmss', true)" id="fw-plus-tcpmss" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-tcpmss" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-tcpmss" placeholder="e.g. 1440" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('tcpmss', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TOS -->
- <div class="flex items-center text-xs py-1" id="fw-row-tos">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TOS</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <select id="fw-val-tos" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
- <option value="">(any)</option>
- <option value="0">0 (Normal Service)</option>
- <option value="min-delay">min-delay (16)</option>
- <option value="max-throughput">max-throughput (8)</option>
- <option value="max-reliability">max-reliability (4)</option>
- <option value="min-cost">min-cost (2)</option>
- </select>
- </div>
- </div>
- <!-- Packet Size -->
- <div class="flex items-center text-xs py-1" id="fw-row-pktsize">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Size</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('pktsize', true)" id="fw-plus-pktsize" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-pktsize" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-pktsize" placeholder="e.g. 64-1500" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('pktsize', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Random -->
- <div class="flex items-center text-xs py-1" id="fw-row-random">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Random</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('random', true)" id="fw-plus-random" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-random" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-random" placeholder="1-100 %" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('random', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TCP Flags -->
- <div class="flex items-center text-xs py-1" id="fw-row-tcpflags">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TCP Flags</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('tcpflags', true)" id="fw-plus-tcpflags" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-tcpflags" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-tcpflags" placeholder="syn,ack,fin,rst" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('tcpflags', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- ICMP Options -->
- <div class="flex items-center text-xs py-1" id="fw-row-icmpoptions">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">ICMP Options</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('icmpoptions', true)" id="fw-plus-icmpoptions" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-icmpoptions" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-icmpoptions" placeholder="e.g. 8:0 (echo-request)" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('icmpoptions', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- IPv4 Options -->
- <div class="flex items-center text-xs py-1" id="fw-row-ipv4options">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IPv4 Options</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('ipv4options', true)" id="fw-plus-ipv4options" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-ipv4options" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-ipv4options" placeholder="any, loose-source-routing" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('ipv4options', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TTL -->
- <div class="flex items-center text-xs py-1" id="fw-row-ttl">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TTL</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('ttl', true)" id="fw-plus-ttl" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-ttl" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-ttl" placeholder="equal:64 or less-than:10" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('ttl', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- </div>
- <!-- TAB PANE: EXTRA -->
- <div id="fw-pane-extra" class="fw-rule-pane hidden space-y-1">
- <!-- Time -->
- <div class="flex items-center text-xs py-1" id="fw-row-time">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Time</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('time', true)" id="fw-plus-time" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-time" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-time" placeholder="00:00:00-23:59:59" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('time', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Days -->
- <div class="flex items-center text-xs py-1" id="fw-row-days">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Days</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('days', true)" id="fw-plus-days" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-days" class="hidden flex-1 flex flex-wrap items-center gap-2 min-w-0 bg-[#15202e] border border-[#26374d] rounded px-2 py-1">
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-sun" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">sun</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-mon" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">mon</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-tue" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">tue</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-wed" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">wed</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-thu" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">thu</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-fri" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">fri</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-sat" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">sat</span></label>
- <button type="button" onclick="toggleFwField('days', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0 ml-auto">-</button>
- </div>
- </div>
- </div>
- <!-- Limit -->
- <div class="flex items-center text-xs py-1" id="fw-row-limit">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Limit</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('limit', true)" id="fw-plus-limit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-limit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-limit" placeholder="e.g. 100,5:packet" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('limit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Limit -->
- <div class="flex items-center text-xs py-1" id="fw-row-dstlimit">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Limit</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('dstlimit', true)" id="fw-plus-dstlimit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-dstlimit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-dstlimit" placeholder="e.g. 100/5s,5" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('dstlimit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- PSD -->
- <div class="flex items-center text-xs py-1" id="fw-row-psd">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">PSD</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('psd', true)" id="fw-plus-psd" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-psd" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-psd" placeholder="Weight: 21, 3s, 3, 1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('psd', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- </div>
- <!-- TAB PANE: ACTION (Screenshot 3) -->
- <div id="fw-pane-action" class="fw-rule-pane hidden space-y-2">
- <!-- Action -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Action</label>
- <div class="flex-1">
- <select id="filter-modal-action" onchange="toggleFilterActionFields()" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
- <option value="accept" selected>accept</option>
- <option value="add-dst-to-address-list">add-dst-to-address-list</option>
- <option value="add-src-to-address-list">add-src-to-address-list</option>
- <option value="drop">drop</option>
- <option value="fasttrack-connection">fasttrack-connection</option>
- <option value="jump">jump</option>
- <option value="log">log</option>
- <option value="passthrough">passthrough</option>
- <option value="reject">reject</option>
- <option value="return">return</option>
- <option value="tarpit">tarpit</option>
- </select>
- </div>
- </div>
- <!-- Reject With (Shown when action === reject) -->
- <div id="filter-action-reject-box" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-rose-300 shrink-0 select-none">Reject With</label>
- <div class="flex-1">
- <select id="filter-modal-rejectwith" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-rose-500 w-full cursor-pointer">
- <option value="icmp-network-unreachable">icmp-network-unreachable</option>
- <option value="icmp-host-unreachable">icmp-host-unreachable</option>
- <option value="icmp-port-unreachable">icmp-port-unreachable</option>
- <option value="icmp-admin-prohibited">icmp-admin-prohibited</option>
- <option value="tcp-reset">tcp-reset</option>
- </select>
- </div>
- </div>
- <!-- Jump Target (Shown when action === jump) -->
- <div id="filter-action-jump-box" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-sky-300 shrink-0 select-none">Jump Target</label>
- <div class="flex-1">
- <input type="text" id="filter-modal-jumptarget" placeholder="chain name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- Address List & Timeout (Shown when action starts with add-) -->
- <div id="filter-action-addrlist-box" class="hidden space-y-1">
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Address List</label>
- <div class="flex-1">
- <input type="text" id="filter-modal-action-addrlist" list="fw-addrlist-datalist" placeholder="list name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Timeout</label>
- <div class="flex-1">
- <input type="text" id="filter-modal-action-timeout" placeholder="none or 1d 00:00:00" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Log -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log</label>
- <div class="flex items-center">
- <input type="checkbox" id="filter-modal-log" onchange="toggleFwLogPrefix()" class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
- </div>
- </div>
- <!-- Log Prefix -->
- <div class="flex items-center text-xs py-1" id="fw-row-logprefix">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log Prefix</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleFwField('logprefix', true)" id="fw-plus-logprefix" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="fw-field-logprefix" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="fw-val-logprefix" placeholder="e.g. FW_DROP: " class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleFwField('logprefix', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- </div>
- <!-- TAB PANE: STATISTICS (Screenshot 4) -->
- <div id="fw-pane-statistics" class="fw-rule-pane hidden space-y-2 py-1">
- <!-- Bytes -->
- <div class="flex items-center text-xs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Bytes</label>
- <div class="flex-1">
- <input type="text" id="fw-stat-bytes" readonly value="0 B" class="bg-[#121c27] border border-sky-600/80 rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
- </div>
- </div>
- <!-- Packets -->
- <div class="flex items-center text-xs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packets</label>
- <div class="flex-1">
- <input type="text" id="fw-stat-packets" readonly value="0" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
- </div>
- </div>
- <div class="h-1"></div>
- <!-- Rate -->
- <div class="flex items-center text-xs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Rate</label>
- <div class="flex-1">
- <input type="text" id="fw-stat-rate" readonly value="0 bps" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
- </div>
- </div>
- <!-- Packet Rate -->
- <div class="flex items-center text-xs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Rate</label>
- <div class="flex-1">
- <input type="text" id="fw-stat-pktrate" readonly value="0 p/s" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
- </div>
- </div>
- <div class="h-2"></div>
- <!-- Rate Graph -->
- <div class="space-y-1">
- <div class="text-[11px] text-slate-300 font-medium pl-1">Rate Graph</div>
- <div class="bg-[#0f1721] border border-[#202e40] rounded p-1.5 relative overflow-hidden">
- <svg id="fw-stat-rate-svg" class="w-full h-24" viewBox="0 0 500 100" preserveAspectRatio="none">
- <!-- Generated grid and sparkline -->
- </svg>
- </div>
- <div class="flex items-center justify-center gap-1.5 text-[11px] text-slate-300 py-0.5">
- <span class="w-2 h-2 rounded-full bg-sky-400"></span>
- <span id="fw-stat-legend-rate" class="font-mono font-semibold text-white">0 bps</span>
- <span class="text-slate-400">Rate</span>
- </div>
- </div>
- <!-- Packet Rate Graph -->
- <div class="space-y-1">
- <div class="text-[11px] text-slate-300 font-medium pl-1">Packet Rate Graph</div>
- <div class="bg-[#0f1721] border border-[#202e40] rounded p-1.5 relative overflow-hidden">
- <svg id="fw-stat-pktrate-svg" class="w-full h-24" viewBox="0 0 500 100" preserveAspectRatio="none">
- <!-- Generated grid and sparkline -->
- </svg>
- </div>
- <div class="flex items-center justify-center gap-1.5 text-[11px] text-slate-300 py-0.5">
- <span class="w-2 h-2 rounded-full bg-sky-400"></span>
- <span id="fw-stat-legend-pktrate" class="font-mono font-semibold text-white">0 p/s</span>
- <span class="text-slate-400">Packet Rate</span>
- </div>
- </div>
- </div>
- </form>
- <!-- Right Vertical Sidebar -->
- <div class="w-40 min-w-[150px] border-l border-[#213042] bg-[#121a24] p-3 text-xs flex flex-col space-y-4 shrink-0">
- <div>
- <button type="button" onclick="copyFilterRule()" class="w-full flex items-center gap-2 text-slate-300 hover:text-sky-300 text-xs py-1 transition-colors">
- <svg class="w-3.5 h-3.5 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
- <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
- </svg>
- <span>Copy</span>
- </button>
- </div>
- <div class="space-y-2">
- <div class="text-slate-300 font-semibold flex items-center gap-1.5 text-xs">
- <span class="text-amber-400">⚡</span>
- <span>Actions</span>
- </div>
- <div class="flex flex-col space-y-1.5 pl-1">
- <button type="button" onclick="resetCurrentRuleCounters()" class="text-left text-slate-400 hover:text-sky-300 text-xs py-0.5 transition-colors">Reset Counters</button>
- <button type="button" onclick="resetAllFwCounters()" class="text-left text-slate-400 hover:text-sky-300 text-xs py-0.5 transition-colors">Reset All Counters</button>
- </div>
- </div>
- </div>
- </div>
- <!-- Window Bottom Button Bar -->
- <div class="bg-[#141e2b] border-t border-[#1f2d3e] px-4 py-2 flex items-center justify-end gap-2 shrink-0">
- <button type="button" onclick="closeFilterModal()" class="px-4 py-1.5 rounded bg-[#1c2838] hover:bg-[#25364b] border border-[#2a3c54] text-xs font-medium text-slate-300 transition-colors">Cancel</button>
- <button type="button" onclick="applyFilterRule(false)" class="px-5 py-1.5 rounded bg-[#0078d4] hover:bg-[#006cbd] text-xs font-semibold text-white shadow-sm transition-colors">Apply</button>
- <button type="button" onclick="applyFilterRule(true)" class="px-5 py-1.5 rounded bg-[#0078d4] hover:bg-[#006cbd] text-xs font-semibold text-white shadow-sm transition-colors">OK</button>
- </div>
- </div>
- </div>
- <!-- ================= MODAL: FIREWALL NAT RULE ================= -->
- <div id="nat-modal" class="fixed inset-0 bg-black/60 backdrop-blur-[2px] z-50 hidden flex items-center justify-center p-2 sm:p-4">
- <div id="nat-modal-window" class="bg-[#131b26] border border-[#243347] rounded-md shadow-2xl w-full max-w-[720px] max-h-[92vh] flex flex-col overflow-hidden text-xs select-none">
-
- <!-- Window Title Bar -->
- <div class="bg-[#162335] border-b border-[#223145] px-3.5 py-1.5 flex items-center justify-between shrink-0">
- <div class="flex items-center gap-2">
- <!-- WinBox v4 Logo -->
- <div class="flex items-center gap-0.5 text-cyan-400 font-bold font-mono text-[11px] leading-none">
- <svg class="w-3.5 h-3.5 text-cyan-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
- <path d="M4 5l3.5 10L11 5" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M15 5v5h4m0-5v10" stroke-linecap="round" stroke-linejoin="round"/>
- <circle cx="12" cy="20" r="1.5" fill="currentColor"/>
- </svg>
- <span class="text-cyan-400 font-bold text-xs tracking-tight">v4</span>
- </div>
- <span class="text-slate-200 font-medium text-xs">NAT Rule ></span>
- <span id="nat-modal-badge" class="bg-[#0078d4] text-white text-[11px] px-2 py-0.5 rounded font-mono font-medium">New...</span>
- </div>
- <div class="flex items-center gap-2">
- <button type="button" onclick="toggleMaximizeNATModal()" title="Maximize / Restore" class="text-slate-400 hover:text-white p-0.5 text-xs transition-colors">
- <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
- </button>
- <button type="button" onclick="closeNATModal()" title="Close" class="text-slate-400 hover:text-rose-400 p-0.5 text-xs font-bold leading-none transition-colors">✕</button>
- </div>
- </div>
- <!-- Window Tabs Bar -->
- <div class="bg-[#111923] border-b border-[#1f2d3e] px-2 flex items-center gap-1 shrink-0">
- <button type="button" onclick="switchNATRuleTab('general')" id="nat-tab-btn-general" class="nat-rule-tab-btn bg-[#182638] text-white border-t-2 border-sky-400 px-3.5 py-1.5 text-xs font-medium transition-colors">General</button>
- <button type="button" onclick="switchNATRuleTab('advanced')" id="nat-tab-btn-advanced" class="nat-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Advanced</button>
- <button type="button" onclick="switchNATRuleTab('extra')" id="nat-tab-btn-extra" class="nat-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Extra</button>
- <button type="button" onclick="switchNATRuleTab('action')" id="nat-tab-btn-action" class="nat-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Action</button>
- <button type="button" onclick="switchNATRuleTab('statistics')" id="nat-tab-btn-statistics" class="nat-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Statistics</button>
- </div>
- <!-- Window Body (Split Layout: Left Tab Content + Right Action Sidebar) -->
- <div class="flex-1 flex min-h-0 overflow-hidden">
-
- <!-- Form Content Container (Scrollable) -->
- <form id="nat-rule-form" onsubmit="event.preventDefault(); applyNATRule(true);" class="flex-1 overflow-y-auto px-4 py-3 min-w-0 space-y-1">
- <input type="hidden" id="nat-modal-id">
- <!-- TAB PANE: GENERAL (Screenshot 1) -->
- <div id="nat-pane-general" class="nat-rule-pane space-y-1">
- <!-- Enabled -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Enabled</label>
- <div class="flex items-center">
- <input type="checkbox" id="nat-modal-enabled" checked class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
- </div>
- </div>
- <!-- Comment -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Comment</label>
- <div class="flex-1">
- <input type="text" id="nat-modal-comment" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- Chain -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Chain</label>
- <div class="flex-1">
- <select id="nat-modal-chain" onchange="handleNATChainChange()" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
- <option value="srcnat" selected>srcnat</option>
- <option value="dstnat">dstnat</option>
- </select>
- </div>
- </div>
- <!-- Src. Address -->
- <div class="flex items-center text-xs py-1" id="nat-row-src">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('src', true)" id="nat-plus-src" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-src" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-src" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="nat-val-src" placeholder="192.168.10.0/24" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('src', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Address -->
- <div class="flex items-center text-xs py-1" id="nat-row-dst">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('dst', true)" id="nat-plus-dst" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-dst" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-dst" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="nat-val-dst" placeholder="0.0.0.0/0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('dst', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Src. Address List -->
- <div class="flex items-center text-xs py-1" id="nat-row-srclist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('srclist', true)" id="nat-plus-srclist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-srclist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-srclist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="nat-val-srclist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleNATField('srclist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Address List -->
- <div class="flex items-center text-xs py-1" id="nat-row-dstlist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('dstlist', true)" id="nat-plus-dstlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-dstlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-dstlist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="nat-val-dstlist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleNATField('dstlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Src. Geo Location -->
- <div class="flex items-center text-xs py-1" id="nat-row-srcgeo">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Geo Location</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('srcgeo', true)" id="nat-plus-srcgeo" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-srcgeo" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-srcgeo" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="nat-val-srcgeo" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleNATField('srcgeo', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Geo Location -->
- <div class="flex items-center text-xs py-1" id="nat-row-dstgeo">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Geo Location</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('dstgeo', true)" id="nat-plus-dstgeo" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-dstgeo" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-dstgeo" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="nat-val-dstgeo" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleNATField('dstgeo', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Protocol -->
- <div class="flex items-center text-xs py-1" id="nat-row-proto">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Protocol</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('proto', true)" id="nat-plus-proto" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-proto" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-proto" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="nat-val-proto" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="tcp">6 (tcp)</option>
- <option value="udp">17 (udp)</option>
- <option value="icmp">1 (icmp)</option>
- <option value="gre">47 (gre)</option>
- <option value="esp">50 (esp)</option>
- <option value="all">all</option>
- </select>
- <button type="button" onclick="toggleNATField('proto', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Src. Port -->
- <div class="flex items-center text-xs py-1" id="nat-row-sport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('sport', true)" id="nat-plus-sport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-sport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-sport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="nat-val-sport" placeholder="e.g. 80,443 or 1000-2000" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('sport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Port -->
- <div class="flex items-center text-xs py-1" id="nat-row-dport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('dport', true)" id="nat-plus-dport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-dport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-dport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="nat-val-dport" placeholder="e.g. 80,443,8080" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('dport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Any. Port -->
- <div class="flex items-center text-xs py-1" id="nat-row-anyport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Any. Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('anyport', true)" id="nat-plus-anyport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-anyport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-anyport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="nat-val-anyport" placeholder="53" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('anyport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- In. Interface -->
- <div class="flex items-center text-xs py-1" id="nat-row-iniface">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Interface</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('iniface', true)" id="nat-plus-iniface" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-iniface" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-iniface" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="nat-val-iniface" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleNATField('iniface', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Out. Interface -->
- <div class="flex items-center text-xs py-1" id="nat-row-outiface">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Interface</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('outiface', true)" id="nat-plus-outiface" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-outiface" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-outiface" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="nat-val-outiface" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleNATField('outiface', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- In. Interface List -->
- <div class="flex items-center text-xs py-1" id="nat-row-inifacelist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Interface List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('inifacelist', true)" id="nat-plus-inifacelist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-inifacelist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-inifacelist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="nat-val-inifacelist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="all">all</option>
- <option value="none">none</option>
- <option value="dynamic">dynamic</option>
- <option value="LAN">LAN</option>
- <option value="WAN">WAN</option>
- </select>
- <button type="button" onclick="toggleNATField('inifacelist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Out. Interface List -->
- <div class="flex items-center text-xs py-1" id="nat-row-outifacelist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Interface List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('outifacelist', true)" id="nat-plus-outifacelist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-outifacelist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-outifacelist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="nat-val-outifacelist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="all">all</option>
- <option value="none">none</option>
- <option value="dynamic">dynamic</option>
- <option value="LAN">LAN</option>
- <option value="WAN">WAN</option>
- </select>
- <button type="button" onclick="toggleNATField('outifacelist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Packet Mark -->
- <div class="flex items-center text-xs py-1" id="nat-row-pktmark">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Mark</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('pktmark', true)" id="nat-plus-pktmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-pktmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-pktmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="nat-val-pktmark" placeholder="e.g. qos_nat" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('pktmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Connection Mark -->
- <div class="flex items-center text-xs py-1" id="nat-row-connmark">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Mark</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('connmark', true)" id="nat-plus-connmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-connmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-connmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="nat-val-connmark" placeholder="e.g. wan1_conn" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('connmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Routing Mark -->
- <div class="flex items-center text-xs py-1" id="nat-row-routingmark">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Routing Mark</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('routingmark', true)" id="nat-plus-routingmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-routingmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-routingmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="nat-val-routingmark" placeholder="e.g. to_wan2" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('routingmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Connection Type -->
- <div class="flex items-center text-xs py-1" id="nat-row-conntype">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Type</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('conntype', true)" id="nat-plus-conntype" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-conntype" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <select id="nat-val-conntype" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="ftp">ftp</option>
- <option value="h323">h323</option>
- <option value="irc">irc</option>
- <option value="pptp">pptp</option>
- <option value="sip">sip</option>
- <option value="tftp">tftp</option>
- </select>
- <button type="button" onclick="toggleNATField('conntype', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- </div>
- <!-- TAB PANE: ADVANCED (Screenshot 2) -->
- <div id="nat-pane-advanced" class="nat-rule-pane hidden space-y-1">
- <!-- Layer7 Protocol -->
- <div class="flex items-center text-xs py-1" id="nat-row-layer7">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Layer7 Protocol</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('layer7', true)" id="nat-plus-layer7" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-layer7" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-layer7" placeholder="e.g. youtube_regex" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('layer7', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Content -->
- <div class="flex items-center text-xs py-1" id="nat-row-content">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Content</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('content', true)" id="nat-plus-content" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-content" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-content" placeholder="e.g. facebook.com" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('content', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Connection Bytes -->
- <div class="flex items-center text-xs py-1" id="nat-row-connbytes">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Bytes</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('connbytes', true)" id="nat-plus-connbytes" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-connbytes" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-connbytes" placeholder="e.g. 0-500000" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('connbytes', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Connection Rate -->
- <div class="flex items-center text-xs py-1" id="nat-row-connrate">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Rate</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('connrate', true)" id="nat-plus-connrate" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-connrate" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-connrate" placeholder="e.g. 0-100k" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('connrate', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Per Connection Classifier -->
- <div class="flex items-center text-xs py-1" id="nat-row-pcc">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Per Connection Classifier</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('pcc', true)" id="nat-plus-pcc" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-pcc" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-pcc" placeholder="both-addresses:2/0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('pcc', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Src. MAC Address -->
- <div class="flex items-center text-xs py-1" id="nat-row-srcmac">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. MAC Address</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('srcmac', true)" id="nat-plus-srcmac" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-srcmac" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="nat-inv-srcmac" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="nat-val-srcmac" placeholder="e.g. 00:11:22:33:44:55" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('srcmac', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Out. Bridge Port -->
- <div class="flex items-center text-xs py-1" id="nat-row-outbridgeport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Bridge Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('outbridgeport', true)" id="nat-plus-outbridgeport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-outbridgeport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-outbridgeport" placeholder="e.g. eth1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('outbridgeport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- In. Bridge Port -->
- <div class="flex items-center text-xs py-1" id="nat-row-inbridgeport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Bridge Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('inbridgeport', true)" id="nat-plus-inbridgeport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-inbridgeport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-inbridgeport" placeholder="e.g. eth0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('inbridgeport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- In. Bridge Port List -->
- <div class="flex items-center text-xs py-1" id="nat-row-inbridgeportlist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Bridge Port List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('inbridgeportlist', true)" id="nat-plus-inbridgeportlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-inbridgeportlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-inbridgeportlist" placeholder="e.g. LAN" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('inbridgeportlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Out. Bridge Port List -->
- <div class="flex items-center text-xs py-1" id="nat-row-outbridgeportlist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Bridge Port List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('outbridgeportlist', true)" id="nat-plus-outbridgeportlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-outbridgeportlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-outbridgeportlist" placeholder="e.g. WAN" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('outbridgeportlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- IPsec Policy -->
- <div class="flex items-center text-xs py-1" id="nat-row-ipsec">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IPsec Policy</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('ipsec', true)" id="nat-plus-ipsec" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-ipsec" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <select id="nat-val-ipsec" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="in:ipsec">in:ipsec</option>
- <option value="out:ipsec">out:ipsec</option>
- <option value="in:none">in:none</option>
- <option value="out:none">out:none</option>
- </select>
- <button type="button" onclick="toggleNATField('ipsec', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Ingress Priority -->
- <div class="flex items-center text-xs py-1" id="nat-row-ingresspriority">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Ingress Priority</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('ingresspriority', true)" id="nat-plus-ingresspriority" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-ingresspriority" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-ingresspriority" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('ingresspriority', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Priority -->
- <div class="flex items-center text-xs py-1" id="nat-row-priority">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Priority</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('priority', true)" id="nat-plus-priority" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-priority" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-priority" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('priority', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- DSCP -->
- <div class="flex items-center text-xs py-1" id="nat-row-dscp">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">DSCP</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('dscp', true)" id="nat-plus-dscp" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-dscp" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-dscp" placeholder="0-63" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('dscp', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TCP MSS -->
- <div class="flex items-center text-xs py-1" id="nat-row-tcpmss">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TCP MSS</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('tcpmss', true)" id="nat-plus-tcpmss" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-tcpmss" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-tcpmss" placeholder="e.g. 1440" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('tcpmss', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TOS -->
- <div class="flex items-center text-xs py-1" id="nat-row-tos">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TOS</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <select id="nat-val-tos" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
- <option value="">(any)</option>
- <option value="0">0 (Normal Service)</option>
- <option value="min-delay">min-delay (16)</option>
- <option value="max-throughput">max-throughput (8)</option>
- <option value="max-reliability">max-reliability (4)</option>
- <option value="min-cost">min-cost (2)</option>
- </select>
- </div>
- </div>
- <!-- Packet Size -->
- <div class="flex items-center text-xs py-1" id="nat-row-pktsize">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Size</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('pktsize', true)" id="nat-plus-pktsize" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-pktsize" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-pktsize" placeholder="e.g. 64-1500" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('pktsize', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Random -->
- <div class="flex items-center text-xs py-1" id="nat-row-random">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Random</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('random', true)" id="nat-plus-random" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-random" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-random" placeholder="1-100 %" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('random', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- ICMP Options -->
- <div class="flex items-center text-xs py-1" id="nat-row-icmpoptions">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">ICMP Options</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('icmpoptions', true)" id="nat-plus-icmpoptions" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-icmpoptions" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-icmpoptions" placeholder="e.g. 8:0 (echo-request)" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('icmpoptions', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- IPv4 Options -->
- <div class="flex items-center text-xs py-1" id="nat-row-ipv4options">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IPv4 Options</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('ipv4options', true)" id="nat-plus-ipv4options" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-ipv4options" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-ipv4options" placeholder="any, loose-source-routing" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('ipv4options', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TTL -->
- <div class="flex items-center text-xs py-1" id="nat-row-ttl">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TTL</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('ttl', true)" id="nat-plus-ttl" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-ttl" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-ttl" placeholder="equal:64 or less-than:10" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('ttl', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- </div>
- <!-- TAB PANE: EXTRA -->
- <div id="nat-pane-extra" class="nat-rule-pane hidden space-y-1">
- <!-- Time -->
- <div class="flex items-center text-xs py-1" id="nat-row-time">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Time</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('time', true)" id="nat-plus-time" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-time" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-time" placeholder="00:00:00-23:59:59" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('time', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Days -->
- <div class="flex items-center text-xs py-1" id="nat-row-days">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Days</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('days', true)" id="nat-plus-days" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-days" class="hidden flex-1 flex flex-wrap items-center gap-2 min-w-0 bg-[#15202e] border border-[#26374d] rounded px-2 py-1">
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-sun" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">sun</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-mon" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">mon</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-tue" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">tue</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-wed" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">wed</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-thu" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">thu</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-fri" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">fri</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-sat" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">sat</span></label>
- <button type="button" onclick="toggleNATField('days', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0 ml-auto">-</button>
- </div>
- </div>
- </div>
- <!-- Limit -->
- <div class="flex items-center text-xs py-1" id="nat-row-limit">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Limit</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('limit', true)" id="nat-plus-limit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-limit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-limit" placeholder="e.g. 100,5:packet" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('limit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Limit -->
- <div class="flex items-center text-xs py-1" id="nat-row-dstlimit">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Limit</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('dstlimit', true)" id="nat-plus-dstlimit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-dstlimit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-dstlimit" placeholder="e.g. 100/5s,5" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('dstlimit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- PSD -->
- <div class="flex items-center text-xs py-1" id="nat-row-psd">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">PSD</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('psd', true)" id="nat-plus-psd" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-psd" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-psd" placeholder="Weight: 21, 3s, 3, 1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('psd', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- </div>
- <!-- TAB PANE: ACTION (Screenshot 3) -->
- <div id="nat-pane-action" class="nat-rule-pane hidden space-y-2">
- <!-- Action -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Action</label>
- <div class="flex-1">
- <select id="nat-modal-action" onchange="toggleNATActionFields()" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
- <option value="accept">accept</option>
- <option value="add-dst-to-address-list">add dst to address list</option>
- <option value="add-src-to-address-list">add src to address list</option>
- <option value="dst-nat">dst-nat</option>
- <option value="endpoint-independent-nat">endpoint-independent-nat</option>
- <option value="jump">jump</option>
- <option value="log">log</option>
- <option value="masquerade" selected>masquerade</option>
- <option value="netmap">netmap</option>
- <option value="passthrough">passthrough</option>
- <option value="redirect">redirect</option>
- <option value="return">return</option>
- <option value="same">same</option>
- <option value="socksify">socksify</option>
- <option value="src-nat">src-nat</option>
- </select>
- </div>
- </div>
- <!-- To Addresses (Shown for src-nat, dst-nat, netmap, same, socksify, endpoint-independent-nat) -->
- <div id="nat-row-toaddr" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">To Addresses</label>
- <div class="flex-1">
- <input type="text" id="nat-modal-toaddr" placeholder="192.168.10.50 or WAN IP" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- To Ports (Shown for src-nat, dst-nat, redirect, masquerade, netmap, socksify, endpoint-independent-nat) -->
- <div id="nat-row-toport" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">To Ports</label>
- <div class="flex-1">
- <input type="text" id="nat-modal-toport" placeholder="80 or 8080 or 1024-65535" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- Jump Target (Shown when action === jump) -->
- <div id="nat-action-jump-box" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-sky-300 shrink-0 select-none">Jump Target</label>
- <div class="flex-1">
- <input type="text" id="nat-modal-jumptarget" placeholder="chain name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- Address List & Timeout (Shown when action starts with add-) -->
- <div id="nat-action-addrlist-box" class="hidden space-y-1">
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Address List</label>
- <div class="flex-1">
- <input type="text" id="nat-modal-action-addrlist" list="fw-addrlist-datalist" placeholder="list name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Timeout</label>
- <div class="flex-1">
- <input type="text" id="nat-modal-action-timeout" placeholder="none or 1d 00:00:00" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Log -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log</label>
- <div class="flex items-center">
- <input type="checkbox" id="nat-modal-log" onchange="toggleNATLogPrefix()" class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
- </div>
- </div>
- <!-- Log Prefix -->
- <div class="flex items-center text-xs py-1" id="nat-row-logprefix">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log Prefix</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleNATField('logprefix', true)" id="nat-plus-logprefix" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="nat-field-logprefix" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="nat-val-logprefix" placeholder="e.g. NAT_LOG: " class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleNATField('logprefix', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- </div>
- <!-- TAB PANE: STATISTICS (Screenshot 4) -->
- <div id="nat-pane-statistics" class="nat-rule-pane hidden space-y-2 py-1">
- <!-- Bytes -->
- <div class="flex items-center text-xs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Bytes</label>
- <div class="flex-1">
- <input type="text" id="nat-stat-bytes" readonly value="0 B" class="bg-[#121c27] border border-sky-600/80 rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
- </div>
- </div>
- <!-- Packets -->
- <div class="flex items-center text-xs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packets</label>
- <div class="flex-1">
- <input type="text" id="nat-stat-packets" readonly value="0" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
- </div>
- </div>
- <div class="h-1"></div>
- <!-- Rate -->
- <div class="flex items-center text-xs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Rate</label>
- <div class="flex-1">
- <input type="text" id="nat-stat-rate" readonly value="0 bps" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
- </div>
- </div>
- <!-- Packet Rate -->
- <div class="flex items-center text-xs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Rate</label>
- <div class="flex-1">
- <input type="text" id="nat-stat-pktrate" readonly value="0 p/s" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
- </div>
- </div>
- <div class="h-2"></div>
- <!-- Rate Graph -->
- <div class="space-y-1">
- <div class="text-[11px] text-slate-300 font-medium pl-1">Rate Graph</div>
- <div class="bg-[#0f1721] border border-[#202e40] rounded p-1.5 relative overflow-hidden">
- <svg id="nat-stat-rate-svg" class="w-full h-24" viewBox="0 0 500 100" preserveAspectRatio="none">
- <!-- Generated grid and sparkline -->
- </svg>
- </div>
- <div class="flex items-center justify-center gap-1.5 text-[11px] text-slate-300 py-0.5">
- <span class="w-2 h-2 rounded-full bg-sky-400"></span>
- <span id="nat-stat-legend-rate" class="font-mono font-semibold text-white">0 bps</span>
- <span class="text-slate-400">Rate</span>
- </div>
- </div>
- <!-- Packet Rate Graph -->
- <div class="space-y-1">
- <div class="text-[11px] text-slate-300 font-medium pl-1">Packet Rate Graph</div>
- <div class="bg-[#0f1721] border border-[#202e40] rounded p-1.5 relative overflow-hidden">
- <svg id="nat-stat-pktrate-svg" class="w-full h-24" viewBox="0 0 500 100" preserveAspectRatio="none">
- <!-- Generated grid and sparkline -->
- </svg>
- </div>
- <div class="flex items-center justify-center gap-1.5 text-[11px] text-slate-300 py-0.5">
- <span class="w-2 h-2 rounded-full bg-sky-400"></span>
- <span id="nat-stat-legend-pktrate" class="font-mono font-semibold text-white">0 p/s</span>
- <span class="text-slate-400">Packet Rate</span>
- </div>
- </div>
- </div>
- </form>
- <!-- Right Vertical Sidebar -->
- <div class="w-40 min-w-[150px] border-l border-[#213042] bg-[#121a24] p-3 text-xs flex flex-col space-y-4 shrink-0">
- <div>
- <button type="button" onclick="copyNATRule()" class="w-full flex items-center gap-2 text-slate-300 hover:text-sky-300 text-xs py-1 transition-colors">
- <svg class="w-3.5 h-3.5 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
- <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
- </svg>
- <span>Copy</span>
- </button>
- </div>
- <div class="space-y-2">
- <div class="text-slate-300 font-semibold flex items-center gap-1.5 text-xs">
- <span class="text-amber-400">⚡</span>
- <span>Actions</span>
- </div>
- <div class="flex flex-col space-y-1.5 pl-1">
- <button type="button" onclick="resetCurrentNATRuleCounters()" class="text-left text-slate-400 hover:text-sky-300 text-xs py-0.5 transition-colors">Reset Counters</button>
- <button type="button" onclick="resetAllFwCounters()" class="text-left text-slate-400 hover:text-sky-300 text-xs py-0.5 transition-colors">Reset All Counters</button>
- </div>
- </div>
- </div>
- </div>
- <!-- Window Bottom Button Bar -->
- <div class="bg-[#141e2b] border-t border-[#1f2d3e] px-4 py-2 flex items-center justify-end gap-2 shrink-0">
- <button type="button" onclick="closeNATModal()" class="px-4 py-1.5 rounded bg-[#1c2838] hover:bg-[#25364b] border border-[#2a3c54] text-xs font-medium text-slate-300 transition-colors">Cancel</button>
- <button type="button" onclick="applyNATRule(false)" class="px-5 py-1.5 rounded bg-[#0078d4] hover:bg-[#006cbd] text-xs font-semibold text-white shadow-sm transition-colors">Apply</button>
- <button type="button" onclick="applyNATRule(true)" class="px-5 py-1.5 rounded bg-[#0078d4] hover:bg-[#006cbd] text-xs font-semibold text-white shadow-sm transition-colors">OK</button>
- </div>
- </div>
- </div>
- <!-- ================= MODAL: FIREWALL MANGLE RULE ================= -->
- <div id="mangle-modal" class="fixed inset-0 bg-black/60 backdrop-blur-[2px] z-50 hidden flex items-center justify-center p-2 sm:p-4">
- <div id="mangle-modal-window" class="bg-[#131b26] border border-[#243347] rounded-md shadow-2xl w-full max-w-[720px] max-h-[92vh] flex flex-col overflow-hidden text-xs select-none">
-
- <!-- Window Title Bar -->
- <div class="bg-[#162335] border-b border-[#223145] px-3.5 py-1.5 flex items-center justify-between shrink-0">
- <div class="flex items-center gap-2">
- <!-- WinBox v4 Logo -->
- <div class="flex items-center gap-0.5 text-cyan-400 font-bold font-mono text-[11px] leading-none">
- <svg class="w-3.5 h-3.5 text-cyan-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
- <path d="M4 5l3.5 10L11 5" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M15 5v5h4m0-5v10" stroke-linecap="round" stroke-linejoin="round"/>
- <circle cx="12" cy="20" r="1.5" fill="currentColor"/>
- </svg>
- <span class="text-cyan-400 font-bold text-xs tracking-tight">v4</span>
- </div>
- <span class="text-slate-200 font-medium text-xs">Mangle Rule ></span>
- <span id="mangle-modal-badge" class="bg-[#0078d4] text-white text-[11px] px-2 py-0.5 rounded font-mono font-medium">New...</span>
- </div>
- <div class="flex items-center gap-2">
- <button type="button" onclick="toggleMaximizeMangleModal()" title="Maximize / Restore" class="text-slate-400 hover:text-white p-0.5 text-xs transition-colors">
- <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
- </button>
- <button type="button" onclick="closeMangleModal()" title="Close" class="text-slate-400 hover:text-rose-400 p-0.5 text-xs font-bold leading-none transition-colors">✕</button>
- </div>
- </div>
- <!-- Window Tabs Bar -->
- <div class="bg-[#111923] border-b border-[#1f2d3e] px-2 flex items-center gap-1 shrink-0">
- <button type="button" onclick="switchMangleRuleTab('general')" id="mangle-tab-btn-general" class="mangle-rule-tab-btn bg-[#182638] text-white border-t-2 border-sky-400 px-3.5 py-1.5 text-xs font-medium transition-colors">General</button>
- <button type="button" onclick="switchMangleRuleTab('advanced')" id="mangle-tab-btn-advanced" class="mangle-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Advanced</button>
- <button type="button" onclick="switchMangleRuleTab('extra')" id="mangle-tab-btn-extra" class="mangle-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Extra</button>
- <button type="button" onclick="switchMangleRuleTab('action')" id="mangle-tab-btn-action" class="mangle-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Action</button>
- <button type="button" onclick="switchMangleRuleTab('statistics')" id="mangle-tab-btn-statistics" class="mangle-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Statistics</button>
- </div>
- <!-- Window Body (Split Layout: Left Tab Content + Right Action Sidebar) -->
- <div class="flex-1 flex min-h-0 overflow-hidden">
-
- <!-- Form Content Container (Scrollable) -->
- <form id="mangle-rule-form" onsubmit="event.preventDefault(); applyMangleRule(true);" class="flex-1 overflow-y-auto px-4 py-3 min-w-0 space-y-1">
- <input type="hidden" id="mangle-modal-id">
- <!-- TAB PANE: GENERAL (Screenshot 1) -->
- <div id="mangle-pane-general" class="mangle-rule-pane space-y-1">
- <!-- Enabled -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Enabled</label>
- <div class="flex items-center">
- <input type="checkbox" id="mangle-modal-enabled" checked class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
- </div>
- </div>
- <!-- Comment -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Comment</label>
- <div class="flex-1">
- <input type="text" id="mangle-modal-comment" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- Chain -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Chain</label>
- <div class="flex-1">
- <select id="mangle-modal-chain" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
- <option value="prerouting" selected>prerouting</option>
- <option value="postrouting">postrouting</option>
- <option value="forward">forward</option>
- <option value="input">input</option>
- <option value="output">output</option>
- </select>
- </div>
- </div>
- <!-- Src. Address -->
- <div class="flex items-center text-xs py-1" id="mangle-row-src">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('src', true)" id="mangle-plus-src" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-src" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-src" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="mangle-val-src" placeholder="192.168.10.0/24" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('src', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Address -->
- <div class="flex items-center text-xs py-1" id="mangle-row-dst">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('dst', true)" id="mangle-plus-dst" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-dst" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-dst" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="mangle-val-dst" placeholder="0.0.0.0/0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('dst', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Src. Address List -->
- <div class="flex items-center text-xs py-1" id="mangle-row-srclist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('srclist', true)" id="mangle-plus-srclist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-srclist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-srclist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="mangle-val-srclist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleMangleField('srclist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Address List -->
- <div class="flex items-center text-xs py-1" id="mangle-row-dstlist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('dstlist', true)" id="mangle-plus-dstlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-dstlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-dstlist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="mangle-val-dstlist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleMangleField('dstlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Src. Geo Location -->
- <div class="flex items-center text-xs py-1" id="mangle-row-srcgeo">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Geo Location</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('srcgeo', true)" id="mangle-plus-srcgeo" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-srcgeo" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-srcgeo" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="mangle-val-srcgeo" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleMangleField('srcgeo', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Geo Location -->
- <div class="flex items-center text-xs py-1" id="mangle-row-dstgeo">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Geo Location</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('dstgeo', true)" id="mangle-plus-dstgeo" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-dstgeo" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-dstgeo" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="mangle-val-dstgeo" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleMangleField('dstgeo', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Protocol -->
- <div class="flex items-center text-xs py-1" id="mangle-row-proto">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Protocol</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('proto', true)" id="mangle-plus-proto" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-proto" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-proto" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="mangle-val-proto" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="tcp">6 (tcp)</option>
- <option value="udp">17 (udp)</option>
- <option value="icmp">1 (icmp)</option>
- <option value="gre">47 (gre)</option>
- <option value="esp">50 (esp)</option>
- <option value="all">all</option>
- </select>
- <button type="button" onclick="toggleMangleField('proto', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Src. Port -->
- <div class="flex items-center text-xs py-1" id="mangle-row-sport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('sport', true)" id="mangle-plus-sport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-sport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-sport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="mangle-val-sport" placeholder="e.g. 80,443 or 1000-2000" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('sport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Port -->
- <div class="flex items-center text-xs py-1" id="mangle-row-dport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('dport', true)" id="mangle-plus-dport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-dport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-dport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="mangle-val-dport" placeholder="e.g. 80,443,8080" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('dport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Any. Port -->
- <div class="flex items-center text-xs py-1" id="mangle-row-anyport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Any. Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('anyport', true)" id="mangle-plus-anyport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-anyport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-anyport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="mangle-val-anyport" placeholder="53" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('anyport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- In. Interface -->
- <div class="flex items-center text-xs py-1" id="mangle-row-iniface">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Interface</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('iniface', true)" id="mangle-plus-iniface" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-iniface" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-iniface" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="mangle-val-iniface" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleMangleField('iniface', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Out. Interface -->
- <div class="flex items-center text-xs py-1" id="mangle-row-outiface">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Interface</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('outiface', true)" id="mangle-plus-outiface" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-outiface" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-outiface" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="mangle-val-outiface" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
- <button type="button" onclick="toggleMangleField('outiface', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- In. Interface List -->
- <div class="flex items-center text-xs py-1" id="mangle-row-inifacelist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Interface List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('inifacelist', true)" id="mangle-plus-inifacelist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-inifacelist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-inifacelist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="mangle-val-inifacelist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="all">all</option>
- <option value="none">none</option>
- <option value="dynamic">dynamic</option>
- <option value="LAN">LAN</option>
- <option value="WAN">WAN</option>
- </select>
- <button type="button" onclick="toggleMangleField('inifacelist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Out. Interface List -->
- <div class="flex items-center text-xs py-1" id="mangle-row-outifacelist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Interface List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('outifacelist', true)" id="mangle-plus-outifacelist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-outifacelist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-outifacelist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <select id="mangle-val-outifacelist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="all">all</option>
- <option value="none">none</option>
- <option value="dynamic">dynamic</option>
- <option value="LAN">LAN</option>
- <option value="WAN">WAN</option>
- </select>
- <button type="button" onclick="toggleMangleField('outifacelist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Packet Mark -->
- <div class="flex items-center text-xs py-1" id="mangle-row-pktmark">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Mark</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('pktmark', true)" id="mangle-plus-pktmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-pktmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-pktmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="mangle-val-pktmark" placeholder="e.g. qos_voip" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('pktmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Connection Mark -->
- <div class="flex items-center text-xs py-1" id="mangle-row-connmark">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Mark</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('connmark', true)" id="mangle-plus-connmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-connmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-connmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="mangle-val-connmark" placeholder="e.g. wan1_conn" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('connmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Routing Mark -->
- <div class="flex items-center text-xs py-1" id="mangle-row-routingmark">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Routing Mark</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('routingmark', true)" id="mangle-plus-routingmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-routingmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-routingmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="mangle-val-routingmark" placeholder="e.g. to_wan2" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('routingmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Connection Type -->
- <div class="flex items-center text-xs py-1" id="mangle-row-conntype">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Type</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('conntype', true)" id="mangle-plus-conntype" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-conntype" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <select id="mangle-val-conntype" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="ftp">ftp</option>
- <option value="h323">h323</option>
- <option value="irc">irc</option>
- <option value="pptp">pptp</option>
- <option value="sip">sip</option>
- <option value="tftp">tftp</option>
- </select>
- <button type="button" onclick="toggleMangleField('conntype', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Connection State -->
- <div class="flex items-center text-xs py-1" id="mangle-row-cs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection State</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('cs', true)" id="mangle-plus-cs" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-cs" class="hidden flex-1 flex flex-wrap items-center gap-2 min-w-0 bg-[#15202e] border border-[#26374d] rounded px-2 py-1">
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-cs-established" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">established</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-cs-related" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">related</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-cs-new" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">new</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-cs-invalid" class="rounded bg-[#101721] border-[#2b3e56] text-rose-500"><span class="text-slate-300">invalid</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-cs-untracked" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500"><span class="text-slate-300">untracked</span></label>
- <button type="button" onclick="toggleMangleField('cs', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0 ml-auto" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- <!-- Connection NAT State -->
- <div class="flex items-center text-xs py-1" id="mangle-row-natstate">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection NAT State</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('natstate', true)" id="mangle-plus-natstate" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-natstate" class="hidden flex-1 flex items-center gap-3 min-w-0 bg-[#15202e] border border-[#26374d] rounded px-2 py-1">
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-nat-srcnat" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">srcnat</span></label>
- <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-nat-dstnat" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">dstnat</span></label>
- <button type="button" onclick="toggleMangleField('natstate', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0 ml-auto" title="Remove / Clear">-</button>
- </div>
- </div>
- </div>
- </div>
- <!-- TAB PANE: ADVANCED (Screenshot 2) -->
- <div id="mangle-pane-advanced" class="mangle-rule-pane hidden space-y-1">
- <!-- Layer7 Protocol -->
- <div class="flex items-center text-xs py-1" id="mangle-row-layer7">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Layer7 Protocol</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('layer7', true)" id="mangle-plus-layer7" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-layer7" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-layer7" placeholder="e.g. youtube_regex" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('layer7', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Content -->
- <div class="flex items-center text-xs py-1" id="mangle-row-content">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Content</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('content', true)" id="mangle-plus-content" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-content" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-content" placeholder="e.g. facebook.com" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('content', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Connection Bytes -->
- <div class="flex items-center text-xs py-1" id="mangle-row-connbytes">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Bytes</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('connbytes', true)" id="mangle-plus-connbytes" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-connbytes" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-connbytes" placeholder="e.g. 0-500000" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('connbytes', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Connection Rate -->
- <div class="flex items-center text-xs py-1" id="mangle-row-connrate">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Rate</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('connrate', true)" id="mangle-plus-connrate" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-connrate" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-connrate" placeholder="e.g. 0-100k" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('connrate', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Per Connection Classifier -->
- <div class="flex items-center text-xs py-1" id="mangle-row-pcc">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Per Connection Classifier</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('pcc', true)" id="mangle-plus-pcc" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-pcc" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-pcc" placeholder="both-addresses:2/0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('pcc', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Src. MAC Address -->
- <div class="flex items-center text-xs py-1" id="mangle-row-srcmac">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. MAC Address</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('srcmac', true)" id="mangle-plus-srcmac" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-srcmac" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
- <input type="checkbox" id="mangle-inv-srcmac" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
- <span class="font-mono font-bold text-amber-400 text-xs">!</span>
- </label>
- <input type="text" id="mangle-val-srcmac" placeholder="AA:BB:CC:DD:EE:FF" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('srcmac', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Out. Bridge Port -->
- <div class="flex items-center text-xs py-1" id="mangle-row-outbridgeport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Bridge Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('outbridgeport', true)" id="mangle-plus-outbridgeport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-outbridgeport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-outbridgeport" placeholder="ether1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('outbridgeport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- In. Bridge Port -->
- <div class="flex items-center text-xs py-1" id="mangle-row-inbridgeport">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Bridge Port</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('inbridgeport', true)" id="mangle-plus-inbridgeport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-inbridgeport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-inbridgeport" placeholder="ether2" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('inbridgeport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- In. Bridge Port List -->
- <div class="flex items-center text-xs py-1" id="mangle-row-inbridgeportlist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Bridge Port List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('inbridgeportlist', true)" id="mangle-plus-inbridgeportlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-inbridgeportlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-inbridgeportlist" placeholder="LAN_Ports" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('inbridgeportlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Out. Bridge Port List -->
- <div class="flex items-center text-xs py-1" id="mangle-row-outbridgeportlist">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Bridge Port List</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('outbridgeportlist', true)" id="mangle-plus-outbridgeportlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-outbridgeportlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-outbridgeportlist" placeholder="WAN_Ports" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('outbridgeportlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- IPsec Policy -->
- <div class="flex items-center text-xs py-1" id="mangle-row-ipsec">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IPsec Policy</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('ipsec', true)" id="mangle-plus-ipsec" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-ipsec" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <select id="mangle-val-ipsec" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="none">none</option>
- <option value="in:ipsec">in:ipsec</option>
- <option value="in:none">in:none</option>
- <option value="out:ipsec">out:ipsec</option>
- <option value="out:none">out:none</option>
- </select>
- <button type="button" onclick="toggleMangleField('ipsec', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TLS Host -->
- <div class="flex items-center text-xs py-1" id="mangle-row-tlshost">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TLS Host</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('tlshost', true)" id="mangle-plus-tlshost" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-tlshost" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-tlshost" placeholder="*.example.com" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('tlshost', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Ingress Priority -->
- <div class="flex items-center text-xs py-1" id="mangle-row-ingresspriority">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Ingress Priority</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('ingresspriority', true)" id="mangle-plus-ingresspriority" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-ingresspriority" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-ingresspriority" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('ingresspriority', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Priority -->
- <div class="flex items-center text-xs py-1" id="mangle-row-priority">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Priority</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('priority', true)" id="mangle-plus-priority" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-priority" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-priority" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('priority', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- DSCP -->
- <div class="flex items-center text-xs py-1" id="mangle-row-dscp">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">DSCP</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('dscp', true)" id="mangle-plus-dscp" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-dscp" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-dscp" placeholder="0-63" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('dscp', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TCP MSS -->
- <div class="flex items-center text-xs py-1" id="mangle-row-tcpmss">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TCP MSS</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('tcpmss', true)" id="mangle-plus-tcpmss" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-tcpmss" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-tcpmss" placeholder="e.g. 1440" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('tcpmss', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TOS -->
- <div class="flex items-center text-xs py-1" id="mangle-row-tos">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TOS</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <select id="mangle-val-tos" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
- <option value="">(any)</option>
- <option value="0">0 (Normal Service)</option>
- <option value="min-delay">min-delay (16)</option>
- <option value="max-throughput">max-throughput (8)</option>
- <option value="max-reliability">max-reliability (4)</option>
- <option value="min-cost">min-cost (2)</option>
- </select>
- </div>
- </div>
- <!-- Packet Size -->
- <div class="flex items-center text-xs py-1" id="mangle-row-pktsize">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Size</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('pktsize', true)" id="mangle-plus-pktsize" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-pktsize" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-pktsize" placeholder="e.g. 64-1500" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('pktsize', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Random -->
- <div class="flex items-center text-xs py-1" id="mangle-row-random">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Random</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('random', true)" id="mangle-plus-random" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-random" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-random" placeholder="1-100 %" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('random', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TCP Flags -->
- <div class="flex items-center text-xs py-1" id="mangle-row-tcpflags">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TCP Flags</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('tcpflags', true)" id="mangle-plus-tcpflags" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-tcpflags" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-tcpflags" placeholder="syn,ack,fin,rst" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('tcpflags', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- ICMP Options -->
- <div class="flex items-center text-xs py-1" id="mangle-row-icmpoptions">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">ICMP Options</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('icmpoptions', true)" id="mangle-plus-icmpoptions" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-icmpoptions" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-icmpoptions" placeholder="e.g. 8:0 (echo-request)" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('icmpoptions', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- IPv4 Options -->
- <div class="flex items-center text-xs py-1" id="mangle-row-ipv4options">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IPv4 Options</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('ipv4options', true)" id="mangle-plus-ipv4options" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-ipv4options" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-ipv4options" placeholder="any, loose-source-routing" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('ipv4options', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- TTL -->
- <div class="flex items-center text-xs py-1" id="mangle-row-ttl">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TTL</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('ttl', true)" id="mangle-plus-ttl" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-ttl" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-ttl" placeholder="equal:64 or less-than:10" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('ttl', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- </div>
- <!-- TAB PANE: EXTRA (Screenshot 3) -->
- <div id="mangle-pane-extra" class="mangle-rule-pane hidden space-y-1">
- <!-- Nth -->
- <div class="flex items-center text-xs py-1" id="mangle-row-nth">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Nth</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('nth', true)" id="mangle-plus-nth" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-nth" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-nth" placeholder="e.g. 2,1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('nth', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Connection Limit -->
- <div class="flex items-center text-xs py-1" id="mangle-row-connlimit">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Limit</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('connlimit', true)" id="mangle-plus-connlimit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-connlimit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-connlimit" placeholder="e.g. 100,32" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('connlimit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Src. Address Type -->
- <div class="flex items-center text-xs py-1" id="mangle-row-srcaddrtype">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address Type</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('srcaddrtype', true)" id="mangle-plus-srcaddrtype" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-srcaddrtype" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <select id="mangle-val-srcaddrtype" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="unicast">unicast</option>
- <option value="local">local</option>
- <option value="broadcast">broadcast</option>
- <option value="multicast">multicast</option>
- </select>
- <button type="button" onclick="toggleMangleField('srcaddrtype', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Address Type -->
- <div class="flex items-center text-xs py-1" id="mangle-row-dstaddrtype">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address Type</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('dstaddrtype', true)" id="mangle-plus-dstaddrtype" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-dstaddrtype" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <select id="mangle-val-dstaddrtype" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="unicast">unicast</option>
- <option value="local">local</option>
- <option value="broadcast">broadcast</option>
- <option value="multicast">multicast</option>
- </select>
- <button type="button" onclick="toggleMangleField('dstaddrtype', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Hotspot -->
- <div class="flex items-center text-xs py-1" id="mangle-row-hotspot">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Hotspot</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('hotspot', true)" id="mangle-plus-hotspot" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-hotspot" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <select id="mangle-val-hotspot" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="from-client">from-client</option>
- <option value="to-client">to-client</option>
- <option value="auth">auth</option>
- <option value="http">http</option>
- </select>
- <button type="button" onclick="toggleMangleField('hotspot', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- IP Fragment -->
- <div class="flex items-center text-xs py-1" id="mangle-row-ipfragment">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IP Fragment</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('ipfragment', true)" id="mangle-plus-ipfragment" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-ipfragment" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <select id="mangle-val-ipfragment" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- <option value="yes">yes</option>
- <option value="no">no</option>
- </select>
- <button type="button" onclick="toggleMangleField('ipfragment', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Limit -->
- <div class="flex items-center text-xs py-1" id="mangle-row-limit">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Limit</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('limit', true)" id="mangle-plus-limit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-limit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-limit" placeholder="e.g. 100,5:packet" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('limit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Dst. Limit -->
- <div class="flex items-center text-xs py-1" id="mangle-row-dstlimit">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Limit</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('dstlimit', true)" id="mangle-plus-dstlimit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-dstlimit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-dstlimit" placeholder="e.g. 100/5s,5" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('dstlimit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- Time -->
- <div class="flex items-center text-xs py-1" id="mangle-row-time">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Time</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('time', true)" id="mangle-plus-time" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-time" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-time" placeholder="00:00:00-23:59:59" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('time', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- <!-- PSD -->
- <div class="flex items-center text-xs py-1" id="mangle-row-psd">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">PSD</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('psd', true)" id="mangle-plus-psd" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-psd" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-psd" placeholder="Weight: 21, 3s, 3, 1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('psd', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- </div>
- <!-- TAB PANE: ACTION (Screenshot 4) -->
- <div id="mangle-pane-action" class="mangle-rule-pane hidden space-y-2">
- <!-- Action -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Action</label>
- <div class="flex-1">
- <select id="mangle-modal-action" onchange="toggleMangleActionFields()" class="bg-[#15202e] border border-sky-600/80 rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
- <option value="accept" selected>accept</option>
- <option value="add-dst-to-address-list">add-dst-to-address-list</option>
- <option value="add-src-to-address-list">add-src-to-address-list</option>
- <option value="change-dscp">change-dscp</option>
- <option value="change-mss">change-mss</option>
- <option value="change-ttl">change-ttl</option>
- <option value="clear-df">clear-df</option>
- <option value="fasttrack-connection">fasttrack-connection</option>
- <option value="jump">jump</option>
- <option value="log">log</option>
- <option value="mark-connection">mark-connection</option>
- <option value="mark-packet">mark-packet</option>
- <option value="mark-routing">mark-routing</option>
- <option value="passthrough">passthrough</option>
- <option value="return">return</option>
- <option value="route">route</option>
- <option value="set-priority">set-priority</option>
- <option value="sniff-pc">sniff-pc</option>
- <option value="sniff-tzsp">sniff-tzsp</option>
- <option value="strip-ipv4-options">strip-ipv4-options</option>
- </select>
- </div>
- </div>
- <!-- New Connection Mark (when mark-connection) -->
- <div id="mangle-row-newconnmark" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New Connection Mark</label>
- <div class="flex-1">
- <input type="text" id="mangle-modal-newconnmark" placeholder="e.g. wan1_conn" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- New Routing Mark (when mark-routing) -->
- <div id="mangle-row-newroutingmark" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New Routing Mark</label>
- <div class="flex-1">
- <input type="text" id="mangle-modal-newroutingmark" placeholder="e.g. to_wan2" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- New Packet Mark (when mark-packet) -->
- <div id="mangle-row-newpktmark" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New Packet Mark</label>
- <div class="flex-1">
- <input type="text" id="mangle-modal-newpktmark" placeholder="e.g. qos_voip" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- New TCP MSS (when change-mss) -->
- <div id="mangle-row-newmss" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New TCP MSS</label>
- <div class="flex-1">
- <input type="text" id="mangle-modal-newmss" placeholder="1440 or clamp-to-pmtu" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- New DSCP (when change-dscp) -->
- <div id="mangle-row-newdscp" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New DSCP</label>
- <div class="flex-1">
- <input type="number" id="mangle-modal-newdscp" min="0" max="63" placeholder="0-63" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- New TTL (when change-ttl) -->
- <div id="mangle-row-newttl" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New TTL</label>
- <div class="flex-1">
- <input type="text" id="mangle-modal-newttl" placeholder="set:64, decrement:1, increment:1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- New Priority (when set-priority) -->
- <div id="mangle-row-newpriority" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New Priority</label>
- <div class="flex-1">
- <input type="number" id="mangle-modal-newpriority" min="0" max="7" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- Route (when route) -->
- <div id="mangle-row-route" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Route</label>
- <div class="flex-1">
- <input type="text" id="mangle-modal-route" placeholder="e.g. 192.168.1.1 or routing table" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- Sniff Target (when sniff-pc or sniff-tzsp) -->
- <div id="mangle-row-sniff" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Sniff Target</label>
- <div class="flex-1">
- <input type="text" id="mangle-modal-sniff" placeholder="IP / Host / Port" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- Passthrough Checkbox (visible for marks / changes) -->
- <div id="mangle-row-passthrough" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Passthrough</label>
- <div class="flex items-center">
- <input type="checkbox" id="mangle-modal-passthrough" checked class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
- </div>
- </div>
- <!-- Jump Target (Shown when action === jump) -->
- <div id="mangle-action-jump-box" class="hidden flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-sky-300 shrink-0 select-none">Jump Target</label>
- <div class="flex-1">
- <input type="text" id="mangle-modal-jumptarget" placeholder="chain name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <!-- Address List & Timeout (Shown when action starts with add-) -->
- <div id="mangle-action-addrlist-box" class="hidden space-y-1">
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Address List</label>
- <div class="flex-1">
- <input type="text" id="mangle-modal-action-addrlist" list="fw-addrlist-datalist" placeholder="list name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Timeout</label>
- <div class="flex-1">
- <input type="text" id="mangle-modal-action-timeout" placeholder="none or 1d 00:00:00" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
- </div>
- </div>
- </div>
- <hr class="border-[#213042] my-2">
- <!-- Log -->
- <div class="flex items-center text-xs py-1">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log</label>
- <div class="flex items-center">
- <input type="checkbox" id="mangle-modal-log" onchange="toggleMangleLogPrefix()" class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
- </div>
- </div>
- <!-- Log Prefix -->
- <div class="flex items-center text-xs py-1" id="mangle-row-logprefix">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log Prefix</label>
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
- <button type="button" onclick="toggleMangleField('logprefix', true)" id="mangle-plus-logprefix" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
- <div id="mangle-field-logprefix" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
- <input type="text" id="mangle-val-logprefix" placeholder="e.g. MANGLE_LOG: " class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
- <button type="button" onclick="toggleMangleField('logprefix', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
- </div>
- </div>
- </div>
- </div>
- <!-- TAB PANE: STATISTICS -->
- <div id="mangle-pane-statistics" class="mangle-rule-pane hidden space-y-2 py-1">
- <!-- Bytes -->
- <div class="flex items-center text-xs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Bytes</label>
- <div class="flex-1">
- <input type="text" id="mangle-stat-bytes" readonly value="0 B" class="bg-[#121c27] border border-sky-600/80 rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
- </div>
- </div>
- <!-- Packets -->
- <div class="flex items-center text-xs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packets</label>
- <div class="flex-1">
- <input type="text" id="mangle-stat-packets" readonly value="0" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
- </div>
- </div>
- <div class="h-1"></div>
- <!-- Rate -->
- <div class="flex items-center text-xs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Rate</label>
- <div class="flex-1">
- <input type="text" id="mangle-stat-rate" readonly value="0 bps" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
- </div>
- </div>
- <!-- Packet Rate -->
- <div class="flex items-center text-xs">
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Rate</label>
- <div class="flex-1">
- <input type="text" id="mangle-stat-pktrate" readonly value="0 p/s" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
- </div>
- </div>
- <div class="h-2"></div>
- <!-- Rate Graph -->
- <div class="space-y-1">
- <div class="text-[11px] text-slate-300 font-medium pl-1">Rate Graph</div>
- <div class="bg-[#0f1721] border border-[#202e40] rounded p-1.5 relative overflow-hidden">
- <svg id="mangle-stat-rate-svg" class="w-full h-24" viewBox="0 0 500 100" preserveAspectRatio="none">
- <!-- Generated grid and sparkline -->
- </svg>
- </div>
- <div class="flex items-center justify-center gap-1.5 text-[11px] text-slate-300 py-0.5">
- <span class="w-2 h-2 rounded-full bg-sky-400"></span>
- <span id="mangle-stat-legend-rate" class="font-mono font-semibold text-white">0 bps</span>
- <span class="text-slate-400">Rate</span>
- </div>
- </div>
- <!-- Packet Rate Graph -->
- <div class="space-y-1">
- <div class="text-[11px] text-slate-300 font-medium pl-1">Packet Rate Graph</div>
- <div class="bg-[#0f1721] border border-[#202e40] rounded p-1.5 relative overflow-hidden">
- <svg id="mangle-stat-pktrate-svg" class="w-full h-24" viewBox="0 0 500 100" preserveAspectRatio="none">
- <!-- Generated grid and sparkline -->
- </svg>
- </div>
- <div class="flex items-center justify-center gap-1.5 text-[11px] text-slate-300 py-0.5">
- <span class="w-2 h-2 rounded-full bg-sky-400"></span>
- <span id="mangle-stat-legend-pktrate" class="font-mono font-semibold text-white">0 p/s</span>
- <span class="text-slate-400">Packet Rate</span>
- </div>
- </div>
- </div>
- </form>
- <!-- Right Vertical Sidebar -->
- <div class="w-40 min-w-[150px] border-l border-[#213042] bg-[#121a24] p-3 text-xs flex flex-col space-y-4 shrink-0">
- <div>
- <button type="button" onclick="copyMangleRule()" class="w-full flex items-center gap-2 text-slate-300 hover:text-sky-300 text-xs py-1 transition-colors">
- <svg class="w-3.5 h-3.5 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
- <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
- </svg>
- <span>Copy</span>
- </button>
- </div>
- <div class="space-y-2">
- <div class="text-slate-300 font-semibold flex items-center gap-1.5 text-xs">
- <span class="text-amber-400">⚡</span>
- <span>Actions</span>
- </div>
- <div class="flex flex-col space-y-1.5 pl-1">
- <button type="button" onclick="resetCurrentMangleRuleCounters()" class="text-left text-slate-400 hover:text-sky-300 text-xs py-0.5 transition-colors">Reset Counters</button>
- <button type="button" onclick="resetAllFwCounters()" class="text-left text-slate-400 hover:text-sky-300 text-xs py-0.5 transition-colors">Reset All Counters</button>
- </div>
- </div>
- </div>
- </div>
- <!-- Window Bottom Button Bar -->
- <div class="bg-[#141e2b] border-t border-[#1f2d3e] px-4 py-2 flex items-center justify-end gap-2 shrink-0">
- <button type="button" onclick="closeMangleModal()" class="px-4 py-1.5 rounded bg-[#1c2838] hover:bg-[#25364b] border border-[#2a3c54] text-xs font-medium text-slate-300 transition-colors">Cancel</button>
- <button type="button" onclick="applyMangleRule(false)" class="px-5 py-1.5 rounded bg-[#0078d4] hover:bg-[#006cbd] text-xs font-semibold text-white shadow-sm transition-colors">Apply</button>
- <button type="button" onclick="applyMangleRule(true)" class="px-5 py-1.5 rounded bg-[#0078d4] hover:bg-[#006cbd] text-xs font-semibold text-white shadow-sm transition-colors">OK</button>
- </div>
- </div>
- </div>
- <!-- ================= MODAL: ADDRESS LIST ENTRY ================= -->
- <div id="addrlist-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 id="addrlist-modal-title" class="text-sm font-bold text-white">Add Address List Entry</h3>
- <button onclick="closeAddrListModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveAddrList(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="addrlist-modal-id">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">List Name *</label>
- <input type="text" id="addrlist-modal-name" placeholder="e.g. LAN_Subnets, Blocked_IPs" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">IP Address / Subnet (CIDR) *</label>
- <input type="text" id="addrlist-modal-addr" placeholder="192.168.10.0/24 or 203.0.113.5" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="addrlist-modal-comment" placeholder="Optional description" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="pt-2">
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="addrlist-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
- <span class="font-medium text-slate-300">Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeAddrListModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" id="addrlist-modal-submit-btn" class="px-5 py-2 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">Save Entry</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: GEO INTERVAL SETTINGS ================= -->
- <div id="geo-interval-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 class="text-sm font-bold text-white">Geo-Location Auto-Update Settings</h3>
- <button onclick="closeGeoIntervalModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitGeoIntervalSettings(event)" class="p-6 space-y-4 text-xs">
- <div class="p-3 bg-slate-950/60 border border-slate-800 rounded-xl space-y-2">
- <label class="flex items-center space-x-2.5 cursor-pointer">
- <input type="checkbox" id="geo-cfg-autoupdate" checked class="rounded bg-slate-800 border-slate-700 text-emerald-500">
- <span class="font-semibold text-white">Enable Automatic Background Updates</span>
- </label>
- <p class="text-[11px] text-slate-400 pl-6">Automatically fetches the latest country IP blocks from IPdeny registries and updates active kernel ipsets without service interruption.</p>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Update Interval *</label>
- <select id="geo-cfg-interval" onchange="toggleCustomGeoInterval()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <option value="12">Every 12 Hours</option>
- <option value="24" selected>Every 24 Hours (Daily - Recommended)</option>
- <option value="48">Every 48 Hours (2 Days)</option>
- <option value="72">Every 3 Days</option>
- <option value="168">Every 7 Days (Weekly)</option>
- <option value="720">Every 30 Days (Monthly)</option>
- <option value="custom">Custom Hours...</option>
- </select>
- </div>
- <div id="geo-cfg-custom-box" class="hidden">
- <label class="block font-semibold text-slate-300 mb-1.5">Custom Interval (Hours)</label>
- <input type="number" id="geo-cfg-custom-hours" min="1" max="8760" value="24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeGeoIntervalModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">Save Schedule</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: GEO SUBNETS PREVIEW ================= -->
- <div id="geo-subnets-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div>
- <h3 id="geo-subnets-title" class="text-sm font-bold text-white">Country Subnets</h3>
- <span id="geo-subnets-subtitle" class="text-[11px] font-mono text-slate-400">CIDR Blocks</span>
- </div>
- <button onclick="closeGeoSubnetsModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <div class="p-6 space-y-3 text-xs">
- <p class="text-slate-400">Showing first 100 subnets in this country zone:</p>
- <div id="geo-subnets-list" class="bg-slate-950 border border-slate-800 rounded-xl p-3 max-h-72 overflow-y-auto font-mono text-[11px] text-emerald-400 space-y-1"></div>
- <div class="pt-3 border-t border-slate-800 flex justify-end">
- <button type="button" onclick="closeGeoSubnetsModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Close</button>
- </div>
- </div>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT ROUTE ================= -->
- <div id="route-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 id="route-modal-title" class="text-sm font-bold text-white">Add Static Route</h3>
- <button onclick="closeRouteModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveRoute(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="route-modal-id">
- <input type="hidden" id="route-modal-old-dst">
- <input type="hidden" id="route-modal-old-gw">
- <input type="hidden" id="route-modal-old-distance">
- <input type="hidden" id="route-modal-old-table">
- <input type="hidden" id="route-modal-old-iface">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Dst. Address (CIDR) *</label>
- <input type="text" id="route-modal-dst" value="0.0.0.0/0" placeholder="0.0.0.0/0 or 10.0.0.0/8" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Gateway (IP or Interface)</label>
- <input type="text" id="route-modal-gw" placeholder="10.42.36.1 or wg0" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Routing Table / Mark</label>
- <select id="route-modal-table" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
- <option value="main" selected>main</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Distance (Metric)</label>
- <input type="number" id="route-modal-distance" value="1" min="0" max="255" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Interface (Optional)</label>
- <select id="route-modal-iface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500"></select>
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="route-modal-comment" placeholder="e.g. Primary WAN Default Gateway" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="pt-2">
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="route-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
- <span class="font-medium text-slate-300">Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeRouteModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20">Save Route</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD POLICY ROUTING RULE ================= -->
- <div id="prule-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 id="prule-modal-title" class="text-sm font-bold text-white">Add Policy Routing Rule</h3>
- <button onclick="closePolicyRuleModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSavePolicyRule(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="prule-modal-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Priority / Preference</label>
- <input type="number" id="prule-modal-pref" placeholder="1000" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Routing Mark (fwmark)</label>
- <input type="text" id="prule-modal-mark" placeholder="e.g. to_WAN2 or 100" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Src. Address (CIDR)</label>
- <input type="text" id="prule-modal-src" placeholder="192.168.10.0/24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Dst. Address (CIDR)</label>
- <input type="text" id="prule-modal-dst" placeholder="0.0.0.0/0" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Lookup Table *</label>
- <select id="prule-modal-table" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Action</label>
- <select id="prule-modal-action" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- <option value="lookup" selected>lookup (standard)</option>
- <option value="unreachable">unreachable</option>
- <option value="blackhole">blackhole</option>
- </select>
- </div>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closePolicyRuleModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20">Save Policy Rule</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: CREATE ROUTING TABLE ================= -->
- <div id="table-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 class="text-sm font-bold text-white">Create New Routing Table</h3>
- <button onclick="closeTableModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveTable(event)" class="p-6 space-y-4 text-xs">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Table Name *</label>
- <input type="text" id="table-modal-name" placeholder="e.g. wan2_traffic, vpn_table" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">FIB Table ID (Optional)</label>
- <input type="number" id="table-modal-id" min="1" max="252" placeholder="Auto (100+)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="table-modal-comment" placeholder="Purpose of this routing table" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeTableModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20">Create Table</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD/EDIT EoIP TUNNEL ================= -->
- <div id="eoip-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div>
- <h3 id="eoip-modal-title" class="text-sm font-bold text-white">Add EoIP Tunnel</h3>
- <p class="text-[11px] text-slate-400">Layer 2 Ethernet-over-IP (GRETAP) Tunnel</p>
- </div>
- <button onclick="closeEoIPModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveEoIP(event)" class="p-6 space-y-4 text-xs font-sans">
- <input type="hidden" id="eoip-modal-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Interface Name *</label>
- <input type="text" id="eoip-modal-name" placeholder="eoip-tunnel1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Tunnel ID (1 - 65535) *</label>
- <input type="number" id="eoip-modal-tunnelid" min="1" max="65535" placeholder="10" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Remote Address (Remote Router IP) *</label>
- <input type="text" id="eoip-modal-remote" placeholder="e.g. 10.2.145.253" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Underlay public or transport IP of remote peer</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Tunnel IP / Subnet (CIDR)</label>
- <input type="text" id="eoip-modal-ip" placeholder="e.g. 172.16.33.254/30" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Overlay IPv4 assigned directly to tunnel (/30, /24)</span>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Underlay Local IP (GRE Source)</label>
- <input type="text" id="eoip-modal-local" placeholder="e.g. 10.42.36.5" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Local router IP for outer GRE packets</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">MAC Address (Auto if empty)</label>
- <input type="text" id="eoip-modal-mac" placeholder="02:64:xx:xx:xx:xx" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">MTU</label>
- <input type="number" id="eoip-modal-mtu" value="1500" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="eoip-modal-comment" placeholder="Bridge to Office Branch" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- </div>
- <div class="flex items-center justify-between pt-1">
- <label class="flex items-center space-x-2 text-slate-300">
- <input type="checkbox" id="eoip-modal-clampmss" checked class="rounded bg-slate-800 border-slate-700 text-emerald-600">
- <span>Clamp TCP MSS (PMTUD protection)</span>
- </label>
- <label class="flex items-center space-x-2 text-slate-300">
- <input type="checkbox" id="eoip-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-600">
- <span>Disabled</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeEoIPModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">Save Tunnel</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD/EDIT AeroTUN TUNNEL ================= -->
- <div id="aerotun-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div>
- <h3 id="aerotun-modal-title" class="text-sm font-bold text-white">Add AeroTUN Interface</h3>
- <p class="text-[11px] text-slate-400">ChaCha20-Poly1305 AEAD + Adaptive LZ4 Tunnel</p>
- </div>
- <button onclick="closeAeroTUNModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveAeroTUN(event)" class="p-6 space-y-4 text-xs font-sans">
- <input type="hidden" id="aerotun-modal-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Interface Name *</label>
- <input type="text" id="aerotun-modal-name" placeholder="aerotun0" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-sky-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Operating Mode *</label>
- <select id="aerotun-modal-mode" onchange="onAeroTUNModeChange()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-sky-500">
- <option value="server">Server (Listen for incoming peers)</option>
- <option value="client">Client (Initiate connection to peer)</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Listen UDP Port</label>
- <input type="number" id="aerotun-modal-port" placeholder="51830" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-sky-500">
- <span class="text-[10px] text-slate-400">Default: 51830</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Remote Endpoint (Host:Port)</label>
- <input type="text" id="aerotun-modal-endpoint" placeholder="peer.example.com:51830" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-sky-500">
- <span class="text-[10px] text-slate-400">Required in Client mode</span>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Local Tunnel IP (CIDR) *</label>
- <input type="text" id="aerotun-modal-local" placeholder="10.99.0.1/24" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-sky-500">
- <span class="text-[10px] text-slate-400">Overlay IPv4 assigned to interface</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Peer Tunnel IP (Optional CIDR)</label>
- <input type="text" id="aerotun-modal-peer" placeholder="10.99.0.2/24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-sky-500">
- <span class="text-[10px] text-slate-400">Expected peer overlay IP</span>
- </div>
- </div>
- <div>
- <div class="flex items-center justify-between mb-1.5">
- <label class="block font-semibold text-slate-300">Pre-Shared Key (PSK) *</label>
- <button type="button" onclick="generateAeroTUNKey()" class="text-[11px] text-sky-400 hover:text-sky-300 underline font-mono">⚡ Generate Key</button>
- </div>
- <input type="text" id="aerotun-modal-psk" placeholder="32-byte hexadecimal pre-shared secret" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-sky-500">
- <span class="text-[10px] text-slate-400">Both ends must use identical 256-bit symmetric key for ChaCha20-Poly1305</span>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">MTU</label>
- <input type="number" id="aerotun-modal-mtu" value="1420" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-sky-500">
- <span class="text-[10px] text-slate-400">Default: 1420 bytes</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="aerotun-modal-comment" placeholder="High-speed interconnect" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- </div>
- <div class="flex flex-wrap items-center justify-between pt-2 border-t border-slate-800/80 gap-3">
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="aerotun-modal-compression" checked class="rounded bg-slate-800 border-slate-700 text-sky-600">
- <span class="font-medium">Adaptive LZ4 Compression</span>
- </label>
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="aerotun-modal-defroute" class="rounded bg-slate-800 border-slate-700 text-sky-600">
- <span class="font-medium">Default Route</span>
- </label>
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="aerotun-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-600">
- <span class="font-medium">Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeAeroTUNModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-500/20">Save AeroTUN</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD/EDIT PPP SECRET (USER) ================= -->
- <div id="ppp-secret-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div>
- <h3 id="secret-modal-title" class="text-sm font-bold text-white">Add PPP Secret</h3>
- <p class="text-[11px] text-slate-400">User account for PPPoE, PPTP, and L2TP authentication</p>
- </div>
- <button onclick="closePPPSecretModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSavePPPSecret(event)" class="p-6 space-y-4 text-xs font-sans">
- <input type="hidden" id="secret-modal-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Username (Name) *</label>
- <input type="text" id="secret-modal-name" placeholder="client_user1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-violet-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Password *</label>
- <input type="password" id="secret-modal-password" placeholder="••••••••" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-violet-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Service</label>
- <select id="secret-modal-service" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- <option value="any">any</option>
- <option value="pppoe">pppoe</option>
- <option value="pptp">pptp</option>
- <option value="l2tp">l2tp</option>
- </select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Profile</label>
- <select id="secret-modal-profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Local Address (Optional)</label>
- <input type="text" id="secret-modal-local" placeholder="Override server IP" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Remote Address (Optional Static IP)</label>
- <input type="text" id="secret-modal-remote" placeholder="Static client IP" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="secret-modal-comment" placeholder="Home user / Office user" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="flex items-center space-x-2 pt-1">
- <input type="checkbox" id="secret-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-600">
- <label for="secret-modal-disabled" class="text-slate-300">Disabled</label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closePPPSecretModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-violet-600 hover:bg-violet-500 text-white shadow-lg shadow-violet-500/20">Save Secret</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD/EDIT PPP PROFILE ================= -->
- <div id="ppp-profile-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div>
- <h3 id="profile-modal-title" class="text-sm font-bold text-white">Add PPP Profile</h3>
- <p class="text-[11px] text-slate-400">IP pool and encryption settings for PPP servers</p>
- </div>
- <button onclick="closePPPProfileModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSavePPPProfile(event)" class="p-6 space-y-4 text-xs font-sans">
- <input type="hidden" id="profile-modal-id">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Profile Name *</label>
- <input type="text" id="profile-modal-name" placeholder="e.g. office-pool" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-violet-500">
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Local Address *</label>
- <input type="text" id="profile-modal-local" placeholder="10.10.10.1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Remote Address (Pool) *</label>
- <input type="text" id="profile-modal-remote" placeholder="10.10.10.10-10.10.10.50" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">DNS Servers</label>
- <input type="text" id="profile-modal-dns" value="1.1.1.1,8.8.8.8" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Use Encryption</label>
- <select id="profile-modal-encryption" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- <option value="no">no</option>
- <option value="yes">yes</option>
- <option value="required" selected>required (MPPE-128)</option>
- </select>
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="profile-modal-comment" placeholder="Description of this profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="flex items-center space-x-2 pt-1">
- <input type="checkbox" id="profile-modal-onlyone" checked class="rounded bg-slate-800 border-slate-700 text-violet-600">
- <label for="profile-modal-onlyone" class="text-slate-300">Only One session per user account</label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closePPPProfileModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-violet-600 hover:bg-violet-500 text-white shadow-lg shadow-violet-500/20">Save Profile</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: IPSEC ROADWARRIOR SERVER ================= -->
- <div id="ipsec-server-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div>
- <h3 class="text-sm font-bold text-white">IPSec (IKEv2) Roadwarrior Server</h3>
- <p class="text-[11px] text-slate-400">Mobile VPN server for Windows, macOS, iOS, Android clients</p>
- </div>
- <button onclick="closeIPSecServerModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveIPSecServer(event)" class="p-6 space-y-4 text-xs font-sans">
- <div class="flex items-center justify-between border-b border-slate-800 pb-3">
- <span class="text-slate-300 font-semibold">Server State</span>
- <div class="flex items-center gap-3">
- <span id="modal-ipsec-server-status" class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-slate-800 text-slate-400">STOPPED</span>
- <label class="relative inline-flex items-center cursor-pointer">
- <input type="checkbox" id="modal-ipsec-server-enabled" class="sr-only peer">
- <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-600"></div>
- </label>
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Pre-Shared Key (PSK) *</label>
- <input type="password" id="modal-ipsec-server-psk" placeholder="••••••••" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-amber-500">
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Virtual IP Pool (CIDR) *</label>
- <input type="text" id="modal-ipsec-server-pool" value="10.10.30.0/24" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">DNS Servers</label>
- <input type="text" id="modal-ipsec-server-dns" value="1.1.1.1,8.8.8.8" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Local Traffic Selector (Subnet)</label>
- <input type="text" id="modal-ipsec-server-subnet" value="0.0.0.0/0" placeholder="0.0.0.0/0 (Full Tunnel)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeIPSecServerModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-amber-600 hover:bg-amber-500 text-white shadow-lg shadow-amber-500/20">Apply IPSec Server</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: WIREGUARD CLIENT CONFIG VIEWER ================= -->
- <div id="wg-client-conf-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div>
- <h3 class="text-sm font-bold text-white">WireGuard Client Configuration</h3>
- <p class="text-[11px] text-slate-400">Import this .conf into WireGuard on iOS, Android, macOS or Windows</p>
- </div>
- <button onclick="closeWGClientConfModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <div class="p-6 space-y-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">WireGuard Client Profile (.conf)</label>
- <textarea id="wg-client-conf-text" rows="11" readonly class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs font-mono text-cyan-300 select-all focus:outline-none"></textarea>
- </div>
- <div class="flex justify-between items-center pt-2">
- <span class="text-[11px] text-slate-500">Ready for instant import</span>
- <div class="space-x-2">
- <button onclick="copyWGClientConf()" class="px-4 py-2 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-white border border-slate-700 transition">
- Copy Config
- </button>
- <button onclick="downloadWGClientConf()" class="px-4 py-2 rounded-lg text-xs font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20 transition">
- Download .conf
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- ================= MODAL: BGP INSTANCE SETTINGS ================= -->
- <div id="bgp-instance-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div>
- <h3 class="text-sm font-bold text-white">BGP Instance Settings</h3>
- <p class="text-[11px] text-slate-400">Configure global Autonomous System and route redistribution</p>
- </div>
- <button onclick="closeBgpInstanceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="bgp-instance-form" onsubmit="submitBgpInstance(event)" class="p-6 space-y-4 text-xs">
- <div class="flex items-center justify-between p-3 rounded-xl bg-slate-800/60 border border-slate-700/60">
- <div>
- <div class="font-semibold text-white">Enable BGP Routing</div>
- <div class="text-[11px] text-slate-400">Run BIRD 2 daemon for dynamic exterior gateway routing & multi-instance AS peering</div>
- </div>
- <input type="checkbox" id="modal-bgp-enabled" class="w-4 h-4 rounded text-purple-600 focus:ring-purple-500 bg-slate-800 border-slate-600">
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Autonomous System (AS) *</label>
- <input type="number" id="modal-bgp-as" required min="1" max="4294967295" placeholder="65001" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-purple-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Router ID</label>
- <input type="text" id="modal-bgp-router-id" placeholder="192.168.131.56" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-purple-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Keepalive Time (s)</label>
- <input type="number" id="modal-bgp-keepalive" value="60" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Hold Time (s)</label>
- <input type="number" id="modal-bgp-holdtime" value="180" min="3" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div class="border-t border-slate-800 pt-3">
- <label class="block font-semibold text-slate-300 mb-2">Redistribute Routes into BGP</label>
- <div class="space-y-2">
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-bgp-redist-conn" class="rounded text-purple-600 bg-slate-800 border-slate-700">
- <span>Redistribute Connected Subnets</span>
- </label>
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-bgp-redist-static" class="rounded text-purple-600 bg-slate-800 border-slate-700">
- <span>Redistribute Static Routes</span>
- </label>
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-bgp-redist-ospf" class="rounded text-purple-600 bg-slate-800 border-slate-700">
- <span>Redistribute OSPF Routes</span>
- </label>
- </div>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeBgpInstanceModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20">Save BGP Settings</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: BGP CONNECTION ================= -->
- <div id="bgp-peer-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-4xl shadow-2xl overflow-hidden animate-in flex flex-col max-h-[90vh]">
- <!-- Header -->
- <div class="px-6 py-3.5 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
- <div class="flex items-center gap-2.5">
- <span class="text-cyan-400 text-sm">🔀</span>
- <span class="text-xs font-semibold text-slate-400">BGP Connection ></span>
- <span id="bgp-peer-modal-title" class="text-xs font-bold text-cyan-300 font-mono">New...</span>
- </div>
- <button type="button" onclick="closeBgpPeerModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <!-- Tab Navigation -->
- <div class="flex border-b border-slate-800 bg-slate-950/30 px-6 gap-2">
- <button type="button" id="bgp-peer-tab-btn-general" onclick="switchBgpPeerModalTab('general')" class="px-4 py-2 text-xs font-bold border-b-2 border-cyan-500 text-white transition">General</button>
- <button type="button" id="bgp-peer-tab-btn-extra" onclick="switchBgpPeerModalTab('extra')" class="px-4 py-2 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition">Extra</button>
- <button type="button" id="bgp-peer-tab-btn-attributes" onclick="switchBgpPeerModalTab('attributes')" class="px-4 py-2 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition">Attributes</button>
- <button type="button" id="bgp-peer-tab-btn-filter" onclick="switchBgpPeerModalTab('filter')" class="px-4 py-2 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition">Filter</button>
- </div>
- <!-- Body Form -->
- <form id="bgp-peer-form" onsubmit="submitBgpPeer(event)" class="flex-1 overflow-hidden flex flex-col">
- <input type="hidden" id="modal-bgp-peer-id">
-
- <div class="flex-1 overflow-y-auto p-6 flex gap-6">
- <!-- Main Tabs Area -->
- <div class="flex-1 space-y-4 text-xs">
-
- <!-- TAB 1: GENERAL -->
- <div id="bgp-peer-tab-general" class="space-y-3.5">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Enabled</label>
- <div class="col-span-2">
- <input type="checkbox" id="modal-bgp-peer-enabled" checked class="w-4 h-4 rounded text-cyan-500 bg-slate-800 border-slate-700">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Comment</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-comment" placeholder="Optional notes" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Name *</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-name" required placeholder="ebgp-JB172-2" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Instance</label>
- <div class="col-span-2 flex items-center gap-1.5">
- <input type="text" id="modal-bgp-peer-instance" placeholder="bgp-instance-1" class="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <button type="button" onclick="openBgpInstanceModal()" class="px-2 py-1 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded text-slate-300 font-mono text-xs">...</button>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Template</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-template" placeholder="AWMN-ebgp (Optional)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">AS (Local AS)</label>
- <div class="col-span-2">
- <input type="number" id="modal-bgp-peer-local-as" min="1" max="4294967295" placeholder="e.g. 6610 (Multi-Instance Local AS)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <p class="text-[10px] text-slate-500 mt-0.5">Custom Local AS for this BGP session (Multi-Instance). Leave blank to use Global Router AS.</p>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">AFI</label>
- <div class="col-span-2 flex items-center flex-wrap gap-3 text-slate-300">
- <label class="flex items-center gap-1.5 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-afi-ip" checked class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>ip</span>
- </label>
- <label class="flex items-center gap-1.5 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-afi-ipv6" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>ipv6</span>
- </label>
- <label class="flex items-center gap-1.5 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-afi-l2vpn" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>l2vpn</span>
- </label>
- <label class="flex items-center gap-1.5 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-afi-vpnv4" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>vpnv4</span>
- </label>
- <label class="flex items-center gap-1.5 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-afi-l2vpn-cisco" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>l2vpn cisco</span>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Router ID</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-router-id" placeholder="e.g. 10.42.62.254 (Optional override)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <hr class="border-slate-800/80 my-2">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Remote Address *</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-remote-addr" required placeholder="10.2.51.249" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Remote Port</label>
- <div class="col-span-2">
- <input type="number" id="modal-bgp-peer-remote-port" placeholder="179 (default)" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Remote AS *</label>
- <div class="col-span-2">
- <input type="number" id="modal-bgp-peer-remote-as" required min="1" max="4294967295" placeholder="17244" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Remote Allow AS</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-remote-allow-as" placeholder="e.g. 17244,65000 (Optional)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <hr class="border-slate-800/80 my-2">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Local Address</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-local-addr" placeholder="e.g. 10.2.51.250" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Local Port</label>
- <div class="col-span-2">
- <input type="number" id="modal-bgp-peer-local-port" placeholder="Optional bind port" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Local Role</label>
- <div class="col-span-2">
- <select id="modal-bgp-peer-local-role" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="ebgp">ebgp</option>
- <option value="ibgp">ibgp</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">TCP MD5 Key</label>
- <div class="col-span-2">
- <input type="password" id="modal-bgp-peer-password" placeholder="BGP authentication secret" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <hr class="border-slate-800/80 my-2">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Multi-hop</label>
- <div class="col-span-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-bgp-peer-multihop" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Enable eBGP Multi-hop</span>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">TTL Limits</label>
- <div class="col-span-2 grid grid-cols-2 gap-3">
- <div>
- <span class="text-[10px] text-slate-500 block mb-0.5">Tx TTL</span>
- <input type="number" id="modal-bgp-peer-tx-ttl" min="1" max="255" placeholder="64 (default)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1 text-white font-mono">
- </div>
- <div>
- <span class="text-[10px] text-slate-500 block mb-0.5">Rx Min TTL</span>
- <input type="number" id="modal-bgp-peer-rx-min-ttl" min="0" max="255" placeholder="0 (any)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1 text-white font-mono">
- </div>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Session Mode</label>
- <div class="col-span-2 flex items-center gap-6 text-slate-300">
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-connect" checked class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Connect</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-listen" checked class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Listen</span>
- </label>
- </div>
- </div>
- </div>
- <!-- TAB 2: EXTRA -->
- <div id="bgp-peer-tab-extra" class="space-y-3.5 hidden">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Hold Time</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-holdtime" placeholder="00:00:30 (30s) or 00:03:00" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Keepalive Time</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-keepalive" placeholder="00:00:10 (10s) or 00:01:00" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Use BFD</label>
- <div class="col-span-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-bgp-peer-use-bfd" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Enable Bidirectional Forwarding Detection (BFD)</span>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Routing Table</label>
- <div class="col-span-2">
- <select id="modal-bgp-peer-routing-table" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="main">main</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">VRF</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-vrf" placeholder="main (default)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Client Reflection</label>
- <div class="col-span-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-bgp-peer-no-client-reflect" checked class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>No Client To Client Reflection</span>
- </label>
- </div>
- </div>
- <hr class="border-slate-800/80 my-2">
- <div class="grid grid-cols-3 items-start gap-3">
- <label class="text-slate-400 font-medium pt-1">Output Redistribute</label>
- <div class="col-span-2 grid grid-cols-3 gap-2 text-slate-300">
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-conn" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>connected</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-static" checked class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>static</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-rip" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>rip</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-ospf" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>ospf</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-bgp" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>bgp</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-vpn" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>vpn</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-dhcp" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>dhcp</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-fantasy" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>fantasy</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-modem" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>modem</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-bgp-mpls-vpn" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>bgp-mpls-vpn</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-slaac" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>slaac</span>
- </label>
- </div>
- </div>
- <hr class="border-slate-800/80 my-2">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Default Originate</label>
- <div class="col-span-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-bgp-peer-default-orig" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Announce Default Route (0.0.0.0/0)</span>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Network Blackhole</label>
- <div class="col-span-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-bgp-peer-network-blackhole" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Drop unroutable traffic via blackhole</span>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">No Early Cut</label>
- <div class="col-span-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-bgp-peer-no-early-cut" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Prevent early cut on prefix withdrawal</span>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Keep Sent Attributes</label>
- <div class="col-span-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-bgp-peer-keep-sent-attrs" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Retain outbound advertised attributes</span>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Affinities</label>
- <div class="col-span-2 grid grid-cols-2 gap-3">
- <div>
- <span class="text-[10px] text-slate-500 block mb-0.5">Input Affinity</span>
- <input type="text" id="modal-bgp-peer-input-affinity" placeholder="none" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1 text-white font-mono">
- </div>
- <div>
- <span class="text-[10px] text-slate-500 block mb-0.5">Output Affinity</span>
- <input type="text" id="modal-bgp-peer-output-affinity" placeholder="none" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1 text-white font-mono">
- </div>
- </div>
- </div>
- </div>
- <!-- TAB 3: ATTRIBUTES -->
- <div id="bgp-peer-tab-attributes" class="space-y-3.5 hidden">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Nexthop Choice</label>
- <div class="col-span-2">
- <select id="modal-bgp-peer-nexthop-choice" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="force-self">force-self (Next-hop Self)</option>
- <option value="default">default</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Default Prepend</label>
- <div class="col-span-2">
- <input type="number" id="modal-bgp-peer-default-prepend" min="0" max="16" placeholder="0 (none)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <p class="text-[10px] text-slate-500 mt-0.5">Repeat local ASN in AS-PATH to make path less preferred</p>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Allow AS In</label>
- <div class="col-span-2">
- <input type="number" id="modal-bgp-peer-allow-as-in" min="0" max="10" placeholder="0" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Ignore AS Path Length</label>
- <div class="col-span-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-bgp-peer-ignore-as-path-len" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Ignore AS Path Length in route selection</span>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Remove Private AS</label>
- <div class="col-span-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-bgp-peer-remove-priv-as" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Strip private AS numbers (64512-65534) from AS-PATH</span>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">AS Override</label>
- <div class="col-span-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-bgp-peer-as-override" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Replace peer AS in AS-PATH</span>
- </label>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Cisco VPLS NLRI</label>
- <div class="col-span-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-bgp-peer-vpls-nlri" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Cisco VPLS NLRI Length Format</span>
- </label>
- </div>
- </div>
- </div>
- <!-- TAB 4: FILTER -->
- <div id="bgp-peer-tab-filter" class="space-y-3.5 hidden">
- <datalist id="filter-chains-list"></datalist>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Input Filter</label>
- <div class="col-span-2">
- <input type="text" list="filter-chains-list" id="modal-bgp-peer-in-filter" placeholder="e.g. awmn" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <p class="text-[10px] text-slate-500 mt-0.5">Routing Filter chain applied to incoming routes</p>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Input Accept NLRI</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-in-accept-nlri" placeholder="Optional NLRI prefixes" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Input Accept Communities</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-in-accept-comm" placeholder="e.g. 65001:100" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Input Accept Ext Communities</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-in-accept-ext-comm" placeholder="e.g. rt:65001:10" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Input Accept Large Communities</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-in-accept-large-comm" placeholder="e.g. 65001:1:1" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Input Filter Communities</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-in-filter-comm" placeholder="Filter pattern" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Input Filter Ext Communities</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-in-filter-ext-comm" placeholder="Filter pattern" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Input Filter Large Communities</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-in-filter-large-comm" placeholder="Filter pattern" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Input Filter Unknown</label>
- <div class="col-span-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-bgp-peer-in-filter-unknown" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Filter unknown BGP attributes</span>
- </label>
- </div>
- </div>
- <hr class="border-slate-800/80 my-2">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Output Filter</label>
- <div class="col-span-2">
- <input type="text" list="filter-chains-list" id="modal-bgp-peer-out-filter" placeholder="e.g. awmn" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <p class="text-[10px] text-slate-500 mt-0.5">Routing Filter chain applied to outgoing routes</p>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Output Selection Policy</label>
- <div class="col-span-2">
- <select id="modal-bgp-peer-out-selection-policy" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="disabled">disabled</option>
- <option value="passive">passive</option>
- <option value="force">force</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Output Network</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-out-network-name" placeholder="e.g. BGP-AWMN" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <hr class="border-slate-800/80 my-3">
- <!-- Output Networks section with [+] and [-] buttons as requested! -->
- <div>
- <div class="flex items-center justify-between mb-2">
- <div>
- <label class="text-slate-200 font-bold block">Output Networks</label>
- <p class="text-[10px] text-slate-400">Prefixes/subnets announced to this peer connection</p>
- </div>
- <button type="button" onclick="addOutputNetworkRow('')" class="text-xs px-2.5 py-1 bg-cyan-600/30 hover:bg-cyan-600 text-cyan-300 hover:text-white rounded border border-cyan-500/40 font-semibold transition flex items-center gap-1">
- <span>+</span>
- <span>Add Network</span>
- </button>
- </div>
- <div id="modal-bgp-output-networks-container" class="space-y-2 p-3 bg-slate-950/40 border border-slate-800 rounded-xl min-h-[80px]">
- <!-- Dynamic rows go here -->
- </div>
- </div>
- </div>
- </div>
- <!-- Right Sidebar (Actions) -->
- <div class="w-36 border-l border-slate-800 pl-4 space-y-2 font-sans">
- <div class="text-[10px] uppercase font-bold text-slate-500 tracking-wider mb-2">Actions</div>
- <button type="button" onclick="copyCurrentBgpPeer()" class="w-full text-left text-xs px-2.5 py-1.5 rounded-lg text-slate-300 hover:text-white hover:bg-slate-800 transition flex items-center gap-2">
- <span>📋</span>
- <span>Copy</span>
- </button>
- <button type="button" id="modal-btn-remove-peer" onclick="removeCurrentBgpPeer()" class="w-full text-left text-xs px-2.5 py-1.5 rounded-lg text-rose-400 hover:text-rose-300 hover:bg-rose-950/40 transition flex items-center gap-2">
- <span>✕</span>
- <span>Remove</span>
- </button>
- </div>
- </div>
- <!-- Footer Buttons -->
- <div class="px-6 py-3.5 border-t border-slate-800 bg-slate-950/60 flex items-center justify-end space-x-2.5">
- <button type="button" onclick="closeBgpPeerModal()" class="px-4 py-1.5 rounded-lg text-xs font-semibold text-slate-400 hover:bg-slate-800 hover:text-white transition">Cancel</button>
- <button type="button" onclick="applyBgpPeerModal(event)" class="px-4 py-1.5 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-cyan-300 border border-slate-700 transition">Apply</button>
- <button type="submit" class="px-5 py-1.5 rounded-lg text-xs font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20 transition">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: BGP NETWORK ================= -->
- <div id="bgp-network-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 id="bgp-network-modal-title" class="text-sm font-bold text-white">Advertise BGP Network</h3>
- <button onclick="closeBgpNetworkModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="bgp-network-form" onsubmit="submitBgpNetwork(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="modal-bgp-net-id">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Network Prefix (CIDR) *</label>
- <input type="text" id="modal-bgp-net-cidr" required placeholder="10.200.0.0/24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-purple-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="modal-bgp-net-comment" placeholder="Public IP block prefix" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-bgp-net-disabled" class="rounded text-purple-600 bg-slate-800 border-slate-700">
- <span>Disabled</span>
- </label>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeBgpNetworkModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20">Save Network</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: OSPF INSTANCE ================= -->
- <div id="ospf-instance-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-2xl shadow-2xl overflow-hidden animate-in flex flex-col max-h-[90vh]">
- <div class="px-6 py-3.5 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
- <div class="flex items-center gap-2.5">
- <span class="text-sky-400 text-sm">🔀</span>
- <span class="text-xs font-semibold text-slate-400">OSPF Instance ></span>
- <span id="ospf-instance-modal-title" class="text-xs font-bold text-sky-300 font-mono">New...</span>
- </div>
- <button type="button" onclick="closeOspfInstanceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <div class="flex border-b border-slate-800 bg-slate-950/30 px-6 gap-2">
- <button type="button" class="px-4 py-2 text-xs font-bold border-b-2 border-sky-500 text-white transition">General</button>
- </div>
- <form id="ospf-instance-form" onsubmit="submitOspfInstance(event)" class="flex-1 overflow-hidden flex flex-col">
- <input type="hidden" id="modal-ospf-inst-id">
- <div class="flex-1 overflow-y-auto p-6 flex gap-6">
- <div class="flex-1 space-y-3.5 text-xs">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Enabled</label>
- <div class="col-span-2">
- <input type="checkbox" id="modal-ospf-inst-enabled" checked class="w-4 h-4 rounded text-sky-500 bg-slate-800 border-slate-700">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Comment</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-inst-comment" placeholder="Optional comment" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Name *</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-inst-name" required value="Default" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Version</label>
- <div class="col-span-2">
- <select id="modal-ospf-inst-version" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="2">2 (OSPFv2 IPv4)</option>
- <option value="3">3 (OSPFv3 IPv6)</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">VRF</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-inst-vrf" value="main" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Router ID</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-inst-router-id" placeholder="10.42.62.254" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Routing Table</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-inst-routing-table" value="main" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-start gap-3 pt-2 border-t border-slate-800">
- <label class="text-slate-400 font-medium pt-1">Redistribute</label>
- <div class="col-span-2 space-y-2">
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-ospf-inst-redist-conn" class="rounded text-sky-500 bg-slate-800 border-slate-700">
- <span>connected</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-ospf-inst-redist-static" checked class="rounded text-sky-500 bg-slate-800 border-slate-700">
- <span>static</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-ospf-inst-redist-bgp" class="rounded text-sky-500 bg-slate-800 border-slate-700">
- <span>bgp</span>
- </label>
- </div>
- </div>
- </div>
- <!-- Sidebar Actions -->
- <div class="w-28 flex flex-col gap-2 border-l border-slate-800 pl-4 select-none">
- <button type="button" onclick="copyOspfInstance()" class="text-xs text-left px-2 py-1.5 rounded hover:bg-slate-800 text-slate-300">📄 Copy</button>
- <button type="button" onclick="deleteCurrentOspfInstance()" id="btn-ospf-inst-modal-remove" class="text-xs text-left px-2 py-1.5 rounded hover:bg-rose-950/40 text-rose-400">✕ Remove</button>
- </div>
- </div>
- <!-- Footer -->
- <div class="px-6 py-3 border-t border-slate-800 bg-slate-950/40 flex justify-end gap-2.5">
- <button type="button" onclick="closeOspfInstanceModal()" class="px-4 py-1.5 rounded-lg text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition">Cancel</button>
- <button type="button" onclick="applyOspfInstanceForm()" class="px-4 py-1.5 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-sky-300 border border-slate-700 transition">Apply</button>
- <button type="submit" class="px-5 py-1.5 rounded-lg text-xs font-bold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-600/30 transition">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: OSPF AREA ================= -->
- <div id="ospf-area-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-2xl shadow-2xl overflow-hidden animate-in flex flex-col max-h-[90vh]">
- <div class="px-6 py-3.5 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
- <div class="flex items-center gap-2.5">
- <span class="text-sky-400 text-sm">🔀</span>
- <span class="text-xs font-semibold text-slate-400">OSPF Area ></span>
- <span id="ospf-area-modal-title" class="text-xs font-bold text-sky-300 font-mono">New...</span>
- </div>
- <button type="button" onclick="closeOspfAreaModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <div class="flex border-b border-slate-800 bg-slate-950/30 px-6 gap-2">
- <button type="button" class="px-4 py-2 text-xs font-bold border-b-2 border-sky-500 text-white transition">General</button>
- </div>
- <form id="ospf-area-form" onsubmit="submitOspfArea(event)" class="flex-1 overflow-hidden flex flex-col">
- <input type="hidden" id="modal-ospf-area-id">
- <div class="flex-1 overflow-y-auto p-6 flex gap-6">
- <div class="flex-1 space-y-3.5 text-xs">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Enabled</label>
- <div class="col-span-2">
- <input type="checkbox" id="modal-ospf-area-enabled" checked class="w-4 h-4 rounded text-sky-500 bg-slate-800 border-slate-700">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Comment</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-area-comment" placeholder="Optional comment" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Name *</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-area-name" required value="Default" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Instance</label>
- <div class="col-span-2">
- <select id="modal-ospf-area-instance" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="Default">Default</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Area ID *</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-area-areaid" required value="0.0.0.0" placeholder="0.0.0.0" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Type</label>
- <div class="col-span-2">
- <select id="modal-ospf-area-type" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="default">default</option>
- <option value="stub">stub</option>
- <option value="nssa">nssa</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Default Cost</label>
- <div class="col-span-2">
- <input type="number" id="modal-ospf-area-default-cost" min="1" max="65535" placeholder="1" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">No Summaries</label>
- <div class="col-span-2">
- <input type="checkbox" id="modal-ospf-area-no-summaries" class="rounded text-sky-500 bg-slate-800 border-slate-700">
- </div>
- </div>
- </div>
- <!-- Sidebar Actions -->
- <div class="w-28 flex flex-col gap-2 border-l border-slate-800 pl-4 select-none">
- <button type="button" onclick="copyOspfArea()" class="text-xs text-left px-2 py-1.5 rounded hover:bg-slate-800 text-slate-300">📄 Copy</button>
- <button type="button" onclick="deleteCurrentOspfArea()" id="btn-ospf-area-modal-remove" class="text-xs text-left px-2 py-1.5 rounded hover:bg-rose-950/40 text-rose-400">✕ Remove</button>
- </div>
- </div>
- <!-- Footer -->
- <div class="px-6 py-3 border-t border-slate-800 bg-slate-950/40 flex justify-end gap-2.5">
- <button type="button" onclick="closeOspfAreaModal()" class="px-4 py-1.5 rounded-lg text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition">Cancel</button>
- <button type="button" onclick="applyOspfAreaForm()" class="px-4 py-1.5 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-sky-300 border border-slate-700 transition">Apply</button>
- <button type="submit" class="px-5 py-1.5 rounded-lg text-xs font-bold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-600/30 transition">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: OSPF AREA RANGE ================= -->
- <div id="ospf-area-range-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-2xl shadow-2xl overflow-hidden animate-in flex flex-col max-h-[90vh]">
- <div class="px-6 py-3.5 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
- <div class="flex items-center gap-2.5">
- <span class="text-sky-400 text-sm">🔀</span>
- <span class="text-xs font-semibold text-slate-400">Area Range ></span>
- <span id="ospf-area-range-modal-title" class="text-xs font-bold text-sky-300 font-mono">New...</span>
- </div>
- <button type="button" onclick="closeOspfAreaRangeModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <div class="flex border-b border-slate-800 bg-slate-950/30 px-6 gap-2">
- <button type="button" class="px-4 py-2 text-xs font-bold border-b-2 border-sky-500 text-white transition">General</button>
- </div>
- <form id="ospf-area-range-form" onsubmit="submitOspfAreaRange(event)" class="flex-1 overflow-hidden flex flex-col">
- <input type="hidden" id="modal-ospf-range-id">
- <div class="flex-1 overflow-y-auto p-6 flex gap-6">
- <div class="flex-1 space-y-3.5 text-xs">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Enabled</label>
- <div class="col-span-2">
- <input type="checkbox" id="modal-ospf-range-enabled" checked class="w-4 h-4 rounded text-sky-500 bg-slate-800 border-slate-700">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Comment</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-range-comment" placeholder="Optional comment" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Area *</label>
- <div class="col-span-2">
- <select id="modal-ospf-range-area" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="Default">Default</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Prefix *</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-range-prefix" required placeholder="10.42.0.0/16" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Cost</label>
- <div class="col-span-2">
- <input type="number" id="modal-ospf-range-cost" min="0" max="65535" placeholder="1" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Advertise</label>
- <div class="col-span-2">
- <input type="checkbox" id="modal-ospf-range-advertise" checked class="rounded text-sky-500 bg-slate-800 border-slate-700">
- </div>
- </div>
- </div>
- <!-- Sidebar Actions -->
- <div class="w-28 flex flex-col gap-2 border-l border-slate-800 pl-4 select-none">
- <button type="button" onclick="deleteCurrentOspfAreaRange()" id="btn-ospf-range-modal-remove" class="text-xs text-left px-2 py-1.5 rounded hover:bg-rose-950/40 text-rose-400">✕ Remove</button>
- </div>
- </div>
- <!-- Footer -->
- <div class="px-6 py-3 border-t border-slate-800 bg-slate-950/40 flex justify-end gap-2.5">
- <button type="button" onclick="closeOspfAreaRangeModal()" class="px-4 py-1.5 rounded-lg text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition">Cancel</button>
- <button type="button" onclick="applyOspfAreaRangeForm()" class="px-4 py-1.5 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-sky-300 border border-slate-700 transition">Apply</button>
- <button type="submit" class="px-5 py-1.5 rounded-lg text-xs font-bold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-600/30 transition">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: OSPF INTERFACE TEMPLATE ================= -->
- <div id="ospf-template-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-3xl shadow-2xl overflow-hidden animate-in flex flex-col max-h-[90vh]">
- <div class="px-6 py-3.5 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
- <div class="flex items-center gap-2.5">
- <span class="text-sky-400 text-sm">🔀</span>
- <span class="text-xs font-semibold text-slate-400">Interface Template ></span>
- <span id="ospf-template-modal-title" class="text-xs font-bold text-sky-300 font-mono">New...</span>
- </div>
- <button type="button" onclick="closeOspfTemplateModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <div class="flex border-b border-slate-800 bg-slate-950/30 px-6 gap-2">
- <button type="button" id="ospf-tmpl-tab-btn-general" onclick="switchOspfTemplateTab('general')" class="px-4 py-2 text-xs font-bold border-b-2 border-sky-500 text-white transition">General</button>
- <button type="button" id="ospf-tmpl-tab-btn-auth" onclick="switchOspfTemplateTab('auth')" class="px-4 py-2 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition">Authentication</button>
- </div>
- <form id="ospf-template-form" onsubmit="submitOspfTemplate(event)" class="flex-1 overflow-hidden flex flex-col">
- <input type="hidden" id="modal-ospf-tmpl-id">
- <div class="flex-1 overflow-y-auto p-6 flex gap-6">
- <div class="flex-1 space-y-3.5 text-xs">
-
- <!-- Tab General -->
- <div id="ospf-tmpl-tab-general" class="space-y-3.5">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Enabled</label>
- <div class="col-span-2">
- <input type="checkbox" id="modal-ospf-tmpl-enabled" checked class="w-4 h-4 rounded text-sky-500 bg-slate-800 border-slate-700">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Comment</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-tmpl-comment" placeholder="Optional notes" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Interfaces</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-tmpl-interfaces" placeholder="e.g. ether1, wlan1 or all" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <p class="text-[10px] text-slate-500 mt-0.5">Physical/VLAN/tunnel interfaces or leave empty to match by networks</p>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Area *</label>
- <div class="col-span-2">
- <select id="modal-ospf-tmpl-area" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="Default">Default</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Networks</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-tmpl-networks" placeholder="e.g. 10.42.36.244/30" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <p class="text-[10px] text-slate-500 mt-0.5">Subnet CIDR to match interfaces against</p>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Network Type</label>
- <div class="col-span-2">
- <select id="modal-ospf-tmpl-net-type" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="broadcast">broadcast</option>
- <option value="ptp">ptp (point-to-point)</option>
- <option value="nbma">nbma</option>
- <option value="point-to-multipoint">point-to-multipoint</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Cost</label>
- <div class="col-span-2">
- <input type="number" id="modal-ospf-tmpl-cost" value="1" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Priority</label>
- <div class="col-span-2">
- <input type="number" id="modal-ospf-tmpl-priority" value="128" min="0" max="255" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Passive</label>
- <div class="col-span-2">
- <input type="checkbox" id="modal-ospf-tmpl-passive" class="rounded text-sky-500 bg-slate-800 border-slate-700">
- <span class="text-[11px] text-slate-400 ml-1.5">Do not send/listen for OSPF hello packets</span>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Timers (Hello / Dead)</label>
- <div class="col-span-2 grid grid-cols-2 gap-2">
- <input type="number" id="modal-ospf-tmpl-hello" value="10" min="1" max="65535" placeholder="Hello 10s" class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <input type="number" id="modal-ospf-tmpl-dead" value="40" min="1" max="65535" placeholder="Dead 40s" class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- </div>
- <!-- Tab Authentication -->
- <div id="ospf-tmpl-tab-auth" class="hidden space-y-3.5">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Auth</label>
- <div class="col-span-2">
- <select id="modal-ospf-tmpl-auth" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="none">none</option>
- <option value="simple">simple</option>
- <option value="md5">md5</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Auth Key</label>
- <div class="col-span-2">
- <input type="password" id="modal-ospf-tmpl-auth-key" placeholder="••••••••" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- </div>
- </div>
- <!-- Sidebar Actions -->
- <div class="w-28 flex flex-col gap-2 border-l border-slate-800 pl-4 select-none">
- <button type="button" onclick="copyOspfTemplate()" class="text-xs text-left px-2 py-1.5 rounded hover:bg-slate-800 text-slate-300">📄 Copy</button>
- <button type="button" onclick="deleteCurrentOspfTemplate()" id="btn-ospf-tmpl-modal-remove" class="text-xs text-left px-2 py-1.5 rounded hover:bg-rose-950/40 text-rose-400">✕ Remove</button>
- </div>
- </div>
- <!-- Footer -->
- <div class="px-6 py-3 border-t border-slate-800 bg-slate-950/40 flex justify-end gap-2.5">
- <button type="button" onclick="closeOspfTemplateModal()" class="px-4 py-1.5 rounded-lg text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition">Cancel</button>
- <button type="button" onclick="applyOspfTemplateForm()" class="px-4 py-1.5 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-sky-300 border border-slate-700 transition">Apply</button>
- <button type="submit" class="px-5 py-1.5 rounded-lg text-xs font-bold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-600/30 transition">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: OSPF STATIC NEIGHBOR ================= -->
- <div id="ospf-static-nbr-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-xl shadow-2xl overflow-hidden animate-in flex flex-col max-h-[90vh]">
- <div class="px-6 py-3.5 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
- <div class="flex items-center gap-2.5">
- <span class="text-sky-400 text-sm">🔀</span>
- <span class="text-xs font-semibold text-slate-400">Static Neighbor ></span>
- <span id="ospf-static-nbr-modal-title" class="text-xs font-bold text-sky-300 font-mono">New...</span>
- </div>
- <button type="button" onclick="closeOspfStaticNbrModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="ospf-static-nbr-form" onsubmit="submitOspfStaticNbr(event)" class="flex-1 overflow-hidden flex flex-col">
- <input type="hidden" id="modal-ospf-snbr-id">
- <div class="flex-1 overflow-y-auto p-6 flex gap-6">
- <div class="flex-1 space-y-3.5 text-xs">
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Enabled</label>
- <div class="col-span-2">
- <input type="checkbox" id="modal-ospf-snbr-enabled" checked class="w-4 h-4 rounded text-sky-500 bg-slate-800 border-slate-700">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Comment</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-snbr-comment" placeholder="Optional comment" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Address *</label>
- <div class="col-span-2">
- <input type="text" id="modal-ospf-snbr-address" required placeholder="10.42.62.249" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Area</label>
- <div class="col-span-2">
- <select id="modal-ospf-snbr-area" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- <option value="Default">Default</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Poll Interval</label>
- <div class="col-span-2">
- <input type="number" id="modal-ospf-snbr-poll" min="1" max="65535" placeholder="120" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Cost</label>
- <div class="col-span-2">
- <input type="number" id="modal-ospf-snbr-cost" min="1" max="65535" placeholder="1" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- </div>
- </div>
- <!-- Sidebar Actions -->
- <div class="w-28 flex flex-col gap-2 border-l border-slate-800 pl-4 select-none">
- <button type="button" onclick="deleteCurrentOspfStaticNbr()" id="btn-ospf-snbr-modal-remove" class="text-xs text-left px-2 py-1.5 rounded hover:bg-rose-950/40 text-rose-400">✕ Remove</button>
- </div>
- </div>
- <!-- Footer -->
- <div class="px-6 py-3 border-t border-slate-800 bg-slate-950/40 flex justify-end gap-2.5">
- <button type="button" onclick="closeOspfStaticNbrModal()" class="px-4 py-1.5 rounded-lg text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition">Cancel</button>
- <button type="button" onclick="applyOspfStaticNbrForm()" class="px-4 py-1.5 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-sky-300 border border-slate-700 transition">Apply</button>
- <button type="submit" class="px-5 py-1.5 rounded-lg text-xs font-bold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-600/30 transition">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT ROUTING FILTER RULE ================= -->
- <div id="modal-routing-filter" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-2xl shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
- <div class="flex items-center gap-2">
- <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
- </svg>
- <div>
- <h3 id="modal-rf-title" class="text-sm font-bold text-white">Routing Filter Rule</h3>
- <p class="text-[11px] text-slate-400">Procedural filter syntax: if (...) { ... } else { ... }</p>
- </div>
- </div>
- <button onclick="closeRoutingFilterModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="routing-filter-form" onsubmit="submitRoutingFilter(event)" class="p-6 space-y-4 text-xs max-h-[85vh] overflow-y-auto">
- <input type="hidden" id="modal-rf-id">
- <div class="grid grid-cols-3 gap-3">
- <div class="col-span-2">
- <label class="block font-semibold text-slate-300 mb-1">Chain *</label>
- <input type="text" id="modal-rf-chain" list="dl-routing-chains" required placeholder="e.g. bgp-in, bgp-out, awmn" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:border-emerald-500">
- <datalist id="dl-routing-chains"></datalist>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Rule Order *</label>
- <input type="number" id="modal-rf-order" value="10" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:border-emerald-500">
- </div>
- </div>
- <!-- Script Rule Editor -->
- <div>
- <div class="flex items-center justify-between mb-1.5">
- <label class="font-semibold text-slate-300 flex items-center gap-2">
- <span>Filter Rule Script *</span>
- <span class="text-[10px] text-emerald-400 font-mono bg-emerald-950/60 border border-emerald-800/40 px-1.5 py-0.5 rounded">v7 Script Engine</span>
- </label>
- <span class="text-[10px] text-slate-400">Terminates with accept; or reject;</span>
- </div>
- <!-- Quick Templates Bar -->
- <div class="flex flex-wrap items-center gap-1.5 mb-2 p-2 bg-slate-950/60 border border-slate-800 rounded-lg">
- <span class="text-[10px] text-slate-400 font-medium mr-1">Quick Templates:</span>
- <button type="button" onclick="insertRuleSnippet('accept-default')" class="px-2 py-0.5 rounded text-[10px] bg-slate-800 hover:bg-slate-700 text-cyan-300 border border-slate-700">0.0.0.0/0</button>
- <button type="button" onclick="insertRuleSnippet('drop-rfc1918')" class="px-2 py-0.5 rounded text-[10px] bg-slate-800 hover:bg-slate-700 text-rose-300 border border-slate-700">Drop RFC1918</button>
- <button type="button" onclick="insertRuleSnippet('len-24')" class="px-2 py-0.5 rounded text-[10px] bg-slate-800 hover:bg-slate-700 text-amber-300 border border-slate-700">Len ≤ /24</button>
- <button type="button" onclick="insertRuleSnippet('local-pref-150')" class="px-2 py-0.5 rounded text-[10px] bg-slate-800 hover:bg-slate-700 text-emerald-300 border border-slate-700">Loc-Pref 150</button>
- <button type="button" onclick="insertRuleSnippet('as-prepend-2')" class="px-2 py-0.5 rounded text-[10px] bg-slate-800 hover:bg-slate-700 text-purple-300 border border-slate-700">AS-Prepend 2x</button>
- <button type="button" onclick="insertRuleSnippet('set-comm')" class="px-2 py-0.5 rounded text-[10px] bg-slate-800 hover:bg-slate-700 text-indigo-300 border border-slate-700">Add Comm</button>
- <button type="button" onclick="insertRuleSnippet('match-comm')" class="px-2 py-0.5 rounded text-[10px] bg-slate-800 hover:bg-slate-700 text-indigo-300 border border-slate-700">Match Comm</button>
- <button type="button" onclick="insertRuleSnippet('reject-all')" class="px-2 py-0.5 rounded text-[10px] bg-rose-950/60 hover:bg-rose-900 text-rose-300 border border-rose-900/50">Reject</button>
- </div>
- <textarea id="modal-rf-rule" rows="4" required placeholder="if (dst in 10.0.0.0/8 && dst-len >= 24) { reject; } if (dst in 10.0.0.0/8) { set bgp-local-pref 150; accept; }" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 text-emerald-400 font-mono text-xs focus:outline-none focus:border-emerald-500"></textarea>
- </div>
- <!-- Optional Visual Builder Collapsible Accordion -->
- <details class="bg-slate-950/40 border border-slate-800 rounded-xl p-3 group">
- <summary class="font-semibold text-slate-300 cursor-pointer flex items-center justify-between text-xs select-none">
- <span class="flex items-center gap-1.5 text-cyan-400">
- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
- </svg>
- <span>Visual Rule Wizard (Form Assistant)</span>
- </span>
- <span class="text-[10px] text-slate-500 group-open:rotate-180 transition-transform">▼</span>
- </summary>
- <div class="pt-3 space-y-3">
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block font-medium text-slate-400 mb-1">Prefix (CIDR)</label>
- <input type="text" id="modal-rf-prefix" placeholder="10.0.0.0/8" class="w-full bg-slate-800 border border-slate-700 rounded px-2.5 py-1.5 text-white font-mono">
- </div>
- <div>
- <label class="block font-medium text-slate-400 mb-1">Prefix Length (Range)</label>
- <input type="text" id="modal-rf-prefix-len" placeholder="24-32 or ge 24" class="w-full bg-slate-800 border border-slate-700 rounded px-2.5 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 gap-3">
- <div>
- <label class="block font-medium text-slate-400 mb-1">Protocol</label>
- <select id="modal-rf-protocol" class="w-full bg-slate-800 border border-slate-700 rounded px-2 py-1.5 text-white font-mono">
- <option value="any">any</option>
- <option value="bgp">bgp</option>
- <option value="ospf">ospf</option>
- <option value="connected">connected</option>
- <option value="static">static</option>
- </select>
- </div>
- <div>
- <label class="block font-medium text-slate-400 mb-1">AS-Path</label>
- <input type="text" id="modal-rf-as-path" placeholder="65000" class="w-full bg-slate-800 border border-slate-700 rounded px-2.5 py-1.5 text-white font-mono">
- </div>
- <div>
- <label class="block font-medium text-slate-400 mb-1">Community</label>
- <input type="text" id="modal-rf-community" placeholder="65000:100" class="w-full bg-slate-800 border border-slate-700 rounded px-2.5 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-3 gap-3">
- <div>
- <label class="block font-medium text-slate-400 mb-1">Action</label>
- <select id="modal-rf-action" class="w-full bg-slate-800 border border-slate-700 rounded px-2 py-1.5 text-white font-mono">
- <option value="accept">accept</option>
- <option value="reject">reject</option>
- </select>
- </div>
- <div>
- <label class="block font-medium text-slate-400 mb-1">Set Local-Pref</label>
- <input type="number" id="modal-rf-set-local-pref" placeholder="150" class="w-full bg-slate-800 border border-slate-700 rounded px-2.5 py-1.5 text-white font-mono">
- </div>
- <div>
- <label class="block font-medium text-slate-400 mb-1">Set Prepend</label>
- <input type="number" id="modal-rf-set-as-prepend" placeholder="2" class="w-full bg-slate-800 border border-slate-700 rounded px-2.5 py-1.5 text-white font-mono">
- </div>
- </div>
- <div class="flex justify-end">
- <button type="button" onclick="generateScriptFromWizard()" class="px-3 py-1 bg-cyan-600 hover:bg-cyan-500 text-white rounded font-semibold text-xs flex items-center gap-1">
- <span>Generate Script Expression ↑</span>
- </button>
- </div>
- </div>
- </details>
- <div class="grid grid-cols-3 gap-3">
- <div class="col-span-2">
- <label class="block font-semibold text-slate-300 mb-1">Comment</label>
- <input type="text" id="modal-rf-comment" placeholder="Filter customer routes" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="flex items-center pt-6">
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-rf-disabled" class="rounded text-emerald-600 bg-slate-800 border-slate-700">
- <span class="font-medium">Disabled (X)</span>
- </label>
- </div>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-2">
- <button type="button" onclick="closeRoutingFilterModal()" class="px-4 py-1.5 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="button" onclick="applyRoutingFilterForm()" class="px-4 py-1.5 rounded-lg font-semibold bg-slate-800 hover:bg-slate-700 text-emerald-300 border border-slate-700">Apply</button>
- <button type="submit" class="px-5 py-1.5 rounded-lg font-bold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: SELECT RULE ================= -->
- <div id="modal-rf-select-rule" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
- <div>
- <h3 id="modal-rf-sr-title" class="text-sm font-bold text-white">Routing Select Rule</h3>
- <p class="text-[11px] text-slate-400">Controls route preference and candidate selection</p>
- </div>
- <button onclick="closeSelectRuleModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSelectRule(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="modal-rf-sr-id">
- <div class="grid grid-cols-3 gap-3">
- <div class="col-span-2">
- <label class="block font-semibold text-slate-300 mb-1">Chain *</label>
- <input type="text" id="modal-rf-sr-chain" required placeholder="e.g. bgp-out" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Order *</label>
- <input type="number" id="modal-rf-sr-order" value="10" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Selection Rule Script *</label>
- <textarea id="modal-rf-sr-rule" rows="3" required placeholder="if (protocol bgp && dst in 10.0.0.0/8) { accept; }" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 text-emerald-400 font-mono text-xs focus:outline-none"></textarea>
- </div>
- <div class="grid grid-cols-3 gap-3">
- <div class="col-span-2">
- <label class="block font-semibold text-slate-300 mb-1">Comment</label>
- <input type="text" id="modal-rf-sr-comment" placeholder="Select rule note" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="flex items-center pt-6">
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-rf-sr-disabled" class="rounded text-emerald-600 bg-slate-800 border-slate-700">
- <span class="font-medium">Disabled (X)</span>
- </label>
- </div>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-2">
- <button type="button" onclick="closeSelectRuleModal()" class="px-4 py-1.5 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-1.5 rounded-lg font-bold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: COMMUNITY LIST ================= -->
- <div id="modal-rf-community-list" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
- <div>
- <h3 id="modal-rf-cl-title" class="text-sm font-bold text-white">BGP Community List</h3>
- <p class="text-[11px] text-slate-400">Named community sets for matching in filter rules</p>
- </div>
- <button onclick="closeCommunityListModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitCommunityList(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="modal-rf-cl-id">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">List Name *</label>
- <input type="text" id="modal-rf-cl-name" required placeholder="e.g. awmn-communities, blackhole" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Communities (comma-separated) *</label>
- <textarea id="modal-rf-cl-communities" rows="3" required placeholder="65000:100, 65000:200, no-export" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 text-cyan-300 font-mono text-xs"></textarea>
- <p class="text-[10px] text-slate-500 mt-1">Format: AS:value (e.g. 65000:100) or well-known keywords (no-export, blackhole)</p>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">RegExp (Optional)</label>
- <input type="text" id="modal-rf-cl-regexp" placeholder="e.g. ^65000:" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div class="grid grid-cols-3 gap-3">
- <div class="col-span-2">
- <label class="block font-semibold text-slate-300 mb-1">Comment</label>
- <input type="text" id="modal-rf-cl-comment" placeholder="Community list note" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="flex items-center pt-6">
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-rf-cl-disabled" class="rounded text-emerald-600 bg-slate-800 border-slate-700">
- <span class="font-medium">Disabled (X)</span>
- </label>
- </div>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-2">
- <button type="button" onclick="closeCommunityListModal()" class="px-4 py-1.5 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-1.5 rounded-lg font-bold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: AS LIST ================= -->
- <div id="modal-rf-as-list" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
- <div>
- <h3 id="modal-rf-al-title" class="text-sm font-bold text-white">AS Number List</h3>
- <p class="text-[11px] text-slate-400">Named AS numbers or numeric ranges for AS-Path matching</p>
- </div>
- <button onclick="closeASListModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitASList(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="modal-rf-al-id">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">List Name *</label>
- <input type="text" id="modal-rf-al-name" required placeholder="e.g. tier1-asns, my-peers" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Range / AS Numbers *</label>
- <input type="text" id="modal-rf-al-range" required placeholder="e.g. 65000-65010, 6610, 17244" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- <p class="text-[10px] text-slate-500 mt-1">Specify numeric range (e.g. 65000-65010) or comma-separated ASNs</p>
- </div>
- <div class="grid grid-cols-3 gap-3">
- <div class="col-span-2">
- <label class="block font-semibold text-slate-300 mb-1">Comment</label>
- <input type="text" id="modal-rf-al-comment" placeholder="AS list note" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="flex items-center pt-6">
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-rf-al-disabled" class="rounded text-emerald-600 bg-slate-800 border-slate-700">
- <span class="font-medium">Disabled (X)</span>
- </label>
- </div>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-2">
- <button type="button" onclick="closeASListModal()" class="px-4 py-1.5 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-1.5 rounded-lg font-bold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">OK</button>
- </div>
- </form>
- </div>
- </div>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT DHCP CLIENT ================= -->
- <div id="modal-dhcp-client" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div class="flex items-center gap-2">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-amber-500/20 text-amber-300 border border-amber-500/30 tracking-wide uppercase">DHCP Client</span>
- <h3 id="modal-dhcp-title" class="text-sm font-bold text-white">Add DHCP Client</h3>
- </div>
- <button onclick="closeDHCPClientModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveDHCPClient(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="modal-dhcp-id">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Interface *</label>
- <select id="modal-dhcp-iface" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-amber-500">
- <option value="">Select interface...</option>
- </select>
- <p class="text-[11px] text-slate-500 mt-1">Physical port, VLAN sub-interface, or Bridge to acquire dynamic lease on.</p>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Default Route Distance</label>
- <input type="number" id="modal-dhcp-distance" value="1" min="1" max="255" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-amber-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="modal-dhcp-comment" placeholder="e.g. ISP WAN DHCP" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-amber-500">
- </div>
- </div>
- <div class="bg-slate-950/60 border border-slate-800/80 rounded-xl p-3 space-y-2.5">
- <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Gateway & DNS Options</div>
-
- <label class="flex items-center space-x-2.5 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-dhcp-def-route" checked class="rounded text-amber-500 bg-slate-800 border-slate-700 focus:ring-amber-500">
- <span>Add Default Route (default gateway from DHCP)</span>
- </label>
- <label class="flex items-center space-x-2.5 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-dhcp-peer-dns" checked class="rounded text-amber-500 bg-slate-800 border-slate-700 focus:ring-amber-500">
- <span>Use Peer DNS (DNS servers from DHCP)</span>
- </label>
- <label class="flex items-center space-x-2.5 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-dhcp-peer-ntp" checked class="rounded text-amber-500 bg-slate-800 border-slate-700 focus:ring-amber-500">
- <span>Use Peer NTP (NTP servers from DHCP)</span>
- </label>
- <label class="flex items-center space-x-2.5 text-slate-300 cursor-pointer pt-1 border-t border-slate-800/80">
- <input type="checkbox" id="modal-dhcp-enabled" checked class="rounded text-emerald-500 bg-slate-800 border-slate-700 focus:ring-emerald-500">
- <span class="font-semibold text-white">Enable DHCP Client immediately</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeDHCPClientModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800 transition">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition">Save DHCP Client</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT DHCP SERVER INSTANCE ================= -->
- <div id="dhcp-server-instance-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div class="flex items-center gap-2">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 tracking-wide uppercase">Core Network Service</span>
- <h3 id="dhcp-server-modal-title" class="text-sm font-bold text-white">Add DHCP Server</h3>
- </div>
- <button onclick="closeDHCPServerModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveDHCPServer(event)" class="p-6 space-y-4 text-xs font-sans">
- <input type="hidden" id="dhcp-server-modal-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Name *</label>
- <input type="text" id="dhcp-server-modal-name" placeholder="dhcp1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Interface *</label>
- <select id="dhcp-server-modal-iface" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <option value="">Select interface...</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Assigned Network (Subnet) *</label>
- <select id="dhcp-server-modal-network" onchange="onDHCPServerNetworkChange()" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <option value="">Select network subnet...</option>
- </select>
- <span class="text-[10px] text-slate-400">Distributes Gateway, DNS, NTP & Options</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Address Pool (Range) *</label>
- <input type="text" id="dhcp-server-modal-pool" placeholder="192.168.88.10-192.168.88.254" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Format: startIP-endIP</span>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Lease Time</label>
- <input type="text" id="dhcp-server-modal-leasetime" value="12h" placeholder="12h, 1d, 30m" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Default: 12h</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="dhcp-server-modal-comment" placeholder="LAN Office Pool" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-emerald-500">
- </div>
- </div>
- <div class="flex items-center justify-between pt-2 border-t border-slate-800/80">
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="dhcp-server-modal-authoritative" checked class="rounded bg-slate-800 border-slate-700 text-emerald-600">
- <span>Authoritative Mode (Fast NAK for stale clients)</span>
- </label>
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="dhcp-server-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-600">
- <span>Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeDHCPServerModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">Save Server</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT DHCP NETWORK ================= -->
- <div id="dhcp-network-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-2xl shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div class="flex items-center gap-2">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 tracking-wide uppercase">Subnet Network</span>
- <h3 id="dhcp-network-modal-title" class="text-sm font-bold text-white">Add DHCP Network</h3>
- </div>
- <button onclick="closeDHCPNetworkModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveDHCPNetwork(event)" class="p-6 space-y-4 text-xs font-sans max-h-[80vh] overflow-y-auto">
- <input type="hidden" id="dhcp-network-modal-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Subnet Address (CIDR) *</label>
- <input type="text" id="dhcp-network-modal-address" placeholder="192.168.88.0/24" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Network address with CIDR mask</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Gateway (Router - Option 3) *</label>
- <input type="text" id="dhcp-network-modal-gateway" placeholder="192.168.88.1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Default gateway advertised to clients</span>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">DNS Servers (Option 6)</label>
- <input type="text" id="dhcp-network-modal-dns" placeholder="192.168.88.1, 1.1.1.1, 8.8.8.8" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Comma-separated list of DNS IPs</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Domain Name (Option 15)</label>
- <input type="text" id="dhcp-network-modal-domain" placeholder="lan or company.local" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Domain search suffix</span>
- </div>
- </div>
- <div class="p-3 bg-slate-950/60 border border-slate-800 rounded-xl space-y-3">
- <div class="text-[11px] font-bold text-emerald-400 uppercase tracking-wider flex items-center gap-1.5">
- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
- <span>Time & Network Boot Options (NTP & TFTP/PXE)</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">NTP Servers (Option 42)</label>
- <input type="text" id="dhcp-network-modal-ntp" placeholder="192.168.88.1, time.cloudflare.com, pool.ntp.org" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Comma-separated NTP time servers distributed to DHCP clients</span>
- </div>
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Next Server / TFTP Server (Option 66)</label>
- <input type="text" id="dhcp-network-modal-tftp" placeholder="192.168.88.50" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">TFTP server IP/host (siaddr / Next-Server)</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Boot File Name / PXE (Option 67)</label>
- <input type="text" id="dhcp-network-modal-bootfile" placeholder="pxelinux.0 or ipxe.efi" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Network bootstrap file (file / Bootfile)</span>
- </div>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">WINS Servers (Option 44)</label>
- <input type="text" id="dhcp-network-modal-wins" placeholder="192.168.88.50" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Netmask (Optional Override)</label>
- <input type="text" id="dhcp-network-modal-netmask" placeholder="255.255.255.0" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Linked Custom DHCP Options</label>
- <div id="dhcp-network-modal-options-list" class="grid grid-cols-2 gap-2 p-2 bg-slate-950/60 border border-slate-800 rounded-lg max-h-32 overflow-y-auto font-mono text-[11px]">
- <!-- Dynamically populated options checkboxes -->
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="dhcp-network-modal-comment" placeholder="Office LAN Subnet" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-emerald-500">
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeDHCPNetworkModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">Save Network</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT STATIC LEASE ================= -->
- <div id="dhcp-static-lease-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div class="flex items-center gap-2">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-purple-500/20 text-purple-300 border border-purple-500/30 tracking-wide uppercase">Static Lease</span>
- <h3 id="dhcp-static-lease-modal-title" class="text-sm font-bold text-white">Add Static Lease Reservation</h3>
- </div>
- <button onclick="closeDHCPStaticLeaseModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveDHCPStaticLease(event)" class="p-6 space-y-4 text-xs font-sans">
- <input type="hidden" id="dhcp-static-lease-modal-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">MAC Address *</label>
- <input type="text" id="dhcp-static-lease-modal-mac" placeholder="AA:BB:CC:DD:EE:FF" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-purple-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Reserved IP Address *</label>
- <input type="text" id="dhcp-static-lease-modal-ip" placeholder="192.168.88.100" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-purple-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Host Name</label>
- <input type="text" id="dhcp-static-lease-modal-hostname" placeholder="printer, nas, camera" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-purple-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Server</label>
- <input type="text" id="dhcp-static-lease-modal-server" value="all" placeholder="all or server name" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-purple-500">
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="dhcp-static-lease-modal-comment" placeholder="LaserJet Pro Printer" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-purple-500">
- </div>
- <div class="pt-2 border-t border-slate-800/80">
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="dhcp-static-lease-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-600">
- <span>Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeDHCPStaticLeaseModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20">Save Reservation</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT DHCP OPTION ================= -->
- <div id="dhcp-option-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div class="flex items-center gap-2">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 tracking-wide uppercase">DHCP Option</span>
- <h3 id="dhcp-option-modal-title" class="text-sm font-bold text-white">Add DHCP Option</h3>
- </div>
- <button onclick="closeDHCPOptionModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveDHCPOption(event)" class="p-6 space-y-4 text-xs font-sans">
- <input type="hidden" id="dhcp-option-modal-id">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Option Name *</label>
- <input type="text" id="dhcp-option-modal-name" placeholder="unifi-inform" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Option Code (1 - 254) *</label>
- <input type="number" id="dhcp-option-modal-code" min="1" max="254" placeholder="43" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
- <span class="text-[10px] text-slate-400">e.g. 42 (NTP), 43 (Vendor), 66 (TFTP), 67 (Bootfile), 121 (Routes), 150 (VoIP)</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Option Value *</label>
- <input type="text" id="dhcp-option-modal-value" placeholder="01:04:c0:a8:58:0a or 192.168.1.10" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
- <span class="text-[10px] text-slate-400">Format: IP address, comma-separated list, text in quotes, or raw colon-separated hex</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="dhcp-option-modal-comment" placeholder="UniFi Network Controller inform IP" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-cyan-500">
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeDHCPOptionModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20">Save Option</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: QUICK DHCP SETUP WIZARD ================= -->
- <div id="dhcp-setup-wizard-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div class="flex items-center gap-2">
- <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 font-semibold">DHCP Setup</span>
- <h3 class="text-sm font-bold text-white">DHCP Server Setup Wizard</h3>
- </div>
- <button onclick="closeDHCPServerSetupModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitDHCPServerSetupWizard(event)" class="p-6 space-y-4 text-xs font-sans">
- <p class="text-slate-400 text-xs">
- Select an interface to automatically configure an enterprise DHCP Server, network subnet, IP address pool, default gateway, and DNS.
- </p>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">DHCP Server Interface *</label>
- <select id="dhcp-wizard-iface" onchange="onDHCPWizardIfaceChange()" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <option value="">Select interface...</option>
- </select>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">DHCP Address Space</label>
- <input type="text" id="dhcp-wizard-space" placeholder="192.168.88.0/24" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Gateway for DHCP Network</label>
- <input type="text" id="dhcp-wizard-gateway" placeholder="192.168.88.1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Addresses to Give Out (Address Pool)</label>
- <input type="text" id="dhcp-wizard-pool" placeholder="192.168.88.10-192.168.88.254" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">DNS Servers</label>
- <input type="text" id="dhcp-wizard-dns" placeholder="192.168.88.1, 1.1.1.1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Lease Time</label>
- <input type="text" id="dhcp-wizard-leasetime" value="12h" placeholder="12h" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4 pt-1">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">NTP Server (Optional)</label>
- <input type="text" id="dhcp-wizard-ntp" placeholder="192.168.88.1" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">TFTP Server / PXE Boot (Optional)</label>
- <input type="text" id="dhcp-wizard-tftp" placeholder="192.168.88.50" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeDHCPServerSetupModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">Finish Setup</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT BRIDGE ================= -->
- <div id="bridge-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 id="bridge-modal-title" class="text-sm font-bold text-white">Add Bridge Interface</h3>
- <button onclick="closeBridgeModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveBridge(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="bridge-modal-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Bridge Name *</label>
- <input type="text" id="bridge-modal-name" required placeholder="e.g. bridge1" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">MTU</label>
- <input type="number" id="bridge-modal-mtu" value="1500" min="68" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Admin MAC Address (Optional)</label>
- <input type="text" id="bridge-modal-mac" placeholder="Leave blank for auto MAC" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">STP Protocol</label>
- <select id="bridge-modal-stp" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- <option value="rstp" selected>RSTP (Rapid STP - Recommended)</option>
- <option value="stp">STP (IEEE 802.1D)</option>
- <option value="none">none (Disable STP)</option>
- </select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">STP Priority</label>
- <input type="number" id="bridge-modal-priority" value="32768" min="0" max="65535" step="4096" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <!-- VLAN Filtering Box -->
- <div class="p-3.5 bg-slate-950/60 border border-slate-800 rounded-xl space-y-3">
- <label class="flex items-center space-x-2.5 cursor-pointer">
- <input type="checkbox" id="bridge-modal-vlanfiltering" onchange="toggleBridgeModalVlanFiltering()" class="rounded bg-slate-800 border-slate-700 text-sky-500">
- <span class="font-semibold text-white">VLAN Filtering (802.1Q Aware)</span>
- </label>
- <div id="bridge-modal-pvid-box" class="grid grid-cols-2 gap-3 pl-6">
- <div>
- <label class="block text-[11px] text-slate-400 mb-1">Default PVID</label>
- <input type="number" id="bridge-modal-pvid" value="1" min="1" max="4094" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-white font-mono text-xs">
- </div>
- <div class="flex items-center pt-4">
- <label class="flex items-center space-x-2 text-slate-400 cursor-pointer text-xs">
- <input type="checkbox" id="bridge-modal-fastforward" checked class="rounded bg-slate-800 border-slate-700 text-sky-500">
- <span>Fast Forward</span>
- </label>
- </div>
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="bridge-modal-comment" placeholder="e.g. LAN Bridge with EoIP" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="pt-1">
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="bridge-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
- <span class="font-medium text-slate-300">Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeBridgeModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-500/20">Save Bridge</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT BRIDGE PORT ================= -->
- <div id="bridge-port-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 id="bridge-port-modal-title" class="text-sm font-bold text-white">Add Port to Bridge</h3>
- <button onclick="closeBridgePortModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveBridgePort(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="bridge-port-modal-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Target Bridge *</label>
- <select id="bridge-port-modal-bridge" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Interface *</label>
- <select id="bridge-port-modal-interface" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
- </div>
- </div>
- <div class="grid grid-cols-3 gap-3">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">PVID</label>
- <input type="number" id="bridge-port-modal-pvid" value="1" min="1" max="4094" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Path Cost</label>
- <input type="number" id="bridge-port-modal-pathcost" value="10" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Horizon (Split)</label>
- <input type="number" id="bridge-port-modal-horizon" value="0" min="0" max="65535" title="0=none. Ports with identical horizon > 0 cannot communicate (split-horizon isolation for EoIP / VPLS)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Frame Types</label>
- <select id="bridge-port-modal-frametypes" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- <option value="admit-all" selected>admit all</option>
- <option value="admit-only-vlan-tagged">admit only VLAN tagged</option>
- <option value="admit-only-untagged-and-priority-tagged">admit only untagged</option>
- </select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Priority</label>
- <input type="number" id="bridge-port-modal-priority" value="128" min="0" max="240" step="16" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-3 p-3 bg-slate-950/60 border border-slate-800 rounded-xl">
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="bridge-port-modal-learn" checked class="rounded bg-slate-800 border-slate-700 text-sky-500">
- <span class="text-white font-semibold">MAC Learning</span>
- </label>
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="bridge-port-modal-ingressfiltering" class="rounded bg-slate-800 border-slate-700 text-sky-500">
- <span class="text-white font-semibold">Ingress Filtering</span>
- </label>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="bridge-port-modal-comment" placeholder="e.g. Uplink to switch" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="pt-1">
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="bridge-port-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
- <span class="font-medium text-slate-300">Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeBridgePortModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-500/20">Save Port</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT BRIDGE VLAN ================= -->
- <div id="bridge-vlan-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <h3 id="bridge-vlan-modal-title" class="text-sm font-bold text-white">Add Bridge VLAN Entry</h3>
- <button onclick="closeBridgeVlanModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveBridgeVLAN(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="bridge-vlan-modal-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Target Bridge *</label>
- <select id="bridge-vlan-modal-bridge" onchange="updateBridgeVlanPortCheckboxes()" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">VLAN IDs *</label>
- <input type="text" id="bridge-vlan-modal-vlanids" required placeholder="e.g. 10 or 10,20,30 or 10-20" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Tagged Member Ports (Trunk)</label>
- <div id="bridge-vlan-tagged-ports" class="max-h-36 overflow-y-auto p-2.5 bg-slate-950/60 border border-slate-800 rounded-xl space-y-1 font-mono text-slate-300">
- <span class="text-slate-500 text-xs font-sans">Select a bridge above to view member ports</span>
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Untagged Member Ports (Access)</label>
- <div id="bridge-vlan-untagged-ports" class="max-h-36 overflow-y-auto p-2.5 bg-slate-950/60 border border-slate-800 rounded-xl space-y-1 font-mono text-slate-300">
- <span class="text-slate-500 text-xs font-sans">Select a bridge above to view member ports</span>
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="bridge-vlan-modal-comment" placeholder="e.g. Office & Guest VLANs" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="pt-1">
- <label class="flex items-center space-x-2 cursor-pointer">
- <input type="checkbox" id="bridge-vlan-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
- <span class="font-medium text-slate-300">Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeBridgeVlanModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-500/20">Save VLAN Entry</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD IP ADDRESS TO BRIDGE ================= -->
- <div id="bridge-ip-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-sm shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div>
- <h3 class="text-sm font-bold text-white">Assign IP Address to Bridge</h3>
- <span id="bridge-ip-modal-sub" class="text-[11px] font-mono text-sky-400">bridge1</span>
- </div>
- <button onclick="closeBridgeIPModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitAddBridgeIP(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="bridge-ip-modal-id">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">IPv4 / Subnet (CIDR) *</label>
- <input type="text" id="bridge-ip-modal-cidr" required placeholder="e.g. 192.168.88.1/24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeBridgeIPModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-500/20">Assign IP</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT VRRP INSTANCE ================= -->
- <div id="modal-vrrp-instance" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
- <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
- <div class="flex items-center gap-2">
- <span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 tracking-wide uppercase">VRRP</span>
- <h3 id="modal-vrrp-title" class="text-sm font-bold text-white">Add VRRP Instance</h3>
- </div>
- <button onclick="closeVRRPModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveVRRP(event)" class="p-6 space-y-4 text-xs font-sans">
- <input type="hidden" id="modal-vrrp-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Instance Name *</label>
- <input type="text" id="modal-vrrp-name" placeholder="vrrp-lan" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Interface *</label>
- <select id="modal-vrrp-iface" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <option value="">Select interface...</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Virtual Router ID (VRID 1-255) *</label>
- <input type="number" id="modal-vrrp-vrid" min="1" max="255" value="10" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Must match on Master & Backup routers</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Priority (1-255) *</label>
- <input type="number" id="modal-vrrp-priority" min="1" max="255" value="100" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Higher priority wins Master (e.g. 200 vs 100)</span>
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Virtual IP Address (VIP) *</label>
- <input type="text" id="modal-vrrp-vip" placeholder="192.168.88.254/24" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <span class="text-[10px] text-slate-400">Shared gateway IP address handed over during failover (CIDR)</span>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Protocol Version</label>
- <select id="modal-vrrp-version" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <option value="3" selected>VRRPv3 (RFC 5798 - Recommended)</option>
- <option value="2">VRRPv2 (RFC 3768 - Legacy)</option>
- </select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Advertisement Interval (sec)</label>
- <input type="number" id="modal-vrrp-interval" min="1" max="255" value="1" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Authentication (Optional)</label>
- <select id="modal-vrrp-authtype" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- <option value="none" selected>None</option>
- <option value="pass">Simple Password (PASS)</option>
- </select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Auth Password</label>
- <input type="password" id="modal-vrrp-authpass" placeholder="Secret password" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="modal-vrrp-comment" placeholder="LAN Gateway High Availability" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-emerald-500">
- </div>
- <div class="flex items-center justify-between pt-2 border-t border-slate-800/80">
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-vrrp-preempt" checked class="rounded bg-slate-800 border-slate-700 text-emerald-600">
- <span>Preemption Mode (Master re-takes role when recovered)</span>
- </label>
- <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
- <input type="checkbox" id="modal-vrrp-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-600">
- <span>Disabled (X)</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeVRRPModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">Save VRRP</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: BANDWIDTH TEST SERVER SETTINGS ================= -->
- <div id="modal-bwtest-server" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center hidden p-4">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md overflow-hidden shadow-2xl">
- <div class="p-5 border-b border-slate-800 flex items-center justify-between">
- <h3 class="text-base font-bold text-white flex items-center gap-2">
- <span>⚙ Bandwidth Test Server Settings</span>
- </h3>
- <button type="button" onclick="closeBwTestServerModal()" class="text-slate-400 hover:text-white transition">✕</button>
- </div>
- <form onsubmit="submitBwTestServerSettings(event)" class="p-6 space-y-4">
- <div class="bg-slate-950/80 border border-slate-800/80 rounded-xl p-4 space-y-3">
- <label class="flex items-center justify-between cursor-pointer">
- <div>
- <span class="text-xs font-bold text-white block">Enable Bandwidth Test Server</span>
- <span class="text-[11px] text-slate-400 block mt-0.5">Allows remote routers and clients to run bandwidth tests against this appliance</span>
- </div>
- <input type="checkbox" id="bwtest-server-enable-toggle" checked class="w-4 h-4 rounded text-emerald-500 bg-slate-800 border-slate-700">
- </label>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Server Listen Port</label>
- <input type="number" id="bwtest-server-port-input" value="2000" min="1" max="65535" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-emerald-500">
- <p class="text-[10px] text-slate-500 mt-1">Default port is 2000 (binds TCP control channel and UDP data port).</p>
- </div>
- <div class="bg-slate-950/50 p-3 rounded-lg border border-slate-800/60 font-mono text-[11px] space-y-1 text-slate-400">
- <div class="flex justify-between"><span>Active Sessions:</span> <span id="bwtest-modal-active-sessions" class="text-white font-bold">0</span></div>
- <div class="flex justify-between"><span>Total Served:</span> <span id="bwtest-modal-total-served" class="text-white font-bold">0</span></div>
- <div class="flex justify-between"><span>Processed Data:</span> <span id="bwtest-modal-total-bytes" class="text-white font-bold">0 B</span></div>
- </div>
- <div class="flex justify-end gap-3 pt-3">
- <button type="button" onclick="closeBwTestServerModal()" class="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold transition">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold transition shadow-lg shadow-emerald-500/20">Save Settings</button>
- </div>
- </form>
- </div>
- </div>
- <datalist id="fw-addrlist-datalist"></datalist>
- <script src="app.js?v=13.0"></script>
- </body>
- </html>
|
