automation-tools/Potiential-Automation
8
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use the orange owl on the login page; rename to G2Team Potential Updater

Browse Source 
Swaps the owl for the orange owl from owl-design-backup (cream face,
square glasses, brown eyes) and keeps its reactions: gaze follows the
typing, head-shake on a wrong password, tilt, hop with smile-eyes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
VasanthandClaude Opus 5.5 committed 2026-10-22 16:46:12 +05:30
1 parent 0317358dcf
commit 3b6e35fa62
1 file changed
+50 -80
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/login.html
+50 -80
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign in · Charge Billed Automation</title> <title>Sign in · G2Team Potential Updater</title>
<style> <style>
:root { :root {
--night: #040b26; --night: #040b26;
@@ -17,7 +17,7 @@
--owl: #ec7d33; --owl: #ec7d33;
--owl-soft: #f5a25a; --owl-soft: #f5a25a;
--error: #ff9a9a; --error: #ff9a9a;
--owl-w: 212px; --owl-w: 190px;
--ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; --ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
color-scheme: dark; color-scheme: dark;
scrollbar-color: var(--panel-line) var(--night); scrollbar-color: var(--panel-line) var(--night);
@@ -68,7 +68,7 @@
.card { .card {
position: relative; position: relative;
width: min(360px, 100%); width: min(360px, 100%);
margin-top: calc(var(--owl-w) * 150 / 160 + 12px); margin-top: calc(var(--owl-w) * 50 / 48 + 12px);
padding: 28px 24px 24px; padding: 28px 24px 24px;
background: var(--panel); background: var(--panel);
border: 1px solid var(--panel-line); border: 1px solid var(--panel-line);
@@ -154,12 +154,12 @@
.done h2:focus { outline: none; } .done h2:focus { outline: none; }
.done p { margin: 6px 0 0; color: var(--ink-2); } .done p { margin: 6px 0 0; color: var(--ink-2); }
/* Owl. Origins are in the SVG's own units (viewBox 0 0 160 150). */ /* Owl. Origins are in the SVG's own units (viewBox 0 0 48 50). */
#head, #glasses, #wing-l, #wing-r { transform-box: view-box; } #head, #glasses, #wing-l, #wing-r { transform-box: view-box; }
#head { transform-origin: 80px 96px; } #head { transform-origin: 24px 30px; }
#glasses { transform-origin: 80px 56px; } #glasses { transform-origin: 24px 24px; }
#wing-l { transform-origin: 40px 90px; } #wing-l { transform-origin: 11px 25px; }
#wing-r { transform-origin: 120px 90px; } #wing-r { transform-origin: 37px 25px; }
.iris { transition: transform .14s ease-out; } .iris { transition: transform .14s ease-out; }
.lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform .08s ease-out; } .lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform .08s ease-out; }
.owl.blink .lid { transform: scaleY(1); } .owl.blink .lid { transform: scaleY(1); }
@@ -167,15 +167,15 @@
.owl.happy .smile { transform: none; } .owl.happy .smile { transform: none; }
.owl.idle #bob { animation: breathe 3.2s ease-in-out infinite; } .owl.idle #bob { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(1.5px); } } @keyframes breathe { 50% { transform: translateY(.4px); } }
.owl.shake #head { animation: no .65s ease-in-out; } .owl.shake #head { animation: no .65s ease-in-out; }
@keyframes no { @keyframes no {
15% { transform: translateX(-5px) rotate(-5deg); } 15% { transform: translateX(-1.5px) rotate(-5deg); }
32% { transform: translateX(5px) rotate(5deg); } 32% { transform: translateX(1.5px) rotate(5deg); }
50% { transform: translateX(-4px) rotate(-4deg); } 50% { transform: translateX(-1.2px) rotate(-4deg); }
68% { transform: translateX(3px) rotate(3deg); } 68% { transform: translateX(.9px) rotate(3deg); }
85% { transform: translateX(-1px) rotate(-1deg); } 85% { transform: translateX(-.3px) rotate(-1deg); }
} }
.owl.shake #glasses { animation: wobble .65s ease-in-out .07s; } .owl.shake #glasses { animation: wobble .65s ease-in-out .07s; }
@keyframes wobble { @keyframes wobble {
@@ -194,7 +194,7 @@
@keyframes flap-r { 20%, 60% { transform: rotate(-32deg); } 40%, 80% { transform: rotate(-8deg); } } @keyframes flap-r { 20%, 60% { transform: rotate(-32deg); } 40%, 80% { transform: rotate(-8deg); } }
@media (max-width: 420px) { @media (max-width: 420px) {
:root { --owl-w: 172px; } :root { --owl-w: 160px; }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.sky .tw, .owl, .owl * { animation: none !important; transition: none !important; } .sky .tw, .owl, .owl * { animation: none !important; transition: none !important; }
@@ -206,87 +206,57 @@
<div class="sky" id="sky" aria-hidden="true"></div> <div class="sky" id="sky" aria-hidden="true"></div>
<main class="stage"> <main class="stage">
<h1>Charge Billed Automation</h1> <h1>G2Team Potential Updater</h1>
<p class="sub">Sign in to run the bot</p> <p class="sub">Sign in to run the bot</p>
<section class="card"> <section class="card">
<svg class="owl idle" id="owl" viewBox="0 0 160 150" aria-hidden="true"> <svg class="owl idle" id="owl" viewBox="0 0 48 50" aria-hidden="true">
<defs> <defs>
<radialGradient id="fur" cx="40%" cy="28%" r="78%"> <radialGradient id="coat" cx="42%" cy="28%" r="78%">
<stop offset="0" stop-color="#f8ad66"/><stop offset=".45" stop-color="#ee7f36"/><stop offset="1" stop-color="#c55a1f"/> <stop stop-color="#ff990e"/><stop offset=".6" stop-color="#f58200"/><stop offset="1" stop-color="#bd4b00"/>
</radialGradient> </radialGradient>
<linearGradient id="wing" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="wing" x2=".8" y2="1">
<stop offset="0" stop-color="#df6f2c"/><stop offset="1" stop-color="#b14e1a"/> <stop stop-color="#ed7b00"/><stop offset="1" stop-color="#a73e00"/>
</linearGradient>
<radialGradient id="face" cx="50%" cy="40%" r="65%">
<stop offset="0" stop-color="#fff1df"/><stop offset="1" stop-color="#f2cba1"/>
</radialGradient>
<radialGradient id="belly" cx="50%" cy="35%" r="70%">
<stop offset="0" stop-color="#fbd6a9"/><stop offset="1" stop-color="#efb072"/>
</radialGradient>
<radialGradient id="iris" cx="40%" cy="35%" r="70%">
<stop offset="0" stop-color="#b8692c"/><stop offset="1" stop-color="#6a3211"/>
</radialGradient>
<linearGradient id="beak" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f4a142"/><stop offset="1" stop-color="#cf6620"/>
</linearGradient> </linearGradient>
<radialGradient id="glow"> <radialGradient id="glow">
<stop offset="0" stop-color="#ffaa5a" stop-opacity=".35"/><stop offset="1" stop-color="#ffaa5a" stop-opacity="0"/> <stop offset="0" stop-color="#ffaa5a" stop-opacity=".35"/><stop offset="1" stop-color="#ffaa5a" stop-opacity="0"/>
</radialGradient> </radialGradient>
<clipPath id="eye-l"><circle cx="59" cy="59" r="16"/></clipPath> <clipPath id="eye-l"><ellipse cx="17" cy="20" rx="4" ry="5"/></clipPath>
<clipPath id="eye-r"><circle cx="101" cy="59" r="16"/></clipPath> <clipPath id="eye-r"><ellipse cx="31" cy="20" rx="4" ry="5"/></clipPath>
</defs> </defs>
<ellipse cx="24" cy="48.5" rx="17" ry="2.6" fill="url(#glow)"/>
<ellipse cx="80" cy="146" rx="54" ry="8" fill="url(#glow)"/> <g stroke="#38200b" stroke-width="1.2" stroke-linejoin="round">
<g id="body"> <path id="wing-l" fill="url(#wing)" d="M10 24 Q5 24 4 32 Q3 38 8 39 L12 34Z"/>
<path fill="url(#fur)" d="M80 66C114 66 136 90 134 116C132 136 110 146 80 146C50 146 28 136 26 116C24 90 46 66 80 66Z"/> <path id="wing-r" fill="url(#wing)" d="M38 24 Q43 24 44 32 Q45 38 40 39 L36 34Z"/>
<ellipse cx="80" cy="116" rx="30" ry="24" fill="url(#belly)"/> <path fill="url(#coat)" d="M8 27 C8 18 7 11 13 6 Q17 2 24 2 Q31 2 35 6 C41 11 40 18 40 27 Q42 38 35 43 Q30 47 24 47 Q17 47 13 43 Q6 38 8 27Z"/>
<path fill="none" stroke="#d88a4d" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" opacity=".55" <path fill="none" stroke="#ffbe42" stroke-width="1.25" stroke-linecap="round"
d="M67 107L70 110L73 107M87 107L90 110L93 107M77 117L80 120L83 117M63 121L66 124L69 121M91 121L94 124L97 121M77 129L80 132L83 129"/> d="M13 33 l1.5 2 l1.5 -2 M19 33 l1.5 2 l1.5 -2 M25 33 l1.5 2 l1.5 -2 M31 33 l1.5 2 l1.5 -2 M16 38 l1.5 2 l1.5 -2 M22 38 l1.5 2 l1.5 -2 M28 38 l1.5 2 l1.5 -2 M20 43 l1.5 1 l1.5 -1 M26 43 l1.5 1 l1.5 -1"/>
</g> <path fill="none" stroke="#ac4904" stroke-width="1" d="M12 8 Q18 6 24 14 Q21 6 18 4 M24 13 Q25 6 30 4 M26 13 Q31 7 36 9"/>
<g id="wing-l">
<path fill="url(#wing)" d="M38 90C24 100 22 124 34 136C40 132 44 118 44 100C43 95 41 92 38 90Z"/>
<path fill="none" stroke="#f08f4b" stroke-width="1.4" stroke-linecap="round" opacity=".6" d="M36 104Q32 116 34 126"/>
</g>
<g id="wing-r">
<path fill="url(#wing)" d="M122 90C136 100 138 124 126 136C120 132 116 118 116 100C117 95 119 92 122 90Z"/>
<path fill="none" stroke="#f08f4b" stroke-width="1.4" stroke-linecap="round" opacity=".6" d="M124 104Q128 116 126 126"/>
</g>
<g fill="#f4a93f" stroke="#c97a22" stroke-width=".8">
<ellipse cx="64" cy="144" rx="3.2" ry="4.2"/><ellipse cx="69.5" cy="145.5" rx="3.2" ry="4.2"/><ellipse cx="75" cy="144" rx="3.2" ry="4.2"/>
<ellipse cx="85" cy="144" rx="3.2" ry="4.2"/><ellipse cx="90.5" cy="145.5" rx="3.2" ry="4.2"/><ellipse cx="96" cy="144" rx="3.2" ry="4.2"/>
</g>
<g id="bob"><g id="head"> <g id="bob"><g id="head">
<path fill="url(#fur)" d="M33 38C29 26 31 14 37 8C40 6 42 9 45 14C49 19 54 22 60 22ZM127 38C131 26 129 14 123 8C120 6 118 9 115 14C111 19 106 22 100 22Z"/> <path fill="#ffe8b3" stroke-width="1" d="M24 14 C19 8 11 11 11 18 V26 Q11 30 17 30 Q21 30 24 28 Q27 30 31 30 Q37 30 37 26 V18 C37 11 29 8 24 14Z"/>
<path fill="url(#fur)" d="M80 10C112 10 138 30 138 58C138 82 114 98 80 98C46 98 22 82 22 58C22 30 48 10 80 10Z"/>
<path fill="none" stroke="#f9b978" stroke-width="2" stroke-linecap="round" opacity=".7" d="M62 22q4-5 9-2M77 17q4-4 8 0M90 20q4-3 8 1"/>
<path fill="url(#face)" d="M80 34C96 26 124 30 128 54C132 76 112 92 94 88C88 87 84 90 80 94C76 90 72 87 66 88C48 92 28 76 32 54C36 30 64 26 80 34Z"/>
<g clip-path="url(#eye-l)"> <g clip-path="url(#eye-l)">
<circle cx="59" cy="59" r="16" fill="#fffaf2"/> <ellipse cx="17" cy="20" rx="4" ry="5" fill="#fffdf4" stroke="none"/>
<g class="iris"><circle cx="59" cy="59" r="10.5" fill="url(#iris)"/><circle cx="59" cy="59" r="5.5" fill="#1b0e08"/><circle cx="55" cy="55" r="3" fill="#fff"/><circle cx="62.5" cy="62.5" r="1.4" fill="#fff" opacity=".8"/></g> <g class="iris"><ellipse cx="17" cy="21" rx="2.7" ry="3.3" fill="#6b3518" stroke="none"/><ellipse cx="17" cy="21.5" rx="1.8" ry="2.5" fill="#170e08" stroke="none"/><circle cx="16.3" cy="19.5" r="1" fill="#fff" stroke="none"/></g>
<rect class="lid" x="43" y="43" width="32" height="32" fill="#eebc8d"/> <rect class="lid" x="13" y="15" width="8" height="10" fill="#ffe8b3" stroke="none"/>
<g class="smile"><path fill="#eebc8d" d="M43 63Q59 49 75 63L75 76L43 76Z"/><path fill="none" stroke="#6a3211" stroke-width="1.6" stroke-linecap="round" d="M45 62Q59 50 73 62"/></g> <g class="smile"><path fill="#ffe8b3" stroke="none" d="M13 21Q17 16.5 21 21L21 25L13 25Z"/><path fill="none" stroke="#6b3518" stroke-width=".7" stroke-linecap="round" d="M13.6 20.6Q17 17 20.4 20.6"/></g>
</g> </g>
<ellipse cx="17" cy="20" rx="4" ry="5" fill="none" stroke-width="1"/>
<g clip-path="url(#eye-r)"> <g clip-path="url(#eye-r)">
<circle cx="101" cy="59" r="16" fill="#fffaf2"/> <ellipse cx="31" cy="20" rx="4" ry="5" fill="#fffdf4" stroke="none"/>
<g class="iris"><circle cx="101" cy="59" r="10.5" fill="url(#iris)"/><circle cx="101" cy="59" r="5.5" fill="#1b0e08"/><circle cx="97" cy="55" r="3" fill="#fff"/><circle cx="104.5" cy="62.5" r="1.4" fill="#fff" opacity=".8"/></g> <g class="iris"><ellipse cx="31" cy="21" rx="2.7" ry="3.3" fill="#6b3518" stroke="none"/><ellipse cx="31" cy="21.5" rx="1.8" ry="2.5" fill="#170e08" stroke="none"/><circle cx="30.3" cy="19.5" r="1" fill="#fff" stroke="none"/></g>
<rect class="lid" x="85" y="43" width="32" height="32" fill="#eebc8d"/> <rect class="lid" x="27" y="15" width="8" height="10" fill="#ffe8b3" stroke="none"/>
<g class="smile"><path fill="#eebc8d" d="M85 63Q101 49 117 63L117 76L85 76Z"/><path fill="none" stroke="#6a3211" stroke-width="1.6" stroke-linecap="round" d="M87 62Q101 50 115 62"/></g> <g class="smile"><path fill="#ffe8b3" stroke="none" d="M27 21Q31 16.5 35 21L35 25L27 25Z"/><path fill="none" stroke="#6b3518" stroke-width=".7" stroke-linecap="round" d="M27.6 20.6Q31 17 34.4 20.6"/></g>
</g>
<path fill="url(#beak)" d="M75 72C77 68 83 68 85 72C84 78 82 83 80 86C78 83 76 78 75 72Z"/>
<g id="glasses" fill="none" stroke-linecap="round">
<path stroke="#fff" stroke-width="2.2" opacity=".5" d="M46 47Q52 41 60 41M88 47Q94 41 102 41"/>
<g stroke="#1d1b20">
<circle cx="59" cy="58" r="20" stroke-width="2.4"/>
<circle cx="101" cy="58" r="20" stroke-width="2.4"/>
<path stroke-width="2.2" d="M78.5 54Q80 51.5 81.5 54M39 52L28 48M121 52L132 48"/>
</g> </g>
<ellipse cx="31" cy="20" rx="4" ry="5" fill="none" stroke-width="1"/>
<g id="glasses" fill="none" stroke="#2a180c" stroke-width="1">
<rect x="12" y="22" width="10" height="6" rx="1.5"/>
<rect x="26" y="22" width="10" height="6" rx="1.5"/>
<path d="M22 23 Q24 21 26 23 M10 21 L12 23 M36 23 L38 21"/>
</g> </g>
<path fill="#eb870a" stroke-width=".8" d="M22 26 Q24 24 26 26 L24 30Z"/>
</g></g> </g></g>
<path fill="#ed900f" stroke-width="1" d="M16 45 L14 48 Q17 49 20 48 L19 46Z M29 46 L28 48 Q31 49 34 48 L32 45Z"/>
</g>
</svg> </svg>
<form id="login" novalidate> <form id="login" novalidate>
@@ -360,7 +330,7 @@ function followCaret() {
const shown = pw.type === "password" ? "•".repeat(caret) : pw.value.slice(0, caret); const shown = pw.type === "password" ? "•".repeat(caret) : pw.value.slice(0, caret);
const room = pw.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight); const room = pw.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
const ratio = Math.min(measure.measureText(shown).width / room, 1); const ratio = Math.min(measure.measureText(shown).width / room, 1);
look(Math.round(-4 + 8 * ratio), 4); look(-1.2 + 2.4 * ratio, 1.2);
} }
const timers = {}; const timers = {};