[html]
<style>
/****************************************
RESET
-----
*****************************************/
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
font-size: 100%;
vertical-align: baseline;
box-sizing: border-box;
}
*:focus,
button,
textarea,
.forminput {
border: none;
outline: none !important;
}
textarea,
.forminput {
padding: 15px;
background: RGBA(var(--lighterRGB), 0.75);
border: solid 1px RGBA(var(--accentRGB), 0.5);
border-radius: 5px;
outline: none !important;
}
form[name="skin"] .forminput {
max-width: 50vw;
white-space: normal;
word-break: break-word;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
/*****************************
HIDE BROKEN LINKS & IMAGES
*****************************/
img[src="<i>No Information</i>"],
img[src=""],
a[href="<i>No Information</i>"],
a[href=""]:not([name]):not([onclick]) {
display: none !important;
}
/*****************************
RESIZING EMOJIS
*****************************/
a[href*="javascript:emoticon"] img,
div.postcolor img[alt*="https"],
td[class*="post"] img[alt*="https"],
a[href*="javascript:add_smilie"] img,
#ucpcontent img[alt*="https"],
div.box img[alt*="https"] {
height: 20px;
}
/****************************************
DEFAULT VARIABLES
*****************************************/
:root {
--headerIMG: url("https://s3.gifyu.com/images/bb0HE.webp");
/** Default Colours **/
--accent: #8e111a;
--accentRGB: 142, 17, 26;
--support: #7b9483;
--supportRGB: 123, 148, 131;
/** Neutrals or "black and white" **/
--dark: #1c1a1a;
--darkRGB: 28, 26, 26;
--darker: #;
--darkerRGB: ;
--lighter: #dbdbdb;
--lighterRGB: 219, 219, 219;
--light: #cbcbcb;
--lightRGB: 203, 203, 203;
/** Accents remain irregardless of theme change **/
--darkest: #1c1a1a;
--darkestRGB: 28, 26, 26;
--lightest: #dbdbdb;
--lightestRGB: 219, 219, 219;
/** Font Variables **/
--fontSize: 1rem;
--fontBody: Quicksand;
--fontTitle: "Cookie", cursive;
}
[data-theme="dark"] * {
/** Inverted version of above variables, feel free to customise.
Just remember in "dark" version, "light" variables are actuallyalign-content
dark, and "dark" variables are actually light **/
--lighter: #131313;
--lighterRGB: 19, 19, 19;
--light: #1d1d1d;
--lightRGB: 29, 29, 29;
--darker: #dbdbdb;
--darkerRGB: 219, 219, 219;
--dark: #c3c3c3;
--darkRGB: 195, 195, 195;
}
/****************************************
MEMBERGROUP VARIABLES
*****************************************/
/** Guest **/
.group-2 {
}
/** Pending **/
.group-3 {
--headerIMG: url("https://s3.gifyu.com/images/bbVPi.webp") !important;
--accent: #8476b3;
--accentRGB: 132, 118, 179;
--support: #659197;
--supportRGB: 101, 145, 151;
}
/** Admin **/
.group-4 {
--headerIMG: url("https://s3.gifyu.com/images/bbVV8.webp") !important;
--accent: #c6593d;
--accentRGB: 198, 89, 61;
--support: #688284;
--supportRGB: 104, 130, 132;
}
[data-theme="dark"] body.group-3,
[data-theme="dark"] body.group-4 {
background-blend-mode: difference;
}
/** Other **/
/****************************************
DEFAULT
*****************************************/
body,
html {
margin: 0px;
padding: 0px;
scroll-behavior: smooth;
font: 500 var(--fontSize) / 150% var(--fontBody);
color: var(--dark);
}
body {
background-color: var(--light);
background-image: url(https://files.jcink.net/uploads2/skinsb … gLight.png),
radial-gradient(circle at top, var(--light) 30%, var(--support) 110%);
background-position: center;
background-attachment: fixed;
}
[data-theme="dark"] body {
background-color: var(--light);
background-image: url(https://files.jcink.net/uploads2/skinsb … bgDark.png),
radial-gradient(circle at bottom, var(--light) 30%, var(--accent) 110%);
background-blend-mode: color;
}
a {
text-decoration: none;
cursor: crosshair;
color: var(--accent);
}
button {
padding: 0px;
margin: 0px;
background: unset !important;
}
/****************************************
OUTER WRAPPER
*****************************************/
#outerWrapper {
position: relative;
display: block;
background: var(--lighter);
width: clamp(320px, 100%, 1300px);
padding: 30px;
min-height: 100vh;
margin: 0 auto;
}
/****************************************
TOPBAR
*****************************************/
#topbarNav {
position: sticky;
z-index: 999;
top: 0px;
display: flex;
justify-content: space-between;
gap: 30px;
background: RGBA(var(--darkestRGB), 1);
color: var(--lightest);
padding: 15px;
border-radius: 20px;
}
#topbarNav a,
#topbarNav button {
color: var(--lightest);
}
#topbarNav.scrolled {
border-radius: 0px;
margin: 0px -30px;
transition: all 0.3s ease;
}
/** Overwrite inline based on group 4 **/
.group-4 .adminView {
display: flex !important;
}
.group-2 #guestView,
.group-2 .guestNav {
display: flex !important;
}
.group-2 #memberView,
.group-2 .memberNav {
display: none !important;
}
a.messages,
a.notifications {
position: relative;
}
#memberView,
.group-2 #guestView {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
font-size: 20px;
}
.dropdownNav {
display: flex;
flex-direction: row;
justify-content: center;
gap: 15px;
font-size: 20px;
}
/******************
ALERT NOTIF
******************/
.alert-0 .alert {
display: none;
}
.alert {
display: flex;
}
.alert {
position: absolute;
z-index: -1;
top: -12px;
left: -11px;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
color: var(--light);
background: var(--support);
font-size: 0.8rem;
border-radius: 100%;
}
.group-4 .adminView,
.group-2 .guestView {
display: flex !important;
align-items: center;
gap: 10px;
}
.group-4 a.adminView {
color: var(--accent) !important;
}
.group-4 .adminView span,
.group-2 .guestView span {
display: inline-block;
max-width: 0;
text-transform: lowercase;
background: var(--lighter) !important;
color: var(--dark);
border-radius: 5px;
padding: 5px 10px;
font-size: 1rem;
overflow: hidden;
white-space: nowrap;
transition: max-width 0.3s ease, opacity 0.3s ease;
opacity: 0;
}
body.group-4 .adminView:hover span,
body.group-2 .guestView:hover span {
max-width: 120px;
opacity: 1;
}
/******************
TOPBAR AVATAR
******************/
.loggedInAvatar {
position: relative;
}
.avatarLink {
position: relative;
}
.loggedInAvatar img {
display: block;
width: 50px;
height: 50px;
border-radius: 10px;
object-fit: cover;
filter: drop-shadow(0 10px 60px var(--accent));
transition: transform 0.3s;
}
.uploadText {
position: absolute;
bottom: 0px;
left: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: RGBA(var(--accentRGB), 0.5);
color: var(--lightest);
padding: 5px 10px;
border-radius: 10px;
visibility: hidden;
opacity: 0;
transform: translateX(-50%);
transition: opacity 0.3s, visibility 0.3s;
}
.avatarLink:hover .uploadText {
visibility: visible;
opacity: 1;
}
.group-2 .loggedInAvatar {
pointer-events: none;
}
.group-2 .uploadText {
display: none;
}
/***************************
ACCESSIBILITY DROPDOWN
****************************/
.accessibility-menu {
position: relative;
display: inline-block;
}
.menu-toggle {
}
.menu-content {
position: absolute;
z-index: 1000;
top: 134px;
left: 0px;
display: flex;
flex-direction: column;
gap: 15px;
width: max-content;
font-size: var(--fontSize);
background: var(--accent);
padding: 30px;
filter: drop-shadow(0 10px 60px var(--darkest));
border-radius: 15px;
}
.menu-content i {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
padding: 20px;
background: var(--support);
border: solid 2px var(--lightest);
color: var(--lightest);
border-radius: 5px;
}
#theme_switch_click > .dark,
#theme_switch_click > .light,
.menu-content button {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.menu-content[hidden] {
display: none !important;
}
.nav-toggle,
.switch-toggle,
.menu-toggle {
display: inline-flex;
align-items: center;
border: none;
cursor: pointer;
overflow: hidden;
gap: 10px;
}
.nav-toggle span,
.switch-toggle span,
.menu-toggle span {
display: inline-block;
max-width: 0;
text-transform: lowercase;
background: var(--lighter) !important;
color: var(--dark);
border-radius: 5px;
padding: 5px 10px;
font-size: 1rem;
overflow: hidden;
white-space: nowrap;
transition: max-width 0.3s ease, opacity 0.3s ease;
opacity: 0;
}
.nav-toggle:hover span,
.switch-toggle:hover span,
.menu-toggle:hover span {
max-width: 150px;
opacity: 1;
}
/*************************
DARK/LIGHT TOGGLE
*************************/
#theme_switch_click #checkbox,
#theme_switch_click > .light,
#theme_switch_click > .dark {
display: none;
}
[data-theme="light"] #theme_switch_click > .light,
[data-theme="dark"] #theme_switch_click > .dark {
display: flex !important;
}
/***************
NAV POP-UP
**************/
.popup-navigation {
position: relative;
display: inline-block;
}
.nav-toggle {
display: flex;
}
.nav-content {
position: absolute;
z-index: 1000;
top: 134px;
width: max-content;
font-size: var(--fontSize);
background: var(--accent);
padding: 30px;
border-radius: 15px;
}
.nav-content .memberNav,
.nav-content .guestNav {
display: flex;
flex-direction: column;
justify-content: center;
gap: 15px;
}
.nav-content .memberNav i,
.nav-content .guestNav i {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
padding: 20px;
background: var(--support);
border: solid 2px var(--lightest);
color: var(--lightest);
border-radius: 5px;
}
.nav-content .memberNav a,
.nav-content .guestNav a {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.nav-content[hidden] {
display: none !important;
}
/***************
SWITCH POP-UP
**************/
.group-2 .switch-menu {
display: none;
}
.switch-content {
position: absolute;
z-index: 1000;
top: 149px;
display: flex;
flex-direction: row;
gap: 30px;
background: var(--accent);
font-size: var(--fontSize);
padding: 30px;
filter: drop-shadow(0 10px 60px var(--darkest));
border-radius: 15px;
}
.switch-content[hidden] {
display: none !important;
}
.popupTitle {
display: flex;
flex-direction: column;
gap: 5px;
color: var(--lightest);
font-size: 1.25rem;
text-transform: lowercase;
padding: 15px 10px;
width: max-content;
border-radius: 10px;
border: solid 2px var(--lightest);
}
.popupTitle b {
font-size: 1rem;
font-weight: 800;
}
.switch {
font-size: 0px;
}
.switch input {
display: none;
}
/****************************************
BOARD NAV TREE
*****************************************/
#boardNav {
position: sticky;
z-index: 999;
top: 59px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 15px;
text-transform: lowercase;
width: max-content;
min-width: 50%;
height: 47px;
line-height: 24px;
white-space: nowrap;
text-overflow: ellipsis;
display: flex;
gap: 0.5rem;
max-width: calc(100% - 90px);
padding: 10px 15px;
background: var(--accent);
color: var(--lightest);
border-radius: 15px;
margin: -21px 45px 30px;
overflow: hidden;
}
#boardNav a {
color: var(--lightest);
flex-shrink: 0;
min-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#navstrip {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.navStart {
font-family: var(--fontTitle);
font-size: 1.3rem;
padding: 0px 10px;
font-weight: 800;
border: solid 2px var(--lightest);
border-radius: 10px;
margin: -2px 10px -2px -6px;
}
#boardNav br {
display: none;
}
.navDivide {
margin: 0px 5px;
}
.navTransition {
position: absolute;
top: -43px;
left: 63px;
width: 20px;
height: 45px;
background: var(--accent);
}
.navTransitionBottom {
position: absolute;
top: 0px;
width: 20px;
height: 35px;
background: var(--accent);
}
.navTransition:before {
content: "";
position: absolute;
z-index: -1;
top: 0px;
right: -53px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--accent);
transform: rotate(180deg);
}
.navTransition:after {
content: "";
position: absolute;
z-index: -1;
top: 0px;
left: -53px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--accent);
transform: rotate(275deg);
}
.navTransitionBottom:before {
content: "";
position: absolute;
z-index: -1;
bottom: -9px;
right: -53px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--accent);
transform: rotate(104deg);
}
.navTransitionBottom:after {
content: "";
position: absolute;
z-index: -1;
bottom: -9px;
left: -53px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--accent);
transform: rotate(6deg);
}
/****************************************
HEADER
*****************************************/
#headerSection {
display: grid;
grid-template-columns: 1fr 0.6fr;
grid-template-rows: auto auto;
gap: 0px 30px;
padding: 30px;
background: var(--light);
border-radius: 20px;
height: 100%;
}
#headerSection > a {
grid-area: headerSection;
}
#boardHeader {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: var(--accent);
background-image: var(--headerIMG),
url(https://files.jcink.net/uploads2/skinsb … gLight.png),
radial-gradient(
circle at center,
var(--support) 52%,
var(--light) 53%,
var(--accent) 45%
);
background-position: center;
max-width: 736px;
min-height: 600px;
max-height: 766px;
border-radius: 20px;
}
[data-theme="dark"] #boardHeader {
background-image: var(--headerIMG),
url(https://files.jcink.net/uploads2/skinsb … bgDark.png),
radial-gradient(
circle at center,
var(--support) 52%,
var(--light) 53%,
var(--accent) 45%
);
}
#boardHeader:after {
content: "";
display: block;
position: absolute;
width: 50%;
height: 50%;
background-color: var(--lightest);
border-radius: 50%;
filter: blur(50px);
opacity: 0.25;
}
#boardHeader .topTag,
#boardHeader .bottomTag {
position: absolute;
z-index: 1;
color: var(--dark);
padding: 5px;
}
#boardHeader .topTag {
top: 0px;
left: 0px;
background: var(--light);
min-height: 40px;
padding: 8px 15px 8px 0px;
border-radius: 0px 0px 20px;
}
#boardHeader .topTag b {
color: var(--accent);
font-weight: 800;
}
[data-theme="dark"] #boardHeader .topTag b {
color: var(--support);
}
#boardHeader .topTag:before {
content: "";
position: absolute;
z-index: -1;
top: 0px;
right: -45px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(180deg);
}
#boardHeader .topTag:after {
content: "";
position: absolute;
z-index: -1;
bottom: -45px;
left: 0px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(175deg);
}
#boardHeader .bottomTag {
bottom: -5px;
right: -5px;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
}
#boardHeader .bottomTag .upperText,
#boardHeader .bottomTag .lowerText {
position: relative;
z-index: 3;
width: max-content;
min-height: 35px;
background-color: var(--light);
padding: 8px 15px 0px;
}
#boardHeader .bottomTag .upperText {
border-radius: 20px 0px 0px;
font-weight: 800;
color: var(--accent);
}
[data-theme="dark"] #boardHeader .bottomTag .upperText {
color: var(--support);
}
#boardHeader .bottomTag .upperText:before {
content: "";
position: absolute;
z-index: -1;
top: -45px;
right: 0px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(360deg);
}
#boardHeader .bottomTag .upperText:after,
#boardHeader .bottomTag .lowerText:after {
content: "";
position: absolute;
z-index: -1;
bottom: 0px;
left: -43px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(360deg);
}
#boardHeader .bottomTag .lowerText {
border-radius: 20px 0px 0px;
}
#boardHeader .headerTitle,
#boardHeader .headerSubtitle {
position: relative;
z-index: 3;
line-height: 150%;
color: var(--lightest);
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
}
#boardHeader .headerTitle {
font-size: 8vw;
font-family: var(--fontTitle);
line-height: 70%;
}
#boardHeader .headerSubtitle {
font-size: 1.5vw;
text-transform: uppercase;
font-weight: 800;
}
.tabControls {
display: flex;
justify-content: space-between;
padding: 0px 0px 15px;
}
.tabBtn {
font-size: 2rem;
color: var(--dark);
border-radius: 10px;
border: solid 2px transparent;
padding: 10px;
opacity: 0.25;
}
.tabBtn.active {
color: var(--accent);
background: var(--lighter) !important;
border: solid 2px var(--accent);
opacity: 1;
}
.tabContent > div {
display: none;
}
.tabContent > .active {
display: flex;
}
.tab-2 {
flex-direction: column;
gap: 30px;
justify-content: space-between;
height: 100%;
}
/****************************************
HEADER - SUB SECTIONS
*****************************************/
.lastAnnouncement,
.lastEvent {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 15px;
padding: 30px;
padding-right: 70px;
border-radius: 20px;
}
.lastAnnouncement {
grid-area: lastAnnouncement;
background: var(--support);
background-image: radial-gradient(
circle at bottom left,
RGBA(var(--lightRGB), 0.15),
var(--support)
);
color: var(--lightest);
}
.lastEvent {
grid-area: lastEvent;
background: var(--lighter);
background-image: radial-gradient(
circle at bottom left,
RGBA(var(--supportRGB), 0.15),
var(--lighter)
);
}
.lastAnnouncement .topTag,
.lastEvent .bottomTag {
position: absolute;
z-index: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: var(--dark);
padding: 5px;
width: 50px;
height: 55px;
font-size: 25px;
font-weight: 500;
color: var(--accent);
}
[data-theme="dark"] .lastAnnouncement .topTag,
[data-theme="dark"] .lastEvent .bottomTag {
color: var(--support);
}
.lastAnnouncement .topTag {
top: 0px;
right: 0px;
background: var(--light);
border-radius: 0px 0px 0px 20px;
}
.lastAnnouncement .topTag:before {
content: "";
position: absolute;
z-index: -1;
top: 0px;
left: -43px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(630deg);
}
.lastAnnouncement .topTag:after {
content: "";
position: absolute;
z-index: -1;
bottom: -45px;
right: 0px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(630deg);
}
.lastEvent .bottomTag {
bottom: 0px;
right: 0px;
background: var(--light);
border-radius: 20px 0px 0px;
}
.lastEvent .bottomTag:before {
content: "";
position: absolute;
z-index: -1;
top: -45px;
right: 0px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(360deg);
}
.lastEvent .bottomTag:after {
content: "";
position: absolute;
z-index: -1;
bottom: 0px;
left: -43px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(360deg);
}
.announcementTitle,
.eventTitle {
display: block;
padding: 5px 10px;
font-size: 1.25rem;
width: max-content;
border-radius: 15px;
}
.announcementTitle b,
.eventTitle b {
margin-right: 15px;
font-family: var(--fontTitle);
font-weight: 500;
font-style: italic;
}
.announcementDesc strong {
text-decoration-style: wavy;
text-decoration-line: underline;
text-decoration-color: var(--lightest);
text-underline-offset: 4px;
}
.announcementTitle {
border: solid 2px var(--lightest);
color: var(--lightest);
}
.eventTitle {
border: solid 2px var(--accent);
background: var(--accent);
color: var(--lightest);
}
.lastEvent img {
display: block;
object-fit: cover;
height: 130px;
width: calc(100% + 40px);
border-radius: 20px;
margin: 0px 0px 15px 0px;
}
.lastEvent .redirectLink,
.lastAnnouncement .redirectLink {
display: block;
margin-top: 15px;
border-radius: 5px;
width: max-content;
padding: 5px 10px;
}
.lastEvent .redirectLink {
background: var(--support);
color: var(--light);
}
.lastAnnouncement .redirectLink {
background: var(--light);
}
.spacer {
grid-area: administrationTeam;
position: relative;
z-index: 1;
background: var(--lighter);
border-radius: 20px 0px 0px 20px;
margin-right: -30px;
margin-left: 60px;
padding: 15px;
height: 100%;
}
.spacer:before {
content: "";
position: absolute;
z-index: -1;
top: -45px;
right: 0px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(360deg);
}
.spacer:after {
content: "";
position: absolute;
z-index: -1;
bottom: -45px;
right: 0px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(260deg);
}
.spacertransition {
position: absolute;
bottom: -30px;
right: 20%;
height: 30px;
width: 90px;
background: var(--lighter);
}
.spacertransition:before {
content: "";
position: absolute;
left: 0px;
background: var(--light);
border-radius: 0px 20px 20px 0px;
height: 30px;
width: 30px;
}
.spacertransition:after {
content: "";
position: absolute;
right: 0px;
background: var(--light);
border-radius: 20px 0px 0px 20px;
height: 30px;
width: 30px;
}
.tab-1 {
height: 100%;
}
.tabAbout {
position: relative;
padding: 30px;
background: var(--lighter);
height: 100%;
border-radius: 20px;
}
.tabAbout strong {
text-decoration-style: wavy;
text-decoration-line: underline;
text-decoration-color: var(--support);
text-underline-offset: 4px;
}
.tabAbout .aboutTitle {
display: block;
padding: 5px 10px;
font-size: 1.25rem;
width: max-content;
border-radius: 15px;
border: solid 2px var(--accent);
color: var(--accent);
margin-right: 30px;
margin-bottom: 15px;
}
.tabAbout .topTag {
position: absolute;
z-index: 1;
top: 0px;
right: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: var(--dark);
padding: 5px;
width: 50px;
height: 55px;
font-size: 25px;
font-weight: 500;
color: var(--accent);
background: var(--light);
border-radius: 0px 0px 0px 20px;
}
.tabAbout .topTag:before {
content: "";
position: absolute;
z-index: -1;
top: 0px;
left: -43px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(630deg);
}
.tabAbout .topTag:after {
content: "";
position: absolute;
z-index: -1;
bottom: -45px;
right: 0px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(630deg);
}
.aboutTransition {
position: relative;
z-index: 1;
padding: 15px;
background: var(--light);
border-radius: 20px 0px 0px 20px;
margin: 30px -30px 30px 95px;
}
.aboutTransition:before {
content: "";
position: absolute;
z-index: -1;
top: -45px;
right: 0px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(360deg);
}
.aboutTransition:after {
content: "";
position: absolute;
z-index: -1;
bottom: -45px;
right: 0px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(260deg);
}
/****************************************
BOARD CROTCH
*****************************************/
#boardBetween {
display: grid;
grid-template-columns: 1fr auto 0.25fr;
gap: 30px;
height: 50px;
}
#boardTransition {
position: relative;
z-index: 1;
width: 50px;
height: 100%;
background: var(--light);
}
#boardTransition:before {
content: "";
position: absolute;
z-index: -1;
top: 0px;
right: -45px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(170deg);
}
#boardTransition:after {
content: "";
position: absolute;
z-index: -1;
top: 0px;
left: -44px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(285deg);
}
#boardTransitionAlt {
position: absolute;
z-index: 1;
width: 50px;
height: 100%;
background: var(--light);
}
#boardTransitionAlt:before {
content: "";
position: absolute;
z-index: -1;
bottom: 0px;
right: -45px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(90deg);
}
#boardTransitionAlt:after {
content: "";
position: absolute;
z-index: -1;
bottom: 0px;
left: -44px;
width: 45px;
height: 45px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(360deg);
}
/****************************************
BOARD WRAPPER
*****************************************/
#boardWrapper {
display: block;
background: var(--light);
padding: 30px;
border-radius: 20px;
}
/****************************************
HIDDEN
*****************************************/
.newstext,
#submenu,
#userlinks {
display: none;
}
/****************************************
RESPONSIVE INQUIRY
*****************************************/
@media all and (max-width: 768px) {
.navTransition,
.spacer,
.spacer:before,
.spacer:after,
#desktopNav #memberView,
#desktopNav #guestView,
#memberView {
display: none;
}
#headerSection {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 30px;
}
#headerSection {
border-radius: 0px;
}
#boardHeader {
min-height: 450px;
}
#outerWrapper {
padding: 0px;
}
#topbarNav.scrolled {
margin: 0px;
}
#topbarNav {
border-radius: 0px;
}
.nav-content,
.menu-content,
.switch-content {
top: 165px;
left: 0px;
width: 100%;
border-radius: 0px;
}
.accessibility-menu,
.popup-navigation {
position: unset;
display: unset;
}
#boardNav {
top: 80px;
max-width: 100%;
width: 100%;
height: unset;
border-radius: 0px;
margin: 0px;
}
}
@media all and (max-width: 600px) {
.switch-content {
flex-direction: column;
}
.announcementTitle b,
.eventTitle b {
display: none;
}
}
@media all and (max-width: 425px) {
.lastAnnouncement .topTag,
.lastEvent .bottomTag {
display: none;
}
.lastAnnouncement,
.lastEvent {
padding-right: 30px;
}
.lastEvent img {
width: 100%;
}
}
</style>
<script>
if (localStorage.getItem("theme") === "light") {
$("#checkbox").prop("checked", true);
}
var themeToggle = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
function switchTheme(e) {
console.log(themeToggle);
if (e.target.checked) {
document.documentElement.setAttribute("data-theme", "light");
localStorage.setItem("theme", "light");
} else {
document.documentElement.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark");
}
}
themeToggle.addEventListener("change", switchTheme, false);
document.addEventListener("DOMContentLoaded", () => {
const root = document.documentElement;
const minSize = 12 / 16;
const maxSize = 18 / 16;
const step = 0.05;
const adjustFontSize = (change) => {
const currentSize =
parseFloat(getComputedStyle(root).getPropertyValue("--fontSize")) || 1;
const newSize = Math.max(
minSize,
Math.min(maxSize, currentSize + change * step)
);
root.style.setProperty("--fontSize", newSize + "rem");
localStorage.setItem("fontSizeDefault", newSize);
};
const savedSize = localStorage.getItem("fontSizeDefault");
if (savedSize) {
root.style.setProperty("--fontSize", savedSize + "rem");
}
window.adjustFontSize = adjustFontSize;
});
function toggleMenu(toggleButton, menuContent) {
toggleButton.addEventListener("click", function () {
const expanded = this.getAttribute("aria-expanded") === "true" || false;
this.setAttribute("aria-expanded", !expanded);
menuContent.hidden = expanded;
});
}
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-content");
const menuToggle = document.querySelector(".menu-toggle");
const menu = document.querySelector(".menu-content");
const switchToggle = document.querySelector(".switch-toggle");
const switchMenu = document.querySelector(".switch-content");
toggleMenu(navToggle, navMenu);
toggleMenu(menuToggle, menu);
toggleMenu(switchToggle, switchMenu);
$(document).ready(function () {
var $topbarNav = $("#topbarNav");
$(window).scroll(function () {
if ($(window).scrollTop() >= 30) {
$topbarNav.addClass("scrolled");
} else {
$topbarNav.removeClass("scrolled");
}
});
});
let t = document.querySelector("#subaccounts_menu select"),
e = t.querySelectorAll("option"),
n = `<div class="switch">`;
e.forEach((t, e) => {
if (e !== 0) {
// Skip the first option
let name = t.innerText.trim().replace(/»/g, ""),
value = t.value;
n += `
<a title="${name}">
<label class="switch-block">
<input type="checkbox" value="${value}" onchange="this.form.submit()" name="sub_id" />
<div style="
width: 40px;
height: 60px;
border-radius: 0px 8px 8px 0px;
background-size: cover;
background-position: center;
background-image:
url(https://files.jcink.net/uploads2/skinsb … value}.png),
url(https://files.jcink.net/uploads2/skinsb … value}.gif),
url(https://files.jcink.net/uploads2/skinsb … value}.jpg),
url(https://files.jcink.net/uploads2/skinsb … alue}.jpeg),
url(https://s11.gifyu.com/images/SWRqs.png);
margin: 0px 0px 0px 0px;">
</div>
${name}
</label>
</a>`;
}
});
n += `</div>`;
t.insertAdjacentHTML("afterend", n);
t.remove();
$(document).ready(function () {
$(".tabBtn").on("click", function () {
const targetTab = $(this).data("tab");
if (!$(`.tab-${targetTab}`).length) return;
$(".tabBtn").removeClass("active");
$(this).addClass("active");
$(".tabContent > div").removeClass("active").hide();
$(`.tab-${targetTab}`).addClass("active").fadeIn(200);
});
$(".tab-1").addClass("active").show();
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="https://icons.veryicon.com/png/o/food--drinks/supermarket-supplies/cherry-44.png" type="image/x-icon" />
</head>
<body class="act-idx code-<!-- |input_CODE| --> group-3">
<script src="https://files.jcink.net/html/jquery-3.7.1.min.js"></script>
<script src="https://files.jcink.net/html/catcollapse.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<script type='text/javascript' src='//files.jcink.net/html/jquery-1.7.2.min.js'></script>
<script>
const currentTheme = localStorage.getItem("theme");
if (currentTheme) {
document.documentElement.setAttribute("data-theme", currentTheme);
} else {
const defaultTheme = "light";
document.documentElement.setAttribute("data-theme", defaultTheme);
localStorage.setItem("theme", defaultTheme);
}
</script>
<wrapper id="outerWrapper">
<nav id="topbarNav">
<section class="dropdownNav">
<!-- Avatar -->
<div class="loggedInAvatar">
<a href="/index.php?act=UserCP&CODE=24" class="avatarLink">
<img src='https://files.jcink.net/uploads2/skinsbyoctober//av-1.png?1739129619' border='0' width='350' height='450' alt='' />
<div class="uploadText"><i class="ri-export-line"></i></div>
</a>
</div>
<!-- Essential links menu -->
<div class="popup-navigation">
<button class="nav-toggle" aria-expanded="false">
<i class="ri-menu-line"></i>
<span>Quick Nav</span>
</button>
<div class="nav-content" hidden>
<div class="navTransition">
<div class="navTransitionBottom"></div>
</div>
<div class="memberNav">
<a href="/index.php?act=UserCP&CODE=01"><i class="ri-user-settings-line"></i> account settings</a>
<a href="/index.php?act=Login&CODE=03&key=1773c769df8360cd3ada9596e5cee09c"><i class="ri-logout-circle-r-line"></i> logout</a>
</div>
<div class="guestNav" style="display: none;">
<a href="/index.php?act=Login&CODE=00"><i class="ri-login-circle-line"></i> login</a>
<a href="/index.php?act=Reg&CODE=00"><i class="ri-add-circle-line"></i> register</a>
</div>
</div>
</div>
<!-- Account switcher menu -->
<div class="switch-menu">
<button class="switch-toggle" aria-expanded="false">
<i class="ri-shuffle-line"></i>
<span>Switch accounts</span>
</button>
<div class="switch-content" hidden>
<div class="navTransition">
<div class="navTransitionBottom"></div>
</div>
<span class="popupTitle">Logged in as: <b>
October
</b></span>
<span id='subaccounts_menu'>
<form action='https://skinsbyoctober.jcink.net/index.php?&act=Login&CODE=01&CookieDate=1' name='subswitch' method='POST'>
<input type='hidden' name='auth_key' value='1773c769df8360cd3ada9596e5cee09c'>
<input type='hidden' name='UserName' value='subacct'>
<input type='hidden' name='PassWord' value='subacct'>
<input type='hidden' name='referer' value='' />
<select class='forminput' name='sub_id' onchange='this.form.submit()'>
<option value='------------' selected='selected'>Switch Account</option>
<option value='3'> » New Account </option>
</select>
</form>
</span>
</div>
</div>
<!-- "Accessibility" menu -->
<div class="accessibility-menu">
<button class="menu-toggle" aria-expanded="false">
<i class="ri-accessibility-line"></i>
<span>Accessibility</span>
</button>
<div class="menu-content" hidden>
<div class="navTransition">
<div class="navTransitionBottom"></div>
</div>
<label class="theme-switch" for="checkbox" id="theme_switch_click">
<input type="checkbox" id="checkbox">
<span class="dark"><i class="ri-lightbulb-flash-line"></i> Light Theme</span>
<span class="light"><i class="ri-lightbulb-line"></i> Dark Theme</span>
</label>
<button onclick="adjustFontSize(0.2)"><i>A+</i> Font Size</button>
<button onclick="adjustFontSize(-0.2)"><i>A-</i> Font Size</button>
</div>
</div>
</section>
<!-- Guest Links -->
<section id="guestView" style="display: none;">
<a href="/index.php?act=Login&CODE=00" class="guestView">
<i class="ri-login-circle-line"></i>
<span>log in</span>
</a>
<a href="/index.php?act=Reg&CODE=00" class="guestView">
<i class="ri-add-circle-line"></i>
<span>register</span>
</a>
</section>
<!-- Member Links -->
<section id="memberView">
<!-- Admin Links -->
<a href="/admin.php?" target="_blank" class="adminView" style="display: none;">
<i class="ri-settings-5-line"></i>
<span>Admin CP</span>
</a>
<a href="/?act=modcp" target="_blank" class="adminView" style="display: none;">
<i class="ri-settings-5-line"></i>
<span>Mod CP</span>
</a>
<a href="/index.php?act=UserCP&CODE=alerts" class="notifications alert-0">
<i class="ri-notification-2-line"></i>
<span class="alert">
0
</span>
</a>
<a href="/index.php?act=Msg&CODE=01" class="messages alert-0">
<i class="ri-mail-line"></i>
<span class="alert">
0
</span>
</a>
</section>
</nav>
<nav id="boardNav">
<div id='navstrip' align='left'><span class="navStart">Cherry Cola</span> <a href='https://skinsbyoctober.jcink.net/index.php?act=idx'>Skins by October</a></div>
<br />
<br />
</nav>
<section id="headerSection">
<header id="boardHeader">
<span class="topTag">
<!-- Tabs -->
<div class="tabControls">
<button class="tabBtn active" data-tab="1"><i class="ri-folder-info-line"></i></button>
<button class="tabBtn" data-tab="2"><i class="ri-calendar-check-line"></i></button>
<button class="tabBtn" data-tab="3"><i class="ri-team-line"></i></button>
</div>
dirty, <b>dizzy,</b> doubled over
</span>
<span class="bottomTag">
<span class="upperText"> I can't sleep,</span>
<span class="lowerText">can you come over?</span>
</span>
<span class="headerSubtitle">god, i miss my</span>
<span class="headerTitle">cherry cola</span>
</header>
<div class="tabContent">
<div class="tab-1 active">
<div class="tabAbout">
<span class="topTag"><i class="ri-git-repository-line"></i></span>
<span class="aboutTitle">cherry cola</span>
<b>600 dollars to fix my car <strong>worth every penny</strong> to get to you, somebody's daughter on bass guitar - nobody chokes me up the way you do. </b>
<div class="aboutTransition"></div>
600 dollars to fix my car worth every penny to get to you, somebody's daughter on bass guitar - nobody chokes me up the way you do. Loving you is just like sipping on straight, syrup, sugar, sticky soda; cover me in candy <strong>I'm so lucky that I get to know ya.</strong> I get fucking sick without you: dirty, dizzy, doubled over. I can't sleep can you come over? God, I miss my Cherry Cola. I miss my Cherry Cola. 600 dollars to fix my car worth every penny to get to you, somebody's daughter on bass guitar - nobody chokes me up the way you do.
</div>
</div>
<div class="tab-2">
<div class="lastAnnouncement">
<span class="topTag"><i class="ri-flag-line"></i></span>
<span class="announcementTitle"><b>01.25</b> announcement </span>
<span class="announcementDesc">Six hundred dollars to fix my car, <strong>worth every penny</strong> to get to you. <a href="#" class="redirectLink"><i class="ri-external-link-line"></i> view more</a></span>
</div>
<div class="spacer">
<div class="spacertransition"></div>
</div>
<div class="lastEvent">
<span class="bottomTag"><i class="ri-calendar-event-fill"></i></span>
<span class="eventTitle"><b>01.25</b> event </span>
<span class="announcementEvent"><img src="https://s3.gifyu.com/images/bbQyG.webp"> <a href="#" class="redirectLink"><i class="ri-external-link-line"></i> view more</a></span>
</div>
</div>
<div class="tab-3">
<p>This is content for Tab 3.</p>
</div>
</div>
</section>
<div id="boardBetween">
<spacer></spacer>
<div id="boardTransition">
<div id="boardTransitionAlt"></div>
</div>
<spacer></spacer>
</div>
<wrapper id="boardWrapper">
</wrapper>
</wrapper>
</body>
</html>
[/html]
