Skip to content

Commit 3f6a6b9

Browse files
author
0c-coder
committed
Reskin WebCrypt app to OnlyAgent brand (visual only)
Restyles the app to match the onlyagent.us design language: sleek sticky nav with OnlyAgent logo, gradient hero + tool-card home page, card-wrapped tool forms, gradient CTAs, themed inputs/modals/console. No changes to crypto/FIDO2 logic or any JS hooks. - NEW src/assets/css/onlyagent-theme.css (design system / theme) - NEW src/assets/onlyagent-logo.svg (brand mark) - src/index-src.html restructured home (hero + tool grid), theme + logo wired - src/app-src.html restructured tool shell (nav + form card), theme + logo wired BUILD.sh already copies src/assets/* into build/app, so no build-config change.
1 parent 3008c0b commit 3f6a6b9

4 files changed

Lines changed: 296 additions & 152 deletions

File tree

‎src/app-src.html‎

Lines changed: 41 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,76 +2,64 @@
22
<html>
33

44
<head>
5-
<title>OnlyKey - Encrypt & sign messages in your browser using OnlyKey</title>
6-
<meta name="viewport" content="width=device-width,initial-scale=0.70">
5+
<title>OnlyAgent — Encrypt &amp; sign in your browser using OnlyKey</title>
6+
<meta name="viewport" content="width=device-width,initial-scale=1">
77
<link href="css/bootstrap.min.css" rel="stylesheet">
88
<link href="css/ShareTechMono.css" rel="stylesheet">
99
<link href="css/font-awesome.min.css" rel="stylesheet">
10+
<link href="css/onlyagent-theme.css" rel="stylesheet">
1011
<link href="css/tokenizer.css" rel="stylesheet">
1112
</head>
1213

1314
<body data-page="<%= htmlWebpackPlugin.options.page %>">
14-
<nav class="navbar navbar-dark bg-dark">
15-
<div class="mr-auto text-center">
16-
<a class="">&nbsp;Apps&nbsp;&nbsp;</a>
17-
<!--
18-
<a class="navbar-brand" href="./encrypt"><i class="fa fa-lock" aria-hidden="true"></i></a>
19-
<a class="navbar-brand" href="./decrypt"><i class="fa fa-unlock" aria-hidden="true"></i></a>
20-
<a class="navbar-brand" href="./decrypt-file"><i class="fa fa-file-text" aria-hidden="true"></i></a>
21-
<a class="navbar-brand" href="./encrypt-file"><i class="fa fa-file-archive-o" aria-hidden="true"></i></a>
22-
<a class="navbar-brand" href="./search"><i class="fa fa-search" aria-hidden="true"></i></a>
23-
<a class="navbar-brand" href="./password-generator"><i class="fa fa-key" aria-hidden="true"></i></a>
24-
-->
25-
15+
<header class="oa-nav"><div class="inner">
16+
<a class="oa-brand" href="/"><img src="onlyagent-logo.svg" alt="OnlyAgent"></a>
17+
<nav class="oa-navlinks">
2618
<% if(htmlWebpackPlugin.options.app_pages)
27-
for(var i in htmlWebpackPlugin.options.app_pages) {
19+
for(var i in htmlWebpackPlugin.options.app_pages) {
2820
var ap = htmlWebpackPlugin.options.app_pages[i];
2921
if(ap.icon){ %>
30-
<a class="navbar-brand" href="./<%= ap.name %>"><i class="fa <%= ap.icon %>" aria-hidden="true"></i></a>
22+
<a href="./<%= ap.name %>"<% if(ap.name===htmlWebpackPlugin.options.page){ %> class="active"<% } %>><i class="fa <%= ap.icon %>" aria-hidden="true"></i><span><%= ap.name %></span></a>
3123
<% }else if(ap.title){ %>
32-
<a class="navbar-brand" href="./<%= ap.name %>">
33-
<%= ap.title %>
34-
</a>
35-
<% } } %>
36-
24+
<a href="./<%= ap.name %>"<% if(ap.name===htmlWebpackPlugin.options.page){ %> class="active"<% } %>><span><%= ap.title %></span></a>
25+
<% } } %>
26+
<span class="sep"></span>
27+
<a href="/"><i class="fa fa-home" aria-hidden="true"></i><span>Home</span></a>
28+
<a href="https://docs.crp.to/webcrypt.html"><i class="fa fa-question" aria-hidden="true"></i><span>Help</span></a>
29+
<a href="https://onlykey.io"><i class="fa fa-shopping-cart" aria-hidden="true"></i><span>Get OnlyKey</span></a>
30+
</nav>
31+
</div></header>
3732

38-
<br class="d-block d-sm-none" />
39-
<a class="">&nbsp;Links&nbsp;</a>
40-
<a class="navbar-brand" href="/"><i class="fa fa-home" aria-hidden="true"></i></a>
41-
<a class="navbar-brand" href="https://docs.crp.to/webcrypt.html"><i class="fa fa-question" aria-hidden="true"></i></a>
42-
<a class="navbar-brand" href="https://docs.crp.to/"><i class="fa fa-book" aria-hidden="true"></i></a>
43-
<a class="navbar-brand" href="https://onlykey.io"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a>
33+
<main class="oa-main">
34+
<div class="oa-page-head">
35+
<h1 id="fancy-icons">
36+
<i class="fi-a fa fa-paper-plane" aria-hidden="true"></i>
37+
<i class="fi-b fa fa-long-arrow-right" aria-hidden="true"></i>
38+
<i class="fi-c fa fa-lock" aria-hidden="true"></i>
39+
</h1>
40+
<div id="header_messages"></div>
4441
</div>
45-
</nav>
46-
<div class="container text-center pt-1 app-head">
47-
<p class="doOverflow-x">
48-
<img src="ok-plugged4.png" alt="logo" align="middle">
49-
</p>
50-
<h1 id="fancy-icons">
51-
<i class="fi-a fa fa-paper-plane fa-2x" aria-hidden="true"></i>
52-
<i class="fi-b fa fa-long-arrow-right fa-2x" aria-hidden="true"></i>
53-
<i class="fi-c fa fa-lock fa-2x" aria-hidden="true"></i>
54-
</h1>
55-
<div id="header_messages"></div>
56-
</div>
57-
<div id="container">
58-
<div class="text-center">
59-
<h1>Loading...</h1>
60-
<noscript>
42+
43+
<div id="container" class="oa-content">
44+
<div class="text-center">
45+
<h1>Loading...</h1>
46+
<noscript>
6147
<h2 class="text-danger">This App Requires JavaScript to work.</h2>
6248
</noscript>
63-
</div>
64-
</div>
65-
<div id="container">
66-
<div id="terminal_messages"></div>
67-
</div>
68-
<div class="container">
69-
<div class="row pt-4">
70-
<div class="col-sm text-center">
71-
<a href="https://crp.to/">CryptoTrust LLC</a> &copy; 2021
7249
</div>
7350
</div>
74-
</div>
51+
<div id="container">
52+
<div id="terminal_messages"></div>
53+
</div>
54+
</main>
55+
56+
<footer class="oa-footer"><div class="inner">
57+
<div><a href="https://crp.to/">CryptoTrust LLC</a> &copy; 2026 · OnlyAgent</div>
58+
<div style="display:flex;gap:20px;flex-wrap:wrap">
59+
<a href="https://onlyagent.us">onlyagent.us</a>
60+
<a href="https://docs.crp.to/webcrypt.html">Help</a>
61+
</div>
62+
</div></footer>
7563
</body>
7664

7765
</html>

‎src/assets/css/onlyagent-theme.css‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
/* ==========================================================================
2+
OnlyAgent — app design system (matches the onlyagent.us landing page)
3+
src/assets/css/onlyagent-theme.css · link LAST in the shells.
4+
Visual only — no JS/crypto changes. Restyles the WebCrypt app into a
5+
card-based, professional dark UI.
6+
========================================================================== */
7+
8+
:root{
9+
--bg:#070b10; --bg-2:#0c131c; --panel:#0f1822; --panel-2:#13202c;
10+
--line:#1d2a38; --line-2:#26384a; --text:#e8eef5; --muted:#93a3b5;
11+
--accent:#3ad6c4; --accent-2:#2f8fff; --danger:#ff6b6b; --ok:#3ad6c4;
12+
--radius:16px; --radius-sm:11px; --max:980px;
13+
--grad:linear-gradient(135deg,var(--accent),var(--accent-2));
14+
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
15+
--mono:'Share Tech Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
16+
}
17+
18+
/* ---------- base ---------- */
19+
*{box-sizing:border-box}
20+
html{scroll-behavior:smooth}
21+
body{
22+
margin:0;color:var(--text);font-family:var(--sans);line-height:1.6;
23+
-webkit-font-smoothing:antialiased;
24+
background:
25+
radial-gradient(1000px 520px at 82% -8%,rgba(47,143,255,.13),transparent 60%),
26+
radial-gradient(860px 520px at 4% 2%,rgba(58,214,196,.10),transparent 55%),
27+
var(--bg);
28+
background-attachment:fixed;min-height:100vh;
29+
}
30+
a{color:var(--accent);text-decoration:none;transition:.15s}
31+
a:hover{color:var(--accent-2)}
32+
h1,h2,h3,h4,h5,h6{margin:0;letter-spacing:-.02em;font-weight:700;line-height:1.18}
33+
p{margin:0 0 1rem}
34+
hr{border:0;border-top:1px solid var(--line);margin:28px 0}
35+
::selection{background:rgba(58,214,196,.28)}
36+
font{font-size:inherit!important}
37+
38+
/* ---------- top nav (custom .oa-nav, replaces Bootstrap navbar) ---------- */
39+
.oa-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
40+
background:rgba(7,11,16,.8);border-bottom:1px solid var(--line)}
41+
.oa-nav .inner{max-width:var(--max);margin:0 auto;height:62px;display:flex;
42+
align-items:center;justify-content:space-between;padding:0 22px;gap:16px}
43+
.oa-brand{display:flex;align-items:center;gap:10px;font-weight:700}
44+
.oa-brand img{height:30px;width:auto;display:block}
45+
.oa-navlinks{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
46+
.oa-navlinks a{color:var(--muted);font-size:14px;font-weight:500;padding:8px 12px;border-radius:9px}
47+
.oa-navlinks a:hover{color:var(--text);background:var(--panel)}
48+
.oa-navlinks a.active{color:var(--text);background:var(--panel);border:1px solid var(--line)}
49+
.oa-navlinks a i{margin-right:6px;color:var(--accent)}
50+
.oa-navlinks .sep{width:1px;height:22px;background:var(--line);margin:0 6px}
51+
@media(max-width:680px){.oa-navlinks a span{display:none}.oa-navlinks a i{margin:0}}
52+
53+
/* legacy bootstrap navbar fallback (in case a page still uses it) */
54+
.navbar.bg-dark{background:rgba(7,11,16,.8)!important;border-bottom:1px solid var(--line)}
55+
.navbar .navbar-brand,.navbar a{color:var(--muted)!important}
56+
.navbar .navbar-brand:hover{color:var(--text)!important}
57+
.navbar .fa{color:var(--accent)}
58+
59+
/* ---------- layout ---------- */
60+
.oa-main{max-width:var(--max);margin:0 auto;padding:0 22px 90px}
61+
.oa-page-head{text-align:center;padding:46px 0 30px}
62+
.oa-page-head .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
63+
color:var(--accent);background:rgba(58,214,196,.08);border:1px solid rgba(58,214,196,.25);
64+
padding:6px 13px;border-radius:999px;margin-bottom:16px}
65+
.oa-page-head h1{font-size:clamp(26px,4.4vw,40px);font-weight:800}
66+
.oa-page-head p{color:var(--muted);max-width:56ch;margin:14px auto 0;font-size:17px}
67+
68+
/* ---------- card (wraps tool forms + content) ---------- */
69+
.oa-card,#container.oa-content{
70+
background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
71+
padding:30px;margin:0 auto;max-width:680px;
72+
box-shadow:0 18px 50px rgba(0,0,0,.35);
73+
}
74+
#container.oa-content{display:block}
75+
#container fieldset{background:transparent;border:0;padding:0;margin:0}
76+
#container h4{font-size:16px;font-weight:600;color:var(--muted);text-align:center;margin:0 auto 22px;max-width:50ch}
77+
#container h4 font{font-size:16px!important}
78+
#container h3{font-size:15px;color:var(--text);margin-bottom:10px;font-weight:600}
79+
#container > div > h1{font-size:18px;color:var(--muted);text-align:center}
80+
81+
/* ---------- form controls ---------- */
82+
label{display:block;color:var(--text);font-weight:500;font-size:14px;margin:0 0 7px}
83+
input[type="text"],input[type="email"],input[type="password"],input[type="search"],
84+
input:not([type]),textarea,select,.form-control{
85+
width:100%;background:var(--bg-2)!important;color:var(--text)!important;
86+
border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;
87+
padding:13px 15px!important;font-family:var(--sans);font-size:15px;margin-bottom:14px;
88+
transition:border-color .18s, box-shadow .18s;
89+
}
90+
textarea{min-height:54px;resize:vertical;line-height:1.5}
91+
#message{min-height:150px}
92+
input::placeholder,textarea::placeholder{color:var(--muted)!important;opacity:1}
93+
input:focus,textarea:focus,select:focus,.form-control:focus,input.focus,textarea.focus{
94+
outline:none!important;border-color:var(--accent)!important;
95+
box-shadow:0 0 0 3px rgba(58,214,196,.15)!important;background:var(--bg-2)!important;color:var(--text)!important;
96+
}
97+
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
98+
background-position:calc(100% - 20px) 19px,calc(100% - 14px) 19px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px!important}
99+
select option{background:var(--panel);color:var(--text)}
100+
fieldset{border:0;padding:0;margin:0}
101+
input[readonly]{background:var(--panel-2)!important;color:var(--accent)!important;font-family:var(--mono)}
102+
103+
/* radio groups -> pill segment look */
104+
#action,form#action{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px;color:var(--muted)}
105+
#action label,center label{display:inline-flex;align-items:center;gap:7px;margin:0;
106+
background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--text);font-size:14px;cursor:pointer}
107+
input[type="radio"],input[type="checkbox"]{accent-color:var(--accent);width:auto;margin:0}
108+
center{display:block}
109+
110+
/* file input */
111+
input[type="file"]{width:100%;color:var(--muted);background:var(--bg-2);border:1px dashed var(--line-2);
112+
border-radius:var(--radius-sm);padding:18px;cursor:pointer;margin-bottom:14px}
113+
input[type="file"]::file-selector-button{background:var(--panel-2);color:var(--text);border:1px solid var(--line);
114+
border-radius:9px;padding:9px 15px;margin-right:14px;cursor:pointer;font-family:var(--sans);font-weight:600}
115+
input[type="file"]::file-selector-button:hover{border-color:var(--accent)}
116+
.block,.block-inner{background:transparent;border:0;padding:0;margin:0 0 14px}
117+
.block .block-inner{padding:0}
118+
.outline{border:0!important}
119+
#filedetails,#results{color:var(--muted);font-size:14px}
120+
121+
/* ---------- buttons ---------- */
122+
.btn,button,#onlykey_start,#submit,a.oa-btn{
123+
font-family:var(--sans);font-weight:700;font-size:15px;border-radius:var(--radius-sm);
124+
padding:13px 20px;cursor:pointer;transition:.15s;border:1px solid transparent;display:inline-flex;
125+
align-items:center;justify-content:center;gap:8px;
126+
}
127+
/* primary submit / search */
128+
button[type="submit"],#onlykey_start,#submit,.btn-success,.oa-btn-primary{
129+
width:100%;background:var(--grad)!important;color:#04121a!important;border:0!important;
130+
box-shadow:0 10px 26px rgba(47,143,255,.22);margin-top:6px;
131+
}
132+
button[type="submit"]:hover,#onlykey_start:hover,#submit:hover,.btn-success:hover{filter:brightness(1.08);transform:translateY(-1px)}
133+
.btn-secondary,.btn-light,.btn-default{background:var(--panel-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;width:auto}
134+
.btn-danger{background:var(--danger)!important;color:#1a0606!important;border:0!important}
135+
/* generic non-action buttons */
136+
button{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}
137+
button:hover{border-color:var(--accent)}
138+
139+
/* ---------- home page (.oa-tools grid) ---------- */
140+
.oa-hero{text-align:center;padding:54px 0 8px}
141+
.oa-hero h1{font-size:clamp(30px,5.2vw,50px);font-weight:800;max-width:16ch;margin:0 auto}
142+
.oa-hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
143+
.oa-hero p{color:var(--muted);font-size:18px;max-width:54ch;margin:18px auto 0}
144+
.oa-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:40px 0}
145+
@media(max-width:680px){.oa-tools{grid-template-columns:1fr}}
146+
.oa-tool{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
147+
padding:26px;transition:.18s;color:var(--text)}
148+
.oa-tool:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.35);color:var(--text)}
149+
.oa-tool .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:20px;
150+
color:#04121a;background:var(--grad);margin-bottom:16px}
151+
.oa-tool h3{font-size:19px;margin-bottom:6px}
152+
.oa-tool p{color:var(--muted);font-size:14.5px;margin:0}
153+
.oa-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
154+
155+
/* fancy-icons header on tool pages */
156+
#fancy-icons{margin:8px 0 0;font-size:22px}
157+
#fancy-icons .fa{color:var(--accent)}
158+
#fancy-icons .fi-b{color:var(--muted)}
159+
.app-head img{filter:drop-shadow(0 8px 30px rgba(58,214,196,.22))}
160+
161+
/* console / code (password-generator) */
162+
pre{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;overflow:auto;margin-top:6px}
163+
pre code,code{color:var(--accent);font-family:var(--mono);background:transparent}
164+
#messages,#header_messages,#terminal_messages{color:var(--accent)}
165+
.xterm-viewport,.xterm-screen{background:var(--bg-2)!important;border-radius:10px}
166+
167+
/* ---------- modals ---------- */
168+
.modal-content{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;color:var(--text)!important;box-shadow:0 24px 70px rgba(0,0,0,.5)}
169+
.modal-header,.modal-footer{border-color:var(--line)!important}
170+
.modal-title{color:var(--text)}
171+
.modal-footer button{width:auto}
172+
.close{color:var(--muted);text-shadow:none;opacity:.8}
173+
.close:hover{color:var(--text)}
174+
175+
/* tokenizer chips */
176+
.tokenfield,.tokenizer{background:var(--bg-2)!important;border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;padding:6px!important;margin-bottom:14px}
177+
.token,.tokenfield .token{background:rgba(58,214,196,.14)!important;border:1px solid rgba(58,214,196,.35)!important;color:var(--text)!important;border-radius:8px!important}
178+
.token .close{color:var(--accent)}
179+
180+
/* alerts */
181+
.alert-success{background:rgba(58,214,196,.1)!important;border:1px solid rgba(58,214,196,.35)!important;color:var(--text)!important;border-radius:var(--radius-sm)}
182+
.alert-danger,.text-danger{color:var(--danger)!important}
183+
.alert-warning{background:rgba(255,172,2,.08)!important;border:1px solid rgba(255,172,2,.3)!important;color:#ffce6a!important;border-radius:var(--radius-sm)}
184+
185+
/* ---------- footer ---------- */
186+
.oa-footer{border-top:1px solid var(--line);padding:34px 22px;margin-top:30px}
187+
.oa-footer .inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:14px}
188+
.oa-footer a{color:var(--muted)}.oa-footer a:hover{color:var(--text)}
189+
190+
/* scrollbar */
191+
*{scrollbar-color:var(--line) transparent}
192+
::-webkit-scrollbar{width:10px;height:10px}
193+
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
194+
::-webkit-scrollbar-thumb:hover{background:var(--line-2)}

‎src/assets/onlyagent-logo.svg‎

Lines changed: 18 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)