Skip to content

Commit

Permalink
Update confighelper.html
Browse files Browse the repository at this point in the history 
- Cleaning up inputs after adding new account.
- Adding CSS styles to improve user experience.
  • Loading branch information
@vitorsammarco
vitorsammarco authored Feb 6, 2023
1 parent 9b6faba commit 197fe7d
Showing 1 changed file with 106 additions and 49 deletions.
155 changes: 106 additions & 49 deletions confighelper.html
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,111 @@
<html>
<head>
<title>CapsuleFarmerEvolved config helper</title>
<style>
code {
background-color: #eee;
border: 1px solid #999;
display: block;
width: 20%;
padding: 20px;
}
</style>
</head>
<head>
<title>Capsule Farmer Evolved</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
@import url(https://fonts.cdnfonts.com/css/nexa-bold);*{margin:0;padding:0;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--white-0:#FFF;--white-1:#ebebeb;--white-2:#eee;--white-3:#f9f9f9;--white-4:#b8b8b8;--black-0:#000;--black-1:#0a0a0a;--black-2:#141213;--black-3:#1f1f1f;--black-4:#252423;--grey-1:#656462;--grey-2:#8a8887;--blue-1:#2accf0;--blue-2:#1ba6dd;--blue-3:#1983da;--deepblue:#1e1e24;--light-blue:#8be9fd;--pink:#ff79c6;--yellow:#f1fa8c;--green-1:#34f585;--green-2:#3bdb5e;--green-3:#26bd46;--golden-1:#d1a34c;--red:#d1363a;--black-background:var(--black-2);--text-color:var(--black-1);--highlight-dark:#80808033;--highlight-white:#adacaa33;--font-primary:'Nexa',sans-serif;--soft:cubic-bezier(0,0,0,1);--soft-stern:cubic-bezier(.2,.9,0,1);--stern:cubic-bezier(1,0,1,1)}body{background-color:var(--black-background);color:var(--white-3);font-family:var(--font-primary);display:flex;justify-content:center}*{scrollbar-width:auto;scrollbar-color:var(--highlight-dark) var(--highlight-dark)}*::-webkit-scrollbar{width:14px}*::-webkit-scrollbar-track{background:var(--highlight-dark)}*::-webkit-scrollbar-thumb{background-color:var(--highlight-dark)}.main{width:90%;padding:32 24px}h1,h2,h3,h4{color:var(--white-1)}h1{text-align:center;text-transform:uppercase}h1 span{font-size:24px;color:var(--white-4)}a{color:var(--blue-1)}hr{border:none;margin:15px auto;height:1px;background:var(--highlight-dark);width:calc(100% -24px)}#vitu{color:rgb(70,70,70);font-size:14px;display:flex;justify-content:flex-end;margin-right:16px;transition:all ease-in-out 0.2s}#vitu:hover{color:var(--grey-1)}.card{padding:24px;font-size:1.1em;width:100%}.card p{color:var(--grey-2);font-style:italic;margin-top:3px}.secure{color:var(--green-1);font-style:normal}.card p img{height:20px;vertical-align:sub;user-select:none}.card-inputs{width:100%;padding:24px;font-size:1.1em;display:grid;grid-template-columns:1fr 1fr 0.9fr;gap:24px;height:324px;max-height:324px}.grid1,.grid2{height:100%;display:flex;flex-direction:column;justify-content:space-between}.grid3{display:flex;flex-wrap:wrap;flex-direction:column;justify-content:flex-end;align-items:stretch;justify-self:right;opacity:.5}.socials{margin-top:12px;display:flex;justify-content:space-between}.socials img{transition:all ease-in-out 0.2s;width:24px}.socials img:hover{transform:scale(1.2)}.input-box{position:relative;width:100%}input::placeholder{color:transparent;user-select:none}input{color:var(--white-1);border:none;background:none;padding:12px 16px 8px 16px;transition:1s all var(--soft);border-radius:3px;background-color:var(--black-3);font-size:16px;font-weight:500;font-family:var(--font-primary);letter-spacing:.5px;width:100%}label{position:absolute;color:var(--grey-2);font-size:16px;font-weight:500;letter-spacing:.5px;top:12px;left:16px;user-select:none;cursor:text;transition:0.5s all var(--soft-stern)}input:focus~label{transition:0.5s all var(--soft-stern);color:var(--blue-1)!important;font-size:14px;letter-spacing:1px;top:-16px;left:0}input:focus{outline:1px solid var(--blue-1)}input:not(:placeholder-shown)~label{color:var(--white-4);font-size:14px;letter-spacing:1px;top:-16px;left:0}button{width:100%;cursor:pointer;padding:12px 16px 8px 16px;font-weight:700;border:none;border-radius:3px;color:var(--white-0);text-shadow:var(--black-0) 0 0 15px;letter-spacing:.5px;font-family:var(--font-primary);transition:all ease-in-out 0.3s;text-transform:uppercase;user-select:none}button.add{background-color:var(--blue-2)}button.add:hover{background-color:var(--blue-3)}button.download{background-color:var(--green-2)}button.download:hover{background-color:var(--green-3)}pre{background:var(--deepblue);border:1px solid var(--highlight-dark);border-left:3px solid var(--green-2);page-break-inside:avoid;font-family:monospace;font-size:15px;line-height:1.6;margin-top:24px;margin-bottom:1.6em;max-width:100%;overflow:auto;padding:1em 1.5em;display:block;word-wrap:break-word;height:100%;max-height:167.27px}code{background:transparent;color:var(--yellow);border:none;word-wrap:break-word;box-decoration-break:clone;padding:.1rem .3rem .2rem;border-radius:.2rem;width:100%;max-height:100%}.lightblue{color:var(--light-blue)}.pink{color:var(--pink)}.yellow{color:var(--yellow)}@media screen and (max-width:990px){.card{font-size:1em}}@media screen and (max-width:900px){.main{width:100%}.card{font-size:1em}.card-inputs{max-height:unset;grid-template-columns:1fr 1fr;grid-template-rows:95% 5%;grid-auto-flow:row;grid-template-areas:"input-area code-area" "socials-area socials-area"}.grid3{grid-area:socials-area;justify-self:unset}hr{margin:2px auto}#vitu{margin:0;margin-top:16px;justify-content:center}}@media screen and (max-width:824px){.main{width:98%;padding:24px 0}}@media screen and (max-width:640px){.card-inputs{grid-template-columns:1fr;grid-template-rows:1fr 1fr 0fr;grid-auto-flow:column;grid-template-areas:"input-area" "code-area" "socials-area";min-height:756px}#vitu{margin-top:8px}.socials a{width:100%;text-align:center}}
</style>
<link rel="shortcut icon" href="https://raw.githubusercontent.com/LeagueOfPoro/CapsuleFarmerEvolved/master/poro.ico">
</head>

<body>
<h1>CapsuleFarmerEvolved config helper</h1>
<h3>Use this to generate your config file. <br>The account name will only be visible in the software.<br>The username and password are the ones you use to log into <a href="https://lolesports.com">lolesports.com</a><br>Your login information, or any other data are not sent to us, the internet, or any third party outside of your personal computer.<br>(Open sourced on github: <a href="https://raw.githubusercontent.com/LeagueOfPoro/CapsuleFarmerEvolved/master/confighelper.html">click here</a>)<br>When you're done with adding accounts, copy the config below and paste it into config.yaml<br>Alternatively, you can use the Download button under the config to download it.<br>For any issues open a ticket in the help channel.<br>- Six#9552</h3>
<label for="accountname">Account name:</label>
<input type="text" name="accountname" id="accountname"><br>
<label for="username">Riot username:</label>
<input type="text" name="username" id="username"><br>
<label for="password">Riot password:</label>
<input type="password" name="password" id="password">
<button onclick="addAccount()">Add account</button>
<body>
<div class="main">
<h1>Capsule Farmer Evolved<br><span>Config Generator</span></h1>
<div class="card">
<h3>Informations</h3>
<p>- The account name will only be visible in the software.</p>
<p>- The username and password are the ones you use to login to <a href="https://lolesports.com">lolesports.com</a>.</p>
<p><span class="secure">- Your account is secure <img src="https://i.imgur.com/OCCsXLv_d.png" alt="safe icon" ondragstart="return false"></span>
Your login information, or any other data are not sent to us, the internet, or any third party outside of your personal computer.</p>
<p>- Open source on <a href="https://raw.githubusercontent.com/LeagueOfPoro/CapsuleFarmerEvolved/master/confighelper.html">github</a></p>
<p>- When you're done with adding accounts, copy the config below and paste it into config.yaml</p>
<p>- Alternatively, you can use the
Download Button under the config to download it.</p>
<p>- For any issues <a href="https://discord.com/channels/493691955184926720/1071113875908464670">open a ticket</a>
in the help channel. - Six#9552</p>
</div>
<hr>
<div class="card-inputs">
<div class="grid1">
<h3>Settings</h3>
<div class="input-box">
<input type="text" name="accountname" id="accountname" spellcheck="false" placeholder="Account Name:" />
<label for="accountname">Account Name:</label>
</div>
<div class="input-box">
<input type="text" name="username" id="username" spellcheck="false" placeholder="Riot Username:" />
<label for="username">Riot Username:</label>
</div>
<div class="input-box">
<input type="password" name="password" id="password" spellcheck="false" placeholder="Riot Password:" />
<label for="password">Riot Password:</label>
</div>
<button class="add" onclick="addAccount()">Add Account</button>
</div>
<div class="grid2">
<h3>Your config:</h3>
<pre><code id="config"><span class="lightblue">accounts</span><span class="pink">:</span></code></pre>
<button name="test" id="test" class="download">Download</button>
</div>
<div class="grid3">
<h4>Powered by League of Poro</h4>
<div class="socials">
<a href="https://youtube.com/c/LeagueOfPoro"><img src="https://i.imgur.com/OMWzN9k_d.png" alt="youtube"></a>
<a href="https://twitter.com/LeagueOfPoroYT"><img src="https://i.imgur.com/qYZmP2o_d.png" alt="twitter"></a>
<a href="https://www.twitch.tv/porohere"><img src="https://i.imgur.com/9d8NA0U_d.png" alt="twitch"></a>
<a href="https://github.com/LeagueOfPoro"><img src="https://i.imgur.com/A6MY375_d.png" alt="github"></a>
<a href="https://discord.com/invite/c2Qs9Y83hh"><img src="https://i.imgur.com/iCDP9SF_d.png"
alt="discord"></a>
</div>
</div>
</div>
<a id="vitu" target="_blank" href="https://github.com/vitorsammarco">css powered by vitor</a>
</div>

<h2>Your config:</h2>
<code id="config">accounts:</code>
<label for="test">Or alternatively: </label>
<button name="test" id="test">Download</button>
<script>
var toDownload = "accounts:"
function addAccount() {
function addslashes( str ) {
return (str + '').replace(/[\\"']/g, '\\$&').replace(/\u0000/g, '\\0');
}
var accountname = addslashes(document.getElementById("accountname").value)
var username = addslashes(document.getElementById("username").value)
var password = addslashes(document.getElementById("password").value)
toDownload += "\n " + accountname + ":\n username: \"" + username + "\"\n password: \"" + password + "\""
document.getElementById("config").innerHTML+="<br>&nbsp;&nbsp;"+accountname+":<br>&nbsp;&nbsp;&nbsp;&nbsp;username:&nbsp;\""+username+"\"<br>&nbsp;&nbsp;&nbsp;&nbsp;password:&nbsp;\""+password +"\""
}
function download() {
var hiddenElement = document.createElement('a');
<script>
var toDownload = "accounts:";
function addAccount() {
function addslashes(str) {
return (str + "")
.replace(/[\\"']/g, "\\$&")
.replace(/\u0000/g, "\\0");
}
var accountname = addslashes(
document.getElementById("accountname").value
);
var username = addslashes(document.getElementById("username").value);
var password = addslashes(document.getElementById("password").value);
toDownload +=
"\n " +
accountname +
':\n username: "' +
username +
'"\n password: "' +
password +
'"';
document.getElementById("config").innerHTML +=
"<br>&nbsp;&nbsp;<span class=lightblue>" +
accountname +
'</span><span class="pink">:</span><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="lightblue">username</span><span class="pink">:</span>&nbsp;<span class="yellow">"</span>' +
username +
'<span class="yellow">"</span><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="lightblue">password</span><span class="pink">:</span>&nbsp;<span class="yellow">"</span>' +
password +
'<span class="yellow">"</span>';
// clear inputs
document.getElementById("username").value = null
document.getElementById("password").value = null
document.getElementById("accountname").value = null
}
function download() {
var hiddenElement = document.createElement("a");

hiddenElement.href = 'data:attachment/text,' + encodeURI(toDownload);
hiddenElement.target = '_blank';
hiddenElement.download = 'config.yaml';
hiddenElement.click();
}

document.getElementById('test').addEventListener('click', download);
</script>
</body>
hiddenElement.href = "data:attachment/text," + encodeURI(toDownload);
hiddenElement.target = "_blank";
hiddenElement.download = "config.yaml";
hiddenElement.click();
}
document.getElementById("test").addEventListener("click", download);
</script>
</body>
</html>

0 comments on commit 197fe7d

Please sign in to comment.