serg2-mirrors/GDBrowser
1
0
Fork 0
Code Issues 8 Pull requests 10 Projects Releases Packages Wiki Activity Actions

Ucrash updated the API page

Browse source
This commit is contained in:
GDColon 2019-10-22 20:06:47 -04:00
parent 078d1ec0c0
commit 47bb878487
3 changed files with 76 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
assets/css/api.css
View file

@ -58,6 +58,10 @@ quote{
display: block; display: block;
} }
.anchor{
transform: translateY(-50px);
}
.red .param, .redExample { .red .param, .redExample {
background-color: #fc3542; background-color: #fc3542;
color: #fff; color: #fff;
@ -152,15 +156,13 @@ quote{
align-items: stretch; align-items: stretch;
} }
.header-drawer{
display: none;
align-items: center;
}
.logo{ .logo{
background-image: url('media/logo.png'); margin-right: 10px;
height: 100%;
width: 50px;
background-size: 70%;
background-position: center;
background-repeat: no-repeat;
transition: all 0.25s ease;
display: block;
} }
.logo:hover{ .logo:hover{
background-size: 75%; background-size: 75%;
@ -177,12 +179,13 @@ quote{
display: flex; display: flex;
align-items: center; align-items: center;
color: #333; color: #333;
padding: 0 20px; padding: 0 25px;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
font-weight: 400; font-weight: 400;
height: 100%; height: 100%;
text-decoration: none; text-decoration: none;
font-size: 14px;
} }
.header-link:hover{ .header-link:hover{
background: #efefef; background: #efefef;
@ -216,8 +219,36 @@ footer a{
@media screen and (max-width: 750px){ @media screen and (max-width: 750px){
.main-header{ .main-header{
justify-content: space-around; justify-content: space-around;
flex-direction: column;
align-items: center;
height: auto;
} }
.header-links{ .header-links{
display: none; /*display: none;*/
position: fixed;
top: 50px;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
background: rgb(243, 243, 243);
transition: transform 0.25s ease;
}
.header-links.hid{
transform: translateY(-150vh);
}
.header-link{
width: 100%;
justify-content: center;
}
.header-drawer{
display: flex;
}
.header-drawer.active img{
transform: rotate(90deg) scaleX(0.7);
}
.header-drawer img{
transition: transform 0.25s ease;
z-index: 999;
} }
} }

1
assets/menu-ic.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 338 B

55
html/api.html
View file

@ -4,7 +4,9 @@
<title>GD Level Browser API</title> <title>GD Level Browser API</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="icon" href="../difficulty/auto.png"> <link rel="icon" href="../difficulty/auto.png">
<link href="../css/api.css" type="text/css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700,800&display=swap" rel="stylesheet"> <link href="../css/api.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700,800&display=swap" rel="stylesheet">
<meta id="meta-title" property="og:title" content="GDBrowser API"> <meta id="meta-title" property="og:title" content="GDBrowser API">
<meta id="meta-desc" property="og:description" content="It's basically the Geometry Dash API, but not terrible!"> <meta id="meta-desc" property="og:description" content="It's basically the Geometry Dash API, but not terrible!">
@ -12,10 +14,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body onbeforeunload="saveUrl()"> <body>
<div class="main-header-wrap"> <div class="main-header-wrap">
<div class="main-header"> <div class="main-header">
<div class="header-links"> <div class="header-drawer" id="menu-btn">
<img src="../assets/menu-ic.svg" alt="Menu" id="menu-btn-img">
</div>
<div class="header-links hid">
<a class="header-link" href="#intro">Introduction</a> <a class="header-link" href="#intro">Introduction</a>
<a class="header-link" href="#level">Levels</a> <a class="header-link" href="#level">Levels</a>
<a class="header-link" href="#profile">Profiles</a> <a class="header-link" href="#profile">Profiles</a>
@ -27,7 +32,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="intro""></div> <div id="intro" class="anchor"></div>
<main class="grey"> <main class="grey">
<div class="main-block"> <div class="main-block">
<h1>Hi there!</h1> <h1>Hi there!</h1>
@ -60,7 +65,7 @@
<div class="seperator"></div> <div class="seperator"></div>
</main> </main>
<main class="alt"> <main class="alt">
<div id="level""></div> <div id="level" class="anchor"></div>
<div class="main-block"> <div class="main-block">
<h1>Levels</h1> <h1>Levels</h1>
<p>/api/level/levelID</p> <p>/api/level/levelID</p>
@ -139,7 +144,7 @@
</main> </main>
<main class="grey"> <main class="grey">
<div id="profile""></div> <div id="profile" class="anchor"></div>
<div class="main-block"> <div class="main-block">
<h1>Profiles</h1> <h1>Profiles</h1>
@ -196,7 +201,7 @@
</main> </main>
<main class="alt"> <main class="alt">
<div id="search""></div> <div id="search" class="anchor"></div>
<div class="main-block"> <div class="main-block">
<h1>Searching</h1> <h1>Searching</h1>
@ -278,8 +283,8 @@
</main> </main>
<main class="grey"> <main class="grey">
<div id="leaderboard" class="anchor"></div>
<div class="main-block"> <div class="main-block">
<div id="leaderboard""></div>
<h1>Leaderboards</h1> <h1>Leaderboards</h1>
<p>/api/leaderboard</p> <p>/api/leaderboard</p>
@ -329,8 +334,8 @@
</main> </main>
<main class="alt"> <main class="alt">
<div id="levelleaderboard" class="anchor"></div>
<div class="main-block"> <div class="main-block">
<div id="levelleaderboard""></div>
<h1>Level Leaderboards</h1> <h1>Level Leaderboards</h1>
<p>/api/leaderboardLevel/levelID</p> <p>/api/leaderboardLevel/levelID</p>
@ -374,8 +379,8 @@
</main> </main>
<main class="grey"> <main class="grey">
<div id="comments" class="anchor"></div>
<div class="main-block"> <div class="main-block">
<div id="comments""></div>
<h1>Comments and Profile Posts</h1> <h1>Comments and Profile Posts</h1>
<p>/api/comments/level-or-user-ID</p> <p>/api/comments/level-or-user-ID</p>
@ -425,13 +430,13 @@
<div class="seperator"></div> <div class="seperator"></div>
</main> </main>
<main class="alt"> <main class="alt">
<div id="analyze" class="anchor"></div>
<div class="main-block"> <div class="main-block">
<div id="analyze""></div> <h1>Level Analysis</h1>
<h1>Level Analysis (WIP)</h1> <p>/api/anakyze/levelID</p>
<p>/api/analyze/levelID</p>
<p>Analyzes a level's data</p> <p>Analyzes a level's data</p>
<p><b>Level analyzing is still a big WIP so there may be changes in the future</b></p> <p><sb>Level analyzing is still a big WIP so there may be changes in the future</sb></p>
<br> <br>
<p class="reveal" onclick="$('#params-analyze').slideToggle(100)"><b>Parameters (0)</b></p> <p class="reveal" onclick="$('#params-analyze').slideToggle(100)"><b>Parameters (0)</b></p>
@ -470,28 +475,36 @@
</body> </body>
</html> </html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> <script>
$('.subdiv').each(function() { $('.subdiv').each(function() {
$(this).html($(this).html().replace(/(<p.*>)(.*:) /g, '$1<font class="param">$2</font> ')) $(this).html($(this).html().replace(/(<p.*>)(.*:) /g, '$1<font class="param">$2</font> '))
}) })
$('.fetch').each(function() { $('.fetch').each(function() {
fetch(`..${$(this).attr('link')}`).then(res => res.json()).then(res => { fetch(`..${$(this).attr('link')}`).then(res => res.json()).then(res => {
$(this).html(JSON.stringify(res, null, 2)) $(this).html(JSON.stringify(res, null, 2))
}) })
}); });
//smooth scrolling through anchors //smooth scrolling through anchors
document.querySelectorAll('a[href^="#"]').forEach(anchor => { document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) { anchor.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({ document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth' behavior: 'smooth'
}); });
}); });
}); });
</script> //menu button
document.getElementById('menu-btn').onclick = function(){
document.getElementsByClassName('header-links')[0].classList.toggle('hid');
document.getElementById('menu-btn').classList.toggle('active');
}
for(let i = 0; i < document.getElementsByClassName('header-link').length; i++){
document.getElementsByClassName('header-link')[i].onclick = function(){
document.getElementsByClassName('header-links')[0].classList.toggle('hid');
document.getElementById('menu-btn').classList.toggle('active');
}
}
</script>