mirror of
https://github.com/SophiaAtkinson/steamwidgets-web.git
synced 2026-01-17 07:24:56 -08:00
Initial commit
This commit is contained in:
Daniel Brendel
17
app/views/error/404.php
Normal file
17
app/views/error/404.php
Normal file
@@ -0,0 +1,17 @@
|
||||
<!-- Error 404 yield file -->
|
||||
|
||||
<div class="outer">
|
||||
<div class="inner">
|
||||
<div class="title">
|
||||
<h1>Error 404</h1>
|
||||
</div>
|
||||
|
||||
<div class="text">
|
||||
<p>The requested resource <?= $_SERVER['REQUEST_URI']; ?> was not found on the server.</p>
|
||||
</div>
|
||||
|
||||
<div class="links">
|
||||
<button type="button" class="button btn-col-contact" onclick="location.href = '{{ url('/') }}';">Go home</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
89
app/views/error/exception_debug.php
Normal file
89
app/views/error/exception_debug.php
Normal file
@@ -0,0 +1,89 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Asatru PHP - Exception</title>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(30, 30, 30);
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
.ex_box {
|
||||
position: absolute;
|
||||
width: 98%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.ex_header {
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
font-size: 1.2em;
|
||||
color: rgb(121, 73, 68);
|
||||
}
|
||||
|
||||
.ex_msg {
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.ex_msg strong {
|
||||
color: rgb(128, 0, 0);
|
||||
}
|
||||
|
||||
.ex_trace_box {
|
||||
position: relative;
|
||||
margin-top: 35px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 35px;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
.ex_trace_title {
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.ex_trace_content {
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="ex_box">
|
||||
<div class="ex_header">
|
||||
<h1><strong>Exception</strong> at <?= $exception->getFile(); ?>:<?= $exception->getLine(); ?></h1>
|
||||
</div>
|
||||
|
||||
<div class="ex_msg">
|
||||
Reported error: <strong><?= $exception->getMessage(); ?></strong>
|
||||
</div>
|
||||
|
||||
<div class="ex_trace_box">
|
||||
<div class="ex_trace_title">
|
||||
Stack trace:
|
||||
</div>
|
||||
|
||||
<div class="ex_trace_content">
|
||||
<?= preg_replace("/\n/", '<br>', $exception->getTraceAsString()); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
app/views/error/exception_prod.php
Normal file
41
app/views/error/exception_prod.php
Normal file
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Asatru PHP - Error 500</title>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(30, 30, 30);
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
.outer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="inner">
|
||||
<strong>500</strong> | Internal server error
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
13
app/views/footer.php
Normal file
13
app/views/footer.php
Normal file
@@ -0,0 +1,13 @@
|
||||
<div class="footer">
|
||||
<div class="columns">
|
||||
<div class="column is-4"></div>
|
||||
<div class="column is-4">
|
||||
<div class="footer-frame">
|
||||
<div class="footer-content">
|
||||
© {{ date('Y') }} by {{ env('APP_AUTHOR') }} | <a href="{{ env('APP_LINK_GITHUB') }}" title="GitHub"><i class="fab fa-github"></i></a> <a href="{{ env('APP_LINK_TWITTER') }}" title="Twitter"><i class="fab fa-twitter"></i></a> <a href="{{ env('APP_LINK_STEAM') }}" title="Steam"><i class="fab fa-steam"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
668
app/views/generator.php
Normal file
668
app/views/generator.php
Normal file
@@ -0,0 +1,668 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="author" content="{{ env('APP_AUTHOR') }}">
|
||||
<meta name="description" content="{{ env('APP_DESCRIPTION') }}">
|
||||
<meta name="keywords" content="{{ env('APP_KEYWORDS') }}">
|
||||
|
||||
<link rel="icon" type="image/png" href="{{ asset('img/logo.png') }}"/>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{ asset('css/bulma.css') }}"/>
|
||||
|
||||
<title>{{ env('APP_TITLE') }}</title>
|
||||
|
||||
<style>
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: rgb(32, 32, 30);
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#generator {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.generator-outer {
|
||||
width: 100%;
|
||||
height: 93%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.generator-outer h1 {
|
||||
text-align: center;
|
||||
color: rgb(200, 200, 200);
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.generator-outer p {
|
||||
color: rgb(150, 150, 150);
|
||||
margin-bottom: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.generator-outer a:hover {
|
||||
color: #3273dc;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.generator-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 90%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.generator-headline {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin-bottom: 53px;
|
||||
background-color: rgb(85, 145, 245);
|
||||
}
|
||||
|
||||
.generator-headline h1 {
|
||||
position: relative;
|
||||
top: 8px;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.generator-menu-options {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.generator-menu-options div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.button-fixed-size {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
#generator-widget-app {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#generator-widget-app h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#generator-widget-app, #generator-widget-app label {
|
||||
color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
#generator-widget-app input {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
color: rgb(150, 150, 150);
|
||||
}
|
||||
|
||||
#generator-widget-app form {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#widget-output-app {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#widget-output-app pre {
|
||||
background-color: rgb(55, 55, 55);
|
||||
}
|
||||
|
||||
#widget-output-app code {
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
#widget-output-codecopy-app {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#generator-widget-server {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#generator-widget-server h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#generator-widget-server, #generator-widget-server label {
|
||||
color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
#generator-widget-server input {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
color: rgb(150, 150, 150);
|
||||
}
|
||||
|
||||
#generator-widget-server form {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#widget-output-server {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#widget-output-server pre {
|
||||
background-color: rgb(55, 55, 55);
|
||||
}
|
||||
|
||||
#widget-output-server code {
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
#widget-output-codecopy-server {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#generator-widget-user {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#generator-widget-user h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#generator-widget-user, #generator-widget-user label {
|
||||
color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
#generator-widget-user input {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
color: rgb(150, 150, 150);
|
||||
}
|
||||
|
||||
#generator-widget-user form {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#widget-output-user {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#widget-output-user pre {
|
||||
background-color: rgb(55, 55, 55);
|
||||
}
|
||||
|
||||
#widget-output-user code {
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
#widget-output-codecopy-user {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-frame {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
text-align: center;
|
||||
color: rgb(150, 150, 150);
|
||||
}
|
||||
|
||||
.footer-content a {
|
||||
color: rgb(130, 130, 130);
|
||||
}
|
||||
|
||||
.footer-content a:hover {
|
||||
color: rgb(150, 150, 150);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@if (env('APP_DEBUG'))
|
||||
<script src="{{ asset('js/vue.js') }}"></script>
|
||||
@else
|
||||
<script src="{{ asset('js/vue.min.js') }}"></script>
|
||||
@endif
|
||||
<script src="{{ asset('js/fontawesome.js') }}"></script>
|
||||
<script src="{{ url('/api/resource/query') }}?type=js&module=app&version=v1"></script>
|
||||
<script src="{{ url('/api/resource/query') }}?type=js&module=server&version=v1"></script>
|
||||
<script src="{{ url('/api/resource/query') }}?type=js&module=user&version=v1"></script>
|
||||
</head>
|
||||
|
||||
<body id="body" style="background-image: url('{{ asset('img/genbg.jpg') }}');">
|
||||
<div id="generator">
|
||||
<div class="generator-outer">
|
||||
<div class="generator-headline">
|
||||
<h1>SteamCards Widget Generator</h1>
|
||||
</div>
|
||||
|
||||
<div id="infos">
|
||||
<p>Please select a type of widget you want to create.</p>
|
||||
|
||||
<p>For more information about {{ env('APP_NAME') }} please visit <a href="{{ url('/') }}">{{ url('/') }}</a></p>
|
||||
</div>
|
||||
|
||||
<div class="generator-inner" id="generator-inner">
|
||||
<div class="generator-menu-options" id="generator-options">
|
||||
<div><a class="button is-link is-outlined button-fixed-size" href="javascript:void(0);" onclick="document.getElementById('generator-options').style.display = 'none'; document.getElementById('generator-widget-app').style.display = 'unset'; window.setWidgetStyle(true); document.getElementById('footer').style.display = 'none'; document.getElementById('body').style.backgroundImage = 'unset'; document.getElementById('generator').style.backgroundColor = 'unset'; document.getElementById('infos').style.display = 'none';">Steam App Widget</a></div>
|
||||
<div><a class="button is-link is-outlined button-fixed-size" href="javascript:void(0);" onclick="document.getElementById('generator-options').style.display = 'none'; document.getElementById('generator-widget-server').style.display = 'unset'; window.setWidgetStyle(true); document.getElementById('footer').style.display = 'none'; document.getElementById('body').style.backgroundImage = 'unset'; document.getElementById('generator').style.backgroundColor = 'unset'; document.getElementById('infos').style.display = 'none';">Steam Server Widget</a></div>
|
||||
<div><a class="button is-link is-outlined button-fixed-size" href="javascript:void(0);" onclick="document.getElementById('generator-options').style.display = 'none'; document.getElementById('generator-widget-user').style.display = 'unset'; window.setWidgetStyle(true); document.getElementById('footer').style.display = 'none'; document.getElementById('body').style.backgroundImage = 'unset'; document.getElementById('generator').style.backgroundColor = 'unset'; document.getElementById('infos').style.display = 'none';">Steam User Widget</a></div>
|
||||
</div>
|
||||
|
||||
<div id="generator-widget-app">
|
||||
<a href="javascript:void(0);" onclick="document.getElementById('generator-options').style.display = 'unset'; document.getElementById('generator-widget-app').style.display = 'none'; document.getElementById('footer').style.display = 'unset'; document.getElementById('body').style.backgroundImage = 'url(\'{{ asset('img/genbg.jpg') }}\')'; document.getElementById('generator').style.backgroundColor = 'rgb(0, 0, 0, 0.5)'; document.getElementById('infos').style.display = 'initial'; window.setWidgetStyle(false);">Go Back</a><br/><br/>
|
||||
|
||||
<h2>Create Steam App Widget</h2>
|
||||
|
||||
<form>
|
||||
<div class="field">
|
||||
<label class="label">AppID</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-app-appid" value="12345" required/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Language</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-app-lang" value="english"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Author</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-app-author" value="By :developer"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Online Count</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-app-onlinecount" value=":count playing"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Playtext</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-app-playtext" value="Play"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Width</label>
|
||||
<div class="control">
|
||||
<input type="number" class="input" id="inp-widget-app-width" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Height</label>
|
||||
<div class="control">
|
||||
<input type="number" class="input" id="inp-widget-app-height" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<a class="button is-success is-outlined" onclick="window.genAppWidget();">Generate</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="widget-output-app">
|
||||
<textarea id="widget-output-codecopy-app"></textarea>
|
||||
<pre><code id="widget-code-app" class="language-html" onclick="window.copyToClipboard(document.getElementById('widget-output-codecopy-app').value); alert('Code copied to clipboard!');"></code></pre>
|
||||
<br/><br/>
|
||||
<div id="widget-sample-app"></div>
|
||||
<br/><br/><br/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="generator-widget-server">
|
||||
<a href="javascript:void(0);" onclick="document.getElementById('generator-options').style.display = 'unset'; document.getElementById('generator-widget-server').style.display = 'none'; document.getElementById('footer').style.display = 'unset'; document.getElementById('body').style.backgroundImage = 'url(\'{{ asset('img/genbg.jpg') }}\')'; document.getElementById('generator').style.backgroundColor = 'rgb(0, 0, 0, 0.5)'; document.getElementById('infos').style.display = 'initial'; window.setWidgetStyle(false);">Go Back</a><br/><br/>
|
||||
|
||||
<h2>Create Steam Server Widget</h2>
|
||||
|
||||
<form>
|
||||
<div class="field">
|
||||
<label class="label">Address</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-server-addr" value="ip:port" required/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Header</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-server-header" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Bots</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-server-bots" value=":count bots"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Secure Text</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-server-secure-yes" value="secure"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Insecure text</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-server-secure-no" value="insecure"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Dedicated Hosting Text</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-server-hosting-dedicated" value="dedicated"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Listen Hosting Text</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-server-hosting-listen" value="listen"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Join text</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-server-join" value="Join"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Width</label>
|
||||
<div class="control">
|
||||
<input type="number" class="input" id="inp-widget-server-width" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Height</label>
|
||||
<div class="control">
|
||||
<input type="number" class="input" id="inp-widget-server-height" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<a class="button is-success is-outlined" onclick="window.genServerWidget();">Generate</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="widget-output-server">
|
||||
<textarea id="widget-output-codecopy-server"></textarea>
|
||||
<pre><code id="widget-code-server" class="language-html" onclick="window.copyToClipboard(document.getElementById('widget-output-codecopy-server').value); alert('Code copied to clipboard!');"></code></pre>
|
||||
<br/><br/>
|
||||
<div id="widget-sample-server"></div>
|
||||
<br/><br/><br/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="generator-widget-user">
|
||||
<a href="javascript:void(0);" onclick="document.getElementById('generator-options').style.display = 'unset'; document.getElementById('generator-widget-user').style.display = 'none'; document.getElementById('footer').style.display = 'unset'; document.getElementById('body').style.backgroundImage = 'url(\'{{ asset('img/genbg.jpg') }}\')'; document.getElementById('generator').style.backgroundColor = 'rgb(0, 0, 0, 0.5)'; document.getElementById('infos').style.display = 'initial'; window.setWidgetStyle(false);">Go Back</a><br/><br/>
|
||||
|
||||
<h2>Create Steam User Widget</h2>
|
||||
|
||||
<form>
|
||||
<div class="field">
|
||||
<label class="label">SteamID</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-user-steamid" value="12345" required/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Header</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-user-header" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Online Text</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-user-online-yes" value="online"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Offline Text</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-user-online-no" value="offline"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Member Since Text</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-user-membersince" value="Member since: :year-:month-:day"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">View Text</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" id="inp-widget-user-viewtext" value="View"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Width</label>
|
||||
<div class="control">
|
||||
<input type="number" class="input" id="inp-widget-user-width" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Height</label>
|
||||
<div class="control">
|
||||
<input type="number" class="input" id="inp-widget-user-height" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<a class="button is-success is-outlined" onclick="window.genUserWidget();">Generate</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="widget-output-user">
|
||||
<textarea id="widget-output-codecopy-user"></textarea>
|
||||
<pre><code id="widget-code-user" class="language-html" onclick="window.copyToClipboard(document.getElementById('widget-output-codecopy-user').value); alert('Code copied to clipboard!');"></code></pre>
|
||||
<br/><br/>
|
||||
<div id="widget-sample-user"></div>
|
||||
<br/><br/><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-frame" id="footer">
|
||||
<div class="footer-content">
|
||||
© {{ date('Y') }} by {{ env('APP_AUTHOR') }} | <a href="{{ env('APP_LINK_GITHUB') }}" title="GitHub"><i class="fab fa-github"></i></a> <a href="{{ env('APP_LINK_TWITTER') }}" title="Twitter"><i class="fab fa-twitter"></i></a> <a href="{{ env('APP_LINK_STEAM') }}" title="Steam"><i class="fab fa-steam"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="app" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<script src="{{ asset('js/app.js') }}"></script>
|
||||
<script>
|
||||
window.genAppWidget = function() {
|
||||
let appid = document.getElementById('inp-widget-app-appid').value;
|
||||
let lang = document.getElementById('inp-widget-app-lang').value;
|
||||
let author = document.getElementById('inp-widget-app-author').value;
|
||||
let playtext = document.getElementById('inp-widget-app-playtext').value;
|
||||
let onlinecount = document.getElementById('inp-widget-app-onlinecount').value;
|
||||
let width = document.getElementById('inp-widget-app-width').value;
|
||||
let height = document.getElementById('inp-widget-app-height').value;
|
||||
|
||||
document.getElementById('widget-output-app').style.display = 'unset';
|
||||
|
||||
let codeOutput = `
|
||||
<script src="{{ url('/api/resource/query?type=js&module=app&version=v1') }}"></script>
|
||||
<steam-app appid="` + appid + `" lang="` + lang + `" author="` + author + `" playtext="` + playtext + `" onlinecount="` + onlinecount + `" width="` + width + `" height="` + height + `"></steam-app>
|
||||
`;
|
||||
|
||||
document.getElementById('widget-code-app').innerHTML = codeOutput;
|
||||
|
||||
document.getElementById('widget-output-codecopy-app').value = codeOutput;
|
||||
while ((document.getElementById('widget-output-codecopy-app').value.indexOf('<') >= 0) || (document.getElementById('widget-output-codecopy-app').value.indexOf('>') >= 0)) {
|
||||
document.getElementById('widget-output-codecopy-app').value = document.getElementById('widget-output-codecopy-app').value.replace('<', '<').replace('>', '>')
|
||||
}
|
||||
|
||||
document.getElementById('widget-sample-app').innerHTML = '';
|
||||
|
||||
let sampleCard = new SteamApp('#widget-sample-app', {
|
||||
appid: appid,
|
||||
lang: lang,
|
||||
playtext: playtext,
|
||||
onlinecount: onlinecount,
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
|
||||
window.hljs.highlightAll();
|
||||
|
||||
setTimeout(function(){
|
||||
window.scrollBy(0, 600);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
window.genServerWidget = function() {
|
||||
let addr = document.getElementById('inp-widget-server-addr').value;
|
||||
let header = document.getElementById('inp-widget-server-header').value;
|
||||
let bots = document.getElementById('inp-widget-server-bots').value;
|
||||
let secYes = document.getElementById('inp-widget-server-secure-yes').value;
|
||||
let secNo = document.getElementById('inp-widget-server-secure-no').value;
|
||||
let dedicated = document.getElementById('inp-widget-server-hosting-dedicated').value;
|
||||
let listen = document.getElementById('inp-widget-server-hosting-listen').value;
|
||||
let playtext = document.getElementById('inp-widget-server-join').value;
|
||||
let width = document.getElementById('inp-widget-server-width').value;
|
||||
let height = document.getElementById('inp-widget-server-height').value;
|
||||
|
||||
document.getElementById('widget-output-server').style.display = 'unset';
|
||||
|
||||
let codeOutput = `
|
||||
<script src="{{ url('/api/resource/query?type=js&module=server&version=v1') }}"></script>
|
||||
<steam-server addr="` + addr + `" header="` + header + `" secure-yes="` + secYes + `" secure-no="` + secNo + `" hosting-dedicated="` + dedicated + `" hosting-listen="` + listen + `" playtext="` + playtext + `" width="` + width + `" height="` + height + `"></steam-server>
|
||||
`;
|
||||
|
||||
document.getElementById('widget-code-server').innerHTML = codeOutput;
|
||||
|
||||
document.getElementById('widget-output-codecopy-server').value = codeOutput;
|
||||
while ((document.getElementById('widget-output-codecopy-server').value.indexOf('<') >= 0) || (document.getElementById('widget-output-codecopy-server').value.indexOf('>') >= 0)) {
|
||||
document.getElementById('widget-output-codecopy-server').value = document.getElementById('widget-output-codecopy-server').value.replace('<', '<').replace('>', '>')
|
||||
}
|
||||
|
||||
document.getElementById('widget-sample-server').innerHTML = '';
|
||||
|
||||
let sampleCard = new SteamServer('#widget-sample-server', {
|
||||
addr: addr,
|
||||
header: header,
|
||||
playtext: playtext,
|
||||
bots: bots,
|
||||
secure_yes: secYes,
|
||||
secure_no: secNo,
|
||||
hosting_dedicated: dedicated,
|
||||
hosting_listen: listen,
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
|
||||
window.hljs.highlightAll();
|
||||
|
||||
setTimeout(function(){
|
||||
window.scrollBy(0, 600);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
window.genUserWidget = function() {
|
||||
let steamid = document.getElementById('inp-widget-user-steamid').value;
|
||||
let header = document.getElementById('inp-widget-user-header').value;
|
||||
let online = document.getElementById('inp-widget-user-online-yes').value;
|
||||
let offline = document.getElementById('inp-widget-user-online-no').value;
|
||||
let membersince = document.getElementById('inp-widget-user-membersince').value;
|
||||
let viewtext = document.getElementById('inp-widget-user-viewtext').value;
|
||||
let width = document.getElementById('inp-widget-user-width').value;
|
||||
let height = document.getElementById('inp-widget-user-height').value;
|
||||
|
||||
document.getElementById('widget-output-user').style.display = 'unset';
|
||||
|
||||
let codeOutput = `
|
||||
<script src="{{ url('/api/resource/query?type=js&module=user&version=v1') }}"></script>
|
||||
<steam-user steamid="` + steamid + `" header="` + header + `" online-yes="` + online + `" online-no="` + offline + `" member-since="` + membersince + `" viewtext="` + viewtext + `" width="` + width + `" height="` + height + `"></steam-user>
|
||||
`;
|
||||
|
||||
document.getElementById('widget-code-user').innerHTML = codeOutput;
|
||||
|
||||
document.getElementById('widget-output-codecopy-user').value = codeOutput;
|
||||
while ((document.getElementById('widget-output-codecopy-user').value.indexOf('<') >= 0) || (document.getElementById('widget-output-codecopy-user').value.indexOf('>') >= 0)) {
|
||||
document.getElementById('widget-output-codecopy-user').value = document.getElementById('widget-output-codecopy-user').value.replace('<', '<').replace('>', '>')
|
||||
}
|
||||
|
||||
document.getElementById('widget-sample-user').innerHTML = '';
|
||||
|
||||
let sampleCard = new SteamUser('#widget-sample-user', {
|
||||
steamid: steamid,
|
||||
header: header,
|
||||
online_yes: online,
|
||||
online_no: offline,
|
||||
member_since: membersince,
|
||||
viewtext: viewtext,
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
|
||||
window.hljs.highlightAll();
|
||||
|
||||
setTimeout(function(){
|
||||
window.scrollBy(0, 600);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
window.setWidgetStyle = function(flag) {
|
||||
if (flag) {
|
||||
document.getElementById('generator-inner').style.top = 'unset';
|
||||
document.getElementById('generator-inner').style.transform = 'translate(-50%, -0%)';
|
||||
document.getElementById('generator-inner').style.overflowY = 'hidden';
|
||||
} else {
|
||||
document.getElementById('generator-inner').style.top = '50%';
|
||||
document.getElementById('generator-inner').style.transform = 'translate(-50%, -50%)';
|
||||
document.getElementById('generator-inner').style.overflowY = 'unset';
|
||||
}
|
||||
};
|
||||
|
||||
window.copyToClipboard = function(text) {
|
||||
const el = document.createElement('textarea');
|
||||
el.value = text;
|
||||
document.body.appendChild(el);
|
||||
el.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(el);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
551
app/views/index.php
Normal file
551
app/views/index.php
Normal file
@@ -0,0 +1,551 @@
|
||||
<div class="content-section content-centered content-top-margin">
|
||||
<h1>{{ env('APP_NAME') }}</h1>
|
||||
|
||||
<h2>{{ env('APP_DESCRIPTION') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<a name="about"></a><br/><br/>
|
||||
|
||||
<h3>About</h3>
|
||||
|
||||
<p>
|
||||
SteamCards is a clientside web component that offers an easy way to integrate Steam Cards of various Steam
|
||||
entities into your website. Therefore you only need very few code in order to render Steam Cards into your document.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
SteamCards is used via JavaScript. Since JavaScript is supported by all major browser per default it is
|
||||
platform independent and compatible.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The following Widgets are currently available:<br/>
|
||||
|
||||
<ul>
|
||||
<li><a href="#steam-app">Steam App Widget</a></li>
|
||||
<li><a href="#steam-server">Steam Server Widget</a></li>
|
||||
<li><a href="#steam-user">Steam User Widget</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
You can use SteamCards by referencing the neccessary JavaScript files from the official SteamCards server as follows:<br/>
|
||||
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<script src="{{ url('/api/resource/query?type=js&module=STEAM_CARDS_MODULE&version=v1') }}"></script>
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<br/>
|
||||
|
||||
<i>STEAM_CARDS_MODULE</i> can either be <b>app</b> for the Steam App widget, <b>server</b> for the Steam Server widget or
|
||||
<b>user</b> for the Steam User widget.
|
||||
</p>
|
||||
|
||||
@if (env('APP_SHOWNPMUSAGE', false))
|
||||
<p>
|
||||
You can also use NPM to install the package. Please visit the NPM page of the package in order to get instruction details:<br/>
|
||||
<br/>
|
||||
<a href="{{ env('APP_NPMPACKAGEURL') }}">{{ env('APP_NPMPACKAGEURL') }}</a>
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<a name="steam-app"></a><br/><br/>
|
||||
|
||||
<h3>Steam App</h3>
|
||||
|
||||
<p>
|
||||
When referenced the required Steam App module, the minimum code to render a card is as follows:<br/>
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<steam-app appid="620"></steam-app>
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<br/><br/>
|
||||
This renders the following card:<br/>
|
||||
<steam-app appid="620"></steam-app>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<br/>You can define these options:<br/>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Attribute</strong></td>
|
||||
<td><strong>Value</strong></td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>appid</td>
|
||||
<td>Specifies the ID of a Steam game/app</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>lang</td>
|
||||
<td>Specifies the language of the localized Steam data</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>onlinecount</td>
|
||||
<td>If specified this will be the text for the online count. Use <b>:count</b> to dynamically insert the actual products player/user count.</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>playtext</td>
|
||||
<td>Specifies the text of the button that eventually links to the Steam products store page</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>author</td>
|
||||
<td>Specify a text that is displayed as the author of the product. You can use <b>:developer</b> and <b>:publisher</b> to dynamically insert the products developer and publisher names</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>width</td>
|
||||
<td>Specify the width of the card</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>height</td>
|
||||
<td>Specify the height of the card</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>style-border / style.border</td>
|
||||
<td>Specify border rounding: Either none, small or max</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>style-shadow / style.shadow</td>
|
||||
<td>You can specify false to prevent displaying box shadow or true to enable (default)</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>style-color-background / style.colorBackground</td>
|
||||
<td>Specify a CSS value for the background color</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>style-color-title / style.colorTitle</td>
|
||||
<td>Specify a CSS value for the title color</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>style-color-description / style.colorDescription</td>
|
||||
<td>Specify a CSS value for the description color</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>style-color-author / style.colorAuthor</td>
|
||||
<td>Specify a CSS value for the author color</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>style-color-onlinecount / style.colorOnlinecount</td>
|
||||
<td>Specify a CSS value for the online count color</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>style-hideimage / style.hideimage</td>
|
||||
<td>Specify whether the card image shall be hidden or not</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
You can also dynamically create Steam App cards via JavaScript:<br/>
|
||||
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<div id="app-card"></div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let card = new SteamApp('#app-card', {
|
||||
appid: '620',
|
||||
//You can specify the same attributes as shown in the table above
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<br/>The following methods are available for a Steam App element / object:<br/>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Method</strong></td>
|
||||
<td><strong>Description</strong></td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>updateCard()</td>
|
||||
<td>Updates the card data and displays them</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>changeLang(lang, playtext, author, onlinecount)</td>
|
||||
<td>Changes the language of the card using the given information</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>setImageVisibility(visibility)</td>
|
||||
<td>Sets the card image visibility</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>remove()</td>
|
||||
<td>Removes the card from the document</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</p>
|
||||
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<a name="steam-server"></a><br/><br/>
|
||||
|
||||
<h3>Steam Server</h3>
|
||||
|
||||
<p>
|
||||
When referenced the required Steam Server module, the minimum code to render a card is as follows:<br/>
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<steam-server addr="ip:port"></steam-server>
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<br/><br/>
|
||||
This renders the following card:<br/>
|
||||
<steam-server addr="ip:port"></steam-server>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<br/>You can define these options:<br/>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Attribute</strong></td>
|
||||
<td><strong>Value</strong></td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>addr</td>
|
||||
<td>Specifies the address of the server using format <b>ip</b>:<b>port</b></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>header</td>
|
||||
<td>If you want to render the card with a header image you may specify the URL to an image here</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>bots</td>
|
||||
<td>Specify the text for the bot info. Use :count to render the actual bot count</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>secure_yes</td>
|
||||
<td>Specifies the text that is displayed if the server is a secure server</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>secure_no</td>
|
||||
<td>Specifies the text that is displayed if the server is not a secure server</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>hosting_dedicated</td>
|
||||
<td>Specifies the text that is displayed if the server is a dedicated server</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>hosting_listen</td>
|
||||
<td>Specifies the text that is displayed if the server is a listen server</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>playtext</td>
|
||||
<td>Specifies the text of the button that issues a connection to the server</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>width</td>
|
||||
<td>Specify the width of the card</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>height</td>
|
||||
<td>Specify the height of the card</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>style-border / style.border</td>
|
||||
<td>Specify border rounding: Either none, small or max</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>style-shadow / style.shadow</td>
|
||||
<td>You can specify false to prevent displaying box shadow or true to enable (default)</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>style-color-background / style.colorBackground</td>
|
||||
<td>Specify a CSS value for the background color</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>style-color-text-bright / style.colorTextBright</td>
|
||||
<td>Specify a CSS value for the bright texts</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>style-color-text-dark / style.colorTextDark</td>
|
||||
<td>Specify a CSS value for the dark texts</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
You can also dynamically create Steam Server cards via JavaScript:<br/>
|
||||
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<div id="server-card"></div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let card = new SteamServer('#server-card', {
|
||||
addr: 'ip:port',
|
||||
//You can specify the same attributes as shown in the table above
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<br/>The following methods are available for a Steam Server element / object:<br/>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Method</strong></td>
|
||||
<td><strong>Description</strong></td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>updateCard()</td>
|
||||
<td>Updates the card data and displays them</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>changeLang(bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext)</td>
|
||||
<td>Changes the language of the card using the given information</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>setImageVisibility(visibility)</td>
|
||||
<td>Sets the card image visibility</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>remove()</td>
|
||||
<td>Removes the card from the document</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</p>
|
||||
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<a name="steam-user"></a><br/><br/>
|
||||
|
||||
<h3>Steam User</h3>
|
||||
|
||||
<p>
|
||||
When referenced the required Steam User module, the minimum code to render a card is as follows:<br/>
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<steam-user steamid="id"></steam-user>
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<br/><br/>
|
||||
This renders the following card:<br/>
|
||||
<steam-user steamid="steamid"></steam-user>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<br/>You can define these options:<br/>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Attribute</strong></td>
|
||||
<td><strong>Value</strong></td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>steamid</td>
|
||||
<td>Specifies the SteamID of the Steam user</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>header</td>
|
||||
<td>If you want to render the card with a header image you may specify the URL to an image here</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>online_yes</td>
|
||||
<td>Specifies the text that is displayed if the user is currently online</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>online_no</td>
|
||||
<td>Specifies the text that is displayed if the user is not currently online</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>member_since</td>
|
||||
<td>Specifies the text and format of the info that shows since when the user account is registered. Use <b>:year</b>, <b>:month</b> and <b>:day</b> to format the date.</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>viewtext</td>
|
||||
<td>Specifies the text of the button which can be used to go to the users Steam Community profile</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>width</td>
|
||||
<td>Specify the width of the card</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>height</td>
|
||||
<td>Specify the height of the card</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>style-border / style.border</td>
|
||||
<td>Specify border rounding: Either none, small or max</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>style-shadow / style.shadow</td>
|
||||
<td>You can specify false to prevent displaying box shadow or true to enable (default)</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>style-color-background / style.colorBackground</td>
|
||||
<td>Specify a CSS value for the background color</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>style-color-text-bright / style.colorTextBright</td>
|
||||
<td>Specify a CSS value for the bright texts</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>style-color-text-dark / style.colorTextDark</td>
|
||||
<td>Specify a CSS value for the dark texts</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
You can also dynamically create Steam User cards via JavaScript:<br/>
|
||||
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<div id="user-card"></div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let card = new SteamUser('#user-card', {
|
||||
steamid: 'id',
|
||||
//You can specify the same attributes as shown in the table above
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<br/>The following methods are available for a Steam User element / object:<br/>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Method</strong></td>
|
||||
<td><strong>Description</strong></td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>updateCard()</td>
|
||||
<td>Updates the card data and displays them</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>changeLang(online_yes, online_no, member_since, viewtext)</td>
|
||||
<td>Changes the language of the card using the given information</td>
|
||||
</tr>
|
||||
|
||||
<tr class="tr-colored">
|
||||
<td>setImageVisibility(visibility)</td>
|
||||
<td>Sets the card image visibility</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>remove()</td>
|
||||
<td>Removes the card from the document</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</p>
|
||||
</div>
|
||||
60
app/views/layout.php
Normal file
60
app/views/layout.php
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ getLocale() }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="author" content="{{ env('APP_AUTHOR') }}">
|
||||
<meta name="description" content="{{ env('APP_DESCRIPTION') }}">
|
||||
<meta name="keywords" content="{{ env('APP_KEYWORDS') }}">
|
||||
|
||||
<link rel="icon" type="image/png" href="{{ asset('img/logo.png') }}"/>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{ asset('css/bulma.css') }}"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}"/>
|
||||
|
||||
<title>{{ env('APP_TITLE') }}</title>
|
||||
|
||||
@if (env('APP_DEBUG'))
|
||||
<script src="{{ asset('js/vue.js') }}"></script>
|
||||
@else
|
||||
<script src="{{ asset('js/vue.min.js') }}"></script>
|
||||
@endif
|
||||
<script src="{{ asset('js/fontawesome.js') }}"></script>
|
||||
<script src="{{ url('/api/resource/query') }}?type=js&module=app&version=v1"></script>
|
||||
<script src="{{ url('/api/resource/query') }}?type=js&module=server&version=v1"></script>
|
||||
<script src="{{ url('/api/resource/query') }}?type=js&module=user&version=v1"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
@include('navbar.php')
|
||||
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-2"></div>
|
||||
|
||||
<div class="column is-8">
|
||||
{%content%}
|
||||
|
||||
<div class="scroll-to-top">
|
||||
<div class="scroll-to-top-inner">
|
||||
<a href="javascript:void(0);" onclick="window.scroll({top: 0, left: 0, behavior: 'smooth'});"><i class="fas fa-arrow-up fa-2x up-color"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('footer.php')
|
||||
</div>
|
||||
|
||||
<script src="{{ asset('js/app.js') }}"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
window.vue.initNavBar();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
47
app/views/navbar.php
Normal file
47
app/views/navbar.php
Normal file
@@ -0,0 +1,47 @@
|
||||
<nav class="navbar is-light is-fixed-top" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item navbar-item-brand is-font-title" href="{{ url('/') }}">
|
||||
<img src="{{ asset('img/logo.png') }}"/> {{ env('APP_NAME') }}
|
||||
</a>
|
||||
|
||||
<a id="burger-button" role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarBasicExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="{{ url('/#about') }}" onclick="document.getElementById('burger-button').click(); return true;">
|
||||
About
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="{{ url('/#steam-app') }}" onclick="document.getElementById('burger-button').click(); return true;">
|
||||
Steam App
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="{{ url('/#steam-server') }}" onclick="document.getElementById('burger-button').click(); return true;">
|
||||
Steam Server
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="{{ url('/#steam-user') }}" onclick="document.getElementById('burger-button').click(); return true;">
|
||||
Steam User
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<img src="https://img.shields.io/github/forks/{{ env('APP_PACKAGE') }}?style=social"/>
|
||||
</div>
|
||||
|
||||
<div class="navbar-item">
|
||||
<img src="https://img.shields.io/github/issues/{{ env('APP_PACKAGE') }}?style=social"/>
|
||||
</div>
|
||||
|
||||
<div class="navbar-item">
|
||||
<img src="https://img.shields.io/github/downloads/{{ env('APP_PACKAGE') }}/total?style=social"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
Reference in New Issue
Block a user