mirror of https://gitlab.com/bashrc2/epicyon
1401 lines
33 KiB
HTML
1401 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<meta charset="utf-8">
|
|
<style>
|
|
@charset "UTF-8";
|
|
|
|
:root {
|
|
--main-bg-color: #282c37;
|
|
--dropdown-bg-color: #111;
|
|
--dropdown-bg-color-hover: #333;
|
|
--main-bg-color-reply: #212c37;
|
|
--main-bg-color-dm: #222;
|
|
--main-bg-color-report: #221c27;
|
|
--main-header-color-roles: #282237;
|
|
--main-fg-color: #dddddd;
|
|
--main-link-color: #999;
|
|
--main-visited-color: #888;
|
|
--border-color: #505050;
|
|
--font-size-header: 18px;
|
|
--font-color-header: #ccc;
|
|
--font-size: 30px;
|
|
--text-entry-foreground: #ccc;
|
|
--text-entry-background: #111;
|
|
}
|
|
|
|
body, html {
|
|
background-color: var(--main-bg-color);
|
|
color: var(--main-fg-color);
|
|
|
|
height: 100%;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
max-width: 80%;
|
|
min-width: 950px;
|
|
margin: 0 auto;
|
|
font-size: var(--font-size);
|
|
}
|
|
|
|
a, u {
|
|
color: var(--main-fg-color);
|
|
}
|
|
|
|
a:visited{
|
|
color: var(--main-visited-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
a:link {
|
|
color: var(--main-link-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cwButton {
|
|
border-radius: 4px;
|
|
background-color: #999;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 26px;
|
|
padding: 2px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
|
|
.cwText {
|
|
display: none;
|
|
}
|
|
|
|
.pageicon {
|
|
width: 8%;
|
|
}
|
|
|
|
.timeline-banner {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("img/banner.png");
|
|
height: 10%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-image {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("image.png");
|
|
height: 50%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-text {
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: var(--font-color-header);
|
|
font-size: var(--font-size-header);
|
|
}
|
|
|
|
.new-post-text {
|
|
font-size: 24px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.new-post-subtext {
|
|
font-size: 18px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.highlight {
|
|
width: 2%;
|
|
}
|
|
|
|
.roles {
|
|
text-align: center;
|
|
left: 35%;
|
|
background-color: var(--main-header-color-roles);
|
|
}
|
|
|
|
.roles-inner {
|
|
padding: 10px 25px;
|
|
background-color: var(--main-bg-color);
|
|
}
|
|
|
|
.hero-text img {
|
|
border-radius: 1%;
|
|
width: 30%;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.hero-text img.emoji {
|
|
width: 50px;
|
|
padding: 0 0;
|
|
margin: 0 0;
|
|
float: none;
|
|
}
|
|
|
|
.hero-text button {
|
|
border: none;
|
|
outline: 0;
|
|
display: inline-block;
|
|
padding: 10px 25px;
|
|
color: black;
|
|
background-color: #ddd;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hero-text button:hover {
|
|
background-color: #555;
|
|
color: white;
|
|
}
|
|
|
|
.button {
|
|
border-radius: 4px;
|
|
background-color: #999;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
width: 10%;
|
|
max-width: 100px;
|
|
min-width: 80px;
|
|
transition: all 0.5s;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
|
|
.buttonunfollow {
|
|
border-radius: 4px;
|
|
background-color: #999;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
width: 20%;
|
|
max-width: 200px;
|
|
min-width: 100px;
|
|
transition: all 0.5s;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
float: right;
|
|
}
|
|
|
|
.buttonhighlighted {
|
|
border-radius: 4px;
|
|
background-color: green;
|
|
border: none;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
width: 10%;
|
|
max-width: 100px;
|
|
min-width: 80px;
|
|
transition: all 0.5s;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
|
|
.timelineIcon {
|
|
width: 10%;
|
|
}
|
|
|
|
.followApprove {
|
|
border-radius: 4px;
|
|
background-color: darkgreen;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
width: 15%;
|
|
max-width: 150px;
|
|
min-width: 100px;
|
|
cursor: pointer;
|
|
margin: 0 15px;
|
|
float: right;
|
|
}
|
|
|
|
.followDeny {
|
|
border-radius: 4px;
|
|
background-color: darkred;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
width: 15%;
|
|
max-width: 150px;
|
|
min-width: 100px;
|
|
cursor: pointer;
|
|
margin: 0 15px;
|
|
float: right;
|
|
}
|
|
|
|
.followRequestHandle {
|
|
padding: 0px 20px;
|
|
}
|
|
|
|
.button span {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
position: relative;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.button span:after {
|
|
content: '\00bb';
|
|
position: absolute;
|
|
opacity: 0;
|
|
top: 0;
|
|
right: -20px;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.button:hover span {
|
|
padding-right: 25px;
|
|
}
|
|
|
|
.button:hover span:after {
|
|
opacity: 1;
|
|
right: 0;
|
|
}
|
|
|
|
.buttonselected {
|
|
border-radius: 4px;
|
|
background-color: #666;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
width: 10%;
|
|
max-width: 100px;
|
|
min-width: 80px;
|
|
transition: all 0.5s;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
|
|
.buttonselectedhighlighted {
|
|
border-radius: 4px;
|
|
background-color: darkgreen;
|
|
border: none;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
width: 10%;
|
|
max-width: 100px;
|
|
min-width: 80px;
|
|
transition: all 0.5s;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
|
|
.buttonselected span {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
position: relative;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.buttonselected span:after {
|
|
content: '\00bb';
|
|
position: absolute;
|
|
opacity: 0;
|
|
top: 0;
|
|
right: -20px;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.buttonselected:hover span {
|
|
padding-right: 25px;
|
|
}
|
|
|
|
.buttonselected:hover span:after {
|
|
opacity: 1;
|
|
right: 0;
|
|
}
|
|
|
|
.container {
|
|
border: 2px solid var(--border-color);
|
|
background-color: var(--main-bg-color);
|
|
border-radius: 5px;
|
|
padding: 20px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.media {
|
|
width: 80%;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.message {
|
|
margin-left: 7%;
|
|
width: 90%;
|
|
}
|
|
|
|
.container p.administeredby {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.container::after {
|
|
content: "";
|
|
clear: both;
|
|
display: table;
|
|
}
|
|
|
|
.container img {
|
|
float: left;
|
|
max-width: 400px;
|
|
width: 5%;
|
|
padding: 0px 7px;
|
|
margin-right: 20px;
|
|
border-radius: 10%;
|
|
}
|
|
|
|
.searchEmoji {
|
|
-ms-transform: translateY(30%);
|
|
transform: translateY(30%);
|
|
float: none;
|
|
width: 80px;
|
|
margin: 0px 10px;
|
|
padding: 0px 0px;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.container img.emoji {
|
|
float: none;
|
|
width: 50px;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
padding-right: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.containericons {
|
|
padding: 0px 0px;
|
|
margin: 0px 0px;
|
|
}
|
|
|
|
.containericons img {
|
|
float: right;
|
|
max-width: 200px;
|
|
width: 6%;
|
|
border-radius: 0%;
|
|
}
|
|
|
|
.replyingto {
|
|
color: var(--main-fg-color);
|
|
}
|
|
|
|
.container img.announceOrReply {
|
|
float: none;
|
|
width: 30px;
|
|
margin: 0 0;
|
|
padding: 0 0;
|
|
border-radius: 0;
|
|
-ms-transform: translateY(25%);
|
|
transform: translateY(25%);
|
|
}
|
|
|
|
.container img.DMicon {
|
|
float: none;
|
|
width: 40px;
|
|
margin: 0 0;
|
|
padding: 0 0;
|
|
border-radius: 0;
|
|
-ms-transform: translateY(25%);
|
|
transform: translateY(25%);
|
|
}
|
|
|
|
.darker {
|
|
background-color: var(--main-bg-color-reply);
|
|
}
|
|
|
|
.dm {
|
|
background-color: var(--main-bg-color-dm);
|
|
}
|
|
|
|
.report {
|
|
border-color: #255;
|
|
background-color: var(--main-bg-color-report);
|
|
}
|
|
|
|
.container img.attachment {
|
|
max-width: 100%;
|
|
margin-left: 25%;
|
|
width: 50%;
|
|
border-radius: 10%;
|
|
}
|
|
.container img.right {
|
|
float: right;
|
|
margin-left: 0px;
|
|
margin-right:0;
|
|
padding: 0 0;
|
|
margin: 0 0;
|
|
}
|
|
.containericons img.right {
|
|
float: right;
|
|
margin-left: 20px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.time-right {
|
|
float: right;
|
|
color: #aaa;
|
|
margin: 4px 20px;
|
|
}
|
|
|
|
.post-title {
|
|
margin-top: 0px;
|
|
color: #444;
|
|
}
|
|
|
|
.share-title {
|
|
margin-top: 0px;
|
|
color: var(--main-fg-color);
|
|
}
|
|
|
|
.skill-title {
|
|
margin-left: 25%;
|
|
text-align: left;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #666;
|
|
line-height: 40px;
|
|
}
|
|
|
|
#myProgress {
|
|
float: left;
|
|
width: 70%;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
#myBar {
|
|
float: left;
|
|
width: 10%;
|
|
height: 30px;
|
|
background-color: #999;
|
|
}
|
|
|
|
.question {
|
|
font-size: var(--font-size);
|
|
}
|
|
|
|
input[type=radio] {
|
|
width: 32px;
|
|
}
|
|
|
|
input[type=text], select, textarea {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
margin-top: 6px;
|
|
margin-bottom: 16px;
|
|
resize: vertical;
|
|
font-size: 24px;
|
|
background-color: var(--main-bg-color-reply);
|
|
color: var(--main-fg-color);
|
|
}
|
|
|
|
input[type=number] {
|
|
width: 10%;
|
|
padding: 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
margin-top: 6px;
|
|
margin-bottom: 16px;
|
|
resize: vertical;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.labels {
|
|
font-size: 18px;
|
|
}
|
|
|
|
input[type=submit] {
|
|
background-color: #555;
|
|
color: white;
|
|
float: right;
|
|
margin: 10px 10px;
|
|
padding: 12px 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
width: 120px;
|
|
}
|
|
|
|
input.vote[type=submit] {
|
|
background-color: #555;
|
|
color: white;
|
|
float: left;
|
|
margin: 10px 10px;
|
|
padding: 12px 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
width: 120px;
|
|
}
|
|
|
|
.cancelbtn {
|
|
background-color: #555;
|
|
color: white;
|
|
float: right;
|
|
margin: 10px 10px;
|
|
padding: 12px 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
width: 120px;
|
|
}
|
|
|
|
.loginButton {
|
|
background-color: #2965;
|
|
color: #000;
|
|
float: none;
|
|
margin: 0px 10px;
|
|
padding: 12px 40px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 24px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
input[type=file] {
|
|
background-color: #555;
|
|
color: white;
|
|
padding: 12px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
}
|
|
|
|
input[type=submit]:hover {
|
|
background-color: #555;
|
|
}
|
|
|
|
.vertical-center {
|
|
max-width: 90%;
|
|
min-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 5% 0px;
|
|
}
|
|
|
|
/* The container <div> - needed to position the dropdown content */
|
|
.dropdown {
|
|
margin: 10px auto;
|
|
padding: 0px 14px;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown img {
|
|
opacity: 1.0;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0px 16px;
|
|
-ms-transform: translateY(-10%);
|
|
transform: translateY(-10%);
|
|
}
|
|
|
|
.timeline-avatar {
|
|
margin: 10px auto;
|
|
padding: 0px 0px;
|
|
}
|
|
|
|
.search-result-text {
|
|
font-size: var(--font-size);
|
|
}
|
|
|
|
.search-result img {
|
|
width: 7%;
|
|
padding: 0px 30px;
|
|
}
|
|
|
|
.timeline-avatar img {
|
|
opacity: 1.0;
|
|
width: 8%;
|
|
height: 8%;
|
|
padding: 0px 0px;
|
|
-ms-transform: translateY(-10%);
|
|
transform: translateY(-10%);
|
|
}
|
|
|
|
.scope-desc {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Dropdown Content (Hidden by Default) */
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: var(--dropdown-bg-color);
|
|
min-width: 600px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Links inside the dropdown */
|
|
.dropdown-content a {
|
|
color: var(--main-fg-color);
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-content img {
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0px 0px;
|
|
}
|
|
|
|
/* Change color of dropdown links on hover */
|
|
.dropdown-content a:hover {background-color: var(--dropdown-bg-color-hover);}
|
|
|
|
/* Show the dropdown menu on hover */
|
|
.show {display: block;}
|
|
|
|
input[type=checkbox]
|
|
{
|
|
-ms-transform: scale(2);
|
|
-moz-transform: scale(2);
|
|
-webkit-transform: scale(2);
|
|
-o-transform: scale(2);
|
|
transform: scale(2);
|
|
padding: 10px;
|
|
margin: 10px 5px;
|
|
}
|
|
|
|
.slider {
|
|
-webkit-appearance: none;
|
|
width: 57%;
|
|
height: 25px;
|
|
background: #d3d3d3;
|
|
outline: none;
|
|
opacity: 0.7;
|
|
-webkit-transition: .2s;
|
|
transition: opacity .2s;
|
|
float: right;
|
|
margin: 5px 0;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.slider:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 25px;
|
|
height: 25px;
|
|
background: var(--main-bg-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.slider::-moz-range-thumb {
|
|
width: 25px;
|
|
height: 25px;
|
|
background: var(--main-bg-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropbtn {
|
|
margin: 3%;
|
|
padding: 0px 14px;
|
|
position: relative;
|
|
display: inline-block;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropbtn img {
|
|
opacity: 1.0;
|
|
width: 3%;
|
|
height: 3%;
|
|
min-width: 40px;
|
|
padding: 0px 16px;
|
|
-ms-transform: translateY(-10%);
|
|
transform: translateY(-10%);
|
|
}
|
|
|
|
.intro {
|
|
font-size: 24px;
|
|
color: #999;
|
|
}
|
|
|
|
.matrix {
|
|
font-size: 24px;
|
|
color: #ddd;
|
|
}
|
|
|
|
.headerlink {
|
|
font-size: 30px;
|
|
color: white;
|
|
}
|
|
|
|
.siteheader {
|
|
font-size: 30px;
|
|
color: white;
|
|
}
|
|
|
|
footer {
|
|
float: right;
|
|
font-size: 18px;
|
|
}
|
|
|
|
@media screen and (min-width: 400px) {
|
|
body, html {
|
|
font-size: 22px;
|
|
}
|
|
.container img {
|
|
float: left;
|
|
max-width: 400px;
|
|
width: 5%;
|
|
padding: 0px 7px;
|
|
margin-right: 20px;
|
|
border-radius: 10%;
|
|
}
|
|
.container img.emojisearch {
|
|
float: right;
|
|
max-width: 400px;
|
|
width: 8%;
|
|
padding: 0px 7px;
|
|
margin-right: 20px;
|
|
border-radius: 10%;
|
|
}
|
|
.containericons img {
|
|
float: right;
|
|
max-width: 200px;
|
|
width: 3%;
|
|
margin: 0px 1%;
|
|
border-radius: 0%;
|
|
}
|
|
.timeline-avatar img {
|
|
opacity: 1.0;
|
|
width: 8%;
|
|
height: 8%;
|
|
padding: 0px 0px;
|
|
-ms-transform: translateY(-10%);
|
|
transform: translateY(-10%);
|
|
}
|
|
.cwButton {
|
|
border-radius: 4px;
|
|
background-color: #555;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
padding: 2px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
.button {
|
|
border-radius: 4px;
|
|
background-color: #999;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
width: 10%;
|
|
max-width: 100px;
|
|
min-width: 80px;
|
|
transition: all 0.5s;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
.buttonselected {
|
|
border-radius: 4px;
|
|
background-color: #666;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
width: 10%;
|
|
max-width: 100px;
|
|
min-width: 80px;
|
|
transition: all 0.5s;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
.pageicon {
|
|
width: 4%;
|
|
}
|
|
.time-right {
|
|
float: right;
|
|
color: #aaa;
|
|
margin: 4px 20px;
|
|
}
|
|
input[type=text], select, textarea {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
margin-top: 6px;
|
|
margin-bottom: 16px;
|
|
resize: vertical;
|
|
font-size: 24px;
|
|
background-color: var(--main-bg-color-reply);
|
|
color: var(--main-fg-color);
|
|
}
|
|
input[type=button], input[type=submit] {
|
|
background-color: #555;
|
|
color: white;
|
|
float: right;
|
|
padding: 10px;
|
|
margin: 15px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: var(--font-size);
|
|
width: 20%;
|
|
}
|
|
input.vote[type=submit] {
|
|
background-color: #555;
|
|
color: white;
|
|
float: left;
|
|
padding: 10px;
|
|
margin: 15px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: var(--font-size);
|
|
width: 20%;
|
|
}
|
|
input[type=file] {
|
|
background-color: #555;
|
|
color: white;
|
|
padding: 20px;
|
|
margin: 0px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: var(--font-size);
|
|
width: 96%;
|
|
}
|
|
.cancelbtn {
|
|
background-color: #555;
|
|
color: white;
|
|
float: right;
|
|
padding: 10px;
|
|
margin: 15px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: var(--font-size);
|
|
width: 20%;
|
|
}
|
|
.scope-desc {
|
|
font-size: 32px;
|
|
}
|
|
.buttonunfollow {
|
|
border-radius: 4px;
|
|
background-color: #999;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
width: 20%;
|
|
max-width: 200px;
|
|
min-width: 100px;
|
|
transition: all 0.5s;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
float: right;
|
|
}
|
|
.intro {
|
|
font-size: 24px;
|
|
color: #999;
|
|
}
|
|
|
|
.headerlink {
|
|
font-size: 30px;
|
|
color: white;
|
|
}
|
|
|
|
.siteheader {
|
|
font-size: 30px;
|
|
color: white;
|
|
}
|
|
|
|
footer {
|
|
float: right;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1000px) {
|
|
body, html {
|
|
font-size: 35px;
|
|
}
|
|
.container img {
|
|
float: left;
|
|
max-width: 400px;
|
|
width: 15%;
|
|
padding: 0px 7px;
|
|
margin-right: 20px;
|
|
border-radius: 10%;
|
|
}
|
|
.container img.emojisearch {
|
|
float: right;
|
|
max-width: 400px;
|
|
width: 12%;
|
|
padding: 0px 7px;
|
|
margin-right: 20px;
|
|
border-radius: 10%;
|
|
}
|
|
.containericons img {
|
|
float: right;
|
|
max-width: 200px;
|
|
width: 7%;
|
|
margin: 1% 3%;
|
|
border-radius: 0%;
|
|
}
|
|
.timeline-avatar img {
|
|
opacity: 1.0;
|
|
width: 15%;
|
|
height: 15%;
|
|
padding: 0px 0px;
|
|
-ms-transform: translateY(-10%);
|
|
transform: translateY(-10%);
|
|
}
|
|
.cwButton {
|
|
border-radius: 4px;
|
|
background-color: #555;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 32px;
|
|
padding: 2px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
.button {
|
|
border-radius: 4px;
|
|
background-color: #999;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 32px;
|
|
padding: 10px;
|
|
width: 20%;
|
|
max-width: 400px;
|
|
min-width: 80px;
|
|
transition: all 0.5s;
|
|
cursor: pointer;
|
|
margin: 15px;
|
|
}
|
|
.buttonselected {
|
|
border-radius: 4px;
|
|
background-color: #666;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 32px;
|
|
padding: 10px;
|
|
width: 20%;
|
|
max-width: 400px;
|
|
min-width: 80px;
|
|
transition: all 0.5s;
|
|
cursor: pointer;
|
|
margin: 15px;
|
|
}
|
|
.pageicon {
|
|
width: 8%;
|
|
}
|
|
.time-right {
|
|
float: right;
|
|
color: #aaa;
|
|
margin: 25px 20px;
|
|
}
|
|
input[type=text], select, textarea {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
margin-top: 6px;
|
|
margin-bottom: 16px;
|
|
resize: vertical;
|
|
font-size: 30px;
|
|
background-color: var(--main-bg-color-reply);
|
|
color: var(--main-fg-color);
|
|
}
|
|
input[type=button], input[type=submit] {
|
|
background-color: #555;
|
|
color: white;
|
|
float: right;
|
|
padding: 10px;
|
|
margin: 15px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 30px;
|
|
width: 20%;
|
|
}
|
|
input.vote[type=submit] {
|
|
background-color: #555;
|
|
color: white;
|
|
float: left;
|
|
padding: 10px;
|
|
margin: 15px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 30px;
|
|
width: 20%;
|
|
}
|
|
input[type=file] {
|
|
background-color: #555;
|
|
color: white;
|
|
padding: 20px;
|
|
margin: 0px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 30px;
|
|
width: 95.4%;
|
|
}
|
|
.cancelbtn {
|
|
background-color: #555;
|
|
color: white;
|
|
float: right;
|
|
padding: 10px;
|
|
margin: 15px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 30px;
|
|
width: 20%;
|
|
}
|
|
.scope-desc {
|
|
font-size: 30px;
|
|
}
|
|
.buttonunfollow {
|
|
border-radius: 4px;
|
|
background-color: #999;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
padding: 10px;
|
|
width: 20%;
|
|
max-width: 200px;
|
|
min-width: 100px;
|
|
transition: all 0.5s;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
float: right;
|
|
}
|
|
.intro {
|
|
font-size: 32px;
|
|
color: #999;
|
|
}
|
|
|
|
.headerlink {
|
|
font-size: 40px;
|
|
color: white;
|
|
}
|
|
|
|
.siteheader {
|
|
font-size: 40px;
|
|
color: white;
|
|
}
|
|
|
|
footer {
|
|
float: right;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
.imageright {
|
|
float: right;
|
|
}
|
|
|
|
.shell {
|
|
margin: 30px 30px;
|
|
width: 100%;
|
|
float: left;
|
|
font-family: Courier;
|
|
background-color: black;
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
<div class="timeline-banner"></div>
|
|
<center>
|
|
<br>
|
|
<table style="margin:1% 10%;width:90%" border="0">
|
|
<tr>
|
|
<th><a href="#install"><span class="headerlink">Install</span></a></th>
|
|
<th><a href="https://gitlab.com/bashrc2/epicyon"><span class="headerlink">Source code</span></a></th>
|
|
<th><a href="https://www.patreon.com/freedombone"><span class="headerlink">Donate</span></a></th>
|
|
</tr>
|
|
</table>
|
|
<p class="matrix">Matrix room: <b>#epicyon:matrix.freedombone.net</b></p>
|
|
<p class="intro">
|
|
Epicyon is an <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPL</a> licensed <a href="https://www.w3.org/TR/activitypub/">ActivityPub protocol</a> compliant <a href="https://en.wikipedia.org/wiki/Fediverse">federated social network</a> server suitable for hosting a small number of accounts on low power systems requiring minimal maintenance, such as single board computers. It's the ActivityPub equivalent of an email server, storing posts as human readable JSON on file, rather than in a database. It also uses only a small amount of RAM.
|
|
<p>
|
|
<p class="siteheader">An Internet of People, Not Corporate Agendas</p>
|
|
<p class="intro">
|
|
Epicyon is written in Python with a HTML+CSS web interface and uses <i>almost no javascript</i> which makes display in a web browser very lightweight.
|
|
</p>
|
|
|
|
<table style="margin:0% 0%;width:100%" border="0">
|
|
<tr>
|
|
<th><a href="img/screenshot_purple.jpg"><img width="90%" src="img/screenshot_purple.jpg" alt="purple theme timeline screenshot" /></a></th>
|
|
<th><a href="img/screenshot_hacker.jpg"><img width="90%" src="img/screenshot_hacker.jpg" alt="hacker theme profile page" /></a></th>
|
|
</tr>
|
|
<tr>
|
|
<th><img width="90%" src="img/screenshots.jpg" alt="various screenshots" /></th>
|
|
<th><img width="50%" src="img/mobile.jpg" alt="mobile screenshot" /></th>
|
|
</tr>
|
|
</table>
|
|
|
|
<p class="intro">
|
|
Emojis, hashtags, photos, video and audio attachments, instance and account level blocking controls, moderation functions and reports are all supported. Build the community you want and avoid the stuff you don't. No ads. No blockchains or other Silicon Valley garbage.
|
|
</p>
|
|
|
|
<p class="siteheader">Message Scopes</p>
|
|
<p class="intro">
|
|
Define the scope of your messages to reach the right people.
|
|
</p>
|
|
<img width="60%" src="img/messagescope.jpg" />
|
|
|
|
<p class="siteheader">International and Customizable</p>
|
|
<p class="intro">
|
|
Epicyon supports many languages. Translations and emoji can easily be added. Alter the logo, backgrounds, terms of service and style to create a unique personality for your instance. Choose from a few different themes, or make a new one.
|
|
</p>
|
|
<img width="70%" src="img/screenshot_light.jpg" alt="light theme timeline screenshot"/>
|
|
<img width="70%" src="img/screenshot_light2.jpg" alt="light theme profile page screenshot"/>
|
|
|
|
<p class="siteheader">Calendar Events</p>
|
|
<p class="intro">
|
|
When creating a new post you can optionally also add a date, time and place. This will show up on the calendars of your followers, and makes organizing meetups or other community events simple. You can use message scopes to set up public events or private ones. To create reminders you can send yourself a DM with an event and it will appear on only your calendar.
|
|
</p>
|
|
<img width="70%" src="img/calendar.jpg" alt="calendar screenshot"/>
|
|
|
|
<p class="siteheader">Media Timeline</p>
|
|
<p class="intro">
|
|
Some posts contain images and some don't. The media timeline enables you to view all your pet photos in one place.
|
|
</p>
|
|
<img width="70%" src="img/screenshot_media2.jpg" alt="media timeline screenshot"/>
|
|
<img width="70%" src="img/screenshot_media.jpg" alt="media timeline screenshot"/>
|
|
<img width="70%" src="img/screenshot_media3.jpg" alt="media timeline screenshot"/>
|
|
<p class="siteheader">Genuine Sharing Economy</p>
|
|
<p class="intro">
|
|
Barter and gift physical items or services with other people on your instance. Search for shared items which you might want or post items you no longer have a use for. Promote ride shares or available accomodation without any unnecessary companies in the middle. Pool resources between trusted friends to build solidarity and have fun.
|
|
</p>
|
|
<img width="70%" src="img/screenshot_shares.jpg" />
|
|
<p class="siteheader">Promote Your Skills and Build Teams</p>
|
|
<p class="intro">
|
|
Define a set of skills in your profile and search for other people who have the skills you need. Organize teams who can get things done!
|
|
</p>
|
|
<table style="margin:1% 10%;width:90%" border="0">
|
|
<tr>
|
|
<th><img width="90%" src="img/skills.jpg" /></th>
|
|
<th><img width="90%" src="img/skillssearch.jpg" /></th>
|
|
</tr>
|
|
</table>
|
|
<p class="siteheader">No Artificial Incentives</p>
|
|
<p class="intro">
|
|
No algorithmic timelines. No rating or ranking of people. No trending stuff. Removing the artficial cruft of social networking allows you to focus on things you <i>actually care about</i>, instead of what someone else thinks you should pay attention to.
|
|
</p>
|
|
<p id="install" class="siteheader">Install</p>
|
|
</center>
|
|
<p class="intro">On a Debian based system:</p>
|
|
<div class="shell">
|
|
<p>sudo apt-get -y install tor python3-pip python3-socks imagemagick python3-numpy python3-setuptools python3-crypto python3-dateutil python3-pil.imagetk python3-idna certbot nginx</p>
|
|
<p>sudo pip3 install beautifulsoup4 pycryptodome</p>
|
|
</div>
|
|
|
|
<p class="intro">
|
|
The following instructions install Epicyon to the <b>/etc</b> directory. It's not essential that it be installed there, and it could be in any other preferred directory.
|
|
</p>
|
|
|
|
<p class="intro">
|
|
Create a user for the server to run as:
|
|
</p>
|
|
<div class="shell">
|
|
<p>sudo su</p>
|
|
<p>adduser --system --home=/opt/epicyon --group epicyon</p>
|
|
</div>
|
|
|
|
<p class="intro">
|
|
Clone the repo:
|
|
</p>
|
|
<div class="shell">
|
|
<p>cd /etc</p>
|
|
<p>git clone https://gitlab.com/bashrc2/epicyon</p>
|
|
<p>chown -R epicyon:epicyon /opt/epicyon</p>
|
|
</div>
|
|
|
|
<p class="intro">
|
|
Create a daemon:
|
|
</p>
|
|
<div class="shell">
|
|
<p>nano /etc/systemd/system/epicyon.service</p>
|
|
</div>
|
|
<p class="intro">
|
|
Paste the following:
|
|
</p>
|
|
<div class="shell">
|
|
[Unit]<br>
|
|
Description=epicyon<br>
|
|
After=syslog.target<br>
|
|
After=network.target<br>
|
|
<br>
|
|
[Service]<br>
|
|
Type=simple<br>
|
|
User=epicyon<br>
|
|
Group=epicyon<br>
|
|
WorkingDirectory=/opt/epicyon<br>
|
|
ExecStart=/usr/bin/python3 /opt/epicyon/epicyon.py --port 443 --proxy 7156 --domain YOUR_DOMAIN --registration open --debug<br>
|
|
Environment=USER=epicyon<br>
|
|
Environment=PYTHONUNBUFFERED=true<br>
|
|
Restart=always<br>
|
|
StandardError=syslog<br>
|
|
CPUQuota=80%<br>
|
|
<br>
|
|
[Install]<br>
|
|
WantedBy=multi-user.target
|
|
</div>
|
|
<p class="intro">
|
|
Activate the daemon:
|
|
</p>
|
|
<div class="shell">
|
|
systemctl enable epicyon<br>
|
|
systemctl start epicyon
|
|
</div>
|
|
<p class="intro">
|
|
Create a web server configuration:
|
|
</p>
|
|
<div class="shell">
|
|
nano /etc/nginx/sites-available/YOUR_DOMAIN
|
|
</div>
|
|
<p class="intro">
|
|
And paste the following:
|
|
</p>
|
|
<div class="shell">
|
|
server {<br>
|
|
listen 80;<br>
|
|
listen [::]:80;<br>
|
|
server_name YOUR_DOMAIN;<br>
|
|
access_log /dev/null;<br>
|
|
error_log /dev/null;<br>
|
|
client_max_body_size 31m;<br>
|
|
client_body_buffer_size 128k;<br>
|
|
<br>
|
|
limit_conn conn_limit_per_ip 10;<br>
|
|
limit_req zone=req_limit_per_ip burst=10 nodelay;<br>
|
|
<br>
|
|
index index.html;<br>
|
|
rewrite ^ https://$server_name$request_uri? permanent;<br>
|
|
}<br>
|
|
<br>
|
|
server {<br>
|
|
listen 443 ssl;<br>
|
|
server_name YOUR_DOMAIN;<br>
|
|
<br>
|
|
ssl_stapling off;<br>
|
|
ssl_stapling_verify off;<br>
|
|
ssl on;<br>
|
|
ssl_certificate /etc/letsencrypt/live/YOUR_DOMAIN/fullchain.pem;<br>
|
|
ssl_certificate_key /etc/letsencrypt/live/YOUR_DOMAIN/privkey.pem;<br>
|
|
#ssl_dhparam /etc/ssl/certs/YOUR_DOMAIN.dhparam;<br>
|
|
<br>
|
|
ssl_session_cache builtin:1000 shared:SSL:10m;<br>
|
|
ssl_session_timeout 60m;<br>
|
|
ssl_prefer_server_ciphers on;<br>
|
|
ssl_protocols TLSv1.2 TLSv1.3;<br>
|
|
ssl_ciphers 'ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS';<br>
|
|
add_header X-Frame-Options DENY;<br>
|
|
add_header X-Content-Type-Options nosniff;<br>
|
|
add_header X-XSS-Protection "1; mode=block";<br>
|
|
add_header X-Download-Options noopen;<br>
|
|
add_header X-Permitted-Cross-Domain-Policies none;<br>
|
|
<br>
|
|
add_header X-Robots-Tag "noindex, nofollow, nosnippet, noarchive";<br>
|
|
add_header Strict-Transport-Security max-age=15768000;<br>
|
|
<br>
|
|
access_log /dev/null;<br>
|
|
error_log /dev/null;<br>
|
|
<br>
|
|
index index.html;<br>
|
|
<br>
|
|
location / {<br>
|
|
proxy_http_version 1.1;<br>
|
|
client_max_body_size 31M;<br>
|
|
proxy_set_header Upgrade $http_upgrade;<br>
|
|
proxy_set_header Connection "upgrade";<br>
|
|
proxy_set_header Host $http_host;<br>
|
|
proxy_set_header X-Real-IP $remote_addr;<br>
|
|
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;<br>
|
|
proxy_set_header X-Forward-Proto http;<br>
|
|
proxy_set_header X-Nginx-Proxy true;<br>
|
|
proxy_temp_file_write_size 64k;<br>
|
|
proxy_connect_timeout 10080s;<br>
|
|
proxy_send_timeout 10080;<br>
|
|
proxy_read_timeout 10080;<br>
|
|
proxy_buffer_size 64k;<br>
|
|
proxy_buffers 16 32k;<br>
|
|
proxy_busy_buffers_size 64k;<br>
|
|
proxy_redirect off;<br>
|
|
proxy_request_buffering off;<br>
|
|
proxy_buffering off;<br>
|
|
proxy_pass http://localhost:7156;<br>
|
|
}<br>
|
|
}
|
|
</div>
|
|
|
|
<p class="intro">
|
|
Enable the site:
|
|
</p>
|
|
<div class="shell">
|
|
ln -s /etc/nginx/sites-available/YOUR_DOMAIN /etc/nginx/sites-enabled/
|
|
</div>
|
|
|
|
<p class="intro">
|
|
Forward port 443 from your internet router to your server. If you have dynamic DNS make sure its configured. Add a TLS certificate:
|
|
</p>
|
|
<div class="shell">
|
|
certbot certonly -n --server https://acme-v01.api.letsencrypt.org/directory --standalone -d YOUR_DOMAIN --renew-by-default --agree-tos --email YOUR_EMAIL
|
|
</div>
|
|
<p class="intro">
|
|
Restart your web server:
|
|
</p>
|
|
<div class="shell">
|
|
systemctl restart nginx
|
|
</div>
|
|
<p class="intro">
|
|
If you are using the <a href="https://caddyserver.com">Caddy web server</a> then see <a href="https://code.freedombone.net/bashrc/epicyon/raw/main/caddy.example.conf">caddy.example.conf</a>
|
|
</p>
|
|
<p class="intro">
|
|
Now you can navigate to your domain and register an account. The first account becomes the administrator.
|
|
</p>
|
|
</body>
|
|
<footer>
|
|
<p>By: Bob Mottram <a href="mailto:bob@freedombone.net">bob@freedombone.net</a></p>
|
|
</footer>
|
|
</html>
|