| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826482748284829483048314832483348344835483648374838483948404841484248434844484548464847484848494850485148524853485448554856485748584859486048614862486348644865486648674868486948704871487248734874487548764877487848794880488148824883488448854886488748884889489048914892489348944895489648974898489949004901490249034904490549064907490849094910491149124913491449154916491749184919492049214922492349244925492649274928492949304931493249334934493549364937493849394940494149424943494449454946494749484949495049514952495349544955495649574958495949604961496249634964496549664967496849694970497149724973497449754976497749784979498049814982498349844985498649874988498949904991499249934994499549964997499849995000500150025003500450055006500750085009501050115012501350145015501650175018501950205021502250235024502550265027502850295030503150325033503450355036503750385039504050415042504350445045504650475048504950505051505250535054505550565057505850595060506150625063506450655066506750685069507050715072507350745075507650775078507950805081508250835084508550865087508850895090509150925093509450955096509750985099510051015102510351045105510651075108510951105111511251135114511551165117511851195120512151225123512451255126512751285129513051315132513351345135513651375138513951405141514251435144514551465147514851495150515151525153515451555156515751585159516051615162516351645165516651675168516951705171517251735174517551765177517851795180518151825183518451855186518751885189519051915192519351945195519651975198519952005201520252035204520552065207520852095210521152125213521452155216521752185219522052215222522352245225522652275228522952305231523252335234523552365237523852395240524152425243524452455246524752485249525052515252525352545255525652575258525952605261526252635264526552665267526852695270527152725273527452755276527752785279528052815282528352845285528652875288528952905291529252935294529552965297529852995300530153025303530453055306530753085309531053115312531353145315531653175318531953205321532253235324532553265327532853295330533153325333533453355336533753385339534053415342534353445345534653475348534953505351535253535354535553565357535853595360536153625363536453655366536753685369537053715372537353745375537653775378537953805381538253835384538553865387538853895390539153925393539453955396539753985399540054015402540354045405540654075408540954105411541254135414541554165417541854195420542154225423542454255426542754285429543054315432543354345435543654375438543954405441544254435444544554465447544854495450545154525453545454555456545754585459546054615462546354645465546654675468546954705471547254735474547554765477547854795480548154825483548454855486548754885489549054915492549354945495549654975498549955005501550255035504550555065507550855095510551155125513551455155516551755185519552055215522552355245525552655275528552955305531553255335534553555365537553855395540554155425543554455455546554755485549555055515552555355545555555655575558555955605561556255635564556555665567556855695570557155725573557455755576557755785579558055815582558355845585558655875588558955905591559255935594559555965597559855995600560156025603560456055606560756085609561056115612561356145615561656175618561956205621562256235624562556265627562856295630563156325633563456355636563756385639564056415642564356445645564656475648564956505651565256535654565556565657565856595660566156625663566456655666566756685669567056715672567356745675567656775678567956805681568256835684568556865687568856895690569156925693569456955696569756985699570057015702570357045705570657075708570957105711571257135714571557165717571857195720572157225723572457255726572757285729573057315732573357345735573657375738573957405741574257435744574557465747574857495750575157525753575457555756575757585759576057615762576357645765576657675768576957705771577257735774577557765777577857795780578157825783578457855786578757885789579057915792579357945795579657975798579958005801580258035804580558065807580858095810581158125813581458155816581758185819582058215822582358245825582658275828582958305831583258335834583558365837583858395840584158425843584458455846584758485849585058515852585358545855585658575858585958605861586258635864586558665867586858695870587158725873587458755876587758785879588058815882588358845885588658875888588958905891589258935894589558965897589858995900590159025903590459055906590759085909591059115912591359145915591659175918591959205921592259235924592559265927592859295930593159325933593459355936593759385939594059415942594359445945594659475948594959505951595259535954595559565957595859595960596159625963596459655966596759685969597059715972597359745975597659775978597959805981598259835984598559865987598859895990599159925993599459955996599759985999600060016002600360046005600660076008600960106011601260136014601560166017601860196020602160226023602460256026602760286029603060316032603360346035603660376038603960406041604260436044604560466047604860496050605160526053605460556056605760586059606060616062606360646065606660676068606960706071607260736074607560766077607860796080608160826083608460856086608760886089609060916092609360946095609660976098609961006101610261036104610561066107610861096110611161126113611461156116611761186119612061216122612361246125612661276128612961306131613261336134613561366137613861396140614161426143614461456146614761486149615061516152615361546155615661576158615961606161616261636164616561666167616861696170617161726173617461756176617761786179618061816182618361846185618661876188618961906191619261936194619561966197619861996200620162026203620462056206620762086209621062116212621362146215621662176218621962206221622262236224622562266227622862296230623162326233623462356236623762386239624062416242624362446245624662476248624962506251625262536254625562566257625862596260626162626263626462656266626762686269627062716272627362746275627662776278627962806281628262836284628562866287628862896290629162926293629462956296629762986299630063016302630363046305630663076308630963106311631263136314631563166317631863196320632163226323632463256326632763286329633063316332633363346335633663376338633963406341634263436344634563466347634863496350635163526353635463556356635763586359636063616362636363646365636663676368636963706371637263736374637563766377637863796380638163826383638463856386638763886389639063916392639363946395639663976398639964006401640264036404640564066407640864096410641164126413641464156416641764186419642064216422642364246425642664276428642964306431643264336434643564366437643864396440644164426443644464456446644764486449645064516452645364546455645664576458645964606461646264636464646564666467646864696470647164726473647464756476647764786479648064816482648364846485648664876488648964906491649264936494649564966497649864996500650165026503650465056506650765086509651065116512651365146515651665176518651965206521652265236524652565266527652865296530653165326533653465356536653765386539654065416542654365446545654665476548654965506551655265536554655565566557655865596560656165626563656465656566656765686569657065716572657365746575657665776578657965806581658265836584658565866587658865896590659165926593659465956596659765986599660066016602660366046605660666076608660966106611661266136614661566166617661866196620662166226623662466256626662766286629663066316632663366346635663666376638663966406641664266436644664566466647664866496650665166526653665466556656665766586659666066616662666366646665666666676668666966706671667266736674667566766677667866796680668166826683668466856686668766886689669066916692669366946695669666976698669967006701670267036704670567066707670867096710671167126713671467156716671767186719672067216722672367246725672667276728672967306731673267336734673567366737673867396740674167426743674467456746674767486749675067516752675367546755675667576758675967606761676267636764676567666767676867696770677167726773677467756776677767786779678067816782678367846785678667876788678967906791679267936794679567966797679867996800680168026803680468056806680768086809681068116812681368146815681668176818681968206821682268236824682568266827682868296830683168326833683468356836683768386839684068416842684368446845684668476848684968506851685268536854685568566857685868596860686168626863686468656866686768686869687068716872687368746875687668776878687968806881688268836884688568866887688868896890689168926893689468956896689768986899690069016902690369046905690669076908690969106911691269136914691569166917691869196920692169226923692469256926692769286929693069316932693369346935693669376938693969406941694269436944694569466947694869496950695169526953695469556956695769586959696069616962696369646965696669676968696969706971697269736974697569766977697869796980698169826983698469856986698769886989699069916992699369946995699669976998699970007001700270037004700570067007700870097010701170127013701470157016701770187019702070217022702370247025702670277028702970307031703270337034703570367037703870397040704170427043704470457046704770487049705070517052705370547055705670577058705970607061706270637064706570667067706870697070707170727073707470757076707770787079708070817082708370847085708670877088708970907091709270937094709570967097709870997100710171027103710471057106710771087109711071117112711371147115711671177118711971207121712271237124712571267127712871297130713171327133713471357136713771387139714071417142714371447145714671477148714971507151715271537154715571567157715871597160716171627163716471657166716771687169717071717172717371747175717671777178717971807181718271837184718571867187718871897190719171927193719471957196719771987199720072017202720372047205720672077208720972107211721272137214721572167217721872197220722172227223722472257226722772287229723072317232723372347235723672377238723972407241724272437244724572467247724872497250725172527253725472557256725772587259726072617262726372647265726672677268726972707271727272737274727572767277727872797280728172827283728472857286728772887289729072917292729372947295729672977298729973007301730273037304730573067307730873097310731173127313731473157316731773187319732073217322732373247325732673277328732973307331733273337334733573367337733873397340734173427343734473457346734773487349735073517352735373547355735673577358735973607361736273637364736573667367736873697370737173727373737473757376737773787379738073817382738373847385738673877388738973907391739273937394739573967397739873997400740174027403740474057406740774087409741074117412741374147415741674177418741974207421742274237424742574267427742874297430743174327433743474357436743774387439744074417442744374447445744674477448744974507451745274537454745574567457745874597460746174627463746474657466746774687469747074717472747374747475747674777478747974807481748274837484748574867487748874897490749174927493749474957496749774987499750075017502750375047505750675077508750975107511751275137514751575167517751875197520752175227523752475257526752775287529753075317532753375347535753675377538753975407541754275437544754575467547754875497550755175527553755475557556755775587559756075617562756375647565756675677568756975707571757275737574757575767577757875797580758175827583758475857586758775887589759075917592759375947595759675977598759976007601760276037604760576067607760876097610761176127613761476157616761776187619762076217622762376247625762676277628762976307631763276337634763576367637763876397640764176427643764476457646764776487649765076517652765376547655765676577658765976607661766276637664766576667667766876697670767176727673767476757676767776787679768076817682768376847685768676877688768976907691769276937694769576967697769876997700770177027703770477057706770777087709771077117712771377147715771677177718771977207721772277237724772577267727772877297730773177327733773477357736773777387739774077417742774377447745774677477748774977507751775277537754775577567757775877597760776177627763776477657766776777687769777077717772777377747775777677777778777977807781778277837784778577867787778877897790779177927793779477957796779777987799780078017802780378047805780678077808780978107811781278137814781578167817781878197820782178227823782478257826782778287829783078317832783378347835783678377838783978407841784278437844784578467847784878497850785178527853785478557856785778587859786078617862786378647865786678677868786978707871787278737874787578767877787878797880788178827883788478857886788778887889789078917892789378947895789678977898789979007901790279037904790579067907790879097910791179127913791479157916791779187919792079217922792379247925792679277928792979307931793279337934793579367937793879397940794179427943794479457946794779487949795079517952795379547955795679577958795979607961796279637964796579667967796879697970797179727973797479757976797779787979798079817982798379847985798679877988798979907991799279937994799579967997799879998000800180028003800480058006800780088009801080118012801380148015801680178018801980208021802280238024802580268027802880298030803180328033803480358036803780388039804080418042804380448045804680478048804980508051805280538054805580568057805880598060806180628063806480658066806780688069807080718072807380748075807680778078807980808081808280838084808580868087808880898090809180928093809480958096809780988099810081018102810381048105810681078108810981108111811281138114811581168117811881198120812181228123812481258126812781288129813081318132813381348135813681378138813981408141814281438144814581468147814881498150815181528153815481558156815781588159816081618162816381648165816681678168816981708171817281738174817581768177817881798180818181828183818481858186818781888189819081918192819381948195819681978198819982008201820282038204820582068207820882098210821182128213821482158216821782188219822082218222822382248225822682278228822982308231823282338234823582368237823882398240824182428243824482458246824782488249825082518252825382548255825682578258825982608261826282638264826582668267826882698270827182728273827482758276827782788279828082818282828382848285828682878288828982908291829282938294829582968297829882998300830183028303830483058306830783088309831083118312831383148315831683178318831983208321832283238324832583268327832883298330833183328333833483358336833783388339834083418342834383448345834683478348834983508351835283538354835583568357835883598360836183628363836483658366836783688369837083718372837383748375837683778378837983808381838283838384838583868387838883898390839183928393839483958396839783988399840084018402840384048405840684078408840984108411841284138414841584168417841884198420842184228423842484258426842784288429843084318432843384348435843684378438843984408441844284438444844584468447844884498450845184528453845484558456845784588459846084618462846384648465846684678468846984708471847284738474847584768477847884798480848184828483848484858486848784888489849084918492849384948495849684978498849985008501850285038504850585068507850885098510851185128513851485158516851785188519852085218522852385248525852685278528852985308531853285338534853585368537853885398540854185428543854485458546854785488549855085518552855385548555855685578558855985608561856285638564856585668567856885698570857185728573857485758576857785788579858085818582858385848585858685878588858985908591859285938594859585968597859885998600860186028603860486058606860786088609861086118612861386148615861686178618861986208621862286238624862586268627862886298630863186328633863486358636863786388639864086418642864386448645864686478648864986508651865286538654865586568657865886598660866186628663866486658666866786688669867086718672867386748675867686778678867986808681868286838684868586868687868886898690869186928693869486958696869786988699870087018702870387048705870687078708870987108711871287138714871587168717871887198720872187228723872487258726872787288729873087318732873387348735873687378738873987408741874287438744874587468747874887498750875187528753875487558756875787588759876087618762876387648765876687678768876987708771877287738774877587768777877887798780878187828783878487858786878787888789879087918792879387948795879687978798879988008801880288038804880588068807880888098810881188128813881488158816881788188819882088218822882388248825882688278828882988308831883288338834883588368837883888398840884188428843884488458846884788488849885088518852885388548855885688578858885988608861886288638864886588668867886888698870887188728873887488758876887788788879888088818882888388848885888688878888888988908891889288938894889588968897889888998900890189028903890489058906890789088909891089118912891389148915891689178918891989208921892289238924892589268927892889298930893189328933893489358936893789388939894089418942894389448945894689478948894989508951895289538954895589568957895889598960896189628963896489658966896789688969897089718972897389748975897689778978897989808981898289838984898589868987898889898990899189928993899489958996899789988999900090019002900390049005900690079008900990109011901290139014901590169017901890199020902190229023902490259026902790289029903090319032903390349035903690379038903990409041904290439044904590469047904890499050905190529053905490559056905790589059906090619062906390649065906690679068906990709071907290739074907590769077907890799080908190829083908490859086908790889089909090919092909390949095909690979098909991009101910291039104910591069107910891099110911191129113911491159116911791189119912091219122912391249125912691279128912991309131913291339134913591369137913891399140914191429143914491459146914791489149915091519152915391549155915691579158915991609161916291639164916591669167916891699170917191729173917491759176917791789179918091819182918391849185918691879188918991909191919291939194919591969197919891999200920192029203920492059206920792089209921092119212921392149215921692179218921992209221922292239224922592269227922892299230923192329233923492359236923792389239924092419242924392449245924692479248924992509251925292539254925592569257925892599260926192629263926492659266926792689269927092719272927392749275927692779278927992809281928292839284928592869287928892899290929192929293929492959296929792989299930093019302930393049305930693079308930993109311931293139314931593169317931893199320932193229323932493259326932793289329933093319332933393349335933693379338933993409341934293439344934593469347934893499350935193529353935493559356935793589359936093619362936393649365936693679368936993709371937293739374937593769377937893799380938193829383938493859386938793889389939093919392939393949395939693979398939994009401940294039404940594069407940894099410941194129413941494159416941794189419942094219422942394249425942694279428942994309431943294339434943594369437943894399440944194429443944494459446944794489449945094519452945394549455945694579458945994609461946294639464946594669467946894699470947194729473947494759476947794789479948094819482948394849485948694879488948994909491949294939494949594969497949894999500950195029503950495059506950795089509951095119512951395149515951695179518951995209521952295239524952595269527952895299530953195329533953495359536953795389539954095419542954395449545954695479548954995509551955295539554955595569557955895599560956195629563956495659566956795689569957095719572957395749575957695779578957995809581958295839584958595869587958895899590959195929593959495959596959795989599960096019602960396049605960696079608960996109611961296139614961596169617961896199620962196229623962496259626962796289629963096319632963396349635963696379638963996409641964296439644964596469647964896499650965196529653965496559656965796589659966096619662966396649665966696679668966996709671967296739674967596769677967896799680968196829683968496859686968796889689969096919692969396949695969696979698969997009701970297039704970597069707970897099710971197129713971497159716971797189719972097219722972397249725972697279728972997309731973297339734973597369737973897399740974197429743974497459746974797489749975097519752975397549755975697579758975997609761976297639764976597669767976897699770977197729773977497759776977797789779978097819782978397849785978697879788978997909791979297939794979597969797979897999800980198029803980498059806980798089809981098119812981398149815981698179818981998209821982298239824982598269827982898299830983198329833983498359836983798389839984098419842984398449845984698479848984998509851985298539854985598569857985898599860986198629863986498659866986798689869987098719872987398749875987698779878987998809881988298839884988598869887988898899890989198929893989498959896989798989899990099019902990399049905990699079908990999109911991299139914991599169917991899199920992199229923992499259926992799289929993099319932993399349935993699379938993999409941994299439944994599469947994899499950995199529953995499559956995799589959996099619962996399649965996699679968996999709971997299739974997599769977997899799980998199829983998499859986998799889989999099919992999399949995999699979998999910000100011000210003100041000510006100071000810009100101001110012100131001410015100161001710018100191002010021100221002310024100251002610027100281002910030100311003210033100341003510036100371003810039100401004110042100431004410045100461004710048100491005010051100521005310054100551005610057100581005910060100611006210063100641006510066100671006810069100701007110072100731007410075100761007710078100791008010081100821008310084100851008610087100881008910090100911009210093100941009510096100971009810099101001010110102101031010410105101061010710108101091011010111101121011310114101151011610117101181011910120101211012210123101241012510126101271012810129101301013110132101331013410135101361013710138101391014010141101421014310144101451014610147101481014910150101511015210153101541015510156101571015810159101601016110162101631016410165101661016710168101691017010171101721017310174101751017610177101781017910180101811018210183101841018510186101871018810189101901019110192101931019410195101961019710198101991020010201102021020310204102051020610207102081020910210102111021210213102141021510216102171021810219102201022110222102231022410225102261022710228102291023010231102321023310234102351023610237102381023910240102411024210243102441024510246102471024810249102501025110252102531025410255102561025710258102591026010261102621026310264102651026610267102681026910270102711027210273102741027510276102771027810279102801028110282102831028410285102861028710288102891029010291102921029310294102951029610297102981029910300103011030210303103041030510306103071030810309103101031110312103131031410315103161031710318103191032010321103221032310324103251032610327103281032910330103311033210333103341033510336103371033810339103401034110342103431034410345103461034710348103491035010351103521035310354103551035610357103581035910360103611036210363103641036510366103671036810369103701037110372103731037410375103761037710378103791038010381103821038310384103851038610387103881038910390103911039210393103941039510396103971039810399104001040110402104031040410405104061040710408104091041010411104121041310414104151041610417104181041910420104211042210423104241042510426104271042810429104301043110432104331043410435104361043710438104391044010441104421044310444104451044610447104481044910450104511045210453104541045510456104571045810459104601046110462104631046410465104661046710468104691047010471104721047310474104751047610477104781047910480104811048210483104841048510486104871048810489104901049110492104931049410495104961049710498104991050010501105021050310504105051050610507105081050910510105111051210513105141051510516105171051810519105201052110522105231052410525105261052710528105291053010531105321053310534105351053610537105381053910540105411054210543105441054510546105471054810549105501055110552105531055410555105561055710558105591056010561105621056310564105651056610567105681056910570105711057210573105741057510576105771057810579105801058110582105831058410585105861058710588105891059010591105921059310594105951059610597105981059910600106011060210603106041060510606106071060810609106101061110612106131061410615106161061710618106191062010621106221062310624106251062610627106281062910630106311063210633106341063510636106371063810639106401064110642106431064410645106461064710648106491065010651106521065310654106551065610657106581065910660106611066210663106641066510666106671066810669106701067110672106731067410675106761067710678106791068010681106821068310684106851068610687106881068910690106911069210693106941069510696106971069810699107001070110702107031070410705107061070710708107091071010711107121071310714107151071610717107181071910720107211072210723107241072510726107271072810729107301073110732107331073410735107361073710738107391074010741107421074310744107451074610747107481074910750107511075210753107541075510756107571075810759107601076110762107631076410765107661076710768107691077010771107721077310774107751077610777107781077910780107811078210783107841078510786107871078810789107901079110792107931079410795107961079710798107991080010801108021080310804108051080610807108081080910810108111081210813108141081510816108171081810819108201082110822108231082410825108261082710828108291083010831108321083310834108351083610837108381083910840108411084210843108441084510846108471084810849108501085110852108531085410855108561085710858108591086010861108621086310864108651086610867108681086910870108711087210873108741087510876108771087810879108801088110882108831088410885108861088710888108891089010891108921089310894108951089610897108981089910900109011090210903109041090510906109071090810909109101091110912109131091410915109161091710918109191092010921109221092310924109251092610927109281092910930109311093210933109341093510936109371093810939109401094110942109431094410945109461094710948109491095010951109521095310954109551095610957109581095910960109611096210963109641096510966109671096810969109701097110972109731097410975109761097710978109791098010981109821098310984109851098610987109881098910990109911099210993109941099510996109971099810999110001100111002110031100411005110061100711008110091101011011110121101311014110151101611017110181101911020110211102211023110241102511026110271102811029110301103111032110331103411035110361103711038110391104011041110421104311044110451104611047110481104911050110511105211053110541105511056110571105811059110601106111062110631106411065110661106711068110691107011071110721107311074110751107611077110781107911080110811108211083110841108511086110871108811089110901109111092110931109411095110961109711098110991110011101111021110311104111051110611107111081110911110111111111211113111141111511116111171111811119111201112111122111231112411125111261112711128111291113011131111321113311134111351113611137111381113911140111411114211143111441114511146111471114811149111501115111152111531115411155111561115711158111591116011161111621116311164111651116611167111681116911170111711117211173111741117511176111771117811179111801118111182111831118411185111861118711188111891119011191111921119311194111951119611197111981119911200112011120211203112041120511206112071120811209112101121111212112131121411215112161121711218112191122011221112221122311224112251122611227112281122911230112311123211233112341123511236112371123811239112401124111242112431124411245112461124711248112491125011251112521125311254112551125611257112581125911260112611126211263112641126511266112671126811269112701127111272112731127411275112761127711278112791128011281112821128311284112851128611287112881128911290112911129211293112941129511296112971129811299113001130111302113031130411305113061130711308113091131011311113121131311314113151131611317113181131911320113211132211323113241132511326113271132811329113301133111332113331133411335113361133711338113391134011341113421134311344113451134611347113481134911350113511135211353113541135511356113571135811359113601136111362113631136411365113661136711368113691137011371113721137311374113751137611377113781137911380113811138211383113841138511386113871138811389113901139111392113931139411395113961139711398113991140011401114021140311404114051140611407114081140911410114111141211413114141141511416114171141811419114201142111422114231142411425114261142711428114291143011431114321143311434114351143611437114381143911440114411144211443114441144511446114471144811449114501145111452114531145411455114561145711458114591146011461114621146311464114651146611467114681146911470114711147211473114741147511476114771147811479114801148111482114831148411485114861148711488114891149011491114921149311494114951149611497114981149911500115011150211503115041150511506115071150811509115101151111512115131151411515115161151711518115191152011521115221152311524115251152611527115281152911530115311153211533115341153511536115371153811539115401154111542115431154411545115461154711548115491155011551115521155311554115551155611557115581155911560115611156211563115641156511566115671156811569115701157111572115731157411575115761157711578115791158011581115821158311584115851158611587115881158911590115911159211593115941159511596115971159811599116001160111602116031160411605116061160711608116091161011611116121161311614116151161611617116181161911620116211162211623116241162511626116271162811629116301163111632116331163411635116361163711638116391164011641116421164311644116451164611647116481164911650116511165211653116541165511656116571165811659116601166111662116631166411665116661166711668116691167011671116721167311674116751167611677116781167911680116811168211683116841168511686116871168811689116901169111692116931169411695116961169711698116991170011701117021170311704117051170611707117081170911710117111171211713117141171511716117171171811719117201172111722117231172411725117261172711728117291173011731117321173311734117351173611737117381173911740117411174211743117441174511746117471174811749117501175111752117531175411755117561175711758117591176011761117621176311764117651176611767117681176911770117711177211773117741177511776117771177811779117801178111782117831178411785117861178711788117891179011791117921179311794117951179611797117981179911800118011180211803118041180511806118071180811809118101181111812118131181411815118161181711818118191182011821118221182311824118251182611827118281182911830118311183211833118341183511836118371183811839118401184111842118431184411845118461184711848118491185011851118521185311854118551185611857118581185911860118611186211863118641186511866118671186811869118701187111872118731187411875118761187711878118791188011881118821188311884118851188611887118881188911890118911189211893118941189511896118971189811899119001190111902119031190411905119061190711908119091191011911119121191311914119151191611917119181191911920119211192211923119241192511926119271192811929119301193111932119331193411935119361193711938119391194011941119421194311944119451194611947119481194911950119511195211953119541195511956119571195811959119601196111962119631196411965119661196711968119691197011971119721197311974119751197611977119781197911980119811198211983119841198511986119871198811989119901199111992119931199411995119961199711998119991200012001120021200312004120051200612007120081200912010120111201212013120141201512016120171201812019120201202112022120231202412025120261202712028120291203012031120321203312034120351203612037120381203912040120411204212043120441204512046120471204812049120501205112052120531205412055120561205712058120591206012061120621206312064120651206612067120681206912070120711207212073120741207512076120771207812079120801208112082120831208412085120861208712088120891209012091120921209312094120951209612097120981209912100121011210212103121041210512106121071210812109121101211112112121131211412115121161211712118121191212012121121221212312124121251212612127121281212912130121311213212133121341213512136121371213812139121401214112142121431214412145121461214712148121491215012151121521215312154121551215612157121581215912160121611216212163121641216512166121671216812169121701217112172121731217412175121761217712178121791218012181121821218312184121851218612187121881218912190121911219212193121941219512196121971219812199122001220112202122031220412205122061220712208122091221012211122121221312214122151221612217122181221912220122211222212223122241222512226122271222812229122301223112232122331223412235122361223712238122391224012241122421224312244122451224612247122481224912250122511225212253122541225512256122571225812259122601226112262122631226412265122661226712268122691227012271122721227312274122751227612277122781227912280122811228212283122841228512286122871228812289122901229112292122931229412295122961229712298122991230012301123021230312304123051230612307123081230912310123111231212313123141231512316123171231812319123201232112322123231232412325123261232712328123291233012331123321233312334123351233612337123381233912340123411234212343123441234512346123471234812349123501235112352123531235412355123561235712358123591236012361123621236312364123651236612367123681236912370123711237212373123741237512376123771237812379123801238112382123831238412385123861238712388123891239012391123921239312394123951239612397123981239912400124011240212403124041240512406124071240812409124101241112412124131241412415124161241712418124191242012421124221242312424124251242612427124281242912430124311243212433124341243512436124371243812439124401244112442124431244412445124461244712448124491245012451124521245312454124551245612457124581245912460124611246212463124641246512466124671246812469124701247112472124731247412475124761247712478124791248012481124821248312484124851248612487124881248912490124911249212493124941249512496124971249812499125001250112502125031250412505125061250712508125091251012511125121251312514125151251612517125181251912520125211252212523125241252512526125271252812529125301253112532125331253412535125361253712538125391254012541125421254312544125451254612547125481254912550125511255212553125541255512556125571255812559125601256112562125631256412565125661256712568125691257012571125721257312574125751257612577125781257912580125811258212583125841258512586125871258812589125901259112592125931259412595125961259712598125991260012601126021260312604126051260612607126081260912610126111261212613126141261512616126171261812619126201262112622126231262412625126261262712628126291263012631126321263312634126351263612637126381263912640126411264212643126441264512646126471264812649126501265112652126531265412655126561265712658126591266012661126621266312664126651266612667126681266912670126711267212673126741267512676126771267812679126801268112682126831268412685126861268712688126891269012691126921269312694126951269612697126981269912700127011270212703127041270512706127071270812709127101271112712127131271412715127161271712718127191272012721127221272312724127251272612727127281272912730127311273212733127341273512736127371273812739127401274112742127431274412745127461274712748127491275012751127521275312754127551275612757127581275912760127611276212763127641276512766127671276812769127701277112772127731277412775127761277712778127791278012781127821278312784127851278612787127881278912790127911279212793127941279512796127971279812799128001280112802128031280412805128061280712808128091281012811128121281312814128151281612817128181281912820128211282212823128241282512826128271282812829128301283112832128331283412835128361283712838128391284012841128421284312844128451284612847128481284912850128511285212853128541285512856128571285812859128601286112862128631286412865128661286712868128691287012871128721287312874128751287612877128781287912880128811288212883128841288512886128871288812889128901289112892128931289412895128961289712898128991290012901129021290312904129051290612907129081290912910129111291212913129141291512916129171291812919129201292112922129231292412925129261292712928129291293012931129321293312934129351293612937129381293912940129411294212943129441294512946129471294812949129501295112952129531295412955129561295712958129591296012961129621296312964129651296612967129681296912970129711297212973129741297512976129771297812979129801298112982129831298412985129861298712988129891299012991129921299312994129951299612997129981299913000130011300213003130041300513006130071300813009130101301113012130131301413015130161301713018130191302013021130221302313024130251302613027130281302913030130311303213033130341303513036130371303813039130401304113042130431304413045130461304713048130491305013051130521305313054130551305613057130581305913060130611306213063130641306513066130671306813069130701307113072130731307413075130761307713078130791308013081130821308313084130851308613087130881308913090130911309213093130941309513096130971309813099131001310113102131031310413105131061310713108131091311013111131121311313114131151311613117131181311913120131211312213123131241312513126131271312813129131301313113132131331313413135131361313713138131391314013141131421314313144131451314613147131481314913150131511315213153131541315513156131571315813159131601316113162131631316413165131661316713168131691317013171131721317313174131751317613177131781317913180131811318213183131841318513186131871318813189131901319113192131931319413195131961319713198131991320013201132021320313204132051320613207132081320913210132111321213213132141321513216132171321813219132201322113222132231322413225132261322713228132291323013231132321323313234132351323613237132381323913240132411324213243132441324513246132471324813249132501325113252132531325413255132561325713258132591326013261132621326313264132651326613267132681326913270132711327213273132741327513276132771327813279132801328113282132831328413285132861328713288132891329013291132921329313294132951329613297132981329913300133011330213303133041330513306133071330813309133101331113312133131331413315133161331713318133191332013321133221332313324133251332613327133281332913330133311333213333133341333513336133371333813339133401334113342133431334413345133461334713348133491335013351133521335313354133551335613357133581335913360133611336213363133641336513366133671336813369133701337113372133731337413375133761337713378133791338013381133821338313384133851338613387133881338913390133911339213393133941339513396133971339813399134001340113402134031340413405134061340713408134091341013411134121341313414134151341613417134181341913420134211342213423134241342513426134271342813429134301343113432134331343413435134361343713438134391344013441134421344313444134451344613447134481344913450134511345213453134541345513456134571345813459134601346113462134631346413465134661346713468134691347013471134721347313474134751347613477134781347913480134811348213483134841348513486134871348813489134901349113492134931349413495134961349713498134991350013501135021350313504135051350613507135081350913510135111351213513135141351513516135171351813519135201352113522135231352413525135261352713528135291353013531135321353313534135351353613537135381353913540135411354213543135441354513546135471354813549135501355113552135531355413555135561355713558135591356013561135621356313564135651356613567135681356913570135711357213573135741357513576135771357813579135801358113582135831358413585135861358713588135891359013591135921359313594135951359613597135981359913600136011360213603136041360513606136071360813609 |
- <!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="tailwind.js"></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>
- <!-- Full-Screen Login Screen Overlay -->
- <div id="login-screen" class="fixed inset-0 z-[100] bg-[#0b101e] flex items-center justify-center p-4">
- <div class="w-full max-w-md bg-slate-900/95 border border-slate-800 rounded-2xl shadow-2xl p-8 relative overflow-hidden backdrop-blur-xl">
- <!-- Ambient Glows -->
- <div class="absolute -top-20 -right-20 w-52 h-52 bg-rose-500/10 rounded-full blur-3xl pointer-events-none"></div>
- <div class="absolute -bottom-20 -left-20 w-52 h-52 bg-cyan-500/10 rounded-full blur-3xl pointer-events-none"></div>
- <!-- Brand Header -->
- <div class="text-center mb-6 relative z-10">
- <div class="inline-flex items-center justify-center p-3 rounded-2xl bg-slate-950/80 border border-slate-800 shadow-xl mb-3">
- <img src="debtik-emblem.svg" alt="DebTik" class="w-12 h-12 object-contain" />
- </div>
- <h2 class="text-2xl font-black text-white tracking-tight flex items-center justify-center gap-2">
- <span>Deb<span class="text-rose-500">T</span><span class="text-sky-400">ik</span></span>
- <span class="text-[10px] bg-rose-500/20 text-rose-300 font-mono px-2 py-0.5 rounded border border-rose-500/30 font-bold uppercase tracking-wider">Gateway</span>
- </h2>
- <p class="text-xs text-slate-400 mt-1 font-sans">Appliance Controller & Network Gateway</p>
- </div>
- <!-- Login Form -->
- <form id="login-form" onsubmit="handleLoginSubmit(event)" class="space-y-4 relative z-10">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5 font-sans">Username</label>
- <div class="relative">
- <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-500">
- <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
- </span>
- <input type="text" id="login-username" required autocomplete="username" autofocus
- placeholder="e.g. admin" value="admin"
- class="w-full bg-slate-950 border border-slate-800 rounded-xl pl-10 pr-3 py-2.5 text-white font-mono text-sm focus:outline-none focus:border-cyan-500 transition shadow-inner" />
- </div>
- </div>
- <div>
- <div class="flex items-center justify-between mb-1.5">
- <label class="block text-xs font-semibold text-slate-300 font-sans">Password</label>
- <span class="text-[10px] text-slate-500 font-mono">Default: admin / admin</span>
- </div>
- <div class="relative">
- <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-500">
- <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>
- </span>
- <input type="password" id="login-password" required autocomplete="current-password"
- placeholder="••••••••"
- class="w-full bg-slate-950 border border-slate-800 rounded-xl pl-10 pr-10 py-2.5 text-white font-mono text-sm focus:outline-none focus:border-cyan-500 transition shadow-inner" />
- <button type="button" onclick="togglePasswordVisibility('login-password')" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-500 hover:text-slate-300">
- <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 id="login-error" class="hidden p-3 rounded-xl bg-rose-500/10 border border-rose-500/30 text-rose-300 text-xs flex items-center gap-2">
- <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
- <span id="login-error-text">Invalid username or password</span>
- </div>
- <button type="submit" id="login-submit-btn"
- class="w-full py-2.5 px-4 rounded-xl bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-400 hover:to-cyan-400 text-slate-950 font-bold text-sm shadow-lg shadow-emerald-500/20 hover:shadow-cyan-500/30 transition flex items-center justify-center gap-2 cursor-pointer mt-2">
- <span id="login-btn-text">Sign In to Controller</span>
- <svg id="login-btn-spinner" class="hidden animate-spin w-4 h-4 text-slate-950" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
- </button>
- </form>
-
- <div class="mt-6 pt-4 border-t border-slate-800/80 text-center text-[11px] text-slate-500 relative z-10 flex items-center justify-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="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>Protected appliance system • Authorized access only</span>
- </div>
- </div>
- </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="#sdwan" onclick="navigate('sdwan')" id="nav-sdwan"
- 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>SD-WAN</span>
- </div>
- <span id="badge-sdwan-count" class="text-[10px] bg-amber-950 text-amber-400 border border-amber-800/50 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="#rip" onclick="navigate('rip')" id="nav-rip"
- 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="M13 10V3L4 14h7v7l9-11h-7z" />
- </svg>
- <span>RIP Routing</span>
- </div>
- <div class="flex items-center gap-1.5">
- <span id="badge-rip-dot" class="w-2 h-2 rounded-full bg-slate-600" title="RIP Status"></span>
- <span id="badge-rip-count" class="text-[10px] bg-rose-950 text-rose-300 border border-rose-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </div>
- </a>
- <a href="#bfd" onclick="navigate('bfd')" id="nav-bfd"
- 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
- </svg>
- <span>BFD Sessions</span>
- </div>
- <div class="flex items-center gap-1.5">
- <span id="badge-bfd-dot" class="w-2 h-2 rounded-full bg-slate-600" title="BFD Status"></span>
- <span id="badge-bfd-count" class="text-[10px] bg-amber-950 text-amber-300 border border-amber-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </div>
- </a>
- <a href="#babel" onclick="navigate('babel')" id="nav-babel"
- 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-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
- </svg>
- <span>Babel Routing</span>
- </div>
- <div class="flex items-center gap-1.5">
- <span id="badge-babel-dot" class="w-2 h-2 rounded-full bg-slate-600" title="Babel Status"></span>
- <span id="badge-babel-count" class="text-[10px] bg-teal-950 text-teal-300 border border-teal-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </div>
- </a>
- <a href="#radv" onclick="navigate('radv')" id="nav-radv"
- 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-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
- </svg>
- <span>IPv6 RAdv</span>
- </div>
- <div class="flex items-center gap-1.5">
- <span id="badge-radv-dot" class="w-2 h-2 rounded-full bg-slate-600" title="RAdv Status"></span>
- <span id="badge-radv-count" class="text-[10px] bg-blue-950 text-blue-300 border border-blue-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="#vxlan" onclick="navigate('vxlan')" id="nav-vxlan"
- 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="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>VXLAN Tunnels</span>
- </div>
- <span id="badge-vxlan-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="#settings" onclick="navigate('settings')" id="nav-settings"
- 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 group-hover:rotate-45 transition-transform" 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>Settings</span>
- </div>
- <span class="text-[10px] bg-cyan-950 text-cyan-400 border border-cyan-800/60 px-1.5 py-0.2 rounded font-mono">DNS</span>
- </a>
- <a href="#users" onclick="navigate('users')" id="nav-users"
- 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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
- </svg>
- <span>Users & Security</span>
- </div>
- <span id="badge-users-count" class="text-[10px] bg-rose-950 text-rose-300 border border-rose-800/40 px-1.5 py-0.2 rounded-full font-mono">1</span>
- </a>
- <a href="#certificates" onclick="navigate('certificates')" id="nav-certificates"
- 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="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>Certificates & SSL</span>
- </div>
- <span id="badge-certs-count" class="text-[10px] bg-amber-950 text-amber-300 border border-amber-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
- </a>
- <a href="#reverse_proxy" onclick="navigate('reverse_proxy')" id="nav-reverse_proxy"
- 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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
- </svg>
- <span>Reverse Proxy</span>
- </div>
- <span id="badge-proxy-count" 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="#services" onclick="navigate('services')" id="nav-services"
- 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>Management Services</span>
- </div>
- <span id="badge-services-status" class="w-2 h-2 rounded-full bg-emerald-500"></span>
- </a>
- <a href="#updates" onclick="navigate('updates')" id="nav-updates" class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium text-slate-300 hover:bg-slate-800/80 hover:text-white"><span>↻ Updates</span></a>
- <a href="#logs" onclick="navigate('logs')" id="nav-logs"
- 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-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
- </svg>
- <span>System Logs</span>
- </div>
- <span class="text-[10px] bg-blue-950 text-blue-300 border border-blue-800/40 px-1.5 py-0.2 rounded-full font-mono">LOG</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>
- <div id="telemetry-health" role="status" aria-live="polite" class="text-[10px] text-amber-400">Waiting for fresh data</div>
- <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>
- <!-- User Profile & Session Menu -->
- <div class="relative">
- <button onclick="toggleUserMenu()" class="flex items-center gap-2 px-2.5 py-1.5 bg-slate-900/90 border border-slate-800 hover:border-slate-700 rounded-xl text-xs transition cursor-pointer">
- <div class="w-6 h-6 rounded-lg bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 flex items-center justify-center font-bold text-[10px]" id="nav-user-avatar">AD</div>
- <span class="font-medium text-white font-mono" id="nav-user-name">admin</span>
- <span class="text-[9px] px-1.5 py-0.2 rounded bg-brand-500/10 text-brand-400 border border-brand-500/20 font-mono uppercase font-bold" id="nav-user-role">full</span>
- <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="M19 9l-7 7-7-7"/></svg>
- </button>
- <!-- Dropdown Menu -->
- <div id="user-menu-dropdown" class="hidden absolute right-0 mt-2 w-52 bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl py-1.5 z-50 animate-in">
- <div class="px-3.5 py-2 border-b border-slate-800 text-[11px] text-slate-400">
- Signed in as <span class="font-bold text-white font-mono" id="dropdown-user-name">admin</span>
- </div>
- <button id="dropdown-item-users" onclick="navigate('users'); closeUserMenu();" class="w-full text-left px-3.5 py-2 text-xs text-slate-300 hover:bg-slate-800/80 hover:text-white flex items-center gap-2.5 transition">
- <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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
- <span>User Manager</span>
- </button>
- <button onclick="openSelfPasswordModal(); closeUserMenu();" class="w-full text-left px-3.5 py-2 text-xs text-slate-300 hover:bg-slate-800/80 hover:text-white flex items-center gap-2.5 transition">
- <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="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>Change Password</span>
- </button>
- <div class="border-t border-slate-800 my-1"></div>
- <button onclick="handleLogoutClick(); closeUserMenu();" class="w-full text-left px-3.5 py-2 text-xs text-rose-400 hover:bg-rose-500/10 flex items-center gap-2.5 transition cursor-pointer">
- <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
- <span class="font-medium">Sign Out</span>
- </button>
- </div>
- </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">
- <!-- Top Sub-Tab Navigation -->
- <div class="flex items-center justify-between border-b border-slate-800 pb-3 flex-wrap gap-3">
- <div class="flex items-center space-x-2">
- <button id="ifaces-subtab-btn-tree" onclick="switchIfaceSubTab('tree')"
- class="px-3.5 py-1.5 rounded-lg text-xs font-semibold bg-brand-500/10 text-brand-400 border border-brand-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="M4 6h16M4 12h16M4 18h16"/></svg>
- <span>Interfaces List</span>
- </button>
- <button id="ifaces-subtab-btn-roles" onclick="switchIfaceSubTab('roles')"
- class="px-3.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-800 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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
- <span>Role Tags Management</span>
- <span id="badge-roles-count" class="px-1.5 py-0.2 rounded text-[10px] font-mono bg-slate-800 text-slate-300 border border-slate-700">0</span>
- </button>
- </div>
- </div>
- <!-- SUBTAB 1: Interfaces Tree View -->
- <div id="ifaces-subtab-tree" class="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>
- </div>
- <!-- SUBTAB 2: Role Tags Management -->
- <div id="ifaces-subtab-roles" class="hidden space-y-6">
- <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 flex-wrap gap-3">
- <div>
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <span>Interface Role Tags</span>
- </h3>
- <p class="text-xs text-slate-400 mt-0.5">Define custom organizational role tags with colors to classify, filter, and assign to network interfaces.</p>
- </div>
- <button onclick="openRoleModal()"
- class="px-3.5 py-2 rounded-lg font-semibold text-xs bg-brand-600 hover:bg-brand-500 text-white shadow-lg shadow-brand-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 Role Tag</span>
- </button>
- </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] font-sans">
- <tr>
- <th class="py-3 px-4 font-semibold w-28">Badge Preview</th>
- <th class="py-3 px-4 font-semibold">Role Name</th>
- <th class="py-3 px-4 font-semibold">Color Theme</th>
- <th class="py-3 px-4 font-semibold">Description</th>
- <th class="py-3 px-4 font-semibold">Assigned Interfaces</th>
- <th class="py-3 px-4 font-semibold text-right">Actions</th>
- </tr>
- </thead>
- <tbody id="roles-table-body" class="divide-y divide-slate-800 font-mono"></tbody>
- </table>
- </div>
- <div id="roles-empty-state" class="hidden p-12 text-center text-slate-500 font-sans">
- No role tags defined. Click "+ Add Role Tag" to create one.
- </div>
- </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">DHCP Options</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="debtik-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: VXLAN TUNNELS ================= -->
- <section id="section-vxlan" 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">Layer 2 Overlay</span>
- <h2 class="text-base font-bold text-white">VXLAN (Virtual Extensible LAN)</h2>
- </div>
- <p class="text-xs text-slate-400">RFC 7348 standard L2 overlay network encapsulated in UDP packets (port 4789). Supports 16M VNIs and static VTEPs for unicast flooding matching MikroTik RouterOS v7.</p>
- </div>
- <div class="flex items-center gap-2">
- <button onclick="openAddVXLANVtepModal()" class="text-xs font-semibold px-3.5 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-amber-300 border border-amber-500/30 transition flex items-center gap-1.5">
- <span>+ Add Remote VTEP</span>
- </button>
- <button onclick="openAddVXLANModal()" 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 flex items-center gap-1.5">
- <span>+ Add VXLAN Tunnel</span>
- </button>
- </div>
- </div>
- <!-- VXLAN 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">
- <h3 class="text-sm font-bold text-white">Configured VXLAN Interfaces</h3>
- <span id="vxlan-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">VNI</th>
- <th class="py-2.5 px-3">Port</th>
- <th class="py-2.5 px-3">Overlay IP</th>
- <th class="py-2.5 px-3">Underlay (Dev / Local)</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">VTEPs</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="vxlan-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="vxlan-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
- No VXLAN interfaces configured. Click "+ Add VXLAN Tunnel" to create one.
- </div>
- </div>
- <!-- Remote VTEPs 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">Static Remote VTEPs (Flooding Peers)</h3>
- <p class="text-[11px] text-slate-400">Unicast peer IP endpoints for BUM (Broadcast, Unknown unicast, Multicast) packet replication.</p>
- </div>
- <span id="vxlan-vteps-count-badge" class="text-xs font-mono bg-slate-800 text-slate-300 px-2.5 py-0.5 rounded-full">0 VTEPs</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">Parent Interface</th>
- <th class="py-2.5 px-3">Remote IP</th>
- <th class="py-2.5 px-3">UDP Port</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="vxlan-vteps-table-body" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="vxlan-vteps-empty" class="hidden p-8 text-center text-slate-500 text-xs font-sans">
- No static VTEPs configured. Click "+ Add Remote VTEP" to add a peer.
- </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">XChaCha20-Poly1305 + LZ4</span>
- </h2>
- </div>
- <p class="text-xs text-slate-400">IP tunnels over UDP. V3 adds pinned peer identities, forward secrecy and automatic key rotation. Compression is optional.</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">Peers authenticated recently</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">Authenticated packets and replay protection</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="R=Authenticated peer seen within 65 seconds, 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>
- <div id="aerotun-health-panel" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl p-5 space-y-4">
- <div class="flex items-center justify-between gap-3"><h3 id="aerotun-health-title" class="font-bold text-sm text-white">Tunnel health</h3><button type="button" onclick="closeAeroTUNHealth()" class="text-slate-400 hover:text-white">Close</button></div>
- <div id="aerotun-health-status" class="text-xs text-slate-300"></div>
- <div class="flex gap-3 items-center"><button id="aerotun-health-check-btn" type="button" onclick="runAeroTUNHealthCheck()" class="px-3 py-2 rounded bg-sky-700 text-white text-xs">Check peer and MTU</button><span class="text-xs text-slate-400">Sends up to two ICMP probes through this tunnel.</span></div>
- <div id="aerotun-health-result" role="status" class="text-xs text-slate-300"></div>
- <div class="border-t border-slate-800 pt-3 space-y-2">
- <div class="text-xs font-semibold text-slate-300">TCP bandwidth comparison</div>
- <p class="text-xs text-slate-400">Runs four 8-second tests through the tunnel and directly. Both addresses must reach the same bandwidth test server. This can use the full available bandwidth.</p>
- <div class="flex flex-wrap gap-2 items-center"><label class="text-xs text-slate-300">Direct server <input id="aerotun-compare-host" class="bg-slate-800 rounded px-2 py-1 w-44" placeholder="Server IP or hostname"></label><label class="text-xs text-slate-300">Port <input id="aerotun-compare-port" type="number" min="1" max="65535" value="2000" class="bg-slate-800 rounded px-2 py-1 w-20"></label><button id="aerotun-compare-btn" type="button" onclick="runAeroTUNComparison()" class="px-3 py-1.5 rounded bg-slate-700 text-white text-xs">Run comparison</button><button id="aerotun-compare-stop" type="button" onclick="stopAeroTUNComparison()" class="hidden px-3 py-1.5 rounded bg-slate-700 text-white text-xs">Stop after current test</button></div>
- <div id="aerotun-compare-result" role="status" class="text-xs text-slate-300 whitespace-pre-line"></div>
- </div>
- <div><h4 class="text-xs font-semibold text-slate-300 mb-2">Health history</h4><div id="aerotun-health-history" class="text-xs text-slate-400 space-y-1 max-h-60 overflow-y-auto"></div></div>
- </div>
- </section>
- <!-- ================= SECTION: FIREWALL ================= -->
- <section id="section-firewall" class="hidden space-y-6">
- <div id="fw-apply-error" class="hidden rounded border border-rose-700 bg-rose-950/40 p-3 text-sm text-rose-200"></div>
- <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">iptables Firewall</h2>
- </div>
- <p class="text-xs text-slate-400">Manage Linux filter, NAT and mangle tables, address lists (ipset), GeoIP and connection tracking (conntrack). Rules are evaluated in order within each chain.</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</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">Filter table</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="Status: X=Disabled, C=Comment">Status</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">Target</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="prerouting">PREROUTING</option>
- <option value="input">INPUT</option>
- <option value="output">OUTPUT</option>
- <option value="postrouting">POSTROUTING</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">Status</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">Target</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 table</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">Status</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">Target</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">Status</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">Target</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 flex-wrap">
- <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('rip')" 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-rose-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>RIP Routing</span>
- </button>
- <button onclick="navigate('bfd')" 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-amber-400" 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>
- <span>BFD Sessions</span>
- </button>
- <button onclick="navigate('babel')" 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-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" /></svg>
- <span>Babel Mesh</span>
- </button>
- <button onclick="navigate('radv')" 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-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>
- <span>IPv6 RAdv</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>
- <label class="text-xs text-slate-400 font-sans ml-2">Type Filter:</label>
- <select id="routes-filter-type" 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 Types</option>
- <option value="ecmp">⚡ ECMP (Multi-Path)</option>
- <option value="bgp">BGP</option>
- <option value="ospf">OSPF</option>
- <option value="static">Static</option>
- <option value="dynamic">Dynamic</option>
- <option value="connected">Connected</option>
- <option value="dhcp">DHCP</option>
- <option value="multicast">Multicast / IGMP</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">Protocol</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">Internet / Gateway Health</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: SD-WAN ================= -->
- <section id="section-sdwan" class="hidden space-y-6">
- <!-- Header and Stats Banner -->
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-lg flex flex-wrap items-center justify-between gap-4">
- <div>
- <h3 class="text-base font-bold text-white flex items-center gap-2">
- <svg class="w-5 h-5 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>Software-Defined WAN (SD-WAN)</span>
- </h3>
- <p class="text-xs text-slate-400 mt-1">Multi-link aggregation, percentage balancing, SLA quality probes, and unified firewall zone interfaces.</p>
- </div>
- <div class="flex items-center gap-2 flex-wrap">
- <button onclick="loadSDWAN(true)" class="px-3.5 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 text-xs font-semibold flex items-center gap-1.5 transition">
- <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
- <span>Refresh</span>
- </button>
- <button onclick="openAddSDWANMemberModal()" class="px-3.5 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-amber-300 border border-amber-500/30 text-xs font-semibold flex items-center gap-1.5 transition">
- <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" /></svg>
- <span>Add Member Link</span>
- </button>
- <button onclick="openAddSDWANGroupModal()" class="px-3.5 py-1.5 rounded-xl bg-amber-600 hover:bg-amber-500 text-white text-xs font-semibold flex items-center gap-1.5 shadow-lg shadow-amber-600/20 transition">
- <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" /></svg>
- <span>Create SD-WAN Group</span>
- </button>
- </div>
- </div>
- <!-- Quick Metrics Cards -->
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-4 shadow-sm">
- <div class="text-[11px] font-mono text-slate-400 uppercase tracking-wider">SD-WAN Groups</div>
- <div class="text-2xl font-bold text-amber-400 mt-1" id="sdwan-metric-groups">0</div>
- <div class="text-[10px] text-slate-500 mt-1">Configured multi-link zones</div>
- </div>
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-4 shadow-sm">
- <div class="text-[11px] font-mono text-slate-400 uppercase tracking-wider">Healthy Links</div>
- <div class="text-2xl font-bold text-emerald-400 mt-1 flex items-center gap-2">
- <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
- <span id="sdwan-metric-healthy">0</span>
- </div>
- <div class="text-[10px] text-slate-500 mt-1">Passing SLA latency & loss checks</div>
- </div>
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-4 shadow-sm">
- <div class="text-[11px] font-mono text-slate-400 uppercase tracking-wider">Degraded Links</div>
- <div class="text-2xl font-bold text-amber-400 mt-1" id="sdwan-metric-degraded">0</div>
- <div class="text-[10px] text-slate-500 mt-1">Exceeding SLA latency/loss thresholds</div>
- </div>
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-4 shadow-sm">
- <div class="text-[11px] font-mono text-slate-400 uppercase tracking-wider">Down Links</div>
- <div class="text-2xl font-bold text-rose-400 font-mono mt-1" id="sdwan-metric-down">0</div>
- <div class="text-[10px] text-slate-500 mt-1">Offline or probe unreachable</div>
- </div>
- </div>
- <!-- SD-WAN Groups Table -->
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h4 class="text-xs font-bold text-slate-300 uppercase tracking-wider font-mono">SD-WAN Groups & Zones</h4>
- <span class="text-[11px] text-slate-500">Virtual aggregation interfaces usable directly in Firewall rules</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left border-collapse text-xs">
- <thead>
- <tr class="border-b border-slate-800/80 bg-slate-950/40 text-[11px] font-mono uppercase text-slate-400">
- <th class="py-2.5 px-4">State</th>
- <th class="py-2.5 px-4">Group Name</th>
- <th class="py-2.5 px-4">Balancing Mode</th>
- <th class="py-2.5 px-4">Load Distribution</th>
- <th class="py-2.5 px-4">Members</th>
- <th class="py-2.5 px-4">Probe Interval</th>
- <th class="py-2.5 px-4">Auto-NAT</th>
- <th class="py-2.5 px-4 text-right">Actions</th>
- </tr>
- </thead>
- <tbody id="sdwan-groups-table-body" class="divide-y divide-slate-800/60 font-mono">
- <tr><td colspan="8" class="py-8 text-center text-slate-500 font-sans">Loading SD-WAN groups...</td></tr>
- </tbody>
- </table>
- </div>
- </div>
- <!-- SD-WAN Member Interfaces Table -->
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h4 class="text-xs font-bold text-slate-300 uppercase tracking-wider font-mono">Member WAN Links & Live SLA Telemetry</h4>
- <span class="text-[11px] text-slate-500">Active latency, packet loss, jitter and routing tables</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left border-collapse text-xs">
- <thead>
- <tr class="border-b border-slate-800/80 bg-slate-950/40 text-[11px] font-mono uppercase text-slate-400">
- <th class="py-2.5 px-4">State</th>
- <th class="py-2.5 px-4">Group</th>
- <th class="py-2.5 px-4">Interface</th>
- <th class="py-2.5 px-4">Gateway</th>
- <th class="py-2.5 px-4">Weight / Prio</th>
- <th class="py-2.5 px-4">Health Status</th>
- <th class="py-2.5 px-4">Target Probe</th>
- <th class="py-2.5 px-4">Live Latency</th>
- <th class="py-2.5 px-4">Packet Loss</th>
- <th class="py-2.5 px-4">Jitter</th>
- <th class="py-2.5 px-4 text-right">Actions</th>
- </tr>
- </thead>
- <tbody id="sdwan-members-table-body" class="divide-y divide-slate-800/60 font-mono">
- <tr><td colspan="11" class="py-8 text-center text-slate-500 font-sans">No member links configured yet.</td></tr>
- </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 flex-wrap">
- <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('rip')" 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-rose-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>RIP Routing</span>
- </button>
- <button onclick="navigate('bfd')" 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-amber-400" 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>
- <span>BFD Sessions</span>
- </button>
- <button onclick="navigate('babel')" 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-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" /></svg>
- <span>Babel Mesh</span>
- </button>
- <button onclick="navigate('radv')" 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-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>
- <span>IPv6 RAdv</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 class="bgp-live-status-pill 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 class="bgp-live-status-pill 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">Discard Route</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 flex-wrap">
- <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('rip')" 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-rose-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>RIP Routing</span>
- </button>
- <button onclick="navigate('bfd')" 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-amber-400" 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>
- <span>BFD Sessions</span>
- </button>
- <button onclick="navigate('babel')" 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-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" /></svg>
- <span>Babel Mesh</span>
- </button>
- <button onclick="navigate('radv')" 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-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>
- <span>IPv6 RAdv</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>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('instances', 'redistribute')">Redistribute</th>
- <th class="py-2 px-3 cursor-pointer" onclick="sortOspfTable('instances', 'originate_default')">Originate Default</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 flex-wrap">
- <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('rip')" 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-rose-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>RIP Routing</span>
- </button>
- <button onclick="navigate('bfd')" 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-amber-400" 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>
- <span>BFD Sessions</span>
- </button>
- <button onclick="navigate('babel')" 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-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" /></svg>
- <span>Babel Mesh</span>
- </button>
- <button onclick="navigate('radv')" 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-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>
- <span>IPv6 RAdv</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-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: 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: RIP ROUTING ================= -->
- <section id="section-rip" 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 flex-wrap">
- <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('rip')" class="px-3.5 py-1.5 text-xs font-bold rounded-lg transition bg-rose-600/20 text-rose-300 border border-rose-500/40 shadow-sm flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-rose-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>RIP Routing</span>
- </button>
- <button onclick="navigate('bfd')" 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-amber-400" 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>
- <span>BFD Sessions</span>
- </button>
- <button onclick="navigate('babel')" 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-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" /></svg>
- <span>Babel Mesh</span>
- </button>
- <button onclick="navigate('radv')" 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-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>
- <span>IPv6 RAdv</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>
- <!-- RIP Window Container -->
- <div class="bg-[#131b26] border border-[#243347] rounded-md shadow-2xl overflow-hidden text-xs flex flex-col min-h-[560px]">
- <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-rose-400 font-bold border-r border-[#243347] mr-1">
- <span>⚡</span>
- <span>RIP</span>
- <span class="text-[10px]">▼</span>
- </div>
- <button id="rip-tab-btn-instances" onclick="switchRipTab('instances')" class="px-3 py-2 text-xs font-semibold border-b-2 border-rose-500 text-white transition flex items-center gap-1.5 whitespace-nowrap">
- <span>Instances</span>
- </button>
- <button id="rip-tab-btn-interfaces" onclick="switchRipTab('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="rip-tab-btn-neighbors" onclick="switchRipTab('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 (Live)</span>
- </button>
- <button id="rip-tab-btn-routes" onclick="switchRipTab('routes')" 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>Routes (Live)</span>
- </button>
- </div>
- <div class="flex items-center gap-1 text-slate-400 pr-2">
- <button onclick="loadDynamicRouting(true)" title="Refresh" class="hover:text-white p-1">🔄</button>
- </div>
- </div>
- <!-- TAB 1: RIP INSTANCES -->
- <div id="rip-pane-instances" class="flex-1 flex flex-col">
- <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="openRipInstanceModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-rose-600 hover:text-white text-rose-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedRipInstance()" id="btn-rip-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="disableSelectedRipInstance()" id="btn-rip-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="removeSelectedRipInstance()" id="btn-rip-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>
- </div>
- <div class="flex items-center space-x-2">
- <input type="text" id="filter-rip-instances" oninput="renderRipInstances()" 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-rose-500 w-32">
- </div>
- </div>
- <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">#</th>
- <th class="py-2 px-3 w-12 text-center">Flags</th>
- <th class="py-2 px-3">Comment</th>
- <th class="py-2 px-3">Name</th>
- <th class="py-2 px-3">Version</th>
- <th class="py-2 px-3">Update Time</th>
- <th class="py-2 px-3">Timeout</th>
- <th class="py-2 px-3">Redistribute</th>
- <th class="py-2 px-3">Metric</th>
- </tr>
- </thead>
- <tbody id="rip-instances-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="rip-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: RIP INTERFACES -->
- <div id="rip-pane-interfaces" class="hidden flex-1 flex flex-col">
- <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="openRipInterfaceModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-rose-600 hover:text-white text-rose-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedRipInterface()" id="btn-rip-iface-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="disableSelectedRipInterface()" id="btn-rip-iface-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="removeSelectedRipInterface()" id="btn-rip-iface-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>
- </div>
- <div class="flex items-center space-x-2">
- <input type="text" id="filter-rip-interfaces" oninput="renderRipInterfaces()" 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-rose-500 w-32">
- </div>
- </div>
- <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">#</th>
- <th class="py-2 px-3 w-12 text-center">Flags</th>
- <th class="py-2 px-3">Comment</th>
- <th class="py-2 px-3">Interface</th>
- <th class="py-2 px-3">Mode</th>
- <th class="py-2 px-3">Metric</th>
- <th class="py-2 px-3">Passive</th>
- <th class="py-2 px-3">BFD</th>
- </tr>
- </thead>
- <tbody id="rip-interfaces-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="rip-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 3: RIP NEIGHBORS (LIVE) -->
- <div id="rip-pane-neighbors" class="hidden flex-1 flex flex-col">
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <span class="text-slate-400 font-sans">Dynamic Neighbors detected via BIRD RIP multicasts</span>
- <button onclick="loadDynamicRouting(true)" class="px-2 py-1 bg-[#1a2737] hover:bg-slate-700 text-slate-300 rounded text-xs">🔄 Refresh</button>
- </div>
- <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">#</th>
- <th class="py-2 px-3">IP Address</th>
- <th class="py-2 px-3">Interface</th>
- <th class="py-2 px-3">Last Seen</th>
- <th class="py-2 px-3">Uptime</th>
- </tr>
- </thead>
- <tbody id="rip-neighbors-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="rip-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 4: RIP ROUTES (LIVE) -->
- <div id="rip-pane-routes" class="hidden flex-1 flex flex-col">
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <span class="text-slate-400 font-sans">Active RIP Dynamic Routes</span>
- <button onclick="loadDynamicRouting(true)" class="px-2 py-1 bg-[#1a2737] hover:bg-slate-700 text-slate-300 rounded text-xs">🔄 Refresh</button>
- </div>
- <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">#</th>
- <th class="py-2 px-3">Prefix</th>
- <th class="py-2 px-3">Next-Hop</th>
- <th class="py-2 px-3">Metric</th>
- <th class="py-2 px-3">Interface</th>
- <th class="py-2 px-3">Age</th>
- </tr>
- </thead>
- <tbody id="rip-routes-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="rip-routes-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: BFD SESSIONS ================= -->
- <section id="section-bfd" 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 flex-wrap">
- <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('rip')" 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-rose-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>RIP Routing</span>
- </button>
- <button onclick="navigate('bfd')" class="px-3.5 py-1.5 text-xs font-bold rounded-lg transition bg-amber-600/20 text-amber-300 border border-amber-500/40 shadow-sm flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-amber-400" 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>
- <span>BFD Sessions</span>
- </button>
- <button onclick="navigate('babel')" 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-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" /></svg>
- <span>Babel Mesh</span>
- </button>
- <button onclick="navigate('radv')" 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-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>
- <span>IPv6 RAdv</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>
- <!-- BFD Window Container -->
- <div class="bg-[#131b26] border border-[#243347] rounded-md shadow-2xl overflow-hidden text-xs flex flex-col min-h-[560px]">
- <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-amber-400 font-bold border-r border-[#243347] mr-1">
- <span>⏱</span>
- <span>BFD</span>
- <span class="text-[10px]">▼</span>
- </div>
- <button id="bfd-tab-btn-config" onclick="switchBfdTab('config')" class="px-3 py-2 text-xs font-semibold border-b-2 border-amber-500 text-white transition flex items-center gap-1.5 whitespace-nowrap">
- <span>Configuration</span>
- </button>
- <button id="bfd-tab-btn-interfaces" onclick="switchBfdTab('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="bfd-tab-btn-peers" onclick="switchBfdTab('peers')" 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>Peers</span>
- </button>
- <button id="bfd-tab-btn-sessions" onclick="switchBfdTab('sessions')" 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>Live Sessions</span>
- </button>
- </div>
- <div class="flex items-center gap-1 text-slate-400 pr-2">
- <button onclick="loadDynamicRouting(true)" title="Refresh" class="hover:text-white p-1">🔄</button>
- </div>
- </div>
- <!-- TAB 1: BFD CONFIG -->
- <div id="bfd-pane-config" class="flex-1 p-6 space-y-6">
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-5 flex items-center justify-between">
- <div>
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <span>BFD Protocol Daemon</span>
- <span id="bfd-live-status-pill" class="text-[10px] px-2 py-0.5 rounded font-mono bg-slate-800 text-slate-400 border border-slate-700">INACTIVE</span>
- </h3>
- <p class="text-xs text-slate-400 mt-1">Bidirectional Forwarding Detection (BFD) provides sub-50ms fault detection for routing protocols.</p>
- <p class="text-xs text-slate-500 mt-0.5">When enabled, BGP peers and OSPF interfaces with BFD enabled will register live sessions automatically.</p>
- </div>
- <button id="bfd-global-toggle-btn" onclick="toggleBfdGlobalState()" class="px-4 py-2 rounded-lg text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white shadow-lg shadow-amber-500/20 transition">
- Enable BFD
- </button>
- </div>
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
- <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
- <div class="text-xs text-slate-400">Total BFD Interfaces</div>
- <div id="bfd-stat-interfaces" 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">Configured Static Peers</div>
- <div id="bfd-stat-peers" 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">Live Active Sessions</div>
- <div id="bfd-stat-sessions" class="text-xl font-bold text-emerald-400 font-mono mt-1">0</div>
- </div>
- </div>
- </div>
- <!-- TAB 2: BFD INTERFACES -->
- <div id="bfd-pane-interfaces" class="hidden flex-1 flex flex-col">
- <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="openBfdInterfaceModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-amber-600 hover:text-white text-amber-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedBfdInterface()" id="btn-bfd-iface-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="disableSelectedBfdInterface()" id="btn-bfd-iface-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="removeSelectedBfdInterface()" id="btn-bfd-iface-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>
- </div>
- <div class="flex items-center space-x-2">
- <input type="text" id="filter-bfd-interfaces" oninput="renderBfdInterfaces()" 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-amber-500 w-32">
- </div>
- </div>
- <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">#</th>
- <th class="py-2 px-3 w-12 text-center">Flags</th>
- <th class="py-2 px-3">Comment</th>
- <th class="py-2 px-3">Interface</th>
- <th class="py-2 px-3">Min RX (ms)</th>
- <th class="py-2 px-3">Min TX (ms)</th>
- <th class="py-2 px-3">Idle TX (ms)</th>
- <th class="py-2 px-3">Multiplier</th>
- <th class="py-2 px-3">Passive</th>
- </tr>
- </thead>
- <tbody id="bfd-interfaces-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="bfd-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 3: BFD PEERS -->
- <div id="bfd-pane-peers" class="hidden flex-1 flex flex-col">
- <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="openBfdPeerModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-amber-600 hover:text-white text-amber-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedBfdPeer()" id="btn-bfd-peer-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="disableSelectedBfdPeer()" id="btn-bfd-peer-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="removeSelectedBfdPeer()" id="btn-bfd-peer-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>
- </div>
- <div class="flex items-center space-x-2">
- <input type="text" id="filter-bfd-peers" oninput="renderBfdPeers()" 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-amber-500 w-32">
- </div>
- </div>
- <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">#</th>
- <th class="py-2 px-3 w-12 text-center">Flags</th>
- <th class="py-2 px-3">Comment</th>
- <th class="py-2 px-3">Neighbor Address</th>
- <th class="py-2 px-3">Interface</th>
- <th class="py-2 px-3">Multihop</th>
- </tr>
- </thead>
- <tbody id="bfd-peers-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="bfd-peers-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: BFD SESSIONS (LIVE) -->
- <div id="bfd-pane-sessions" class="hidden flex-1 flex flex-col">
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <span class="text-slate-400 font-sans">Live BFD Sessions detected by BIRD (BGP, OSPF & static peers)</span>
- <button onclick="loadDynamicRouting(true)" class="px-2 py-1 bg-[#1a2737] hover:bg-slate-700 text-slate-300 rounded text-xs">🔄 Refresh</button>
- </div>
- <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">#</th>
- <th class="py-2 px-3">Neighbor IP</th>
- <th class="py-2 px-3">Interface</th>
- <th class="py-2 px-3">State</th>
- <th class="py-2 px-3">Interval</th>
- <th class="py-2 px-3">Timeout</th>
- <th class="py-2 px-3">Since</th>
- </tr>
- </thead>
- <tbody id="bfd-sessions-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="bfd-sessions-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: BABEL ROUTING ================= -->
- <section id="section-babel" 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 flex-wrap">
- <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('rip')" 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-rose-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>RIP Routing</span>
- </button>
- <button onclick="navigate('bfd')" 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-amber-400" 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>
- <span>BFD Sessions</span>
- </button>
- <button onclick="navigate('babel')" class="px-3.5 py-1.5 text-xs font-bold rounded-lg transition bg-teal-600/20 text-teal-300 border border-teal-500/40 shadow-sm flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" /></svg>
- <span>Babel Mesh</span>
- </button>
- <button onclick="navigate('radv')" 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-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>
- <span>IPv6 RAdv</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>
- <!-- Babel Window Container -->
- <div class="bg-[#131b26] border border-[#243347] rounded-md shadow-2xl overflow-hidden text-xs flex flex-col min-h-[560px]">
- <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-teal-400 font-bold border-r border-[#243347] mr-1">
- <span>🌐</span>
- <span>Babel</span>
- <span class="text-[10px]">▼</span>
- </div>
- <button id="babel-tab-btn-instances" onclick="switchBabelTab('instances')" class="px-3 py-2 text-xs font-semibold border-b-2 border-teal-500 text-white transition flex items-center gap-1.5 whitespace-nowrap">
- <span>Instances</span>
- </button>
- <button id="babel-tab-btn-interfaces" onclick="switchBabelTab('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="babel-tab-btn-neighbors" onclick="switchBabelTab('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 (Live)</span>
- </button>
- <button id="babel-tab-btn-routes" onclick="switchBabelTab('routes')" 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>Routes (Live)</span>
- </button>
- </div>
- <div class="flex items-center gap-1 text-slate-400 pr-2">
- <button onclick="loadDynamicRouting(true)" title="Refresh" class="hover:text-white p-1">🔄</button>
- </div>
- </div>
- <!-- TAB 1: BABEL INSTANCES -->
- <div id="babel-pane-instances" class="flex-1 flex flex-col">
- <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="openBabelInstanceModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-teal-600 hover:text-white text-teal-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedBabelInstance()" id="btn-babel-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="disableSelectedBabelInstance()" id="btn-babel-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="removeSelectedBabelInstance()" id="btn-babel-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>
- </div>
- <div class="flex items-center space-x-2">
- <input type="text" id="filter-babel-instances" oninput="renderBabelInstances()" 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-teal-500 w-32">
- </div>
- </div>
- <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">#</th>
- <th class="py-2 px-3 w-12 text-center">Flags</th>
- <th class="py-2 px-3">Comment</th>
- <th class="py-2 px-3">Name</th>
- <th class="py-2 px-3">Router ID</th>
- <th class="py-2 px-3">Dual-Stack</th>
- <th class="py-2 px-3">Redistribute</th>
- <th class="py-2 px-3">Metric</th>
- </tr>
- </thead>
- <tbody id="babel-instances-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="babel-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: BABEL INTERFACES -->
- <div id="babel-pane-interfaces" class="hidden flex-1 flex flex-col">
- <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="openBabelInterfaceModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-teal-600 hover:text-white text-teal-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedBabelInterface()" id="btn-babel-iface-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="disableSelectedBabelInterface()" id="btn-babel-iface-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="removeSelectedBabelInterface()" id="btn-babel-iface-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>
- </div>
- <div class="flex items-center space-x-2">
- <input type="text" id="filter-babel-interfaces" oninput="renderBabelInterfaces()" 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-teal-500 w-32">
- </div>
- </div>
- <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">#</th>
- <th class="py-2 px-3 w-12 text-center">Flags</th>
- <th class="py-2 px-3">Comment</th>
- <th class="py-2 px-3">Interface</th>
- <th class="py-2 px-3">Type</th>
- <th class="py-2 px-3">RX Cost</th>
- <th class="py-2 px-3">Hello Interval</th>
- <th class="py-2 px-3">Update Interval</th>
- </tr>
- </thead>
- <tbody id="babel-interfaces-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="babel-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 3: BABEL NEIGHBORS (LIVE) -->
- <div id="babel-pane-neighbors" class="hidden flex-1 flex flex-col">
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <span class="text-slate-400 font-sans">Live Babel Mesh Neighbors</span>
- <button onclick="loadDynamicRouting(true)" class="px-2 py-1 bg-[#1a2737] hover:bg-slate-700 text-slate-300 rounded text-xs">🔄 Refresh</button>
- </div>
- <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">#</th>
- <th class="py-2 px-3">Neighbor IP</th>
- <th class="py-2 px-3">Interface</th>
- <th class="py-2 px-3">Metric</th>
- <th class="py-2 px-3">Cost</th>
- <th class="py-2 px-3">Uptime</th>
- </tr>
- </thead>
- <tbody id="babel-neighbors-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="babel-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 4: BABEL ROUTES (LIVE) -->
- <div id="babel-pane-routes" class="hidden flex-1 flex flex-col">
- <div class="bg-[#101721] border-b border-[#243347] px-3 py-1.5 flex items-center justify-between text-xs select-none">
- <span class="text-slate-400 font-sans">Active Babel Mesh Routes</span>
- <button onclick="loadDynamicRouting(true)" class="px-2 py-1 bg-[#1a2737] hover:bg-slate-700 text-slate-300 rounded text-xs">🔄 Refresh</button>
- </div>
- <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">#</th>
- <th class="py-2 px-3">Prefix</th>
- <th class="py-2 px-3">Next-Hop</th>
- <th class="py-2 px-3">Metric</th>
- <th class="py-2 px-3">Interface</th>
- </tr>
- </thead>
- <tbody id="babel-routes-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="babel-routes-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: RADV (ROUTER ADVERTISEMENTS) ================= -->
- <section id="section-radv" 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 flex-wrap">
- <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('rip')" 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-rose-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>RIP Routing</span>
- </button>
- <button onclick="navigate('bfd')" 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-amber-400" 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>
- <span>BFD Sessions</span>
- </button>
- <button onclick="navigate('babel')" 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-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" /></svg>
- <span>Babel Mesh</span>
- </button>
- <button onclick="navigate('radv')" class="px-3.5 py-1.5 text-xs font-bold rounded-lg transition bg-blue-600/20 text-blue-300 border border-blue-500/40 shadow-sm flex items-center gap-2">
- <svg class="w-3.5 h-3.5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>
- <span>IPv6 RAdv</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>
- <!-- RAdv Window Container -->
- <div class="bg-[#131b26] border border-[#243347] rounded-md shadow-2xl overflow-hidden text-xs flex flex-col min-h-[560px]">
- <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-blue-400 font-bold border-r border-[#243347] mr-1">
- <span>📢</span>
- <span>RAdv</span>
- <span class="text-[10px]">▼</span>
- </div>
- <button id="radv-tab-btn-instances" onclick="switchRadvTab('instances')" class="px-3 py-2 text-xs font-semibold border-b-2 border-blue-500 text-white transition flex items-center gap-1.5 whitespace-nowrap">
- <span>Instances</span>
- </button>
- <button id="radv-tab-btn-interfaces" onclick="switchRadvTab('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>
- </div>
- <div class="flex items-center gap-1 text-slate-400 pr-2">
- <button onclick="loadDynamicRouting(true)" title="Refresh" class="hover:text-white p-1">🔄</button>
- </div>
- </div>
- <!-- TAB 1: RADV INSTANCES -->
- <div id="radv-pane-instances" class="flex-1 flex flex-col">
- <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="openRAdvInstanceModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-blue-600 hover:text-white text-blue-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedRadvInstance()" id="btn-radv-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="disableSelectedRadvInstance()" id="btn-radv-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="removeSelectedRadvInstance()" id="btn-radv-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>
- </div>
- <div class="flex items-center space-x-2">
- <input type="text" id="filter-radv-instances" oninput="renderRAdvInstances()" 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-blue-500 w-32">
- </div>
- </div>
- <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">#</th>
- <th class="py-2 px-3 w-12 text-center">Flags</th>
- <th class="py-2 px-3">Comment</th>
- <th class="py-2 px-3">Name</th>
- <th class="py-2 px-3">Status</th>
- </tr>
- </thead>
- <tbody id="radv-instances-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="radv-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: RADV INTERFACES -->
- <div id="radv-pane-interfaces" class="hidden flex-1 flex flex-col">
- <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="openRAdvInterfaceModal()" class="px-2.5 py-1 bg-[#1a2737] hover:bg-blue-600 hover:text-white text-blue-400 border border-[#2d425d] rounded transition flex items-center gap-1 font-medium">
- <span>+</span> <span>New</span>
- </button>
- <button onclick="enableSelectedRadvInterface()" id="btn-radv-iface-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="disableSelectedRadvInterface()" id="btn-radv-iface-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="removeSelectedRadvInterface()" id="btn-radv-iface-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>
- </div>
- <div class="flex items-center space-x-2">
- <input type="text" id="filter-radv-interfaces" oninput="renderRAdvInterfaces()" 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-blue-500 w-32">
- </div>
- </div>
- <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">#</th>
- <th class="py-2 px-3 w-12 text-center">Flags</th>
- <th class="py-2 px-3">Comment</th>
- <th class="py-2 px-3">Interface</th>
- <th class="py-2 px-3">Min/Max RA (s)</th>
- <th class="py-2 px-3">Lifetime</th>
- <th class="py-2 px-3">Prefixes</th>
- <th class="py-2 px-3">RDNSS (DNS)</th>
- </tr>
- </thead>
- <tbody id="radv-interfaces-table-body" class="divide-y divide-[#1e2c3d]"></tbody>
- </table>
- </div>
- <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="radv-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>
- </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: 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" title="Throughput confirmed by the receiving peer" 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>
- <!-- Protocol Selection (Segmented Selector) -->
- <div>
- <div class="flex justify-between items-center mb-1.5">
- <label class="block text-xs font-semibold text-white flex items-center gap-1.5">
- <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="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
- <span>Transport Protocol</span>
- </label>
- <span id="bwtest-proto-badge" class="text-[10px] font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">UDP Mode (RFC 3550 Jitter + Loss %)</span>
- </div>
- <div class="grid grid-cols-2 gap-2">
- <button type="button" id="bwtest-proto-udp" onclick="setBwTestProtocol('udp')" class="py-2 px-3 rounded-lg text-xs font-bold border transition text-center bg-emerald-600/20 border-emerald-500/50 text-emerald-300 shadow-sm flex items-center justify-center gap-2">
- <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
- <span>UDP (Loss & Jitter)</span>
- </button>
- <button type="button" id="bwtest-proto-tcp" onclick="setBwTestProtocol('tcp')" class="py-2 px-3 rounded-lg text-xs font-medium border border-slate-800 bg-slate-950 text-slate-400 hover:text-white transition text-center flex items-center justify-center gap-2">
- <span class="w-2 h-2 rounded-full bg-slate-600"></span>
- <span>TCP (Stream Throughput)</span>
- </button>
- </div>
- <input type="hidden" id="bwtest-input-protocol" value="udp">
- </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 Options: Packet Size (UDP) & Parallel Streams (TCP) -->
- <div class="grid grid-cols-2 gap-3">
- <div id="bwtest-field-pktsize">
- <label class="block text-xs font-semibold text-slate-300 mb-1">Maximum UDP Datagram Size</label>
- <div id="bwtest-effective-payload" class="text-[10px] text-slate-400 mb-1">Negotiated to fit the route MTU</div>
- <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>1472 bytes (1500-byte IP packet)</option>
- <option value="8972">8972 bytes (9000-byte IP packet)</option>
- <option value="512">512 (Small Payload)</option>
- <option value="64">64 (Min VoIP / Small)</option>
- </select>
- </div>
- <div id="bwtest-field-streams">
- <label class="block text-xs font-semibold text-slate-300 mb-1">Parallel Streams (TCP/UDP)</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">Auto</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>Auto (UDP uses receiver feedback)</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>
- <!-- Duration -->
- <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>
- <!-- ================= SECTION: SETTINGS ================= -->
- <section id="section-settings" class="hidden space-y-6">
- <!-- Settings Sub-Navigation Tabs -->
- <div class="flex items-center justify-between border-b border-slate-800 pb-3 flex-wrap gap-3">
- <div class="flex space-x-2">
- <button onclick="switchSettingsSubTab('dns')" id="btn-settings-subtab-dns"
- class="px-3.5 py-1.5 rounded-lg text-xs font-semibold bg-cyan-600 text-white 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="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>DNS Settings</span>
- </button>
- <button onclick="switchSettingsSubTab('system')" id="btn-settings-subtab-system"
- class="px-3.5 py-1.5 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 hover:text-white 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="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>System & Hostname</span>
- </button>
- <button onclick="switchSettingsSubTab('backup')" id="btn-settings-subtab-backup"
- class="px-3.5 py-1.5 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 hover:text-white transition flex items-center gap-1.5 cursor-pointer">
- <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="M8 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20"/></svg>
- <span>Backup & Restore</span>
- </button>
- </div>
- <div class="flex items-center gap-2">
- <span id="dns-live-status-pill" class="px-2.5 py-1 rounded-full text-[11px] font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 flex items-center gap-1.5">
- <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
- <span id="dns-live-status-text">DNS Service Active</span>
- </span>
- </div>
- </div>
- <!-- Sub-Tab 1: DNS Settings -->
- <div id="settings-subtab-dns" class="space-y-6">
- <!-- DNS Forwarder Config Card -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5 shadow-lg">
- <div class="flex items-center justify-between pb-4 mb-4 border-b border-slate-800 flex-wrap gap-2">
- <div>
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <span>Router DNS & Upstream Resolvers</span>
- </h3>
- <p class="text-xs text-slate-400 mt-0.5">Configure system recursive DNS forwarders, caching, and LAN client request resolution.</p>
- </div>
- <div class="flex items-center gap-2">
- <button type="button" onclick="flushDNSCache()" class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white border border-slate-700 transition flex items-center gap-1.5">
- <svg class="w-3.5 h-3.5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
- <span>Flush Cache</span>
- </button>
- </div>
- </div>
- <form id="form-dns-settings" onsubmit="saveDNSSettings(event)" oninput="this.dataset.dirty='true'" class="space-y-4">
- <!-- Upstream DNS Servers -->
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Upstream DNS Servers (Comma or space separated) *</label>
- <div class="flex gap-2">
- <input type="text" id="dns-servers-input" required placeholder="e.g. 1.1.1.1, 8.8.8.8, 9.9.9.9" class="flex-1 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>
- <!-- Quick Preset Tags -->
- <div class="flex items-center gap-1.5 mt-2 flex-wrap">
- <span class="text-[11px] text-slate-500 font-sans">Quick Presets:</span>
- <button type="button" onclick="appendDNSPreset('1.1.1.1, 1.0.0.1')" class="px-2 py-0.5 rounded text-[10px] font-mono bg-slate-800 hover:bg-cyan-950 hover:text-cyan-400 text-slate-400 border border-slate-700/80 transition">+ Cloudflare (1.1.1.1)</button>
- <button type="button" onclick="appendDNSPreset('8.8.8.8, 8.8.4.4')" class="px-2 py-0.5 rounded text-[10px] font-mono bg-slate-800 hover:bg-cyan-950 hover:text-cyan-400 text-slate-400 border border-slate-700/80 transition">+ Google (8.8.8.8)</button>
- <button type="button" onclick="appendDNSPreset('9.9.9.9, 149.112.112.112')" class="px-2 py-0.5 rounded text-[10px] font-mono bg-slate-800 hover:bg-cyan-950 hover:text-cyan-400 text-slate-400 border border-slate-700/80 transition">+ Quad9 (9.9.9.9)</button>
- <button type="button" onclick="appendDNSPreset('208.67.222.222, 208.67.220.220')" class="px-2 py-0.5 rounded text-[10px] font-mono bg-slate-800 hover:bg-cyan-950 hover:text-cyan-400 text-slate-400 border border-slate-700/80 transition">+ OpenDNS</button>
- </div>
- </div>
- <!-- Dynamic Servers badge display -->
- <div id="dns-dynamic-servers-container" class="p-3 bg-slate-950/60 rounded-xl border border-slate-800 flex items-center justify-between flex-wrap gap-2">
- <div class="flex items-center gap-2">
- <span class="text-xs font-semibold text-slate-400 font-sans">Dynamic Servers (Learned from DHCP Client):</span>
- <span id="dns-dynamic-servers-list" class="text-xs font-mono text-cyan-400 font-bold">None</span>
- </div>
- <span class="text-[10px] text-slate-500">Auto-injected into resolver forwarders</span>
- </div>
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Cache Size (Entries)</label>
- <input type="number" id="dns-cache-size-input" min="150" max="50000" value="2048" 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">
- <span class="text-[10px] text-slate-500 mt-1 block">Maximum cached records (Default: 2048)</span>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Local Domain</label>
- <input type="text" id="dns-domain-input" placeholder="e.g. home.lan" 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">
- <span class="text-[10px] text-slate-500 mt-1 block">Appended to unqualified host queries</span>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Allow Remote Requests</label>
- <div class="flex items-center space-x-2 mt-2">
- <input type="checkbox" id="dns-allow-remote-input" checked class="rounded bg-slate-800 border-slate-700 text-cyan-600 focus:ring-0">
- <label for="dns-allow-remote-input" class="text-xs text-slate-300 cursor-pointer">Serve DNS to LAN clients (Port 53)</label>
- </div>
- <span class="text-[10px] text-slate-500 mt-1 block">When enabled, clients use this router as primary DNS</span>
- </div>
- </div>
- <div class="pt-3 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 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="M5 13l4 4L19 7"/></svg>
- <span>Apply DNS Settings</span>
- </button>
- </div>
- </form>
- </div>
- <!-- Static DNS Table -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden shadow-lg">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-2">
- <div>
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <span>Static DNS Records</span>
- <span id="dns-static-count-badge" class="text-xs font-mono text-cyan-400 bg-cyan-950 border border-cyan-800/60 px-2 py-0.5 rounded-full">0 Records</span>
- </h3>
- <p class="text-xs text-slate-400 mt-0.5">Authoritative local hostname-to-IP overrides and local CNAME aliases.</p>
- </div>
- <button type="button" onclick="openStaticDNSModal()" class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-cyan-600 hover:bg-cyan-500 text-white 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"/></svg>
- <span>Add Static DNS</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/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
- <tr>
- <th class="py-2.5 px-4">Name (Hostname)</th>
- <th class="py-2.5 px-4">Type</th>
- <th class="py-2.5 px-4">Address / Target</th>
- <th class="py-2.5 px-4">TTL</th>
- <th class="py-2.5 px-4">Comment</th>
- <th class="py-2.5 px-4">Status</th>
- <th class="py-2.5 px-4 text-right font-sans">Actions</th>
- </tr>
- </thead>
- <tbody id="dns-static-tbody" class="divide-y divide-slate-800/80"></tbody>
- </table>
- </div>
- <div id="dns-static-empty" class="hidden p-8 text-center text-slate-500 text-xs font-sans">
- No static DNS records configured yet. Click "+ Add Static DNS" to add local hostname mappings.
- </div>
- </div>
- <!-- System Resolv.conf Preview -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 shadow">
- <div class="flex items-center justify-between mb-2">
- <span class="text-xs font-bold text-slate-300 font-sans">Active Host Resolver Configuration (/etc/resolv.conf)</span>
- <span class="text-[10px] text-slate-500 font-mono">System Host View</span>
- </div>
- <pre id="dns-resolv-preview" class="p-3 bg-slate-950 rounded-lg text-slate-400 font-mono text-[11px] overflow-x-auto">Loading...</pre>
- </div>
- </div>
- <!-- Sub-Tab 2: System & Hostname -->
- <div id="settings-subtab-system" class="hidden space-y-6">
- <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5 shadow-lg">
- <div class="pb-4 mb-4 border-b border-slate-800">
- <h3 class="text-sm font-bold text-white">System Identity & Hostname</h3>
- <p class="text-xs text-slate-400 mt-0.5">Set the router appliance identity and timezone.</p>
- </div>
- <form id="form-system-settings" onsubmit="saveSystemSettings(event)" oninput="this.dataset.dirty='true'" class="space-y-4 max-w-xl">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Router Identity / Hostname *</label>
- <input type="text" id="system-hostname-input" 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">System Timezone</label>
- <select id="system-timezone-input" 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="Europe/Athens">Europe/Athens (UTC+2 / UTC+3 EEST)</option>
- <option value="Etc/UTC">Etc/UTC (Coordinated Universal Time)</option>
- <option value="Europe/London">Europe/London (GMT/BST)</option>
- <option value="Europe/Berlin">Europe/Berlin (CET/CEST)</option>
- <option value="America/New_York">America/New_York (EST/EDT)</option>
- <option value="America/Los_Angeles">America/Los_Angeles (PST/PDT)</option>
- <option value="Asia/Tokyo">Asia/Tokyo (JST)</option>
- </select>
- </div>
- <div class="pt-3">
- <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-cyan-600 hover:bg-cyan-500 text-white transition">
- Save System Settings
- </button>
- </div>
- </form>
- </div>
- </div>
- <!-- Sub-Tab 3: Backup & Restore -->
- <div id="settings-subtab-backup" class="hidden space-y-6">
- <!-- Header Explanatory Card -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-2xl p-5 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4">
- <div>
- <h3 class="text-base font-bold text-white flex items-center gap-2">
- <span class="w-2.5 h-2.5 rounded-full bg-cyan-400"></span>
- <span>Full Configuration Backup & Disaster Recovery</span>
- </h3>
- <p class="text-xs text-slate-400 mt-1 max-w-3xl leading-relaxed">
- Export the complete DebTik router appliance configuration—including routing policies, firewall rules, NAT, WireGuard & AeroTUN tunnels, SSL/TLS certificates & private keys, Reverse Proxy routes, DHCP, DNS, and user credentials—into a single downloadable <span class="font-mono text-cyan-400">.zip</span> archive. Restorations automatically generate a pre-restore fallback safety copy.
- </p>
- </div>
- <div class="flex items-center gap-2">
- <button type="button" onclick="loadBackupList()" class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-xs text-slate-300 transition flex items-center gap-1.5 cursor-pointer">
- <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
- <span>Refresh</span>
- </button>
- </div>
- </div>
- <!-- Two-Column Grid: Export & Import -->
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
- <!-- Card 1: Export Backup -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-2xl p-6 shadow-xl flex flex-col justify-between">
- <div class="space-y-4">
- <div class="flex items-center justify-between pb-3 border-b border-slate-800">
- <div class="flex items-center gap-2.5">
- <div class="w-9 h-9 rounded-xl bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 flex items-center justify-center">
- <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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
- </div>
- <div>
- <h4 class="text-sm font-bold text-white">Export Configuration Backup</h4>
- <p class="text-[11px] text-slate-400">Generate and download complete router archive (.zip)</p>
- </div>
- </div>
- <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-cyan-500/10 text-cyan-300 border border-cyan-500/20">LIVE SNAPSHOT</span>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Backup Note / Comment (Optional)</label>
- <input type="text" id="backup-export-comment" placeholder="e.g. Pre-maintenance backup or stable baseline"
- class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-xs text-white placeholder-slate-600 focus:outline-none focus:border-cyan-500 font-sans">
- </div>
- <div class="rounded-xl bg-slate-950/60 border border-slate-800/80 p-3.5 space-y-2 text-xs">
- <div class="text-[11px] font-semibold text-slate-300 uppercase tracking-wider">Archive Contents:</div>
- <ul class="text-[11px] text-slate-400 space-y-1 font-mono">
- <li class="flex items-center gap-2"><span class="text-emerald-400">✔</span> /etc/debtik/* (Firewall, Routing, VPN, Certs, DNS, Users)</li>
- <li class="flex items-center gap-2"><span class="text-emerald-400">✔</span> /etc/network/interfaces.d/* (Interfaces, VLANs)</li>
- <li class="flex items-center gap-2"><span class="text-emerald-400">✔</span> manifest.json (SHA-256 integrity verification)</li>
- </ul>
- </div>
- </div>
- <div class="pt-5 mt-4 border-t border-slate-800 flex justify-end">
- <button type="button" id="btn-export-backup" onclick="exportBackupDownload()"
- class="px-5 py-2.5 rounded-xl text-xs font-bold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-600/25 transition flex items-center gap-2 cursor-pointer">
- <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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
- <span>Download Backup (.zip)</span>
- </button>
- </div>
- </div>
- <!-- Card 2: Restore Backup -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-2xl p-6 shadow-xl flex flex-col justify-between">
- <div class="space-y-4">
- <div class="flex items-center justify-between pb-3 border-b border-slate-800">
- <div class="flex items-center gap-2.5">
- <div class="w-9 h-9 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center">
- <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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
- </div>
- <div>
- <h4 class="text-sm font-bold text-white">Restore Configuration</h4>
- <p class="text-[11px] text-slate-400">Upload a backup archive to restore router state</p>
- </div>
- </div>
- <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-amber-500/10 text-amber-300 border border-amber-500/20">REPLACE & RELOAD</span>
- </div>
- <!-- File Drop / Select Area -->
- <div>
- <input type="file" id="backup-file-input" accept=".zip" class="hidden" onchange="onBackupFileSelected(event)">
- <div onclick="document.getElementById('backup-file-input').click()"
- class="border-2 border-dashed border-slate-700 hover:border-cyan-500 rounded-xl p-5 text-center cursor-pointer transition bg-slate-950/40 hover:bg-slate-950/80">
- <svg class="w-8 h-8 text-slate-500 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
- <div class="text-xs font-semibold text-slate-200" id="backup-file-label">Click to choose or drag & drop a .zip archive</div>
- <div class="text-[10px] text-slate-500 mt-1 font-mono">Max archive size: 100 MB</div>
- </div>
- </div>
- <!-- Inspection details preview card (hidden initially) -->
- <div id="backup-inspect-preview" class="hidden rounded-xl bg-slate-950/90 border border-cyan-500/30 p-3.5 space-y-2 text-xs">
- <div class="flex items-center justify-between">
- <span class="font-bold text-cyan-400 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
- Archive Verified
- </span>
- <span id="backup-inspect-version" class="text-[10px] font-mono text-slate-400"></span>
- </div>
- <div class="grid grid-cols-2 gap-2 text-[11px] font-mono text-slate-300">
- <div>Hostname: <span id="backup-inspect-hostname" class="text-white font-bold"></span></div>
- <div>Files: <span id="backup-inspect-files" class="text-white font-bold"></span></div>
- <div class="col-span-2">Created: <span id="backup-inspect-date" class="text-slate-400"></span></div>
- <div class="col-span-2 text-slate-400 italic" id="backup-inspect-comment"></div>
- </div>
- </div>
- <!-- Warning banner -->
- <div class="p-3 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-300/90 text-[11px] flex items-start gap-2">
- <svg class="w-4 h-4 text-amber-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
- <span>Restoring replaces active configuration. DebTik will take an automated fallback safety backup and reload services.</span>
- </div>
- </div>
- <div class="pt-5 mt-4 border-t border-slate-800 flex justify-end gap-2">
- <button type="button" id="btn-restore-backup" onclick="confirmRestoreBackup()" disabled
- class="px-5 py-2.5 rounded-xl text-xs font-bold bg-amber-600 hover:bg-amber-500 disabled:bg-slate-800 disabled:text-slate-600 disabled:cursor-not-allowed text-white shadow-lg shadow-amber-600/25 transition flex items-center gap-2 cursor-pointer">
- <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 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
- <span>Restore Configuration</span>
- </button>
- </div>
- </div>
- </div>
- <!-- Card 3: Stored Safety Fallback Backups History -->
- <div class="bg-slate-900/90 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
- <div class="p-4 border-b border-slate-800 bg-slate-950/40 flex items-center justify-between">
- <div>
- <h4 class="text-sm font-bold text-white 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
- <span>Stored Safety Fallback Backups</span>
- </h4>
- <p class="text-[11px] text-slate-400">Automated pre-restore backups retained in <span class="font-mono text-slate-300">/var/lib/debtik/backups</span></p>
- </div>
- <button type="button" onclick="loadBackupList()" class="px-2.5 py-1 rounded-lg text-xs bg-slate-800 hover:bg-slate-700 text-slate-300 transition cursor-pointer">Refresh List</button>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs">
- <thead>
- <tr class="text-slate-400 border-b border-slate-800/80 bg-slate-950/60 font-semibold uppercase tracking-wider text-[10px]">
- <th class="py-3 px-4">Filename</th>
- <th class="py-3 px-4">DebTik Version</th>
- <th class="py-3 px-4">Hostname</th>
- <th class="py-3 px-4">Created</th>
- <th class="py-3 px-4">Size</th>
- <th class="py-3 px-4">Comment</th>
- <th class="py-3 px-4 text-right">Actions</th>
- </tr>
- </thead>
- <tbody id="backups-table-tbody" class="divide-y divide-slate-800/60 font-mono">
- <!-- Rendered dynamically -->
- </tbody>
- </table>
- <div id="backups-empty-state" class="hidden p-8 text-center text-slate-500 text-xs">
- No local backup archives currently stored on disk.
- </div>
- </div>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: USERS & SECURITY ================= -->
- <section id="section-users" class="hidden space-y-6">
- <!-- Top KPI Stat Cards -->
- <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-4 flex items-center justify-between shadow-lg">
- <div>
- <div class="text-[11px] text-slate-400 font-medium uppercase tracking-wider">Total System Users</div>
- <div class="text-2xl font-bold font-mono text-white mt-1" id="stat-total-users">0</div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 flex items-center justify-center">
- <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 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
- </div>
- </div>
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-4 flex items-center justify-between shadow-lg">
- <div>
- <div class="text-[11px] text-slate-400 font-medium uppercase tracking-wider">Super Administrators</div>
- <div class="text-2xl font-bold font-mono text-emerald-400 mt-1" id="stat-admin-users">0</div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 flex items-center justify-center">
- <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 class="bg-slate-900/80 border border-slate-800 rounded-2xl p-4 flex items-center justify-between shadow-lg">
- <div>
- <div class="text-[11px] text-slate-400 font-medium uppercase tracking-wider">Active Session</div>
- <div class="text-sm font-bold font-mono text-white mt-1 flex items-center gap-2">
- <span id="stat-current-user">admin</span>
- <span id="stat-current-role" class="text-[9px] bg-brand-500/20 text-brand-300 border border-brand-500/30 px-1.5 py-0.2 rounded font-mono uppercase font-bold">FULL</span>
- </div>
- </div>
- <div class="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/20 text-purple-400 flex items-center justify-center">
- <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.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
- </div>
- </div>
- </div>
- <!-- Main Table Card -->
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
- <!-- Table Header Controls -->
- <div class="p-4 border-b border-slate-800/80 bg-slate-950/40 flex flex-wrap items-center justify-between gap-3">
- <div class="flex items-center gap-3">
- <div class="relative">
- <span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-500">
- <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>
- </span>
- <input type="text" id="users-search-input" oninput="renderUsersTable()" placeholder="Search users by name or role..."
- class="bg-slate-900 border border-slate-800 rounded-xl pl-9 pr-3 py-1.5 text-xs text-white placeholder-slate-500 font-mono focus:outline-none focus:border-cyan-500 w-64">
- </div>
- <button onclick="loadUsers(true)" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition" title="Refresh Users">
- <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 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
- </button>
- </div>
- <div class="flex items-center gap-2">
- <button onclick="openSelfPasswordModal()" class="px-3 py-1.5 rounded-xl text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition flex items-center gap-1.5 cursor-pointer">
- <svg class="w-3.5 h-3.5 text-amber-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>My Password</span>
- </button>
- <button onclick="openAddUserModal()" class="px-3.5 py-1.5 rounded-xl text-xs font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-600/20 transition flex items-center gap-1.5 cursor-pointer">
- <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 User</span>
- </button>
- </div>
- </div>
- <!-- Table -->
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs">
- <thead>
- <tr class="text-slate-400 border-b border-slate-800/80 bg-slate-950/60 font-semibold uppercase tracking-wider text-[10px]">
- <th class="py-3 px-4">User</th>
- <th class="py-3 px-4">Permissions (Role)</th>
- <th class="py-3 px-4">Status</th>
- <th class="py-3 px-4">Comment</th>
- <th class="py-3 px-4">Last Login</th>
- <th class="py-3 px-4 text-right">Actions</th>
- </tr>
- </thead>
- <tbody id="users-table-tbody" class="divide-y divide-slate-800/60 font-mono">
- <!-- Rendered dynamically -->
- </tbody>
- </table>
- <div id="users-empty-state" class="hidden p-8 text-center text-slate-500 text-xs">
- No users match the search criteria.
- </div>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: CERTIFICATES ================= -->
- <section id="section-certificates" class="hidden space-y-6">
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-lg flex flex-wrap items-center justify-between gap-4">
- <div>
- <h3 class="text-base font-bold text-white flex items-center gap-2">
- <svg class="w-5 h-5 text-amber-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>Certificates & SSL/TLS</span>
- </h3>
- <p class="text-xs text-slate-400 mt-1">Manage Root Certificate Authorities (CA), issue Server/Client certificates, and request automated Let's Encrypt certificates.</p>
- </div>
- <div class="flex items-center gap-2 flex-wrap">
- <button onclick="openCreateCAModal()" class="px-3 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-xs font-semibold text-white flex items-center gap-1.5 transition shadow">
- <span>+ Create CA</span>
- </button>
- <button onclick="openCreateCertModal()" class="px-3 py-1.5 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-xs font-semibold text-white flex items-center gap-1.5 transition shadow">
- <span>+ Issue Cert</span>
- </button>
- <button onclick="openLetsEncryptModal()" class="px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-xs font-semibold text-white flex items-center gap-1.5 transition shadow">
- <span>🔒 Let's Encrypt</span>
- </button>
- <button onclick="openImportCertModal()" class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-medium text-slate-300 transition">
- <span>📥 Import</span>
- </button>
- <button onclick="loadCertificates(true)" class="px-2.5 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs text-slate-400 hover:text-white transition">
- <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 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
- </button>
- </div>
- </div>
- <!-- Cards Summary -->
- <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
- <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <span class="text-[11px] font-mono uppercase text-slate-400">Total Certificates</span>
- <div class="text-xl font-bold font-mono text-white mt-1" id="kpi-certs-total">0</div>
- </div>
- <div class="w-9 h-9 rounded-lg bg-amber-500/10 border border-amber-500/30 flex items-center justify-center text-amber-400 font-bold">📜</div>
- </div>
- <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <span class="text-[11px] font-mono uppercase text-slate-400">Certificate Authorities</span>
- <div class="text-xl font-bold font-mono text-cyan-400 mt-1" id="kpi-certs-ca">0</div>
- </div>
- <div class="w-9 h-9 rounded-lg bg-cyan-500/10 border border-cyan-500/30 flex items-center justify-center text-cyan-400 font-bold">🏛</div>
- </div>
- <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
- <div>
- <span class="text-[11px] font-mono uppercase text-slate-400">HTTPS Web SSL (www-ssl)</span>
- <div class="text-xs font-mono font-bold mt-1" id="kpi-https-status">
- <span class="text-rose-400">Disabled (Port 443)</span>
- </div>
- </div>
- <a href="#services" onclick="navigate('services')" title="Configure in Services" class="text-xs text-slate-400 hover:text-cyan-400 underline">Configure</a>
- </div>
- </div>
- <!-- Certificates Table -->
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs">
- <thead class="bg-slate-950/60 text-slate-400 uppercase font-mono text-[10px] tracking-wider border-b border-slate-800">
- <tr>
- <th class="py-3 px-4">Type</th>
- <th class="py-3 px-4">Name / Common Name</th>
- <th class="py-3 px-4">Issuer</th>
- <th class="py-3 px-4">SANs</th>
- <th class="py-3 px-4">Valid Until</th>
- <th class="py-3 px-4 text-right">Actions</th>
- </tr>
- </thead>
- <tbody id="certs-table-body" class="divide-y divide-slate-800 font-mono">
- <!-- Rendered dynamically -->
- </tbody>
- </table>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: REVERSE PROXY ================= -->
- <section id="section-reverse_proxy" class="hidden space-y-6">
- <!-- Header and Stats Banner -->
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-lg flex flex-wrap items-center justify-between gap-4">
- <div>
- <h3 class="text-base font-bold text-white flex items-center gap-2">
- <svg class="w-5 h-5 text-violet-400" 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>
- <span>Reverse Proxy & Application Gateway</span>
- </h3>
- <p class="text-xs text-slate-400 mt-1">Route HTTP/HTTPS domains and IP path prefixes to backend targets with subfolder forwarding and SSL/TLS termination.</p>
- </div>
- <div class="flex items-center gap-2 flex-wrap">
- <button onclick="openProxyConfigModal()" class="px-3.5 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 text-xs font-semibold flex items-center gap-1.5 transition">
- <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" /><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>Global Settings</span>
- </button>
- <button onclick="loadReverseProxy(true)" class="px-3.5 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 text-xs font-semibold flex items-center gap-1.5 transition">
- <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
- <span>Refresh</span>
- </button>
- <button onclick="openAddProxyRuleModal()" class="px-3.5 py-1.5 rounded-xl bg-violet-600 hover:bg-violet-500 text-white text-xs font-semibold flex items-center gap-1.5 shadow-lg shadow-violet-600/20 transition">
- <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" /></svg>
- <span>Add Proxy Rule</span>
- </button>
- </div>
- </div>
- <!-- Quick Metrics Cards -->
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-4 shadow-sm">
- <div class="text-[11px] font-mono text-slate-400 uppercase tracking-wider">Engine Status</div>
- <div class="text-xl font-bold mt-1.5 flex items-center gap-2" id="proxy-metric-status">
- <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
- <span class="text-white">Active</span>
- </div>
- <div class="text-[10px] text-slate-500 mt-1" id="proxy-metric-ports">HTTP: 80 | HTTPS: 443</div>
- </div>
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-4 shadow-sm">
- <div class="text-[11px] font-mono text-slate-400 uppercase tracking-wider">Configured Rules</div>
- <div class="text-2xl font-bold text-violet-400 mt-1" id="proxy-metric-rules">0</div>
- <div class="text-[10px] text-slate-500 mt-1">Active proxy routes</div>
- </div>
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-4 shadow-sm">
- <div class="text-[11px] font-mono text-slate-400 uppercase tracking-wider">SSL Certificates</div>
- <div class="text-2xl font-bold text-amber-400 mt-1" id="proxy-metric-certs">0</div>
- <div class="text-[10px] text-slate-500 mt-1">Bound to proxy routes</div>
- </div>
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-4 shadow-sm">
- <div class="text-[11px] font-mono text-slate-400 uppercase tracking-wider">Total Requests Proxied</div>
- <div class="text-2xl font-bold text-emerald-400 font-mono mt-1" id="proxy-metric-requests">0</div>
- <div class="text-[10px] text-slate-500 mt-1">Cumulative HTTP/S hits</div>
- </div>
- </div>
- <!-- Proxy Rules Table -->
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
- <div class="p-4 border-b border-slate-800 flex items-center justify-between">
- <h4 class="text-xs font-bold text-slate-300 uppercase tracking-wider font-mono">Proxy Routes & Rules</h4>
- <span class="text-[11px] text-slate-500">Supports wildcards, subpath nesting and SSL termination</span>
- </div>
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs">
- <thead class="bg-slate-950/60 text-slate-400 uppercase font-mono text-[10px] tracking-wider border-b border-slate-800">
- <tr>
- <th class="py-3 px-4">State</th>
- <th class="py-3 px-4">Name / Comment</th>
- <th class="py-3 px-4">Inbound Domain / IP</th>
- <th class="py-3 px-4">Inbound Path</th>
- <th class="py-3 px-4">Target Backend</th>
- <th class="py-3 px-4">Protocol & SSL</th>
- <th class="py-3 px-4">Strip Path</th>
- <th class="py-3 px-4">Requests</th>
- <th class="py-3 px-4 text-right">Actions</th>
- </tr>
- </thead>
- <tbody id="proxy-rules-table-body" class="divide-y divide-slate-800 font-mono">
- <tr>
- <td colspan="9" class="py-8 text-center text-slate-500 text-xs font-sans">Loading proxy rules...</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: SERVICES ================= -->
- <section id="section-services" class="hidden space-y-6">
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-lg flex items-center justify-between">
- <div>
- <h3 class="text-base font-bold text-white flex items-center gap-2">
- <svg class="w-5 h-5 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>
- Management Services
- </h3>
- <p class="text-xs text-slate-400 mt-1">Control management service listeners and listening ports across Web, SSH, and Telnet.</p>
- </div>
- <button onclick="loadServices(true)" class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs text-white flex items-center gap-1.5 transition">
- <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
- <span>Refresh</span>
- </button>
- </div>
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
- <div class="overflow-x-auto">
- <table class="w-full text-left text-xs">
- <thead class="bg-slate-950/60 text-slate-400 uppercase font-mono text-[10px] tracking-wider border-b border-slate-800">
- <tr>
- <th class="py-3 px-4">Service</th>
- <th class="py-3 px-4">Port</th>
- <th class="py-3 px-4">Status</th>
- <th class="py-3 px-4">Description</th>
- <th class="py-3 px-4 text-right">Actions</th>
- </tr>
- </thead>
- <tbody id="services-table-body" class="divide-y divide-slate-800 font-mono">
- <!-- Rendered dynamically -->
- </tbody>
- </table>
- </div>
- </div>
- </section>
- <!-- ================= SECTION: SYSTEM LOGS ================= -->
- <section id="section-updates" class="hidden space-y-6">
- <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 space-y-4 max-w-3xl">
- <h2 class="text-lg font-bold text-white">Git Updates</h2>
- <p class="text-xs text-slate-400">Set the source repository for this appliance. Only a higher stable release version (vMAJOR.MINOR.PATCH tag) can be installed. Installation rebuilds DebTik, restarts the service and keeps the previous binaries for rollback.</p>
- <label class="block text-xs text-slate-300">Repository URL<input id="update-repository" type="url" placeholder="https://git.example.com/team/DebTik.git" class="mt-1 w-full bg-slate-950 border border-slate-700 rounded-lg p-2 text-white font-mono"></label>
- <label class="block text-xs text-slate-300">TLS public key pin (optional for private Git servers)<input id="update-tls-pin" placeholder="sha256//..." class="mt-1 w-full bg-slate-950 border border-slate-700 rounded-lg p-2 text-white font-mono"></label>
- <div class="flex flex-wrap gap-2">
- <button onclick="saveUpdateConfig()" class="bg-sky-700 text-white px-3 py-2 rounded-lg text-xs">Save source</button>
- <button onclick="checkUpdate()" class="bg-slate-700 text-white px-3 py-2 rounded-lg text-xs">Check for updates</button>
- <button id="update-install-button" disabled onclick="startUpdate('install')" class="bg-emerald-700 text-white px-3 py-2 rounded-lg text-xs">Install update</button>
- <button onclick="startUpdate('rollback')" class="bg-amber-700 text-white px-3 py-2 rounded-lg text-xs">Restore previous version</button>
- </div>
- <div class="text-xs font-mono text-slate-300">Installed: <span id="update-installed">—</span><br>Available: <span id="update-available">—</span><br>Status: <span id="update-state">idle</span></div>
- <pre id="update-log" class="bg-slate-950 rounded-lg p-3 text-[11px] text-slate-300 whitespace-pre-wrap max-h-72 overflow-auto"></pre>
- </div>
- </section>
- <section id="section-logs" class="hidden space-y-6">
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-4 shadow-lg flex flex-wrap items-center justify-between gap-4">
- <div class="flex items-center gap-3">
- <div class="relative">
- <span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-500">
- <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>
- </span>
- <input type="text" id="logs-search-input" oninput="renderLogsTable()" placeholder="Search logs..."
- class="bg-slate-950/80 border border-slate-800 rounded-xl pl-9 pr-3 py-1.5 text-xs text-white placeholder-slate-500 font-mono focus:outline-none focus:border-cyan-500 w-64">
- </div>
- <select id="logs-topic-filter" onchange="renderLogsTable()" class="bg-slate-950/80 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
- <option value="">All Topics</option>
- <option value="system">System</option>
- <option value="auth">Auth & Security</option>
- <option value="dhcp">DHCP</option>
- <option value="route">Routing</option>
- <option value="firewall">Firewall</option>
- <option value="error">Errors</option>
- </select>
- <select id="logs-limit-select" onchange="loadLogs(true)" class="bg-slate-950/80 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
- <option value="50">50 entries</option>
- <option value="100" selected>100 entries</option>
- <option value="250">250 entries</option>
- <option value="500">500 entries</option>
- </select>
- </div>
- <div class="flex items-center gap-3">
- <label class="flex items-center gap-2 text-xs text-slate-400 cursor-pointer">
- <input type="checkbox" id="logs-auto-refresh" checked class="rounded bg-slate-800 border-slate-700 text-cyan-500 focus:ring-0">
- <span>Auto-refresh</span>
- </label>
- <button onclick="loadLogs(true)" class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs text-white flex items-center gap-1.5 transition">
- <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
- <span>Refresh</span>
- </button>
- </div>
- </div>
- <div class="bg-slate-900/80 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
- <div class="overflow-x-auto max-h-[650px] overflow-y-auto">
- <table class="w-full text-left text-xs">
- <thead class="sticky top-0 bg-slate-950 text-slate-400 uppercase font-mono text-[10px] tracking-wider border-b border-slate-800 z-10">
- <tr>
- <th class="py-2.5 px-3 w-16">#</th>
- <th class="py-2.5 px-3 w-44">Time</th>
- <th class="py-2.5 px-3 w-36">Topics</th>
- <th class="py-2.5 px-3">Message</th>
- </tr>
- </thead>
- <tbody id="logs-table-body" class="divide-y divide-slate-800/60 font-mono text-[11px]">
- <!-- Rendered dynamically -->
- </tbody>
- </table>
- </div>
- </div>
- </section>
- </main>
- </div>
- </div>
- <!-- ================= MODAL: STATIC DNS RECORD ================= -->
- <div id="modal-static-dns" 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="modal-static-dns-title" class="text-sm font-bold text-white">Add Static DNS Record</h3>
- <button onclick="closeStaticDNSModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="form-static-dns" onsubmit="submitSaveStaticDNS(event)" class="p-6 space-y-4">
- <input type="hidden" id="modal-static-dns-id">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">DNS Name (FQDN or Hostname) *</label>
- <input type="text" id="modal-static-dns-name" placeholder="e.g. router.lan or nas.home" 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">Record Type</label>
- <select id="modal-static-dns-type" 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="A">A (IPv4 Address)</option>
- <option value="AAAA">AAAA (IPv6 Address)</option>
- <option value="CNAME">CNAME (Alias)</option>
- <option value="TXT">TXT (Text record)</option>
- </select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">TTL (Seconds)</label>
- <input type="number" id="modal-static-dns-ttl" min="0" value="3600" 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>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Target IP / Canonical Name *</label>
- <input type="text" id="modal-static-dns-addr" placeholder="e.g. 192.168.130.1 or router.lan" 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">Comment</label>
- <input type="text" id="modal-static-dns-comment" placeholder="Optional description" 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">
- </div>
- <div class="flex items-center space-x-2 pt-1">
- <input type="checkbox" id="modal-static-dns-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500 focus:ring-0">
- <label for="modal-static-dns-disabled" class="text-xs text-slate-300 cursor-pointer">Disabled (Commented out)</label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeStaticDNSModal()" 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">Save Record</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD USER ================= -->
- <div id="modal-add-user" 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">
- <div class="w-7 h-7 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 flex items-center justify-center">
- <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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
- </div>
- <h3 class="text-sm font-bold text-white">Add New User</h3>
- </div>
- <button onclick="closeAddUserModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="form-add-user" onsubmit="submitAddUser(event)" class="p-6 space-y-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Username *</label>
- <input type="text" id="user-add-username" required placeholder="e.g. operator"
- 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-3">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Password *</label>
- <input type="password" id="user-add-password" required placeholder="••••••••"
- 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">Confirm Password *</label>
- <input type="password" id="user-add-confirm" required placeholder="••••••••"
- 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>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Permissions / Role *</label>
- <select id="user-add-role" 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="full">full (Super Administrator - All Capabilities)</option>
- <option value="write">write (Operator - Router & Network Management)</option>
- <option value="read">read (Observer - View Only Access)</option>
- </select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Comment / Description</label>
- <input type="text" id="user-add-comment" placeholder="e.g. NOC shift operator"
- 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">
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeAddUserModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800 transition">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-emerald-600 hover:bg-emerald-500 text-white transition shadow-lg shadow-emerald-600/20">Create User</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: EDIT USER ================= -->
- <div id="modal-edit-user" 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">
- <div class="w-7 h-7 rounded-lg bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 flex items-center justify-center">
- <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
- </div>
- <h3 class="text-sm font-bold text-white">Edit User <span id="user-edit-username-title" class="font-mono text-cyan-400"></span></h3>
- </div>
- <button onclick="closeEditUserModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="form-edit-user" onsubmit="submitEditUser(event)" class="p-6 space-y-4">
- <input type="hidden" id="user-edit-username">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Permissions / Role *</label>
- <select id="user-edit-role" 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="full">full (Super Administrator - All Capabilities)</option>
- <option value="write">write (Operator - Router & Network Management)</option>
- <option value="read">read (Observer - View Only Access)</option>
- </select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Comment / Description</label>
- <input type="text" id="user-edit-comment" placeholder="Optional description"
- 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">
- </div>
- <div class="flex items-center space-x-2 pt-1">
- <input type="checkbox" id="user-edit-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500 focus:ring-0">
- <label for="user-edit-disabled" class="text-xs text-slate-300 cursor-pointer">Account Disabled (Prevent login)</label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeEditUserModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800 transition">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 transition shadow-lg shadow-cyan-600/20">Save Changes</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADMIN RESET PASSWORD ================= -->
- <div id="modal-admin-reset-pw" 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">
- <div class="w-7 h-7 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center">
- <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 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>
- </div>
- <h3 class="text-sm font-bold text-white">Reset Password for <span id="admin-reset-username-title" class="font-mono text-amber-400"></span></h3>
- </div>
- <button onclick="closeAdminResetPasswordModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="form-admin-reset-pw" onsubmit="submitAdminResetPassword(event)" class="p-6 space-y-4">
- <input type="hidden" id="admin-reset-username">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">New Password *</label>
- <input type="password" id="admin-reset-new-pw" required placeholder="Minimum 4 characters"
- 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">Confirm New Password *</label>
- <input type="password" id="admin-reset-confirm-pw" required placeholder="Re-enter password"
- 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="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeAdminResetPasswordModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800 transition">Cancel</button>
- <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white transition shadow-lg shadow-amber-600/20">Set Password</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: CHANGE OWN PASSWORD ================= -->
- <div id="modal-self-password" 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">
- <div class="w-7 h-7 rounded-lg bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 flex items-center justify-center">
- <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 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>
- </div>
- <h3 class="text-sm font-bold text-white">Change My Password</h3>
- </div>
- <button onclick="closeSelfPasswordModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="form-self-password" onsubmit="submitSelfPassword(event)" class="p-6 space-y-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1.5">Current Password *</label>
- <input type="password" id="self-current-password" required placeholder="Current password"
- 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">New Password *</label>
- <input type="password" id="self-new-password" required placeholder="Minimum 4 characters"
- 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">Confirm New Password *</label>
- <input type="password" id="self-confirm-password" required placeholder="Re-enter new password"
- 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="pt-4 border-t border-slate-800 flex justify-end space-x-3">
- <button type="button" onclick="closeSelfPasswordModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800 transition">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 transition shadow-lg shadow-cyan-600/20">Update Password</button>
- </div>
- </form>
- </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">
- <!-- Interface Name & Rename -->
- <div class="bg-slate-950/60 rounded-xl border border-slate-800/80 p-3.5 space-y-2">
- <div class="flex items-center justify-between">
- <label class="block text-xs font-semibold text-slate-300">Interface Name</label>
- <span id="modal-iface-rename-hint" class="text-[10px] text-slate-400 font-mono">Kernel net_device</span>
- </div>
- <div class="flex items-center space-x-2">
- <input type="text" id="modal-iface-new-name" maxlength="15" placeholder="e.g. wan1, eth0, HomeNet" class="flex-1 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">
- <button type="button" id="modal-btn-rename" onclick="renameInterface()" class="px-3.5 py-2 rounded-lg text-xs font-semibold bg-cyan-600 hover:bg-cyan-500 text-white flex items-center gap-1.5 transition">
- <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
- <span>Rename</span>
- </button>
- </div>
- <p id="modal-iface-rename-help" class="text-[10px] text-slate-500">Device name in Linux (max 15 characters). Automatically preserves operational link state and metadata.</p>
- </div>
- <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(state.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(state.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>
- <div class="flex items-center justify-between mb-1.5">
- <label class="block text-xs font-semibold text-slate-300">Role Tag</label>
- <button type="button" onclick="closeIfaceModal(); switchIfaceSubTab('roles')" class="text-[10px] text-cyan-400 hover:underline">Manage Tags</button>
- </div>
- <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">
- </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(state.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: ROLE TAG ================= -->
- <div id="role-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="role-modal-title" class="text-sm font-bold text-white">Add Role Tag</h3>
- <button onclick="closeRoleModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveRole(event)" class="p-6 space-y-4 text-xs font-sans">
- <input type="hidden" id="role-modal-id">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Role Tag Name *</label>
- <input type="text" id="role-modal-name" required placeholder="e.g. VoIP, Cameras, Trunk, Backbone, WAN2"
- 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"
- oninput="updateRoleModalPreview()">
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Color Theme *</label>
- <select id="role-modal-color" onchange="updateRoleModalPreview()"
- 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="amber">Amber (Yellow/Orange)</option>
- <option value="blue" selected>Blue</option>
- <option value="cyan">Cyan (Sky Blue)</option>
- <option value="emerald">Emerald (Green)</option>
- <option value="purple">Purple</option>
- <option value="rose">Rose (Red)</option>
- <option value="indigo">Indigo</option>
- <option value="sky">Sky</option>
- <option value="slate">Slate (Gray)</option>
- </select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Badge Preview</label>
- <div class="h-9 flex items-center">
- <span id="role-modal-preview" class="px-2.5 py-1 rounded text-xs font-semibold bg-blue-500/20 text-blue-300 border border-blue-500/30">Preview</span>
- </div>
- </div>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Description (Optional)</label>
- <input type="text" id="role-modal-desc" placeholder="e.g. Dedicated security & surveillance devices"
- 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="closeRoleModal()" 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-brand-600 hover:bg-brand-500 text-white shadow-lg shadow-brand-500/20">Save Role Tag</button>
- </div>
- </form>
- </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">
- <span class="text-slate-200 font-medium text-xs">Filter 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">Target</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">
- <label class="block text-xs text-slate-300">IP family<select id="filter-modal-family" onchange="refreshFirewallRejectTypes()" class="bg-slate-800 rounded p-2 ml-2"><option value="4">IPv4</option><option value="6">IPv6</option></select></label>
- <!-- 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-select" onchange="syncFilterChainFromSelect()" 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 (routed through router)</option>
- <option value="input">INPUT (destined to this router)</option>
- <option value="output">OUTPUT (generated by this router)</option>
- <option value="__custom__">+ Custom Chain...</option>
- </select>
- <div id="filter-modal-custom-wrap" class="hidden mt-1.5 flex items-center gap-1.5">
- <span class="text-[10px] text-amber-400 font-mono uppercase tracking-wider shrink-0">Custom Chain:</span>
- <input type="text" id="filter-modal-custom-input" oninput="syncFilterCustomChainInput()" placeholder="Enter custom chain name (1-16 chars)" maxlength="16" class="bg-[#15202e] border border-amber-500/50 rounded px-2.5 py-1 text-xs text-amber-300 font-mono focus:outline-none focus:border-amber-400 w-full">
- </div>
- <input type="hidden" id="filter-modal-chain" value="forward">
- <datalist id="filter-chain-options">
- <option value="forward">forward</option>
- <option value="input">input</option>
- <option value="output">output</option>
- </datalist>
- <p id="filter-chain-hint" class="mt-1 text-[11px] text-slate-400">FORWARD: packets routed through this router (accepts both In and Out interfaces).</p>
- <div id="filter-action-incompatible-warn" class="hidden mt-1.5 p-2 bg-amber-950/40 border border-amber-600/40 rounded text-amber-300 text-[11px] flex items-center gap-2">
- <svg class="w-4 h-4 text-amber-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
- <span id="filter-action-incompatible-msg" class="flex-1 font-mono"></span>
- </div>
- </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">ICMP (family-specific)</option><option value="ipv6-icmp">ICMPv6</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">
- <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="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">
- <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="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">SNAT</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">DNAT</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 -->
- <!-- 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 -->
- <!-- Connection Rate -->
- <!-- Per Connection Classifier -->
- <!-- 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 -->
- <!-- Out. Bridge Port List -->
- <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 -->
- <hr class="border-[#213042] my-2">
- <!-- Ingress Priority -->
- <!-- Priority -->
- <!-- 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 -->
- <!-- 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 (UTC)" 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="100/second,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('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 -->
- <!-- PSD -->
- </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">Target</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">SET — add destination to address list</option>
- <option value="add-src-to-address-list">SET — add source to address list</option>
- <option value="drop">DROP</option>
- <option value="jump">JUMP to user chain</option>
- <option value="log">LOG</option>
- <option value="passthrough">COUNT / continue</option>
- <option value="reject">REJECT</option>
- <option value="return">RETURN</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">
- <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('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" novalidate 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">
- <label class="block text-xs text-slate-300">IP family<select id="nat-modal-family" class="bg-slate-800 rounded p-2 ml-2"><option value="4">IPv4</option><option value="6">IPv6</option></select></label>
- <!-- 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-select" onchange="syncNATChainFromSelect()" 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="postrouting" selected>POSTROUTING (outgoing after routing — SNAT / MASQUERADE)</option>
- <option value="prerouting">PREROUTING (incoming before routing — DNAT / REDIRECT)</option>
- <option value="output">OUTPUT (locally generated — DNAT / REDIRECT)</option>
- <option value="input">INPUT (destined to this machine — SNAT)</option>
- <option value="__custom__">+ Custom Chain...</option>
- </select>
- <div id="nat-modal-custom-wrap" class="hidden mt-1.5 flex items-center gap-1.5">
- <span class="text-[10px] text-amber-400 font-mono uppercase tracking-wider shrink-0">Custom Chain:</span>
- <input type="text" id="nat-modal-custom-input" oninput="syncNATCustomChainInput()" placeholder="Enter custom chain name (1-16 chars)" maxlength="16" class="bg-[#15202e] border border-amber-500/50 rounded px-2.5 py-1 text-xs text-amber-300 font-mono focus:outline-none focus:border-amber-400 w-full">
- </div>
- <input type="hidden" id="nat-modal-chain" value="postrouting" oninput="handleNATChainChange()" onchange="handleNATChainChange()">
- <datalist id="nat-chain-options">
- <option value="prerouting">PREROUTING — incoming before routing</option>
- <option value="input">INPUT — delivered to this machine</option>
- <option value="output">OUTPUT — generated by this machine</option>
- <option value="postrouting">POSTROUTING — outgoing after routing</option>
- </datalist>
- <p id="nat-chain-hint" class="mt-1 text-[11px] text-slate-400">POSTROUTING: SNAT/MASQUERADE on traffic leaving this router (Out-Interface only).</p>
- <div id="nat-action-incompatible-warn" class="hidden mt-1.5 p-2 bg-amber-950/40 border border-amber-600/40 rounded text-amber-300 text-[11px] flex items-center gap-2">
- <svg class="w-4 h-4 text-amber-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
- <span id="nat-action-incompatible-msg" class="flex-1 font-mono"></span>
- </div>
- </div>
- </div>
- <!-- 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">Target</label>
- <div class="flex-1">
- <select id="nat-modal-action" onchange="handleNATActionChange()" 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">SET — add destination to address list</option>
- <option value="add-src-to-address-list">SET — add source to address list</option>
- <option value="dst-nat">DNAT</option>
- <option value="jump">JUMP to user chain</option>
- <option value="log">LOG</option>
- <option value="masquerade" selected>MASQUERADE</option>
- <option value="netmap">NETMAP</option>
- <option value="passthrough">COUNT / continue</option>
- <option value="redirect">REDIRECT</option>
- <option value="return">RETURN</option>
- <option value="src-nat">SNAT</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" for="nat-modal-toaddr">Translate to address</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" for="nat-modal-toport">Translate to port (optional)</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>
- <!-- 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">ICMP (family-specific)</option><option value="ipv6-icmp">ICMPv6</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">
- <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="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">
- <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="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 -->
- <!-- 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 -->
- <!-- Connection Rate -->
- <!-- Per Connection Classifier -->
- <!-- 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 -->
- <!-- Out. Bridge Port List -->
- <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 -->
- <!-- Priority -->
- <!-- 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 -->
- <!-- 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 (UTC)" 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="100/second,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('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 -->
- <!-- PSD -->
- </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">
- <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">Target</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">
- <label class="block text-xs text-slate-300">IP family<select id="mangle-modal-family" class="bg-slate-800 rounded p-2 ml-2"><option value="4">IPv4</option><option value="6">IPv6</option></select></label>
- <!-- 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-select" onchange="syncMangleChainFromSelect()" 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 (incoming before routing)</option>
- <option value="input">INPUT (destined to this machine)</option>
- <option value="forward">FORWARD (routed through router)</option>
- <option value="output">OUTPUT (generated by this machine)</option>
- <option value="postrouting">POSTROUTING (outgoing after routing)</option>
- <option value="__custom__">+ Custom Chain...</option>
- </select>
- <div id="mangle-modal-custom-wrap" class="hidden mt-1.5 flex items-center gap-1.5">
- <span class="text-[10px] text-amber-400 font-mono uppercase tracking-wider shrink-0">Custom Chain:</span>
- <input type="text" id="mangle-modal-custom-input" oninput="syncMangleCustomChainInput()" placeholder="Enter custom chain name (1-16 chars)" maxlength="16" class="bg-[#15202e] border border-amber-500/50 rounded px-2.5 py-1 text-xs text-amber-300 font-mono focus:outline-none focus:border-amber-400 w-full">
- </div>
- <input type="hidden" id="mangle-modal-chain" value="prerouting" oninput="handleMangleChainChange()" onchange="handleMangleChainChange()">
- <datalist id="mangle-chain-options">
- <option value="prerouting">prerouting</option>
- <option value="postrouting">postrouting</option>
- <option value="forward">forward</option>
- <option value="input">input</option>
- <option value="output">output</option>
- </datalist>
- <p id="mangle-chain-hint" class="mt-1 text-[11px] text-slate-400">PREROUTING: packets altered before routing decision (In-Interface only).</p>
- <div id="mangle-action-incompatible-warn" class="hidden mt-1.5 p-2 bg-amber-950/40 border border-amber-600/40 rounded text-amber-300 text-[11px] flex items-center gap-2">
- <svg class="w-4 h-4 text-amber-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
- <span id="mangle-action-incompatible-msg" class="flex-1 font-mono"></span>
- </div>
- </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">ICMP (family-specific)</option><option value="ipv6-icmp">ICMPv6</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">
- <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="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">
- <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="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">SNAT</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">DNAT</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 -->
- <!-- 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 -->
- <!-- Connection Rate -->
- <!-- Per Connection Classifier -->
- <!-- 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 -->
- <!-- Out. Bridge Port List -->
- <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</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 -->
- <hr class="border-[#213042] my-2">
- <!-- Ingress Priority -->
- <!-- Priority -->
- <!-- 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 -->
- <!-- 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 -->
- <!-- 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="100/second,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('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 -->
- <!-- 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 (UTC)" 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>
- <!-- 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">Target</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">SET — add destination to address list</option>
- <option value="add-src-to-address-list">SET — add source to address list</option>
- <option value="change-dscp">DSCP</option>
- <option value="change-mss">TCPMSS</option>
- <option value="change-ttl">TTL / HL</option>
- <option value="jump">JUMP to user chain</option>
- <option value="log">LOG</option>
- <option value="mark-connection">CONNMARK — set connection mark</option>
- <option value="mark-packet">MARK — set packet mark</option>
- <option value="mark-routing">MARK — set routing mark</option>
- <option value="passthrough">COUNT / continue</option>
- <option value="return">RETURN</option>
- <option value="set-priority">CLASSIFY</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="64 (set), -1 (decrease), +1 (increase)" 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) -->
- <!-- Sniff Target (when sniff-pc or sniff-tzsp) -->
- <!-- 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>
- <!-- Gateway Health Check & Behind-NAT Internet Prober -->
- <div class="bg-slate-950/80 border border-slate-800 rounded-xl p-4 space-y-3">
- <div class="flex items-center justify-between">
- <label class="font-bold text-white 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
- <span>Gateway Health & Behind-NAT Internet Prober</span>
- </label>
- <span class="text-[10px] px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-300 border border-emerald-500/20 font-mono">Failover Prober</span>
- </div>
- <p class="text-[11px] text-slate-400 leading-relaxed">
- When your router is behind a local modem/ONT/NAT (e.g. 192.168.1.1), the local link stays UP even if the ISP line drops. Enable Internet Check to continuously probe public targets through this gateway and automatically failover if Internet dies.
- </p>
- <div class="grid grid-cols-2 gap-3 pt-1">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Check Mode</label>
- <select id="route-modal-check-gw" onchange="toggleRouteCheckModeUI()" 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="none">None (Standard static route)</option>
- <option value="internet" selected>Internet Check (Detects Behind-NAT Outages)</option>
- <option value="ping">Direct Gateway Ping (Local next-hop only)</option>
- </select>
- </div>
- <div id="route-row-check-target">
- <div class="flex justify-between items-center mb-1">
- <label class="block font-semibold text-slate-300">Probe Target IP</label>
- <div class="flex gap-1 text-[10px] font-mono">
- <button type="button" onclick="setRouteCheckTarget('1.1.1.1')" class="px-1.5 py-0.2 bg-slate-800 hover:bg-slate-700 text-cyan-400 rounded border border-slate-700">1.1.1.1</button>
- <button type="button" onclick="setRouteCheckTarget('8.8.8.8')" class="px-1.5 py-0.2 bg-slate-800 hover:bg-slate-700 text-emerald-400 rounded border border-slate-700">8.8.8.8</button>
- <button type="button" onclick="setRouteCheckTarget('9.9.9.9')" class="px-1.5 py-0.2 bg-slate-800 hover:bg-slate-700 text-purple-400 rounded border border-slate-700">9.9.9.9</button>
- </div>
- </div>
- <input type="text" id="route-modal-check-target" value="1.1.1.1" 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-white font-mono focus:outline-none focus:border-cyan-500">
- </div>
- </div>
- <div id="route-row-check-params" class="grid grid-cols-2 gap-3 pt-1">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Check Interval (Seconds)</label>
- <input type="number" id="route-modal-check-interval" value="5" min="2" max="60" 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">Failure Threshold (Drops)</label>
- <input type="number" id="route-modal-check-threshold" value="3" min="1" max="10" 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" title="Consecutive timeouts before withdrawing route for failover">
- </div>
- </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 VXLAN INTERFACE ================= -->
- <div id="vxlan-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="vxlan-modal-title" class="text-sm font-bold text-white">Add VXLAN Interface</h3>
- <p class="text-[11px] text-slate-400">Virtual Extensible LAN (RFC 7348) L2 Overlay</p>
- </div>
- <button onclick="closeVXLANModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveVXLAN(event)" class="p-6 space-y-4 text-xs font-sans max-h-[85vh] overflow-y-auto">
- <input type="hidden" id="vxlan-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="vxlan-modal-name" placeholder="vxlan100" 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>
- <label class="block font-semibold text-slate-300 mb-1.5">VNI (1 - 16777215) *</label>
- <input type="number" id="vxlan-modal-vni" min="1" max="16777215" placeholder="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-amber-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">UDP Port (Default: 4789)</label>
- <input type="number" id="vxlan-modal-port" value="4789" 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">Overlay IP / CIDR</label>
- <input type="text" id="vxlan-modal-ip" placeholder="e.g. 10.200.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-amber-500">
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Underlay Interface</label>
- <input type="text" id="vxlan-modal-parent" placeholder="e.g. eth0" 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">
- <span class="text-[10px] text-slate-400">Physical/VLAN egress device</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Local Source IP</label>
- <input type="text" id="vxlan-modal-local" placeholder="e.g. 192.168.1.10" 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">
- <span class="text-[10px] text-slate-400">Source VTEP IP for outer UDP</span>
- </div>
- </div>
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Remote IP (Point-to-Point)</label>
- <input type="text" id="vxlan-modal-remote" placeholder="e.g. 192.168.1.20" 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">
- <span class="text-[10px] text-slate-400">Leave empty if using VTEPs list</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Multicast Group (Optional)</label>
- <input type="text" id="vxlan-modal-group" placeholder="e.g. 239.1.1.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-amber-500">
- <span class="text-[10px] text-slate-400">Optional IGMP multicast group</span>
- </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="vxlan-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">MAC Address (Auto if empty)</label>
- <input type="text" id="vxlan-modal-mac" placeholder="02:58: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>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="vxlan-modal-comment" placeholder="Data center overlay network" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </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="vxlan-modal-learning" checked class="rounded bg-slate-800 border-slate-700 text-amber-500">
- <span>MAC Address Learning</span>
- </label>
- <label class="flex items-center space-x-2 text-slate-300">
- <input type="checkbox" id="vxlan-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="closeVXLANModal()" 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">Save Interface</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ADD REMOTE VTEP ================= -->
- <div id="vxlan-vtep-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>
- <h3 id="vxlan-vtep-modal-title" class="text-sm font-bold text-white">Add Remote VTEP</h3>
- <p class="text-[11px] text-slate-400">Unicast peer for VXLAN flood replication</p>
- </div>
- <button onclick="closeVXLANVtepModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitSaveVXLANVtep(event)" class="p-6 space-y-4 text-xs font-sans">
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Parent VXLAN Interface *</label>
- <select id="vxlan-vtep-modal-interface" 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">
- </select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Remote IP Address *</label>
- <input type="text" id="vxlan-vtep-modal-remote" placeholder="e.g. 192.168.10.50" 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">
- <span class="text-[10px] text-slate-400">Unicast transport IP of the remote VTEP</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">UDP Port (Optional)</label>
- <input type="number" id="vxlan-vtep-modal-port" placeholder="Default (interface port)" 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="vxlan-vtep-modal-comment" placeholder="Remote Data Center Host 2" 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="closeVXLANVtepModal()" 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">Add VTEP</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">Noise identity handshake + XChaCha20-Poly1305</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 max-h-[80vh] overflow-y-auto">
- <p id="aerotun-setup-hint" role="status" class="p-3 rounded-lg bg-sky-950/40 text-sky-200"></p>
- <input type="hidden" id="aerotun-modal-id">
- <div class="space-y-2">
- <label class="block text-slate-300">Protocol</label>
- <select id="aerotun-modal-protocol" onchange="updateAeroTUNSetupHint()" class="w-full bg-slate-800 rounded p-2"><option value="3">v3 — Noise, pinned identities and forward secrecy</option><option value="2">v2 — legacy PSK protocol</option></select>
- <div id="aerotun-v3-fields" class="space-y-2">
- <label class="block text-slate-300">Local public key</label>
- <input id="aerotun-modal-public" readonly class="w-full bg-slate-800 rounded p-2 font-mono" placeholder="Generating local identity…">
- <button type="button" onclick="copyAeroTUNPublicKey()" class="text-sky-400 underline">Copy local public key</button>
- <button type="button" id="aerotun-retry-identity" onclick="generateAeroTUNIdentity()" class="hidden text-sky-400 underline ml-3">Retry key generation</button>
- <label class="block text-slate-300">Pinned peer public key</label>
- <input id="aerotun-modal-peerkey" oninput="updateAeroTUNSetupHint()" class="w-full bg-slate-800 rounded p-2 font-mono" placeholder="Public key from the other endpoint">
- <label class="block text-slate-300">Allowed peer source prefixes (comma separated)</label>
- <input id="aerotun-modal-allowed" class="w-full bg-slate-800 rounded p-2 font-mono" placeholder="10.99.0.2/32, 192.168.20.0/24">
- <p class="text-xs text-slate-400">Exchange public keys through a trusted channel. Allowed source prefixes do not create routes.</p>
- </div>
- </div>
- <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" min="0" max="65535" 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" oninput="onAeroTUNPeerChange()" 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">Adds a host route to the 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="togglePasswordVisibility('aerotun-modal-psk')" class="text-[11px] text-slate-300 underline">Show / hide PSK</button>
- <button type="button" onclick="copyAeroTUNPSK()" class="text-[11px] text-sky-400 underline">Copy PSK</button>
- <button type="button" onclick="generateAeroTUNKey()" class="text-[11px] text-sky-400 hover:text-sky-300 underline font-mono">⚡ Generate Key</button>
- </div>
- <input type="password" autocomplete="new-password" id="aerotun-modal-psk" placeholder="Leave blank when editing to retain the existing key" 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 the same random 256-bit PSK and protocol version. V3 also requires pinned peer public keys.</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" min="576" max="9000" 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">Maximum requested MTU; reduced to fit the local underlay</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" 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-filters" onclick="switchBgpPeerModalTab('filters')" class="px-4 py-2 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition">Routing & Filters</button>
- <button type="button" id="bgp-peer-tab-btn-networks" onclick="switchBgpPeerModalTab('networks')" class="px-4 py-2 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition">Advertised Networks</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">Connection Name *</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-name" required placeholder="e.g. Primcast, ebgp-JB172" 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">Comment</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-comment" placeholder="Optional notes / description" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white">
- </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 AS *</label>
- <div class="col-span-2">
- <input type="number" id="modal-bgp-peer-remote-as" required min="1" max="4294967295" placeholder="e.g. 65555" 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 Address *</label>
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-remote-addr" required placeholder="e.g. 192.168.129.225" 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>
- <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 AS (Override)</label>
- <div class="col-span-2">
- <input type="number" id="modal-bgp-peer-local-as" min="1" max="4294967295" placeholder="Leave blank to use Global Router 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">Per-peer Local AS override. If blank, uses global BGP Instance AS.</p>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Local Address & Port</label>
- <div class="col-span-2 grid grid-cols-3 gap-2">
- <div class="col-span-2">
- <input type="text" id="modal-bgp-peer-local-addr" placeholder="Optional bind IP (e.g. 192.168.129.226)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
- </div>
- <div>
- <input type="number" id="modal-bgp-peer-local-port" placeholder="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>
- <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 (External BGP - Default)</option>
- <option value="ibgp">ibgp (Internal BGP)</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">TCP MD5 Secret</label>
- <div class="col-span-2">
- <input type="password" id="modal-bgp-peer-password" placeholder="BGP authentication password (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-start gap-3">
- <label class="text-slate-400 font-medium pt-1">Session Flags</label>
- <div class="col-span-2 space-y-2 text-slate-300">
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-multihop" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>eBGP Multi-hop (allow peers across multiple routing hops)</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-passive" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Passive Mode (Listen only, do not initiate connection actively)</span>
- </label>
- <label class="flex items-center gap-2 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-nexthop-self" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <span>Next-Hop Self (Rewrite next-hop to local router address)</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">Timers (Seconds)</label>
- <div class="col-span-2 grid grid-cols-2 gap-3">
- <div>
- <span class="text-[10px] text-slate-500 block mb-0.5">Hold Time</span>
- <input type="text" id="modal-bgp-peer-holdtime" placeholder="30 (or 00:00:30)" 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">Keepalive Time</span>
- <input type="text" id="modal-bgp-peer-keepalive" placeholder="10 (or 00:00:10)" 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 2: ROUTING & FILTERS -->
- <div id="bgp-peer-tab-filters" class="space-y-4 hidden">
- <datalist id="filter-chains-list"></datalist>
- <div class="p-3 bg-slate-950/40 border border-slate-800 rounded-xl space-y-3">
- <div class="font-bold text-white text-xs">Route Policy Filters</div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">In Filter</label>
- <div class="col-span-2">
- <input type="text" list="filter-chains-list" id="modal-bgp-peer-in-filter" placeholder="e.g. Internal, 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 routes received from this peer</p>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Out Filter</label>
- <div class="col-span-2">
- <input type="text" list="filter-chains-list" id="modal-bgp-peer-out-filter" placeholder="e.g. Internal, 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 routes exported to this peer</p>
- </div>
- </div>
- </div>
- <div class="p-3 bg-slate-950/40 border border-slate-800 rounded-xl space-y-3">
- <div class="font-bold text-white text-xs">Route Redistribution into BGP</div>
- <p class="text-[11px] text-slate-400">Select which router routing sources should be announced to this peer session:</p>
- <div class="space-y-2.5 text-slate-300">
- <label class="flex items-center gap-2.5 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-conn" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <div>
- <span class="font-medium text-white">Redistribute Connected Subnets</span>
- <p class="text-[10px] text-slate-500">Announces directly attached interface networks (RTS_DEVICE)</p>
- </div>
- </label>
- <label class="flex items-center gap-2.5 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-static" checked class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <div>
- <span class="font-medium text-white">Redistribute Static Routes</span>
- <p class="text-[10px] text-slate-500">Announces kernel static routes and blackhole discard routes (distance 255)</p>
- </div>
- </label>
- <label class="flex items-center gap-2.5 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-redist-ospf" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <div>
- <span class="font-medium text-white">Redistribute OSPF Routes</span>
- <p class="text-[10px] text-slate-500">Announces routes learned from OSPF (RTS_OSPF)</p>
- </div>
- </label>
- <label class="flex items-center gap-2.5 cursor-pointer">
- <input type="checkbox" id="modal-bgp-peer-default-orig" class="rounded text-cyan-500 bg-slate-800 border-slate-700">
- <div>
- <span class="font-medium text-white">Default Originate (0.0.0.0/0)</span>
- <p class="text-[10px] text-slate-500">Always generate and announce a default gateway route to this peer</p>
- </div>
- </label>
- </div>
- </div>
- </div>
- <!-- TAB 3: ADVERTISED NETWORKS -->
- <div id="bgp-peer-tab-networks" class="space-y-4 hidden">
- <div class="p-3 bg-purple-950/20 border border-purple-800/40 rounded-xl flex items-start gap-3">
- <span class="text-purple-400 text-base">🛡️</span>
- <div class="text-[11px] text-slate-300">
- <div class="font-semibold text-purple-300 mb-0.5">Blackhole Discard (Distance 255) Protection</div>
- Advertised networks listed here are announced directly to this peer. The router automatically installs a blackhole discard route with metric 255 in the Linux kernel routing table so your BGP daemon can reliably originate the prefix even if physical interfaces flap or subnets have unassigned addresses, eliminating packet bouncing and routing loops.
- </div>
- </div>
- <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 class="p-2.5 rounded-lg bg-purple-950/30 border border-purple-800/40 text-[11px] text-purple-300">
- <span class="font-bold">🛡️ Discard Route:</span> Advertised prefixes automatically maintain a kernel blackhole route with metric 255 so BGP originates the prefix reliably without routing loops.
- </div>
- <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>
- <label class="flex items-center gap-2 cursor-pointer text-slate-300">
- <input type="checkbox" id="modal-ospf-inst-redist-default" onchange="toggleOspfDefaultModeUI()" class="rounded text-sky-500 bg-slate-800 border-slate-700">
- <span>default (0.0.0.0/0)</span>
- </label>
- </div>
- </div>
- <div id="row-ospf-inst-originate-default" class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Originate Default</label>
- <div class="col-span-2">
- <select id="modal-ospf-inst-originate-default" onchange="onOspfOriginateDefaultChange()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white">
- <option value="never">never (Disabled)</option>
- <option value="if-installed">if-installed (Only if default route present)</option>
- <option value="always">always (Always advertise 0.0.0.0/0)</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 items-center gap-3">
- <label class="text-slate-400 font-medium">Default Metric</label>
- <div class="col-span-2">
- <input type="number" id="modal-ospf-inst-default-metric" placeholder="10" min="0" 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>
- <!-- 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>
- <option value="passthrough">passthrough</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: 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>
- <!-- ================= MODAL: RIP INSTANCE ================= -->
- <div id="rip-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-xl 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">
- <h3 id="rip-instance-modal-title" class="text-sm font-bold text-white flex items-center gap-2">
- <span class="text-rose-400">⚡</span> <span>RIP Instance</span>
- </h3>
- <button onclick="closeRipInstanceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitRipInstance(event)" class="p-6 space-y-4 text-xs max-h-[85vh] overflow-y-auto">
- <input type="hidden" id="modal-rip-instance-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Instance Name *</label>
- <input type="text" id="modal-rip-instance-name" required placeholder="rip1" 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">Protocol Version</label>
- <select id="modal-rip-instance-version" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- <option value="rip2">RIPv2 (IPv4)</option>
- <option value="ripng">RIPng (IPv6)</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 gap-3">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Update Time (s)</label>
- <input type="number" id="modal-rip-instance-update" value="30" min="1" max="3600" 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">Timeout (s)</label>
- <input type="number" id="modal-rip-instance-timeout" value="180" min="1" max="3600" 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">Garbage (s)</label>
- <input type="number" id="modal-rip-instance-garbage" value="120" min="1" max="3600" 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">Default Metric</label>
- <input type="number" id="modal-rip-instance-metric" value="1" min="1" max="16" 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">Comment</label>
- <input type="text" id="modal-rip-instance-comment" placeholder="Optional notes" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- </div>
- <div class="border-t border-slate-800 pt-3">
- <label class="block font-semibold text-slate-300 mb-2">Route Redistribution</label>
- <div class="grid grid-cols-3 gap-2 text-slate-300">
- <label class="flex items-center gap-1.5"><input type="checkbox" id="modal-rip-instance-redist-conn" class="rounded text-rose-500 bg-slate-800 border-slate-700"> Connected</label>
- <label class="flex items-center gap-1.5"><input type="checkbox" id="modal-rip-instance-redist-static" class="rounded text-rose-500 bg-slate-800 border-slate-700"> Static</label>
- <label class="flex items-center gap-1.5"><input type="checkbox" id="modal-rip-instance-redist-bgp" class="rounded text-rose-500 bg-slate-800 border-slate-700"> BGP</label>
- <label class="flex items-center gap-1.5"><input type="checkbox" id="modal-rip-instance-redist-ospf" class="rounded text-rose-500 bg-slate-800 border-slate-700"> OSPF</label>
- <label class="flex items-center gap-1.5"><input type="checkbox" id="modal-rip-instance-redist-default" class="rounded text-rose-500 bg-slate-800 border-slate-700"> Default Route</label>
- </div>
- </div>
- <div class="pt-2 flex items-center gap-2">
- <label class="flex items-center gap-2 text-slate-300">
- <input type="checkbox" id="modal-rip-instance-enabled" checked class="rounded text-rose-500 bg-slate-800 border-slate-700">
- <span class="font-semibold">Enabled</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-2">
- <button type="button" onclick="closeRipInstanceModal()" 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-rose-600 hover:bg-rose-500 text-white shadow-lg shadow-rose-500/20">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: RIP INTERFACE ================= -->
- <div id="rip-interface-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/60">
- <h3 id="rip-interface-modal-title" class="text-sm font-bold text-white flex items-center gap-2">
- <span class="text-rose-400">⚡</span> <span>RIP Interface Template</span>
- </h3>
- <button onclick="closeRipInterfaceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitRipInterface(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="modal-rip-iface-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Interface Pattern *</label>
- <input type="text" id="modal-rip-iface-pattern" required placeholder="e.g. eth0, lan*, or *" 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">RIP Instance</label>
- <input type="text" id="modal-rip-iface-instance" placeholder="rip1" 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">Mode</label>
- <select id="modal-rip-iface-mode" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- <option value="multicast">Multicast (224.0.0.9)</option>
- <option value="broadcast">Broadcast</option>
- </select>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Metric Cost</label>
- <input type="number" id="modal-rip-iface-metric" value="1" min="1" max="16" 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">Comment</label>
- <input type="text" id="modal-rip-iface-comment" placeholder="Optional notes" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="flex items-center gap-6 pt-2">
- <label class="flex items-center gap-2 text-slate-300">
- <input type="checkbox" id="modal-rip-iface-enabled" checked class="rounded text-rose-500 bg-slate-800 border-slate-700">
- <span class="font-semibold">Enabled</span>
- </label>
- <label class="flex items-center gap-2 text-slate-300">
- <input type="checkbox" id="modal-rip-iface-passive" class="rounded text-rose-500 bg-slate-800 border-slate-700">
- <span>Passive Interface</span>
- </label>
- <label class="flex items-center gap-2 text-slate-300">
- <input type="checkbox" id="modal-rip-iface-bfd" class="rounded text-rose-500 bg-slate-800 border-slate-700">
- <span>Use BFD</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-2">
- <button type="button" onclick="closeRipInterfaceModal()" 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-rose-600 hover:bg-rose-500 text-white shadow-lg shadow-rose-500/20">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: BFD INTERFACE ================= -->
- <div id="bfd-interface-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/60">
- <h3 id="bfd-interface-modal-title" class="text-sm font-bold text-white flex items-center gap-2">
- <span class="text-amber-400">⏱</span> <span>BFD Interface Profile</span>
- </h3>
- <button onclick="closeBfdInterfaceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitBfdInterface(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="modal-bfd-iface-id">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Interface Pattern *</label>
- <input type="text" id="modal-bfd-iface-pattern" required placeholder="e.g. eth*, wg*, or *" 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">Min RX Interval (ms)</label>
- <input type="number" id="modal-bfd-iface-min-rx" value="100" min="10" max="60000" 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">Min TX Interval (ms)</label>
- <input type="number" id="modal-bfd-iface-min-tx" value="100" min="10" max="60000" 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">Idle TX Interval (ms)</label>
- <input type="number" id="modal-bfd-iface-idle-tx" value="1000" min="100" max="60000" 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">Multiplier</label>
- <input type="number" id="modal-bfd-iface-multiplier" value="3" min="2" max="255" 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">Comment</label>
- <input type="text" id="modal-bfd-iface-comment" placeholder="Optional notes" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="flex items-center gap-6 pt-2">
- <label class="flex items-center gap-2 text-slate-300">
- <input type="checkbox" id="modal-bfd-iface-enabled" checked class="rounded text-amber-500 bg-slate-800 border-slate-700">
- <span class="font-semibold">Enabled</span>
- </label>
- <label class="flex items-center gap-2 text-slate-300">
- <input type="checkbox" id="modal-bfd-iface-passive" class="rounded text-amber-500 bg-slate-800 border-slate-700">
- <span>Passive</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-2">
- <button type="button" onclick="closeBfdInterfaceModal()" 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-amber-600 hover:bg-amber-500 text-white shadow-lg shadow-amber-500/20">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: BFD PEER ================= -->
- <div id="bfd-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-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/60">
- <h3 id="bfd-peer-modal-title" class="text-sm font-bold text-white flex items-center gap-2">
- <span class="text-amber-400">⏱</span> <span>Static BFD Peer</span>
- </h3>
- <button onclick="closeBfdPeerModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitBfdPeer(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="modal-bfd-peer-id">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Neighbor IP Address *</label>
- <input type="text" id="modal-bfd-peer-address" required placeholder="e.g. 192.168.1.1 or 2001:db8::1" 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">Interface (Device)</label>
- <input type="text" id="modal-bfd-peer-interface" placeholder="Optional e.g. eth0" 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">Comment</label>
- <input type="text" id="modal-bfd-peer-comment" placeholder="Optional notes" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- <div class="flex items-center gap-6 pt-2">
- <label class="flex items-center gap-2 text-slate-300">
- <input type="checkbox" id="modal-bfd-peer-enabled" checked class="rounded text-amber-500 bg-slate-800 border-slate-700">
- <span class="font-semibold">Enabled</span>
- </label>
- <label class="flex items-center gap-2 text-slate-300">
- <input type="checkbox" id="modal-bfd-peer-multihop" class="rounded text-amber-500 bg-slate-800 border-slate-700">
- <span>Multihop</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-2">
- <button type="button" onclick="closeBfdPeerModal()" 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-amber-600 hover:bg-amber-500 text-white shadow-lg shadow-amber-500/20">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: BABEL INSTANCE ================= -->
- <div id="babel-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-xl 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">
- <h3 id="babel-instance-modal-title" class="text-sm font-bold text-white flex items-center gap-2">
- <span class="text-teal-400">🌐</span> <span>Babel Instance</span>
- </h3>
- <button onclick="closeBabelInstanceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitBabelInstance(event)" class="p-6 space-y-4 text-xs max-h-[85vh] overflow-y-auto">
- <input type="hidden" id="modal-babel-instance-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Instance Name *</label>
- <input type="text" id="modal-babel-instance-name" required placeholder="babel1" 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">Router ID</label>
- <input type="text" id="modal-babel-instance-routerid" placeholder="Auto or e.g. 10.42.0.1" 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">Default Metric</label>
- <input type="number" id="modal-babel-instance-metric" 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">Comment</label>
- <input type="text" id="modal-babel-instance-comment" placeholder="Optional notes" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
- </div>
- </div>
- <div class="border-t border-slate-800 pt-3">
- <label class="block font-semibold text-slate-300 mb-2">Route Redistribution</label>
- <div class="grid grid-cols-3 gap-2 text-slate-300">
- <label class="flex items-center gap-1.5"><input type="checkbox" id="modal-babel-instance-redist-conn" class="rounded text-teal-500 bg-slate-800 border-slate-700"> Connected</label>
- <label class="flex items-center gap-1.5"><input type="checkbox" id="modal-babel-instance-redist-static" class="rounded text-teal-500 bg-slate-800 border-slate-700"> Static</label>
- <label class="flex items-center gap-1.5"><input type="checkbox" id="modal-babel-instance-redist-bgp" class="rounded text-teal-500 bg-slate-800 border-slate-700"> BGP</label>
- <label class="flex items-center gap-1.5"><input type="checkbox" id="modal-babel-instance-redist-ospf" class="rounded text-teal-500 bg-slate-800 border-slate-700"> OSPF</label>
- <label class="flex items-center gap-1.5"><input type="checkbox" id="modal-babel-instance-redist-default" class="rounded text-teal-500 bg-slate-800 border-slate-700"> Default Route</label>
- </div>
- </div>
- <div class="pt-2 flex items-center gap-2">
- <label class="flex items-center gap-2 text-slate-300">
- <input type="checkbox" id="modal-babel-instance-enabled" checked class="rounded text-teal-500 bg-slate-800 border-slate-700">
- <span class="font-semibold">Enabled</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-2">
- <button type="button" onclick="closeBabelInstanceModal()" 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-teal-600 hover:bg-teal-500 text-white shadow-lg shadow-teal-500/20">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: BABEL INTERFACE ================= -->
- <div id="babel-interface-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/60">
- <h3 id="babel-interface-modal-title" class="text-sm font-bold text-white flex items-center gap-2">
- <span class="text-teal-400">🌐</span> <span>Babel Interface Template</span>
- </h3>
- <button onclick="closeBabelInterfaceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitBabelInterface(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="modal-babel-iface-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Interface Pattern *</label>
- <input type="text" id="modal-babel-iface-pattern" required placeholder="e.g. eth0, wlan*, or *" 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">Link Type</label>
- <select id="modal-babel-iface-type" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
- <option value="wired">Wired (Ethernet / Tunnel)</option>
- <option value="wireless">Wireless (Mesh)</option>
- </select>
- </div>
- </div>
- <div class="grid grid-cols-3 gap-3">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">RX Cost</label>
- <input type="number" id="modal-babel-iface-rxcost" 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">Hello Interval (s)</label>
- <input type="number" id="modal-babel-iface-hello" value="4" min="1" max="3600" 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">Update Interval (s)</label>
- <input type="number" id="modal-babel-iface-update" value="16" min="1" max="3600" 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">Comment</label>
- <input type="text" id="modal-babel-iface-comment" placeholder="Optional notes" 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 gap-2 text-slate-300">
- <input type="checkbox" id="modal-babel-iface-enabled" checked class="rounded text-teal-500 bg-slate-800 border-slate-700">
- <span class="font-semibold">Enabled</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-2">
- <button type="button" onclick="closeBabelInterfaceModal()" 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-teal-600 hover:bg-teal-500 text-white shadow-lg shadow-teal-500/20">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: RADV INSTANCE ================= -->
- <div id="radv-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-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/60">
- <h3 id="radv-instance-modal-title" class="text-sm font-bold text-white flex items-center gap-2">
- <span class="text-blue-400">📢</span> <span>RAdv Instance</span>
- </h3>
- <button onclick="closeRAdvInstanceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitRAdvInstance(event)" class="p-6 space-y-4 text-xs">
- <input type="hidden" id="modal-radv-instance-id">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Instance Name *</label>
- <input type="text" id="modal-radv-instance-name" required placeholder="radv1" 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">Comment</label>
- <input type="text" id="modal-radv-instance-comment" placeholder="Optional notes" 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 gap-2 text-slate-300">
- <input type="checkbox" id="modal-radv-instance-enabled" checked class="rounded text-blue-500 bg-slate-800 border-slate-700">
- <span class="font-semibold">Enabled</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-2">
- <button type="button" onclick="closeRAdvInstanceModal()" 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-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-500/20">OK</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: RADV INTERFACE ================= -->
- <div id="radv-interface-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/60">
- <h3 id="radv-interface-modal-title" class="text-sm font-bold text-white flex items-center gap-2">
- <span class="text-blue-400">📢</span> <span>RAdv Interface Profile</span>
- </h3>
- <button onclick="closeRAdvInterfaceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form onsubmit="submitRAdvInterface(event)" class="p-6 space-y-4 text-xs max-h-[85vh] overflow-y-auto">
- <input type="hidden" id="modal-radv-iface-id">
- <div class="grid grid-cols-2 gap-4">
- <div>
- <label class="block font-semibold text-slate-300 mb-1">Interface *</label>
- <input type="text" id="modal-radv-iface-interface" required placeholder="e.g. eth0 or lan0" 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">Instance</label>
- <input type="text" id="modal-radv-iface-instance" placeholder="radv1" 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">Min RA Interval (s)</label>
- <input type="number" id="modal-radv-iface-min-ra" value="200" min="3" max="1800" 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">Max RA Interval (s)</label>
- <input type="number" id="modal-radv-iface-max-ra" value="600" min="4" max="1800" 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">Default Lifetime (s)</label>
- <input type="number" id="modal-radv-iface-lifetime" value="1800" min="0" max="9000" 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">Hop Limit</label>
- <input type="number" id="modal-radv-iface-hoplimit" value="64" min="0" max="255" 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">Advertised IPv6 Prefixes (comma-separated)</label>
- <input type="text" id="modal-radv-iface-prefixes" placeholder="e.g. 2001:db8:1::/64, fd00::/64" 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">RDNSS IPv6 DNS Servers (comma-separated)</label>
- <input type="text" id="modal-radv-iface-rdnss" placeholder="e.g. 2001:4860:4860::8888, 2606:4700:4700::1111" 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">Comment</label>
- <input type="text" id="modal-radv-iface-comment" placeholder="Optional notes" 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 gap-2 text-slate-300">
- <input type="checkbox" id="modal-radv-iface-enabled" checked class="rounded text-blue-500 bg-slate-800 border-slate-700">
- <span class="font-semibold">Enabled</span>
- </label>
- </div>
- <div class="pt-4 border-t border-slate-800 flex justify-end space-x-2">
- <button type="button" onclick="closeRAdvInterfaceModal()" 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-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-500/20">OK</button>
- </div>
- </form>
- </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="grid grid-cols-2 gap-4">
- <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">
- <span class="text-[10px] text-slate-400">Leave blank to use CIDR mask</span>
- </div>
- <div>
- <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
- <input type="text" id="dhcp-network-modal-comment" placeholder="e.g. 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">
- <span class="text-[10px] text-slate-400">Informational label</span>
- </div>
- </div>
- <div class="p-3.5 bg-slate-950/60 border border-slate-800 rounded-xl space-y-2">
- <div class="flex items-center justify-between">
- <label class="block font-semibold text-slate-300">Linked Custom DHCP Options</label>
- <button type="button" onclick="closeDHCPNetworkModal(); switchDHCPServerTab('options')" class="text-[10px] text-cyan-400 hover:underline">Manage Options</button>
- </div>
- <p class="text-[11px] text-slate-400">Select any DHCP options (NTP #42, TFTP #66, PXE Boot #67, WINS #44, UniFi #43, CAPWAP #138, VoIP #150, WPAD #252) to distribute to clients on this subnet:</p>
- <div id="dhcp-network-modal-options-list" class="grid grid-cols-2 gap-2 p-2 bg-slate-900 border border-slate-800 rounded-lg max-h-40 overflow-y-auto font-mono text-[11px]">
- <!-- Dynamically populated options checkboxes -->
- </div>
- </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">RSTP (requires mstpd)</option>
- <option value="stp" selected>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" disabled class="rounded bg-slate-800 border-slate-700 text-sky-500">
- <span class="text-white font-semibold">Ingress filtering (controlled by bridge VLAN 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>
- <!-- ================= MODAL: EDIT SERVICE PORT ================= -->
- <div id="modal-service-edit" 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">
- <div class="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/50">
- <h3 id="modal-service-title" class="text-sm font-bold text-white 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="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>Edit Service Port</span>
- </h3>
- <button type="button" onclick="closeEditServiceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="form-service-edit" onsubmit="submitSaveServicePort(event)" class="p-5 space-y-4">
- <input type="hidden" id="modal-service-name">
- <input type="hidden" id="modal-service-disabled">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Service</label>
- <div id="modal-service-display-name" class="font-mono text-xs font-bold text-cyan-400 bg-slate-950/80 border border-slate-800 rounded-lg px-3 py-2 uppercase">SSH</div>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Listening Port (1 - 65535) *</label>
- <input type="number" id="modal-service-port" min="1" max="65535" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
- <p id="modal-service-port-hint" class="text-[10px] text-slate-500 mt-1"></p>
- </div>
- <div id="modal-service-cert-group" class="hidden">
- <label class="block text-xs font-semibold text-slate-300 mb-1">SSL/TLS Certificate *</label>
- <select id="modal-service-cert-select" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
- <option value="">-- No Certificate Selected --</option>
- </select>
- <p class="text-[10px] text-slate-500 mt-1">Select an issued or imported certificate from the Certificates section.</p>
- </div>
- <div id="modal-service-warning" class="hidden p-3 rounded-lg bg-amber-500/10 border border-amber-500/30 text-amber-300 text-xs">
- ⚠️ <strong>Προσοχή:</strong> Η αλλαγή της πόρτας του Web UI θα αλλάξει τη διεύθυνση URL με την οποία συνδέεσαι.
- </div>
- <div class="pt-2 flex items-center justify-end space-x-2">
- <button type="button" onclick="closeEditServiceModal()" class="px-3.5 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-medium text-slate-300 transition">Cancel</button>
- <button type="submit" class="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-xs font-semibold text-white shadow transition">Save Settings</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: CREATE CA ================= -->
- <div id="modal-create-ca" 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">
- <div class="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/50">
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <span class="text-blue-400">🏛</span>
- <span>Create Certificate Authority (CA)</span>
- </h3>
- <button type="button" onclick="closeCreateCAModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="form-create-ca" onsubmit="submitCreateCA(event)" class="p-5 space-y-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">CA Identifier / Name *</label>
- <input type="text" id="ca-name" placeholder="e.g. root-ca or debtik-ca" required class="w-full bg-slate-950 border border-slate-800 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">Common Name (CN) *</label>
- <input type="text" id="ca-cn" placeholder="e.g. DebTik Root Certificate Authority" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-blue-500">
- </div>
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Organization</label>
- <input type="text" id="ca-org" value="DebTik Network Appliance" class="w-full bg-slate-950 border border-slate-800 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">Country</label>
- <input type="text" id="ca-country" value="GR" maxlength="2" class="w-full bg-slate-950 border border-slate-800 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-3">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Validity (Days)</label>
- <input type="number" id="ca-days" value="3650" min="30" max="36500" class="w-full bg-slate-950 border border-slate-800 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">Key Algorithm</label>
- <select id="ca-key-type" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-blue-500">
- <option value="RSA-2048">RSA 2048-bit (Standard)</option>
- <option value="RSA-4096">RSA 4096-bit (High Security)</option>
- <option value="ECDSA-P256">ECDSA P-256 (Fast/Modern)</option>
- </select>
- </div>
- </div>
- <div class="pt-2 flex items-center justify-end space-x-2">
- <button type="button" onclick="closeCreateCAModal()" class="px-3.5 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-medium text-slate-300 transition">Cancel</button>
- <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-xs font-semibold text-white shadow transition">Generate CA</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: ISSUE CERTIFICATE ================= -->
- <div id="modal-create-cert" 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">
- <div class="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/50">
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <span class="text-cyan-400">📜</span>
- <span>Issue TLS Certificate</span>
- </h3>
- <button type="button" onclick="closeCreateCertModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="form-create-cert" onsubmit="submitCreateCert(event)" class="p-5 space-y-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Certificate Identifier / Name *</label>
- <input type="text" id="cert-name" placeholder="e.g. web-cert or router-lan" required class="w-full bg-slate-950 border border-slate-800 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">Common Name (CN) * (Hostname, Domain, or IP)</label>
- <input type="text" id="cert-cn" placeholder="e.g. router.lan or 192.168.1.1" required class="w-full bg-slate-950 border border-slate-800 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">Sign with Certificate Authority (CA)</label>
- <select id="cert-ca-select" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
- <option value="">[ Self-Signed Certificate ]</option>
- </select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Subject Alternative Names (SANs) - comma separated</label>
- <input type="text" id="cert-sans" placeholder="e.g. 192.168.1.1, router.local, router.lan, 127.0.0.1" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
- <p class="text-[10px] text-slate-500 mt-1">Browser validation requires matching SANs for all IPs or domains used to access the router.</p>
- </div>
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Validity (Days)</label>
- <input type="number" id="cert-days" value="730" min="1" max="7300" class="w-full bg-slate-950 border border-slate-800 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">Key Algorithm</label>
- <select id="cert-key-type" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
- <option value="RSA-2048">RSA 2048-bit (Standard)</option>
- <option value="RSA-4096">RSA 4096-bit (High Security)</option>
- <option value="ECDSA-P256">ECDSA P-256 (Fast/Modern)</option>
- </select>
- </div>
- </div>
- <div class="pt-2 flex items-center justify-end space-x-2">
- <button type="button" onclick="closeCreateCertModal()" class="px-3.5 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-medium text-slate-300 transition">Cancel</button>
- <button type="submit" class="px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-xs font-semibold text-white shadow transition">Issue Certificate</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: LET'S ENCRYPT ================= -->
- <div id="modal-letsencrypt" 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">
- <div class="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/50">
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <span class="text-emerald-400">🔒</span>
- <span>Let's Encrypt Automated Certificate</span>
- </h3>
- <button type="button" onclick="closeLetsEncryptModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="form-letsencrypt" onsubmit="submitLetsEncrypt(event)" class="p-5 space-y-4">
- <div class="p-3 bg-emerald-500/10 border border-emerald-500/30 rounded-xl text-emerald-300 text-xs space-y-1">
- <div class="font-bold">Automated HTTP-01 Validation</div>
- <div class="text-[11px] text-emerald-300/80">To issue a trusted Let's Encrypt certificate, your domain name must publicly point to this router on port 80. The router will automatically answer the ACME challenge.</div>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Domain Name (FQDN) *</label>
- <input type="text" id="le-domain" placeholder="e.g. router.mydomain.com" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Contact Email *</label>
- <input type="email" id="le-email" placeholder="e.g. admin@mydomain.com" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Certificate Name / Alias</label>
- <input type="text" id="le-name" placeholder="Leave blank to use domain name" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-emerald-500">
- </div>
- <div class="flex items-center gap-2 pt-1">
- <input type="checkbox" id="le-staging" class="rounded bg-slate-950 border-slate-800 text-emerald-500">
- <label for="le-staging" class="text-xs text-slate-300 cursor-pointer">Use Let's Encrypt Staging API (for testing without rate limits)</label>
- </div>
- <div class="pt-2 flex items-center justify-end space-x-2">
- <button type="button" onclick="closeLetsEncryptModal()" class="px-3.5 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-medium text-slate-300 transition">Cancel</button>
- <button type="submit" id="btn-submit-letsencrypt" class="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-xs font-semibold text-white shadow transition flex items-center gap-2">
- <span>Request Certificate</span>
- </button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: IMPORT CERTIFICATE ================= -->
- <div id="modal-import-cert" 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">
- <div class="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/50">
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <span class="text-slate-400">📥</span>
- <span>Import PEM Certificate & Private Key</span>
- </h3>
- <button type="button" onclick="closeImportCertModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="form-import-cert" onsubmit="submitImportCert(event)" class="p-5 space-y-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Certificate Identifier / Name *</label>
- <input type="text" id="import-cert-name" placeholder="e.g. wildcard-cert" required class="w-full bg-slate-950 border border-slate-800 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">Certificate (PEM Format) *</label>
- <textarea id="import-cert-pem" rows="5" placeholder="-----BEGIN CERTIFICATE----- ... -----END CERTIFICATE-----" required class="w-full bg-slate-950 border border-slate-800 rounded-lg p-2.5 text-xs text-white font-mono focus:outline-none focus:border-cyan-500"></textarea>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Private Key (PEM Format) *</label>
- <textarea id="import-key-pem" rows="5" placeholder="-----BEGIN PRIVATE KEY----- ... -----END PRIVATE KEY-----" required class="w-full bg-slate-950 border border-slate-800 rounded-lg p-2.5 text-xs text-white font-mono focus:outline-none focus:border-cyan-500"></textarea>
- </div>
- <div class="pt-2 flex items-center justify-end space-x-2">
- <button type="button" onclick="closeImportCertModal()" class="px-3.5 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-medium text-slate-300 transition">Cancel</button>
- <button type="submit" class="px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-xs font-semibold text-white shadow transition">Import Certificate</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: VIEW / EXPORT CERTIFICATE ================= -->
- <div id="modal-view-cert" 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">
- <div class="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/50">
- <h3 id="view-cert-modal-title" class="text-sm font-bold text-white flex items-center gap-2">
- <span>Certificate Details</span>
- </h3>
- <button type="button" onclick="closeViewCertModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <div class="p-5 space-y-4">
- <div class="grid grid-cols-2 gap-3 text-xs font-mono bg-slate-950/60 p-3 rounded-xl border border-slate-800/80">
- <div><span class="text-slate-500">Common Name:</span> <span id="view-cert-cn" class="text-white font-bold">-</span></div>
- <div><span class="text-slate-500">Issuer:</span> <span id="view-cert-issuer" class="text-cyan-400">-</span></div>
- <div><span class="text-slate-500">Type / Key:</span> <span id="view-cert-type" class="text-emerald-400">-</span></div>
- <div><span class="text-slate-500">Valid Until:</span> <span id="view-cert-validto" class="text-white">-</span></div>
- <div class="col-span-2 truncate"><span class="text-slate-500">SANs:</span> <span id="view-cert-sans" class="text-slate-300">-</span></div>
- <div class="col-span-2 truncate"><span class="text-slate-500">SHA256 Fingerprint:</span> <span id="view-cert-fp" class="text-amber-400 text-[10px]">-</span></div>
- </div>
- <div>
- <div class="flex items-center justify-between mb-1">
- <span class="text-xs font-semibold text-slate-300">Certificate (PEM)</span>
- <button onclick="copyCertPEM()" class="text-[11px] text-cyan-400 hover:text-cyan-300 font-mono">Copy Cert</button>
- </div>
- <textarea id="view-cert-pem-text" readonly rows="6" class="w-full bg-slate-950 border border-slate-800 rounded-lg p-2 text-[11px] text-slate-300 font-mono"></textarea>
- </div>
- <div>
- <div class="flex items-center justify-between mb-1">
- <span class="text-xs font-semibold text-slate-300">Private Key (PEM)</span>
- <button onclick="copyKeyPEM()" class="text-[11px] text-cyan-400 hover:text-cyan-300 font-mono">Copy Key</button>
- </div>
- <textarea id="view-key-pem-text" readonly rows="4" class="w-full bg-slate-950 border border-slate-800 rounded-lg p-2 text-[11px] text-slate-300 font-mono"></textarea>
- </div>
- <div class="flex justify-end pt-2">
- <button type="button" onclick="closeViewCertModal()" class="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-medium text-slate-300 transition">Close</button>
- </div>
- </div>
- </div>
- </div>
- <!-- ================= MODAL: ADD / EDIT REVERSE PROXY RULE ================= -->
- <div id="modal-proxy-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-xl shadow-2xl overflow-hidden max-h-[90vh] flex flex-col">
- <div class="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/50">
- <h3 id="proxy-rule-modal-title" class="text-sm font-bold text-white flex items-center gap-2">
- <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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" /></svg>
- <span>Add Reverse Proxy Rule</span>
- </h3>
- <button type="button" onclick="closeProxyRuleModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="proxy-rule-form" onsubmit="saveProxyRule(event)" class="p-5 space-y-4 overflow-y-auto flex-1">
- <input type="hidden" id="proxy-rule-id">
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Rule Name *</label>
- <input type="text" id="proxy-rule-name" placeholder="e.g. Nextcloud or WebApp" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-violet-500">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Protocol</label>
- <select id="proxy-rule-proto" onchange="onProxyProtoChange()" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-violet-500">
- <option value="both">HTTP & HTTPS (Both)</option>
- <option value="https">HTTPS Only</option>
- <option value="http">HTTP Only</option>
- </select>
- </div>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Inbound Domain / Hostname / IP</label>
- <input type="text" id="proxy-rule-domains" placeholder="e.g. example.com, app.example.com, 192.168.1.100, or * for any" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-violet-500">
- <p class="text-[10px] text-slate-500 mt-1">Leave empty or specify * to match all hostnames and IPs on the router.</p>
- </div>
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Inbound Path Prefix *</label>
- <input type="text" id="proxy-rule-path" value="/" required placeholder="e.g. /app1 or /" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-violet-500">
- <p class="text-[10px] text-slate-500 mt-1">Subfolders (e.g. /app1/module1/attribute1) are automatically routed.</p>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">SSL/TLS Certificate</label>
- <select id="proxy-rule-cert" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-violet-500">
- <option value="">(None / Use Default Cert)</option>
- </select>
- <p class="text-[10px] text-slate-500 mt-1">Loaded dynamically from Certificates module.</p>
- </div>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Target Backend URL *</label>
- <input type="text" id="proxy-rule-target" placeholder="e.g. http://10.0.0.5:8080 or http://example.com/app1" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-violet-500">
- <p class="text-[10px] text-slate-500 mt-1">Can be internal IP or external domain, with or without subfolder.</p>
- </div>
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
- <label class="flex items-center gap-2 cursor-pointer bg-slate-950/60 border border-slate-800/80 p-2.5 rounded-xl">
- <input type="checkbox" id="proxy-rule-strip-path" class="rounded bg-slate-800 border-slate-700 text-violet-600 focus:ring-0">
- <div>
- <span class="text-xs font-semibold text-slate-300 block">Strip Path Prefix</span>
- <span class="text-[10px] text-slate-500">Strip inbound path prefix before sending to target</span>
- </div>
- </label>
- <label class="flex items-center gap-2 cursor-pointer bg-slate-950/60 border border-slate-800/80 p-2.5 rounded-xl">
- <input type="checkbox" id="proxy-rule-http-to-https" class="rounded bg-slate-800 border-slate-700 text-violet-600 focus:ring-0">
- <div>
- <span class="text-xs font-semibold text-slate-300 block">Force HTTPS</span>
- <span class="text-[10px] text-slate-500">Redirect plain HTTP requests to HTTPS (301)</span>
- </div>
- </label>
- <label class="flex items-center gap-2 cursor-pointer bg-slate-950/60 border border-slate-800/80 p-2.5 rounded-xl">
- <input type="checkbox" id="proxy-rule-preserve-host" class="rounded bg-slate-800 border-slate-700 text-violet-600 focus:ring-0">
- <div>
- <span class="text-xs font-semibold text-slate-300 block">Preserve Host Header</span>
- <span class="text-[10px] text-slate-500">Pass original client Host instead of target Host</span>
- </div>
- </label>
- <label class="flex items-center gap-2 cursor-pointer bg-slate-950/60 border border-slate-800/80 p-2.5 rounded-xl">
- <input type="checkbox" id="proxy-rule-insecure-tls" class="rounded bg-slate-800 border-slate-700 text-violet-600 focus:ring-0">
- <div>
- <span class="text-xs font-semibold text-slate-300 block">Insecure Backend TLS</span>
- <span class="text-[10px] text-slate-500">Allow self-signed certificates on backend</span>
- </div>
- </label>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Description / Comment</label>
- <input type="text" id="proxy-rule-comment" placeholder="Optional notes for this route" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-violet-500">
- </div>
- <div class="flex items-center gap-2 pt-1">
- <input type="checkbox" id="proxy-rule-enabled" checked class="rounded bg-slate-800 border-slate-700 text-emerald-500 focus:ring-0">
- <label for="proxy-rule-enabled" class="text-xs font-semibold text-slate-300 cursor-pointer">Enable this rule immediately</label>
- </div>
- <div class="flex justify-end gap-2 pt-3 border-t border-slate-800">
- <button type="button" onclick="closeProxyRuleModal()" class="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-medium text-slate-300 transition">Cancel</button>
- <button type="submit" class="px-4 py-2 rounded-lg bg-violet-600 hover:bg-violet-500 text-xs font-semibold text-white shadow-lg shadow-violet-600/30 transition">Save Rule</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: REVERSE PROXY GLOBAL CONFIG ================= -->
- <div id="modal-proxy-config" 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">
- <div class="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/50">
- <h3 class="text-sm font-bold text-white flex items-center gap-2">
- <svg class="w-4 h-4 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" /><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>Reverse Proxy Engine Settings</span>
- </h3>
- <button type="button" onclick="closeProxyConfigModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="proxy-config-form" onsubmit="saveProxyConfig(event)" class="p-5 space-y-4">
- <div class="flex items-center gap-2 p-3 rounded-xl bg-slate-950/60 border border-slate-800">
- <input type="checkbox" id="proxy-cfg-enabled" class="rounded bg-slate-800 border-slate-700 text-emerald-500 focus:ring-0">
- <label for="proxy-cfg-enabled" class="text-xs font-semibold text-white cursor-pointer">
- Master Switch: Enable Reverse Proxy Engine
- </label>
- </div>
- <div class="grid grid-cols-2 gap-3">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">HTTP Port</label>
- <input type="number" id="proxy-cfg-http-port" min="1" max="65535" value="80" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-violet-500">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">HTTPS Port</label>
- <input type="number" id="proxy-cfg-https-port" min="1" max="65535" value="443" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-violet-500">
- </div>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Default Fallback SSL Certificate</label>
- <select id="proxy-cfg-default-cert" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-violet-500">
- <option value="">(None / First Available Cert)</option>
- </select>
- <p class="text-[10px] text-slate-500 mt-1">Used for HTTPS clients when no rule-specific certificate matches.</p>
- </div>
- <div class="flex justify-end gap-2 pt-3 border-t border-slate-800">
- <button type="button" onclick="closeProxyConfigModal()" class="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-medium text-slate-300 transition">Cancel</button>
- <button type="submit" class="px-4 py-2 rounded-lg bg-violet-600 hover:bg-violet-500 text-xs font-semibold text-white shadow-lg shadow-violet-600/30 transition">Save Settings</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: SD-WAN GROUP ================= -->
- <div id="modal-sdwan-group" 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 max-h-[90vh] flex flex-col">
- <div class="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/50">
- <h3 id="sdwan-group-modal-title" class="text-sm font-bold text-white flex items-center gap-2">
- <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>Create SD-WAN Group</span>
- </h3>
- <button type="button" onclick="closeSDWANGroupModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="sdwan-group-form" onsubmit="saveSDWANGroup(event)" class="p-5 space-y-4 overflow-y-auto flex-1">
- <input type="hidden" id="sdwan-group-id">
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Group Interface Name *</label>
- <input type="text" id="sdwan-group-name" placeholder="e.g. sdwan0 or sdwan-internet" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-amber-500">
- <p class="text-[10px] text-slate-500 mt-1">Acts as unified interface in Firewall.</p>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Distribution Strategy *</label>
- <select id="sdwan-group-mode" onchange="onSDWANModeChange()" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-amber-500">
- <option value="weighted">Weighted Percentage (Load Balance)</option>
- <option value="pcc">PCC (Per-Connection Classifier Hashing)</option>
- <option value="lowest-latency">Lowest Latency SLA (Minimum RTT)</option>
- <option value="lowest-loss">Lowest Loss SLA (Minimum Drop)</option>
- <option value="failover">Active-Backup (Priority Failover)</option>
- </select>
- </div>
- </div>
- <div id="sdwan-group-pcc-container" class="hidden">
- <label class="block text-xs font-semibold text-slate-300 mb-1">PCC Flow Hash Fields</label>
- <select id="sdwan-group-hash-fields" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-amber-500">
- <option value="both-addresses-and-ports">Both Addresses & Ports (Recommended)</option>
- <option value="src-address">Source Address Only</option>
- <option value="both-addresses">Both Addresses (Source & Dest)</option>
- <option value="dst-address">Destination Address Only</option>
- </select>
- </div>
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Probe Interval (seconds)</label>
- <input type="number" id="sdwan-group-probe-interval" value="3" min="1" max="60" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-amber-500">
- </div>
- <div class="flex items-center pt-6">
- <label class="flex items-center gap-2 cursor-pointer bg-slate-950/60 border border-slate-800/80 p-2.5 rounded-xl w-full">
- <input type="checkbox" id="sdwan-group-auto-nat" checked class="rounded bg-slate-800 border-slate-700 text-amber-600 focus:ring-0">
- <div>
- <span class="text-xs font-semibold text-white block">Auto-NAT Masquerade</span>
- <span class="text-[10px] text-slate-400 block">Masquerade egress WAN links automatically</span>
- </div>
- </label>
- </div>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Comment</label>
- <input type="text" id="sdwan-group-comment" placeholder="Optional description" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500">
- </div>
- <div class="px-5 py-3 -mx-5 -mb-5 bg-slate-950/50 border-t border-slate-800 flex items-center justify-end gap-2">
- <button type="button" onclick="closeSDWANGroupModal()" class="px-4 py-2 rounded-xl text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-slate-300 transition">Cancel</button>
- <button type="submit" class="px-4 py-2 rounded-xl text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white shadow-lg shadow-amber-600/20 transition">Save Group</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: SD-WAN MEMBER LINK ================= -->
- <div id="modal-sdwan-member" 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 max-h-[90vh] flex flex-col">
- <div class="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/50">
- <h3 id="sdwan-member-modal-title" class="text-sm font-bold text-white flex items-center gap-2">
- <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 4v16m8-8H4" /></svg>
- <span>Add Member Link</span>
- </h3>
- <button type="button" onclick="closeSDWANMemberModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <form id="sdwan-member-form" onsubmit="saveSDWANMember(event)" class="p-5 space-y-4 overflow-y-auto flex-1">
- <input type="hidden" id="sdwan-member-id">
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Target SD-WAN Group *</label>
- <select id="sdwan-member-group-id" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-amber-500"></select>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Member Interface *</label>
- <select id="sdwan-member-interface" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-amber-500"></select>
- </div>
- </div>
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Gateway IPv4</label>
- <input type="text" id="sdwan-member-gateway" placeholder="e.g. 192.168.1.1 (leave blank for auto)" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-amber-500">
- <p class="text-[10px] text-slate-500 mt-1">Next-hop router for this link.</p>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Weight Ratio (1 - 100)</label>
- <input type="number" id="sdwan-member-weight" value="50" min="1" max="100" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-amber-500">
- <p class="text-[10px] text-slate-500 mt-1">Relative percentage ratio (e.g. 70 vs 30).</p>
- </div>
- </div>
- <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Failover Priority</label>
- <input type="number" id="sdwan-member-priority" value="1" min="1" max="10" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-amber-500">
- <p class="text-[10px] text-slate-500 mt-1">1 = Highest Primary.</p>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Health Ping Target</label>
- <input type="text" id="sdwan-member-probe" value="1.1.1.1" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-amber-500">
- <p class="text-[10px] text-slate-500 mt-1">e.g. 1.1.1.1 or 8.8.8.8.</p>
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Max SLA Latency (ms)</label>
- <input type="number" id="sdwan-member-max-lat" value="250" min="5" max="2000" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-amber-500">
- </div>
- </div>
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Max Packet Loss SLA (%)</label>
- <input type="number" id="sdwan-member-max-loss" value="20" min="0" max="100" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-amber-500">
- </div>
- <div>
- <label class="block text-xs font-semibold text-slate-300 mb-1">Comment</label>
- <input type="text" id="sdwan-member-comment" placeholder="e.g. Primary Fiber ISP" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-amber-500">
- </div>
- </div>
- <div class="px-5 py-3 -mx-5 -mb-5 bg-slate-950/50 border-t border-slate-800 flex items-center justify-end gap-2">
- <button type="button" onclick="closeSDWANMemberModal()" class="px-4 py-2 rounded-xl text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-slate-300 transition">Cancel</button>
- <button type="submit" class="px-4 py-2 rounded-xl text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white shadow-lg shadow-amber-600/20 transition">Save Member</button>
- </div>
- </form>
- </div>
- </div>
- <!-- ================= MODAL: RESTORE BACKUP CONFIRMATION ================= -->
- <div id="modal-restore-confirm" 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">
- <div class="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/50">
- <h3 class="text-sm font-bold text-amber-400 flex items-center gap-2">
- <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
- <span>Confirm Configuration Restore</span>
- </h3>
- <button type="button" onclick="closeRestoreModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
- </div>
- <div class="p-5 space-y-4">
- <p class="text-xs text-slate-300 leading-relaxed">
- Are you sure you want to restore this configuration? All current routing, firewall, tunnel, certificate, and service settings will be replaced.
- </p>
- <div id="modal-restore-details" class="p-3 bg-slate-950 rounded-xl border border-slate-800 text-xs font-mono text-slate-400 space-y-1">
- </div>
- <div class="p-3 bg-amber-500/10 border border-amber-500/20 rounded-xl text-amber-300 text-[11px]">
- DebTik will create an automated fallback backup and reload immediately. Any active management sessions will briefly reconnect.
- </div>
- <div id="modal-restore-progress" class="hidden p-3 bg-cyan-500/10 border border-cyan-500/30 rounded-xl text-cyan-300 text-xs flex items-center gap-2">
- <span class="w-3.5 h-3.5 rounded-full border-2 border-cyan-400 border-t-transparent animate-spin"></span>
- <span id="modal-restore-progress-text">Restoring configuration and reloading DebTik...</span>
- </div>
- </div>
- <div class="flex justify-end gap-2 px-5 py-4 border-t border-slate-800 bg-slate-950/30">
- <button type="button" id="btn-cancel-restore" onclick="closeRestoreModal()" class="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-medium text-slate-300 transition">Cancel</button>
- <button type="button" id="btn-execute-restore" onclick="executeRestoreBackup()" class="px-4 py-2 rounded-lg bg-amber-600 hover:bg-amber-500 text-xs font-semibold text-white shadow-lg shadow-amber-600/30 transition">Yes, Restore & Reload</button>
- </div>
- </div>
- </div>
- <datalist id="fw-addrlist-datalist"></datalist>
- <script src="app.js?v=22.0"></script>
- </body>
- </html>
|
