Improve the homepage (style and translations)

pull/1/head
yflory 8 years ago
parent d54262c8df
commit 6026351091

@ -81,20 +81,20 @@
<div class="row">
<div class="col">
<ul class="list-unstyled">
<li>CryptPad<li>
<li><a href="/about" data-localization="about"></a></li>
<li><a href="/terms" data-localization="terms"></a></li>
<li><a href="/privacy" data-localization="privacy"></a></li>
<li>CryptPad</li>
<li><a href="/about.html" data-localization="about"></a></li>
<li><a href="/terms.html" data-localization="terms"></a></li>
<li><a href="/privacy.html" data-localization="privacy"></a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li data-localization="footer_applications"><li>
<li><a href="/pad/" data-localization="main_richText"></a></li>
<li><a href="#" data-localization="main_code"></a></li>
<li><a href="#" data-localization="main_slide"></a></li>
<li><a href="#" data-localization="main_poll"></a></li>
<li><a href="#" data-localization="main_drive"></a></li>
<li><a href="/code/" data-localization="main_code"></a></li>
<li><a href="/slide/" data-localization="main_slide"></a></li>
<li><a href="/poll/" data-localization="main_poll"></a></li>
<li><a href="/drive/" data-localization="main_drive"></a></li>
</ul>
</div>
<div class="col">
@ -111,7 +111,7 @@
<li><a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" target="_blank" rel="noopener noreferrer">IRC</a></li>
<li><a href="https://twitter.com/cryptpad" target="_blank" rel="noopener noreferrer">Twitter</a></li>
<li><a href="https://github.com/xwiki-labs/cryptpad" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="/contact">Email</a></li>
<li><a href="/contact.html">Email</a></li>
</ul>
</div>
</div>

@ -78,20 +78,20 @@
<div class="row">
<div class="col">
<ul class="list-unstyled">
<li>CryptPad<li>
<li><a href="/about" data-localization="about"></a></li>
<li><a href="/terms" data-localization="terms"></a></li>
<li><a href="/privacy" data-localization="privacy"></a></li>
<li>CryptPad</li>
<li><a href="/about.html" data-localization="about"></a></li>
<li><a href="/terms.html" data-localization="terms"></a></li>
<li><a href="/privacy.html" data-localization="privacy"></a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li data-localization="footer_applications"><li>
<li><a href="/pad/" data-localization="main_richText"></a></li>
<li><a href="#" data-localization="main_code"></a></li>
<li><a href="#" data-localization="main_slide"></a></li>
<li><a href="#" data-localization="main_poll"></a></li>
<li><a href="#" data-localization="main_drive"></a></li>
<li><a href="/code/" data-localization="main_code"></a></li>
<li><a href="/slide/" data-localization="main_slide"></a></li>
<li><a href="/poll/" data-localization="main_poll"></a></li>
<li><a href="/drive/" data-localization="main_drive"></a></li>
</ul>
</div>
<div class="col">
@ -108,7 +108,7 @@
<li><a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" target="_blank" rel="noopener noreferrer">IRC</a></li>
<li><a href="https://twitter.com/cryptpad" target="_blank" rel="noopener noreferrer">Twitter</a></li>
<li><a href="https://github.com/xwiki-labs/cryptpad" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="/contact">Email</a></li>
<li><a href="/contact.html">Email</a></li>
</ul>
</div>
</div>

@ -69,25 +69,20 @@
<div id="main">
<div class="mainOverlay"></div>
<div id="align-container">
<div id="main-container">
<div id="data" class="hidden">
<p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
<div id="buttons" class="buttons"><button class="btn btn-secondary nologin" data-localization="login_nologin"></button></div>
</div>
<div id="userForm" class="form-group hidden">
<!--<center>
<h1 data-localization="form_title"></h1>
</center>-->
<!--<label for="name" data-localization="form_username"></label>-->
<input type="text" id="name" name="name" class="form-control" data-localization-placeholder="login_username" autofocus><br>
<!--<label for="password" data-localization="form_password"></label>-->
<input type="password" id="password" name="password" class="form-control" data-localization-placeholder="login_password"><br>
<input type="text" id="name" name="name" class="form-control" data-localization-placeholder="login_username" autofocus>
<input type="password" id="password" name="password" class="form-control" data-localization-placeholder="login_password">
<div style="display: none;"><span class="remember form-check"><label for="rememberme" class="form-check-label" data-localization-append="login_remember"><input type="checkbox" id="rememberme" class="form-check-input" checked="checked"></label></span><br></div>
<button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
<button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-success register half" data-localization="login_register"></button>
<p class="separator" data-localization="login_orNoLogin"></p>
<p id="buttons" class="buttons"></p>
<p class="driveLink"><a class="nologin" href="/drive/" data-localization="login_nologin"></a></p>
</div>
<div id="loggedIn" class="hidden">
<p id="loggedInHello"></p>
@ -96,6 +91,7 @@
</div>
</div>
</div>
</div>
<div class="page category first" id="knowmore">
<center>
<h1 data-localization="main_howitworks"></h1>
@ -204,20 +200,20 @@
<div class="row">
<div class="col">
<ul class="list-unstyled">
<li>CryptPad<li>
<li><a href="/about" data-localization="about"></a></li>
<li><a href="/terms" data-localization="terms"></a></li>
<li><a href="/privacy" data-localization="privacy"></a></li>
<li>CryptPad</li>
<li><a href="/about.html" data-localization="about"></a></li>
<li><a href="/terms.html" data-localization="terms"></a></li>
<li><a href="/privacy.html" data-localization="privacy"></a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li data-localization="footer_applications"><li>
<li><a href="/pad/" data-localization="main_richText"></a></li>
<li><a href="#" data-localization="main_code"></a></li>
<li><a href="#" data-localization="main_slide"></a></li>
<li><a href="#" data-localization="main_poll"></a></li>
<li><a href="#" data-localization="main_drive"></a></li>
<li><a href="/code/" data-localization="main_code"></a></li>
<li><a href="/slide/" data-localization="main_slide"></a></li>
<li><a href="/poll/" data-localization="main_poll"></a></li>
<li><a href="/drive/" data-localization="main_drive"></a></li>
</ul>
</div>
<div class="col">
@ -234,7 +230,7 @@
<li><a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" target="_blank" rel="noopener noreferrer">IRC</a></li>
<li><a href="https://twitter.com/cryptpad" target="_blank" rel="noopener noreferrer">Twitter</a></li>
<li><a href="https://github.com/xwiki-labs/cryptpad" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="/contact">Email</a></li>
<li><a href="/contact.html">Email</a></li>
</ul>
</div>
</div>

@ -450,28 +450,33 @@
#cryptpadTopBar .right a {
font-weight: 500;
font-size: 0.75em;
color: #558;
color: #41b7d8;
}
#cryptpadTopBar .right a:hover {
color: #279ebf !important;
text-decoration: underline;
}
#cryptpadTopBar .right a:visited {
color: #41b7d8;
}
.cp footer {
background: #cccccc;
background: #f4f4f4;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
padding-top: 1em;
font-size: 1.2em;
}
.cp footer a {
color: #555;
color: #41b7d8;
}
.cp footer a:visited {
color: #777;
color: #41b7d8;
}
.cp footer a:hover {
color: #333;
color: #279ebf !important;
}
.cp footer li:first-child {
font-size: 1.2em;
font-weight: bold;
text-decoration: underline;
}
html.cp,
.cp body {
@ -560,10 +565,10 @@ html.cp,
text-decoration: none;
}
.cp a:hover {
color: #279ebf;
color: #279ebf !important;
}
.cp a:visited {
color: #558;
color: #41b7d8;
}
.cp img {
height: auto;
@ -630,7 +635,7 @@ html.cp,
@media screen and (max-width: 800px) {
}
.cp .page.category {
background: #f7f7f7;
background: #f4f4f4;
}
.cp .page .app {
display: inline-block;
@ -687,7 +692,6 @@ html.cp,
}
.cp .page p {
font-size: 18px;
text-align: justify;
}
.cp .btn-default:hover {
background-color: #d8d8d8;
@ -757,8 +761,8 @@ html.cp,
z-index: 1;
font-size: medium;
}
.cp #main #main-container,
.cp #main_other #main-container {
.cp #main #align-container,
.cp #main_other #align-container {
position: absolute;
top: 50%;
left: 50%;
@ -769,24 +773,29 @@ html.cp,
width: 1000px;
max-width: 90%;
}
.cp #main #main-container,
.cp #main_other #main-container {
position: absolute;
display: inline-block;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}
.cp #main #data,
.cp #main_other #data {
width: 600px;
max-width: 60%;
color: #fff;
padding: 15px;
padding: 0 15px;
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.cp #main #data p,
.cp #main_other #data p {
margin: 0;
padding: 0;
font-size: 20px;
font-size: 28px;
line-height: 1.5em;
}
.cp #main #data h1,
@ -797,6 +806,7 @@ html.cp,
font-size: 48px;
line-height: 1.2em;
color: #fff;
padding: 0;
}
.cp #main #data h5,
.cp #main_other #data h5 {
@ -810,15 +820,11 @@ html.cp,
}
.cp #main #loggedIn,
.cp #main_other #loggedIn {
float: right;
color: #fff;
display: inline-block;
position: absolute;
top: 50%;
right: 0;
margin-left: 50px;
width: 350px;
max-width: 35%;
transform: translateY(-50%);
text-align: center;
font-weight: bold;
}
@ -836,11 +842,7 @@ html.cp,
}
.cp #main #userForm,
.cp #main_other #userForm {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-left: 50px;
float: right;
display: inline-block;
width: 350px;
max-width: 35%;
@ -848,47 +850,15 @@ html.cp,
box-sizing: border-box;
font-family: lato, Helvetica, sans-serif;
color: #fff;
/*.remember {
vertical-align: middle;
line-height: 28px;
height: 28px;
display: inline-block;
margin: 10px 0 20px 0;
}
[type="checkbox"] {
vertical-align: text-top;
margin: 0;
//margin-top: 10px;
margin-right: 5px;
}
*/
}
.cp #main #userForm h1,
.cp #main_other #userForm h1 {
color: #fff;
padding: 0;
}
.cp #main #userForm [type="text"],
.cp #main_other #userForm [type="text"],
.cp #main #userForm [type="password"],
.cp #main_other #userForm [type="password"] {
width: 100%;
}
.cp #main #userForm label,
.cp #main_other #userForm label {
margin-bottom: 0;
}
.cp #main #userForm [type="checkbox"],
.cp #main_other #userForm [type="checkbox"] {
margin-right: 5px;
}
.cp #main #userForm button,
.cp #main_other #userForm button {
font-weight: bold;
width: 100%;
margin: 2px 0px;
cursor: pointer;
}
.cp #main #userForm button.half,
@ -899,17 +869,79 @@ html.cp,
.cp #main_other #userForm button.half:not(.first) {
float: right;
}
.cp #main #userForm p,
.cp #main_other #userForm p {
margin: 0;
padding: 0;
}
.cp #main #userForm p.buttons,
.cp #main_other #userForm p.buttons {
margin-bottom: 10px;
}
.cp #main #userForm p.buttons .dropdown-bar,
.cp #main_other #userForm p.buttons .dropdown-bar {
display: block;
}
.cp #main #userForm p.buttons .dropdown-bar button,
.cp #main_other #userForm p.buttons .dropdown-bar button {
white-space: normal;
text-align: left;
}
.cp #main #userForm p.buttons .dropdown-bar button .fa,
.cp #main_other #userForm p.buttons .dropdown-bar button .fa {
float: right;
}
.cp #main #userForm p.separator,
.cp #main_other #userForm p.separator {
margin: 5px 0 15px 0;
text-align: center;
font-weight: bold;
font-size: 1.1em;
}
.cp #main #userForm p a,
.cp #main_other #userForm p a {
color: #fff;
font-weight: bold;
}
.cp #main #userForm p a:hover,
.cp #main_other #userForm p a:hover,
.cp #main #userForm p a :visited,
.cp #main_other #userForm p a :visited {
color: #fff !important;
}
.cp #main #userForm .driveLink,
.cp #main_other #userForm .driveLink {
padding-left: 1rem;
font-size: 1em;
}
.cp #main #userForm > *,
.cp #main_other #userForm > * {
margin-bottom: 10px;
}
@media screen and (max-width: 800px) {
.cp #main #main-container,
.cp #main_other #main-container {
.cp #main,
.cp #main_other {
position: relative;
height: auto;
}
.cp #main #align-container,
.cp #main_other #align-container {
transform: initial;
position: relative;
display: block;
width: 90%;
left: 0;
}
.cp #main #main-container,
.cp #main_other #main-container {
position: relative;
transform: unset;
top: 0;
}
.cp #main #data,
.cp #main_other #data {
text-align: center;
}
@media screen and (max-width: 800px) {
.cp #main #userForm,
.cp #main_other #userForm,
.cp #main #loggedIn,
@ -923,42 +955,13 @@ html.cp,
max-width: 100%;
margin: 10px 0;
box-sizing: border-box;
}
}
@media screen and (max-width: 800px) {
.cp #main #userForm,
.cp #main_other #userForm,
.cp #main #loggedIn,
.cp #main_other #loggedIn {
border: 1px solid #888;
}
}
@media screen and (max-width: 800px) {
.cp #main,
.cp #main_other {
position: relative;
height: auto;
top: -10px;
float: none;
}
}
.cp #main .buttons,
.cp #main_other .buttons {
margin-top: 15px;
}
.cp p.buttons,
.cp div.buttons {
text-align: center;
}
.cp p.buttons button,
.cp div.buttons button {
font-weight: bold;
cursor: pointer;
margin-top: 10px;
}
.cp p.buttons .dropdown-bar,
.cp div.buttons .dropdown-bar {
margin-left: 4px;
}
.cp #fileManagerIframe {
width: 100%;
height: 500px;

@ -7,12 +7,14 @@ define([
'/bower_components/jquery/dist/jquery.min.js',
], function (Messages, Config, Cryptpad, LilUri, LS) {
var $ = window.$;
var $main = $('#mainBlock');
var APP = window.APP = {
Cryptpad: Cryptpad,
};
$(function () {
var $main = $('#mainBlock');
// Language selector
var $sel = $('#language-selector');
Cryptpad.createLanguageSelector(undefined, $sel);
@ -23,6 +25,7 @@ define([
$('.cryptpad-dropdown').hide();
});
// main block is hidden in case javascript is disabled
$main.removeClass('hidden');
@ -57,6 +60,7 @@ define([
var displayCreateButtons = function () {
var $parent = $('#buttons');
var options = [];
var $container = $('<div>', {'class': 'dropdown-bar'}).appendTo($parent);
Config.availablePadTypes.forEach(function (el) {
if (el === 'drive') { return; }
options.push({
@ -70,11 +74,12 @@ define([
});
});
var dropdownConfig = {
text: Messages.makeAPad, // Button initial text
text: Messages.login_makeAPad, // Button initial text
options: options, // Entries displayed in the menu
container: $container
};
var $block = Cryptpad.createDropdown(dropdownConfig);
$block.find('button').addClass('btn').addClass('btn-success');
$block.find('button').addClass('btn').addClass('btn-primary');
$block.appendTo($parent);
};
var addButtonHandlers = function () {
@ -98,9 +103,6 @@ define([
sessionStorage.register = 1;
document.location.href = '/user/';
});
$('button.nologin').click(function (e) {
document.location.href = '/drive/';
});
var $passwd = $('#password');
$passwd.on('keyup', function (e) {
@ -114,4 +116,5 @@ define([
addButtonHandlers();
console.log("ready");
});
});

@ -100,20 +100,20 @@
<div class="row">
<div class="col">
<ul class="list-unstyled">
<li>CryptPad<li>
<li><a href="/about" data-localization="about"></a></li>
<li><a href="/terms" data-localization="terms"></a></li>
<li><a href="/privacy" data-localization="privacy"></a></li>
<li>CryptPad</li>
<li><a href="/about.html" data-localization="about"></a></li>
<li><a href="/terms.html" data-localization="terms"></a></li>
<li><a href="/privacy.html" data-localization="privacy"></a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li data-localization="footer_applications"><li>
<li><a href="/pad/" data-localization="main_richText"></a></li>
<li><a href="#" data-localization="main_code"></a></li>
<li><a href="#" data-localization="main_slide"></a></li>
<li><a href="#" data-localization="main_poll"></a></li>
<li><a href="#" data-localization="main_drive"></a></li>
<li><a href="/code/" data-localization="main_code"></a></li>
<li><a href="/slide/" data-localization="main_slide"></a></li>
<li><a href="/poll/" data-localization="main_poll"></a></li>
<li><a href="/drive/" data-localization="main_drive"></a></li>
</ul>
</div>
<div class="col">
@ -130,7 +130,7 @@
<li><a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" target="_blank" rel="noopener noreferrer">IRC</a></li>
<li><a href="https://twitter.com/cryptpad" target="_blank" rel="noopener noreferrer">Twitter</a></li>
<li><a href="https://github.com/xwiki-labs/cryptpad" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="/contact">Email</a></li>
<li><a href="/contact.html">Email</a></li>
</ul>
</div>
</div>

@ -3,20 +3,20 @@
<div class="row">
<div class="col">
<ul class="list-unstyled">
<li>CryptPad<li>
<li><a href="/about" data-localization="about"></a></li>
<li><a href="/terms" data-localization="terms"></a></li>
<li><a href="/privacy" data-localization="privacy"></a></li>
<li>CryptPad</li>
<li><a href="/about.html" data-localization="about"></a></li>
<li><a href="/terms.html" data-localization="terms"></a></li>
<li><a href="/privacy.html" data-localization="privacy"></a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li data-localization="footer_applications"><li>
<li><a href="/pad/" data-localization="main_richText"></a></li>
<li><a href="#" data-localization="main_code"></a></li>
<li><a href="#" data-localization="main_slide"></a></li>
<li><a href="#" data-localization="main_poll"></a></li>
<li><a href="#" data-localization="main_drive"></a></li>
<li><a href="/code/" data-localization="main_code"></a></li>
<li><a href="/slide/" data-localization="main_slide"></a></li>
<li><a href="/poll/" data-localization="main_poll"></a></li>
<li><a href="/drive/" data-localization="main_drive"></a></li>
</ul>
</div>
<div class="col">
@ -33,7 +33,7 @@
<li><a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" target="_blank" rel="noopener noreferrer">IRC</a></li>
<li><a href="https://twitter.com/cryptpad" target="_blank" rel="noopener noreferrer">Twitter</a></li>
<li><a href="https://github.com/xwiki-labs/cryptpad" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="/contact">Email</a></li>
<li><a href="/contact.html">Email</a></li>
</ul>
</div>
</div>

@ -2,25 +2,20 @@
<div id="main">
<div class="mainOverlay"></div>
<div id="align-container">
<div id="main-container">
<div id="data" class="hidden">
<p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
<div id="buttons" class="buttons"><button class="btn btn-secondary nologin" data-localization="login_nologin"></button></div>
</div>
<div id="userForm" class="form-group hidden">
<!--<center>
<h1 data-localization="form_title"></h1>
</center>-->
<!--<label for="name" data-localization="form_username"></label>-->
<input type="text" id="name" name="name" class="form-control" data-localization-placeholder="login_username" autofocus><br>
<!--<label for="password" data-localization="form_password"></label>-->
<input type="password" id="password" name="password" class="form-control" data-localization-placeholder="login_password"><br>
<input type="text" id="name" name="name" class="form-control" data-localization-placeholder="login_username" autofocus>
<input type="password" id="password" name="password" class="form-control" data-localization-placeholder="login_password">
<div style="display: none;"><span class="remember form-check"><label for="rememberme" class="form-check-label" data-localization-append="login_remember"><input type="checkbox" id="rememberme" class="form-check-input" checked="checked"></label></span><br></div>
<button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
<button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-success register half" data-localization="login_register"></button>
<p class="separator" data-localization="login_orNoLogin"></p>
<p id="buttons" class="buttons"></p>
<p class="driveLink"><a class="nologin" href="/drive/" data-localization="login_nologin"></a></p>
</div>
<div id="loggedIn" class="hidden">
<p id="loggedInHello"></p>
@ -29,6 +24,7 @@
</div>
</div>
</div>
</div>
<div class="page category first" id="knowmore">
<center>
<h1 data-localization="main_howitworks"></h1>

@ -96,16 +96,15 @@ h6 {
a {
cursor: pointer;
color: @cp-light-blue;
//#41b7d8; //@cp-darkblue;
color: @cp-link;
text-decoration: none;
&:hover {
color: darken(@cp-light-blue, 10%); //@cp-accent2;
color: @cp-link-hover;
}
&:visited {
color: @cp-purple;
color: @cp-link-visited;
}
}
@ -179,7 +178,7 @@ body.html {
//background: darken(@base, 1%);
}
&.category {
background: darken(@base, 3%);
background: @category-bg;
}
.app {
@ -233,7 +232,7 @@ body.html {
p {
font-size: 18px;
text-align: justify;
//text-align: justify;
}
}
@ -313,7 +312,7 @@ body.html {
font-size: medium;
#main-container {
#align-container {
position: absolute;
top: 50%;
left: 50%;
@ -325,11 +324,20 @@ body.html {
max-width: 90%;
}
#main-container {
position: absolute;
display: inline-block;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}
#data {
p {
margin: 0;
padding: 0;
font-size: 20px;
font-size: 28px;
line-height: 1.5em;
}
h1, h2 {
@ -337,6 +345,7 @@ body.html {
font-size: 48px;
line-height: 1.2em;
color: @main-color;
padding: 0;
}
h5 {
@ -346,13 +355,9 @@ body.html {
width: 600px;
max-width: 60%;
color: @main-color;
padding: 15px;
padding: 0 15px;
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 50%;
left: 0;
transform: translateY(-50%);
#tryit {
margin-top: 20px;
@ -361,15 +366,11 @@ body.html {
}
#loggedIn {
float: right;
color: @main-color;
display: inline-block;
position: absolute;
top: 50%;
right: 0;
margin-left: 50px;
width: 350px;
max-width: 35%;
transform: translateY(-50%);
text-align: center;
font-weight: bold;
button {
@ -386,11 +387,7 @@ body.html {
}
#userForm {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-left: 50px;
float: right;
display: inline-block;
width: 350px;
max-width: 35%;
@ -399,42 +396,13 @@ body.html {
font-family: lato, Helvetica, sans-serif;
color: @main-color;
h1 {
color: @main-color;
padding: 0;
}
[type="text"], [type="password"] {
width: 100%;
}
label {
margin-bottom: 0;
}
/*.remember {
vertical-align: middle;
line-height: 28px;
height: 28px;
display: inline-block;
margin: 10px 0 20px 0;
}
[type="checkbox"] {
vertical-align: text-top;
margin: 0;
//margin-top: 10px;
margin-right: 5px;
}
*/
[type="checkbox"] {
margin-right: 5px;
}
button {
font-weight: bold;
width: 100%;
margin: 2px 0px;
cursor: pointer;
&.half {
width: ~"calc(50% - 2px)";
@ -443,18 +411,65 @@ body.html {
}
}
}
p {
margin: 0;
padding: 0;
&.buttons {
margin-bottom: 10px;
.dropdown-bar {
button {
white-space: normal;
text-align: left;
.fa {
float: right;
}
}
display: block;
}
}
&.separator {
margin: 5px 0 15px 0;
text-align: center;
font-weight: bold;
font-size: 1.1em;
}
a {
color: @main-color;
font-weight:bold;
&:hover, :visited {
color: @main-color !important;
}
}
}
.driveLink {
padding-left: 1rem; //Bootstrap padding in buttons
font-size: 1em;
}
&> * {
margin-bottom: 10px;
}
}
#main-container {
@media screen and (max-width: @media-not-big) {
#align-container {
transform: initial;
position: relative;
display: block;
width: 90%;
left: 0;
}
#main-container {
position: relative;
transform: unset;
top:0;
}
#data {
text-align: center;
}
#userForm, #loggedIn, #data {
@media screen and (max-width: @media-not-big) {
transform: initial;
position: relative;
display: block;
@ -462,34 +477,19 @@ body.html {
max-width: 100%;
margin: 10px 0;
box-sizing: border-box;
}
float: none;
}
#userForm, #loggedIn {
@media screen and (max-width: @media-not-big) {
border: 1px solid #888;
}
//border: 1px solid #888;
}
@media screen and (max-width: @media-not-big) {
position: relative;
height: auto;
top: -10px;
}
.buttons {
margin-top: 15px;
}
}
p.buttons, div.buttons {
text-align: center;
button {
font-weight: bold;
cursor: pointer;
margin-top: 10px;
}
.dropdown-bar {
margin-left: 4px;
}
}
#fileManagerIframe {
width: 100%;

@ -1,20 +1,21 @@
@import "./variables.less";
.cp footer {
background: @dark-base;
background: @category-bg;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
padding-top: 1em;
font-size: 1.2em;
a {
color: #555;
color: @cp-link;
&:visited {
color: #777;
color: @cp-link-visited;
}
&:hover {
color: #333;
color: @cp-link-hover;
}
}
li:first-child {
font-size: 1.2em;
font-weight: bold;
text-decoration: underline;
}
}

@ -50,11 +50,15 @@
a {
font-weight: 500;
font-size: 0.75em;
color: @cp-purple;
color: @cp-link;
&:hover {
color: @cp-link-hover;
text-decoration: underline;
}
&:visited {
color: @cp-link-visited;
}
}
}
}

@ -24,6 +24,11 @@
@page-white: #fafafa;
// links
@cp-link: @cp-light-blue;
@cp-link-visited: @cp-light-blue;
@cp-link-hover: darken(@cp-light-blue, 10%) !important;
// alertify things
@box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
@ -88,3 +93,4 @@
@main-color: #fff;
@main-bg: url('/customize/bg3.jpg') no-repeat center center;
@category-bg: #f4f4f4;

@ -82,20 +82,20 @@
<div class="row">
<div class="col">
<ul class="list-unstyled">
<li>CryptPad<li>
<li><a href="/about" data-localization="about"></a></li>
<li><a href="/terms" data-localization="terms"></a></li>
<li><a href="/privacy" data-localization="privacy"></a></li>
<li>CryptPad</li>
<li><a href="/about.html" data-localization="about"></a></li>
<li><a href="/terms.html" data-localization="terms"></a></li>
<li><a href="/privacy.html" data-localization="privacy"></a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li data-localization="footer_applications"><li>
<li><a href="/pad/" data-localization="main_richText"></a></li>
<li><a href="#" data-localization="main_code"></a></li>
<li><a href="#" data-localization="main_slide"></a></li>
<li><a href="#" data-localization="main_poll"></a></li>
<li><a href="#" data-localization="main_drive"></a></li>
<li><a href="/code/" data-localization="main_code"></a></li>
<li><a href="/slide/" data-localization="main_slide"></a></li>
<li><a href="/poll/" data-localization="main_poll"></a></li>
<li><a href="/drive/" data-localization="main_drive"></a></li>
</ul>
</div>
<div class="col">
@ -112,7 +112,7 @@
<li><a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" target="_blank" rel="noopener noreferrer">IRC</a></li>
<li><a href="https://twitter.com/cryptpad" target="_blank" rel="noopener noreferrer">Twitter</a></li>
<li><a href="https://github.com/xwiki-labs/cryptpad" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="/contact">Email</a></li>
<li><a href="/contact.html">Email</a></li>
</ul>
</div>
</div>

@ -242,7 +242,8 @@ define(function () {
// login
out.login_login = "Connexion";
out.login_nologin = "Documents récents de ce navigateur";
out.login_makeAPad = 'Créer un document anonymement';
out.login_nologin = "Voir les documents récents";
out.login_register = "Inscription";
out.logoutButton = "Déconnexion";
@ -251,9 +252,9 @@ define(function () {
out.username_label = "Nom d'utilisateur : ";
out.displayname_label = "Nom affiché : ";
out.login_username = "votre nom d'utilisateur";
out.login_password = "votre mot de passe";
out.login_confirm = "confirmer votre mot de passe";
out.login_username = "Nom d'utilisateur";
out.login_password = "Mot de passe";
out.login_confirm = "Confirmer votre mot de passe";
out.login_remember = "Se souvenir de moi";
out.login_cancel_prompt = "...ou si vous avez entré le mauvais nom d'utilisateur ou mot de passe, annulez pour essayer à nouveau.";
@ -279,11 +280,12 @@ define(function () {
out.login_hello = 'Bonjour {0},'; // {0} is the username
out.login_helloNoName = 'Bonjour,';
out.login_accessDrive = 'Accédez à votre drive';
out.login_orNoLogin = 'ou';
// index.html
//out.main_p1 = 'CryptPad est l\'éditeur collaboratif en temps réel <strong>zero knowledge</strong>. Le chiffrement est effectué depuis votre navigateur, ce qui protège les données contre le serveur, le cloud, et la NSA. La clé de chiffrement est stockée dans l\'<a href="https://fr.wikipedia.org/wiki/Identificateur_de_fragment">identifieur de fragment</a> de l\'URL qui n\'est jamais envoyée au serveur mais est accessible depuis javascript, de sorte qu\'en partageant l\'URL, vous donnez l\'accès au pad à ceux qui souhaitent participer.';
out.main_p1 = "<h2>Collaborez en tout confiance</h2><br>Développez vos idées collaborativement grâce à des documents partagés en temps-réel, tout en gardant vos données personnelles invisibles, même pour nous, avec la technologie <strong>Zero Knowledge</strong>.";
out.main_p1 = "<h2>Collaborez avec confiance</h2><br>Développez vos idées en groupe avec des documents partagés; la technologie <strong>Zero Knowledge</strong> sécurise vos données.";
out.main_p2 = 'Ce projet utilise l\'éditeur visuel (WYSIWYG) <a href="http://ckeditor.com/">CKEditor</a>, l\'éditeur de code source <a href="https://codemirror.net/">CodeMirror</a>, et le moteur temps-réel <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a>.';
out.main_howitworks_p1 = 'CryptPad utilise une variante de l\'algorithme d\'<a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> qui est capable de trouver un consensus distribué en utilisant <a href="https://bitcoin.org/bitcoin.pdf">une chaîne de bloc Nakamoto</a>, un outil popularisé par le <a href="https://fr.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. De cette manière, l\'algorithme évite la nécessité d\'utiliser un serveur central pour résoudre les conflits d\'édition de l\'Operational Transformation, et sans ce besoin de résolution des conflits le serveur peut rester ignorant du contenu qui est édité dans le pad.';
out.main_about = 'À propos';
@ -293,9 +295,9 @@ define(function () {
out.main_howitworks = 'Comment ça fonctionne';
out.main_zeroKnowledge = 'Zero Knowledge';
out.main_zeroKnowledge_p = "Vous n'avez pas besoin de croire que nous n'<em>allons</em> pas regarder vos documents. Avec la technologie Zero Knowledge de Cryptpad, nous ne <em>pouvons</em> pas le faire. Apprenez-en plus sur notre manière de protéger vos données.";
out.main_jotItDown = 'Prenez-en note';
out.main_jotItDown_p = "Les plus grands projets naissent des plus petites idées. Prenez note de vos moments d'inspiration et de vos idées inattendues car vous ne savez pas lesquels seront des découvertes capitales.";
out.main_zeroKnowledge_p = "Vous n'avez pas besoin de croire que nous n'<em>allons</em> pas regarder vos documents. Avec la technologie Zero Knowledge de Cryptpad, nous ne <em>pouvons</em> pas le faire. Apprenez-en plus sur notre manière de <a href=\"privacy.html\" title='Protection des données'>protéger vos données</a>.";
out.main_writeItDown = 'Prenez-en note';
out.main_writeItDown_p = "Les plus grands projets naissent des plus petites idées. Prenez note de vos moments d'inspiration et de vos idées inattendues car vous ne savez pas lesquels seront des découvertes capitales.";
out.main_share = 'Partager le lien, partager le document';
out.main_share_p = "Faites croître vos idées à plusieurs : réalisez des réunions efficaes, collaborez sur vos listes de tâches et réalisez des présentations rapide avec tous vos amis sur tous vos appareils.";
out.main_organize = 'Soyez organisés';
@ -320,7 +322,6 @@ define(function () {
out.table_created = 'Créé le';
out.table_last = 'Dernier accès';
out.makeAPad = 'Créer un document';
out.button_newpad = 'Nouveau document texte';
out.button_newcode = 'Nouvelle page de code';
out.button_newpoll = 'Nouveau sondage';

@ -243,7 +243,8 @@ define(function () {
// login
out.login_login = "Log in";
out.login_nologin = "Your browser's recent pads";
out.login_makeAPad = 'Create a pad anonymously';
out.login_nologin = "Browse local pads";
out.login_register = "Sign up";
out.logoutButton = "Log out";
@ -252,9 +253,9 @@ define(function () {
out.username_label = "Username: ";
out.displayname_label = "Display name: ";
out.login_username = "your username";
out.login_password = "your password";
out.login_confirm = "confirm your password";
out.login_username = "Username";
out.login_password = "Password";
out.login_confirm = "Confirm your password";
out.login_remember = "Remember me";
out.login_cancel_prompt = "...or if you may have entered the wrong username or password, cancel to try again.";
@ -280,6 +281,7 @@ define(function () {
out.login_hello = 'Hello {0},'; // {0} is the username
out.login_helloNoName = 'Hello,';
out.login_accessDrive = 'Access your drive';
out.login_orNoLogin = 'or';
// index.html
@ -296,7 +298,7 @@ define(function () {
out.main_howitworks = 'How It Works';
out.main_zeroKnowledge = 'Zero Knowledge';
out.main_zeroKnowledge_p = "You don't have to trust that we <em>won't</em> look at your pads, with CryptPad's revolutionary Zero Knowledge Technology we <em>can't</em>. Learn more about how we protect your Privacy and Security.";
out.main_zeroKnowledge_p = "You don't have to trust that we <em>won't</em> look at your pads, with CryptPad's revolutionary Zero Knowledge Technology we <em>can't</em>. Learn more about how we protect your <a href=\"/privacy.html\" title='Privacy'>Privacy and Security</a>.";
out.main_writeItDown = 'Write it down';
out.main_writeItDown_p = "The greatest projects come from the smallest ideas. Take down the moments of inspiration and unexpected ideas because you never know which one might be a breakthrough.";
out.main_share = 'Share the link, share the pad';
@ -323,7 +325,6 @@ define(function () {
out.table_created = 'Created';
out.table_last = 'Last Accessed';
out.makeAPad = 'Make a pad right now';
out.button_newpad = 'New Rich Text pad';
out.button_newcode = 'New Code pad';
out.button_newpoll = 'New Poll';

Loading…
Cancel
Save