From 276c16e1055c23350abd3d9d071cfce9b4f1b27f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 4 Jan 2019 23:37:34 +0100 Subject: rm rotation on homepage, add dataset list --- site/assets/css/applets.css | 24 ++++++++++++- site/assets/css/css.css | 68 ++++++++++++++++++++++++++++++------- site/assets/js/app/face.js | 6 ++-- site/public/datasets/index.html | 25 ++++++++++++++ site/public/datasets/lfw/index.html | 6 ++-- site/public/index.html | 25 +++++++++++++- site/templates/datasets.html | 24 +++++++++++++ site/templates/home.html | 17 ++++++++++ 8 files changed, 174 insertions(+), 21 deletions(-) create mode 100644 site/templates/datasets.html (limited to 'site') diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css index 315d72e0..9c37354a 100644 --- a/site/assets/css/applets.css +++ b/site/assets/css/applets.css @@ -65,12 +65,17 @@ } .cta { padding-left: 20px; - font-size: 11pt; + font-size: 10pt; } .cta ol { margin: 0; padding: 0 0 20px 20px; } + +.searchContainer { + padding-top: 20px; +} + .uploadContainer > div { position: relative; width: 300px; @@ -98,3 +103,20 @@ .uploadContainer img { max-width: 40px; } + + +/* tabulator */ + +.tabulator-row { + transition: background-color 100ms cubic-bezier(0,0,1,1); + background-color: rgba(255,255,255,0.0); +} +.desktop .tabulator-row:hover { + background-color: rgba(255,255,255,0.2); +} +.tabulator-row.tabulator-row-odd { + background-color: rgba(255,255,255,0.05); +} +.tabulator-row.tabulator-row-even { + background-color: rgba(255,255,255,0.1); +} \ No newline at end of file diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 003ac4a3..7e354a4c 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -1,4 +1,4 @@ -* { box-sizing: border-box; } +* { box-sizing: border-box; outline: 0; } html, body { margin: 0; padding: 0; @@ -27,7 +27,7 @@ header { left: 0; width: 100%; height: 70px; - z-index: 1; + z-index: 2; background: #1e1e1e; display: flex; flex-direction: row; @@ -44,11 +44,11 @@ header .slogan { } header .logo { background-image: url(../img/megapixels_logo_white.svg); - background-size: cover; + background-size: contain; background-repeat: no-repeat; margin-top: 7px; - margin-right: 14px; - width: 49px; + margin-right: 10px; + width: 39px; height: 30px; } header .site_name { @@ -175,13 +175,16 @@ th, .gray { line-height: 1.5; } section { - width: 640px; + width: 960px; margin: 0 auto; } .content .first_paragraph { font-weight: 300; - font-size: 18pt; - color: #ccc; + font-size: 16pt; + color: #ddd; + margin-bottom: 50px; + margin-top: 30px; + line-height: 36px; } p { margin: 0 0 20px 0; @@ -212,6 +215,16 @@ p { padding-bottom: 4px; } +/* lists */ + +ul { + list-style-type: none; + margin: 0 0 30px 0; + padding: 0; +} +ul li { + margin-bottom: 8px; +} /* misc formatting */ code { @@ -368,18 +381,19 @@ section.wide .image { } .intro .headline { font-family: 'Roboto Mono', monospace; - font-size: 16pt; + font-size: 28pt; + line-height: 40pt; } .intro .buttons { margin: 40px 0; } .intro button { font-family: 'Roboto', sans-serif; - padding: 8px 12px; - border-radius: 6px; + padding: 15px 20px; + border-radius: 8px; border: 1px solid transparent; cursor: pointer; - font-size: 11pt; + font-size: 12pt; margin-right: 10px; transition: color 0.1s cubic-bezier(0,0,1,1), background-color 0.1s cubic-bezier(0,0,1,1); } @@ -406,4 +420,32 @@ section.wide .image { } .desktop .intro .under a:hover { color: #fff; -} \ No newline at end of file +} + +/* intro - list of datasets */ + +.dataset-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.dataset-list a { + text-decoration: none; + transition: background-color 0.1s cubic-bezier(0,0,1,1); + background: black; + margin: 0 20px 20px 0; +} +.dataset-list .dataset { + width: 220px; + height: 140px; + padding: 10px; + color: white; +} +.dataset-list a:nth-child(3n+1) { background-color: rgba(255, 0, 0, 0.1); } +.desktop .dataset-list a:nth-child(3n+1):hover { background-color: rgba(255, 0, 0, 0.2); } + +.dataset-list a:nth-child(3n+2) { background-color: rgba(255, 128, 0, 0.1); } +.desktop .dataset-list a:nth-child(3n+2):hover { background-color: rgba(255, 128, 0, 0.2); } + +.dataset-list .dataset:nth-child(3n+3) { background-color: rgba(255, 255, 0, 0.1); } +.desktop .dataset-list .dataset:nth-child(3n+3):hover { background-color: rgba(255, 255, 0, 0.2); } \ No newline at end of file diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js index bdaa0313..f3f1f2bf 100644 --- a/site/assets/js/app/face.js +++ b/site/assets/js/app/face.js @@ -216,12 +216,12 @@ var face = (function(){ requestAnimationFrame(animate) if (swapping) update_swap(t) renderer.render(scene, camera) - scene.rotation.y += 0.01 * Math.PI + // scene.rotation.y += 0.01 * Math.PI mouseTarget.x += (mouse.x - mouseTarget.x) * 0.1 mouseTarget.y += (mouse.y - mouseTarget.y) * 0.1 scene.rotation.x = (mouseTarget.y - 0.5) * Math.PI / 2 - // scene.rotation.y = (mouseTarget.x - 0.5) * Math.PI - scene.rotation.y += 0.01 + scene.rotation.y = (mouseTarget.x - 0.5) * Math.PI + // scene.rotation.y += 0.01 last_t = t } })() diff --git a/site/public/datasets/index.html b/site/public/datasets/index.html index bcc7c1ab..4d6f57b6 100644 --- a/site/public/datasets/index.html +++ b/site/public/datasets/index.html @@ -28,11 +28,36 @@
+

Facial Recognition Datasets

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Summary

Found
275 datasets
Created between
1993-2018
Smallest dataset
20 images
Largest dataset
10,000,000 images
Highest resolution faces
450x500 (Unconstrained College Students)
Lowest resolution faces
16x20 pixels (QMUL SurvFace)
+
+

Dataset Portraits

+

+ We have prepared detailed studies of some of the more noteworthy datasets. +

+ +
+ + +
+ Labeled Faces in The Wild +
+ + + +
+ VGG Face2 +
+ + +
+
+ +