mirror of
https://github.com/lovasoa/whitebophir
synced 2024-11-10 06:24:17 +00:00
Rework the front page
This commit is contained in:
lovasoa
parent
ba30176ee0
commit
657344915d
5 changed files with 408 additions and 198 deletions
42
client-data/frontpage-illustration.svg
Normal file
42
client-data/frontpage-illustration.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 190 KiB |
|
|
@ -1,201 +1,285 @@
|
|||
html {
|
||||
background: linear-gradient(135deg, #c4dfffa0, transparent), url(background.png);
|
||||
width:100%;
|
||||
min-height: 100%;
|
||||
margin:0;
|
||||
font-family: sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
position:fixed;
|
||||
left:0;
|
||||
top:0;
|
||||
text-shadow: 1px 1px 2px #eee;
|
||||
width:100%;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 5vh;
|
||||
animation: appear 0.5s;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
h1,
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
line-height: 2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: auto;
|
||||
margin-top: 80px;
|
||||
width:100%;
|
||||
max-width: 1250px;
|
||||
font-size: 1.1em;
|
||||
position:relative;
|
||||
text-align:justify;
|
||||
transition:.1s;
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 95vh;
|
||||
max-width: 1250px;
|
||||
font-size: 1.1em;
|
||||
position: relative;
|
||||
text-align: justify;
|
||||
transition: 0.1s;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
animation: appear 0.5s ease 0.2s;
|
||||
}
|
||||
|
||||
#description,
|
||||
#recent-boards {
|
||||
flex: 100%;
|
||||
main > div {
|
||||
max-width: 550px;
|
||||
min-width: 300px;
|
||||
transition: 0.07s;
|
||||
flex: 1;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
main>div {
|
||||
margin:15px;
|
||||
min-width: 250px;
|
||||
padding:35px;
|
||||
transition:.07s;
|
||||
flex:33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border-radius: .2em;
|
||||
#description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main>div:hover {
|
||||
transform:scale(1.03);
|
||||
#description > img {
|
||||
max-width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
header, main>div {
|
||||
box-shadow: 2px 2px 10px #666;
|
||||
background-color:#fff;
|
||||
#description .text {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
header:hover h2 {
|
||||
animation:colorchange 100s infinite;
|
||||
animation: colorchange 100s infinite;
|
||||
}
|
||||
|
||||
.wbo-button {
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
background: linear-gradient(#C4DFFF, #8FA2BC);
|
||||
margin-top: 15px;
|
||||
line-height: 60px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 3px #555;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: black;
|
||||
transition: .1s;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
background: linear-gradient(#ccdfdf, #abc6c6);
|
||||
margin-top: 15px;
|
||||
line-height: 60px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 2.5px #555;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: black;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
a{
|
||||
color: black;
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.wbo-button:hover{
|
||||
box-shadow: 0 0 5px #0074D9;
|
||||
.wbo-button:hover {
|
||||
box-shadow: 0 0 5px #0074d9;
|
||||
}
|
||||
|
||||
.wbo-button:focus, .wbo-button:active {
|
||||
box-shadow: inset 1px 1px 5px #555;
|
||||
.wbo-button:focus,
|
||||
.wbo-button:active {
|
||||
box-shadow: inset 1px 1px 5px #555;
|
||||
}
|
||||
#named-board-form {
|
||||
display: flex;
|
||||
background: linear-gradient(#ccdfdf, #abc6c6);
|
||||
padding: 0 9px;
|
||||
border-radius: 28px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#named-board-form input {
|
||||
line-height: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ffffff8f;
|
||||
padding: 6px;
|
||||
font-size: 1.1em;
|
||||
margin: 9px 0;
|
||||
background: #ffffff09;
|
||||
}
|
||||
|
||||
input {
|
||||
line-height: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ddd;
|
||||
padding: 6px;
|
||||
font-size: 1.1em;
|
||||
margin: 9px 0;
|
||||
#named-board-form input[type="text"] {
|
||||
width: 75%;
|
||||
border-radius: 15px 0 0 15px;
|
||||
background: #ffffffcf;
|
||||
}
|
||||
#named-board-form input[type="text"]:focus {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#board {
|
||||
width: 75%;
|
||||
#named-board-form input[type="submit"] {
|
||||
flex: 1;
|
||||
border-radius: 0 15px 15px 0;
|
||||
background: #fff6;
|
||||
}
|
||||
#named-board-form input[type="submit"]:hover {
|
||||
background: #fff3;
|
||||
}
|
||||
|
||||
#named-board-form input[type="submit"]:focus,
|
||||
#named-board-form input[type="submit"]:active {
|
||||
box-shadow: inset 0 0 3px white;
|
||||
}
|
||||
|
||||
#recent-boards {
|
||||
box-shadow: 0px 0px 2px black;
|
||||
border-radius: 15px;
|
||||
background: linear-gradient(#ccdfdf, #abc6c6);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#recent-boards h3 {
|
||||
line-height: 2;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#recent-boards.hidden {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#recent-boards ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
background: white;
|
||||
padding: 7px;
|
||||
border-radius: 15px;
|
||||
box-shadow: inset 0 0 1px black;
|
||||
max-height: 110px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#recent-boards li {
|
||||
margin-bottom: 8px;
|
||||
flex: auto;
|
||||
text-align: center;
|
||||
margin: 3px;
|
||||
display: inline-block;
|
||||
background: #abc6c6;
|
||||
border-radius: 6px;
|
||||
padding: 2px 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 1.5em;
|
||||
line-height: 1.5em;
|
||||
background: linear-gradient(#ccdfdf, #abc6c6);
|
||||
box-shadow: 0px 0px 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#recent-boards li:last-child {
|
||||
margin-bottom: 0;
|
||||
#recent-boards li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#recent-boards li a:hover,
|
||||
#recent-boards li a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
opacity: .3;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lang-selector {
|
||||
top: 20px;
|
||||
right:20px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lang-selector span {
|
||||
padding: 9px 25px;
|
||||
border: 1px solid black;
|
||||
border-radius: 5px;
|
||||
padding-top: 9px;
|
||||
background-image: url(./label.svg);
|
||||
height: 65px;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.lang-selector:hover ul,
|
||||
.lang-selector:active ul,
|
||||
.lang-selector:focus ul {
|
||||
width: 300px;
|
||||
box-shadow: -150px 0 150px 150px black;
|
||||
background: black;
|
||||
transition: width 0.5s, box-shadow 0.3s ease 0.2s, background-color 0.5s;
|
||||
}
|
||||
|
||||
.lang-selector ul {
|
||||
padding-left: 22px;
|
||||
list-style: none;
|
||||
width: 70px;
|
||||
background: white;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition-duration: 1s;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.lang-selector:hover ul {
|
||||
max-height: 600px;
|
||||
box-shadow: 2px 2px 10px #666;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.lang-selector li {
|
||||
height: 25px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.lang-selector:hover li {
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
padding-top: 2em;
|
||||
border: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
background: transparent;
|
||||
box-shadow: 0 0 50px 0 transparent;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
list-style: none;
|
||||
transition: box-shadow 0.3s, width 0.5s, background-color 0.5s ease 0.3s;
|
||||
}
|
||||
|
||||
.lang-selector li a {
|
||||
width: 100%;
|
||||
display: block;
|
||||
display: block;
|
||||
line-height: 3;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
padding-right: 3em;
|
||||
color: white;
|
||||
opacity: 0.6;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.lang-selector li:hover {
|
||||
list-style: circle;
|
||||
list-style: disclosure-closed;
|
||||
}
|
||||
.lang-selector li:hover a {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lang-selector li:hover a::before {
|
||||
content: "🌐 ";
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,80 +1,114 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{language}}">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>WBO — {{translations.collaborative_whiteboard}}</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
<meta name="description" content="{{translations.tagline}}" />
|
||||
<meta
|
||||
name="keywords"
|
||||
content="whiteboard,collaborative,online,draw,paint,shared,realtime,wbo,whitebophir,open-source,GPL,javascript"
|
||||
/>
|
||||
<link rel="icon" type="image/x-icon" sizes="16x16" href="favicon.ico" />
|
||||
<link rel="apple-touch-icon" href="favicon.svg" />
|
||||
<link rel="mask-icon" href="favicon.svg" color="black" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta property="og:url" content="https://wbo.ophir.dev" />
|
||||
<meta property="og:image" content="{{baseUrl}}/favicon.svg" />
|
||||
<link rel="canonical" href="?lang={{language}}" />
|
||||
{{#languages}}
|
||||
<link rel="alternate" hreflang="{{.}}" href="?lang={{.}}" />
|
||||
{{/languages}}
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
<meta name="theme-color" content="#C4DFFF" />
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>WBO — {{translations.collaborative_whiteboard}}</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
<meta name="description" content="{{translations.tagline}}" />
|
||||
<meta name="keywords"
|
||||
content="whiteboard,collaborative,online,draw,paint,shared,realtime,wbo,whitebophir,open-source,GPL,javascript" />
|
||||
<link rel="icon" type="image/x-icon" sizes="16x16" href="favicon.ico">
|
||||
<link rel="apple-touch-icon" href="favicon.svg">
|
||||
<link rel="mask-icon" href="favicon.svg" color="black">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta property="og:url" content="https://wbo.ophir.dev">
|
||||
<meta property="og:image" content="{{baseUrl}}/favicon.svg">
|
||||
<link rel="canonical" href="?lang={{language}}" />
|
||||
{{#languages}}
|
||||
<link rel="alternate" hreflang="{{.}}" href="?lang={{.}}" />{{/languages}}
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<meta name="theme-color" content="#C4DFFF" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>WBO</h1>
|
||||
<nav class="lang-selector">
|
||||
<span>{{language}}</span>
|
||||
<ul>
|
||||
{{#languages}}
|
||||
<li>
|
||||
<a href="?lang={{.}}" hreflang="{{.}}" rel="alternate">{{.}}</a>
|
||||
</li>
|
||||
{{/languages}}
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div id="description">
|
||||
<img
|
||||
src="frontpage-illustration.svg"
|
||||
alt="Public board illustration"
|
||||
with="700"
|
||||
height="560"
|
||||
/>
|
||||
<div class="text">
|
||||
<h3>{{translations.index_title}}</h3>
|
||||
<p>{{{translations.introduction_paragraph}}}</p>
|
||||
<p>{{{translations.share_instructions}}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<h1>WBO</h1>
|
||||
<nav class="lang-selector">
|
||||
<span>{{language}}</span>
|
||||
<ul>
|
||||
{{#languages}}
|
||||
<li><a href="?lang={{.}}" hreflang="{{.}}" rel="alternate">{{.}}</a></li>
|
||||
{{/languages}}
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div id="actions">
|
||||
<div>
|
||||
<p>{{{translations.public_board_description}}}</p>
|
||||
<a href="boards/anonymous" class="wbo-button"
|
||||
>{{{translations.open_public_board}}}</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div id="description">
|
||||
<h3>{{translations.index_title}}</h3>
|
||||
<p>{{{translations.introduction_paragraph}}}</p>
|
||||
<p>{{{translations.share_instructions}}}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{{translations.private_board_description}}}</p>
|
||||
<a href="random" class="wbo-button"
|
||||
>{{{translations.create_private_board}}}</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>{{{translations.public_board_description}}}</p>
|
||||
<a href="boards/anonymous" class="wbo-button">{{{translations.open_public_board}}}</a>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<label for="board"
|
||||
>{{{translations.named_private_board_description}}}</label
|
||||
>
|
||||
</p>
|
||||
<form id="named-board-form" action="boards" method="GET">
|
||||
<input
|
||||
type="text"
|
||||
id="board"
|
||||
name="board"
|
||||
required
|
||||
placeholder="{{{translations.board_name_placeholder}}}"
|
||||
/>
|
||||
<input type="submit" value="Go" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>{{{translations.private_board_description}}}</p>
|
||||
<a href="random" class="wbo-button">{{{translations.create_private_board}}}</a>
|
||||
</div>
|
||||
<div id="recent-boards" class="hidden">
|
||||
<h3>{{{translations.recent_boards}}}</h3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p><label for="board">{{{translations.named_private_board_description}}}</label></p>
|
||||
<form action="boards" method="GET">
|
||||
<input type="text" id="board" name="board" required placeholder="{{{translations.board_name_placeholder}}}" />
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
</div>
|
||||
<footer>
|
||||
<a
|
||||
href="https://www.instagram.com/wbo_whiteboard/"
|
||||
class="smallink"
|
||||
rel="external"
|
||||
title="Instagram"
|
||||
><img alt="instagram" src="instagram.svg" width="30" height="30"
|
||||
/></a>
|
||||
<a
|
||||
href="https://github.com/lovasoa/whitebophir"
|
||||
class="smallink"
|
||||
rel="external"
|
||||
title="{{translations.view_source}}"
|
||||
><img alt="github" src="github.svg" width="30" height="30" />
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<div id="recent-boards" class="hidden">
|
||||
<h3>{{{translations.recent_boards}}}</h3>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<a href="https://www.instagram.com/wbo_whiteboard/" class="smallink" rel="external" title="Instagram"><img
|
||||
alt="instagram" src="instagram.svg" width="30" height="30" /></a>
|
||||
<a href="https://github.com/lovasoa/whitebophir" class="smallink" rel="external"
|
||||
title="{{translations.view_source}}"><img alt="github" src="github.svg" width="30" height="30" />
|
||||
</a>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<script src="../js/index.js" async defer></script>
|
||||
|
||||
</html>
|
||||
<script src="../js/index.js" async defer></script>
|
||||
</html>
|
||||
|
|
|
|||
49
client-data/label.svg
Normal file
49
client-data/label.svg
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="70"
|
||||
height="65"
|
||||
viewBox="0 0 18.520833 17.197916"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.2.1 (ef4d3fba62, 2022-07-19, custom)"
|
||||
sodipodi:docname="label.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="7.3326469"
|
||||
inkscape:cx="26.866151"
|
||||
inkscape:cy="19.024508"
|
||||
inkscape:window-width="1846"
|
||||
inkscape:window-height="1016"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-69.715462,-76.655098)">
|
||||
<path
|
||||
id="rect2203"
|
||||
style="opacity:0.8;fill:#c0d8d7;stroke-width:0.264583"
|
||||
d="m 71.562668,76.823109 h 14.705301 c 0.913251,0 1.648468,0.735217 1.648468,1.648468 v 14.207728 c 0,1.474571 -1.168251,1.253526 -4.345323,-0.182741 L 71.562668,87.067877 C 70.7305,86.691677 69.9142,86.33266 69.9142,85.419409 v -6.947832 c 0,-0.913251 0.735216,-1.648468 1.648468,-1.648468 z"
|
||||
sodipodi:nodetypes="sssssssss" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
1
package-lock.json
generated
1
package-lock.json
generated
|
|
@ -5,6 +5,7 @@
|
|||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "whitebophir",
|
||||
"version": "1.17.1",
|
||||
"license": "AGPL-3.0-or-later",
|
||||
"dependencies": {
|
||||
|
|
|
|||
Loading…
Reference in a new issue