finish up profiles, begin custom songs

This commit is contained in:
sky
2025-07-08 22:01:44 -04:00
parent c8d3d0d50c
commit a698f941d8
12 changed files with 189 additions and 21 deletions

View File

@ -30,3 +30,21 @@
#infobox h2 {
margin-right: auto;
}
.button {
margin: 4px;
padding: 2px;
width: 7%;
transition-duration: 0.25s;
}
.button:hover {
filter: brightness(1.1);
transform: scale(1.05);
}
.opposite {
width: 50%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
margin: 12px;
}

93
css/profile.css Normal file
View File

@ -0,0 +1,93 @@
section {
width: 90%;
height: 240px;
margin: 24px;
background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 10px var(--color-2);
border-radius: 20px;
backdrop-filter: blur(6px);
}
.controls {
width: 48px !important;
margin: 8px !important;
cursor: pointer;
}
section img {
height: 90%;
aspect-ratio: 1 / 1;
margin: 32px;
border-radius: 16px;
}
.column {
flex-direction: column;
}
right {
margin-left: auto;
margin-right: 16px;
}
.badges img {
width: 32px;
border-radius: 2px;
margin: 8px;
}
p {
font-size: 24px;
letter-spacing: 0.5px;
line-height: 36px;
}
div {
margin-left: auto;
margin-right: auto;
}
#enter {
position: absolute;
width: 100vw;
height: 100vh;
background-color: color-mix(in srgb, #000000 60%, #00000000 40%);
backdrop-filter: blur(16px);
z-index: 9999999999;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition-duration: 1s;
}
#edit {
width: 48px;
cursor: pointer;
}
#search {
height: 36px !important;
}
results {
display: flex;
width: 95%;
height: 120px;
overflow-y: scroll;
background-color: var(--color-4);
bottom: 16px;
flex-direction: column;
}
result {
border-color: white;
border-width: 4px;
cursor: pointer;
padding: 4px;
margin: 2px;
width: auto;
text-align: left;
display: flex;
flex-direction: column;
}
result h2 {
font-size: 16px;
margin: 0px;
}
result p {
font-size: 12px;
margin: 0px;
}

1
img/fullscreen.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z"/></svg>

After

Width:  |  Height:  |  Size: 253 B

1
img/fullscreen_exit.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-120v-120H120v-80h200v200h-80Zm400 0v-200h200v80H720v120h-80ZM120-640v-80h120v-120h80v200H120Zm520 0v-200h80v120h120v80H640Z"/></svg>

After

Width:  |  Height:  |  Size: 253 B

1
img/muted.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M792-56 671-177q-25 16-53 27.5T560-131v-82q14-5 27.5-10t25.5-12L480-368v208L280-360H120v-240h128L56-792l56-56 736 736-56 56Zm-8-232-58-58q17-31 25.5-65t8.5-70q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 53-14.5 102T784-288ZM650-422l-90-90v-130q47 22 73.5 66t26.5 96q0 15-2.5 29.5T650-422ZM480-592 376-696l104-104v208Zm-80 238v-94l-72-72H200v80h114l86 86Zm-36-130Z"/></svg>

After

Width:  |  Height:  |  Size: 495 B

1
img/pause.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M520-200v-560h240v560H520Zm-320 0v-560h240v560H200Zm400-80h80v-400h-80v400Zm-320 0h80v-400h-80v400Zm0-400v400-400Zm320 0v400-400Z"/></svg>

After

Width:  |  Height:  |  Size: 254 B

1
img/play.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>

After

Width:  |  Height:  |  Size: 190 B

1
img/volume.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z"/></svg>

After

Width:  |  Height:  |  Size: 378 B

View File

@ -108,7 +108,7 @@ function starEvent(e) {
let newElement = element.cloneNode(true);
document.getElementById("starredgames").appendChild(newElement);
newElement.addEventListener("click", ()=>{
location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}`
location.href=`/loader.html?title=${newElement.childNodes[1].childNodes[0].innerText}&dir=${newElement.getAttribute("data-target")}&img=${newElement.getAttribute("data-image")}`
});
})
} else {
@ -128,7 +128,7 @@ function starEvent(e) {
let newElement = element.cloneNode(true);
document.getElementById("starredgames").appendChild(newElement);
newElement.addEventListener("click", ()=>{
location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}`
location.href=`/loader.html?title=${newElement.childNodes[1].childNodes[0].innerText}&dir=${newElement.getAttribute("data-target")}&img=${newElement.getAttribute("data-image")}`
});
})
}

View File

@ -12,7 +12,7 @@ function loadPJS() {
script.src = "https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js";
document.head.appendChild(script);
script.addEventListener("load", ()=>{
particlesJS.load('particles-js', "js/particlesjs-config.json", ()=>{});
particlesJS.load('particles-js', "/js/particlesjs-config.json", ()=>{});
});
}

69
profile.html Executable file
View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- initialize theme vars
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
<!-- initialize externals -->
<meta property="og:title" content="Selenite" />
<meta property="description" content="Selenite is the best unblocked games site. With over 400 games and an account system, no other websites come close to Selenite." />
<meta name="keywords" content="proxy, web proxy, unblock websites, unblock chromebook, free web proxy, proxy list, proxy sites, un block chromebook, online proxy, proxy server, proxysite, proxy youtube, bypass securly, bypass iboss, bypass lightspeed filter, chromebooks, unblock youtube, youtube proxy, unblocked youtube, youtube unblocked, unblock games, selenite, unblocked games, free games">
<meta content="/favicon.png" property="og:image" />
<meta content="#c77dff" data-react-helmet="true" name="theme-color" />
<meta name="googlebot" content="index, follow, snippet" />
<link rel="canonical" href="https://selenite.cc/" />
<meta property="og:description" content="Selenite is the best unblocked games site. With over 400 games and an account system, no other websites come close to Selenite." />
<meta property="og:title" content="Selenite">
<meta property="og:type" content="website">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Selenite",
"alternateName": "selenite.cc",
"url": "https://selenite.cc",
"logo": "https://selenite.cc/favicon.png",
"sameAs": [
"https://github.com/selenite-cc",
"https://youtube.com/@selenitecc",
"https://tiktok.com/@selenitecc",
"https://selenite.cc",
]
}
</script>
<!-- initialize my stuff -->
<script src="/js/all.js"></script>
<script src="/js/main.js"></script>
<!-- <script src="/js/widget.js"></script> -->
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/profile.css" />
<link rel="manifest" href="/manifest.json" />
<!-- seo + other things -->
<title>{{ name }}'s Profile | Selenite</title>
<link rel="icon" href="/favicon.ico" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script>
</head>
<alerts> </alerts>
<body>
<section>
<img src="{{ user_pfp }}" class="pfp" />
<div>
<h1>{{ name }}</h1>
<p>/u/{{ username }}</p>
<div class="badges">{{ badges }}</div>
</div>
<right>
<h2>Joined {{ join_date }}</h2>
<h2>Last online {{ online_time }}</h2>
</right>
</section>
<section class="column">
<h1>About Me</h1>
<p>{{ about }}</p>
</section>
</body>
</html>

View File

@ -12,7 +12,6 @@
<script src="/js/games.js"></script>
<script src="/js/search.js"></script>
<script src="/js/main.js"></script>
<script src="/js/widget.js"></script>
<script src="/js/themes.js"></script>
<script src="/js/cookie.js"></script>
@ -34,23 +33,6 @@
<script></script>
</head>
<body>
<div id="particles-js"></div>
<!-- <input class="hiddenUpload" type="file" accept=".save" hidden /> -->
<!-- -->
<!-- <div class="samerow"> -->
<!-- <button onclick="downloadMainSave()">Download Save</button> -->
<!-- <button id="upload" onclick="uploadMainSave()">Upload Save</button> -->
<!-- </div> -->
<!-- <div class="samerow"> -->
<!-- <button id="random" onclick="selectRandomGame()">Play a random game!</button> -->
<!-- <button id="category" onclick="categoryChanger()">Game Categories</button> -->
<!-- </div> -->
<!-- -->
<!-- <h2>Starred Games</h2> -->
<!-- <p id="pinnedmessage">Star some games for things to show up here!</p>
<div id="pinned"></div> -->
<!-- <h2>All Games</h2> -->
<input type="text" class="searchbar" id="gamesearch" placeholder="Type here to search.." />
<p id="starredHeader">starred games</p>
<div id="starredgames">