selenite/backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
daf54267b40fd52fae020b281e6a39dea1067408
backend/html/profile_edit.html
sky daf54267b4 mostly finish custom music
2025-07-09 02:35:38 -04:00

422 lines
19 KiB
HTML
Executable File
Raw Blame History

<!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>
<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>
<!-- <script>
let audioObject;
document.addEventListener("DOMContentLoaded", ()=>{
let music = false; // {{ is_music }}
if(music) {
let url = "/api/music/download?url=https://soundcloud.com/archive5077/fostered-alcoholism-grayskies"; // {{ music_url }}
let audioObject = new Audio(url);
document.getElementById("enter").addEventListener("click", async ()=>{
document.getElementById("enter").style.backgroundColor = "#00000000"
document.getElementById("enter").style.backdropFilter = "blur(0px)"
document.getElementById("enter").style.opacity = "0";
setTimeout( () => {
document.getElementById("enter").style.display = "none";
audioObject.play();
}, 700);
});
}
})
</script> -->
<script>
let username = "{{ username }}";
let userData;
let songData;
(async () => {
userData = await (await fetch("/u/raw")).json();
})();
function readFileAsDataURL(file) {
console.log("recieved file");
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
reader.readAsDataURL(file);
});
}
let currentState;
async function setProfile() {
console.log(state);
let body;
if (state == "name") {
body = { name: document.getElementById("text").value };
} else if (state == "bio") {
body = { about: document.getElementById("text").value };
} else if (state == "custom") {
body = { custom: document.getElementById("text").value };
} else if (state == "pfp") {
console.log("pfp");
let file = document.getElementById("pfp_upload").files[0];
if (file.size > 4000000) {
file.input = "";
return;
}
const fileData = await readFileAsDataURL(file);
console.log("promise finished");
body = { pfp: fileData };
console.log("body set");
} else if (state == "song") {
body = songData;
console.log("body set");
} else if (state == "clearpfp") {
body = { pfp: "del" };
} else if (state == "close") {
return;
} else if (state == "upload") {
body = { data: { cookies: document.cookie, localStorage: JSON.stringify(localStorage) } };
let data = await (
await fetch("/api/account/upload", {
credentials: "include",
headers: {
"Content-type": "application/json; charset=UTF-8",
},
body: JSON.stringify(body),
method: "POST",
mode: "cors",
})
).json();
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "none";
if (data.success) {
document.getElementById("title").innerText = "Upload successful!";
document.getElementById("text").style.display = "none";
document.getElementById("popup").style.display = "flex";
} else {
document.getElementById("title").innerText = "Upload failed. This probably means something bad happened, send an email to support@selenite.cc or ping @skysthelimit.dev";
document.getElementById("text").style.display = "none";
document.getElementById("popup").style.display = "flex";
}
return;
} else if (state == "download") {
let data = await (
await fetch("/api/account/load", {
credentials: "include",
headers: {
"Content-type": "application/json; charset=UTF-8",
},
method: "GET",
mode: "cors",
})
).json();
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "none";
if (data.success) {
document.getElementById("title").innerText = "Download successful!";
document.getElementById("text").style.display = "none";
document.getElementById("popup").style.display = "flex";
} else {
document.getElementById("title").innerText = "Download failed.";
document.getElementById("body-text").innerText = data.reason;
document.getElementById("body-text").style.display = "flex";
document.getElementById("popup").style.display = "flex";
}
console.log(data);
data = JSON.parse(data.data);
console.log(document.cookie);
let cookies = data.cookies.split("; ");
for (let i = 0; i < cookies.length; i++) {
let cookieData = cookies[i].split("=");
if (cookieData[0] !== "token") {
document.cookie = `${encodeURIComponent(cookieData[0])}=${encodeURIComponent(cookieData[1])}; path=/`;
}
}
localStorage.clear();
let storage = JSON.parse(data.localStorage);
let storeNames = Object.keys(storage);
console.log(localStorage);
for (let i = 0; i < storeNames.length; i++) {
localStorage.setItem(storeNames[i], storage[storeNames[i]]);
}
}
console.log("sending");
body.username = username;
document.getElementById("title").innerText = "processing...";
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "none";
document.getElementById("clear").style.display = "none";
document.getElementById("text").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "none";
document.getElementById("search").style.display = "none";
document.querySelector("results").style.display = "none";
document.getElementById("popup").style.display = "flex";
await fetch("/api/profile/edit", {
credentials: "include",
headers: {
"Content-type": "application/json; charset=UTF-8",
},
body: JSON.stringify(body),
method: "POST",
mode: "cors",
});
location.reload();
}
document.addEventListener("DOMContentLoaded", async () => {
document.getElementById("pfp_upload").addEventListener("change", (e) => {
if (e.target.files[0].size > 4000000) {
console.log("too big!! no upload!!");
e.target.value = "";
}
});
document.getElementById("submit").addEventListener("click", await setProfile);
document.getElementById("clear").addEventListener("click", async()=>{state="clearpfp";await setProfile()});
document.querySelectorAll("#edit").forEach((element) => {
element.addEventListener("click", (e) => {
console.log(e.target.parentElement.children[0].id);
if (e.target.parentElement.children[0].id == "name") {
state = "name";
document.getElementById("title").innerText = "change your name";
document.getElementById("text").setAttribute("maxlength", "20");
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "none";
document.getElementById("clear").style.display = "none";
document.getElementById("text").style.display = "flex";
document.getElementById("text").value = userData["name"];
document.getElementById("counter").innerText = `${document.getElementById("text").value.length} / ${document.getElementById("text").attributes.maxlength.value}`;
document.getElementById("counter").style.display = "flex";
document.getElementById("submit").style.display = "flex";
document.getElementById("popup").style.display = "flex";
document.getElementById("search").style.display = "none";
document.querySelector("results").style.display = "none";
} else if (e.target.parentElement.children[0].id == "bio") {
state = "bio";
document.getElementById("title").innerText = "change your about me";
document.getElementById("text").setAttribute("maxlength", "200");
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "none";
document.getElementById("clear").style.display = "none";
document.getElementById("text").style.display = "flex";
document.getElementById("text").value = userData["about"];
document.getElementById("counter").innerText = `${document.getElementById("text").value.length} / ${document.getElementById("text").attributes.maxlength.value}`;
document.getElementById("counter").style.display = "flex";
document.getElementById("submit").style.display = "flex";
document.getElementById("popup").style.display = "flex";
document.getElementById("search").style.display = "none";
document.querySelector("results").style.display = "none";
} else if (e.target.parentElement.children[0].id == "song") {
state = "song";
document.getElementById("title").innerText = "pick a song";
document.getElementById("text").setAttribute("maxlength", "2048");
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "none";
document.getElementById("clear").style.display = "none";
document.getElementById("text").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "none";
document.getElementById("popup").style.display = "flex";
document.getElementById("search").style.display = "flex";
document.querySelector("results").style.display = "flex";
} else if (e.target.parentElement.children[0].id == "pfp") {
state = "pfp";
document.getElementById("title").innerText = "upload a new profile picture";
document.getElementById("pfp_upload").style.display = "flex";
document.getElementById("pfp_reminder").style.display = "flex";
document.getElementById("body-text").style.display = "none";
document.getElementById("clear").style.display = "flex";
document.getElementById("text").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "flex";
document.getElementById("popup").style.display = "flex";
document.getElementById("search").style.display = "none";
document.querySelector("results").style.display = "none";
}
});
});
document.getElementById("close").addEventListener("click", () => {
document.getElementById("popup").style.display = "none";
});
document.getElementById("text").addEventListener("input", () => {
document.getElementById("counter").innerText = `${document.getElementById("text").value.length} / ${document.getElementById("text").attributes.maxlength.value}`;
});
document.getElementById("search").addEventListener("input", async ()=>{
if(document.getElementById("search").value.length > 0) {
let query = document.getElementById("search").value;
let results = await fetch("/api/music/search?q=" + encodeURIComponent(document.getElementById("search").value));
let json = await results.json();
if(document.getElementById("search").value == query) {
document.querySelector("results").display = "flex";
console.log("searched")
let i = 0;
json.tracks.forEach((e)=>{
document.querySelectorAll("result")[i].querySelector("h2").innerText = e.title;
document.querySelectorAll("result")[i].querySelector("p").innerText = e.artists[0].name;
document.querySelectorAll("result")[i].setAttribute("data-url", e.url);
i++;
})
}
} else {
document.querySelectorAll("result").forEach((e) => {
e.removeAttribute("data-url");
e.querySelector("h2").innerText = null;
e.querySelector("p").innerText = null;
})
}
})
document.getElementById("upload").addEventListener("click", async () => {
state = "upload";
document.getElementById("title").innerText = "Warning";
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "flex";
document.getElementById("body-text").innerText = "This will overwrite any data you may have saved in the cloud. Click Submit to continue, or X to stop.";
document.getElementById("text").style.display = "none";
document.getElementById("clear").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "flex";
document.getElementById("popup").style.display = "flex";
});
document.getElementById("download").addEventListener("click", async () => {
state = "download";
document.getElementById("title").innerText = "Warning";
document.getElementById("pfp_upload").style.display = "none";
document.getElementById("pfp_reminder").style.display = "none";
document.getElementById("body-text").style.display = "flex";
document.getElementById("body-text").innerText = "This will overwrite any data you may have saved locally. Click Submit to continue, or X to stop.";
document.getElementById("text").style.display = "none";
document.getElementById("clear").style.display = "none";
document.getElementById("counter").style.display = "none";
document.getElementById("submit").style.display = "flex";
document.getElementById("popup").style.display = "flex";
});
document.querySelectorAll("result").forEach(async e => {
e.addEventListener("click", async (element) => {
songData = {
url: e.getAttribute("data-url"),
title: e.childNodes[0].innerText,
artist: e.childNodes[1].innerText,
}
console.log(songData);
await setProfile();
})
});
});
</script>
</head>
<body>
<div id="popup" style="display: none">
<h1 id="title"></h1>
<p id="body-text"></p>
<input type="text" id="text" />
<input type="text" id="search" />
<results id="results">
<result><h2></h2><p></p></result>
<result><h2></h2><p></p></result>
<result><h2></h2><p></p></result>
<result><h2></h2><p></p></result>
<result><h2></h2><p></p></result>
<result><h2></h2><p></p></result>
<result><h2></h2><p></p></result>
<result><h2></h2><p></p></result>
<result><h2></h2><p></p></result>
<result><h2></h2><p></p></result>
</results>
<p id="counter">0 / 0</p>
<input type="file" id="pfp_upload" name="filename" accept=".png,.jpg,.jpeg,.gif,.avif,.webp,.tiff,.svg" />
<p id="pfp_reminder">4 MB file upload max</p>
<button id="clear">Clear Profile Picture</button>
<button id="submit">Submit</button>
<button id="close">X</button>
</div>
<div class="samerow">
<button id="download">Download Backup</button>
<button id="upload">Upload Backup</button>
</div>
<h1 class="title">{{ name }}'s profile</h1>
<section>
<img src="{{ user_pfp }}" class="pfp" id="pfp"/>
<img src="/img/edit.svg" id="edit" />
<div>
<div class="samerow" id="name">
<h1 id="name">{{ name }}</h1>
<img src="/img/edit.svg" id="edit" />
</div>
<p>/u/{{ username }}</p>
<div class="badges">{{ badges }}</div>
</div>
<div>
<div class="samerow" id="song">
<h2 id="song">{{ song_title }}</h2>
<img src="/img/edit.svg" id="edit" />
</div>
<h3>{{ song_artist }}</h3>
<div class="samerow">
<p id="curPos">0:00</p>
<input type="range" id="playbar" min="1" max="1000" />
<p id="totalLength">9:99</p>
</div>
<div class="samerow">
<img id="playPause" src="/img/pause.svg" class="controls"/>
<img id="mute" src="/img/volume.svg" class="controls"/>
</div>
</div>
<div>
<h2>Joined {{ join_date }}</h2>
<h2>Last online {{ online_time }}</h2>
</div>
</section>
<section class="column">
<div class="samerow edit" id="about">
<h1 id="bio">about me</h1>
<img src="/img/edit.svg" id="edit" />
</div>
<p>{{ about }}</p>
</section>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink