aboutsummaryrefslogtreecommitdiff
path: root/cmd/web/templates/index.html
diff options
context:
space:
mode:
authorMitch Riedstra <mitch@riedstra.us>2021-03-19 00:55:38 -0400
committerMitch Riedstra <mitch@riedstra.us>2021-03-19 00:55:38 -0400
commit219e47ae2a10ae6aca42e58abd084a69641ec613 (patch)
treeea949ff8a1d60e93f1031a56c692c93965ee69c2 /cmd/web/templates/index.html
parentcd2a6a963c3841fcd83e5e2910dfa4d9241c97f9 (diff)
downloadsteam-export-dev-mar-2021.tar.gz
steam-export-dev-mar-2021.tar.xz
devdev-mar-2021
Diffstat (limited to 'cmd/web/templates/index.html')
-rw-r--r--cmd/web/templates/index.html334
1 files changed, 293 insertions, 41 deletions
diff --git a/cmd/web/templates/index.html b/cmd/web/templates/index.html
index 74f2298..e09f252 100644
--- a/cmd/web/templates/index.html
+++ b/cmd/web/templates/index.html
@@ -2,22 +2,89 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <link id="maincss" rel="stylesheet" href="/static/style.css" defer>
+ <!--
+ <link id="maincss" rel="stylesheet" href="/static/style.css" defer>
+ -->
+
+ <link href="/static/css/bootstrap.min.css" rel="stylesheet" defer>
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Steam Game index</title>
</head>
<body>
-<nav>
- <a href="/">Home</a>
- {{ if .Local }}
- <div style="display: block; float: right;">
- <a href="/quit">Shutdown Server / Quit</a>
- </div>
- {{ end }}
+<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="/">Steam Exporter</a>
+ <button class="navbar-toggler"
+ type="button"
+ data-bs-toggle="collapse"
+ data-bs-target="#navbarsExampleDefault"
+ aria-controls="navbarsExampleDefault"
+ aria-expanded="false"
+ aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+ <ul class="navbar-nav me-auto mb-2 mb-md-0">
+ <li class="nav-item">
+ <a class="nav-link" aria-current="page"
+ href="/steam-export-web.exe">
+ Download
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="#"
+ id="shareLink"
+ data-clipboard-text="http://{{$.HostIP}}:{{$.Port}}/"
+ class="nav-link">
+ Copy Share link
+ </a>
+ </li>
+ {{ if .Local }}
+ <li class="nav-item">
+ <a class="nav-link" aria-current="page"
+ data-bs-target="#installModal"
+ data-bs-toggle="modal"
+ href="#">
+ Install Game
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" aria-current="page"
+ data-bs-target="#libraryModal"
+ data-bs-toggle="modal"
+ href="#">
+ Change Library Path
+ </a>
+ </li>
+ {{ end }}
+ </ul>
+
+ <ul class="navbar-nav ">
+ {{ if .Local }}
+ <li class="nav-item">
+ <a class="nav-link" href="#"
+ data-bs-target="#versionModal"
+ data-bs-toggle="modal"
+ >
+ Version
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="/quit">Shutdown Server/Quit</a>
+ </li>
+ {{ end }}
+ </ul>
+ </div>
+ </div>
</nav>
+
+<div class="container" style="padding-top: 6rem;">
+
{{ if .Local }}
<script src="/static/main.js"></script>
<h2>Library: {{.Lib.Folder}}</h2>
@@ -53,11 +120,14 @@ games from your computer:
<a href="http://{{.HostIP}}:{{.Port}}/">http://{{.HostIP}}:{{.Port}}/</a>
</p>
{{ else }}
+
<h2>Remote Steam library access</h2>
+<p>
<a href="/steam-export-web.exe">
If you need this program to install the games click here.
</a>
+</p>
<p>
Right click and copy the link address to paste into your local machine
@@ -66,51 +136,233 @@ your drive.
</p>
{{ end }}
-<p>
-Installed games:
+<h3>Installed games:</h3>
+
+<div class="container">
+ <table class="table dark table-sm table-striped text-center">
+ <thead>
+ <tr>
+ <th scope="col">Name</th>
+ <th scope="col">Size</th>
+ <th scope="col">Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ {{ range $key, $val := .Lib.Games}}
+ <tr>
+
+ <td>{{$key}}</td>
+ <td>{{$val.GetSize}}</td>
+ <td>
+ <a href="/download/{{$key}}" class="btn btn-secondary">Download</a>
+ <button data-clipboard-text="http://{{$.HostIP}}:{{$.Port}}/download/{{$key}}" class="btn btn-primary">Copy link</button>
+ <button data-bs-target="#delete{{$val.Slug}}Modal" data-bs-toggle="modal" class="btn btn-danger">Delete</button>
+
+ <!--
+ <form action="/delete" method="POST">
+ <input type="hidden" name="name" value= "{{$key}}" />
+ <input type="submit" value="Delete" class="btn btn-danger">
+ </form>
+ -->
+
+ </td>
+ </tr>
+ {{ end }}
+ </tbody>
+ </table>
+</div>
+
+{{ if .Local }}
-Tip: You can right click and save link as to specify a save location, e.g.
-an external hard drive
-</p>
-<ul>
{{ range $key, $val := .Lib.Games }}
-<li>
-<a href="/download/{{$key}}">{{$key}} ({{$val.GetSize}})</a>
-</li>
+<div class="modal fade" id="delete{{$val.Slug}}Modal" tabindex="-1" aria-labelledby="delete{{$val.Slug}}ModalLabel" aria-hidden="true">
+
+ <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="delete{{$val.Slug}}ModalLabel">
+ Delete {{$key}}
+ </h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal"
+aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+
+
+ <form class="row row-cols-lg-auto g-3 align-items-center" action="/delete" method="POST">
+ <div class="col-12">
+ <div class="input-group">
+ <div class="input-group-text">
+ Are you sure you wish to delete '{{$key}}'?
+ </div>
+ <input type="hidden" name="name" value= "{{$key}}" />
+ </div>
+ </div>
+
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+ Close
+ </button>
+ <input type="submit" class="btn btn-danger" value="Delete" />
+ </div>
+ </form>
+ </div>
+ </div>
+</div>
+
{{ end }}
-</ul>
-{{ if .Local }}
-Delete a game: ( Type out exact name, case sensitive )
+<!-- ###################################################################### -->
-<form action="/delete" method="POST">
- <input type="text" name="name" />
- <input type="submit" value="Delete">
-</form>
+<div class="modal fade" id="installModal" tabindex="-1"
+ aria-labelledby="installModalLabel" aria-hidden="true">
-Install a game from a URL or local file path:
+ <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="installModalLabel">
+ Install Game
+ </h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal"
+aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
-<form action="/install" method="GET">
- <input type="text" name="uri" />
- <input type="submit" value="Install">
-</form>
-<p>
-Note that You can also give someone a URL to install a game if they're running
-this program, e.g. <br />
-http://127.0.0.1:8899/install?uri=http://my-server-ip-or-hostname/download/My Game
-</p>
+<form class="row row-cols-lg-auto g-3 align-items-center" action="/install" method="GET">
+ <div class="col-12">
+ <label class="visually-hidden" for="inlineFormInputGroupUsername">
+ C:\Program Files (x86)\Steam\Steamapps\common
+ </label>
+ <div class="input-group">
+ <div class="input-group-text">URI:</div>
+ <input name="uri" type="text" class="form-control" id="inlineFormInputGroupUsername"
+ placeholder="https://10.0.0.123:8899/download/Some Game">
+ </div>
+ </div>
+
+ <!--
+ <div class="col-12">
+ <input type="submit" class="btn btn-primary" value="Submit" />
+ </div>
+ -->
+<!-- </form> -->
+
+ This will force a reload of the entire steam library.
+
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary"
+ data-bs-dismiss="modal">
+ Close
+ </button>
+ <input type="submit" class="btn btn-primary" value="Submit" />
+ </div>
+ </form>
+ </div>
+ </div>
+</div>
+
+<!-- ###################################################################### -->
+
+<!-- Button trigger modal -->
+<!--
+<button type="button" class="btn btn-primary" data-bs-toggle="modal"
+data-bs-target="#libraryModal">
+ Launch demo modal
+</button>
+-->
+
+<!-- Modal -->
+<div class="modal fade" id="libraryModal" tabindex="-1"
+ aria-labelledby="libraryModalLabel" aria-hidden="true">
+
+ <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="libraryModalLabel">
+ Change Library Path
+ </h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal"
+aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+
+
+<form class="row row-cols-lg-auto g-3 align-items-center" action="/setLib" method="GET">
+ <div class="col-12">
+ <label class="visually-hidden" for="inlineFormInputGroupUsername">
+ C:\Program Files (x86)\Steam\Steamapps\common
+ </label>
+ <div class="input-group">
+ <div class="input-group-text">Path:</div>
+ <input name="path" type="text" class="form-control" id="inlineFormInputGroupUsername"
+ placeholder="C:\Program Files (x86)\Steam\Steamapps\common">
+ </div>
+ </div>
+
+ <!--
+ <div class="col-12">
+ <input type="submit" class="btn btn-primary" value="Submit" />
+ </div>
+ -->
+<!-- </form> -->
+
+ This will force a reload of the entire steam library.
+
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary"
+ data-bs-dismiss="modal">
+ Close
+ </button>
+ <input type="submit" class="btn btn-primary" value="Submit" />
+ </div>
+ </form>
+ </div>
+ </div>
+</div>
-Change library path
-<form action="/setLib" method="GET">
- <input type="text" name="path" />
- <input type="submit" value="Update">
-</form>
{{ end }}
-<h3>Version information</h3>
-<pre><code>{{.Version}}</pre></code>
+<div class="modal fade" id="versionModal" tabindex="-1"
+ aria-labelledby="versionModalLabel" aria-hidden="true">
+
+ <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="versionModalLabel">
+ Version Information
+ </h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal"
+aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+
+
+ <pre><code>{{.Version}}</pre></code>
+
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary"
+ data-bs-dismiss="modal">
+ Close
+ </button>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+</div> <!-- /container -->
+<script src="static/js/bootstrap.min.js"></script>
+<script src="static/js/clipboard.min.js"></script>
+<script>
+new ClipboardJS('.btn');
+new ClipboardJS('#shareLink');
+</script>
</body>
You can read more about the author.