index.html

<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<input type="file" id=mapsel accept=".1pix">
<title>1PIX</title>
<script>

const content = document.querySelector(".content");
const fileInput = document.querySelector("input[type=file]");

fileInput.addEventListener("change", previewFile);

function previewFile() {
  const file = fileInput.files[0];
  const reader = new FileReader();

 
 
 
reader.readAsText(file)

reader.addEventListener("load", () => {
e=reader.result
if (localStorage.getItem("maps")==null){
localStorage.setItem("maps","")
}

  if (file.name.slice(-4)=="1pix") {
localStorage.setItem("maps",localStorage.getItem("maps")+e+"޶޶޶"+new Date()*1+"޶޶޶noth"+"杧杧杧")
  }
extract()
if (localStorage.getItem('maps').split("杧杧杧").length==2){
window.location.reload()
}
sortt()
}
)
}

</script>
<div id="body">
<ul class=ul>	
<li><a href="tutorial.html">How to play</a></li>
<li><a onclick="document.getElementById('mapsel').click()">Upload</a></li>
<li><a href='new.html'>Create</a></li>

</ul>
<h1>1PIX</h1>
<div class=top>
Sort by
<select id=sort onchange=sortt()>
<option value=0>date (newest -> oldest)</option>
<option value=1>date (oldest -> newest)</option>
<option value=2>difficulty (hardest -> easiest)</option>
<option value=3>difficulty (easiest -> hardest)</option>
<option value=4>accuracy (best -> worst)</option>
<option value=5>accuracy (worst -> best)</option>
<option value=6>alphabetical (A -> Z)</option>
<option value=7>alphabetical (Z -> A)</option>
</select><br><br>Search: 
<input id="thingy" onchange="console.log('e')"></input>
</div>
<div id=bigbig>
</div>
</div>
<script>
if (localStorage.getItem("maps")==null){

document.getElementById("body").innerHTML="<center><div id=eee><div id=fg>	<h1 class='super'>1PIX</h1><a class='hd' href='tutorial.html'>How to play</a> | <a class='hd' href='https://drive.google.com/drive/folders/1LmvzV_VcLkiQBtmdXfcs4lx90PJPprWj'>Find maps</a> | <a class='hd' onclick=document.getElementById('mapsel').click()>Upload map</a></div></div></center>"
 } 
 
 
// Source - https://stackoverflow.com/a/69025039
// Posted by Shalom Alexander
// Retrieved 2026-04-12, License - CC BY-SA 4.0

document.getElementById('thingy').addEventListener('input',function(e){
        sortt()
         //do something else
        });



//maps=[["Map 0000000",49,10.67,191919],["sup3r 3p1c l3v3l",9,4,919191],["SUPER IMPOSSIBLE",0.9,17,112334]]


extract()
function extract(){
mapperm=[]
mapss=localStorage.getItem("maps").split("杧杧杧")
mapss=mapss.filter((x)=>x!='')
for (x in mapss){
io=mapss[x].split("޶޶޶")
q=[]
q.push(io[0])
q.push(io[6])
//q.push((io[3].charCodeAt(0)-913)/10)
q.push(io[7])
q.push(io[4].slice(0,-5))
q.push(io[2])
q.push(io[1])
q.push(x)
q.push(parseInt(io[4].slice(-1),16))
if (io[4].slice(-1)=="!"){
q[7]="199"
}
mapperm.push(q)
}
}



sortt()
function sortt(){
one=document.getElementById("sort").value
maps=mapperm.filter(item=>item[0].toLowerCase().includes(document.getElementById("thingy").value.toLowerCase()))
if (one==one%2){
maps.sort((a,b)=>b[6].replace(/\D/g, '')-a[6].replace(/\D/g, ''))
}
if (one-one%2==2){
maps.sort((a,b)=>b[7]*((b[7]!=199))-a[7]*((a[7]!=199)))
}
if (one-one%2==4){
maps.sort((a,b)=>b[7]-a[7])
}
if (one-one%2==6){
maps.sort(function (a, b) {
  if (a[0].toLowerCase() < b[0].toLowerCase()) {
    return -1;
  }
  else {
    return 1;
  }

});
}

if (one%2==1){
maps.reverse()
if (one=3){
maps.sort((a,b)=>a[7]*((a[7]==199)+1)-b[7]*((b[7]==199)+1))
}
}

tot=''
for (x in maps){
if (maps[x][2]<12){
difff=Math.floor(maps[x][2])+"★"
}
else{
difff="Extreme"
}

bestt=Math.round(find(maps[x][2])[0]/100)
mppr=maps[x][5].split("|||")[1]
if (mppr==""){mppr="???"}
tot+="<div class=mega id="+x+" onclick=''><span class='a'><span class=d><big>"+maps[x][0]+"</big> By&nbsp;"+mppr+"</span><span>"+translatee(maps[x][7])+"</span><br><tiny>"+bestt+"% acc.</tiny><br></span><span class=e><button onclick=location.href='view.html?id="+maps[x][6]+"' >Play<br><tiny>"+["","or edit"][maps[x][1].includes("yours")*1]+"</tiny></button></span></div>"
}

document.getElementById("bigbig").innerHTML=tot
}

function translatee(e){if(e==199){return ""}else if (e<=11){return "<br>"+e+"*"}else{return "<br>Extreme "+(e-12)}}

/*function ext(e){
tot=0
maps[e][3].split("").forEach((item)=>tot+=item.codePointAt(0)-1)
tot/=1000
tot=Math.round(tot)

auto="<span class='a'><big>"+maps[e][0]+"</big><br>"+maps[e][1]+"% acc.</span><span class=e>"+difff+"</span>"
document.getElementById(e).innerHTML=auto+"<div><br><br><br><hr><p><span class=e><button>Play</button></span>"+maps[e][5]+"</p><p class=p>Length: "+tot+" seconds</p><p class=p>Added: "+new Date(maps[e][3]/1).toDateString().slice(4)+"</p></div>"
}*/

function find(hh){
r={'noth':'0000','fcfc':'10000'}
kj=hh.match(/.{1,4}/g) ?? []
return [Math.max(...kj.map(item => r[item] !== undefined ? r[item] : item).map(item=>item*1)),kj.reduce((total,x) => total+(x=="fcfc"), 0),kj.reduce((total,x) => total+(x=="noth"), 0)-1]
}
</script>

<style>
tiny{
font-size:14px;
}
input:focus, textarea:focus {
  outline: none;
  border: none;
} 
html{
background-color:#101010;
font-family: Verdana;
color: white;
font-size:20px;



}

.super{font-size:80px;}
.hd{font-size:20px;}

#fg{
max-width:600px;
margin:0 auto;
padding: 20 50 50 50;
border-radius:50px;
background-color: #000000;
opacity: 0.8;
background-image:  linear-gradient(30deg, #2b2b2b 12%, transparent 12.5%, transparent 87%, #2b2b2b 87.5%, #2b2b2b), linear-gradient(150deg, #2b2b2b 12%, transparent 12.5%, transparent 87%, #2b2b2b 87.5%, #2b2b2b), linear-gradient(30deg, #2b2b2b 12%, transparent 12.5%, transparent 87%, #2b2b2b 87.5%, #2b2b2b), linear-gradient(150deg, #2b2b2b 12%, transparent 12.5%, transparent 87%, #2b2b2b 87.5%, #2b2b2b), linear-gradient(60deg, #2b2b2b77 25%, transparent 25.5%, transparent 75%, #2b2b2b77 75%, #2b2b2b77), linear-gradient(60deg, #2b2b2b77 25%, transparent 25.5%, transparent 75%, #2b2b2b77 75%, #2b2b2b77);
background-size: 20px 35px;
background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;


 animation: dg 10s ease-in-out infinite;
}

@keyframes dg{
 0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-0.5deg); }
  50%  { transform: rotate(0.5deg); }
  75%  { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
  }
.e{
float:right;

}
.a{
float: left;
max-width:400px;
overflow-wrap: break-word;
}
big{
font-size: 30px;
}
select{
font-family: Verdana;
font-size:20px;
border: none;
background-color: #101010;
color: white;
border-radius:10px;
}
input{
font-family: Verdana;
border:none;
padding:3px;
border-radius:5px;
}
button{
height:60px;
width:100px;
border: none;
border-radius:10px;
font-size:30px;
transition: 0.3s;

}
button:hover{
transition: 0.3s;

background:#dddddd;
}
option{
font-size:20px;
border: none;
background-color: #303030;
color: #f3f3f3;
border-radius:10px;
}
.mega{
margin-bottom: 2vh;
margin-top: 2vh;
padding:15px;
height:auto;
color: #000000;
border-radius:10px;
background-color: #a0a0a0;
overflow:hidden;
}
.p{
font-size:12px;
}

.top{
text-align:center;
}
#bigbig{
width:600px;	
margin:0 auto;
padding:  40px 0 40px 0;
background-color:#00000000;
}
#mapsel{
display:none;
}

.class{  display: flex; justify-content: space-between;
}
h1{
color:#FFFFFF;
text-align:center;
}
.ul {
margin:0 auto;
  list-style-type: none;
  max-width:650px;
  padding: 7;
  background-color: #3333337f;
  display: flex;
  border-radius:10px;
}

.ul li a {
  display: block;
  padding: 10px 14px 10px;
  text-decoration: none;
}

.ul li a:hover {
  background-color: #11111100;
}

a{
color: #c4e8e8;
text-decoration:none;
transition: 0.4s;

}
a:hover{
transition: 0.4s;

color: #ec2d2d;
}
#eee{
   margin: 0;
        height: 95vh; /* Full viewport height */
        display: flex; /* Enable flexbox */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
}
</style>
</html>