Added dark and SFW modes.

assets/components/actors/actors.vue

@@ -110,7 +110,7 @@ export default {
 @import 'theme';
 
 .gender-link.selected .gender .icon  {
-    fill: $text-contrast;
+    fill: var(--text-contrast);
     filter: none;
 }
 </style>
@@ -143,7 +143,7 @@ export default {
     display: flex;
     flex-shrink: 0;
     padding: 0 .5rem 0 0;
-    border-right: solid 1px $shadow-hint;
+    border-right: solid 1px var(--shadow-hint);
     margin: 0 1rem 0 0;
 }
 
@@ -160,38 +160,42 @@ export default {
     align-items: center;
     justify-content: center;
     margin: .25rem .5rem .25rem 0;
-    color: $shadow;
-    background: $background;
+    color: var(--shadow);
+    background: var(--background);
     font-weight: bold;
     text-decoration: none;
-    box-shadow: 0 0 3px $shadow-weak;
+    box-shadow: 0 0 3px var(--shadow-weak);
 
     &:hover {
-        color: $primary;
+        color: var(--primary);
         cursor: pointer;
     }
 
+    .icon {
+        fill: var(--shadow);
+    }
+
     &.selected {
-        background: $primary;
-        color: $text-contrast;
+        background: var(--primary);
+        color: var(--text-contrast);
 
         .icon {
-            fill: $text-contrast;
+            fill: var(--text-contrast);
         }
 
         &.male {
-            background: $male;
+            background: var(--male);
         }
 
         &.female {
-            background: $female;
+            background: var(--female);
         }
 
         &.transsexual {
             width: 2rem;
             height: 2rem;
-            background: $female;
-            border: solid .25rem $male;
+            background: var(--female);
+            border: solid .25rem var(--male);
         }
     }
 }

assets/components/container/container.vue

@@ -1,5 +1,8 @@
 <template>
-    <div class="container">
+    <div
+        class="container"
+        :class="theme"
+    >
         <Header />
 
         <div class="content">
@@ -10,12 +13,23 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 import Header from '../header/header.vue';
 
+function theme(state) {
+    return state.ui.theme;
+}
+
 export default {
     components: {
         Header,
     },
+    computed: {
+        ...mapState({
+            theme,
+        }),
+    },
 };
 </script>
 
@@ -23,7 +37,7 @@ export default {
 @import 'theme';
 
 .container {
-    background: $background-dim;
+    background: var(--background-dim);
     height: 100%;
     display: flex;
     flex-direction: column;

assets/components/header/filter-bar.vue

@@ -166,17 +166,17 @@ export default {
 @import 'theme';
 
 .filter-bar {
-    background: $background;
+    background: var(--background);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: .5rem 1rem;
     z-index: 1;
     font-size: 0;
-    box-shadow: 0 0 3px $shadow;
+    box-shadow: 0 0 3px var(--shadow);
 
     .icon {
-        fill: $shadow;
+        fill: var(--shadow);
     }
 }
 
@@ -196,17 +196,17 @@ export default {
 }
 
 .range-button {
-    color: $shadow;
-    background: $background;
+    color: var(--shadow);
+    background: var(--background);
     display: inline-block;
     padding: .5rem 1rem;
     border: none;
-    box-shadow: 0 0 2px $shadow-weak;
+    box-shadow: 0 0 2px var(--shadow-weak);
     font-size: .8rem;
     font-weight: bold;
 
     &:hover {
-        color: $text;
+        color: var(--text);
         cursor: pointer;
     }
 }
@@ -215,7 +215,7 @@ export default {
     display: none;
 
     &:checked + .range-button {
-        color: $primary;
+        color: var(--primary);
     }
 }
 

assets/components/header/filters.vue

@@ -96,7 +96,7 @@ export default {
     margin: 0;
 
     &:not(:last-child) {
-        border-right: solid 1px $shadow-hint;
+        border-right: solid 1px var(--shadow-hint);
     }
 }
 
@@ -116,7 +116,7 @@ export default {
 }
 
 .toggle {
-    color: $shadow-weak;
+    color: var(--shadow-weak);
     box-sizing: border-box;
     padding: .5rem;
     margin: 0 .25rem;
@@ -130,12 +130,12 @@ export default {
     }
 
     &:hover {
-        color: $shadow;
+        color: var(--shadow);
     }
 
     &.active {
-        color: $primary;
-        box-shadow: 0 0 2px $shadow-weak;
+        color: var(--primary);
+        box-shadow: 0 0 2px var(--shadow-weak);
     }
 }
 </style>

assets/components/header/header.vue

@@ -62,6 +62,41 @@
             </nav>
         </div>
 
+        <div class="header-section">
+            <div class="header-toggles">
+                <Icon
+                    v-show="!sfw"
+                    v-tooltip="'Enable safe-for-work mode'"
+                    icon="flower"
+                    class="toggle noselect"
+                    @click.native="setSfw(true)"
+                />
+
+                <Icon
+                    v-show="sfw"
+                    v-tooltip="'Disable safe-for-work mode'"
+                    icon="flower"
+                    class="toggle active noselect"
+                    @click.native="setSfw(false)"
+                />
+
+                <Icon
+                    v-show="theme === 'light'"
+                    v-tooltip="'Switch to dark theme'"
+                    icon="moon"
+                    class="toggle noselect"
+                    @click.native="setTheme('dark')"
+                />
+
+                <Icon
+                    v-show="theme === 'dark'"
+                    v-tooltip="'Switch to light theme'"
+                    icon="sun"
+                    class="toggle noselect"
+                    @click.native="setTheme('light')"
+                />
+            </div>
+
             <Search class="search-full" />
 
             <v-popover
@@ -84,12 +119,31 @@
                     @search="searching = false"
                 />
             </v-popover>
+        </div>
     </header>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 import Search from './search.vue';
 
+function sfw(state) {
+    return state.ui.sfw;
+}
+
+function theme(state) {
+    return state.ui.theme;
+}
+
+function setTheme(newTheme) {
+    this.$store.dispatch('setTheme', newTheme);
+}
+
+function setSfw(enabled) {
+    this.$store.dispatch('setSfw', enabled);
+}
+
 export default {
     components: {
         Search,
@@ -99,6 +153,16 @@ export default {
             searching: false,
         };
     },
+    computed: {
+        ...mapState({
+            sfw,
+            theme,
+        }),
+    },
+    methods: {
+        setSfw,
+        setTheme,
+    },
 };
 </script>
 
@@ -109,9 +173,9 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: $background;
-    color: $primary;
-    border-bottom: solid 1px $shadow-hint;
+    background: var(--background);
+    color: var(--primary);
+    border-bottom: solid 1px var(--shadow-hint);
     font-size: 0;
 }
 
@@ -120,6 +184,13 @@ export default {
     align-items: center;
 }
 
+.header-section {
+    height: 100%;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+}
+
 .logo-link {
     color: inherit;
     display: inline-block;
@@ -151,31 +222,44 @@ export default {
     justify-content: center;
     padding: 1rem 1rem calc(1rem - 5px) 1rem;
     border-bottom: solid 5px transparent;
-    color: $shadow;
+    color: var(--shadow);
     text-decoration: none;
     font-size: .9rem;
     font-weight: bold;
     cursor: pointer;
 
-    .icon {
-        fill: $shadow;
-        margin: 0 .5rem 0 0;
-    }
-
     &.active {
-        color: $primary;
-        border-bottom: solid 5px $primary;
+        color: var(--primary);
+        border-bottom: solid 5px var(--primary);
 
         .icon {
-            fill: $primary;
+            fill: var(--primary);
         }
     }
 
     &:hover:not(.active) {
-        color: $primary;
+        color: var(--primary);
 
         .icon {
-            fill: $primary;
+            fill: var(--primary);
+        }
+    }
+}
+
+.header-toggles {
+    margin: 0 .5rem 0 0;
+
+    .icon {
+        padding: 1rem .75rem;
+        fill: var(--shadow);
+
+        &:hover {
+            fill: var(--shadow-strong);
+            cursor: pointer;
+        }
+
+        &.active {
+            fill: var(--primary);
         }
     }
 }
@@ -189,7 +273,7 @@ export default {
     margin: .2rem 0 0 0;
 
     .icon {
-        fill: $shadow;
+        fill: var(--shadow);
     }
 }
 

assets/components/header/search.vue

@@ -66,14 +66,14 @@ export default {
     align-items: center;
     justify-content: flex-end;
     padding: 0 1rem 0 0;
-    border-left: solid 1px $shadow-hint;
+    border-left: solid 1px var(--shadow-hint);
 
     &.compact {
         padding: 0;
         border: none;
 
         .search-input {
-            border: solid 1px $shadow-hint;
+            border: solid 1px var(--shadow-hint);
         }
 
         .search-button {
@@ -88,12 +88,14 @@ export default {
     width: 100%;
     padding: .5rem;
     border: none;
+    color: var(--text);
+    background: var(--background);
     outline: none;
     font-size: 1rem;
     outline: none;
 
     &::placeholder {
-        color: $shadow;
+        color: var(--shadow);
     }
 
     &::-webkit-search-cancel-button {
@@ -101,7 +103,7 @@ export default {
         padding: .5rem;
         position: relative;
         right: 0;
-        color: $text;
+        color: var(--text);
         background: url('/img/cancel-circle2.svg');
         opacity: .25;
 
@@ -112,7 +114,7 @@ export default {
     }
 
     &:focus::placeholder {
-        color: $shadow-weak;
+        color: var(--shadow-weak);
     }
 }
 
@@ -125,14 +127,14 @@ export default {
     outline: none;
 
     .icon {
-        fill: $shadow-weak;
+        fill: var(--shadow-weak);
     }
 
     &:hover {
         cursor: pointer;
 
         .icon {
-            fill: $shadow;
+            fill: var(--shadow);
         }
     }
 }

assets/components/networks/networks.vue

@@ -102,18 +102,20 @@ export default {
 }
 
 .query {
+    color: var(--text);
+    background: var(--background);
     flex-grow: 1;
     box-sizing: border-box;
     padding: 1rem;
     border: none;
     box-sizing: border-box;
-    box-shadow: 0 0 3px $shadow-weak;
+    box-shadow: 0 0 3px var(--shadow-weak);
     margin: 1rem 0;
     font-size: 1rem;
     outline: none;
 
     &:focus {
-        box-shadow: 0 0 3px $primary;
+        box-shadow: 0 0 3px var(--primary);
     }
 }
 
@@ -123,14 +125,14 @@ export default {
     border: none;
 
     .icon {
-        fill: $shadow;
+        fill: var(--shadow);
     }
 
     &:hover {
         cursor: pointer;
 
         .icon {
-            fill: $primary;
+            fill: var(--primary);
         }
     }
 }

assets/components/releases/releases.vue

@@ -7,12 +7,13 @@
 
         <ul class="nolist tiles">
             <li
-                v-for="release in releases"
+                v-for="(release, index) in releases"
                 :key="`release-${release.id}`"
             >
                 <ReleaseTile
                     :release="release"
                     :referer="referer"
+                    :index="index"
                 />
             </li>
         </ul>
@@ -80,7 +81,7 @@ export default {
 }
 
 .empty {
-    color: $shadow-strong;
+    color: var(--shadow-strong);
     font-weight: bold;
 }
 

assets/components/tags/photos.vue

@@ -4,14 +4,14 @@
             <li>
                 <a
                     v-if="tag.poster"
-                    :href="`/img/${tag.poster.path}`"
-                    :title="tag.poster.comment"
+                    :href="`/img/${poster.path}`"
+                    :title="poster.comment"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="photo-link"
                 >
                     <img
-                        :src="`/img/${tag.poster.thumbnail}`"
+                        :src="`/img/${poster.thumbnail}`"
                         :alt="tag.poster.comment"
                         class="poster"
                     >
@@ -19,7 +19,7 @@
             </li>
 
             <li
-                v-for="photo in tag.photos"
+                v-for="photo in photos"
                 :key="`photo-${photo.id}`"
             >
                 <a
@@ -41,6 +41,22 @@
 </template>
 
 <script>
+function poster() {
+    if (this.$store.state.ui.sfw) {
+        return this.tag.poster.sfw;
+    }
+
+    return this.tag.poster;
+}
+
+function photos() {
+    if (this.$store.state.ui.sfw) {
+        return this.tag.photos.map(photo => photo.sfw);
+    }
+
+    return this.tag.photos;
+}
+
 export default {
     props: {
         tag: {
@@ -48,6 +64,10 @@ export default {
             default: null,
         },
     },
+    computed: {
+        poster,
+        photos,
+    },
 };
 </script>
 

assets/components/tags/tag.vue

@@ -99,13 +99,17 @@ export default {
 @import 'theme';
 
 .description a {
-    color: $link;
+    color: var(--link);
     text-decoration: inherit;
 
     &:hover {
-        color: $primary;
+        color: var(--primary);
     }
 }
+
+.dark .sidebar {
+    border-right: solid 1px var(--shadow-weak);
+}
 </style>
 
 <style lang="scss" scoped>
@@ -134,8 +138,8 @@ export default {
 }
 
 .header {
-    background: $profile;
-    color: $text-contrast;
+    background: var(--profile);
+    color: var(--text-light);
     display: none;
     padding: .5rem 1rem;
 
@@ -149,8 +153,8 @@ export default {
 }
 
 .sidebar {
-    background: $profile;
-    color: $text-contrast;
+    background: var(--profile);
+    color: var(--text-light);
     display: flex;
     flex-direction: column;
     width: 25rem;
@@ -182,7 +186,7 @@ export default {
     text-transform: capitalize;
 
     .icon {
-        fill: $text-contrast;
+        fill: var(--text-light);
         width: 1.25rem;
         height: 1.25rem;
     }

assets/components/tags/tags.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="tags">
-        <h3>Oral</h3>
+        <h3 class="heading">Oral</h3>
 
         <div class="tiles">
             <Tag
@@ -10,7 +10,7 @@
             />
         </div>
 
-        <h3>Penetration</h3>
+        <h3 class="heading">Penetration</h3>
 
         <div class="tiles">
             <Tag
@@ -20,7 +20,7 @@
             />
         </div>
 
-        <h3>Group</h3>
+        <h3 class="heading">Group</h3>
 
         <div class="tiles">
             <Tag
@@ -30,7 +30,7 @@
             />
         </div>
 
-        <h3>Ethnicity</h3>
+        <h3 class="heading">Ethnicity</h3>
 
         <div class="tiles">
             <Tag
@@ -40,7 +40,7 @@
             />
         </div>
 
-        <h3>Finish</h3>
+        <h3 class="heading">Finish</h3>
 
         <div class="tiles">
             <Tag
@@ -50,7 +50,7 @@
             />
         </div>
 
-        <h3>Misc</h3>
+        <h3 class="heading">Misc</h3>
 
         <div
             v-if="tags.misc"
@@ -149,6 +149,11 @@ export default {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
     grid-gap: .5rem;
+    margin: 0 0 1.5rem 0;
+}
+
+.heading {
+    font-size: 1.3rem;
 }
 
 @media(max-width: $breakpoint3) {

assets/components/tile/release.vue

@@ -44,7 +44,7 @@
                     v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
                     :title="release.url && `View scene on ${release.site.name}`"
                     :href="release.url"
-                    :class="{ upcoming: isAfter(release.date, new Date()), new: release.isNew }"
+                    :class="{ upcoming: isUpcoming, new: release.isNew }"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="date"
@@ -166,6 +166,15 @@ export default {
             type: String,
             default: null,
         },
+        index: {
+            type: Number,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            isUpcoming: this.isAfter(this.release.date, new Date()),
+        };
     },
 };
 </script>
@@ -174,13 +183,13 @@ export default {
 @import 'theme';
 
 .tile {
-    background: $background;
+    background: var(--background);
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     padding: 0 0 .5rem 0;
     overflow: hidden;
-    box-shadow: 0 0 3px $shadow-weak;
+    box-shadow: 0 0 3px var(--shadow-weak);
     height: 100%;
 }
 
@@ -190,7 +199,7 @@ export default {
 }
 
 .covers {
-    background: $profile;
+    background: var(--profile);
     display: flex;
 
     .cover {
@@ -207,9 +216,9 @@ export default {
     object-fit: cover;
     background-position: center;
     background-size: cover;
-    background-color: $shadow-hint;
-    color: $shadow;
-    text-shadow: 1px 1px 0 $highlight;
+    background-color: var(--shadow-hint);
+    color: var(--shadow);
+    text-shadow: 1px 1px 0 var(--highlight);
 }
 
 .row {
@@ -236,10 +245,10 @@ export default {
 
 .site,
 .date {
-    color: $text-contrast;
+    color: var(--text-light);
     display: flex;
     align-items: center;
-    background: $shadow;
+    background: var(--darken);
     position: relative;
     font-size: .8rem;
     padding: .25rem;
@@ -249,7 +258,7 @@ export default {
 .date {
     &.upcoming:before {
         content: '';
-        background: $primary;
+        background: var(--primary);
         width: .5rem;
         display: inline-block;
         position: absolute;
@@ -269,7 +278,7 @@ export default {
 
 .site-link {
     display: flex;
-    color: $text-contrast;
+    color: var(--text-light);
     text-decoration: none;
 }
 
@@ -285,7 +294,7 @@ export default {
 
 .title {
     margin: 0 .25rem .25rem 0;
-    color: $text;
+    color: var(--text);
     max-height: 2.75rem;
     font-size: 1rem;
     line-height: 1.5;
@@ -333,26 +342,26 @@ export default {
     text-decoration: none;
 
     &:hover {
-        color: $primary;
+        color: var(--primary);
     }
 }
 
 .actor-link {
-    color: $link;
+    color: var(--link);
 }
 
 .tag-link {
-    color: $shadow;
+    color: var(--shadow);
     display: inline-block;
     padding: .25rem;
     font-size: .75rem;
     font-weight: bold;
     text-decoration: none;
     line-height: 1;
-    border: solid 1px $shadow-hint;
+    border: solid 1px var(--shadow-hint);
 
     &:hover {
-        color: $primary;
+        color: var(--primary);
     }
 }
 </style>

assets/components/tile/tag.vue

@@ -6,7 +6,7 @@
     >
         <img
             v-if="tag.poster"
-            :src="`/img/${tag.poster.thumbnail}`"
+            :src="sfw ? `/img/${tag.poster.sfw.thumbnail}` : `/img/${tag.poster.thumbnail}`"
             :alt="tag.name"
             class="poster"
         >
@@ -16,6 +16,10 @@
 </template>
 
 <script>
+function sfw() {
+    return this.$store.state.ui.sfw;
+}
+
 export default {
     props: {
         tag: {
@@ -23,6 +27,9 @@ export default {
             default: null,
         },
     },
+    computed: {
+        sfw,
+    },
 };
 </script>
 
@@ -30,8 +37,8 @@ export default {
 @import 'theme';
 
 .tile {
-    color: $text;
-    background: $background;
+    color: var(--text);
+    background: var(--background);
     display: flex;
     flex-direction: column;
     align-items: center;

assets/css/_theme.scss

@@ -35,3 +35,72 @@ $empty: #333;
 
 $male: #0af;
 $female: #f0a;
+
+:root {
+    --primary: #ff6c88;
+
+    --text-dark: #222;
+    --text-light: #fff;
+
+    --darken: rgba(0, 0, 0, .5);
+    --darken-weak: rgba(0, 0, 0, .2);
+
+    --lighten: rgba(255, 255, 255, .5);
+    --lighten-weak: rgba(255, 255, 255, .2);
+}
+
+.light {
+    --text: #222;
+    --text-contrast: #fff;
+    --background: #fff;
+    --background-dim: #fafafa;
+
+    --profile: #222;
+    --tile: #2a2a2a;
+
+    --link: #cc4466;
+    --empty: #333;
+
+    --male: #0af;
+    --female: #f0a;
+
+    --shadow: rgba(0, 0, 0, .5);
+    --shadow-extreme: rgba(0, 0, 0, .9);
+    --shadow-strong: rgba(0, 0, 0, .7);
+    --shadow-weak: rgba(0, 0, 0, .2);
+    --shadow-hint: rgba(0, 0, 0, .1);
+
+    --highlight: rgba(255, 255, 255, .5);
+    --highlight-extreme: rgba(255, 255, 255, .9);
+    --highlight-strong: rgba(255, 255, 255, .7);
+    --highlight-weak: rgba(255, 255, 255, .2);
+    --highlight-hint: rgba(255, 255, 255, .075);
+}
+
+.dark {
+    --text: #fff;
+    --text-contrast: #222;
+    --background: #333;
+    --background-dim: #222;
+
+    --profile: #222;
+    --tile: #2a2a2a;
+
+    --link: #cc4466;
+    --empty: #333;
+
+    --male: #0af;
+    --female: #f0a;
+
+    --shadow: rgba(255, 255, 255, .5);
+    --shadow-extreme: rgba(255, 255, 255, .9);
+    --shadow-strong: rgba(255, 255, 255, .7);
+    --shadow-weak: rgba(255, 255, 255, .2);
+    --shadow-hint: rgba(255, 255, 255, .075);
+
+    --highlight: rgba(0, 0, 0, .5);
+    --highlight-extreme: rgba(0, 0, 0, .9);
+    --highlight-strong: rgba(0, 0, 0, .7);
+    --highlight-weak: rgba(0, 0, 0, .2);
+    --highlight-hint: rgba(0, 0, 0, .1);
+}

assets/css/style.scss

@@ -9,7 +9,7 @@ body {
 }
 
 body {
-    color: $text;
+    color: var(--text);
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
 }
@@ -25,7 +25,7 @@ body {
 }
 
 .heading {
-    color: $shadow;
+    color: var(--shadow);
     padding: 0;
     margin: 0 0 1rem 0;
     font-size: 1.5rem;

assets/img/balloon.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>balloon</title>
+<path d="M14 7c0-3.866-2.686-7-6-7s-6 3.134-6 7c0 3.478 2.174 6.363 5.023 6.907l-0.523 2.093h3l-0.523-2.093c2.849-0.544 5.023-3.429 5.023-6.907zM4.417 8h-1.5c-0.048-0.325-0.073-0.659-0.073-1 0-0.703 0.107-1.376 0.302-2h1.5c-0.195 0.624-0.302 1.297-0.302 2 0 0.341 0.025 0.675 0.074 1z"></path>
+</svg>

assets/img/eye-blocked.svg

@@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>eye-blocked</title>
+<path d="M14.78 0.22c-0.293-0.293-0.768-0.293-1.061 0l-3.159 3.159c-0.812-0.246-1.671-0.378-2.561-0.378-3.489 0-6.514 2.032-8 5 0.643 1.283 1.573 2.391 2.703 3.236l-2.484 2.484c-0.293 0.293-0.293 0.768 0 1.061 0.146 0.146 0.338 0.22 0.53 0.22s0.384-0.073 0.53-0.22l13.5-13.5c0.293-0.293 0.293-0.768 0-1.061zM6.5 5c0.66 0 1.22 0.426 1.421 1.019l-1.902 1.902c-0.592-0.201-1.019-0.761-1.019-1.421 0-0.828 0.672-1.5 1.5-1.5zM1.721 8c0.598-0.946 1.395-1.749 2.335-2.348 0.061-0.039 0.123-0.077 0.185-0.114-0.156 0.427-0.241 0.888-0.241 1.369 0 0.858 0.27 1.652 0.73 2.303l-0.952 0.952c-0.819-0.576-1.519-1.311-2.057-2.162z"></path>
+<path d="M12 6.906c0-0.424-0.066-0.833-0.189-1.217l-5.028 5.028c0.384 0.123 0.793 0.189 1.217 0.189 2.209 0 4-1.791 4-4z"></path>
+<path d="M12.969 4.531l-1.084 1.084c0.020 0.012 0.040 0.024 0.059 0.037 0.94 0.6 1.737 1.403 2.335 2.348-0.598 0.946-1.395 1.749-2.335 2.348-1.181 0.753-2.545 1.152-3.944 1.152-0.604 0-1.202-0.074-1.781-0.219l-1.201 1.201c0.933 0.335 1.937 0.518 2.982 0.518 3.489 0 6.514-2.032 8-5-0.703-1.405-1.752-2.6-3.031-3.469z"></path>
+</svg>

assets/img/eye-blocked2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>eye-blocked2</title>
+<path d="M8 10c1.105 0 2-0.895 2-2 0-0.426-0.133-0.82-0.36-1.145l4.74-5.53-0.759-0.651-4.74 5.53c-0.266-0.131-0.565-0.204-0.881-0.204-1.105 0-2 0.895-2 2 0 0.426 0.133 0.82 0.36 1.145l-4.74 5.53 0.759 0.651 4.74-5.53c0.266 0.131 0.565 0.204 0.881 0.204zM5.17 8.997c-0.11-0.312-0.17-0.647-0.17-0.997 0-1.657 1.343-3 3-3 0.189 0 0.373 0.018 0.552 0.051l1.159-1.352c-0.562-0.127-1.137-0.199-1.711-0.199-4 0-8 3.5-8 4.5 0 0.588 1.383 2.040 3.336 3.137l1.834-2.14zM12.664 4.863l-1.834 2.14c0.11 0.312 0.17 0.647 0.17 0.997 0 1.657-1.343 3-3 3-0.189 0-0.373-0.018-0.552-0.051l-1.159 1.352c0.562 0.127 1.137 0.199 1.711 0.199 4 0 8-3.5 8-4.5-0-0.588-1.383-2.040-3.336-3.137z"></path>
+</svg>

assets/img/eye.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>eye</title>
+<path d="M8 3c-3.489 0-6.514 2.032-8 5 1.486 2.968 4.511 5 8 5s6.514-2.032 8-5c-1.486-2.968-4.511-5-8-5zM11.945 5.652c0.94 0.6 1.737 1.403 2.335 2.348-0.598 0.946-1.395 1.749-2.335 2.348-1.181 0.753-2.545 1.152-3.944 1.152s-2.763-0.398-3.945-1.152c-0.94-0.6-1.737-1.403-2.335-2.348 0.598-0.946 1.395-1.749 2.335-2.348 0.061-0.039 0.123-0.077 0.185-0.114-0.156 0.427-0.241 0.888-0.241 1.369 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.481-0.085-0.942-0.241-1.369 0.062 0.037 0.124 0.075 0.185 0.114v0zM8 6.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5 0.672-1.5 1.5-1.5 1.5 0.672 1.5 1.5z"></path>
+</svg>

assets/img/eye2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>eye2</title>
+<path d="M8 3.5c-4 0-8 3.5-8 4.5v0c0 1 4 4.5 8 4.5s8-3.5 8-4.5v0c-0-1-4-4.5-8-4.5zM8 11c-1.657 0-3-1.343-3-3s1.343-3 3-3c1.657 0 3 1.343 3 3s-1.343 3-3 3zM6 8c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2z"></path>
+</svg>

assets/img/flower2.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>flower2</title>
+<path d="M10.723 15.749c-0.791 0-1.544-0.334-2.119-0.939-0.234-0.247-0.437-0.534-0.605-0.854-0.168 0.321-0.37 0.608-0.605 0.854-0.575 0.606-1.328 0.939-2.119 0.939-0.696 0-1.419-0.256-2.090-0.742-0.977-0.707-1.47-1.677-1.388-2.73 0.064-0.82 0.466-1.61 1.128-2.265-1.026-0.15-1.873-0.614-2.388-1.323-0.553-0.762-0.67-1.758-0.329-2.804 0.457-1.4 1.422-2.204 2.648-2.204 0.555 0 1.136 0.166 1.708 0.481-0.103-0.847 0.056-1.671 0.477-2.359 0.605-0.988 1.683-1.555 2.956-1.555s2.351 0.567 2.956 1.555c0.421 0.687 0.58 1.511 0.477 2.358 0.572-0.315 1.153-0.481 1.708-0.481 1.226 0 2.191 0.803 2.649 2.204 0.341 1.046 0.225 2.042-0.329 2.804-0.514 0.709-1.362 1.172-2.388 1.322 0.662 0.655 1.064 1.444 1.128 2.264 0.082 1.054-0.411 2.023-1.388 2.73-0.671 0.485-1.393 0.742-2.090 0.742zM8 11.844c0.246 0 0.455 0.178 0.494 0.421 0.242 1.509 1.117 2.485 2.23 2.485 0.492 0 0.997-0.186 1.504-0.552 0.694-0.502 1.032-1.139 0.977-1.842-0.072-0.917-0.811-1.84-1.931-2.409-0.219-0.111-0.325-0.366-0.249-0.6s0.31-0.378 0.553-0.34c0.253 0.040 0.506 0.060 0.75 0.060 0 0 0 0 0 0 1.033 0 1.88-0.351 2.324-0.963 0.365-0.503 0.43-1.163 0.187-1.906-0.225-0.691-0.703-1.514-1.698-1.514-0.705 0-1.539 0.427-2.288 1.172-0.174 0.173-0.449 0.194-0.647 0.049s-0.262-0.412-0.151-0.631c0.527-1.033 0.545-2.133 0.049-2.945-0.425-0.695-1.172-1.077-2.104-1.077s-1.678 0.383-2.103 1.077c-0.497 0.811-0.479 1.912 0.049 2.945 0.112 0.219 0.048 0.486-0.151 0.631s-0.473 0.124-0.647-0.049c-0.749-0.745-1.583-1.172-2.288-1.172-0.995 0-1.472 0.823-1.698 1.514-0.243 0.744-0.178 1.403 0.187 1.906 0.444 0.612 1.291 0.963 2.324 0.963 0.244 0 0.496-0.020 0.75-0.060 0.243-0.038 0.477 0.106 0.553 0.34s-0.030 0.488-0.249 0.6c-1.12 0.569-1.859 1.493-1.931 2.41-0.055 0.703 0.283 1.34 0.977 1.842 0.499 0.361 1.019 0.552 1.503 0.552 1.113 0 1.988-0.975 2.23-2.485 0.039-0.243 0.248-0.421 0.494-0.421z"></path>
+<path d="M8 10.717c-1.275 0-2.313-1.037-2.313-2.313s1.037-2.313 2.313-2.313c1.275 0 2.313 1.038 2.313 2.313s-1.038 2.313-2.313 2.313zM8 7.092c-0.724 0-1.313 0.589-1.313 1.313s0.589 1.313 1.313 1.313c0.724 0 1.313-0.589 1.313-1.313s-0.589-1.313-1.313-1.313z"></path>
+</svg>

assets/img/glasses.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>glasses</title>
+<path d="M11.392 10.927c-0.517 0-1.257-0.036-1.705-0.345-0.561-0.387-1.008-1.943-1.224-2.837-0.038-0.158-0.146-0.23-0.262-0.26l-0.201-0.017-0.204 0.018c-0.115 0.030-0.221 0.103-0.259 0.26-0.217 0.893-0.664 2.45-1.224 2.837-0.448 0.309-1.187 0.345-1.705 0.345-0.116 0-0.222-0.002-0.317-0.003-0.072-0.001-0.136-0.002-0.19-0.002-2.155 0-2.871-0.73-3.092-1.342-0.171-0.472-0.279-0.973-0.375-1.414-0.126-0.58-0.255-1.179-0.466-1.303l-0.071-0.042-0.031-0.076c-0.131-0.325-0.036-1.127-0.016-1.284l0.024-0.188 0.188-0.022c0.94-0.11 2.347-0.177 2.943-0.177 0.023 0 2.328 0.015 3.005 0.343 0.093 0.045 0.187 0.094 0.277 0.141 0.426 0.222 0.867 0.452 1.512 0.456 0.642-0.004 1.083-0.234 1.509-0.456 0.091-0.047 0.184-0.096 0.277-0.141 0.677-0.328 2.982-0.343 3.005-0.343 0.596 0 2.004 0.067 2.943 0.177l0.188 0.022 0.024 0.188c0.020 0.157 0.115 0.96-0.015 1.284l-0.031 0.076-0.071 0.042c-0.21 0.124-0.34 0.724-0.466 1.303-0.096 0.441-0.204 0.942-0.375 1.414-0.221 0.612-0.937 1.342-3.092 1.342-0.054 0-0.118 0.001-0.19 0.002-0.094 0.002-0.201 0.003-0.316 0.003zM12.935 6.109c-1.578 0-2.664 0.211-3.006 0.408-0.396 0.228-0.471 0.459-0.471 0.805 0 0.278 0.31 1.505 0.543 1.971 0.205 0.411 0.465 0.608 0.843 0.64 0.146 0.012 0.365 0.020 0.599 0.020 0.923 0 1.716-0.094 2.020-0.238 0.396-0.189 0.806-0.385 0.939-2.18 0.006-0.080 0.014-0.161 0.021-0.239 0.037-0.38 0.068-0.708-0.105-0.903-0.154-0.173-0.49-0.267-0.998-0.278-0.128-0.003-0.258-0.004-0.386-0.004zM3.065 6.109c-0.127 0-0.257 0.001-0.386 0.004-0.508 0.011-0.844 0.105-0.998 0.278-0.173 0.195-0.142 0.524-0.105 0.904 0.008 0.078 0.015 0.158 0.021 0.238 0.133 1.796 0.542 1.991 0.939 2.18 0.304 0.145 1.096 0.238 2.020 0.238 0.235 0 0.453-0.007 0.599-0.020 0.378-0.032 0.638-0.23 0.843-0.64 0.17-0.341 0.543-1.591 0.543-1.971 0-0.347-0.075-0.578-0.471-0.805-0.341-0.196-1.428-0.407-3.006-0.407z"></path>
+</svg>

assets/img/glasses2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>glasses2</title>
+<path d="M15.948 5.412c-0.986-0.115-2.431-0.181-3.006-0.181s-2.447 0.066-2.99 0.328c-0.538 0.261-1.077 0.635-1.952 0.64-0.876-0.005-1.414-0.379-1.953-0.64-0.542-0.263-2.415-0.328-2.989-0.328s-2.020 0.066-3.006 0.181c0 0-0.117 0.908 0 1.199 0.506 0.3 0.534 1.714 0.974 2.933s2.496 1.218 2.953 1.218c0.457 0 1.587 0.075 2.138-0.305s1.030-2.236 1.162-2.778c0.112-0.461 0.568-0.482 0.702-0.478 0 0.001 0 0.002 0 0.002s0.007-0.001 0.019-0.001c0.012 0.001 0.019 0.001 0.019 0.001s0-0.001 0-0.002c0.134-0.004 0.59 0.017 0.702 0.478 0.131 0.542 0.61 2.398 1.162 2.778s1.681 0.305 2.138 0.305c0.457 0 2.513 0 2.953-1.218s0.468-2.633 0.974-2.933c0.117-0.291-0-1.199-0-1.199z"></path>
+</svg>

assets/img/hammer-wrench.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
+<title>hammer-wrench</title>
+<path d="M7.696 11.009l2.295 2.295-1.823 2.341c-0.334 0.437-0.926 0.476-1.315 0.087l-1.586-1.586c-0.389-0.389-0.35-0.98 0.087-1.315l2.341-1.823zM19.899 4.101l-2.399 2.399-3-3 2.399-2.399c-0.289-0.066-0.59-0.101-0.899-0.101-2.209 0-4 1.791-4 4 0 0.797 0.233 1.539 0.635 2.163l-2.233 1.739-3.402-3.402 4.5-4.5h-5l-2.22 2.22-0.22-0.22h-1.061v1.061l0.22 0.22-3.22 3.22 2.5 2.5 3-3 9 9 1.5-1.5-3.902-3.902 1.739-2.233c0.624 0.402 1.366 0.635 2.163 0.635 2.209 0 4-1.791 4-4 0-0.309-0.035-0.61-0.101-0.899z"></path>
+</svg>

assets/img/lamp4.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>lamp4</title>
+<path d="M8 0c-3.314 0-6 2.686-6 6 0 2.221 1.207 4.16 3 5.197v3.803l1 1h4l1-1v-3.803c1.793-1.037 3-2.976 3-5.197 0-3.314-2.686-6-6-6zM5 5c0-0.552 0.448-1 1-1s1 0.448 1 1v4.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3.5c-0.552 0-1-0.448-1-1zM9.5 13h-3c-0.275 0-0.5-0.225-0.5-0.5s0.225-0.5 0.5-0.5h3c0.275 0 0.5 0.225 0.5 0.5s-0.225 0.5-0.5 0.5zM10 6v3.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-4.5c0-0.552 0.448-1 1-1s1 0.448 1 1-0.448 1-1 1zM9.5 15h-3c-0.275 0-0.5-0.225-0.5-0.5s0.225-0.5 0.5-0.5h3c0.275 0 0.5 0.225 0.5 0.5s-0.225 0.5-0.5 0.5z"></path>
+</svg>

assets/img/lamp5.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>lamp5</title>
+<path d="M14 6c0-3.314-2.686-6-6-6s-6 2.686-6 6c0 2.221 1.207 4.16 3 5.197v3.803l1 1h4l1-1v-3.803c1.793-1.037 3-2.976 3-5.197zM9.5 13h-3c-0.275 0-0.5-0.225-0.5-0.5s0.225-0.5 0.5-0.5h3c0.275 0 0.5 0.225 0.5 0.5s-0.225 0.5-0.5 0.5zM10 10.585v-4.585c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1v5.9c-0.326 0.066-0.66 0.1-1 0.1s-0.674-0.034-1-0.1v-5.9c0-0.552-0.448-1-1-1s-1 0.448-1 1 0.448 1 1 1v4.585c-0.566-0.247-1.086-0.6-1.536-1.050-0.944-0.944-1.464-2.2-1.464-3.536s0.52-2.591 1.464-3.536 2.2-1.464 3.536-1.464c1.335 0 2.591 0.52 3.536 1.464s1.464 2.2 1.464 3.536-0.52 2.591-1.464 3.536c-0.45 0.45-0.97 0.803-1.536 1.050zM9.5 15h-3c-0.275 0-0.5-0.225-0.5-0.5s0.225-0.5 0.5-0.5h3c0.275 0 0.5 0.225 0.5 0.5s-0.225 0.5-0.5 0.5z"></path>
+</svg>

assets/img/lamp7.svg

@@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>lamp7</title>
+<path d="M5 10c-0.004 1.657 1.343 2 3 2s2.996-0.343 3-2 1.996-2.239 2-5-2.239-5-5-5c-2.761 0-4.996 2.239-5 5s2.004 3.343 2 5z"></path>
+<path d="M8 13c-1.234 0-2.259-0.274-2.463-1.516-0.024 0.168-0.037 0.34-0.037 0.516 0 1.657 1.119 2 2.5 2s2.5-0.343 2.5-2c0-0.176-0.013-0.348-0.037-0.516-0.204 1.241-1.229 1.516-2.463 1.516z"></path>
+<path d="M8 15c-0.987 0-1.807-0.274-1.97-1.516-0.019 0.168-0.030 0.34-0.030 0.516 0 1.657 0.895 2 2 2s2-0.343 2-2c0-0.176-0.010-0.348-0.030-0.516-0.163 1.241-0.983 1.516-1.97 1.516z"></path>
+</svg>

assets/img/lamp8.svg

@@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>lamp8</title>
+<path d="M8 1c1.070 0 2.076 0.417 2.833 1.175 0.754 0.755 1.169 1.758 1.167 2.824-0.002 1.23-0.485 1.888-0.996 2.585-0.47 0.64-1.002 1.365-1.004 2.414-0.001 0.51-0.176 0.647-0.355 0.744-0.318 0.172-0.871 0.259-1.645 0.259-1.189 0-1.645-0.208-1.819-0.382-0.045-0.045-0.182-0.182-0.181-0.616 0.003-1.053-0.533-1.78-1.005-2.422-0.512-0.696-0.996-1.353-0.995-2.579 0.002-1.070 0.418-2.075 1.173-2.83s1.759-1.171 2.827-1.171zM8 0c-2.761 0-4.996 2.239-5 5s2.004 3.343 2 5 1.343 2 3 2c1.657 0 2.996-0.343 3-2s1.996-2.239 2-5-2.239-5-5-5v0z"></path>
+<path d="M8 13c-1.234 0-2.259-0.274-2.463-1.516-0.024 0.168-0.037 0.34-0.037 0.516 0 1.657 1.119 2 2.5 2s2.5-0.343 2.5-2c0-0.176-0.013-0.348-0.037-0.516-0.204 1.241-1.229 1.516-2.463 1.516z"></path>
+<path d="M8 15c-0.987 0-1.807-0.274-1.97-1.516-0.019 0.168-0.030 0.34-0.030 0.516 0 1.657 0.895 2 2 2s2-0.343 2-2c0-0.176-0.010-0.348-0.030-0.516-0.163 1.241-0.983 1.516-1.97 1.516z"></path>
+</svg>

assets/img/magic-wand2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>magic-wand2</title>
+<path d="M8.068 7.060l2.95-0.917-3.018-2.134v-4.009l-3.233 2.329-3.767-1.329 1.329 3.767-2.329 3.233h4l2.143 3.018 0.917-2.95 6.94 7.932 2-2-7.932-6.94zM6.323 6.323l-0.612 1.968-1.19-1.657h-2.061l1.233-1.652-0.662-1.952 1.952 0.662 1.652-1.233v2.061l1.657 1.19-1.968 0.612z"></path>
+</svg>

assets/img/moon.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>moon</title>
+<path d="M11.185 1.008c-0.941-0.543-1.947-0.874-2.962-1.008 1.921 2.501 2.262 6.012 0.587 8.913s-4.886 4.361-8.012 3.948c0.623 0.812 1.412 1.518 2.354 2.061 3.842 2.218 8.756 0.902 10.974-2.941s0.902-8.756-2.94-10.974z"></path>
+</svg>

assets/img/paw.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>paw</title>
+<path d="M8.349 8.625c-1.958 0-3.833 0.876-5.043 4.402s1.46 3.245 3.145 2.516c1.631-0.705 2.252-0.813 4.217 0.121 1.85 0.879 3.431-0.038 2.771-1.965s-2.882-5.075-5.090-5.075zM4.645 0.681c-1.116 0.267-1.706 1.784-1.318 3.388s1.608 2.689 2.724 2.422c0.005-0.001 0.010-0.003 0.015-0.004 1.116-0.267 1.706-1.784 1.318-3.388-0.167-0.691-0.488-1.285-0.889-1.716-0.53-0.571-1.199-0.857-1.835-0.706-0.005 0.001-0.010 0.002-0.015 0.004zM11.111 0.625c-1.123-0.235-2.305 0.885-2.64 2.502-0.192 0.929-0.063 1.82 0.296 2.454 0.265 0.469 0.655 0.798 1.133 0.898 0.004 0.001 0.008 0.002 0.012 0.003 1.123 0.235 2.305-0.885 2.64-2.502s-0.305-3.118-1.429-3.353c-0.004-0.001-0.008-0.002-0.012-0.002zM0.322 8.964c0.617 1.427 1.918 2.239 2.905 1.812 0.565-0.244 0.905-0.841 0.977-1.574 0.054-0.548-0.043-1.173-0.307-1.783-0-0.001-0.001-0.002-0.001-0.002-0.617-1.427-1.918-2.239-2.905-1.812s-1.287 1.929-0.67 3.357c0 0.001 0.001 0.002 0.001 0.002zM12.774 10.525c0.562 0.247 1.227 0.090 1.81-0.354 0.439-0.335 0.831-0.832 1.098-1.445 0.621-1.426 0.326-2.932-0.658-3.364-0.004-0.002-0.008-0.004-0.013-0.006-0.985-0.432-2.287 0.373-2.908 1.799s-0.326 2.932 0.658 3.364c0.004 0.002 0.009 0.004 0.013 0.006z"></path>
+</svg>

assets/img/pipe.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>pipe</title>
+<path d="M15 7c-2.367 0-3.76 1.56-4.989 2.936-0.989 1.108-1.843 2.064-3.011 2.064-0.928 0-1-1.148-1-1.5v-2c0-0.276-0.224-0.5-0.5-0.5h-5c-0.276 0-0.5 0.224-0.5 0.5v2c0 2.304 0.617 3.912 1.834 4.782 1.005 0.718 2.127 0.718 2.666 0.718 1.49 0 2.837-0.534 4.116-1.633 1.083-0.931 1.948-2.106 2.785-3.243 1.234-1.676 2.299-3.124 3.599-3.124h1v-1h-1z"></path>
+<path d="M1.344 7c-0.083 0-0.162-0.041-0.21-0.114-0.064-0.099-0.051-0.229 0.032-0.312 0.53-0.536 0.821-1.108 0.89-1.75 0.061-0.572-0.055-1.122-0.167-1.653-0.158-0.747-0.307-1.453 0.111-2.042 0.404-0.571 1.298-0.929 2.811-1.127 0.103-0.013 0.203 0.038 0.252 0.129s0.037 0.203-0.030 0.282c-1.075 1.253-1.070 2.298-1.065 3.221 0.003 0.634 0.006 1.233-0.324 1.805-0.357 0.618-1.060 1.109-2.212 1.546-0.029 0.011-0.059 0.016-0.088 0.016z"></path>
+</svg>

assets/img/sun.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>sun</title>
+<path d="M8 4c-2.209 0-4 1.791-4 4s1.791 4 4 4c2.209 0 4-1.791 4-4s-1.791-4-4-4zM8 13c0.552 0 1 0.448 1 1v1c0 0.552-0.448 1-1 1s-1-0.448-1-1v-1c0-0.552 0.448-1 1-1zM8 3c-0.552 0-1-0.448-1-1v-1c0-0.552 0.448-1 1-1s1 0.448 1 1v1c0 0.552-0.448 1-1 1zM15 7c0.552 0 1 0.448 1 1s-0.448 1-1 1h-1c-0.552 0-1-0.448-1-1s0.448-1 1-1h1zM3 8c0 0.552-0.448 1-1 1h-1c-0.552 0-1-0.448-1-1s0.448-1 1-1h1c0.552 0 1 0.448 1 1zM12.95 11.536l0.707 0.707c0.39 0.39 0.39 1.024 0 1.414s-1.024 0.39-1.414 0l-0.707-0.707c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0zM3.050 4.464l-0.707-0.707c-0.391-0.391-0.391-1.024 0-1.414s1.024-0.391 1.414 0l0.707 0.707c0.391 0.391 0.391 1.024 0 1.414s-1.024 0.391-1.414 0zM12.95 4.464c-0.39 0.391-1.024 0.391-1.414 0s-0.39-1.024 0-1.414l0.707-0.707c0.39-0.391 1.024-0.391 1.414 0s0.39 1.024 0 1.414l-0.707 0.707zM3.050 11.536c0.39-0.39 1.024-0.39 1.414 0s0.391 1.024 0 1.414l-0.707 0.707c-0.391 0.39-1.024 0.39-1.414 0s-0.391-1.024 0-1.414l0.707-0.707z"></path>
+</svg>

assets/js/tags/actions.js

@@ -31,6 +31,12 @@ function initTagsActions(store, _router) {
                             thumbnail
                             path
                             comment
+                            sfw: sfwMedia {
+                                id
+                                thumbnail
+                                path
+                                comment
+                            }
                         }
                     }
                     photos: tagsPhotos {
@@ -39,6 +45,12 @@ function initTagsActions(store, _router) {
                             thumbnail
                             path
                             comment
+                            sfw: sfwMedia {
+                                id
+                                thumbnail
+                                path
+                                comment
+                            }
                         }
                     }
                     releases: releasesTags(
@@ -81,7 +93,7 @@ function initTagsActions(store, _router) {
             exclude: store.state.ui.filter,
         });
 
-        return curateTag(tagBySlug);
+        return curateTag(tagBySlug, store);
     }
 
     async function fetchTags({ _commit }, {
@@ -110,6 +122,9 @@ function initTagsActions(store, _router) {
                     poster: tagsPosterByTagId {
                         media {
                             thumbnail
+                            sfw: sfwMedia {
+                                thumbnail
+                            }
                         }
                     }
                     group {
@@ -123,7 +138,7 @@ function initTagsActions(store, _router) {
             limit,
         });
 
-        return tags.map(tag => curateTag(tag));
+        return tags.map(tag => curateTag(tag, store.state.ui.sfw));
     }
 
     async function fetchTagReleases({ _commit }, tagId) {

assets/js/ui/actions.js

@@ -1,5 +1,3 @@
-// import { get } from '../api';
-
 function initUiActions(_store, _router) {
     function setFilter({ commit }, filter) {
         commit('setFilter', filter);
@@ -16,10 +14,22 @@ function initUiActions(_store, _router) {
         localStorage.setItem('batch', batch);
     }
 
+    function setTheme({ commit }, theme) {
+        commit('setTheme', theme);
+        localStorage.setItem('theme', theme);
+    }
+
+    async function setSfw({ commit }, sfw) {
+        commit('setSfw', sfw);
+        localStorage.setItem('sfw', sfw);
+    }
+
     return {
         setFilter,
         setRange,
         setBatch,
+        setSfw,
+        setTheme,
     };
 }
 

assets/js/ui/mutations.js

@@ -10,8 +10,18 @@ function setBatch(state, batch) {
     state.batch = batch;
 }
 
+function setSfw(state, sfw) {
+    state.sfw = sfw;
+}
+
+function setTheme(state, theme) {
+    state.theme = theme;
+}
+
 export default {
     setFilter,
     setRange,
     setBatch,
+    setSfw,
+    setTheme,
 };

assets/js/ui/state.js

@@ -1,9 +1,13 @@
 const storedFilter = localStorage.getItem('filter');
 const storedRange = localStorage.getItem('range');
 const storedBatch = localStorage.getItem('batch');
+const storedSfw = localStorage.getItem('sfw');
+const storedTheme = localStorage.getItem('theme');
 
 export default {
     filter: storedFilter ? storedFilter.split(',') : ['gay', 'transsexual'],
     range: storedRange || 'latest',
     batch: storedBatch || 'all',
+    sfw: storedSfw === 'true' || false,
+    theme: storedTheme || 'light',
 };

migrations/20190325001339_releases.js

@@ -36,7 +36,9 @@ exports.up = knex => Promise.resolve()
         table.string('scraper', 32);
         table.string('copyright', 100);
         table.string('source', 1000);
+
         table.text('comment');
+        table.string('group');
 
         table.unique('hash');
         table.unique('source');
@@ -44,6 +46,28 @@ exports.up = knex => Promise.resolve()
         table.datetime('created_at')
             .defaultTo(knex.fn.now());
     }))
+    .then(() => knex.schema.createTable('media_sfw', (table) => {
+        table.increments('id', 12);
+
+        table.integer('media_id', 16)
+            .references('id')
+            .inTable('media');
+
+        table.unique('media_id');
+    }))
+    .then(() => knex.raw(`
+        CREATE FUNCTION get_random_sfw_media_id() RETURNS int AS $$
+            SELECT media_id FROM media_sfw
+            ORDER BY random()
+            LIMIT 1;
+        $$ LANGUAGE sql STABLE;
+    `))
+    .then(() => knex.schema.alterTable('media', (table) => {
+        table.integer('sfw_media_id', 16)
+            .references('id')
+            .inTable('media')
+            .defaultTo(knex.raw('get_random_sfw_media_id()'));
+    }))
     .then(() => knex.schema.createTable('tags_groups', (table) => {
         table.increments('id', 12);
 
@@ -562,9 +586,6 @@ exports.up = knex => Promise.resolve()
     `));
 
 exports.down = knex => knex.raw(`
-    DROP FUNCTION IF EXISTS releases_by_tag_slugs;
-    DROP FUNCTION IF EXISTS search_sites;
-
     DROP VIEW IF EXISTS movie_actors;
     DROP VIEW IF EXISTS movie_tags;
 
@@ -595,10 +616,15 @@ exports.down = knex => knex.raw(`
     DROP TABLE IF EXISTS social CASCADE;
     DROP TABLE IF EXISTS sites CASCADE;
     DROP TABLE IF EXISTS studios CASCADE;
+    DROP TABLE IF EXISTS media_sfw CASCADE;
     DROP TABLE IF EXISTS media CASCADE;
     DROP TABLE IF EXISTS countries CASCADE;
     DROP TABLE IF EXISTS networks CASCADE;
 
+    DROP FUNCTION IF EXISTS releases_by_tag_slugs;
+    DROP FUNCTION IF EXISTS search_sites;
+    DROP FUNCTION IF EXISTS get_random_sfw_media_id;
+
     DROP TEXT SEARCH CONFIGURATION IF EXISTS traxxx;
     DROP TEXT SEARCH DICTIONARY IF EXISTS traxxx_dict;
 `);

public/img/sfw/architecture/__credits.json

@@ -0,0 +1,152 @@
+{
+  "jBanV-D3T-Q": {
+    "user_name": "Dimitry Anikin",
+    "user_url": "https://unsplash.com/@anikinearthwalker?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/jBanV-D3T-Q?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "VoQ35NRfZro": {
+    "user_name": "Dabbas",
+    "user_url": "https://unsplash.com/@dabbas?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/VoQ35NRfZro?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "_u_wI4LaT7o": {
+    "user_name": "Alex Hudson",
+    "user_url": "https://unsplash.com/@aliffhassan91?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/_u_wI4LaT7o?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "oSmn4cbhl8w": {
+    "user_name": "Jorge Gardner",
+    "user_url": "https://unsplash.com/@gardnerjorge?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/oSmn4cbhl8w?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "c8GdokJMjWU": {
+    "user_name": "Mert Kahveci",
+    "user_url": "https://unsplash.com/@mertkahveci?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/c8GdokJMjWU?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "nfPguKj20Ac": {
+    "user_name": "Ilya Panasenko",
+    "user_url": "https://unsplash.com/@ipanasenko?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/nfPguKj20Ac?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "GGxUyCgfORg": {
+    "user_name": "photo_comments",
+    "user_url": "https://unsplash.com/@photo_comments?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/GGxUyCgfORg?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "oLUPaceKme0": {
+    "user_name": "Jack Schwartz",
+    "user_url": "https://unsplash.com/@jack_s81?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/oLUPaceKme0?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "bo6oz4m4OXY": {
+    "user_name": "Vinicius Henrique",
+    "user_url": "https://unsplash.com/@viniciushenrique?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/bo6oz4m4OXY?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "7HYbCXD2GSA": {
+    "user_name": "Theme Inn",
+    "user_url": "https://unsplash.com/@themeinn?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/7HYbCXD2GSA?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "6K4hh4VX3T0": {
+    "user_name": "SaiKrishna Saketh",
+    "user_url": "https://unsplash.com/@saiksaketh?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/6K4hh4VX3T0?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "lTxOZBNZ9yM": {
+    "user_name": "[2Ni]",
+    "user_url": "https://unsplash.com/@2ni?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/lTxOZBNZ9yM?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "H3mL3kocOQ4": {
+    "user_name": "Artur Matosyan",
+    "user_url": "https://unsplash.com/@artmatters?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/H3mL3kocOQ4?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "ijxxeMO3c8E": {
+    "user_name": "Larry Teo",
+    "user_url": "https://unsplash.com/@larrytwh?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/ijxxeMO3c8E?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "WMrd7-CjyF0": {
+    "user_name": "Anna Claire Schellenberg",
+    "user_url": "https://unsplash.com/@thinspacesproductions?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/WMrd7-CjyF0?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "FJIFiUCOTfc": {
+    "user_name": "Kirsten Drew",
+    "user_url": "https://unsplash.com/@k_drew?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/FJIFiUCOTfc?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "9daKXiWx5Eg": {
+    "user_name": "Anastasia Dulgier",
+    "user_url": "https://unsplash.com/@dulgier?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/9daKXiWx5Eg?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "47QjuZBn5dQ": {
+    "user_name": "Murugavel Oli",
+    "user_url": "https://unsplash.com/@olimurugavel123?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/47QjuZBn5dQ?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "yjR2ne1gtAA": {
+    "user_name": "Marius",
+    "user_url": "https://unsplash.com/@marius_oprea?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/yjR2ne1gtAA?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "y9vO3FWDZb0": {
+    "user_name": "bckfwd",
+    "user_url": "https://unsplash.com/@bckfwd?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/y9vO3FWDZb0?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "Ro6CB6x-VUg": {
+    "user_name": "Andreas NextVoyagePL",
+    "user_url": "https://unsplash.com/@nextvoyage_pl?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/Ro6CB6x-VUg?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "2td44mctvmI": {
+    "user_name": "Cameron Venti",
+    "user_url": "https://unsplash.com/@ventiviews?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/2td44mctvmI?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "M1uoNRrNrkE": {
+    "user_name": "Willian Justen de Vasconcellos",
+    "user_url": "https://unsplash.com/@willianjusten?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/M1uoNRrNrkE?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "L-2jRW74fPY": {
+    "user_name": "Daryan Shamkhali",
+    "user_url": "https://unsplash.com/@daryan?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/L-2jRW74fPY?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "NrzNScsGgp8": {
+    "user_name": "Guy Basabose",
+    "user_url": "https://unsplash.com/@guybas?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/NrzNScsGgp8?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "Qr5pi1_GlvY": {
+    "user_name": "Benno Klandt",
+    "user_url": "https://unsplash.com/@bennoklandt?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/Qr5pi1_GlvY?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "twruXW0M2Mw": {
+    "user_name": "sk",
+    "user_url": "https://unsplash.com/@rollelflex_graphy726?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/twruXW0M2Mw?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "B8vwUO2NM9Y": {
+    "user_name": "Stuart Frisby",
+    "user_url": "https://unsplash.com/@mrfrisby?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/B8vwUO2NM9Y?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "p9jBrqMSU6Q": {
+    "user_name": "Han Leentvaar",
+    "user_url": "https://unsplash.com/@hleen?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/p9jBrqMSU6Q?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  },
+  "4rGlazYAV3I": {
+    "user_name": "Dmitry Bayer",
+    "user_url": "https://unsplash.com/@dmitrybayer?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit",
+    "photo_url": "https://unsplash.com/photos/4rGlazYAV3I?utm_source=unsample&utm_medium=referral&utm_campaign=api-credit"
+  }
+}