mirror of
https://github.com/lovasoa/whitebophir
synced 2024-09-20 14:21:54 +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"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="274.99377"
|
||||
height="226.93753"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="icon.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
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 xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 256 256">
|
||||
<style>
|
||||
@media (min-width: 64px) {
|
||||
text {fill: #d12 !important;}
|
||||
#w {stroke: none !important;}
|
||||
}
|
||||
</style>
|
||||
<path fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="16"
|
||||
d="M16 16h224v160H16z
|
||||
M118 181h18v51h-18z
|
||||
M80 233h95v7H80z"/>
|
||||
<text
|
||||
x="32" y="128"
|
||||
fill="none"
|
||||
font-family="sans"
|
||||
font-size="70"
|
||||
font-weight="700"
|
||||
letter-spacing="0"
|
||||
word-spacing="0"
|
||||
>WBO</text>
|
||||
<path id="w" fill="none" stroke="#d12" stroke-width="24"
|
||||
d="M80 44 v 96 h 48 v-64v64 h48 v-96"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 604 B |
|
|
@ -3,7 +3,7 @@ body {
|
|||
width:100%;
|
||||
margin:0;
|
||||
animation: colorchange 200s infinite;
|
||||
animation-delay:20s;
|
||||
animation-delay: 3620s;
|
||||
}
|
||||
header {
|
||||
position:fixed;
|
||||
|
|
@ -20,7 +20,7 @@ h1, h2 {
|
|||
h1 {
|
||||
animation: colorchange 30s infinite;
|
||||
animation-direction:alternate;
|
||||
animation-delay:10s;
|
||||
animation-delay:3610s;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -31,14 +31,13 @@ main {
|
|||
position:relative;
|
||||
text-align:justify;
|
||||
animation: move 20s infinite;
|
||||
animation-delay:40s;
|
||||
animation-delay: 3640s;
|
||||
animation-direction:alternate;
|
||||
transition:.5s;
|
||||
transition:.1s;
|
||||
}
|
||||
|
||||
main:hover {
|
||||
transform:scale(1.2);
|
||||
transition:.5s;
|
||||
transform:scale(1.1);
|
||||
}
|
||||
|
||||
header, main {
|
||||
|
|
@ -86,5 +85,9 @@ header:hover h2 {
|
|||
main {
|
||||
width:90%;
|
||||
margin: 100px auto;
|
||||
padding: 15px;
|
||||
}
|
||||
main:hover {
|
||||
transform:none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- This is a quick and dirty draft.-->
|
||||
<head>
|
||||
<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="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>
|
||||
|
||||
<body>
|
||||
|
|
@ -15,8 +20,12 @@
|
|||
</header>
|
||||
|
||||
<main>
|
||||
<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>
|
||||
<p>Welcome to <b>WBO</b>. You can go to <a href="/boards/anonymous">the public board</a>
|
||||
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">
|
||||
<input type="text" id="board" name="board" placeholder="Name of the board..."/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue