logo, improved listing, some helpers, mail confirms table, confirmed flag, user title column..

app/Console/Commands/ConfirmUser.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Models\User;
+use Illuminate\Console\Command;
+
+class ConfirmUser extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'user:confirm {user}';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Confirm user\'s e-mail (for testing)';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return mixed
+     */
+    public function handle()
+    {
+        $u = User::resolve($this->argument('user'));
+        $u->update('confirmed', true);
+        $this->info("User #$u->id with e-mail $u->email and handle @$u->name was confirmed.");
+    }
+}

app/Http/Controllers/Auth/LoginController.php

@@ -25,7 +25,7 @@ class LoginController extends Controller
      *
      * @var string
      */
-    protected $redirectTo = '/home';
+    protected $redirectTo = '/';
 
     /**
      * Create a new controller instance.

app/Http/Controllers/Auth/RegisterController.php

@@ -7,6 +7,7 @@ use App\Http\Controllers\Controller;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Facades\Validator;
 use Illuminate\Foundation\Auth\RegistersUsers;
+use Illuminate\Validation\Rule;
 
 class RegisterController extends Controller
 {
@@ -28,7 +29,7 @@ class RegisterController extends Controller
      *
      * @var string
      */
-    protected $redirectTo = '/home';
+    protected $redirectTo = '/';
 
     /**
      * Create a new controller instance.
@@ -49,9 +50,15 @@ class RegisterController extends Controller
     protected function validator(array $data)
     {
         return Validator::make($data, [
-            'name' => 'required|string|max:255|regex:/^[a-zA-Z0-9_.-]+$/',
+            'name' => [
+                'regex:/^[a-zA-Z0-9_.-]+$/',
+                'required',
+                'string',
+                'max:255',
+                'unique:users'
+            ],
             'email' => 'required|string|email|max:255|unique:users',
-            'password' => 'required|string|min:6|confirmed',
+            'password' => 'required|string|min:6|max:1000|confirmed', // max len to foil DOS attempts
         ]);
     }
 
@@ -65,7 +72,7 @@ class RegisterController extends Controller
     {
         return User::create([
             'name' => $data['name'],
-            'title' => $data['name'], // display name - by default, init to name
+            'title' => $data['name'],
             'email' => $data['email'],
             'password' => Hash::make($data['password']),
         ]);

app/Http/Controllers/HomeController.php

@@ -1,20 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use Illuminate\Http\Request;
-
-class HomeController extends Controller
-{
-    /**
-     * Show the application dashboard.
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function index()
-    {
-        $tables = \Auth::user()->tables()->paginate(10);
-
-        return view('home')->with(compact('tables'));
-    }
-}

app/Http/Controllers/TableController.php

@@ -8,6 +8,7 @@ use App\Models\Table;
 use App\Models\User;
 use App\Utils\Column;
 use Illuminate\Http\Request;
+use Illuminate\Validation\Rule;
 use MightyPork\Exceptions\NotApplicableException;
 
 class TableController extends Controller
@@ -16,7 +17,7 @@ class TableController extends Controller
     {
         /** @var Table $tableModel */
         $tableModel = $user->tables()->where('name', $table)->first();
-        $revision = $tableModel->activeRevision;
+        $revision = $tableModel->revision;
 
         return view('table.view', [
             'table' => $tableModel,
@@ -54,12 +55,12 @@ class TableController extends Controller
         $u = \Auth::user();
 
         $this->validate($request, [
-            'name' => 'required',
+            'name' => 'required|string|max:255',
-            'title' => 'string',
+            'title' => 'string|string|max:255',
-            'description' => 'string|nullable',
+            'description' => 'string|nullable|max:4000',
-            'license' => 'string|nullable',
+            'license' => 'string|nullable|max:4000',
-            'origin' => 'string|nullable',
+            'origin' => 'string|nullable|max:4000',
-            'columns' => 'required',
+            'columns' => 'required|string',
             'data' => 'string|nullable',
         ]);
 
@@ -74,16 +75,24 @@ class TableController extends Controller
         // Parse and validate the columns specification
         /** @var Column[] $columns */
         $columns = [];
+        $column_keys = []; // for checking duplicates
         $colTable = array_map('str_getcsv', explode("\n", $request->get('columns')));
+
+        // prevent griefing via long list of columns
+        if (count($colTable) > 100) return $this->backWithErrors(['columns' => "Too many columns"]);
+
         foreach ($colTable as $col) {
             $col = array_map('trim', $col);
-            if (count($col) < 2) {
+            if (count($col) < 2 || strlen($col[0])==0) {
-                return $this->backWithErrors([
+                return $this->backWithErrors(['columns' => "All columns must have at least name and type."]);
-                    'columns' => "All columns must have at least name and type.",
-                ]);
             }
 
             try {
+                if (in_array($col[0], $column_keys)) {
+                    return $this->backWithErrors(['columns' => "Duplicate column: $col[0]"]);
+                }
+                $column_keys[] = $col[0];
+
                 $columns[] = new Column([
                     'name' => $col[0],
                     'type' => $col[1],
@@ -93,6 +102,7 @@ class TableController extends Controller
                 return $this->backWithErrors(['columns' => $e->getMessage()]);
             }
         }
+        if (count($columns) == 0) return $this->backWithErrors(['columns' => "Define at least one column"]);
 
         $rowTable = array_map('str_getcsv', explode("\n", $request->get('data')));
 
@@ -110,38 +120,42 @@ class TableController extends Controller
                 }
                 return [
                     'data' => json_encode($parsed),
-                    'refs' => 1,
                 ];
             }, $rowTable);
         } catch (\Exception $e) {
             return $this->backWithErrors(['columns' => $e->getMessage()]);
         }
 
-        $revision = Revision::create([
+        $revisionFields = [
-            'refs' => 1, // from the new table
             'note' => "Initial revision of table $u->name/$tabName",
             'columns' => json_encode($columns),
-        ]);
+            'row_count' => count($rowsData),
+        ];
 
-        $table = Table::create([
+        $tableFields = [
             'owner_id' => $u->id,
-            'revision_id' => $revision->id,
+            'revision_id' => 0,
             'name' => $tabName,
             'title' => $request->get('title'),
             'description' => $request->get('description'),
             'license' => $request->get('license'),
             'origin' => $request->get('origin'),
-        ]);
+        ];
+
+        \DB::transaction(function () use ($revisionFields, $tableFields, $rowsData) {
+            $revision = Revision::create($revisionFields);
+
+            $tableFields['revision_id'] = $revision->id; // to meet the not-null constraint
+            $table = Table::create($tableFields);
 
             // Attach the revision to the table, set as current
             $table->revisions()->attach($revision);
-        $table->activeRevision()->associate($revision);
+            $table->revision()->associate($revision);
 
-        // Spawn the rows, linked to the revision
+            // Spawn rows, linked to the revision
             $revision->rows()->createMany($rowsData);
+        });
 
-        // Now we create rows, a revision pointing to them, and the table using it.
+        return redirect(route('table.view', ['user' => $u, 'table' => $tabName]));
-
-        return "Ok.";
     }
 }

app/Http/Controllers/UserController.php

@@ -0,0 +1,24 @@
+<?php
+
+
+namespace App\Http\Controllers;
+
+
+use App\Models\User;
+
+class UserController extends Controller
+{
+    /**
+     * Show the application dashboard.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function view(User $user)
+    {
+        $tables = $user->tables()
+            ->with('revision:id,row_count')
+            ->paginate(3);
+
+        return view('user.view')->with(compact('tables', 'user'));
+    }
+}

app/Models/ContentReport.php

@@ -14,8 +14,8 @@ use Illuminate\Database\Eloquent\Model;
  * @property int $object_id
  * @property int $author_id
  * @property string $message
- * @property User $author
  * @property mixed $object - morph
+ * @property-read User $author
  */
 class ContentReport extends Model
 {

app/Models/EmailConfirmation.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+/**
+ * E-mail confirmation
+ *
+ * @property int $id
+ * @property \Carbon\Carbon $created_at
+ * @property int $user_id
+ * @property string $token
+ * @property-read User $user
+ */
+class EmailConfirmation extends Model
+{
+    protected $guarded = [];
+    const UPDATED_AT = null; // disable update timestamp
+
+    /** Authoring user */
+    public function user()
+    {
+        return $this->belongsTo(User::class, 'user_id');
+    }
+}

app/Models/Proposal.php

@@ -15,10 +15,10 @@ use Illuminate\Database\Eloquent\Model;
  * @property int $revision_id
  * @property int $author_id
  * @property string $note
- * @property User $author
- * @property Table $table
- * @property Revision $revision
  * @property object $changes - JSONB
+ * @property-read User $author
+ * @property-read Table $table
+ * @property-read Revision $revision
  */
 class Proposal extends Model
 {

app/Models/Revision.php

@@ -15,10 +15,11 @@ use Riesjart\Relaquent\Model\Concerns\HasRelaquentRelationships;
  * @property int $ancestor_id
  * @property string $note
  * @property object $columns
- * @property Revision|null $parentRevision
+ * @property int $row_count - cached number of rows in the revision
- * @property Row[]|Collection $rows
+ * @property-read Revision|null $parentRevision
- * @property Proposal|null $sourceProposal - proposal that was used to create this revision
+ * @property-read Row[]|Collection $rows
- * @property Proposal[]|Collection $dependentProposals
+ * @property-read Proposal|null $sourceProposal - proposal that was used to create this revision
+ * @property-read Proposal[]|Collection $dependentProposals
  */
 class Revision extends Model
 {

app/Models/Table.php

@@ -2,9 +2,11 @@
 
 namespace App\Models;
 
+use App\Models\Concerns\ManyManyThrough;
 use App\Models\Concerns\Reportable;
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Database\Eloquent\Model;
+use Riesjart\Relaquent\Model\Concerns\HasRelaquentRelationships;
 
 /**
  * A data table object (referencing revisions)
@@ -20,15 +22,15 @@ use Illuminate\Database\Eloquent\Model;
  * @property string $description
  * @property string $license
  * @property string $origin
- * @property User $owner
+ * @property-read User $owner
- * @property Table $parentTable
+ * @property-read Table $parentTable
- * @property Table[]|Collection $forks
+ * @property-read Table[]|Collection $forks
- * @property Revision[]|Collection $revisions
+ * @property-read Revision[]|Collection $revisions
- * @property Revision $activeRevision
+ * @property-read Revision $revision
- * @property Proposal[]|Collection $proposal
+ * @property-read Proposal[]|Collection $proposal
- * @property TableComment[]|Collection $comments
+ * @property-read TableComment[]|Collection $comments
- * @property User[]|Collection $favouritingUsers
+ * @property-read User[]|Collection $favouritingUsers
- * @property User[]|Collection $discussionFollowers
+ * @property-read User[]|Collection $discussionFollowers
  */
 class Table extends Model
 {
@@ -60,7 +62,7 @@ class Table extends Model
     }
 
     /** Active revision */
-    public function activeRevision()
+    public function revision()
     {
         return $this->belongsTo(Revision::class, 'revision_id');
     }

app/Models/TableComment.php

@@ -16,10 +16,10 @@ use Illuminate\Database\Eloquent\Model;
  * @property int $author_id
  * @property int $ancestor_id
  * @property string $message
- * @property User $author
+ * @property-read User $author
- * @property Table $table
+ * @property-read Table $table
- * @property TableComment|null $ancestor
+ * @property-read TableComment|null $ancestor
- * @property TableComment[]|Collection $replies
+ * @property-read TableComment[]|Collection $replies
  */
 class TableComment extends Model
 {

app/Models/User.php

@@ -8,6 +8,8 @@ use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Notifications\Notifiable;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notification;
+use MightyPork\Exceptions\ArgumentException;
+use MightyPork\Exceptions\NotExistException;
 
 /**
  * A user in the application
@@ -19,16 +21,18 @@ use Illuminate\Notifications\Notification;
  * @property string $title - for display
  * @property string $email - unique, for login and social auth chaining
  * @property string $password - hashed pw
- * @property Proposal[]|Collection $proposals
+ * @property bool $confirmed - user e-mail is confirmed
- * @property Table[]|Collection $tables
+ * @property-read Proposal[]|Collection $proposals
- * @property OAuthIdentity[]|Collection $socialIdentities
+ * @property-read Table[]|Collection $tables
- * @property TableComment[]|Collection $tableComments
+ * @property-read OAuthIdentity[]|Collection $socialIdentities
- * @property Table[]|Collection $favouriteTables
+ * @property-read TableComment[]|Collection $tableComments
- * @property Table[]|Collection $followedDiscussions
+ * @property-read Table[]|Collection $favouriteTables
- * @property ContentReport[]|Collection $authoredReports
+ * @property-read Table[]|Collection $followedDiscussions
- * @property Notification[]|Collection $notifications
+ * @property-read ContentReport[]|Collection $authoredReports
- * @property Notification[]|Collection $readNotifications
+ * @property-read Notification[]|Collection $notifications
- * @property Notification[]|Collection $unreadNotifications
+ * @property-read Notification[]|Collection $readNotifications
+ * @property-read Notification[]|Collection $unreadNotifications
+ * @property-read string $handle - user handle, including @
  */
 class User extends Authenticatable
 {
@@ -137,12 +141,36 @@ class User extends Authenticatable
         $this->followedDiscussions()->detach($table);
     }
 
-    public function fakeTables()
+    /**
+     * Resolve user by a given name, id, or e-mail
+     *
+     * @param string $ident
+     * @return User
+     */
+    public static function resolve($ident)
     {
-        return [
+        $ident = "$ident";
-            (object)['title' => 'Table 1'],
+        if (strlen($ident) == 0) throw new ArgumentException("Can't find user by empty string.");
-            (object)['title' => 'Table 2'],
+
-            (object)['title' => 'Table 3']
+        if (is_numeric($ident)) {
-        ];
+            $u = static::find((int)$ident);
+        }
+        else if ($ident[0] == '@') {
+            $u = static::where('name', substr($ident, 1))->first();
+        }
+        else {
+            $u = static::where('email', $ident)->first();
+        }
+
+        if (!$u) throw new NotExistException("No user found matching \"$ident\"");
+
+        return $u;
+    }
+
+    public function __get($name)
+    {
+        if ($name == 'handle') return "@$this->name";
+
+        return parent::__get($name);
     }
 }

app/Providers/AppServiceProvider.php

@@ -22,7 +22,8 @@ class AppServiceProvider extends ServiceProvider
         \Route::bind('user', function ($value) {
             $u = User::where('name', $value)->first();
             // it may also be the _id directly
-            if (!$u) $u = User::find($value);
+            if (!$u && is_numeric($value)) $u = User::find((int)$value);
+            if (!$u) abort(404);
             return $u;
         });
     }

app/Providers/RouteServiceProvider.php

@@ -53,11 +53,7 @@ class RouteServiceProvider extends ServiceProvider
     {
         Route::middleware('web')
              ->namespace($this->namespace)
-             ->group(base_path('routes/public.php'));
+             ->group(base_path('routes/web.php'));
-
-        Route::middleware(['web', 'auth'])
-            ->namespace($this->namespace)
-            ->group(base_path('routes/user.php'));
     }
 
     /**

app/View/Widget.php

@@ -19,9 +19,10 @@ class Widget
 {
     protected $attributesArray = [],
         $id, $name, $label, $value,
-        $viewName,
+        $viewName, // view to use inside the form namespace
-        $help,
+        $help, // help button with tooltip
-        $labelCols, $fieldCols,
+        $prepend, $append, // input-group (add-ons)
+        $labelCols, $fieldCols, // grid layout setting (label/field cols)
         $styleArray = [];
 
     public function __construct($viewName, $name, $label)

app/helpers.php

@@ -1,3 +1,24 @@
 <?php
 
 // global helpers
+function authed() {
+    return ! \Auth::guest();
+}
+
+function guest() {
+    return \Auth::guest();
+}
+
+function user() {
+    return \Auth::user();
+}
+
+function ellipsis($s, $len) {
+    return \MightyPork\Utils\Str::ellipsis($s, $len);
+}
+
+function faker() {
+    static $fac = null;
+    if ($fac !== null) return $fac;
+    return $fac = Faker\Factory::create();
+}

database/migrations/2014_10_12_000000_create_users_table.php

@@ -18,8 +18,11 @@ class CreateUsersTable extends Migration
 	        $table->timestamps();
             $table->string('name')->unique();
             $table->string('title')->index();
+            $table->text('bio')->nullable();
+            $table->text('website')->nullable();
             $table->string('email')->unique(); // would have to be nullable if we supported login via providers that don't give us e-mail
-            $table->string('password')->nullable();
+            $table->string('password')->nullable(); // null if registered via provider and not set a pw yet
+            $table->boolean('confirmed')->default(false); // set to 1 after e-mail is verified
             $table->rememberToken();
         });
     }

database/migrations/2018_07_08_193600_create_revisions_table.php

@@ -18,6 +18,8 @@ class CreateRevisionsTable extends Migration
             $table->timestamps();
             $table->unsignedInteger('ancestor_id')->index()->nullable(); // parent revision
 
+            $table->unsignedInteger('row_count'); // cached nbr of rows
+
             // columns specification
             // array with: {name, title, type}
             $table->jsonb('columns');

database/migrations/2018_07_22_083900_create_email_confirmations_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateEmailConfirmationsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('email_confirmations', function (Blueprint $table) {
+            $table->unsignedInteger('user_id')->index();
+            $table->timestamp('created_at')->nullable();
+            $table->string('token');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('email_confirmations');
+    }
+}

porklib/Utils/Str.php

@@ -654,11 +654,18 @@ class Str extends \Illuminate\Support\Str
 		return preg_replace('/,\s*([}\]])/s','\1', $str);
 	}
 
-	public static function ellipsis($str, $maxlen)
+	public static function ellipsis($str, $maxlen, $margin=10)
 	{
 		$len = mb_strlen($str);
 		if ($len > $maxlen) {
-			return mb_substr($str, 0, $maxlen) . '…';
+			$hard = mb_substr($str, 0, $maxlen);
+
+			$lastspace = mb_strrpos($hard, ' ');
+			if ($lastspace > $maxlen - $margin) {
+			    $hard = mb_substr($hard, 0, $lastspace);
+            }
+
+            return $hard . '…';
 		}
 
 		return $str;

public/fonts/fa-dtbl-1-preview.html

@@ -161,18 +161,47 @@
       [data-icon]:before { content: attr(data-icon); }
 
       [data-icon]:before,
+      .fa-bell:before,
+.fa-bell-o:before,
+.fa-calendar:before,
 .fa-check:before,
+.fa-clock-o:before,
+.fa-cloud-upload:before,
+.fa-code-fork:before,
+.fa-download:before,
+.fa-eye:before,
+.fa-eye-slash:before,
 .fa-facebook-square:before,
+.fa-filter:before,
+.fa-flag:before,
 .fa-floppy-o:before,
+.fa-gavel:before,
 .fa-github:before,
 .fa-google:before,
+.fa-history:before,
+.fa-link:before,
+.fa-pencil-square-o:before,
 .fa-question-circle:before,
+.fa-quote-left:before,
+.fa-reply:before,
+.fa-rss:before,
+.fa-search:before,
+.fa-share-alt:before,
 .fa-sign-in:before,
 .fa-sign-out:before,
+.fa-sliders:before,
+.fa-sort:before,
+.fa-sort-asc:before,
+.fa-sort-desc:before,
+.fa-star:before,
+.fa-star-o:before,
+.fa-table:before,
 .fa-times:before,
+.fa-trash:before,
 .fa-trash-o:before,
 .fa-user-circle-o:before,
-.fa-user-plus:before {
+.fa-user-plus:before,
+.fa-wrench:before {
         display: inline-block;
   font-family: "fa-dtbl-1";
   font-style: normal;
@@ -187,18 +216,47 @@
   font-smoothing: antialiased;
       }
 
-      .fa-check:before { content: "\f100"; }
+      .fa-bell:before { content: "\f100"; }
-.fa-facebook-square:before { content: "\f101"; }
+.fa-bell-o:before { content: "\f101"; }
-.fa-floppy-o:before { content: "\f102"; }
+.fa-calendar:before { content: "\f102"; }
-.fa-github:before { content: "\f103"; }
+.fa-check:before { content: "\f103"; }
-.fa-google:before { content: "\f104"; }
+.fa-clock-o:before { content: "\f104"; }
-.fa-question-circle:before { content: "\f105"; }
+.fa-cloud-upload:before { content: "\f105"; }
-.fa-sign-in:before { content: "\f106"; }
+.fa-code-fork:before { content: "\f106"; }
-.fa-sign-out:before { content: "\f107"; }
+.fa-download:before { content: "\f107"; }
-.fa-times:before { content: "\f108"; }
+.fa-eye:before { content: "\f108"; }
-.fa-trash-o:before { content: "\f109"; }
+.fa-eye-slash:before { content: "\f109"; }
-.fa-user-circle-o:before { content: "\f10a"; }
+.fa-facebook-square:before { content: "\f10a"; }
-.fa-user-plus:before { content: "\f10b"; }
+.fa-filter:before { content: "\f10b"; }
+.fa-flag:before { content: "\f10c"; }
+.fa-floppy-o:before { content: "\f10d"; }
+.fa-gavel:before { content: "\f10e"; }
+.fa-github:before { content: "\f10f"; }
+.fa-google:before { content: "\f110"; }
+.fa-history:before { content: "\f111"; }
+.fa-link:before { content: "\f112"; }
+.fa-pencil-square-o:before { content: "\f113"; }
+.fa-question-circle:before { content: "\f114"; }
+.fa-quote-left:before { content: "\f115"; }
+.fa-reply:before { content: "\f116"; }
+.fa-rss:before { content: "\f117"; }
+.fa-search:before { content: "\f118"; }
+.fa-share-alt:before { content: "\f119"; }
+.fa-sign-in:before { content: "\f11a"; }
+.fa-sign-out:before { content: "\f11b"; }
+.fa-sliders:before { content: "\f11c"; }
+.fa-sort:before { content: "\f11d"; }
+.fa-sort-asc:before { content: "\f11e"; }
+.fa-sort-desc:before { content: "\f11f"; }
+.fa-star:before { content: "\f120"; }
+.fa-star-o:before { content: "\f121"; }
+.fa-table:before { content: "\f122"; }
+.fa-times:before { content: "\f123"; }
+.fa-trash:before { content: "\f124"; }
+.fa-trash-o:before { content: "\f125"; }
+.fa-user-circle-o:before { content: "\f126"; }
+.fa-user-plus:before { content: "\f127"; }
+.fa-wrench:before { content: "\f128"; }
     </style>
 
     <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
@@ -214,11 +272,50 @@
   <body class="characters-off">
     <div id="page" class="container">
       <header>
-        <h1>fa-dtbl-1 contains 12 glyphs:</h1>
+        <h1>fa-dtbl-1 contains 41 glyphs:</h1>
         <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
       </header>
 
       
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-bell" class="fa-bell"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-bell" class="fa-bell"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-bell" class="fa-bell"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-bell" class="fa-bell"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-bell" class="fa-bell"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-bell" class="fa-bell"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-bell" class="fa-bell"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-bell" class="fa-bell"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-bell" class="fa-bell"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-bell" class="fa-bell"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-bell" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-bell-o" class="fa-bell-o"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-bell-o" class="fa-bell-o"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-bell-o" class="fa-bell-o"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-bell-o" class="fa-bell-o"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-bell-o" class="fa-bell-o"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-bell-o" class="fa-bell-o"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-bell-o" class="fa-bell-o"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-bell-o" class="fa-bell-o"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-bell-o" class="fa-bell-o"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-bell-o" class="fa-bell-o"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-bell-o" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-calendar" class="fa-calendar"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-calendar" class="fa-calendar"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-calendar" class="fa-calendar"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-calendar" class="fa-calendar"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-calendar" class="fa-calendar"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-calendar" class="fa-calendar"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-calendar" class="fa-calendar"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-calendar" class="fa-calendar"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-calendar" class="fa-calendar"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-calendar" class="fa-calendar"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-calendar" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
+        </div>
+      </div>
+      
       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fa-check" class="fa-check"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-check" class="fa-check"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-check" class="fa-check"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-check" class="fa-check"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-check" class="fa-check"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-check" class="fa-check"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-check" class="fa-check"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-check" class="fa-check"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-check" class="fa-check"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-check" class="fa-check"></i></span>
@@ -228,7 +325,85 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-check" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-clock-o" class="fa-clock-o"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-clock-o" class="fa-clock-o"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-clock-o" class="fa-clock-o"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-clock-o" class="fa-clock-o"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-clock-o" class="fa-clock-o"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-clock-o" class="fa-clock-o"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-clock-o" class="fa-clock-o"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-clock-o" class="fa-clock-o"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-clock-o" class="fa-clock-o"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-clock-o" class="fa-clock-o"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-clock-o" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-cloud-upload" class="fa-cloud-upload"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-cloud-upload" class="fa-cloud-upload"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-cloud-upload" class="fa-cloud-upload"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-cloud-upload" class="fa-cloud-upload"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-cloud-upload" class="fa-cloud-upload"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-cloud-upload" class="fa-cloud-upload"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-cloud-upload" class="fa-cloud-upload"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-cloud-upload" class="fa-cloud-upload"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-cloud-upload" class="fa-cloud-upload"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-cloud-upload" class="fa-cloud-upload"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-cloud-upload" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-code-fork" class="fa-code-fork"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-code-fork" class="fa-code-fork"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-code-fork" class="fa-code-fork"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-code-fork" class="fa-code-fork"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-code-fork" class="fa-code-fork"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-code-fork" class="fa-code-fork"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-code-fork" class="fa-code-fork"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-code-fork" class="fa-code-fork"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-code-fork" class="fa-code-fork"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-code-fork" class="fa-code-fork"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-code-fork" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf106;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-download" class="fa-download"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-download" class="fa-download"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-download" class="fa-download"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-download" class="fa-download"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-download" class="fa-download"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-download" class="fa-download"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-download" class="fa-download"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-download" class="fa-download"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-download" class="fa-download"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-download" class="fa-download"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-download" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-eye" class="fa-eye"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-eye" class="fa-eye"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-eye" class="fa-eye"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-eye" class="fa-eye"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-eye" class="fa-eye"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-eye" class="fa-eye"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-eye" class="fa-eye"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-eye" class="fa-eye"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-eye" class="fa-eye"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-eye" class="fa-eye"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-eye" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-eye-slash" class="fa-eye-slash"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-eye-slash" class="fa-eye-slash"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-eye-slash" class="fa-eye-slash"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-eye-slash" class="fa-eye-slash"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-eye-slash" class="fa-eye-slash"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-eye-slash" class="fa-eye-slash"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-eye-slash" class="fa-eye-slash"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-eye-slash" class="fa-eye-slash"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-eye-slash" class="fa-eye-slash"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-eye-slash" class="fa-eye-slash"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-eye-slash" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
         </div>
       </div>
       
@@ -241,7 +416,33 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-facebook-square" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-filter" class="fa-filter"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-filter" class="fa-filter"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-filter" class="fa-filter"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-filter" class="fa-filter"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-filter" class="fa-filter"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-filter" class="fa-filter"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-filter" class="fa-filter"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-filter" class="fa-filter"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-filter" class="fa-filter"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-filter" class="fa-filter"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-filter" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-flag" class="fa-flag"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-flag" class="fa-flag"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-flag" class="fa-flag"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-flag" class="fa-flag"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-flag" class="fa-flag"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-flag" class="fa-flag"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-flag" class="fa-flag"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-flag" class="fa-flag"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-flag" class="fa-flag"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-flag" class="fa-flag"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-flag" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10c;" />
         </div>
       </div>
       
@@ -255,7 +456,21 @@
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-floppy-o" />
        <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-save" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10d;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-gavel" class="fa-gavel"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-gavel" class="fa-gavel"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-gavel" class="fa-gavel"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-gavel" class="fa-gavel"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-gavel" class="fa-gavel"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-gavel" class="fa-gavel"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-gavel" class="fa-gavel"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-gavel" class="fa-gavel"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-gavel" class="fa-gavel"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-gavel" class="fa-gavel"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-gavel" />
+       <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-legal" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10e;" />
         </div>
       </div>
       
@@ -268,7 +483,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-github" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10f;" />
         </div>
       </div>
       
@@ -281,7 +496,47 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-google" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-history" class="fa-history"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-history" class="fa-history"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-history" class="fa-history"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-history" class="fa-history"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-history" class="fa-history"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-history" class="fa-history"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-history" class="fa-history"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-history" class="fa-history"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-history" class="fa-history"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-history" class="fa-history"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-history" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-link" class="fa-link"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-link" class="fa-link"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-link" class="fa-link"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-link" class="fa-link"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-link" class="fa-link"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-link" class="fa-link"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-link" class="fa-link"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-link" class="fa-link"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-link" class="fa-link"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-link" class="fa-link"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-link" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf112;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-pencil-square-o" class="fa-pencil-square-o"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-pencil-square-o" class="fa-pencil-square-o"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-pencil-square-o" class="fa-pencil-square-o"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-pencil-square-o" class="fa-pencil-square-o"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-pencil-square-o" class="fa-pencil-square-o"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-pencil-square-o" class="fa-pencil-square-o"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-pencil-square-o" class="fa-pencil-square-o"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-pencil-square-o" class="fa-pencil-square-o"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-pencil-square-o" class="fa-pencil-square-o"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-pencil-square-o" class="fa-pencil-square-o"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-pencil-square-o" />
+       <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-edit" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf113;" />
         </div>
       </div>
       
@@ -294,7 +549,72 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-question-circle" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf114;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-quote-left" class="fa-quote-left"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-quote-left" class="fa-quote-left"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-quote-left" class="fa-quote-left"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-quote-left" class="fa-quote-left"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-quote-left" class="fa-quote-left"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-quote-left" class="fa-quote-left"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-quote-left" class="fa-quote-left"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-quote-left" class="fa-quote-left"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-quote-left" class="fa-quote-left"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-quote-left" class="fa-quote-left"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-quote-left" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-reply" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-rss" class="fa-rss"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-rss" class="fa-rss"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-rss" class="fa-rss"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-rss" class="fa-rss"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-rss" class="fa-rss"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-rss" class="fa-rss"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-rss" class="fa-rss"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-rss" class="fa-rss"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-rss" class="fa-rss"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-rss" class="fa-rss"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-rss" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-search" class="fa-search"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-search" class="fa-search"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-search" class="fa-search"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-search" class="fa-search"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-search" class="fa-search"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-search" class="fa-search"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-search" class="fa-search"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-search" class="fa-search"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-search" class="fa-search"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-search" class="fa-search"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-search" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-share-alt" class="fa-share-alt"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-share-alt" class="fa-share-alt"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-share-alt" class="fa-share-alt"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-share-alt" class="fa-share-alt"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-share-alt" class="fa-share-alt"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-share-alt" class="fa-share-alt"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-share-alt" class="fa-share-alt"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-share-alt" class="fa-share-alt"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-share-alt" class="fa-share-alt"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-share-alt" class="fa-share-alt"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-share-alt" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
         </div>
       </div>
       
@@ -307,7 +627,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sign-in" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf106;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
         </div>
       </div>
       
@@ -320,7 +640,98 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sign-out" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-sliders" class="fa-sliders"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-sliders" class="fa-sliders"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-sliders" class="fa-sliders"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-sliders" class="fa-sliders"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-sliders" class="fa-sliders"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-sliders" class="fa-sliders"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-sliders" class="fa-sliders"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-sliders" class="fa-sliders"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-sliders" class="fa-sliders"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-sliders" class="fa-sliders"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sliders" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-sort" class="fa-sort"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-sort" class="fa-sort"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-sort" class="fa-sort"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-sort" class="fa-sort"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-sort" class="fa-sort"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-sort" class="fa-sort"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-sort" class="fa-sort"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-sort" class="fa-sort"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-sort" class="fa-sort"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-sort" class="fa-sort"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sort" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-sort-asc" class="fa-sort-asc"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-sort-asc" class="fa-sort-asc"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-sort-asc" class="fa-sort-asc"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-sort-asc" class="fa-sort-asc"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-sort-asc" class="fa-sort-asc"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-sort-asc" class="fa-sort-asc"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-sort-asc" class="fa-sort-asc"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-sort-asc" class="fa-sort-asc"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-sort-asc" class="fa-sort-asc"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-sort-asc" class="fa-sort-asc"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sort-asc" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-sort-desc" class="fa-sort-desc"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-sort-desc" class="fa-sort-desc"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-sort-desc" class="fa-sort-desc"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-sort-desc" class="fa-sort-desc"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-sort-desc" class="fa-sort-desc"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-sort-desc" class="fa-sort-desc"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-sort-desc" class="fa-sort-desc"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-sort-desc" class="fa-sort-desc"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-sort-desc" class="fa-sort-desc"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-sort-desc" class="fa-sort-desc"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sort-desc" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-star" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-star-o" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-table" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />
         </div>
       </div>
       
@@ -334,7 +745,20 @@
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-times" />
        <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-close" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-trash" class="fa-trash"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-trash" class="fa-trash"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-trash" class="fa-trash"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-trash" class="fa-trash"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-trash" class="fa-trash"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-trash" class="fa-trash"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-trash" class="fa-trash"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-trash" class="fa-trash"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-trash" class="fa-trash"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-trash" class="fa-trash"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-trash" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
         </div>
       </div>
       
@@ -347,7 +771,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-trash-o" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
         </div>
       </div>
       
@@ -360,7 +784,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-user-circle-o" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
         </div>
       </div>
       
@@ -373,7 +797,20 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-user-plus" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-wrench" class="fa-wrench"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-wrench" class="fa-wrench"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-wrench" class="fa-wrench"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-wrench" class="fa-wrench"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-wrench" class="fa-wrench"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-wrench" class="fa-wrench"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-wrench" class="fa-wrench"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-wrench" class="fa-wrench"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-wrench" class="fa-wrench"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-wrench" class="fa-wrench"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-wrench" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />
         </div>
       </div>
       

public/fonts/fa-dtbl-1.css

@@ -38,15 +38,44 @@
   font-smoothing: antialiased;
 }
 
-.fa-check::before { content: "\f100"; }
+.fa-bell::before { content: "\f100"; }
-.fa-facebook-square::before { content: "\f101"; }
+.fa-bell-o::before { content: "\f101"; }
-.fa-floppy-o::before, .fa-save::before { content: "\f102"; }
+.fa-calendar::before { content: "\f102"; }
-.fa-github::before { content: "\f103"; }
+.fa-check::before { content: "\f103"; }
-.fa-google::before { content: "\f104"; }
+.fa-clock-o::before { content: "\f104"; }
-.fa-question-circle::before { content: "\f105"; }
+.fa-cloud-upload::before { content: "\f105"; }
-.fa-sign-in::before { content: "\f106"; }
+.fa-code-fork::before { content: "\f106"; }
-.fa-sign-out::before { content: "\f107"; }
+.fa-download::before { content: "\f107"; }
-.fa-times::before, .fa-close::before { content: "\f108"; }
+.fa-eye::before { content: "\f108"; }
-.fa-trash-o::before { content: "\f109"; }
+.fa-eye-slash::before { content: "\f109"; }
-.fa-user-circle-o::before { content: "\f10a"; }
+.fa-facebook-square::before { content: "\f10a"; }
-.fa-user-plus::before { content: "\f10b"; }
+.fa-filter::before { content: "\f10b"; }
+.fa-flag::before { content: "\f10c"; }
+.fa-floppy-o::before, .fa-save::before { content: "\f10d"; }
+.fa-gavel::before, .fa-legal::before { content: "\f10e"; }
+.fa-github::before { content: "\f10f"; }
+.fa-google::before { content: "\f110"; }
+.fa-history::before { content: "\f111"; }
+.fa-link::before { content: "\f112"; }
+.fa-pencil-square-o::before, .fa-edit::before { content: "\f113"; }
+.fa-question-circle::before { content: "\f114"; }
+.fa-quote-left::before { content: "\f115"; }
+.fa-reply::before { content: "\f116"; }
+.fa-rss::before { content: "\f117"; }
+.fa-search::before { content: "\f118"; }
+.fa-share-alt::before { content: "\f119"; }
+.fa-sign-in::before { content: "\f11a"; }
+.fa-sign-out::before { content: "\f11b"; }
+.fa-sliders::before { content: "\f11c"; }
+.fa-sort::before { content: "\f11d"; }
+.fa-sort-asc::before { content: "\f11e"; }
+.fa-sort-desc::before { content: "\f11f"; }
+.fa-star::before { content: "\f120"; }
+.fa-star-o::before { content: "\f121"; }
+.fa-table::before { content: "\f122"; }
+.fa-times::before, .fa-close::before { content: "\f123"; }
+.fa-trash::before { content: "\f124"; }
+.fa-trash-o::before { content: "\f125"; }
+.fa-user-circle-o::before { content: "\f126"; }
+.fa-user-plus::before { content: "\f127"; }
+.fa-wrench::before { content: "\f128"; }

public/fonts/fa-dtbl-1.svg

@@ -1,11 +1,11 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <!--
-2018-7-21: Created with FontForge (http://fontforge.org)
+2018-7-22: Created with FontForge (http://fontforge.org)
 -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <metadata>
-Created by FontForge 20170805 at Sat Jul 21 17:17:47 2018
+Created by FontForge 20170805 at Sun Jul 22 15:14:07 2018
  By ondra
 The Fork Awesome font is licensed under the SIL OFL 1.1 (http://scripts.sil.org/OFL). Fork Awesome is a fork based of off Font Awesome 4.7.0 by Dave Gandy. More info on licenses at https://forkawesome.github.io
 </metadata>
@@ -19,54 +19,155 @@ The Fork Awesome font is licensed under the SIL OFL 1.1 (http://scripts.sil.org/
     panose-1="2 0 5 3 0 0 0 0 0 0"
     ascent="1536"
     descent="-256"
-    bbox="0 -256 2048 1536"
+    bbox="-0.0376684 -256 2048 1536"
     underline-thickness="89.6"
     underline-position="-179.2"
-    unicode-range="U+0020-F10B"
+    unicode-range="U+0020-F128"
   />
     <missing-glyph />
     <glyph glyph-name="space" unicode=" " horiz-adv-x="200" 
  />
-    <glyph glyph-name="check" unicode="&#xf100;" horiz-adv-x="1550" 
+    <glyph glyph-name="bell" unicode="&#xf100;" horiz-adv-x="1664" 
+d="M848 -160c0 9 -7 16 -16 16c-79 0 -144 65 -144 144c0 9 -7 16 -16 16s-16 -7 -16 -16c0 -97 79 -176 176 -176c9 0 16 7 16 16zM182 128h1300c-179 202 -266 476 -266 832c0 129 -122 320 -384 320s-384 -191 -384 -320c0 -356 -87 -630 -266 -832zM1664 128
+c0 -70 -58 -128 -128 -128h-448c0 -141 -115 -256 -256 -256s-256 115 -256 256h-448c-70 0 -128 58 -128 128c148 125 320 349 320 832c0 192 159 402 424 441c-5 12 -8 25 -8 39c0 53 43 96 96 96s96 -43 96 -96c0 -14 -3 -27 -8 -39c265 -39 424 -249 424 -441
+c0 -483 172 -707 320 -832z" />
+    <glyph glyph-name="bell-o" unicode="&#xf101;" horiz-adv-x="1664" 
+d="M848 -160c0 9 -7 16 -16 16c-79 0 -144 65 -144 144c0 9 -7 16 -16 16s-16 -7 -16 -16c0 -97 79 -176 176 -176c9 0 16 7 16 16zM1664 128c0 -70 -58 -128 -128 -128h-448c0 -141 -115 -256 -256 -256s-256 115 -256 256h-448c-70 0 -128 58 -128 128
+c148 125 320 349 320 832c0 192 159 402 424 441c-5 12 -8 25 -8 39c0 53 43 96 96 96s96 -43 96 -96c0 -14 -3 -27 -8 -39c265 -39 424 -249 424 -441c0 -483 172 -707 320 -832z" />
+    <glyph glyph-name="calendar" unicode="&#xf102;" horiz-adv-x="1664" 
+d="M128 -128h288v288h-288v-288zM480 -128h320v288h-320v-288zM128 224h288v320h-288v-320zM480 224h320v320h-320v-320zM128 608h288v288h-288v-288zM864 -128h320v288h-320v-288zM480 608h320v288h-320v-288zM1248 -128h288v288h-288v-288zM864 224h320v320h-320v-320z
+M512 1088v288c0 17 -15 32 -32 32h-64c-17 0 -32 -15 -32 -32v-288c0 -17 15 -32 32 -32h64c17 0 32 15 32 32zM1248 224h288v320h-288v-320zM864 608h320v288h-320v-288zM1248 608h288v288h-288v-288zM1280 1088v288c0 17 -15 32 -32 32h-64c-17 0 -32 -15 -32 -32v-288
+c0 -17 15 -32 32 -32h64c17 0 32 15 32 32zM1664 1152v-1280c0 -70 -58 -128 -128 -128h-1408c-70 0 -128 58 -128 128v1280c0 70 58 128 128 128h128v96c0 88 72 160 160 160h64c88 0 160 -72 160 -160v-96h384v96c0 88 72 160 160 160h64c88 0 160 -72 160 -160v-96h128
+c70 0 128 -58 128 -128z" />
+    <glyph glyph-name="check" unicode="&#xf103;" horiz-adv-x="1550" 
 d="M1550 970c0 -25 -10 -50 -28 -68l-724 -724l-136 -136c-18 -18 -43 -28 -68 -28s-50 10 -68 28l-136 136l-362 362c-18 18 -28 43 -28 68s10 50 28 68l136 136c18 18 43 28 68 28s50 -10 68 -28l294 -295l656 657c18 18 43 28 68 28s50 -10 68 -28l136 -136
 c18 -18 28 -43 28 -68z" />
-    <glyph glyph-name="facebook-square" unicode="&#xf101;" 
+    <glyph glyph-name="clock-o" unicode="&#xf104;" 
+d="M896 992v-448c0 -18 -14 -32 -32 -32h-320c-18 0 -32 14 -32 32v64c0 18 14 32 32 32h224v352c0 18 14 32 32 32h64c18 0 32 -14 32 -32zM1312 640c0 300 -244 544 -544 544s-544 -244 -544 -544s244 -544 544 -544s544 244 544 544zM1536 640
+c0 -424 -344 -768 -768 -768s-768 344 -768 768s344 768 768 768s768 -344 768 -768z" />
+    <glyph glyph-name="cloud-upload" unicode="&#xf105;" horiz-adv-x="1920" 
+d="M1280 672c0 8 -3 17 -9 23l-352 352c-6 6 -14 9 -23 9c-8 0 -17 -3 -23 -9l-351 -351c-6 -7 -10 -15 -10 -24c0 -18 14 -32 32 -32h224v-352c0 -17 15 -32 32 -32h192c17 0 32 15 32 32v352h224c18 0 32 15 32 32zM1920 384c0 -212 -172 -384 -384 -384h-1088
+c-247 0 -448 201 -448 448c0 174 101 332 258 405c-1 15 -2 29 -2 43c0 283 229 512 512 512c208 0 395 -126 474 -318c46 40 105 62 166 62c141 0 256 -115 256 -256c0 -49 -14 -97 -41 -138c174 -41 297 -196 297 -374z" />
+    <glyph glyph-name="code-fork" unicode="&#xf106;" horiz-adv-x="1024" 
+d="M288 64c0 53 -43 96 -96 96s-96 -43 -96 -96s43 -96 96 -96s96 43 96 96zM288 1216c0 53 -43 96 -96 96s-96 -43 -96 -96s43 -96 96 -96s96 43 96 96zM928 1088c0 53 -43 96 -96 96s-96 -43 -96 -96s43 -96 96 -96s96 43 96 96zM1024 1088c0 -71 -39 -133 -96 -166
+c-3 -361 -259 -441 -429 -495c-159 -50 -211 -74 -211 -171v-26c57 -33 96 -95 96 -166c0 -106 -86 -192 -192 -192s-192 86 -192 192c0 71 39 133 96 166v820c-57 33 -96 95 -96 166c0 106 86 192 192 192s192 -86 192 -192c0 -71 -39 -133 -96 -166v-497
+c51 25 105 42 154 57c186 59 292 103 294 312c-57 33 -96 95 -96 166c0 106 86 192 192 192s192 -86 192 -192z" />
+    <glyph glyph-name="download" unicode="&#xf107;" horiz-adv-x="1664" 
+d="M1280 192c0 35 -29 64 -64 64s-64 -29 -64 -64s29 -64 64 -64s64 29 64 64zM1536 192c0 35 -29 64 -64 64s-64 -29 -64 -64s29 -64 64 -64s64 29 64 64zM1664 416v-320c0 -53 -43 -96 -96 -96h-1472c-53 0 -96 43 -96 96v320c0 53 43 96 96 96h465l135 -136
+c37 -36 85 -56 136 -56s99 20 136 56l136 136h464c53 0 96 -43 96 -96zM1339 985c10 -24 5 -52 -14 -70l-448 -448c-12 -13 -29 -19 -45 -19s-33 6 -45 19l-448 448c-19 18 -24 46 -14 70c10 23 33 39 59 39h256v448c0 35 29 64 64 64h256c35 0 64 -29 64 -64v-448h256
+c26 0 49 -16 59 -39z" />
+    <glyph glyph-name="eye" unicode="&#xf108;" horiz-adv-x="1792" 
+d="M1664 576c-95 147 -225 273 -381 353c40 -68 61 -146 61 -225c0 -247 -201 -448 -448 -448s-448 201 -448 448c0 79 21 157 61 225c-156 -80 -286 -206 -381 -353c171 -264 447 -448 768 -448s597 184 768 448zM944 960c0 26 -22 48 -48 48c-167 0 -304 -137 -304 -304
+c0 -26 22 -48 48 -48s48 22 48 48c0 114 94 208 208 208c26 0 48 22 48 48zM1792 576c0 -25 -8 -48 -20 -69c-184 -303 -521 -507 -876 -507s-692 205 -876 507c-12 21 -20 44 -20 69s8 48 20 69c184 302 521 507 876 507s692 -205 876 -507c12 -21 20 -44 20 -69z" />
+    <glyph glyph-name="eye-slash" unicode="&#xf109;" horiz-adv-x="1792" 
+d="M555 201l78 141c-116 84 -185 219 -185 362c0 79 21 157 61 225c-156 -80 -286 -206 -381 -353c104 -161 251 -296 427 -375zM944 960c0 26 -22 48 -48 48c-167 0 -304 -137 -304 -304c0 -26 22 -48 48 -48s48 22 48 48c0 115 94 208 208 208c26 0 48 22 48 48z
+M1307 1151c0 -2 0 -7 -1 -9c-211 -377 -420 -756 -631 -1133l-49 -89c-6 -10 -17 -16 -28 -16c-18 0 -113 58 -134 70c-10 6 -16 16 -16 28c0 16 34 70 44 87c-194 88 -357 238 -472 418c-13 20 -20 44 -20 69c0 24 7 49 20 69c198 304 507 507 876 507c60 0 121 -6 180 -17
+l54 97c6 10 16 16 28 16c18 0 112 -58 133 -70c10 -6 16 -16 16 -27zM1344 704c0 -186 -115 -352 -288 -418l280 502c5 -28 8 -56 8 -84zM1792 576c0 -26 -7 -47 -20 -69c-31 -51 -70 -100 -109 -145c-196 -225 -466 -362 -767 -362l74 132c291 25 538 202 694 444
+c-74 115 -169 216 -282 294l63 112c124 -83 249 -208 327 -337c13 -22 20 -43 20 -69z" />
+    <glyph glyph-name="facebook-square" unicode="&#xf10a;" 
 d="M1248 1408c159 0 288 -129 288 -288v-960c0 -159 -129 -288 -288 -288h-188v595h199l30 232h-229v148c0 67 18 112 115 112l122 1v207c-21 3 -94 9 -178 9c-177 0 -299 -108 -299 -306v-171h-200v-232h200v-595h-532c-159 0 -288 129 -288 288v960c0 159 129 288 288 288
 h960z" />
-    <glyph glyph-name="floppy-o" unicode="&#xf102;" 
+    <glyph glyph-name="filter" unicode="&#xf10b;" horiz-adv-x="1408" 
+d="M1403 1241c10 -24 5 -52 -14 -70l-493 -493v-742c0 -26 -16 -49 -39 -59c-8 -3 -17 -5 -25 -5c-17 0 -33 6 -45 19l-256 256c-12 12 -19 28 -19 45v486l-493 493c-19 18 -24 46 -14 70c10 23 33 39 59 39h1280c26 0 49 -16 59 -39z" />
+    <glyph glyph-name="flag" unicode="&#xf10c;" horiz-adv-x="1728" 
+d="M256 1280c0 -46 -25 -87 -64 -110v-1266c0 -17 -15 -32 -32 -32h-64c-17 0 -32 15 -32 32v1266c-39 23 -64 64 -64 110c0 71 57 128 128 128s128 -57 128 -128zM1728 1216v-763c0 -37 -23 -51 -52 -66c-113 -61 -238 -116 -369 -116c-184 0 -272 140 -490 140
+c-159 0 -326 -72 -464 -146c-11 -6 -21 -9 -33 -9c-35 0 -64 29 -64 64v742c0 24 12 41 31 55c24 16 53 30 79 43c126 64 279 120 421 120c157 0 280 -52 419 -117c28 -14 57 -19 88 -19c157 0 326 136 370 136c35 0 64 -29 64 -64z" />
+    <glyph glyph-name="floppy-o" unicode="&#xf10d;" 
 d="M384 0h768v384h-768v-384zM1280 0h128v896c0 19 -17 60 -30 73l-281 281c-14 14 -53 30 -73 30v-416c0 -53 -43 -96 -96 -96h-576c-53 0 -96 43 -96 96v416h-128v-1280h128v416c0 53 43 96 96 96h832c53 0 96 -43 96 -96v-416zM896 928v320c0 17 -15 32 -32 32h-192
 c-17 0 -32 -15 -32 -32v-320c0 -17 15 -32 32 -32h192c17 0 32 15 32 32zM1536 896v-928c0 -53 -43 -96 -96 -96h-1344c-53 0 -96 43 -96 96v1344c0 53 43 96 96 96h928c53 0 126 -30 164 -68l280 -280c38 -38 68 -111 68 -164z" />
-    <glyph glyph-name="github" unicode="&#xf103;" 
+    <glyph glyph-name="gavel" unicode="&#xf10e;" horiz-adv-x="1731" 
+d="M1731 0c0 -34 -14 -67 -37 -90l-107 -108c-24 -23 -57 -37 -91 -37s-67 14 -90 37l-363 364c-24 23 -38 56 -38 90c0 38 16 69 43 96l-256 256l-126 -126c-9 -9 -21 -14 -34 -14s-25 5 -34 14c30 -30 58 -52 58 -98c0 -26 -10 -49 -28 -68c-34 -36 -70 -84 -124 -84
+c-25 0 -50 10 -68 28l-408 408c-18 18 -28 43 -28 68c0 54 48 90 84 124c19 18 42 28 68 28c46 0 68 -28 98 -58c-9 9 -14 21 -14 34s5 25 14 34l348 348c9 9 21 14 34 14s25 -5 34 -14c-30 30 -58 52 -58 98c0 26 10 49 28 68c34 36 70 84 124 84c25 0 50 -10 68 -28
+l408 -408c18 -18 28 -43 28 -68c0 -54 -48 -90 -84 -124c-19 -18 -42 -28 -68 -28c-46 0 -68 28 -98 58c9 -9 14 -21 14 -34s-5 -25 -14 -34l-126 -126l256 -256c27 27 58 43 96 43c34 0 67 -14 91 -37l363 -363c23 -24 37 -57 37 -91z" />
+    <glyph glyph-name="github" unicode="&#xf10f;" 
 d="M768 1408c424 0 768 -344 768 -768c0 -339 -220 -627 -525 -729c-39 -7 -53 17 -53 37c0 25 1 108 1 211c0 72 -24 118 -52 142c171 19 351 84 351 379c0 84 -30 152 -79 206c8 20 34 98 -8 204c-64 20 -211 -79 -211 -79c-61 17 -127 26 -192 26s-131 -9 -192 -26
 c0 0 -147 99 -211 79c-42 -106 -16 -184 -8 -204c-49 -54 -79 -122 -79 -206c0 -294 179 -360 350 -379c-22 -20 -42 -54 -49 -103c-44 -20 -156 -54 -223 64c-42 73 -118 79 -118 79c-75 1 -5 -47 -5 -47c50 -23 85 -112 85 -112c45 -137 259 -91 259 -91
 c0 -64 1 -124 1 -143c0 -20 -14 -44 -53 -37c-305 102 -525 390 -525 729c0 424 344 768 768 768zM291 305c-2 -4 -8 -5 -13 -2c-6 3 -9 8 -7 12c2 3 7 4 13 2c6 -3 9 -8 7 -12zM322 271c-4 -4 -11 -2 -16 3c-5 6 -6 13 -2 16c4 4 11 2 16 -3c5 -6 6 -13 2 -16zM352 226
 c-4 -3 -12 0 -17 7s-5 15 0 18c5 4 13 1 17 -6c5 -7 5 -15 0 -19zM394 184c-4 -5 -13 -4 -20 3c-7 6 -9 15 -4 19c4 5 13 4 20 -3c6 -6 8 -15 4 -19zM451 159c-2 -6 -11 -9 -19 -6c-9 2 -15 9 -13 15s11 9 19 7c9 -3 15 -10 13 -16zM514 154c0 -6 -7 -11 -16 -11
 c-10 -1 -17 4 -17 11c0 6 7 11 16 11c9 1 17 -4 17 -11zM572 164c1 -6 -5 -12 -14 -14s-17 2 -18 8c-1 7 5 13 14 15c9 1 17 -3 18 -9z" />
-    <glyph glyph-name="google" unicode="&#xf104;" horiz-adv-x="1505" 
+    <glyph glyph-name="google" unicode="&#xf110;" horiz-adv-x="1505" 
 d="M768 750h725c7 -39 12 -77 12 -128c0 -438 -294 -750 -737 -750c-425 0 -768 343 -768 768s343 768 768 768c207 0 381 -76 515 -201l-209 -201c-57 55 -157 119 -306 119c-262 0 -476 -217 -476 -485s214 -485 476 -485c304 0 418 218 436 331h-436v264z" />
-    <glyph glyph-name="question-circle" unicode="&#xf105;" 
+    <glyph glyph-name="history" unicode="&#xf111;" 
+d="M1536 640c0 -423 -345 -768 -768 -768c-229 0 -445 101 -591 277c-10 13 -9 32 2 43l137 138c7 6 16 9 25 9c9 -1 18 -5 23 -12c98 -127 245 -199 404 -199c282 0 512 230 512 512s-230 512 -512 512c-131 0 -255 -50 -348 -137l137 -138c19 -18 24 -46 14 -69
+c-10 -24 -33 -40 -59 -40h-448c-35 0 -64 29 -64 64v448c0 26 16 49 40 59c23 10 51 5 69 -14l130 -129c141 133 332 212 529 212c423 0 768 -345 768 -768zM896 928v-448c0 -18 -14 -32 -32 -32h-320c-18 0 -32 14 -32 32v64c0 18 14 32 32 32h224v352c0 18 14 32 32 32h64
+c18 0 32 -14 32 -32z" />
+    <glyph glyph-name="link" unicode="&#xf112;" horiz-adv-x="1632" 
+d="M1440 320c0 26 -10 50 -28 68l-208 208c-18 18 -43 28 -68 28c-29 0 -52 -11 -72 -32c33 -33 72 -61 72 -112c0 -53 -43 -96 -96 -96c-51 0 -79 39 -112 72c-21 -20 -33 -43 -33 -73c0 -25 10 -50 28 -68l206 -207c18 -18 43 -27 68 -27s50 9 68 26l147 146
+c18 18 28 42 28 67zM737 1025c0 25 -10 50 -28 68l-206 207c-18 18 -43 28 -68 28s-50 -10 -68 -27l-147 -146c-18 -18 -28 -42 -28 -67c0 -26 10 -50 28 -68l208 -208c18 -18 43 -27 68 -27c29 0 52 10 72 31c-33 33 -72 61 -72 112c0 53 43 96 96 96c51 0 79 -39 112 -72
+c21 20 33 43 33 73zM1632 320c0 -76 -31 -150 -85 -203l-147 -146c-54 -54 -127 -83 -203 -83c-77 0 -150 30 -204 85l-206 207c-54 54 -83 127 -83 203c0 79 32 154 88 209l-88 88c-55 -56 -129 -88 -208 -88c-76 0 -150 30 -204 84l-208 208c-55 55 -84 127 -84 204
+c0 76 31 150 85 203l147 146c54 54 127 83 203 83c77 0 150 -30 204 -85l206 -207c54 -54 83 -127 83 -203c0 -79 -32 -154 -88 -209l88 -88c55 56 129 88 208 88c76 0 150 -30 204 -84l208 -208c55 -55 84 -127 84 -204z" />
+    <glyph glyph-name="pencil-square-o" unicode="&#xf113;" horiz-adv-x="1784" 
+d="M888 352l116 116l-152 152l-116 -116v-56h96v-96h56zM1328 1072c-9 9 -24 8 -33 -1l-350 -350c-9 -9 -10 -24 -1 -33s24 -8 33 1l350 350c9 9 10 24 1 33zM1408 478v-190c0 -159 -129 -288 -288 -288h-832c-159 0 -288 129 -288 288v832c0 159 129 288 288 288h832
+c40 0 80 -8 117 -25c9 -4 16 -13 18 -23c2 -11 -1 -21 -9 -29l-49 -49c-9 -9 -21 -12 -32 -8c-15 4 -30 6 -45 6h-832c-88 0 -160 -72 -160 -160v-832c0 -88 72 -160 160 -160h832c88 0 160 72 160 160v126c0 8 3 16 9 22l64 64c10 10 23 12 35 7s20 -16 20 -29zM1312 1216
+l288 -288l-672 -672h-288v288zM1756 1084l-92 -92l-288 288l92 92c37 37 99 37 136 0l152 -152c37 -37 37 -99 0 -136z" />
+    <glyph glyph-name="question-circle" unicode="&#xf114;" 
 d="M896 160v192c0 18 -14 32 -32 32h-192c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h192c18 0 32 14 32 32zM1152 832c0 183 -192 320 -364 320c-163 0 -285 -70 -371 -213c-9 -14 -5 -32 8 -42l132 -100c5 -4 12 -6 19 -6c9 0 19 4 25 12c47 60 67 78 86 92
 c17 12 50 24 86 24c64 0 123 -41 123 -85c0 -52 -27 -78 -88 -106c-71 -32 -168 -115 -168 -212v-36c0 -18 14 -32 32 -32h192c18 0 32 14 32 32c0 23 29 72 76 99c76 43 180 101 180 253zM1536 640c0 -424 -344 -768 -768 -768s-768 344 -768 768s344 768 768 768
 s768 -344 768 -768z" />
-    <glyph glyph-name="sign-in" unicode="&#xf106;" 
+    <glyph glyph-name="quote-left" unicode="&#xf115;" horiz-adv-x="1664" 
+d="M768 576v-384c0 -106 -86 -192 -192 -192h-384c-106 0 -192 86 -192 192v704c0 282 230 512 512 512h64c35 0 64 -29 64 -64v-128c0 -35 -29 -64 -64 -64h-64c-141 0 -256 -115 -256 -256v-32c0 -53 43 -96 96 -96h224c106 0 192 -86 192 -192zM1664 576v-384
+c0 -106 -86 -192 -192 -192h-384c-106 0 -192 86 -192 192v704c0 282 230 512 512 512h64c35 0 64 -29 64 -64v-128c0 -35 -29 -64 -64 -64h-64c-141 0 -256 -115 -256 -256v-32c0 -53 43 -96 96 -96h224c106 0 192 -86 192 -192z" />
+    <glyph glyph-name="reply" unicode="&#xf116;" horiz-adv-x="1792" 
+d="M1792 416c0 -140 -70 -323 -127 -451c-11 -23 -22 -55 -37 -76c-7 -10 -14 -17 -28 -17c-20 0 -32 16 -32 35c0 16 4 34 5 50c3 41 5 82 5 123c0 477 -283 560 -714 560h-224v-256c0 -35 -29 -64 -64 -64c-17 0 -33 7 -45 19l-512 512c-12 12 -19 28 -19 45s7 33 19 45
+l512 512c12 12 28 19 45 19c35 0 64 -29 64 -64v-256h224c328 0 736 -58 875 -403c42 -106 53 -221 53 -333z" />
+    <glyph glyph-name="rss" unicode="&#xf117;" horiz-adv-x="1408" 
+d="M384 192c0 -106 -86 -192 -192 -192s-192 86 -192 192s86 192 192 192s192 -86 192 -192zM896 69c1 -18 -5 -35 -17 -48c-12 -14 -29 -21 -47 -21h-135c-33 0 -60 25 -63 58c-29 305 -271 547 -576 576c-33 3 -58 30 -58 63v135c0 18 7 35 21 47c11 11 27 17 43 17h5
+c213 -17 414 -110 565 -262c152 -151 245 -352 262 -565zM1408 67c1 -17 -5 -34 -18 -47c-12 -13 -28 -20 -46 -20h-143c-34 0 -62 26 -64 60c-33 581 -496 1044 -1077 1078c-34 2 -60 30 -60 63v143c0 18 7 34 20 46c12 12 28 18 44 18h3c350 -18 679 -165 927 -414
+c249 -248 396 -577 414 -927z" />
+    <glyph glyph-name="search" unicode="&#xf118;" horiz-adv-x="1664" 
+d="M1152 704c0 247 -201 448 -448 448s-448 -201 -448 -448s201 -448 448 -448s448 201 448 448zM1664 -128c0 -70 -58 -128 -128 -128c-34 0 -67 14 -90 38l-343 342c-117 -81 -257 -124 -399 -124c-389 0 -704 315 -704 704s315 704 704 704s704 -315 704 -704
+c0 -142 -43 -282 -124 -399l343 -343c23 -23 37 -56 37 -90z" />
+    <glyph glyph-name="share-alt" unicode="&#xf119;" 
+d="M1216 512c177 0 320 -143 320 -320s-143 -320 -320 -320s-320 143 -320 320c0 11 1 23 2 34l-360 180c-57 -53 -134 -86 -218 -86c-177 0 -320 143 -320 320s143 320 320 320c84 0 161 -33 218 -86l360 180c-1 11 -2 23 -2 34c0 177 143 320 320 320s320 -143 320 -320
+s-143 -320 -320 -320c-84 0 -161 33 -218 86l-360 -180c1 -11 2 -23 2 -34s-1 -23 -2 -34l360 -180c57 53 134 86 218 86z" />
+    <glyph glyph-name="sign-in" unicode="&#xf11a;" 
 d="M1184 640c0 -17 -7 -33 -19 -45l-544 -544c-12 -12 -28 -19 -45 -19c-35 0 -64 29 -64 64v288h-448c-35 0 -64 29 -64 64v384c0 35 29 64 64 64h448v288c0 35 29 64 64 64c17 0 33 -7 45 -19l544 -544c12 -12 19 -28 19 -45zM1536 992v-704c0 -159 -129 -288 -288 -288
 h-320c-17 0 -32 15 -32 32c0 28 -13 96 32 96h320c88 0 160 72 160 160v704c0 88 -72 160 -160 160h-288c-25 0 -64 -5 -64 32c0 28 -13 96 32 96h320c159 0 288 -129 288 -288z" />
-    <glyph glyph-name="sign-out" unicode="&#xf107;" horiz-adv-x="1568" 
+    <glyph glyph-name="sign-out" unicode="&#xf11b;" horiz-adv-x="1568" 
 d="M640 96c0 -28 13 -96 -32 -96h-320c-159 0 -288 129 -288 288v704c0 159 129 288 288 288h320c17 0 32 -15 32 -32c0 -28 13 -96 -32 -96h-320c-88 0 -160 -72 -160 -160v-704c0 -88 72 -160 160 -160h288c25 0 64 5 64 -32zM1568 640c0 -17 -7 -33 -19 -45l-544 -544
 c-12 -12 -28 -19 -45 -19c-35 0 -64 29 -64 64v288h-448c-35 0 -64 29 -64 64v384c0 35 29 64 64 64h448v288c0 35 29 64 64 64c17 0 33 -7 45 -19l544 -544c12 -12 19 -28 19 -45z" />
-    <glyph glyph-name="times" unicode="&#xf108;" horiz-adv-x="1188" 
+    <glyph glyph-name="sliders" unicode="&#xf11c;" 
+d="M352 128v-128h-352v128h352zM704 256c35 0 64 -29 64 -64v-256c0 -35 -29 -64 -64 -64h-256c-35 0 -64 29 -64 64v256c0 35 29 64 64 64h256zM864 640v-128h-864v128h864zM224 1152v-128h-224v128h224zM1536 128v-128h-736v128h736zM576 1280c35 0 64 -29 64 -64v-256
+c0 -35 -29 -64 -64 -64h-256c-35 0 -64 29 -64 64v256c0 35 29 64 64 64h256zM1216 768c35 0 64 -29 64 -64v-256c0 -35 -29 -64 -64 -64h-256c-35 0 -64 29 -64 64v256c0 35 29 64 64 64h256zM1536 640v-128h-224v128h224zM1536 1152v-128h-864v128h864z" />
+    <glyph glyph-name="sort" unicode="&#xf11d;" horiz-adv-x="1024" 
+d="M1024 448c0 -17 -7 -33 -19 -45l-448 -448c-12 -12 -28 -19 -45 -19s-33 7 -45 19l-448 448c-12 12 -19 28 -19 45c0 35 29 64 64 64h896c35 0 64 -29 64 -64zM1024 832c0 -35 -29 -64 -64 -64h-896c-35 0 -64 29 -64 64c0 17 7 33 19 45l448 448c12 12 28 19 45 19
+s33 -7 45 -19l448 -448c12 -12 19 -28 19 -45z" />
+    <glyph glyph-name="sort-asc" unicode="&#xf11e;" horiz-adv-x="1024" 
+d="M1024 832c0 -35 -29 -64 -64 -64h-896c-35 0 -64 29 -64 64c0 17 7 33 19 45l448 448c12 12 28 19 45 19s33 -7 45 -19l448 -448c12 -12 19 -28 19 -45z" />
+    <glyph glyph-name="sort-desc" unicode="&#xf11f;" horiz-adv-x="1024" 
+d="M1024 448c0 -17 -7 -33 -19 -45l-448 -448c-12 -12 -28 -19 -45 -19s-33 7 -45 19l-448 448c-12 12 -19 28 -19 45c0 35 29 64 64 64h896c35 0 64 -29 64 -64z" />
+    <glyph glyph-name="star" unicode="&#xf120;" horiz-adv-x="1664" 
+d="M1664 889c0 -18 -13 -35 -26 -48l-363 -354l86 -500c1 -7 1 -13 1 -20c0 -26 -12 -50 -41 -50c-14 0 -28 5 -40 12l-449 236l-449 -236c-13 -7 -26 -12 -40 -12c-29 0 -42 24 -42 50c0 7 1 13 2 20l86 500l-364 354c-12 13 -25 30 -25 48c0 30 31 42 56 46l502 73
+l225 455c9 19 26 41 49 41s40 -22 49 -41l225 -455l502 -73c24 -4 56 -16 56 -46z" />
+    <glyph glyph-name="star-o" unicode="&#xf121;" horiz-adv-x="1664" 
+d="M1137 532l306 297l-422 62l-189 382l-189 -382l-422 -62l306 -297l-73 -421l378 199l377 -199zM1664 889c0 -18 -13 -35 -26 -48l-363 -354l86 -500c1 -7 1 -13 1 -20c0 -27 -12 -50 -41 -50c-14 0 -28 5 -40 12l-449 236l-449 -236c-13 -7 -26 -12 -40 -12
+c-29 0 -42 24 -42 50c0 7 1 13 2 20l86 500l-364 354c-12 13 -25 30 -25 48c0 30 31 42 56 46l502 73l225 455c9 19 26 41 49 41s40 -22 49 -41l225 -455l502 -73c24 -4 56 -16 56 -46z" />
+    <glyph glyph-name="table" unicode="&#xf122;" horiz-adv-x="1664" 
+d="M512 160v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM512 544v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM1024 160v192c0 18 -14 32 -32 32h-320
+c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM512 928v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM1024 544v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192
+c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM1536 160v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM1024 928v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32z
+M1536 544v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM1536 928v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM1664 1248v-1088c0 -88 -72 -160 -160 -160
+h-1344c-88 0 -160 72 -160 160v1088c0 88 72 160 160 160h1344c88 0 160 -72 160 -160z" />
+    <glyph glyph-name="times" unicode="&#xf123;" horiz-adv-x="1188" 
 d="M1188 214c0 -25 -10 -50 -28 -68l-136 -136c-18 -18 -43 -28 -68 -28s-50 10 -68 28l-294 294l-294 -294c-18 -18 -43 -28 -68 -28s-50 10 -68 28l-136 136c-18 18 -28 43 -28 68s10 50 28 68l294 294l-294 294c-18 18 -28 43 -28 68s10 50 28 68l136 136
 c18 18 43 28 68 28s50 -10 68 -28l294 -294l294 294c18 18 43 28 68 28s50 -10 68 -28l136 -136c18 -18 28 -43 28 -68s-10 -50 -28 -68l-294 -294l294 -294c18 -18 28 -43 28 -68z" />
-    <glyph glyph-name="trash-o" unicode="&#xf109;" horiz-adv-x="1408" 
+    <glyph glyph-name="trash" unicode="&#xf124;" horiz-adv-x="1408" 
+d="M512 160v704c0 18 -14 32 -32 32h-64c-18 0 -32 -14 -32 -32v-704c0 -18 14 -32 32 -32h64c18 0 32 14 32 32zM768 160v704c0 18 -14 32 -32 32h-64c-18 0 -32 -14 -32 -32v-704c0 -18 14 -32 32 -32h64c18 0 32 14 32 32zM1024 160v704c0 18 -14 32 -32 32h-64
+c-18 0 -32 -14 -32 -32v-704c0 -18 14 -32 32 -32h64c18 0 32 14 32 32zM480 1152h448l-48 117c-3 4 -12 10 -17 11h-317c-6 -1 -14 -7 -17 -11zM1408 1120v-64c0 -18 -14 -32 -32 -32h-96v-948c0 -110 -72 -204 -160 -204h-832c-88 0 -160 90 -160 200v952h-96
+c-18 0 -32 14 -32 32v64c0 18 14 32 32 32h309l70 167c20 49 80 89 133 89h320c53 0 113 -40 133 -89l70 -167h309c18 0 32 -14 32 -32z" />
+    <glyph glyph-name="trash-o" unicode="&#xf125;" horiz-adv-x="1408" 
 d="M512 800v-576c0 -18 -14 -32 -32 -32h-64c-18 0 -32 14 -32 32v576c0 18 14 32 32 32h64c18 0 32 -14 32 -32zM768 800v-576c0 -18 -14 -32 -32 -32h-64c-18 0 -32 14 -32 32v576c0 18 14 32 32 32h64c18 0 32 -14 32 -32zM1024 800v-576c0 -18 -14 -32 -32 -32h-64
 c-18 0 -32 14 -32 32v576c0 18 14 32 32 32h64c18 0 32 -14 32 -32zM1152 76v948h-896v-948c0 -48 27 -76 32 -76h832c5 0 32 28 32 76zM480 1152h448l-48 117c-3 4 -12 10 -17 11h-317c-6 -1 -14 -7 -17 -11zM1408 1120v-64c0 -18 -14 -32 -32 -32h-96v-948
 c0 -110 -72 -204 -160 -204h-832c-88 0 -160 90 -160 200v952h-96c-18 0 -32 14 -32 32v64c0 18 14 32 32 32h309l70 167c20 49 80 89 133 89h320c53 0 113 -40 133 -89l70 -167h309c18 0 32 -14 32 -32z" />
-    <glyph glyph-name="user-circle-o" unicode="&#xf10a;" horiz-adv-x="1792" 
+    <glyph glyph-name="user-circle-o" unicode="&#xf126;" horiz-adv-x="1792" 
 d="M896 1536c495 0 896 -401 896 -896c0 -492 -399 -896 -896 -896c-496 0 -896 403 -896 896c0 495 401 896 896 896zM1515 185c93 128 149 285 149 455c0 423 -345 768 -768 768s-768 -345 -768 -768c0 -170 56 -327 149 -455c36 179 123 327 306 327
 c81 -79 191 -128 313 -128s232 49 313 128c183 0 270 -148 306 -327zM1280 832c0 -212 -172 -384 -384 -384s-384 172 -384 384s172 384 384 384s384 -172 384 -384z" />
-    <glyph glyph-name="user-plus" unicode="&#xf10b;" horiz-adv-x="2048" 
+    <glyph glyph-name="user-plus" unicode="&#xf127;" horiz-adv-x="2048" 
 d="M704 640c-212 0 -384 172 -384 384s172 384 384 384s384 -172 384 -384s-172 -384 -384 -384zM1664 512h352c17 0 32 -15 32 -32v-192c0 -17 -15 -32 -32 -32h-352v-352c0 -17 -15 -32 -32 -32h-192c-17 0 -32 15 -32 32v352h-352c-17 0 -32 15 -32 32v192
 c0 17 15 32 32 32h352v352c0 17 15 32 32 32h192c17 0 32 -15 32 -32v-352zM928 288c0 -70 58 -128 128 -128h256v-238c-49 -36 -111 -50 -171 -50h-874c-160 0 -267 96 -267 259c0 226 53 573 346 573c16 0 27 -7 39 -17c98 -75 193 -122 319 -122s221 47 319 122
 c12 10 23 17 39 17c85 0 160 -32 217 -96h-223c-70 0 -128 -58 -128 -128v-192z" />
+    <glyph glyph-name="wrench" unicode="&#xf128;" horiz-adv-x="1641" 
+d="M363 64c0 35 -29 64 -64 64s-64 -29 -64 -64s29 -64 64 -64s64 29 64 64zM1007 484l-682 -682c-23 -23 -56 -37 -90 -37s-67 14 -91 37l-106 108c-24 23 -38 56 -38 90s14 67 38 91l681 681c52 -131 157 -236 288 -288zM1641 919c0 -33 -12 -74 -23 -106
+c-63 -178 -234 -301 -423 -301c-247 0 -448 201 -448 448s201 448 448 448c73 0 168 -22 229 -63c10 -7 16 -16 16 -28c0 -11 -7 -22 -16 -28l-293 -169v-224l193 -107c33 19 265 165 285 165s32 -15 32 -35z" />
   </font>
 </defs></svg>

public/images/logo.inkscape.svg

@@ -0,0 +1,270 @@
+<?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="1872.0001"
+   height="1655.9703"
+   viewBox="0 0 1872.0002 1655.9703"
+   id="svg5504"
+   version="1.1"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   sodipodi:docname="logo.svg"
+   style="enable-background:new">
+  <defs
+     id="defs5506">
+    <clipPath
+       id="a">
+      <path
+         id="path3718"
+         d="M 0,195.911 H 208.792 V 0 H 0 Z"
+         inkscape:connector-curvature="0" />
+    </clipPath>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter895">
+      <feBlend
+         inkscape:collect="always"
+         mode="darken"
+         in2="BackgroundImage"
+         id="feBlend897" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="1397.6023"
+     inkscape:cy="1097.2416"
+     inkscape:document-units="px"
+     inkscape:current-layer="g850"
+     showgrid="true"
+     units="px"
+     inkscape:showpageshadow="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1139"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:snap-global="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5512"
+       spacingx="64.000003"
+       spacingy="64"
+       dotted="false"
+       empspacing="2"
+       color="#3cd81a"
+       opacity="0.09411765"
+       empcolor="#3cd81a"
+       empopacity="0.26666667"
+       originx="-216.00005"
+       originy="-87.743039" />
+    <sodipodi:guide
+       position="-216.00002,40.256957"
+       orientation="0,1"
+       id="guide5514"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="1320.0001,-87.743031"
+       orientation="1,0"
+       id="guide5516"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="1192.0001,1576.2569"
+       orientation="0,1"
+       id="guide5518"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="1064.0001,-87.743031"
+       orientation="1,0"
+       id="guide5520"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="1576.0001,-87.743031"
+       orientation="1,0"
+       id="guide5522"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="1832.0001,-87.743031"
+       orientation="1,0"
+       id="guide5713"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-216.00002,168.25695"
+       orientation="0,1"
+       id="guide5715"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="424.00001,-87.743031"
+       orientation="1,0"
+       id="guide6919"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="2428.5715,1445.7143"
+       orientation="0,1"
+       id="guide10169"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="936.00002,808.25697"
+       orientation="0,1"
+       id="guide10171"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="2465.7143,1705.7143"
+       orientation="0,1"
+       id="guide3346"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-216.00002,-87.743031"
+       orientation="0,1"
+       id="guide3348"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-216.00002,-87.743031"
+       orientation="1,0"
+       id="guide3350"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="2088.0003,-87.743031"
+       orientation="1,0"
+       id="guide88"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5509">
+    <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>
+  <path
+     sodipodi:nodetypes="ccccccc"
+     inkscape:connector-curvature="0"
+     id="path1765-3"
+     d="m 45.428522,106.46434 c 256.000008,-63.999995 831.999988,-63.999995 895.999988,128 64.00009,-191.999995 616.05789,-195.041295 896.00009,-128 V 1514.4641 c -256,-128 -768,-64 -896.00009,128.0001 -128,-192.0001 -639.99998,-256.0001 -895.999988,-128.0001 z"
+     style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:80;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter895)"
+     inkscape:label="backdrop1" />
+  <g
+     id="g850"
+     style="stroke:#302200;stroke-opacity:1"
+     inkscape:label="book"
+     transform="translate(-10,-10.02369)">
+    <g
+       id="g912"
+       style="stroke:#0075bf;stroke-width:50;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       inkscape:label="grid">
+      <path
+         inkscape:connector-curvature="0"
+         id="path1821-5"
+         d="m 1516.8573,1113.737 c 0,-767.99995 0,-767.99995 0,-767.99995"
+         style="fill:none;fill-rule:evenodd;stroke:#0075bf;stroke-width:50;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+      <path
+         style="fill:none;fill-rule:evenodd;stroke:#0075bf;stroke-width:50;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         d="m 1842,921.73705 c -255.9999,-127.99995 -831.9999,-64 -895.99991,127.99995"
+         id="path1786-6"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cc" />
+      <path
+         sodipodi:nodetypes="cc"
+         inkscape:connector-curvature="0"
+         id="path1786"
+         d="m 1842,665.73705 c -255.9999,-127.99995 -831.9999,-64 -895.99991,128"
+         style="fill:none;fill-rule:evenodd;stroke:#0075bf;stroke-width:50;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+      <path
+         sodipodi:nodetypes="cc"
+         inkscape:connector-curvature="0"
+         id="path1786-3"
+         d="m 1842,409.73705 c -255.9999,-127.99995 -831.9999,-64 -895.99991,128"
+         style="fill:none;fill-rule:evenodd;stroke:#0075bf;stroke-width:50;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path1821"
+         d="m 1232.2858,1126.3084 c 0,-767.99992 0,-767.99992 0,-767.99992"
+         style="fill:none;fill-rule:evenodd;stroke:#0075bf;stroke-width:50;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+      <path
+         sodipodi:nodetypes="cc"
+         inkscape:connector-curvature="0"
+         id="path1786-5"
+         d="m 1842,1177.737 c -255.9999,-127.9999 -831.9999,-64 -895.99991,128"
+         style="fill:none;fill-rule:evenodd;stroke:#0075bf;stroke-width:50;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+    </g>
+    <g
+       id="g958"
+       inkscape:label="outlines"
+       style="stroke-width:90;stroke-miterlimit:4;stroke-dasharray:none;stroke:#545454;stroke-opacity:1">
+      <path
+         style="fill:none;fill-rule:evenodd;stroke:#545454;stroke-width:90;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 946.00009,1625.737 c 270.56831,-41.9153 576.00001,-128 832.00001,0"
+         id="path1844"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="fill:none;fill-rule:evenodd;stroke:#545454;stroke-width:90;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 1778.0001,1625.737 v -128"
+         id="path1846"
+         inkscape:connector-curvature="0" />
+      <path
+         style="fill:none;fill-rule:evenodd;stroke:#545454;stroke-width:90;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 946.00009,1625.737 c -270.56837,-41.9154 -576.00007,-128 -832.00006,0"
+         id="path1844-2"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="fill:none;fill-rule:evenodd;stroke:#545454;stroke-width:90;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 114.00003,1625.737 v -128"
+         id="path1846-9"
+         inkscape:connector-curvature="0" />
+      <path
+         style="fill:none;fill-rule:evenodd;stroke:#545454;stroke-width:90;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 946.00009,217.7371 c 0,1407.9999 0,1407.9999 0,1407.9999"
+         id="path1769"
+         inkscape:connector-curvature="0" />
+      <path
+         style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#545454;stroke-width:90;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+         d="m 50,89.737053 c 256.00001,-64 832.00009,-64 896.00009,128.000047 C 1010.0001,25.737053 1562.0579,22.695816 1842.0001,89.737103 V 1497.737 c -256,-128 -768,-64 -896.00001,128 -128.0001,-192 -640.00008,-256 -896.00009,-128 z"
+         id="path1765"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccccc" />
+    </g>
+    <g
+       aria-label="{}"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:666.66668701px;line-height:25px;font-family:'IBM Plex';-inkscape-font-specification:'IBM Plex';letter-spacing:0px;word-spacing:0px;fill:#0075bf;fill-opacity:1;stroke:none;stroke-width:80;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="text1870"
+       transform="translate(-206.00001,-38.262947)"
+       inkscape:label="braces">
+      <path
+         d="m 630.73519,457.51817 c -38.70234,3.83081 -79.80496,7.29488 -114.1543,30.1565 -25.33806,17.65798 -34.16896,49.77456 -36.9375,77.94316 -5.83539,52.61078 4.86375,105.06143 -7.68164,157.63497 -5.88661,17.48896 -22.54505,30.74027 -40.25186,33.66114 -18.16392,4.87657 -36.8065,4.73461 -55.05087,7.0026 -0.0137,20.82543 -0.0274,41.65086 -0.041,62.47628 26.50344,-1.76087 55.56865,-8.16953 79.33984,4.18079 16.72017,10.18693 20.3316,31.85792 21.24897,50.74602 3.65353,54.80872 -6.49313,112.57065 10.89752,164.39307 8.22265,22.9252 30.11208,39.0963 54.41017,42.0712 34.28617,6.9922 70.10953,1.9255 105.45506,-0.3008 5.11071,-5.432 0.77113,-12.75 1.99408,-19.1297 -0.0676,-14.7142 0.4287,-29.4594 -0.82025,-44.0016 -26.95565,0.9957 -56.35728,8.9857 -80.95703,-2.9342 -13.98146,-11.7357 -12.88217,-32.8596 -13.98633,-50.09398 -2.58631,-49.92481 6.10771,-102.11261 -9.11914,-149.45663 -7.04556,-17.46249 -20.87804,-31.24412 -38.5918,-37.96317 24.83704,-13.63268 41.98546,-40.69827 44.26172,-67.9957 8.47672,-50.94494 -1.0888,-101.34749 5.35352,-152.34495 2.18976,-12.08024 6.67482,-26.29569 18.97851,-32.16024 17.62984,-9.52004 37.59613,-8.7406 56.3086,-11.40378 6.2864,-0.54271 12.57318,-1.05545 18.85937,-1.68294 0.013,-20.84556 0.026,-41.6911 0.0391,-62.53667 -6.51824,0.57493 -13.03646,1.15586 -19.55469,1.73879 z"
+         id="path1874"
+         inkscape:connector-curvature="0"
+         style="fill:#0075bf;fill-opacity:1;stroke-width:80;stroke-miterlimit:4;stroke-dasharray:none" />
+      <path
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:666.66668701px;line-height:25px;font-family:'IBM Plex';-inkscape-font-specification:'IBM Plex';letter-spacing:0px;word-spacing:0px;fill:#0075bf;fill-opacity:1;stroke:none;stroke-width:80;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 764.07822,457.42415 c 39.17964,3.1804 80.79414,5.96149 115.40583,27.99572 25.52499,17.0374 34.2059,48.60398 36.77749,76.36746 5.47619,51.84386 -5.79827,103.78646 6.4765,155.48933 5.81912,17.1727 22.58686,29.99493 40.50234,32.60322 18.36242,4.53173 37.25142,4.10204 55.71672,6.05748 -0.1583,20.55753 -0.3176,41.11501 -0.476,61.67253 -26.83736,-1.32654 -56.23175,-7.20137 -80.41792,5.35941 -17.02451,10.3157 -20.863,31.76421 -21.94894,50.42378 -4.15573,54.16092 5.64578,111.02283 -12.40302,162.44922 -8.52074,22.7582 -30.83206,39.0615 -55.47439,42.3753 -34.79505,7.435 -71.04758,2.9899 -106.83955,1.3413 -5.13292,-5.2829 -0.67563,-12.5742 -1.86181,-18.8529 0.19042,-14.526 -0.19025,-29.074 1.19566,-43.4487 27.30193,0.5645 57.02408,7.9947 82.04614,-4.1539 14.26257,-11.802 13.32387,-32.63739 14.58537,-49.6674 3.03399,-49.32322 -5.34196,-100.70511 10.47742,-147.67707 7.28292,-17.34745 21.41152,-31.16678 39.41393,-38.07458 -25.05074,-13.07167 -42.20044,-39.52297 -44.28046,-66.43415 -8.16607,-50.15839 1.94289,-100.06161 -4.16159,-150.30345 -2.11848,-11.89094 -6.54472,-25.854 -18.96165,-31.45204 -17.78284,-9.12383 -38.01821,-8.04427 -56.95469,-10.38258 -6.36461,-0.43806 -12.72982,-0.84658 -19.09349,-1.36836 0.15953,-20.57738 0.31915,-41.15478 0.47857,-61.73216 6.5992,0.46629 13.19836,0.93851 19.79747,1.41268 z"
+         id="path1874-1"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

public/images/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1872" height="1655.97" enable-background="new"><defs><filter id="a" color-interpolation-filters="sRGB"><feBlend mode="darken" in2="BackgroundImage"/></filter></defs><path d="M45.429 106.464c256-64 832-64 896 128 64-192 616.057-195.041 896-128v1408c-256-128-768-64-896 128-128-192-640-256-896-128z" fill="#fff" fill-rule="evenodd" paint-order="stroke fill markers" filter="url(#a)"/><g stroke="#302200"><g stroke="#0075bf" stroke-width="50" stroke-linejoin="round" fill="none"><path d="M1506.857 1103.713v-768M1832 911.713c-256-128-832-64-896 128M1832 655.713c-256-128-832-64-896 128M1832 399.713c-256-128-832-64-896 128M1222.286 1116.285v-768M1832 1167.713c-256-128-832-64-896 128"/></g><g stroke-width="90" stroke="#545454" fill="none"><path d="M936 1615.713c270.568-41.915 576-128 832 0" stroke-linecap="round"/><path d="M1768 1615.713v-128"/><path d="M936 1615.713c-270.568-41.915-576-128-832 0" stroke-linecap="round"/><path d="M104 1615.713v-128M936 207.713v1408"/><path d="M40 79.713c256-64 832-64 896 128 64-192 616.058-195.04 896-128v1408c-256-128-768-64-896 128-128-192-640-256-896-128z" stroke-linecap="square" stroke-linejoin="round" paint-order="stroke fill markers"/></g><g aria-label="{}" style="line-height:25px;-inkscape-font-specification:'IBM Plex'" font-weight="400" font-size="666.667" font-family="IBM Plex" letter-spacing="0" word-spacing="0" fill="#0075bf" stroke="none" stroke-width="80"><path d="M414.735 409.232c-38.702 3.83-79.805 7.294-114.154 30.156-25.338 17.658-34.17 49.775-36.938 77.943-5.835 52.611 4.864 105.062-7.681 157.635-5.887 17.49-22.545 30.74-40.252 33.661-18.164 4.877-36.807 4.735-55.051 7.003l-.041 62.476c26.503-1.76 55.569-8.17 79.34 4.181 16.72 10.187 20.331 31.858 21.249 50.746 3.653 54.809-6.493 112.57 10.897 164.393 8.223 22.925 30.112 39.096 54.41 42.071 34.287 6.992 70.11 1.926 105.456-.3 5.11-5.433.77-12.75 1.994-19.13-.068-14.714.428-29.46-.82-44.002-26.956.996-56.358 8.986-80.958-2.934-13.981-11.736-12.882-32.86-13.986-50.094-2.586-49.925 6.108-102.113-9.12-149.457-7.045-17.462-20.877-31.244-38.59-37.963 24.836-13.632 41.985-40.698 44.26-67.996 8.478-50.944-1.088-101.347 5.354-152.344 2.19-12.08 6.675-26.296 18.979-32.16 17.63-9.52 37.596-8.741 56.308-11.404 6.287-.543 12.574-1.056 18.86-1.683l.039-62.537c-6.518.575-13.037 1.156-19.555 1.739z"/><path style="line-height:25px;-inkscape-font-specification:'IBM Plex'" d="M548.078 409.138c39.18 3.18 80.794 5.961 115.406 27.995 25.525 17.038 34.206 48.604 36.778 76.368 5.476 51.844-5.799 103.786 6.476 155.489 5.82 17.173 22.587 29.995 40.502 32.603 18.363 4.532 37.252 4.102 55.717 6.058l-.476 61.672c-26.837-1.326-56.232-7.201-80.418 5.36-17.024 10.315-20.863 31.764-21.949 50.423-4.156 54.161 5.646 111.023-12.403 162.45-8.52 22.758-30.832 39.061-55.474 42.375-34.795 7.435-71.048 2.99-106.84 1.341-5.133-5.283-.675-12.574-1.862-18.853.19-14.526-.19-29.074 1.196-43.448 27.302.564 57.024 7.994 82.046-4.154 14.263-11.802 13.324-32.638 14.586-49.668 3.034-49.323-5.342-100.705 10.477-147.677 7.283-17.347 21.412-31.166 39.414-38.074-25.05-13.072-42.2-39.523-44.28-66.434-8.167-50.159 1.942-100.062-4.162-150.304-2.119-11.89-6.545-25.854-18.962-31.452-17.783-9.124-38.018-8.044-56.954-10.383-6.365-.438-12.73-.846-19.094-1.368l.479-61.732c6.599.466 13.198.938 19.797 1.413z"/></g></g></svg>

resources/assets/sass/_bst-modules.scss

@@ -10,12 +10,12 @@
 @import "~bootstrap/scss/transitions";
 @import "~bootstrap/scss/dropdown";
 @import "~bootstrap/scss/button-group";
-//@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/input-group";
 @import "~bootstrap/scss/custom-forms";
 //@import "~bootstrap/scss/nav";
 @import "~bootstrap/scss/navbar";
 @import "~bootstrap/scss/card";
-//@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/breadcrumb";
 @import "~bootstrap/scss/pagination";
 @import "~bootstrap/scss/badge";
 //@import "~bootstrap/scss/jumbotron";

resources/assets/sass/app.scss

@@ -7,15 +7,33 @@
 @import "variables";
 @import "bst-modules";
 
+// generic hiding class
+.hidden {
+	display: none !important;
+}
+
+// padding right for icons (must not use space next to it!)
+.fa-pr::before {
+	margin-right: ($spacer*.5);
+}
+
+// button in card header, adjusting margins to not stretch the header
+.card-header .btn {
+	margin-top: -3px;
+	margin-bottom: -10px;
+}
+
 html {
 	overflow-y: scroll;
 }
 
+// help bubble icon
 .form-help {
 	display: inline-block;
 	margin-top: $form-text-margin-top;
 }
 
+// tooltip tweaking
 .tooltip-inner {
 	text-align: left;
 }
@@ -24,6 +42,7 @@ html {
 	box-shadow: 0 2px 5px rgba(black, .3);
 }
 
+// layout tweaks
 .page-navbar {
 	background: white;
 	border-bottom: 1px solid $primary;

resources/views/auth/register.blade.php

@@ -13,12 +13,12 @@
 
                         @php(Widget::setLayout(4, 6))
 
-                        {!! Widget::text('name', 'Name')->required()->autofocus()
+                        {!! Widget::text('name', 'Username')->required()->prepend('@')
                               ->help('This will be part of your vanity URL; only letters, digits and
-                                some symbols are allowed. You can always change this later, and even
+                                some symbols are allowed. You can always change this later.') !!}
-                                set a different Display Name.') !!}
 
-                        {!! Widget::email('email', 'E-Mail Address')->required()->autofocus() !!}
+                        {!! Widget::email('email', 'E-Mail Address')->required()->autofocus()
+                              ->help('Used to login and for password reset e-mails') !!}
                         {!! Widget::password('password', 'Password')->required() !!}
                         {!! Widget::password('password_confirmation', 'Confirm Password')->required() !!}
 

resources/views/form/_help.blade.php

@@ -1,4 +1,4 @@
-<div class="col-md-1 pl-0">
+<div class="col-md-1 {{$mobile ? 'd-inline pl-1 d-md-none':'d-none d-md-block'}} pl-0">
   @if($w->help)
     <i class="fa-question-circle form-help"
        data-toggle="tooltip"

resources/views/form/checkbox.blade.php

@@ -9,7 +9,10 @@
              id="field-{{ $w->name }}"
              {{+$w->value?'checked':''}}
              name="{{ $w->name }}">
-      <label class="custom-control-label" for="field-{{ $w->name }}">{{ $w->label }}</label>
+      <label class="custom-control-label" for="field-{{ $w->name }}">
+        {{ $w->label }}
+      </label>
+      @include('form._help', ['mobile' => true])
     </div>
 
     @if ($errors->has($w->name))
@@ -18,5 +21,5 @@
       </span>
     @endif
   </div>
-  @include('form._help')
+  @include('form._help', ['mobile' => false])
 </div>

resources/views/form/input.blade.php

@@ -3,19 +3,36 @@
 @endphp
 
 <div class="row form-group">
-  <label for="field-{{ $w->name }}" class="col-md-{{$w->labelCols}} col-form-label text-md-right">{{ $w->label }}</label>
+  <label for="field-{{ $w->name }}" class="col-md-{{$w->labelCols}} col-form-label text-md-right">
+    {{ $w->label }}
+    @include('form._help', ['mobile' => true])
+  </label>
   <div class="col-md-{{$w->fieldCols}}">
+    <div class="input-group">
+      @if($w->prepend)
+        <div class="input-group-prepend">
+          <span class="input-group-text">{{$w->prepend}}</span>
+        </div>
+      @endif
+
       <input id="field-{{ $w->name }}"
              name="{{ $w->name }}"
              class="form-control{{ $errors->has($w->name) ? ' is-invalid' : '' }}"
              value="{{ $w->value }}"
              {!! $w->attributes !!}>
 
+      @if($w->append)
+        <div class="input-group-append">
+          <span class="input-group-text">{{$w->append}}</span>
+        </div>
+      @endif
+
       @if ($errors->has($w->name))
         <span class="invalid-feedback" role="alert">
           <strong>{{ $errors->first($w->name) }}</strong>
         </span>
       @endif
     </div>
-  @include('form._help')
+  </div>
+  @include('form._help', ['mobile' => false])
 </div>

resources/views/form/textarea.blade.php

@@ -3,7 +3,10 @@
 @endphp
 
 <div class="row form-group">
-  <label for="field-{{ $w->name }}" class="col-md-{{$w->labelCols}} col-form-label text-md-right">{{ $w->label }}</label>
+  <label for="field-{{ $w->name }}" class="col-md-{{$w->labelCols}} col-form-label text-md-right">
+    {{ $w->label }}
+    @include('form._help', ['mobile' => true])
+  </label>
   <div class="col-md-{{$w->fieldCols}}">
     <textarea id="field-{{ $w->name }}"
               name="{{ $w->name }}"
@@ -16,5 +19,5 @@
       </span>
     @endif
   </div>
-  @include('form._help')
+  @include('form._help', ['mobile' => false])
 </div>

resources/views/home.blade.php

@@ -1,52 +0,0 @@
-@extends('layouts.app')
-
-@section('content')
-  <div class="container">
-
-    <div class="row justify-content-center">
-
-      {{-- Dash card --}}
-      <div class="col-md-8">
-        <div class="card">
-          <div class="card-header">Dashboard</div>
-
-          <div class="card-body">
-            @if (session('status'))
-              <div class="alert alert-success" role="alert">
-                {{ session('status') }}
-              </div>
-            @endif
-
-            <p>You are logged in!</p>
-
-            <p>blabla dashboard things ...</p>
-          </div>
-        </div>
-      </div>
-
-      {{-- Table list card --}}
-      <div class="col-md-4">
-        <div class="card">
-          <div class="card-header">
-            <span class="d-inline-block">Your Tables</span>
-            <a href="{{route('table.create')}}" class="btn btn-sm btn-outline-light float-right"
-               style="margin-top:-2px; margin-bottom:-2px;">New</a>
-          </div>
-
-          <div class="list-group list-group-flush">
-            @if(count($tables) == 0)
-              <span class="list-group-item">No tables yet.</span>
-            @else
-              @foreach($tables as $table)
-                <a class="list-group-item list-group-item-action" href="{{route('table.view', ['user' => Auth::user()->name, 'table' => $table->name])}}">{{
-                  $table->title
-                }}</a>
-              @endforeach
-              {{ $tables->links() }}
-            @endif
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-@endsection

resources/views/layouts/footer.blade.php

@@ -1,3 +1,5 @@
+{{-- Global footer --}}
+
 <footer class="page-footer text-muted mt-2">
   <div class="container py-2 py-md-4">
     <ul class="d-flex p-0">

resources/views/layouts/main-nav.blade.php

@@ -1,7 +1,10 @@
+{{-- Global navbar --}}
+
 <nav class="navbar navbar-expand-md navbar-light page-navbar">
   <div class="container">
     <a class="navbar-brand" href="{{ url('/') }}">
-      {{ config('app.name', 'Laravel') }}
+      <img src="/images/logo.svg" alt="Logo" height="32px" style="margin: -10px 0" class="mr-2">{{--
+      --}}datatable.directory
     </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
@@ -17,7 +20,7 @@
       <!-- Right Side Of Navbar -->
       <ul class="navbar-nav ml-auto">
         <!-- Authentication Links -->
-        @guest
+        @guest()
           <li class="nav-item">
             <a class="nav-link" href="{{ route('login') }}">
               <i class="fa-sign-in pr-1"></i>
@@ -34,15 +37,15 @@
           <li class="nav-item dropdown">
             <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false" v-pre>
-              <i class="fa-user-circle-o pr-1"></i>
+              <i class="fa-user-circle-o fa-pr"></i>{{--
-              {{ Auth::user()->name }} <span class="caret"></span>
+              --}}{{ user()->title }} <span class="caret"></span>
             </a>
 
             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
               <a class="dropdown-item" href="{{ route('logout') }}"
                  onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
-                <i class="fa-sign-out pr-1"></i>
+                <i class="fa-sign-out fa-pr"></i>{{--
-                {{ __('Logout') }}
+                --}}{{ __('Logout') }}
               </a>
 
               <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@@ -50,7 +53,7 @@
               </form>
             </div>
           </li>
-        @endguest
+        @endif
       </ul>
     </div>
   </div>

resources/views/table/create.blade.php

@@ -1,24 +1,33 @@
+{{-- New table form --}}
+
 @extends('layouts.app')
 
 @section('content')
   <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-md-8">
+        <div class="row">
+          <h2 class="col-md-8 offset-md-3">New Table</h2>
+        </div>
+      </div>
+    </div>
+
     <form method="POST" action="{{route('table.storeNew')}}" class="row justify-content-center"
           aria-label="New Table">
 
-      <h2>New Table</h2>
-
       @csrf
       <div class="col-md-8">
+        @php(Widget::setLayout(3, 8))
+
         {!! Widget::text('title', 'Title')->autoAlias('name', '-')
               ->help('Unique among your tables') !!}
 
-        {!! Widget::text('name', 'Name')->value('molluscs-'.uniqid())
+        {!! Widget::text('name', 'Name')->value('')->prepend(user()->handle.' /')
               ->help('Unique among your tables, and part of the URL; only letters, digits and
                       some symbols are allowed.') !!}
 
         {!! Widget::textarea('description', 'Description')->height('8em')
-              ->help('Description what data is in the table. Please use the dedicated
+              ->help('Description of the table. URLs in a full format will be clickable.') !!}
-                fields for License and data source. URLs in a full format will be clickable.') !!}
 
         {!! Widget::text('license', 'License')
               ->help('License applicable to the table\'s data, if any. By default, all
@@ -47,7 +56,7 @@
         <div class="row form-group">
           <div class="col-md-8 offset-md-3">
             <button type="submit" class="btn btn-primary">
-              <i class="fa-save pr-2"></i>Create New Table
+              <i class="fa-save pr-2"></i>Create Table
             </button>
           </div>
         </div>

resources/views/table/view.blade.php

@@ -1,3 +1,5 @@
+{{-- Basic table view --}}
+
 @extends('layouts.app')
 
 @php

resources/views/user/view.blade.php

@@ -0,0 +1,120 @@
+{{-- User's dashboard / profile page --}}
+@extends('layouts.app')
+
+@php
+/** @var \App\Models\Table[] $tables */
+/** @var \App\Models\User $user */
+@endphp
+
+@section('content')
+  <div class="container">
+
+    <div class="row justify-content-center">
+
+      {{-- Dash card --}}
+      <div class="col-md-4">
+        <div class="card">
+          <div class="card-header">
+            <i class="fa-user-circle-o pr-1"></i>
+            {{ $user->title }}
+
+            @if(authed() && user()->is($user))
+              <a href="{{route('user.edit')}}" class="btn btn-sm btn-outline-light float-right">Edit</a>
+            @endif
+          </div>
+
+          <div class="card-body">
+            @if (session('status'))
+              <div class="alert alert-success" role="alert">
+                {{ session('status') }}
+              </div>
+            @endif
+
+            @if($user->bio)
+              @if(mb_strlen($user->bio) > 250)
+                <p id="bio-short" aria-hidden=true>
+                  {{mb_substr($user->bio, 0, 250)}}…
+                  <a class="text-muted small" title="Show more" href="#" onclick="$('#bio-short').addClass('hidden'); $('#bio-full').removeClass('hidden'); return false;">
+                    [more]
+                  </a>
+                </p>
+                <p id="bio-full" class="hidden">
+                  {{ $user->bio }}
+                  <a class="text-muted small" title="Collapse" href="#" onclick="$('#bio-full').addClass('hidden'); $('#bio-short').removeClass('hidden'); return false;">
+                    [collapse]
+                  </a>
+                </p>
+              @else
+                <p>
+                  {{ $user->bio }}
+                </p>
+              @endif
+            @endif
+
+            @if($user->website)
+              <p>
+                <i class="fa-link fa-pr" aria-label="User's Website" title="User's Website"></i>{{--
+                --}}<a href="{{ $user->website }}">{{ $user->website }}</a>
+              </p>
+            @endif
+
+            <p class="mb-0">
+              <i class="fa-calendar fa-pr" aria-hidden=true></i>{{--
+              --}}Joined {{ $user->created_at->diffForHumans() }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {{-- Table list card --}}
+      <div class="col-md-8">
+        <div class="card">
+          <div class="card-header">
+            <span class="d-inline-block">
+              @if(authed() && user()->is($user))
+                Your Tables
+              @else
+                User's Tables
+              @endif
+            </span>
+
+            @if(authed() && user()->is($user))
+              <a href="{{route('table.create')}}" class="btn btn-sm btn-outline-light float-right">New</a>
+            @endif
+          </div>
+
+          <div class="list-group list-group-flush">
+            @if(count($tables) == 0)
+              <span class="list-group-item">No tables yet.</span>
+            @else
+              @foreach($tables as $table)
+                <a class="list-group-item list-group-item-action"
+                   href="{{route('table.view', ['user' => $user->name, 'table' => $table->name])}}">
+                  <span class="d-block row">
+                    <span class="d-inline-block col-10">
+                      <i class="fa-table fa-pr"></i>{{ $table->title }}
+                    </span>{{--
+                    --}}<span class="d-inline-block col-2 small text-right">
+                      {{ $table->revision->row_count }} rows
+                    </span>
+                  </span>
+
+                  <span class="d-block small row">
+                    <span class="d-inline-block col-8">
+                      {{ ellipsis($table->description, 215) }}
+                    </span>{{--
+                    --}}<span class="d-inline-block col-4 text-right text-muted">
+                      Last change {{ $table->updated_at->diffForHumans() }}
+                    </span>
+                  </span>
+                </a>
+              @endforeach
+              {{ $tables->links() }}
+            @endif
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+@endsection

resources/views/welcome.blade.php

@@ -1,3 +1,5 @@
+{{-- Public landing page --}}
+
 @extends('layouts.app')
 
 @section('content')

routes/login.php

@@ -1,6 +1,7 @@
 <?php
 // auth related routes, using the web middleware
 
+use App\Models\User;
 use SocialNorm\Exceptions\ApplicationRejectedException;
 use SocialNorm\Exceptions\InvalidAuthorizationCodeException;
 use SocialNorm\ProviderUser;
@@ -11,16 +12,24 @@ Auth::routes();
 
 function _loginVia($method) {
     try {
-        SocialAuth::login($method, function (\App\Models\User $user, ProviderUser $details) {
+        SocialAuth::login($method, function (User $user, ProviderUser $details) {
             // update user name first time user logs in
             if (!$user->exists) {
-                $user->name = $details->nickname ?: ($details->full_name ?: $details->email);
+                $basename = $details->nickname ?: ($details->full_name ?: $details->email);
+                $user->name = $basename;
+                $cnt = 1;
+                while (User::where('name', $user->name)->exists()) {
+                    $cnt++;
+                    $user->name = $basename . $cnt;
+                }
             }
 
             // set e-mail from provider data, only if user e-mail is empty
             if ("$user->email" === "") {
                 $user->email = $details->email;
             }
+
+            $user->confirmed = true; // mark as confirmed, we trust the provider
         });
     } catch (ApplicationRejectedException $e) {
         abort(401, $e->getMessage());

routes/public.php

@@ -1,22 +0,0 @@
-<?php
-// Routes using the web middleware
-
-require "login.php";
-
-Route::get('/about/terms', function () {
-    return view('about.terms');
-});
-
-Route::get('/about/privacy', function () {
-    return view('about.privacy');
-});
-
-Route::get('/', function () {
-    if (!Auth::guest()) {
-        return redirect('/home');
-    }
-    return view('welcome');
-});
-
-// Table resource
-Route::get('{user}/{table}', 'TableController@view')->name('table.view');

routes/user.php

@@ -1,13 +0,0 @@
-<?php
-// Routes using the web+auth middlewares
-
-Route::get('/home', 'HomeController@index')->name('home');
-
-// Table resource
-Route::group([
-    'prefix' => 'table',
-], function () {
-    Route::get('create', 'TableController@create')->name('table.create');
-    Route::post('create', 'TableController@storeNew')->name('table.storeNew');
-});
-

routes/web.php

@@ -0,0 +1,40 @@
+<?php
+// Routes using the web middleware
+
+require "login.php";
+
+Route::get('/about/terms', function () {
+    return view('about.terms');
+});
+
+Route::get('/about/privacy', function () {
+    return view('about.privacy');
+});
+
+Route::get('/', function () {
+    if (!Auth::guest()) {
+        return redirect(route('user.view', Auth::user()->name));
+    }
+    return view('welcome');
+});
+
+Route::group(['middleware' => 'auth'], function () {
+    // Table resource
+    Route::group([
+        'prefix' => 'table',
+    ], function () {
+        Route::get('create', 'TableController@create')->name('table.create');
+        Route::post('create', 'TableController@storeNew')->name('table.storeNew');
+    });
+
+    Route::group([
+        'prefix' => 'user',
+    ], function () {
+        Route::get('edit', 'UserController@edit')->name('user.edit');
+        Route::post('create', 'TableController@storeNew')->name('table.storeNew');
+    });
+});
+
+// Table resource - located at the end to work as a fallback
+Route::get('@{user}', 'UserController@view')->name('user.view');
+Route::get('@{user}/{table}', 'TableController@view')->name('table.view');