mirror of
https://github.com/mmvanheusden/SteamDepotDownloaderGUI.git
synced 2026-02-03 21:21:19 +01:00
269 lines
20 KiB
HTML
269 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html data-color-mode="auto" data-dark-theme="dark" data-light-theme="light" id="theme" lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width, initial-scale=1" name="viewport"/>
|
|
<title>SteamDepotDownloaderGUI</title>
|
|
<link href="https://unpkg.com/@primer/css@21.3.6/dist/primer.css" rel="stylesheet"/>
|
|
<link href="css/style.css" rel="stylesheet">
|
|
<script defer src="./ts/preload.ts" type="module"></script>
|
|
<script src="./ts/main.ts" type="module"></script>
|
|
<script src="./ts/settings.ts" type="module"></script>
|
|
<script src="../node_modules/@xterm/xterm/lib/xterm.js"></script>
|
|
<link rel="stylesheet" href="../node_modules/@xterm/xterm/css/xterm.css" />
|
|
</head>
|
|
|
|
<body class="select-none">
|
|
<div class="f1-light text-center mb-1">Steam Depot Downloader</div>
|
|
<div class="flex justify-between gap-2 w-svw flex-row">
|
|
<div class="w-1/2 h-full" id="left-side">
|
|
<div class="mx-auto">
|
|
<form id="theform">
|
|
<div class="form-group mx-3 mt-1">
|
|
<div class="form-group-header">
|
|
<label for="username">Username</label>
|
|
</div>
|
|
<input spellcheck="false" class="form-control input-block" id="username" placeholder="Leave empty for anonymous download"
|
|
type="text"/>
|
|
</div>
|
|
|
|
<div class="form-group mx-3 mt-1">
|
|
<div class="form-group-header">
|
|
<label for="password">Password</label>
|
|
</div>
|
|
<input class="form-control input-block" id="password" placeholder="Leave empty for anonymous download"
|
|
type="password"/>
|
|
</div>
|
|
|
|
<div class="form-group mx-3 mt-1 required">
|
|
<div class="form-group-header">
|
|
<label for="appid">App ID</label>
|
|
</div>
|
|
<input class="form-control input-block" id="appid" type="number"/>
|
|
</div>
|
|
|
|
<div class="form-group mx-3 mt-1 required">
|
|
<div class="form-group-header">
|
|
<label for="depotid">Depot ID</label>
|
|
</div>
|
|
<input class="form-control input-block" id="depotid" type="number"/>
|
|
</div>
|
|
|
|
<div class="form-group mx-3 mt-1 required">
|
|
<div class="form-group-header">
|
|
<label for="manifestid">Manifest ID</label>
|
|
</div>
|
|
<input class="form-control input-block" id="manifestid" type="number"/>
|
|
</div>
|
|
|
|
<div class="mx-3 mt-1 required">
|
|
<div class="form-group-header">
|
|
<label>Download Location</label>
|
|
</div>
|
|
<div aria-label="Pick the path/location where the game will be downloaded to."
|
|
class="form-control btn btn-sm tooltipped tooltipped-ne" id="pickpath">
|
|
Set location
|
|
</div>
|
|
|
|
<div aria-disabled="true" aria-label="Check the location that has been selected."
|
|
class="form-control btn btn-sm ml-2 tooltipped tooltipped-ne" id="checkpath">
|
|
Open location
|
|
</div>
|
|
|
|
<span class="Label mt-1 ml-3 Label--warning" id="busy">
|
|
<span aria-label="Application is executing a task. Please be patient."
|
|
class="tooltipped tooltipped-n">Busy<span class="AnimatedEllipsis"></span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="mt-2" id="warning-banners">
|
|
<div hidden id="dotnetwarning">
|
|
<div class="flash flash-error mx-2 mt-2 color-shadow-medium" id="dotnetalert">
|
|
<svg class="octicon" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"
|
|
fill-rule="evenodd"></path>
|
|
</svg>
|
|
<code><span class="text-italic">dotnet</span></code> was not found.
|
|
<button class="btn btn-sm flash-action" id="dotnetalertbtn">
|
|
<svg class="octicon" height="16" viewBox="0 0 16 16" width="16"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5
|
|
0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"
|
|
fill-rule="evenodd"></path>
|
|
</svg>
|
|
<span class="text-bold">Download</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div hidden id="emptywarning">
|
|
<div class="flash flash-warn mx-2 mt-2 color-shadow-medium" id="emptyalert">
|
|
<svg class="octicon" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"
|
|
fill-rule="evenodd"></path>
|
|
</svg>
|
|
Please fill in all required fields.
|
|
</div>
|
|
</div>
|
|
<div id="internet-btns">
|
|
<div class="form-group mt-3 ml-3 mr-3">
|
|
<div class="BtnGroup d-flex">
|
|
<button class="BtnGroup-item btn btn-block btn-primary flex-1" id="downloadbtn">
|
|
<svg class="octicon filter-red" height="16"
|
|
style="display: inline-block; user-select: none; vertical-align: text-bottom;"
|
|
viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"
|
|
fill-rule="evenodd"></path>
|
|
</svg>
|
|
Download
|
|
</button>
|
|
<button class="BtnGroup-item btn flex-0" id="settings-button">
|
|
<svg fill="#8B949E" height="16"
|
|
style="display: inline-block; user-select: none; vertical-align: text-bottom;"
|
|
viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div hidden id="nopathwarning">
|
|
<div class="flash flash-warn mx-2 mt-2 color-shadow-medium" id="emptyalert">
|
|
<svg class="octicon" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"
|
|
fill-rule="evenodd"></path>
|
|
</svg>
|
|
Please choose a download location.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flash mx-2 mt-2 color-shadow-medium" hidden id="downloadingnotice">
|
|
<svg class="octicon" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"
|
|
fill-rule="evenodd"></path>
|
|
</svg>
|
|
Downloading and extracting DepotDownloader<span class="AnimatedEllipsis"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2 h-full px-2" id="right-side">
|
|
<div class="mt-2 h-full w-full mx-auto">
|
|
<div class="border border-gray-300 rounded-md bg-gray-900 text-white shadow shadow-blue-200">
|
|
<div class="text-md font-semibold w-full inline-flex my-px items-center">
|
|
<span class="text-center w-full">Download output</span>
|
|
<button id="clear-terminal" class="disabled:pointer-events-none disabled:line-through disabled:text-gray-300 ml-auto py-px px-2 border-2 rounded-xs border-red-500/75 font-normal enabled:hover:bg-red-200/30 enabled:active:bg-red-200/50">
|
|
Clear
|
|
</button>
|
|
</div>
|
|
<div class="max-h-[70vh]" id="xtermjs"></div>
|
|
</div>
|
|
<div class="mt-3 justify-between flex flex-row gap-3">
|
|
<div aria-label="Join the Discord server for rapid support." class="btn btn-sm tooltipped tooltipped-ne mb-1 w-full text-center items-center"
|
|
id="smbtn1">
|
|
|
|
<svg fill="#8B949E" height="16" style="display: inline-block; vertical-align: text-bottom;" viewBox="0 0 16 16">
|
|
<path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
|
|
</svg>
|
|
Discord
|
|
</div>
|
|
|
|
<div aria-label="Visit the SteamDB instant search website."
|
|
class="btn btn-sm tooltipped tooltipped-n mb-1 w-full text-center items-center" id="smbtn2">
|
|
<svg aria-hidden="true" class="octicon" fill="#8B949E" height="16" viewBox="0 0 128 128" width="16"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M63.9 0C30.5 0 3.1 11.9.1 27.1l35.6 6.7c2.9-.9 6.2-1.3 9.6-1.3l16.7-10c-.2-2.5 1.3-5.1 4.7-7.2 4.8-3.1 12.3-4.8 19.9-4.8 5.2-.1 10.5.7 15 2.2 11.2 3.8 13.7 11.1 5.7 16.3-5.1 3.3-13.3 5-21.4 4.8l-22 7.9c-.2 1.6-1.3 3.1-3.4 4.5-5.9 3.8-17.4 4.7-25.6 1.9-3.6-1.2-6-3-7-4.8L2.5 38.4c2.3 3.6 6 6.9 10.8 9.8C5 53 0 59 0 65.5c0 6.4 4.8 12.3 12.9 17.1C4.8 87.3 0 93.2 0 99.6 0 115.3 28.6 128 64 128c35.3 0 64-12.7 64-28.4 0-6.4-4.8-12.3-12.9-17 8.1-4.8 12.9-10.7 12.9-17.1 0-6.5-5-12.6-13.4-17.4 8.3-5.1 13.3-11.4 13.3-18.2 0-16.5-28.7-29.9-64-29.9zm22.8 14.2c-5.2.1-10.2 1.2-13.4 3.3-5.5 3.6-3.8 8.5 3.8 11.1 7.6 2.6 18.1 1.8 23.6-1.8s3.8-8.5-3.8-11c-3.1-1-6.7-1.5-10.2-1.5zm.3 1.7c7.4 0 13.3 2.8 13.3 6.2 0 3.4-5.9 6.2-13.3 6.2s-13.3-2.8-13.3-6.2c0-3.4 5.9-6.2 13.3-6.2zM45.3 34.4c-1.6.1-3.1.2-4.6.4l9.1 1.7a10.8 5 0 1 1-8.1 9.3l-8.9-1.7c1 .9 2.4 1.7 4.3 2.4 6.4 2.2 15.4 1.5 20-1.5s3.2-7.2-3.2-9.3c-2.6-.9-5.7-1.3-8.6-1.3zM109 51v9.3c0 11-20.2 19.9-45 19.9-24.9 0-45-8.9-45-19.9v-9.2c11.5 5.3 27.4 8.6 44.9 8.6 17.6 0 33.6-3.3 45.2-8.7zm0 34.6v8.8c0 11-20.2 19.9-45 19.9-24.9 0-45-8.9-45-19.9v-8.8c11.6 5.1 27.4 8.2 45 8.2s33.5-3.1 45-8.2z"
|
|
fill-rule="evenodd"></path>
|
|
</svg>
|
|
SteamDB
|
|
</div>
|
|
|
|
<div aria-label="Donate to the author of SteamDepotDownloaderGUI."
|
|
class="btn btn-sm tooltipped tooltipped-n mb-1 w-full text-center items-center" id="smbtn3">
|
|
<svg fill="#8B949E" height="16" style="display: inline-block; vertical-align: text-bottom;"
|
|
viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"
|
|
fill-rule="evenodd"></path>
|
|
</svg>
|
|
Donate
|
|
</div>
|
|
|
|
<div aria-label="View the official SteamDepotDownloaderGUI tutorials."
|
|
class="btn btn-sm tooltipped tooltipped-nw mb-1 w-full text-center items-center" id="smbtn4">
|
|
<svg fill="#8B949E" style="display: inline-block; vertical-align: text-bottom;" height="16" width="16">
|
|
<path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25Zm1.75-.25a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25Z"></path>
|
|
<path d="M6 10.559V5.442a.25.25 0 0 1 .379-.215l4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559Z"></path>
|
|
</svg>
|
|
Tutorial
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="settings-surrounding" id="settings-surrounding">
|
|
<div class="settings-content mx-auto max-w-2/3 h-[85vh] mt-4" id="settings-content">
|
|
<label class="version-info" id="version-info">UNKNOWN</label>
|
|
<button class="opium-button" id="opium-btn">aphex</button>
|
|
<h2><b>Settings</b></h2>
|
|
<h4><b>Appearance</b></h4>
|
|
<div class="form-group">
|
|
<div class="form-group-header">
|
|
<label>Theme</label>
|
|
</div>
|
|
<div class="form-group-body">
|
|
<div class="BtnGroup">
|
|
<button aria-selected="true" class="BtnGroup-item btn btn-sm" id="theme-auto" type="button">
|
|
Auto
|
|
</button>
|
|
<button class="BtnGroup-item btn btn-sm" id="theme-light" type="button">
|
|
Light
|
|
</button>
|
|
<button class="BtnGroup-item btn btn-sm" id="theme-dark" type="button">
|
|
Dark
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4><b>Output</b></h4>
|
|
<form>
|
|
<div class="form-group">
|
|
<div class="form-group-header">
|
|
<label for="folder-name-custom-input">Game directory name</label>
|
|
</div>
|
|
<div class="form-group-body">
|
|
<div class="BtnGroup">
|
|
<button aria-selected="true" class="BtnGroup-item btn btn-sm" id="folder-name-appid"
|
|
type="button">
|
|
Manifest ID
|
|
</button>
|
|
<button class="BtnGroup-item btn btn-sm" id="folder-name-custom" type="button">
|
|
Custom
|
|
</button>
|
|
</div>
|
|
<br>
|
|
<input class="form-control input-block mt-2" disabled
|
|
id="folder-name-custom-input" placeholder="DepotDownloader output directory name"
|
|
type="text">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|