mirror of
https://github.com/stewit/banana_split.git
synced 2026-09-12 19:51:05 +05:00
Merge pull request #78 from paritytech/text-and-css-adjustment
[UI] Adjust description text and CSS styles
This commit is contained in:
Kirill Pimenov
GitHub
commit
fbf95db158
79
src/App.vue
79
src/App.vue
@ -3,34 +3,23 @@
|
||||
<div id="app" class="measure">
|
||||
<ForkMe url="https://github.com/paritytech/banana_split" />
|
||||
<nav>
|
||||
<h1 id="logo">
|
||||
Banana
|
||||
<br />
|
||||
Split
|
||||
<span>
|
||||
<router-link id="logo" to="/">
|
||||
<span class="logo-text">
|
||||
Banana Split
|
||||
</span>
|
||||
<span class="logo-icon">
|
||||
🍌
|
||||
</span>
|
||||
</h1>
|
||||
</router-link>
|
||||
<Alert />
|
||||
<GeneralInfo />
|
||||
<div class="measure">
|
||||
<div v-if="secure">
|
||||
<router-link id="shareNav" class="button-nav" to="/share">
|
||||
Create
|
||||
</router-link>
|
||||
<router-link id="combineNav" class="button-nav" to="/combine">
|
||||
Restore
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<router-view v-if="secure" />
|
||||
<SavePageInfo v-else-if="!localFile" />
|
||||
<GoOfflineInfo v-else-if="isOnline" />
|
||||
<p class="version-footer">
|
||||
<div class="version-footer">
|
||||
BananaSplit version {{ version }}, git revision {{ gitRevision }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="print" class="measure flex" />
|
||||
</div>
|
||||
@ -38,7 +27,6 @@
|
||||
|
||||
<script lang="ts">
|
||||
import Alert from "./components/Alert.vue";
|
||||
import GeneralInfo from "./components/GeneralInfo.vue";
|
||||
import GoOfflineInfo from "./components/GoOfflineInfo.vue";
|
||||
import SavePageInfo from "./components/SavePageInfo.vue";
|
||||
import ForkMe from "./components/ForkMe.vue";
|
||||
@ -48,7 +36,7 @@ import Vue from "vue";
|
||||
|
||||
export default Vue.extend({
|
||||
name: "App",
|
||||
components: { Alert, GeneralInfo, GoOfflineInfo, SavePageInfo, ForkMe },
|
||||
components: { Alert, GoOfflineInfo, SavePageInfo, ForkMe },
|
||||
computed: {
|
||||
localFile(): boolean {
|
||||
return window.location.protocol === "file:";
|
||||
@ -91,7 +79,7 @@ export default Vue.extend({
|
||||
}
|
||||
html {
|
||||
font-family: var(--f_main);
|
||||
font-size: 8px;
|
||||
font-size: 9px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@ -214,12 +202,12 @@ nav {
|
||||
|
||||
h1 {
|
||||
font-weight: 600;
|
||||
font-size: 3rem;
|
||||
font-size: 3.5rem;
|
||||
line-height: 0.9em;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.3rem;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
a {
|
||||
@ -247,33 +235,42 @@ textarea:disabled {
|
||||
background: transparent;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#logo {
|
||||
margin: 0 2rem 0 0;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 250%;
|
||||
margin: 10px auto 0;
|
||||
color: var(--c_text-main);
|
||||
}
|
||||
#logo span {
|
||||
font-size: 1.2em;
|
||||
position: absolute;
|
||||
margin: 0.25em 0 0 0.1em;
|
||||
#logo:hover > .logo-text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#logo > .logo-icon {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
font-size: 140%;
|
||||
}
|
||||
|
||||
.button-nav {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
font-size: 1.4em;
|
||||
color: var(--c_text-main);
|
||||
border: 1px solid transparent;
|
||||
padding: 1rem 3rem 1.2rem;
|
||||
margin: 0 1rem 0 0;
|
||||
border-radius: 1rem;
|
||||
text-decoration: none;
|
||||
background-color: var(--c_bg-emphasis-main);
|
||||
color: var(--c_text-onEmphasis);
|
||||
text-decoration: none;
|
||||
}
|
||||
.button-nav:hover,
|
||||
.button-nav.router-link-exact-active {
|
||||
border-color: var(--c_border-main);
|
||||
}
|
||||
.button-nav.router-link-exact-active {
|
||||
background: white;
|
||||
background-color: var(--c_bg-app);
|
||||
color: var(--c_text-main);
|
||||
}
|
||||
|
||||
button {
|
||||
@ -292,23 +289,11 @@ button {
|
||||
}
|
||||
|
||||
.version-footer {
|
||||
padding-top: 30px;
|
||||
font-size: 80%;
|
||||
font-style: italic;
|
||||
color: darkgray;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 850px) {
|
||||
#logo {
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
left: 2rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 530px) {
|
||||
#logo {
|
||||
display: none;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
@media screen and (max-width: 415px) {
|
||||
.fold input:checked ~ .fold-content {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<span id="forkongithub">
|
||||
<a :href="url">🥄Fork me on GitHub</a>
|
||||
<a :href="url">🥄 Fork me on GitHub</a>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@ -31,7 +31,7 @@ export default {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 0.5rem 0 1rem;
|
||||
font-size: 2rem;
|
||||
font-size: 1.5rem;
|
||||
width: 240px;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
|
||||
@ -1,41 +1,45 @@
|
||||
<template>
|
||||
<div class="fold">
|
||||
<input id="fold-header" v-model="unfolded" type="checkbox" name="fold" />
|
||||
<label for="fold-header">
|
||||
<h2>What is this?</h2>
|
||||
</label>
|
||||
<div class="fold-content measure card-alt">
|
||||
<h2>Shamir Secret Sharing for people with friends</h2>
|
||||
<p>
|
||||
Banana Split uses
|
||||
<a href="https://en.wikipedia.org/wiki/Shamir%27s_Secret_Sharing">
|
||||
Shamir's secret sharing
|
||||
</a>
|
||||
to make your paper backups more resilient and secure.
|
||||
</p>
|
||||
<p>
|
||||
After you type in your secret into Banana Split, it will be encrypted
|
||||
with a autogenerated passphrase and split into N QR-codes, ready to be
|
||||
printed out. You'll need N/2+1 of those printouts to reconstruct the
|
||||
secret, and then the passphrase to decrypt it.
|
||||
</p>
|
||||
<p>
|
||||
Banana Split tries to protect your secret from the attack vectors like
|
||||
"attacker is able to intercept everything you're sending to your
|
||||
printer", and that's why you'll have to write down the passphrase on
|
||||
your printouts by hand.
|
||||
</p>
|
||||
<p>
|
||||
Banana Split is a self-contained HTML page, and should only be opened
|
||||
from your local Documents folder, while browser is in the Offline mode —
|
||||
this way the risk of compromise will be minimal.
|
||||
</p>
|
||||
<p>
|
||||
Recovery can be done on any device with a webcam — just show your QR
|
||||
codes to the webcam and follow the notifications on screen in the
|
||||
process.
|
||||
</p>
|
||||
</div>
|
||||
<div class="general-info">
|
||||
<h2>What is this?</h2>
|
||||
<p>
|
||||
Banana Split is a self-contained HTML page, which makes your paper
|
||||
backups more resilient and secure using
|
||||
<a href="https://en.wikipedia.org/wiki/Shamir%27s_Secret_Sharing" target="_blank">
|
||||
Shamir's secret sharing scheme</a>.
|
||||
You can encrypt and split particularly sensitive information
|
||||
so that it's not physically stored in one place — your master
|
||||
assword, seed phrase, etc.
|
||||
</p>
|
||||
<h2>How does it work?</h2>
|
||||
<p>
|
||||
After you type in your secret into Banana Split, it will be encrypted with
|
||||
an autogenerated passphrase and split into N QR-codes, ready to be printed out.
|
||||
You'll need N/2+1 of those printouts to reconstruct the secret, and
|
||||
then the passphrase to decrypt it.
|
||||
</p>
|
||||
<p>
|
||||
Banana Split tries to protect your secret from the attack vectors like
|
||||
"attacker is able to intercept everything you're sending to your printer",
|
||||
and that's why you'll have to write down the passphrase on your printouts
|
||||
by hand.
|
||||
</p>
|
||||
<p>
|
||||
Of course you should seal your printouts in non-transparent envelopes and distribute among different locations as soon as you're done writing your seed phrase — Banana Split is only more secure than a single paper with your secret as long as the secrets can't be lost/stolen altogether.
|
||||
</p>
|
||||
<p>
|
||||
All operations must be performed in Offline mode. Recovery can be done
|
||||
on any device with a webcam — just show your QR codes to the webcam
|
||||
and follow the notifications on screen in the process.
|
||||
</p>
|
||||
<h2>How to use it?</h2>
|
||||
<ol>
|
||||
<li>Save this HTML page into your local Documents folder</li>
|
||||
<li>Turn off Wi-Fi, Bluetooth and any other connectivity on your device</li>
|
||||
<li>Open the downloaded HTML page and follow the instructions</li>
|
||||
</ol>
|
||||
<p>
|
||||
This way the risk of compromise will be minimal.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -44,63 +48,18 @@ import Vue from "vue";
|
||||
|
||||
export default Vue.extend({
|
||||
name: "GeneralInfo",
|
||||
data: function() {
|
||||
return { unfolded: true };
|
||||
},
|
||||
created: function() {
|
||||
const self = this;
|
||||
this.$eventHub.$on("foldGeneralInfo", function() {
|
||||
self.unfolded = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fold {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
width: 150px;
|
||||
.general-info {
|
||||
display: block;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.fold input {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
p {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.fold label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transform: translateY(0.5rem);
|
||||
}
|
||||
.fold-content {
|
||||
max-height: 0;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s, margin 0.3s, opacity 0.25s;
|
||||
}
|
||||
.fold-content > * {
|
||||
padding: 0 3rem;
|
||||
}
|
||||
.fold input[type="checkbox"]:not(:checked) ~ .fold-content {
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.fold input:checked ~ .fold-content {
|
||||
max-height: 999px;
|
||||
margin-bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fold label::before {
|
||||
margin: 0 4px 0 0;
|
||||
width: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fold input[type="checkbox"]:not(:checked) + label::before {
|
||||
content: "▶";
|
||||
}
|
||||
.fold input[type="checkbox"]:checked + label::before {
|
||||
content: "▼";
|
||||
li {
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,27 @@
|
||||
<template>
|
||||
<div />
|
||||
<div>
|
||||
<GeneralInfo />
|
||||
<div class="measure">
|
||||
<div>
|
||||
<router-link id="shareNav" class="button-nav" to="/share">
|
||||
Create
|
||||
</router-link>
|
||||
<router-link id="combineNav" class="button-nav" to="/combine">
|
||||
Restore
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {};
|
||||
import GeneralInfo from "../components/GeneralInfo.vue";
|
||||
import Vue from "vue";
|
||||
|
||||
export default Vue.extend({
|
||||
name: "Info",
|
||||
components: { GeneralInfo },
|
||||
});
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user