mirror/0bin
1
0
Fork 0
mirror of https://github.com/Tygs/0bin.git synced 2023-08-10 21:13:00 +03:00
Code Issues Projects Releases Wiki Activity

Merge new theme

Browse Source
This commit is contained in:
ksamuel 2020-08-12 10:11:51 +02:00
commit 933118c1cd
9 changed files with 645 additions and 601 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
zerobin/static/css/bootswatch.4.5.css Normal file
View File

File diff suppressed because one or more lines are too long

34
zerobin/static/css/desert.css Normal file
View File

@ -0,0 +1,34 @@
/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #333 }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff } /* punctuation */
pre .pln { color: #fff } /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal - lightgreen */
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }
@media print {
pre.prettyprint { background-color: none }
pre .str, code .str { color: #060 }
pre .kwd, code .kwd { color: #006; font-weight: bold }
pre .com, code .com { color: #600; font-style: italic }
pre .typ, code .typ { color: #404; font-weight: bold }
pre .lit, code .lit { color: #044 }
pre .pun, code .pun { color: #440 }
pre .pln, code .pln { color: #000 }
pre .tag, code .tag { color: #006; font-weight: bold }
pre .atn, code .atn { color: #404 }
pre .atv, code .atv { color: #060 }
}

398
zerobin/static/css/style.css
View File

@ -10,16 +10,12 @@
/* logo */ /* logo */
.brand { .brand {
font-size: 38px !important; font-size: 38px !important;
padding: 0 55px 3px !important; padding: 0 !important;
margin-left: 10%;
text-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 0 30px rgba(255, 255, 255, .125);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
} }
.brand span { .brand span {
@ -45,17 +41,17 @@
text-align: center; text-align: center;
} }
.about span { .about span{
font-size: 10px; font-size: 10px;
} }
/* body & other stuff */ /* body & other stuff */
body { body {
padding-top: 60px;
padding-bottom: 40px; padding-bottom: 40px;
} }
.sidebar-nav { .sidebar-nav {
padding: 9px 0; padding: 9px 0;
} }
@ -64,16 +60,8 @@ select {
width: 135px; width: 135px;
} }
label {
display: inline;
margin-left: 18px;
font-style: italic;
font-size: 11px;
color: #888;
}
ul, ul, ol {
ol {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -82,6 +70,14 @@ li {
margin-left: -9px; margin-left: -9px;
} }
a {
color: #2ea1d7;
}
a:hover {
color: #1888bc;
}
p { p {
margin: 0 0 20px; margin: 0 0 20px;
} }
@ -100,52 +96,28 @@ blockquote {
float: left; float: left;
} }
h4 p {
float: left;
font-size: 80px;
text-shadow: 1px 3px 1px #DDD, 0 0 4px #333;
-webkit-transition: all 0.2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
margin-right: 7px;
margin-top: 3px;
}
h4#pixels-total {
position: relative;
width: 166px;
float: right;
margin: 8px 0 0 0;
padding: 0 0 0 54px;
font-size: 1.1em;
line-height: 1.4;
font-weight: normal;
color: #777;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 20px;
-moz-border-top-right-radius: 6px;
-moz-border-top-left-radius: 20px;
border-top-right-radius: 6px;
border-top-left-radius: 20px;
}
.greetings {
clear: both;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.alert .title { .alert .title {
display:block;
}
.footer {
text-align: center;
bottom: 0px;
position: fixed;
height: 60px;
width: 100%;
display: block; display: block;
margin: 0px 0px 0px 0px;
padding: 8px 0 0 0;
left: 0;
background-color: #424141;
} }
/* Home */ /* Home */
.btn-group { .btn-group {
float: left; float:left;
} }
html.file-upload p.file-upload { html.file-upload p.file-upload {
@ -155,13 +127,14 @@ html.file-upload p.file-upload {
} }
html.file-upload p.file-upload { html.file-upload p.file-upload {
display: inherit; display:inherit;
} }
html.no-file-upload p.file-upload { html.no-file-upload p.file-upload {
display: none; display:none;
} }
input.btn-upload { input.btn-upload {
position: relative; position: relative;
left: -6px; left: -6px;
@ -175,7 +148,7 @@ input.hide-upload {
left: -110px; left: -110px;
-moz-opacity: 0; -moz-opacity: 0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
opacity: 0; opacity: 0 ;
z-index: 2; z-index: 2;
width: 100px; width: 100px;
margin-top: -20px; margin-top: -20px;
@ -184,113 +157,114 @@ input.hide-upload {
height: 49px; height: 49px;
} }
/* Paste Page */ /* Paste Page */
#paste-content {
background-color: white;
padding: 1em;
}
#paste-content.linenums { #paste-content.linenums {
padding-left: 0; padding-left:0;
} }
.submit-form { .submit-form {
display: none; display:none;
} }
.paste-option {
float: right; a#clip-button.hover{
cursor:pointer;
text-decoration:underline;
} }
a#clip-button.hover { li.L0, li.L1, li.L2, li.L3, li.L4,
cursor: pointer; li.L5, li.L6, li.L7, li.L8, li.L9
text-decoration: underline; {
}
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
list-style-type: decimal; list-style-type: decimal;
background: inherit; background: inherit;
} }
pre.prettyprint {
width: 100%;
min-height: 100px;
}
.prettyprint.linenums { .prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; /* -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; */
} }
/* Specify class=linenums on a pre to get line numbering */ /* Specify class=linenums on a pre to get line numbering */
ol.linenums { ol.linenums {
margin: 0 0 0 55px; margin: 0 0 0 55px; /* IE indents via margin-left */
/* IE indents via margin-left */
} }
ol.linenums li { ol.linenums li {
color: #bebec5; /* color: #bebec5;
line-height: 18px; line-height: 18px;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff; */
} }
.prettyprint { .prettyprint {
padding: 8px; /* padding: 8px;
background-color: #f7f7f9; background-color: #f7f7f9;
border: 1px solid #e1e1e8; border: 1px solid #e1e1e8; */
} }
pre { pre {
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, monospace, serif; /* font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, monospace, serif;
line-height: 21px; line-height: 21px;
font-size: 12px; font-size: 12px; */
white-space: pre-wrap;
overflow: visible;
} }
.kwd { .kwd {
color: #66F; color: #66F;
} }
.pun, .pun, .opn, .clo {
.opn, color: #0A0;
.clo {
color: #0A0;
} }
.lit { .lit {
color: #933; color: #933;
} }
.com { .com {
color: #C0C; color: #C0C;
} }
/* Common css */ /* Common css */
form { .form-control,
padding-bottom: 3em !important; .form-control:focus,
padding-right: 17px; .form-control:disabled,
.form-control[readonly],
#paste-content {
background-color: #375a7f;
color: #f9fafc;
border-radius: 3px;
}
.form-group {
/* margin-bottom: 1rem; */
margin-bottom: 0;
}
.select-date {
width: 320px;
float: right;
}
.select-date-clone {
width: 60%;
max-width: 320px;
}
.container-md {
margin-top: 20px;
padding-bottom: 80px;
} }
form textarea { form textarea {
overflow-y: auto; overflow-y:auto;
min-height: 250px; min-height:250px;
}
button.btn,
input[type="submit"].btn {
margin-left: 5px;
}
.well {
padding-bottom: 40px;
padding-right: 17px;
} }
.legal { .legal {
@ -300,65 +274,52 @@ input[type="submit"].btn {
margin-top: 30px; margin-top: 30px;
} }
.btn {
margin-left: 5px; #alert-template {
display: none;
} }
.btn-primary,
.btn-danger {
position: relative;
top: -4px;
}
/** Progress bar */ /** Progress bar */
.progress { .progress {
width: 100%; margin: 8px 0 8px 0;
height: 1.5rem;
display: none;
} }
.progress .bar { .progress .bar {
width: 25%; width: 25%;
text-indent: 10px; padding: 12px;
text-align: left; text-align:left;
}
.lnk-option canvas {
vertical-align: middle;
margin-right: 10px;
} }
/* Previous paste list */ /* Previous paste list */
.previous-pastes .item { .progress-container {
margin-top: 5px; margin: 8px 0 8px 0;
vertical-align: middle; clear: both;
line-height: 24px;
padding-left: 1em;
}
li.item {
margin-left: -13px;
margin-right: -5px;
} }
.previous-pastes canvas { .previous-pastes canvas {
display: block; display:block;
float: left; float:left;
margin-right: 5px; margin-right:5px;
} }
html.local-storage .no-local-storage { html.local-storage .no-local-storage {
display: none; display:none;
} }
html.no-local-storage .local-storage { html.no-local-storage .local-storage {
display: none; display:none;
} }
canvas { canvas {
border: 1px solid white; border: 1px solid white;
} }
.noscript { .noscript {
text-align: center; text-align: center;
color: red; color: red;
@ -366,27 +327,27 @@ canvas {
} }
#faq dt { #faq dt {
margin: 2em 0 1em 0; margin:2em 0 1em 0;
} }
#faq p { #faq p {
margin: 1em; margin:1em;
} }
#force-coloration { #force-coloration {
text-decoration: underline; text-decoration:underline;
} }
#expiration-tag { #expiration-tag {
float: right; float:right;
margin: 1em; margin: 1em;
background: grey; background:grey;
color: white; color:white;
font-size: 0.8em; font-size:0.8em;
padding: 0 1ex; padding:0 1ex;
opacity: 0.5; opacity: 0.5;
filter: alpha(opacity=50); filter: alpha(opacity=50);
font-weight: bold; font-weight:bold;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
@ -398,3 +359,128 @@ canvas {
#content.hover { #content.hover {
background-color: #eee; background-color: #eee;
} }
/* top Menu */
#topmenu {
display: none;
}
.topnav {
height: 60px;
background-color: #333;
}
.topnav .brand {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
width: 175px;
}
.topnav .tagline {
font-size: 0.9em;
padding: 8px;
float: left;
margin-left: 20px;
}
.topnav .tagline span{
font-style: italic;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.topnav .bi-list {
width: 2em;
height: 2em;
}
/* Styling the sub menu */
nav {
float: right;
margin: 18px;
}
nav ul li {
float: left;
list-style: none;
}
nav ul li a {
color: white;
background: #333333;
padding: 10px;
text-decoration: none;
}
nav ul li a:hover {
background: #375A7F;
border-radius: 3px;
color: #FFF;
text-decoration: none;
}
.submenu {
position: relative;
}
.submenu ul {
position: absolute;
margin: 8px 0 0px 9px;
display: none;
width: -webkit-fill-available;
z-index: 9999;
}
.submenu li{
display: block;
background: #375A7F;
color: white;
float: none;
}
/* Styling drop down links */
.submenu li a {
background: transparent;
padding:10px;
display: block;
}
.submenu li a:hover {
background: gray;
}
/* Showing Submenu on hover*/
.submenu:hover ul {
display: block;
}
/* Responsive */
@media screen and (max-width: 800px) {
.topnav a:not(:first-child) {display: none;}
.topnav .tagline {display: none;}
.brand { margin-left: 1%;}
/* Fonts */
.btn {font-size: 0.77em;}
pre {font-size: 70%;}
}

156
zerobin/static/css/sunburst.css
View File

@ -1,118 +1,46 @@
/* /* Pretty printing styles. Used with prettify.js. */
* Derived from einaros's Sons of Obsidian theme at /* Vim sunburst theme by David Leibovic */
* http://studiostyl.es/schemes/son-of-obsidian by
* Alex Ford of CodeTunnel:
* http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
*/
.str pre .str, code .str { color: #65B042; } /* string - green */
{ pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
color: #EC7600; pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
pre.prettyprint, code.prettyprint {
background-color: #000;
border-radius: 8px;
} }
.kwd
{ pre.prettyprint {
color: #93C763; width: 95%;
margin: 1em auto;
padding: 1em;
white-space: pre-wrap;
} }
.com
{
color: #66747B; /* Specify class=linenums on a pre to get line numbering */
} ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
.typ li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
{ /* Alternate shading for lines */
color: #678CB1; li.L1,li.L3,li.L5,li.L7,li.L9 { }
}
.lit @media print {
{ pre .str, code .str { color: #060; }
color: #FACD22; pre .kwd, code .kwd { color: #006; font-weight: bold; }
} pre .com, code .com { color: #600; font-style: italic; }
.pun pre .typ, code .typ { color: #404; font-weight: bold; }
{ pre .lit, code .lit { color: #044; }
color: #F1F2F3; pre .pun, code .pun { color: #440; }
} pre .pln, code .pln { color: #000; }
.pln pre .tag, code .tag { color: #006; font-weight: bold; }
{ pre .atn, code .atn { color: #404; }
color: #F1F2F3; pre .atv, code .atv { color: #060; }
}
.tag
{
color: #8AC763;
}
.atn
{
color: #E0E2E4;
}
.atv
{
color: #EC7600;
}
.dec
{
color: purple;
}
pre.prettyprint
{
border: 0px solid #888;
}
ol.linenums
{
margin-top: 0;
margin-bottom: 0;
}
.prettyprint {
background: #000;
}
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
color: #555;
list-style-type: decimal;
}
li.L1, li.L3, li.L5, li.L7, li.L9 {
background: #111;
}
@media print
{
.str
{
color: #060;
}
.kwd
{
color: #006;
font-weight: bold;
}
.com
{
color: #600;
font-style: italic;
}
.typ
{
color: #404;
font-weight: bold;
}
.lit
{
color: #044;
}
.pun
{
color: #440;
}
.pln
{
color: #000;
}
.tag
{
color: #006;
font-weight: bold;
}
.atn
{
color: #404;
}
.atv
{
color: #060;
}
} }

2
zerobin/static/js/behavior.js
View File

@ -791,7 +791,7 @@ if (content && key) {
prettyPrint(); prettyPrint();
} else { } else {
if (content.indexOf('data:image') != 0) { if (content.indexOf('data:image') != 0) {
zerobin.message('info', zerobin.message('dismissible',
"The paste did not seem to be code, so it " + "The paste did not seem to be code, so it " +
"was not colorized. ", "was not colorized. ",
'', false, undefined, { '', false, undefined, {

180
zerobin/views/base.tpl
View File

@ -1,158 +1,65 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>0bin - encrypted pastebin</title> <title>0bin - encrypted pastebin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="0bin is a client-side-encrypted <meta name="description"
content="0bin is a client-side-encrypted
pastebin featuring burn after reading, history, and pastebin featuring burn after reading, history, and
a clipboard"> a clipboard">
<link rel="shortcut icon" href="/favicon.ico"> <link rel="shortcut icon" href="/favicon.ico">
%if settings.COMPRESSED_STATIC_FILES: %if settings.COMPRESSED_STATIC_FILES:
<link href="/static/css/style.min.css?{{ VERSION }}" rel="stylesheet" /> <link href="/static/css/style.min.css?{{ VERSION }}"
rel="stylesheet" />
%else: %else:
<link href="/static/css/prettify.css" rel="stylesheet" /> <link href="/static/css/prettify.css" rel="stylesheet" />
<link href="/static/css/bootstrap.css" rel="stylesheet"> <link href="/static/css/desert.css" rel="stylesheet" />
<link href="/static/css/bootswatch.4.5.css" rel="stylesheet">
<link href="/static/css/style.css?{{ VERSION }}" rel="stylesheet"> <link href="/static/css/style.css?{{ VERSION }}" rel="stylesheet">
%end %end
<!-- Le HTML5 shim, for IE7-8 support of HTML5 elements --> </head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head> <body>
<body> <div class="topnav" >
<div class="navbar navbar-fixed-top" id="menu-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/"><span>ø</span>bin<em>.net</em></a> <a class="brand" href="/"><span>ø</span>bin<em>.net</em></a>
<div class="nav-collapse"> <span class="tagline">"A client side encrypted PasteBin"<br><span>All pastes are AES256 encrypted, we cannot know what you paste...</span>
<ul class="nav"> </span>
%for i, entry in enumerate(settings.MENU):
<li>
%if "mailto:" in entry[1]:
<a :href="formatEmail('{{ entry[1].replace('mailto:', '').replace('@', '__AT__') }}')" class="email-link">
{{ entry[0] }}
</a>
%else:
<a href="{{ entry[1] }}">{{ entry[0] }}</a>
%end
</li>
%end
<nav >
<ul>
<li class="submenu" ><a href="#" onclick="ToggleMenu()">Previous pastes +</a>
<ul class="previous-pastes" id="topmenu">
<li class="item active"><a href="#">No paste yet...</a></li>
</ul> </ul>
<p class="about pull-right"> </li>
"A client side encrypted PasteBin"<br> </ul>
<span>All pastes are AES256 encrypted, we cannot know what you paste...</span> </nav>
</p>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div> </div>
<noscript class="noscript"> <noscript class="container noscript">
<p>This pastebin uses client-side encryption. Therefore, it needs JavaScript enabled.</p>
<div class="container jumbotron"> <p>It seems like your browser doesn't have JavaScript enable.</p>
<h1 class="display-4">This site requires Javascript</h1>
<p class="lead">This pastebin uses client-side encryption, and therefore, it needs JavaScript to work.</p>
<p>It seems like your browser doesn't have JavaScript enabled.</p>
<p>Please enable JavaScript for this website or use a JavaScript-capable web browser.</p> <p>Please enable JavaScript for this website or use a JavaScript-capable web browser.</p>
</div>
</noscript> </noscript>
<div class="container app" id="wrap-content" v-cloak> <div class="container-md" id="wrap-content">
<div class="row"> <div id='main' >{{!base}}</div>
<div class="span2">
<div class="well sidebar-nav">
<ul class="nav nav-list previous-pastes">
<li class="nav-header">Previous pastes</li>
<li class="item local-storage" v-if="previousPastes.length === 0">
<em class="grey">
Your previous pastes will be saved in your browser using
<a href="http://www.w3.org/TR/webstorage/">localStorage</a>.
</em>
</li>
<li class="item no-local-storage">
<em class="grey">
Sorry your browser does not support
<a href="http://www.w3.org/TR/webstorage/">LocalStorage</a>,
We cannot display your previous pastes.
</em>
</li>
<li :class="{item: true, active: paste.isCurrent}" v-for="paste in previousPastes">
<a :href="paste.link" @click="forceLoadPaste(paste.link)">
{% paste.prefix %}{% paste.displayDate %}
</a>
</li>
</ul>
</div> </div>
<!--/.well -->
</div>
<!--/span-->
<div id='main' class="span10">
<p :class="'alert alert-' + msg.type" v-for="msg in messages">
<a class="close" data-dismiss="alert" href="#" @click.prevent="$event.target.parentNode.remove()">×</a>
<strong class="title" v-if="msg.title" v-html="msg.title"></strong>
<span class="message" v-html="msg.content"></span>
<a v-if="msg.action.message" href="#"
@click.once.prevent="msg.action.callback($event)">{% msg.action.message %}</a>
</p>
{{!base}}
</div>
<!--/span-->
</div>
<!--/row-->
<hr>
<footer>
<blockquote>
<p>“Few persons can be made to believe that it is not quite an easy thing to invent a method of secret writing
which shall baffle investigation. Yet it may be roundly asserted that human ingenuity cannot concoct a cipher
which human ingenuity cannot resolve...”</p>
<small>Edgar Allan Poe</small>
</blockquote>
%if settings.DISPLAY_COUNTER:
<h4 id="pixels-total">
<p>ø</p>
<strong>{{ pastes_count }}</strong> <br />pastes øbinned
</h4>
%end
<footer class="footer">
<a href="https://www.0bin.net/">Create a paste</a> - <a href="/faq/">Faq</a> - <a href="https://github.com/sametmax/0bin">Github</a>
<br> <br>
<p class="greetings span12"> %if settings.DISPLAY_COUNTER:
Based on an original idea from <strong>{{ pastes_count }}</strong> pastes øbinned
<a href="http://sebsauvage.net/paste/">sebsauvage.net</a><br> %end
<a href="http://sametmax.com">Sam &amp; Max</a>
</p>
</footer> </footer>
</div>
<!--/wrap-content-->
<script src="/static/js/vue.js"></script> <script src="/static/js/vue.js"></script>
%if settings.COMPRESSED_STATIC_FILES: %if settings.COMPRESSED_STATIC_FILES:
@ -168,13 +75,30 @@
</script> </script>
%if settings.COMPRESSED_STATIC_FILES: %if settings.COMPRESSED_STATIC_FILES:
<script src="/static/js/additional.min.js?{{ VERSION }}"></script> <script src="/static/js/additional.min.js?{{ settings.VERSION }}"></script>
%else: %else:
<script src="/static/js/lzw.js"></script> <script src="/static/js/lzw.js"></script>
<script src="/static/js/prettify.min.js"></script> <script src="/static/js/prettify.min.js"></script>
<script src="/static/js/ZeroClipboard.js"></script>
%end %end
</body> <p id="alert-template" class="alert-primary">
<a class="close" data-dismiss="alert" href="#">×</a>
<strong class="title"></strong>
<span class="message"></span>
</p>
<script>
function ToggleMenu() {
var x = document.getElementById("topmenu");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html> </html>

36
zerobin/views/faq.tpl
View File

@ -2,11 +2,9 @@
<h1>FAQ</h1> <h1>FAQ</h1>
<hr width="90%"> <table>
<tr>How does 0bin work?</tr>
<dl> <td>
<dt>How does 0bin work?</dt>
<dd>
<p>A random key is generated and used to encrypt the paste, thanks to <p>A random key is generated and used to encrypt the paste, thanks to
the <a href="http://crypto.stanford.edu/sjcl/">sjcl</a> the <a href="http://crypto.stanford.edu/sjcl/">sjcl</a>
JavaScript library.</p> JavaScript library.</p>
@ -19,10 +17,10 @@
JavaScript will use it to decrypt the content sent by the server.</p> JavaScript will use it to decrypt the content sent by the server.</p>
<p>The browser never sends the hash to the server, so the latter does not <p>The browser never sends the hash to the server, so the latter does not
receives the key at any time.</p> receives the key at any time.</p>
</dd> </td>
<dt>But JavaScript encryption is not secure!</dt> <tr>But JavaScript encryption is not secure!</tr>
<dd> <td>
<p>No, it isn't.</p> <p>No, it isn't.</p>
<p>The goal of 0bin is <strong>not</strong> to protect the user and their data <p>The goal of 0bin is <strong>not</strong> to protect the user and their data
(including, obviously, their secrets).</p> (including, obviously, their secrets).</p>
@ -36,9 +34,9 @@
you decide to host a 0bin server, the encryption feature hopefully be used as a defense. you decide to host a 0bin server, the encryption feature hopefully be used as a defense.
This is not proven, though! :-) This is not proven, though! :-)
</dd> </td>
<dt>What if the server changes the JavaScript code? And what happens in the case of a <a href="https://en.wikipedia.org/wiki/Man-in-the-middle_attack">MITM attack</a>?</dt> <tr>What if the server changes the JavaScript code? And what happens in the case of a <a href="https://en.wikipedia.org/wiki/Man-in-the-middle_attack">MITM attack</a>?</tr>
<dd> <td>
<p>Read above.</p> <p>Read above.</p>
<p>0bin is not built, and does not aim, to protect user data - but rather the host. <p>0bin is not built, and does not aim, to protect user data - but rather the host.
If any user data is compromised, 0bin still provides the host with If any user data is compromised, 0bin still provides the host with
@ -52,19 +50,19 @@
for emails.</p> for emails.</p>
<p>It would be unlikely for those softwares to fail you. Errors will nearly always come from your side - you ought to have a perfect <a href="https://en.wikipedia.org/wiki/Operations_security">operations security</a> <p>It would be unlikely for those softwares to fail you. Errors will nearly always come from your side - you ought to have a perfect <a href="https://en.wikipedia.org/wiki/Operations_security">operations security</a>
if you do not want your data to be leaked. Remember to use your common sense.</p> if you do not want your data to be leaked. Remember to use your common sense.</p>
</dd> </td>
<dt>How did the idea of 0bin emerge?</dt> <tr>How did the idea of 0bin emerge?</tr>
<dd> <td>
<p>0bin is based on <a href="http://sebsauvage.net/wiki/doku.php?id=php:zerobin">sebsauvage's work</a>. <p>0bin is based on <a href="http://sebsauvage.net/wiki/doku.php?id=php:zerobin">sebsauvage's work</a>.
The project sprang as a reaction to <a href="https://www.zdnet.com/blog/security/pastebin-to-hunt-for-hacker-pastes-anonymous-cries-censorship/11336">the implementation of a moderation system on Pastebin</a>, The project sprang as a reaction to <a href="https://www.zdnet.com/blog/security/pastebin-to-hunt-for-hacker-pastes-anonymous-cries-censorship/11336">the implementation of a moderation system on Pastebin</a>,
due to the significant amount of illegal content pasted on it, or that it linked to.</p> due to the significant amount of illegal content pasted on it, or that it linked to.</p>
</dd> </td>
<dt>How can I get 0bin?</dt> <tr>How can I get 0bin?</tr>
<dd> <td>
<p>0bin is an open-source project, and the code is hosted on <a href="https://github.com/sametmax/0bin">GitHub</a>. <p>0bin is an open-source project, and the code is hosted on <a href="https://github.com/sametmax/0bin">GitHub</a>.
You can either download a tarball or clone the repository.</p> You can either download a tarball or clone the repository.</p>
</dd> </td>
</dl> </table>
</div> </div>

54
zerobin/views/home.tpl
View File

@ -1,39 +1,59 @@
<p class="file-upload" v-if="support.fileUpload"> <form class="well" method="post" action="/paste/create" @submit.prevent="encryptAndSendPaste()">
<input type="button" class="btn btn-upload" value="Upload File" :value="isUploading ? 'Uploading...': 'Upload file'" <div class="d-flex justify-content-between">
<div>
<label class="col-form-label">Upload text/img:</label>
<div class="file-upload" v-if="support.fileUpload">
<input type="button" class="btn btn-primary" :value="isUploading ? 'Uploading...': 'Upload file'"
:disabled="isUploading"> :disabled="isUploading">
<input type="file" class="hide-upload" id="file-upload" @change="handleUpload($event.target.files)"> <input type="file" class="hide-upload" id="file-upload" @change="handleUpload($event.target.files)">
</p> </div>
</div>
<form class="well" method="post" action="/paste/create" @submit.prevent="encryptAndSendPaste()"> <div class="form-group select-date paste-option">
<p class="paste-option"> <label class="col-form-label">Expiration:</label>
<label for="expiration">Expiration:</label> <div class="input-group">
<select id="expiration" name="expiration" v-model="newPaste.expiration"> <select id="expiration" name="expiration" class="custom-select" v-model="newPaste.expiration">
<option value="burn_after_reading">Burn after reading</option> <option value="burn_after_reading">Burn after reading</option>
<option selected value="1_day">1 day</option> <option selected value="1_day">1 day</option>
<option value="1_month">1 month</option> <option value="1_month">1 month</option>
<option value="never">Never</option> <option value="never">Never</option>
</select> </select>
<div class="input-group-append">
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</p> </div>
<p> </div>
<div class="progress progress-striped active" v-show="isLoading"> </div>
</div>
<div>
<div class="progress-bar progress-bar-striped progress" v-show="isLoading">
<div class="bar"></div> <div class="bar"></div>
</div> </div>
<textarea rows="10" style="width:100%" class="input-xlarge" id="content" name="content" autofocus <textarea rows="10" style="width:100%;"
v-on:keydown.prevent.ctrl.enter="encryptAndSendPaste()"></textarea> class="form-control"
</p> id="content" name="content" autofocus
@keydown.prevent.ctrl.enter="encryptAndSendPaste()"></textarea>
</div>
<p class="paste-option down" v-if="displayBottomToolBar"> <div class="form-group select-date paste-option down" v-if="displayBottomToolBar">
<label for="expiration">Expiration:</label> <label class="col-form-label">Expiration:</label>
<select id="expiration" name="expiration" v-model="newPaste.expiration"> <div class="input-group">
<select id="expiration" name="expiration" class="custom-select" v-model="newPaste.expiration">
<option value="burn_after_reading">Burn after reading</option> <option value="burn_after_reading">Burn after reading</option>
<option selected value="1_day">1 day</option> <option selected value="1_day">1 day</option>
<option value="1_month">1 month</option> <option value="1_month">1 month</option>
<option value="never">Never</option> <option value="never">Never</option>
</select> </select>
<div class="input-group-append">
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</p> </div>
</div>
</div>
</form> </form>
% rebase("base", settings=settings, pastes_count=pastes_count) % rebase("base", settings=settings, pastes_count=pastes_count)

130
zerobin/views/paste.tpl
View File

@ -21,52 +21,61 @@
<div class="well paste-form"> <div class="well paste-form">
<form action="/" method="get" accept-charset="utf-8"> <form action="/" method="get" accept-charset="utf-8">
<p class="lnk-option">
<a id="clip-button" v-if="support.clipboard" href="#" @click.prevent="copyToClipboard()">Copy To Clipboard</a> |
<a id="email-link" href="#" @click="handleSendByEmail($event)">Email this</a> <div class="d-flex justify-content-between">
<span class="paste-option btn-group top"> <div class="btn-group" role="group" >
<button class="btn btn-clone" @click.prevent="handleClone()"><i class="icon-camera"></i>&nbsp;Clone</button> <button v-if="support.clipboard" @click.prevent="copyToClipboard()" type="button" id="clip-button" class="btn btn-secondary">Copy To Clipboard</button>
<button class="btn" v-if="downloadLink.url"> <button type="button" id="email-link" class="btn btn-secondary" @click="handleSendByEmail($event)>Email this</button>
<a :href="downloadLink.url" :download="downloadLink.name"><i class="icon-download"></i> Download</a> </div>
<div>
<span class="paste-option btn-group">
<button class="btn btn-clone btn-secondary" @click.prevent="handleClone()">Clone</button>
<button class="btn btn-secondar" v-if="downloadLink.url">
<a :href="downloadLink.url" :download="downloadLink.name"> Download</a>
</button> </button>
<button class="btn btn-secondary">New Paste</button>
<button class="btn">New Paste</button>
</span> </span>
</p> </div>
<div class="progress progress-striped active" v-show="isLoading"> </div>
<div class="progress-container">
<div class="progress progress-bar progress-bar-striped active" v-show="isLoading">
<div class="bar"></div> <div class="bar"></div>
</div> </div>
</div>
%expiration = paste.humanized_expiration %expiration = paste.humanized_expiration
%if expiration: %if expiration:
<p id="expiration-tag">Expire {{ expiration }}</p> <span id="expiration-tag">Expire {{ expiration }}</span>
%end %end
<p>
<pre id="paste-content" class="prettyprint"> <pre id="paste-content" class="prettyprint">
<code> <code>
{{ paste.content }} {{ paste.content }}
</code> </code>
</pre> </pre>
</p>
<p v-if="currentPaste.ownerKey"> <div class="d-flex justify-content-between down">
<button type="button" class="btn btn-danger" @click="handleDeletePaste()">Delete this paste</button> <div v-if="currentPaste.ownerKey">
</p> <button class="btn btn-clone btn-secondary" @click="handleDeletePaste()">Delete Paste</button>
</div>
<div>
<span class="paste-option btn-group">
<button class="btn btn-clone btn-secondary" @click.prevent="handleClone()">Clone</button>
<p class="paste-option btn-group bottom"> <button class="btn btn-secondar" v-if="downloadLink.url">
<button class="btn btn-clone" @click.prevent="handleClone()"><i class="icon-camera"></i>&nbsp;Clone</button> <a :href="downloadLink.url" :download="downloadLink.name"> Download</a>
<button class="btn" v-if="downloadLink.url">
<a :href="downloadLink.url" :download="downloadLink.name"><i class="icon-download"></i> Download</a>
</button> </button>
<button class="btn">New Paste</button> <button class="btn btn-secondary">New Paste</button>
</p> </span>
</div>
</div>
</form> </form>
</div> </div>
@ -74,39 +83,72 @@
<!-- For cloning --> <!-- For cloning -->
<div class="submit-form clone"> <div class="submit-form clone">
<form class="well" method="post" action="/paste/create" @submit.prevent="encryptAndSendPaste()"> <form class="well" method="post" action="/paste/create" @submit.prevent="encryptAndSendPaste()">
<p class="paste-option">
<label for="expiration">Expiration:</label> <div class="d-flex justify-content-between">
<select id="expiration" name="expiration" v-model="newPaste.expiration">
<option value="burn_after_reading">Burn after reading</option>
<option selected value="1_day">1 day</option>
<option value="1_month">1 month</option>
<option value="never">Never</option>
</select>
<button type="submit" class="btn btn-primary">Submit</button>
<button class="btn btn-danger" @click.prevent="handleCancelClone()">Cancel clone</button>
</p>
<div> <div>
<div class="progress progress-striped active" v-show="isLoading"> <label class="col-form-label">&nbsp;</label>
<div class="bar"></div> <div class="file-upload">
<button type="button" class="btn btn-danger" @click.prevent="handleCancelClone()">Cancel clone</button>
</div> </div>
<textarea rows="10" style="width:100%;" class="input-xlarge" id="content" name="content" autofocus
v-on:keydown.prevent.ctrl.enter="encryptAndSendPaste()"></textarea>
</div> </div>
<p class="paste-option down" v-if="displayBottomToolBar"> <div class="form-group select-date-clone paste-option">
<label for="expiration">Expiration:</label> <label class="col-form-label" >Expiration:</label>
<select id="expiration" name="expiration" v-model="newPaste.expiration"> <div class="input-group">
<select id="expiration" name="expiration" class="custom-select" v-model="newPaste.expiration">
<option value="burn_after_reading">Burn after reading</option> <option value="burn_after_reading">Burn after reading</option>
<option selected value="1_day">1 day</option> <option selected value="1_day">1 day</option>
<option value="1_month">1 month</option> <option value="1_month">1 month</option>
<option value="never">Never</option> <option value="never">Never</option>
</select> </select>
<div class="input-group-append">
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</p> </div>
</div>
</div>
</div>
<div class="progress-container progress-clone" >
<div class="progress progress-bar progress-bar-striped active" v-show="isLoading">
<div class="bar"></div>
</div>
</div>
<div>
<textarea rows="10" style="width:100%;"
class=" form-control" @keydown.prevent.ctrl.enter="encryptAndSendPaste()"
id="content" name="content"></textarea>
</div>
<div class="d-flex justify-content-between" v-if="displayBottomToolBar">>
<div>
<label class="col-form-label">&nbsp;</label>
<div class="file-upload">
<button type="button" class="btn btn-danger" @click.prevent="handleCancelClone()">Cancel clone</button>
</div>
</div>
<div class="form-group select-date-clone paste-option">
<label class="col-form-label" >Expiration:</label>
<div class="input-group">
<select id="expiration" name="expiration" class="custom-select" v-model="newPaste.expiration">
<option value="burn_after_reading">Burn after reading</option>
<option selected value="1_day">1 day</option>
<option value="1_month">1 month</option>
<option value="never">Never</option>
</select>
<div class="input-group-append">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</form> </form>
</div> </div>
% rebase("base", settings=settings, pastes_count=pastes_count) % rebase("base", settings=settings, pastes_count=pastes_count)