Skip to content

Commit 4f67f34

Browse files
thisconnectthisconnect
committed
bridge: user confirmation styling
Added basic BitBox styling. The HTML file is self contained and only uses inline styles and inline svg graphics.
1 parent fba8738 commit 4f67f34

File tree

1 file changed

+104
-4
lines changed

1 file changed

+104
-4
lines changed

‎bitbox-bridge/resources/confirmation_dialog.html‎

Lines changed: 104 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,112 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>BitBoxBridge</title>
6+
<style>
7+
html, body {
8+
height: 100%;
9+
margin: 0;
10+
}
11+
body {
12+
align-items: center;
13+
background-color: #f5f5f5;
14+
display: flex;
15+
justify-content: center;
16+
overflow-y: auto;
17+
}
18+
body, button {
19+
font-family: sans-serif;
20+
color: #333;
21+
}
22+
.container {
23+
background-color: #fff;
24+
border-radius: 2px;
25+
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
26+
box-sizing: border-box;
27+
display: block;
28+
max-width: 640px;
29+
min-height: 360px;
30+
padding: 20px 30px;
31+
text-align: center;
32+
width: 100%;
33+
}
34+
.dbb-logo {
35+
width: 72px;
36+
height: 100%;
37+
margin-top: 16px;
38+
padding: 0.3em;
39+
}
40+
h1 {
41+
font-size: 32px;
42+
line-height: 1.25;
43+
margin-top: 0;
44+
}
45+
p {
46+
line-height: 1.4;
47+
margin-bottom: 48px;
48+
}
49+
button {
50+
background-color: #fff;
51+
border: 2px solid #6b9ec5;
52+
border-radius: 2px;
53+
cursor: pointer;
54+
display: inline-block;
55+
font-size: 16px;
56+
height: 48px;
57+
letter-spacing: 0.2px;
58+
line-height: 46px;
59+
margin: 0 0 16px 0;
60+
min-width: 165px;
61+
padding: 0 8px;
62+
}
63+
button + button {
64+
margin-left: 16px;
65+
}
66+
button:hover {
67+
border-color: #5794c4;
68+
}
69+
button svg {
70+
display: inline;
71+
margin-right: 8px;
72+
max-height: 26px;
73+
max-width: 26px;
74+
vertical-align: middle;
75+
}
76+
.agree {
77+
border-color: #78bd77;
78+
}
79+
.decline {
80+
border-color: #ec644b;
81+
}
82+
</style>
683
</head>
784
<body>
8-
<h1>BitBoxBridge</h1>
9-
<p>{{ message }}</p>
10-
<button onclick="sendResponse(false)">Reject</button>
11-
<button onclick="sendResponse(true)">Accept</button>
85+
86+
<span hidden>
87+
<svg xmlns="http://www.w3.org/2000/svg">
88+
<symbol id="checkmark" class="checkmark" viewBox="0 0 52 52" stroke-linecap="round" stroke-linejoin="round" stroke-width="6">
89+
<circle cx="26" cy="26" r="26" fill="#78bd77"/>
90+
<path d="M14.1 27.2l7.1 7.2 16.7-16.8" fill="none" stroke="#fff"/>
91+
</symbol>
92+
<symbol id="crossmark" class="crossmark" viewBox="0 0 52 52" stroke-linecap="round" stroke-linejoin="round" stroke-width="6">
93+
<circle cx="26" cy="26" r="26" fill="#ec644b"/>
94+
<path d="M16 16 36 36 M36 16 16 36" fill="none" stroke="#fff"/>
95+
</symbol>
96+
</svg>
97+
</span>
98+
99+
<div class="container">
100+
<svg class="dbb-logo" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="dbb-logo" viewBox="0 0 512 512"><path d="M105.8 347.4v-82.9l67-28.8V106.6l66.6-29.1v212zm300.4.7v-82.8l-67-28.9V107.3l-66.6-28.9v211.8zm-150-29.6L123 376.7l133.1 57.8 133.6-58.1z" style="fill:#191919"/></svg>
101+
<h1>BitBoxBridge</h1>
102+
<p>{{ message }}</p>
103+
<button class="decline" onclick="sendResponse(false)">
104+
<svg><use xlink:href="#crossmark"></use></svg>
105+
Reject
106+
</button>
107+
<button class="agree" onclick="sendResponse(true)">
108+
<svg><use xlink:href="#checkmark"></use></svg>
109+
Accept
110+
</button>
111+
</div>
12112
<script>
13113
function sendResponse(userChoice) {
14114
fetch(`/confirm/response/{{ counter }}/${userChoice}`, { method: 'POST' })

0 commit comments

Comments
 (0)