Updated the Creation dialogue majourly

This commit is contained in:
Jesse James Isler 2022-03-30 22:59:33 +02:00
parent a4d8264876
commit 274a9d3ea9
3 changed files with 251 additions and 194 deletions

View File

@ -14,9 +14,6 @@
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!--MATERIALIZE--> <!--MATERIALIZE-->
<!--Import jQuery--> <!--Import jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
@ -24,60 +21,64 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css--> <!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" /> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<!--My Custom Stylesheet--> <!--My Custom Stylesheet-->
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
</head> </head>
<body> <body>
<div class="row">
<div class="container"> <div class="col s6">
<div class="col s12 m5"> <div class="card-panel white">
<div class="card-panel teal"> <form>
<form class="col s12">
<div class="row"> <div class="row">
<div class="input-field col s3"> <div class="input-field col s3">
<input id="name" type="text" class="validate"> <input id="name" type="text" onchange="updateName()" class="validate">
<label for="name">Rolename</label> <label for="name">Rolename</label>
</div> </div>
<div class="input-field col s2"> <div class="input-field col s9">
<select> <input id="description" type="text" onchange="updateDescription()">
<label for="description">Roledescription</label>
</div>
</div>
<div class="row">
<div class="input-field col s3">
<select id="rolecolor" onchange="updateColor()">
<option value="" disabled selected>Color</option> <option value="" disabled selected>Color</option>
<option value="1">Red</option> <option value="red">Red</option>
<option value="2">Pink</option> <option value="pink">Pink</option>
<option value="3">Purple</option> <option value="purple">Purple</option>
<option value="4">Deep-purple</option> <option value="deep-purple">Deep-purple</option>
<option value="5">Indigo</option> <option value="indigo">Indigo</option>
<option value="6">Blue</option> <option value="blue">Blue</option>
<option value="7">Light-blue</option> <option value="light-blue">Light-blue</option>
<option value="8">Cyan</option> <option value="cyan">Cyan</option>
<option value="9">Teal</option> <option value="teal">Teal</option>
<option value="10">Green</option> <option value="green">Green</option>
<option value="11">Light-green</option> <option value="light-green">Light-green</option>
<option value="12">Lime</option> <option value="lime">Lime</option>
<option value="13">Yellow</option> <option value="yellow">Yellow</option>
<option value="14">Amber</option> <option value="amber">Amber</option>
<option value="15">Orange</option> <option value="orange">Orange</option>
<option value="16">Deep-orange</option> <option value="deep-orange">Deep-orange</option>
<option value="17">Brown</option> <option value="brown">Brown</option>
<option value="18">Grey</option> <option value="grey">Grey</option>
<option value="19">Blue-grey</option> <option value="blue-grey">Blue-grey</option>
<option value="20">Black</option> <option value="black">Black</option>
<option value="21">White</option> <option value="white">White</option>
<option value="22">Transparent</option> <option value="transparent">Transparent</option>
</select> </select>
<label>Select color</label> <label>Select color</label>
</div> </div>
<div class="input-field col s1"> <div class="input-field col s3">
<select> <select id="modifier" onchange="updateColor()">
<option value="" disabled selected>Modifier</option> <option value="" selected>None</option>
<option value="1">lighten</option> <option value="lighten">lighten</option>
<option value="2">darken</option> <option value="darken">darken</option>
<option value="3">accent</option> <option value="accent">accent</option>
</select> </select>
<label>Select Modifier</label> <label>Select Modifier</label>
</div> </div>
<div class="input-field col s1"> <div class="input-field col s3">
<select> <select id="strength" onchange="updateColor()">
<option value="" disabled selected>Strength</option> <option value="" disabled selected>Strength</option>
<option value="1">1</option> <option value="1">1</option>
<option value="2">2</option> <option value="2">2</option>
@ -86,41 +87,40 @@
</select> </select>
<label>Select Strength</label> <label>Select Strength</label>
</div> </div>
<div class="input-field col s6 offset-s1"> <div class="input-field col s3">
<select> <select id="tcolor" onchange="updateColor()">
<option value="" disabled selected>Textcolor</option> <option value="" disabled selected>Textcolor</option>
<option value="1">Black</option> <option value="black-text">Black</option>
<option value="2">White</option> <option value="white-text">White</option>
</select> </select>
<label>Select Textcolor</label> <label>Select Textcolor</label>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="input-field col s12"> <div class="input-field col s12">
<textarea id="howtoplay" class="materialize-textarea"></textarea> <textarea id="howtoplay" onchange="updateHowToPlay()" class="materialize-textarea"></textarea>
<label for="howtoplay">Text to describe how to play</label> <label for="howtoplay">Text to describe how to play</label>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="input-field col s12"> <div class="input-field col s12">
<select multiple> <select id="goodRoles" onchange="updateGoodRoles()" multiple>
<option value="" disabled selected>Choose your option</option> <option value="" disabled> Choose your option </option>
<?php <?php
$files = glob("roles/en/*.php"); $files = glob("roles/en/*.php");
$count = 1 $count = 1;
foreach ($files as $filename) { foreach ($files as $filename) {
include $filename; include $filename;
$shortname = substr($filename, 9); $shortname = substr($filename, 9);
$shortname = substr($shortname, 0, -4); $shortname = substr($shortname, 0, -4);
echo "<option value=".$count.">".ucfirst($shortname)."</option>"; echo "<option value=".$count.">".ucfirst($shortname)."</option>";
$count++ $count++;
} }
?> ?>
</select> </select>
<label>Select compatible Roles</label> <label>Select good Roles that go with this role</label>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -130,43 +130,127 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="input-field col s12"> <div class="input-field col s6">
<textarea id="convars" value="Normal Role Convars (also found in ULX): <textarea id="gconvars" class="materialize-textarea"></textarea>
<code></code> <label for="convars">Paste your general convars</label>
</div>
Rolespecific Convars: <div class="input-field col s6">
<code></code>" class="materialize-textarea"></textarea> <textarea id="cconvars" class="materialize-textarea"></textarea>
<label for="convars">Paste your convars</label> <label for="convars">Paste your role specific convars</label>
</div> </div>
</div> </div>
</form> </form>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit <button class="btn waves-effect waves-light" type="submit" name="action">Submit <i class="material-icons right">send</i>
<i class="material-icons right">send</i>
</button> </button>
</div> </div>
</div> </div>
<!-- Cardpreview -->
<div class="col s6">
<div class="blurry">
<div id="rolecard" class="card">
<div class="card-content">
<span class="card-title" id="cardname"></span>
<p id="carddescription"></p>
</div>
<ul class="collapsible black-text white">
<li class="active">
<div class="collapsible-header">
<i class="material-icons">help_outline</i>How to Play
</div>
<div class="collapsible-body">
<pre id="thowtoplay">Soup</pre>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">check</i>Plays best with
</div>
<div class="collapsible-body">
<span>
<ul id="tplaysbestwith">
</ul>
</span>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">code</i>Convars
</div>
<div class="collapsible-body">
<pre >Normal Role Convars (also found in ULX):
<code id="cvars"></code>
Rolespecific Convars:
<code id="rcvars"></code></pre>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">whatshot</i>Credits
</div>
<div class="collapsible-body">
<span>Main Creator: <a id="authorurl" href="{AUTHORURL}">{AUTHORNAME}</a>
<br>
<pre id="credits"></pre>
</span>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">link</i>Links
</div>
<div class="center collapsible-body">
<span>
<a id="steamurl" href="">Steam Workshop</a>
<br>
<a id="githuburl" href="">Github Source</a>
</div>
</span>
</li>
</ul>
</div>
</div>
</div> </div>
<footer class="page-footer indigo"> <!-- Updatescript -->
<div class="container"> <script>
<div class="row"> function updateName() {
<div class="col l6 s12"> document.getElementById("cardname").innerHTML = $('#name').val();
<h5 class="white-text">Thanks for using this list</h5> }
<p class="grey-text text-lighten-4">You might not think of it, but the fact that you are reading this is allready confirmation enough, that this project was worth the weight</p> <!-- Also bonus points for reading the source ;) -->
</div> function updateHowToPlay() {
</div> document.getElementById("thowtoplay").innerHTML = $('#howtoplay').val();
</div> }
<div class="footer-copyright indigo darken-1">
<div class="container"> function createMenuItem(name) {
© <?php echo date("Y"); ?> Jesse James Isler let li = document.createElement('li');
</div> li.textContent = name;
</div> return li;
</footer> }
function updateGoodRoles() {
goodRoles = $('#goodRoles').val();
goodRoles.forEach(element => document.getElementById("tplaysbestwith").appendChild(createMenuItem(element)); )
);
}
function updateDescription() {
document.getElementById("carddescription").innerHTML = $('#description').val();
}
function updateColor() {
document.getElementById("rolecard").className = "card " + $('#rolecolor').val() +" "+ $('#modifier').val() +"-"+ $('#strength').val() + " " + $('#tcolor').val();
}
</script>
<!-- Start Tab init --> <!-- Start Tab init -->
<script> <script>
$(document).ready(function() { $(document).ready(function() {
$('select').formSelect();
$('.collapsible').collapsible();
M.updateTextFields(); M.updateTextFields();
}); });
</script> </script>

View File

@ -1,4 +1,5 @@
html { html {
/* background: url("https://cutewallpaper.org/21/gmod-backgrounds/Garrys-Mod-Ttt-Addons-Kesho-Wazo.jpg") no-repeat center center fixed; */
background: url("https://img4.goodfon.com/wallpaper/nbig/2/39/tokho-toukhou-devushka-fon-mech.jpg") no-repeat center center fixed; background: url("https://img4.goodfon.com/wallpaper/nbig/2/39/tokho-toukhou-devushka-fon-mech.jpg") no-repeat center center fixed;
-webkit-background-size: cover; -webkit-background-size: cover;
-moz-background-size: cover; -moz-background-size: cover;
@ -25,6 +26,7 @@ body::-webkit-scrollbar-thumb {
} }
.card { .card {
border-top-right-radius: 42px;
opacity: 0.9; opacity: 0.9;
background: url("data:image/png;base64,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") repeat center center; background: url("data:image/png;base64,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") repeat center center;
} }

View File

@ -147,8 +147,6 @@
<p>'.$description.'</p> <p>'.$description.'</p>
</div> </div>
<ul class="collapsible black-text white"> <ul class="collapsible black-text white">
<li class="active"> <li class="active">
<div class="collapsible-header"><i class="material-icons">help_outline</i>How to Play</div> <div class="collapsible-header"><i class="material-icons">help_outline</i>How to Play</div>
@ -178,34 +176,7 @@
</ul> </ul>
<!-- OLD VERSION
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab col s3">
<a class="active" href="#'.$shortname.'h2p"><i class="material-icons">help_outline</i></a>
</li>
<li class="tab col s3">
<a href="#'.$shortname.'pbw"><i class="material-icons">check</i></a>
</li>
<li class="tab col s3 hide-on-small-only">
<a href="#'.$shortname.'convars"><i class="material-icons">code</i></a>
</li>
<li class="tab col s3">
<a href="#'.$shortname.'credits"><i class="material-icons">copyright</i></a>
</li>
</ul>
</div>
<div class="card-content grey lighten-4 black-text">
<div id="'.$shortname.'h2p"><h5>How to play:</h5><pre>'.$howtoplay.'</pre></div>
<div id="'.$shortname.'pbw"><h5>Plays best with:</h5>'.$playsbestwith.'</div>
<div id="'.$shortname.'convars"><h5>Convars:</h5>
<pre>'.$convars.'</pre>
</div>
<div id="'.$shortname.'credits"><h5>Credits:</h5>Main Creator: <a href="'.$authorurl.'">'.$author.'</a><br><pre>'.$ctext.'</pre></div>
-->
</div
</div> </div>
</div> </div>
</div> </div>