781 lines
22 KiB
Vue
781 lines
22 KiB
Vue
|
<template>
|
||
|
|
<div class="max-links">
|
||
|
|
<div class="text-box">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Type some shit 😘🔎"
|
||
|
|
class="glass"
|
||
|
|
v-model="inputText"
|
||
|
|
v-on:keydown="filterKeydown"
|
||
|
|
v-on:keyup="filterLinks"
|
||
|
|
v-on:keyup.enter="webSearch"
|
||
|
|
ref="search"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div class="suggestions" v-if="suggestions.length > 0">
|
||
|
|
<div
|
||
|
|
class="suggestion"
|
||
|
|
v-for="(suggestion, index) in suggestions"
|
||
|
|
:class="{ active: suggestionIndex == index }"
|
||
|
|
>
|
||
|
|
{{ suggestion }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-for="column in columns" class="column">
|
||
|
|
<h2>{{ column }}</h2>
|
||
|
|
<div
|
||
|
|
v-for="link in sortedLinks(links, column)"
|
||
|
|
v-if="link?.title"
|
||
|
|
class="flex-child"
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
:href="setupUrl(link.url)"
|
||
|
|
class="max-link"
|
||
|
|
target="_blank"
|
||
|
|
v-on:click="linkClick"
|
||
|
|
v-if="link.column == column"
|
||
|
|
>
|
||
|
|
<span class="visual-aid">
|
||
|
|
{{ link.emoji }}
|
||
|
|
</span>
|
||
|
|
{{ link?.title }}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <div class="lip one"></div> -->
|
||
|
|
|
||
|
|
<span
|
||
|
|
v-on:click="clicks++"
|
||
|
|
class="small message"
|
||
|
|
v-html="generateMessage(2)"
|
||
|
|
></span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
let seed = ref(0);
|
||
|
|
let clicks = ref(0);
|
||
|
|
let inputText = ref("");
|
||
|
|
let suggestions = ref([]);
|
||
|
|
let suggestionIndex = ref(0);
|
||
|
|
let autocomplete = ref(["google.com", "gmail.com", "graxday.com"]);
|
||
|
|
let columns = ref(["web", "apps", "local", "dumb"]);
|
||
|
|
let links = ref([
|
||
|
|
{
|
||
|
|
column: "local",
|
||
|
|
url: "192.168.1.6",
|
||
|
|
title: "Tower",
|
||
|
|
emoji: "🖥️",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "local",
|
||
|
|
url: "192.168.1.242/admin",
|
||
|
|
title: "Pi-Hole",
|
||
|
|
emoji: "🌌",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "local",
|
||
|
|
url: "192.168.1.6:8112",
|
||
|
|
title: "Deluge",
|
||
|
|
emoji: "💦",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "local",
|
||
|
|
url: "192.168.1.164",
|
||
|
|
title: "Marvin",
|
||
|
|
emoji: "🧪",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "local",
|
||
|
|
url: "https://192.168.1.1",
|
||
|
|
title: "Router",
|
||
|
|
emoji: "📶",
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
column: "apps",
|
||
|
|
url: "192.168.1.164:9999/admin",
|
||
|
|
title: "Blog Editing",
|
||
|
|
emoji: "✏️",
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
column: "apps",
|
||
|
|
url: "www.solidscribe.com",
|
||
|
|
title: "Solid Scribe",
|
||
|
|
emoji: "🔏",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "web",
|
||
|
|
url: "www.wunderground.com/weather/us/az/flagstaff/KAZFLAGS335",
|
||
|
|
title: "Weather",
|
||
|
|
emoji: "🌦️",
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
column: "web",
|
||
|
|
url: "https://mail.protonmail.com/u/0/inbox",
|
||
|
|
title: "Proton Mail",
|
||
|
|
emoji: "📧",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "web",
|
||
|
|
url: "www.amazon.com",
|
||
|
|
title: "Amazon",
|
||
|
|
emoji: "🛒",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "web",
|
||
|
|
url: "www.camelcamelcamel.com",
|
||
|
|
title: "Camel Camel Camel",
|
||
|
|
emoji: "🐫",
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
column: "apps",
|
||
|
|
url: "spotify.com",
|
||
|
|
title: "Spotify",
|
||
|
|
emoji: "🎶",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "web",
|
||
|
|
url: "butcherbox.com",
|
||
|
|
title: "Butcher Box",
|
||
|
|
emoji: "📦",
|
||
|
|
},
|
||
|
|
{ column: "web", url: "gmail.com", title: "Gmail", emoji: "✉" },
|
||
|
|
{
|
||
|
|
column: "apps",
|
||
|
|
url: "schwab.com",
|
||
|
|
title: "Schwab",
|
||
|
|
emoji: "🤑",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "local",
|
||
|
|
url: "graxday.com",
|
||
|
|
title: "Grax Day",
|
||
|
|
emoji: "😘",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "web",
|
||
|
|
url: "https://drive.google.com/drive/u/0/folders/10hsNBu0o8at687PLc5mcfDtJkhjDcwk9?ths=true",
|
||
|
|
title: "Grax Day Docs",
|
||
|
|
emoji: "📄",
|
||
|
|
},
|
||
|
|
|
||
|
|
// {'column':'apps','url':'x.maxg.cc/code/?folder=/home/mab/ss', 'title':'Code Server', 'emoji':'🦿'},
|
||
|
|
{
|
||
|
|
column: "apps",
|
||
|
|
url: "pix.maxg.cc/library/import",
|
||
|
|
title: "PhotoPrism Import",
|
||
|
|
emoji: "📷",
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
column: "apps",
|
||
|
|
url: "http://git.maxg.cc",
|
||
|
|
title: "Gitea",
|
||
|
|
emoji: "🍵",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "web",
|
||
|
|
url: "https://forum.xda-developers.com/t/rom-13-op7pro-crdroid-v9-0-18-12-2022.4511589/page-12",
|
||
|
|
title: "OnePlus7 ISO",
|
||
|
|
emoji: "📱",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "local",
|
||
|
|
url: "https://localhost:47990/",
|
||
|
|
title: "Sunshine",
|
||
|
|
emoji: "☀️",
|
||
|
|
},
|
||
|
|
|
||
|
|
// dumb
|
||
|
|
{
|
||
|
|
column: "dumb",
|
||
|
|
url: "www.youtube.com",
|
||
|
|
title: "Youtube",
|
||
|
|
emoji: "📺",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "dumb",
|
||
|
|
url: "arstechnica.com",
|
||
|
|
title: "ArsTechnica",
|
||
|
|
emoji: "📰",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "dumb",
|
||
|
|
url: "phoronix.com",
|
||
|
|
title: "Phoronix",
|
||
|
|
emoji: "📰",
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
column: "dumb",
|
||
|
|
url: "slashdot.org/",
|
||
|
|
title: "Slashdot",
|
||
|
|
emoji: "📃",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "dumb",
|
||
|
|
url: "imgur.com",
|
||
|
|
title: "Imgur",
|
||
|
|
emoji: "😺",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "dumb",
|
||
|
|
url: "hackaday.com",
|
||
|
|
title: "Hack a Day",
|
||
|
|
emoji: "☠",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "dumb",
|
||
|
|
url: "duckduckgo.com",
|
||
|
|
title: "Duck Duck Go",
|
||
|
|
emoji: "🦆",
|
||
|
|
},
|
||
|
|
{ column: "dumb", url: "bing.com", title: "Bing", emoji: "🦑" },
|
||
|
|
{
|
||
|
|
column: "dumb",
|
||
|
|
url: "google.com",
|
||
|
|
title: "Google",
|
||
|
|
emoji: "🐚",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "dumb",
|
||
|
|
url: "https://www.etsy.com/shop/PowerfulSpell",
|
||
|
|
title: "Powerful Spell",
|
||
|
|
emoji: "🧚🏻",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "dumb",
|
||
|
|
url: "https://kbd.news/",
|
||
|
|
title: "KBD",
|
||
|
|
emoji: "⌨️",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
column: "web",
|
||
|
|
url: "https://store.epicgames.com/en-US/free-games",
|
||
|
|
title: "Free Game!",
|
||
|
|
emoji: "🎮",
|
||
|
|
},
|
||
|
|
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
{ url: "", title: "" },
|
||
|
|
]);
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
// setup autocomplete
|
||
|
|
Object.keys(this.links).forEach((key) => {
|
||
|
|
const link = this.links[key].url;
|
||
|
|
if (link) {
|
||
|
|
this.autocomplete.push(link);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// remove duplicates
|
||
|
|
// this.autocomplete = [...new Set(this.autocomplete)]
|
||
|
|
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.search.focus();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function sortedLinks(inLinks, category) {
|
||
|
|
let sortList = [];
|
||
|
|
inLinks.forEach((link) => {
|
||
|
|
const lowText = this.inputText.toLowerCase();
|
||
|
|
const searchTitle = link.title.toLowerCase().includes(lowText);
|
||
|
|
const searchUrl = link.url.toLowerCase().includes(lowText);
|
||
|
|
const searchFilter =
|
||
|
|
this.inputText == "" || searchTitle || searchUrl;
|
||
|
|
|
||
|
|
if (link.column == category && searchFilter) {
|
||
|
|
sortList.push(link);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return sortList.sort((a, b) => {
|
||
|
|
return a.title.localeCompare(b.title);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function setupIcon(title) {
|
||
|
|
title = title.toLowerCase().trim();
|
||
|
|
|
||
|
|
return icons[finalRandomIndex];
|
||
|
|
}
|
||
|
|
function setupUrl(inUrl) {
|
||
|
|
if (inUrl.indexOf("http") === -1) {
|
||
|
|
inUrl = "http://" + inUrl;
|
||
|
|
}
|
||
|
|
|
||
|
|
return inUrl.trim();
|
||
|
|
}
|
||
|
|
function filterKeydown(e) {
|
||
|
|
if (e.code != "Tab") {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (e.code == "Tab") {
|
||
|
|
e.preventDefault();
|
||
|
|
this.suggestionIndex++;
|
||
|
|
if (this.suggestionIndex > this.suggestions.length - 1) {
|
||
|
|
this.suggestionIndex = 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
function filterLinks(e) {
|
||
|
|
// if(e.code == 'Escape'){
|
||
|
|
// e.preventDefault()
|
||
|
|
// this.suggestions = []
|
||
|
|
// this.inputText = ''
|
||
|
|
// return
|
||
|
|
// }
|
||
|
|
// if(e.code == 'ArrowUp'){
|
||
|
|
// e.preventDefault()
|
||
|
|
// this.suggestionIndex--
|
||
|
|
// if(this.suggestionIndex <= -1){
|
||
|
|
// this.suggestionIndex = this.suggestions.length -1
|
||
|
|
// }
|
||
|
|
// return
|
||
|
|
// }
|
||
|
|
// if(e.code == 'ArrowDown'){
|
||
|
|
// e.preventDefault()
|
||
|
|
// this.suggestionIndex++
|
||
|
|
// if(this.suggestionIndex > this.suggestions.length-1){
|
||
|
|
// this.suggestionIndex = 0
|
||
|
|
// }
|
||
|
|
// return
|
||
|
|
// }
|
||
|
|
if (e.code == "Tab" || e.code == "Enter") {
|
||
|
|
e.preventDefault();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.suggestionIndex = -1;
|
||
|
|
this.suggestions = [];
|
||
|
|
|
||
|
|
const searchString = String(e.target.value)
|
||
|
|
.trim()
|
||
|
|
.toLowerCase()
|
||
|
|
.replace("www.", "");
|
||
|
|
|
||
|
|
if (searchString.length < 2) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.autocomplete.forEach((entry) => {
|
||
|
|
const test = entry.toLowerCase().indexOf(searchString);
|
||
|
|
if (test >= 0) {
|
||
|
|
this.suggestions.push(entry);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
this.suggestions = this.suggestions.splice(0, 2);
|
||
|
|
}
|
||
|
|
function webSearch(e) {
|
||
|
|
// go to suggestion
|
||
|
|
if (this.suggestions.length >= 1) {
|
||
|
|
window.location.href = `https://${this.suggestions[0]}`;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// go straight to URLs
|
||
|
|
const urlCheck = String(e.target.value).trim();
|
||
|
|
if (urlCheck.indexOf(".") > -1 && urlCheck.indexOf(" ") == -1) {
|
||
|
|
let goodUrl = urlCheck.replace("http://", "").replace("www.", "");
|
||
|
|
window.location.href = `https://www.${goodUrl}`;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Skip empty strings
|
||
|
|
if (e.target.value == "") {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// duck duck go search
|
||
|
|
let webString = String(e.target.value).replaceAll(" ", "+");
|
||
|
|
window.location.href = `https://duckduckgo.com/?hps=1&q=${webString}`;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
function generateMessage(index) {
|
||
|
|
let message = "";
|
||
|
|
let m = [];
|
||
|
|
|
||
|
|
var now = new Date();
|
||
|
|
var days = [
|
||
|
|
"Sunday",
|
||
|
|
"Monday",
|
||
|
|
"Tuesday",
|
||
|
|
"Wednesday",
|
||
|
|
"Thursday",
|
||
|
|
"Friday",
|
||
|
|
"Saturday",
|
||
|
|
];
|
||
|
|
var months = [
|
||
|
|
"January",
|
||
|
|
"February",
|
||
|
|
"March",
|
||
|
|
"April",
|
||
|
|
"May",
|
||
|
|
"June",
|
||
|
|
"July",
|
||
|
|
"August",
|
||
|
|
"September",
|
||
|
|
"October",
|
||
|
|
"November",
|
||
|
|
"December",
|
||
|
|
];
|
||
|
|
|
||
|
|
var day = days[now.getDay()];
|
||
|
|
var month = months[now.getMonth()];
|
||
|
|
|
||
|
|
this.seed =
|
||
|
|
parseInt(`${now.getMonth()}${now.getHours()}${now.getDay()}`) +
|
||
|
|
this.clicks;
|
||
|
|
|
||
|
|
let weekday =
|
||
|
|
day + ", " + month + " " + now.getDate() + "<sup>th</sup>";
|
||
|
|
|
||
|
|
if (index == 1) {
|
||
|
|
m = [
|
||
|
|
[
|
||
|
|
"Continue",
|
||
|
|
"Keep on",
|
||
|
|
"Don't stop",
|
||
|
|
"Persist",
|
||
|
|
"Never stop",
|
||
|
|
"Without falter keep",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"Slaying",
|
||
|
|
"Rocking",
|
||
|
|
"Fighting",
|
||
|
|
"murdering",
|
||
|
|
"betraying",
|
||
|
|
"stabbing",
|
||
|
|
"killing",
|
||
|
|
"dancing",
|
||
|
|
],
|
||
|
|
[weekday],
|
||
|
|
];
|
||
|
|
}
|
||
|
|
if (index == 2 && this.seed % 2 == 0) {
|
||
|
|
m = [
|
||
|
|
["You", "The world", "The universe", "Your life"],
|
||
|
|
[
|
||
|
|
"really",
|
||
|
|
"could be",
|
||
|
|
"might be",
|
||
|
|
"certainly",
|
||
|
|
"will turn out to be",
|
||
|
|
"will be",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"tough",
|
||
|
|
"strong",
|
||
|
|
"a champ",
|
||
|
|
"a bitch",
|
||
|
|
"stronger than a bull",
|
||
|
|
"another day",
|
||
|
|
"a fine one",
|
||
|
|
"sick nasty",
|
||
|
|
],
|
||
|
|
["."],
|
||
|
|
["\nAll your"],
|
||
|
|
[
|
||
|
|
"exploits",
|
||
|
|
"missions",
|
||
|
|
"endeavors",
|
||
|
|
"journeys",
|
||
|
|
"limbs",
|
||
|
|
"friendships",
|
||
|
|
"meetings",
|
||
|
|
"destinations",
|
||
|
|
"plants",
|
||
|
|
"thoughts",
|
||
|
|
"dreams",
|
||
|
|
"projects",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"will",
|
||
|
|
"could",
|
||
|
|
"may",
|
||
|
|
"certainly will",
|
||
|
|
"are going to",
|
||
|
|
"are about to",
|
||
|
|
"will",
|
||
|
|
"will",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"succeed",
|
||
|
|
"avail",
|
||
|
|
"pass",
|
||
|
|
"make good",
|
||
|
|
"grow famous",
|
||
|
|
"work",
|
||
|
|
"profit",
|
||
|
|
"reap success",
|
||
|
|
"conquer",
|
||
|
|
"avail",
|
||
|
|
"thrive",
|
||
|
|
"flourish",
|
||
|
|
"triumph",
|
||
|
|
],
|
||
|
|
["."],
|
||
|
|
];
|
||
|
|
}
|
||
|
|
if (index == 2 && this.seed % 2 == 1) {
|
||
|
|
m = [
|
||
|
|
["Things", "Stuff", "Its", "Everything"],
|
||
|
|
["are not", "ain't", "is not"],
|
||
|
|
["so", "that"],
|
||
|
|
["bad", "grim", "brutal", "hard", "stuffy", "saddening"],
|
||
|
|
[".", ".", ".", ".", ".", ".", ".", "?"],
|
||
|
|
["\nGet", "\nRun", "\nSprint", "\nShamble"],
|
||
|
|
["out there", "in there", "on over", "along now", "on over"],
|
||
|
|
["and"],
|
||
|
|
["seize", "grab", "embrace", "hug", "curb stomp", "smash"],
|
||
|
|
["the", "those", "thine"],
|
||
|
|
["tasty", "special", "spicy", "magical", "wicked", "powerful"],
|
||
|
|
[
|
||
|
|
"day",
|
||
|
|
"goals",
|
||
|
|
"missions",
|
||
|
|
"pants",
|
||
|
|
"trees",
|
||
|
|
"dreams",
|
||
|
|
"pants",
|
||
|
|
"goats",
|
||
|
|
"grundus",
|
||
|
|
],
|
||
|
|
["."],
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
m.forEach((part) => {
|
||
|
|
// const p = part[Math.floor(Math.random() * part.length)]
|
||
|
|
const p = part[this.seed % part.length];
|
||
|
|
let space = " ";
|
||
|
|
if (p == "." || p == "?") {
|
||
|
|
space = "";
|
||
|
|
}
|
||
|
|
message += space + p;
|
||
|
|
});
|
||
|
|
|
||
|
|
return "<span>" + message + "</span>";
|
||
|
|
}
|
||
|
|
function linkClick() {
|
||
|
|
setTimeout(() => {
|
||
|
|
console.log("Close a boy");
|
||
|
|
window.open("", "_self").close();
|
||
|
|
}, 250);
|
||
|
|
}
|
||
|
|
function onCluck() {
|
||
|
|
console.log("hi");
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
html {
|
||
|
|
font-family: Roboto, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
background-image: none;
|
||
|
|
|
||
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.25' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
|
||
|
|
linear-gradient(
|
||
|
|
135deg,
|
||
|
|
rgba(0, 0, 0, 0) 1%,
|
||
|
|
rgba(0, 8, 70, 0.56) 60%
|
||
|
|
),
|
||
|
|
radial-gradient(
|
||
|
|
circle at left bottom,
|
||
|
|
rgb(179, 0, 193) 0%,
|
||
|
|
rgb(0, 0, 0) 50%
|
||
|
|
);
|
||
|
|
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
width: calc(100% - 20px);
|
||
|
|
margin: 0 10px 15px;
|
||
|
|
font-size: 1.4em;
|
||
|
|
border-radius: 4px;
|
||
|
|
outline: none;
|
||
|
|
padding: 10px 15px;
|
||
|
|
border: none;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.message {
|
||
|
|
display: inline-block;
|
||
|
|
width: 100%;
|
||
|
|
color: white;
|
||
|
|
font-size: 1.5em;
|
||
|
|
text-align: center;
|
||
|
|
border-bottom: 1px solid white;
|
||
|
|
padding: 0 0 5px 0;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
}
|
||
|
|
.large.message {
|
||
|
|
padding: 0 0 5px 0;
|
||
|
|
font-size: 2em;
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
.small.message {
|
||
|
|
padding: 5px 0 15px 0;
|
||
|
|
font-size: 1em;
|
||
|
|
border-bottom: none;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 80vh;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.column {
|
||
|
|
width: 25%;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
text-align: center;
|
||
|
|
color: white;
|
||
|
|
text-transform: capitalize;
|
||
|
|
}
|
||
|
|
.max-links {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-evenly;
|
||
|
|
align-items: flex-start;
|
||
|
|
align-content: space-evenly;
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.flex-child {
|
||
|
|
width: calc(100% - 10px);
|
||
|
|
margin: 0 0 10px;
|
||
|
|
}
|
||
|
|
.glass {
|
||
|
|
background-color: rgba(255, 255, 255, 0.25);
|
||
|
|
border-radius: 4px;
|
||
|
|
backdrop-filter: blur(3px);
|
||
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.max-link {
|
||
|
|
display: inline-block;
|
||
|
|
box-sizing: border-box;
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: rgba(255, 255, 255, 0.25);
|
||
|
|
border-radius: 4px;
|
||
|
|
width: 100%;
|
||
|
|
font-size: 0.8em;
|
||
|
|
padding: 10px 10px;
|
||
|
|
text-decoration: none;
|
||
|
|
color: white;
|
||
|
|
word-break: break-word;
|
||
|
|
backdrop-filter: blur(2px);
|
||
|
|
/* border: 2px solid rgba(255,255,255,0.1);*/
|
||
|
|
font-size: 1.1em;
|
||
|
|
}
|
||
|
|
.max-link:hover {
|
||
|
|
transition: all 0.4s ease-out;
|
||
|
|
/* background-color: #35004d;*/
|
||
|
|
backdrop-filter: blur(7px);
|
||
|
|
}
|
||
|
|
.visual-aid {
|
||
|
|
display: inline-block;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0 5px 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-box {
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.suggestions {
|
||
|
|
display: inline-block;
|
||
|
|
background-color: white;
|
||
|
|
position: absolute;
|
||
|
|
top: 49px;
|
||
|
|
left: 0px;
|
||
|
|
right: 0;
|
||
|
|
z-index: 2;
|
||
|
|
border-bottom-left-radius: 4px;
|
||
|
|
border-bottom-right-radius: 4px;
|
||
|
|
margin: 0 10px 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
box-shadow: 0px 4px 3px 0px gray;
|
||
|
|
|
||
|
|
background-color: rgba(255, 255, 255, 0.25);
|
||
|
|
backdrop-filter: blur(4px);
|
||
|
|
}
|
||
|
|
.suggestion {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 4px;
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.suggestion.active {
|
||
|
|
background-color: purple;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nose,
|
||
|
|
.lip,
|
||
|
|
.eye {
|
||
|
|
display: inline-block;
|
||
|
|
background-color: rgba(255, 255, 255, 0.18);
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 5px 10px;
|
||
|
|
backdrop-filter: blur(3px);
|
||
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
||
|
|
}
|
||
|
|
.lip {
|
||
|
|
width: calc(100% - 35px);
|
||
|
|
}
|
||
|
|
.lip.one {
|
||
|
|
height: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width: 600px) {
|
||
|
|
.max-links {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 992px) {
|
||
|
|
.max-links {
|
||
|
|
width: 70%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|