1+ <!DOCTYPE html>
2+ < html lang ="es ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Edge Python Code Edior</ title >
7+ < script src ="https://cdn.tailwindcss.com "> </ script >
8+ < link rel ="icon " type ="image/svg " href ="icon.svg ">
9+ < style >
10+ .no-scrollbar ::-webkit-scrollbar { display : none; }
11+ .no-scrollbar { -ms-overflow-style : none; scrollbar-width : none; }
12+
13+ .code-font {
14+ font-family : 'JetBrains Mono' , 'Fira Code' , ui-monospace, monospace;
15+ line-height : 1.625 ;
16+ }
17+ </ style >
18+ </ head >
19+ < body class ="bg-[#161616] text-[#ffffff] h-screen flex flex-col p-4 gap-4 overflow-hidden ">
20+
21+ < div class ="w-full bg-[#222222] border border-[#2d2d2d] rounded-md flex flex-col flex-[70] basis-0 overflow-hidden ">
22+
23+ < div class ="bg-[#1c1c1c] border-t border-[#2d2d2d] px-3 py-2 flex justify-between items-center ">
24+ < div class ="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full ">
25+ < p > editor</ p >
26+ < svg xmlns ="http://www.w3.org/2000/svg " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " class ="ml-auto w-3 h-3 ">
27+ < path d ="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z "/>
28+ < path d ="M14 2v5a1 1 0 0 0 1 1h5 "/>
29+ </ svg >
30+ </ div >
31+ </ div >
32+
33+ < div class ="flex flex-1 code-font text-sm overflow-hidden ">
34+ < pre id ="ln " class ="no-scrollbar pt-2 pb-2 text-[#525252] text-center bg-[#2d2d2d] select-none border-r border-[#2d2d2d] overflow-y-hidden flex-none w-[35px] "> </ pre >
35+
36+ < textarea id ="ed "
37+ class ="no-scrollbar w-full bg-transparent p-2 outline-none resize-none text-[#c2c2c2] placeholder-[#404040] overflow-y-auto "
38+ spellcheck ="false "
39+ placeholder ="Type your Python code here... "
40+ > </ textarea >
41+ </ div >
42+ </ div >
43+
44+ < div class ="w-full bg-[#222222] border border-[#2d2d2d] rounded-md flex flex-col flex-[30] basis-0 overflow-hidden ">
45+
46+ < div class ="bg-[#1c1c1c] border-b border-[#2d2d2d] px-3 py-2 flex justify-between items-center ">
47+ < div class ="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full ">
48+ < p > terminal</ p >
49+ < svg xmlns ="http://www.w3.org/2000/svg " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " class ="ml-auto w-3 h-3 ">
50+ < path d ="M12 19h8 "/>
51+ < path d ="m4 17 6-6-6-6 "/>
52+ </ svg >
53+ </ div >
54+ </ div >
55+
56+ < div class ="code-font text-sm p-3 text-[#c2c2c2] flex-1 overflow-y-auto no-scrollbar ">
57+ < p > [2026-04-18T04:45:39Z INFO edge] emit: snapshot created [ops=3 consts=1]</ p >
58+ < p > Hello, world!</ p >
59+ </ div >
60+ </ div >
61+
62+ < script >
63+ const ed = document . getElementById ( 'ed' ) ;
64+ const ln = document . getElementById ( 'ln' ) ;
65+
66+ // Bloquea añadir más líneas después de la 99 (Enter o paste)
67+ ed . addEventListener ( 'keydown' , ( e ) => {
68+ if ( e . key === 'Enter' ) {
69+ const currentLines = ed . value . split ( '\n' ) . length ;
70+ if ( currentLines >= 99 ) {
71+ e . preventDefault ( ) ;
72+ }
73+ }
74+ } ) ;
75+
76+ const sync = ( ) => {
77+ let lines = ed . value . split ( '\n' ) ;
78+
79+ // Si se intenta pasar de 99 (por paste, etc.), cortamos automáticamente
80+ if ( lines . length > 99 ) {
81+ ed . value = lines . slice ( 0 , 99 ) . join ( '\n' ) ;
82+ lines = ed . value . split ( '\n' ) ;
83+ }
84+
85+ const count = lines . length ;
86+ // Números con 2 dígitos (01, 02, ..., 99)
87+ ln . textContent = Array . from ( { length : count } , ( _ , i ) =>
88+ String ( i + 1 ) . padStart ( 2 , '0' )
89+ ) . join ( '\n' ) ;
90+
91+ // Sincronizamos el scroll
92+ ln . scrollTop = ed . scrollTop ;
93+ } ;
94+
95+ // El evento 'input' cubre escribir, borrar y pegar
96+ ed . oninput = sync ;
97+ ed . onscroll = sync ;
98+
99+ // Inicialización inmediata
100+ sync ( ) ;
101+ </ script >
102+
103+ </ body >
104+ </ html >
0 commit comments