diff --git a/test.html b/test.html index 8434864..7650337 100644 --- a/test.html +++ b/test.html @@ -1,113 +1,250 @@ -Connect AI LAB +Connect AI -
Connect AI LAB
+@keyframes msgIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} +@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}} +.stream-active{position:relative} +.stream-active::after{content:'';display:inline-block;width:2px;height:14px;background:var(--accent);margin-left:2px;animation:blink .6s step-end infinite;vertical-align:text-bottom;border-radius:1px;box-shadow:0 0 6px var(--accent)} +@keyframes blink{0%,100%{opacity:1}50%{opacity:0}} +.stream-active .code-wrap:last-child { + border: 1px solid var(--accent); + animation: codePulse 2s infinite; +} +.stream-active .code-wrap:last-child pre { + box-shadow: inset 0 0 20px rgba(124,106,255,0.05); +} +@keyframes codePulse { + 0%, 100% { box-shadow: 0 0 15px var(--accent-glow); } + 50% { box-shadow: 0 0 35px var(--accent2-glow); border-color: var(--accent2); } +} +.main-view{flex:1;display:flex;flex-direction:column;overflow:hidden;transition:all .5s cubic-bezier(.16,1,.3,1)} +body.init .main-view{justify-content:center;margin-top:-6vh} +body.init .chat{flex:0 0 auto;overflow:visible;padding-bottom:15px} +body.init .input-wrap{max-width:680px;width:100%;margin:0 auto;transform:none;transition:all .5s cubic-bezier(.16,1,.3,1)} + +/* ATTACHMENT */ +.attach-btn{background:transparent;border:1px solid var(--border2);color:var(--text-dim);width:32px;height:32px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .3s;flex-shrink:0} +.attach-btn:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow);transform:translateY(-1px)} +.attach-preview{display:none;gap:6px;padding:0 0 6px;flex-wrap:wrap} +.attach-preview.visible{display:flex} +.attach-chip{display:flex;align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:4px 10px;font-size:10px;color:var(--text);animation:msgIn .3s ease} +.attach-chip .chip-icon{font-size:12px} +.attach-chip .chip-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} +.attach-chip .chip-remove{cursor:pointer;color:var(--text-dim);font-size:12px;margin-left:2px;transition:color .2s} +.attach-chip .chip-remove:hover{color:var(--red)} +.attach-thumb{width:28px;height:28px;border-radius:5px;object-fit:cover;border:1px solid var(--border2)} + +/* REGENERATE BUTTON */ +.regen-btn{display:inline-flex;align-items:center;gap:4px;background:transparent;border:1px solid var(--border2);color:var(--text-dim);padding:4px 12px;border-radius:8px;font-size:10px;cursor:pointer;transition:all .3s;font-family:inherit;margin-top:6px;margin-left:29px} +.regen-btn:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)} + +/* SYNTAX HIGHLIGHTING */ +.msg-body pre .kw{color:#c792ea} +.msg-body pre .str{color:#c3e88d} +.msg-body pre .num{color:#f78c6c} +.msg-body pre .cm{color:#546e7a;font-style:italic} +.msg-body pre .fn{color:#82aaff} +.msg-body pre .tag{color:#f07178} +.msg-body pre .attr{color:#ffcb6b} +.msg-body pre .op{color:#89ddff} +.msg-body pre .type{color:#ffcb6b} + +
Connect AI
+
+
-
Connect AI LAB
-
100% \ub85c\uceec \u00b7 100% \uc624\ud504\ub77c\uc778 \u00b7 100% \ubb34\ub8cc
\ud504\ub85c\uc81d\ud2b8\ub97c \uc774\ud574\ud558\uace0, \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uace0, \uc2e4\ud589\ud569\ub2c8\ub2e4.
-
\ud83d\udcc1 \ud30c\uc77c \uc0dd\uc131
\u270f\ufe0f \ucf54\ub4dc \ud3b8\uc9d1
\ud83d\udda5\ufe0f \ud130\ubbf8\ub110
\ud83d\udd0d \ubd84\uc11d
-
- - - - -
+
Connect AI
+
\uBCF4\uC548 \xB7 \uBE44\uC6A9\uCD5C\uC801\uD654 \xB7 \uC9C0\uC2DD\uC5F0\uACB0
\uD504\uB85C\uC81D\uD2B8\uB97C \uC774\uD574\uD558\uACE0, \uCF54\uB4DC\uB97C \uC791\uC131\uD558\uACE0, \uC2E4\uD589\uD569\uB2C8\uB2E4.
+
- -
Enter \uc804\uc1a1 \u00b7 Shift+Enter \uc904\ubc14\uafc8 -
+
+ +
Enter \uC804\uC1A1 \xB7 Shift+Enter \uC904\uBC14\uAFC8 +
+ + \ No newline at end of file diff --git a/test.js b/test.js index a33d953..f8ad119 100644 --- a/test.js +++ b/test.js @@ -1 +1,2 @@ -`h.replace(/(\/\/[^\n]*)/g)` +var code = "\nfunction highlight(code,lang){\n let h=esc(code);\n h=h.replace(/(\\/\\/[^\\n]*)/g,'$1');\n h=h.replace(/(#[^\\n]*)/g,'$1');\n h=h.replace(/(\\/\\*[\\s\\S]*?\\*\\/)/g,'$1');\n h=h.replace(/("[^&]*?"|'[^&]*?')/g,'$1');\n h=h.replace(/\\b(function|const|let|var|return|if|else|for|while|class|import|export|from|default|async|await|try|catch|throw|new|this|def|self|print|lambda|yield|with|as|raise|except|finally)\\b/g,'$1');\n h=h.replace(/\\b(\\d+\\.?\\d*)\\b/g,'$1');\n h=h.replace(/\\b(True|False|None|true|false|null|undefined|NaN)\\b/g,'$1');\n h=h.replace(/\\b(String|Number|Boolean|Array|Object|Map|Set|Promise|void|int|float|str|list|dict|tuple)\\b/g,'$1');\n h=h.replace(/([=!<>+\\-*/%|&^~?:]+)/g,'$1');\n}\n"; +console.log(code);