mirror of
https://github.com/lovasoa/whitebophir
synced 2024-11-10 14:34:20 +00:00
UX improvements
This commit is contained in:
Ophir LOJKINE
parent
30f32351c3
commit
3d721ae1bd
3 changed files with 44 additions and 106 deletions
|
|
@ -1,97 +1,23 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 256 256">
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
<style>
|
||||||
|
@media (min-width: 64px) {
|
||||||
<svg
|
text {fill: #d12 !important;}
|
||||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
#w {stroke: none !important;}
|
||||||
xmlns:cc="http://creativecommons.org/ns#"
|
}
|
||||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
</style>
|
||||||
xmlns:svg="http://www.w3.org/2000/svg"
|
<path fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="16"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
d="M16 16h224v160H16z
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
M118 181h18v51h-18z
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
M80 233h95v7H80z"/>
|
||||||
width="274.99377"
|
<text
|
||||||
height="226.93753"
|
x="32" y="128"
|
||||||
id="svg2"
|
fill="none"
|
||||||
version="1.1"
|
font-family="sans"
|
||||||
inkscape:version="0.48.4 r9939"
|
font-size="70"
|
||||||
sodipodi:docname="icon.svg">
|
font-weight="700"
|
||||||
<defs
|
letter-spacing="0"
|
||||||
id="defs4" />
|
word-spacing="0"
|
||||||
<sodipodi:namedview
|
>WBO</text>
|
||||||
id="base"
|
<path id="w" fill="none" stroke="#d12" stroke-width="24"
|
||||||
pagecolor="#ffffff"
|
d="M80 44 v 96 h 48 v-64v64 h48 v-96"/>
|
||||||
bordercolor="#666666"
|
|
||||||
borderopacity="1.0"
|
|
||||||
inkscape:pageopacity="0.0"
|
|
||||||
inkscape:pageshadow="2"
|
|
||||||
inkscape:zoom="1.979899"
|
|
||||||
inkscape:cx="137.69467"
|
|
||||||
inkscape:cy="98.49419"
|
|
||||||
inkscape:document-units="px"
|
|
||||||
inkscape:current-layer="layer1"
|
|
||||||
showgrid="false"
|
|
||||||
inkscape:window-width="1535"
|
|
||||||
inkscape:window-height="876"
|
|
||||||
inkscape:window-x="65"
|
|
||||||
inkscape:window-y="24"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
fit-margin-top="0.2"
|
|
||||||
fit-margin-right="0.2"
|
|
||||||
fit-margin-left="0.2"
|
|
||||||
fit-margin-bottom="0.3" />
|
|
||||||
<metadata
|
|
||||||
id="metadata7">
|
|
||||||
<rdf:RDF>
|
|
||||||
<cc:Work
|
|
||||||
rdf:about="">
|
|
||||||
<dc:format>image/svg+xml</dc:format>
|
|
||||||
<dc:type
|
|
||||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
|
||||||
<dc:title></dc:title>
|
|
||||||
</cc:Work>
|
|
||||||
</rdf:RDF>
|
|
||||||
</metadata>
|
|
||||||
<g
|
|
||||||
inkscape:label="Calque 1"
|
|
||||||
inkscape:groupmode="layer"
|
|
||||||
id="layer1"
|
|
||||||
transform="translate(-251.42499,-495.64374)">
|
|
||||||
<g
|
|
||||||
id="g3770">
|
|
||||||
<rect
|
|
||||||
y="503.30591"
|
|
||||||
x="259.06577"
|
|
||||||
height="164.73164"
|
|
||||||
width="259.686"
|
|
||||||
id="rect2985"
|
|
||||||
style="fill:#000000;fill-opacity:0;fill-rule:evenodd;stroke:#000000;stroke-width:14.91155434;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
|
||||||
<rect
|
|
||||||
y="660.42297"
|
|
||||||
x="379.81738"
|
|
||||||
height="51.012703"
|
|
||||||
width="18.182747"
|
|
||||||
id="rect3766"
|
|
||||||
style="fill:#000000;fill-opacity:1;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" />
|
|
||||||
<rect
|
|
||||||
y="712.81696"
|
|
||||||
x="341.55014"
|
|
||||||
height="6.8339834"
|
|
||||||
width="94.717255"
|
|
||||||
id="rect3768"
|
|
||||||
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:5.29139948;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
|
||||||
</g>
|
|
||||||
<text
|
|
||||||
xml:space="preserve"
|
|
||||||
style="font-size:154.44700623px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;font-family:Sans"
|
|
||||||
x="265.4231"
|
|
||||||
y="634.68677"
|
|
||||||
id="text3775"
|
|
||||||
sodipodi:linespacing="125%"
|
|
||||||
transform="scale(1.0070531,0.9929963)"><tspan
|
|
||||||
sodipodi:role="line"
|
|
||||||
id="tspan3777"
|
|
||||||
x="265.4231"
|
|
||||||
y="634.68677"
|
|
||||||
style="font-size:154.44700623px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ff0000;font-family:Ubuntu-Title;-inkscape-font-specification:Ubuntu-Title">WBO</tspan></text>
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 604 B |
|
|
@ -3,7 +3,7 @@ body {
|
||||||
width:100%;
|
width:100%;
|
||||||
margin:0;
|
margin:0;
|
||||||
animation: colorchange 200s infinite;
|
animation: colorchange 200s infinite;
|
||||||
animation-delay:20s;
|
animation-delay: 3620s;
|
||||||
}
|
}
|
||||||
header {
|
header {
|
||||||
position:fixed;
|
position:fixed;
|
||||||
|
|
@ -20,7 +20,7 @@ h1, h2 {
|
||||||
h1 {
|
h1 {
|
||||||
animation: colorchange 30s infinite;
|
animation: colorchange 30s infinite;
|
||||||
animation-direction:alternate;
|
animation-direction:alternate;
|
||||||
animation-delay:10s;
|
animation-delay:3610s;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
|
|
@ -31,14 +31,13 @@ main {
|
||||||
position:relative;
|
position:relative;
|
||||||
text-align:justify;
|
text-align:justify;
|
||||||
animation: move 20s infinite;
|
animation: move 20s infinite;
|
||||||
animation-delay:40s;
|
animation-delay: 3640s;
|
||||||
animation-direction:alternate;
|
animation-direction:alternate;
|
||||||
transition:.5s;
|
transition:.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
main:hover {
|
main:hover {
|
||||||
transform:scale(1.2);
|
transform:scale(1.1);
|
||||||
transition:.5s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header, main {
|
header, main {
|
||||||
|
|
@ -86,5 +85,9 @@ header:hover h2 {
|
||||||
main {
|
main {
|
||||||
width:90%;
|
width:90%;
|
||||||
margin: 100px auto;
|
margin: 100px auto;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
main:hover {
|
||||||
|
transform:none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,11 +1,16 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<!-- This is a quick and dirty draft.-->
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>WBO - Welcome</title>
|
<title>WBO — Online collaborative whiteboard</title>
|
||||||
<link rel="icon" type="image/png" href="favicon.ico" />
|
<link rel="icon" type="image/png" href="favicon.ico" />
|
||||||
<link rel="stylesheet" href="index.css" />
|
<link rel="stylesheet" href="index.css" />
|
||||||
|
<meta name="description" content="A free online whiteboard for realtime collaboration. Draw, write text and sketch new ideas together on whitebophir"/>
|
||||||
|
<meta name="keywords" content="whiteboard,collaborative,online,draw,paint,shared,realtime,wbo,whitebophir"/>
|
||||||
|
<link rel="icon" type="image/x-icon" sizes="16x16 32x32 64x64" href="favicon.ico">
|
||||||
|
<link rel="icon" type="image/svg+xml" sizes="256x256" href="favicon.svg">
|
||||||
|
<link rel="apple-touch-icon" href="favicon.svg">
|
||||||
|
<link rel="mask-icon" href="favicon.svg" color="black">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -15,8 +20,12 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<p>Welcome to <b>WBO</b>. You can go to <a href="/boards/anonymous">the public board</a>
|
<p>Welcome to <b>WBO</b>. You can go to <a href="/boards/anonymous">the public board</a>
|
||||||
or create a new one with the form below. To share a board, just send it's URL to your friends.</p>
|
or create a new one using the form below.
|
||||||
|
</p><p>
|
||||||
|
To collaborate on a drawing in real time with someone,
|
||||||
|
just send them its URL.
|
||||||
|
</p>
|
||||||
|
|
||||||
<form action="boards" method="GET">
|
<form action="boards" method="GET">
|
||||||
<input type="text" id="board" name="board" placeholder="Name of the board..."/>
|
<input type="text" id="board" name="board" placeholder="Name of the board..."/>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue