GWBETOUP4H
AL_1

<html>

   <head>

      <style class="cp-pen-styles">@import url(http://fonts.googleapis.com/css?family=Roboto);

         body,

         input,

         select,

         textarea,

         body * {

         font-family: 'Roboto', sans-serif;

         box-sizing: border-box;

         }

         body::after, body::before,

         input::after,

         input::before,

         select::after,

         select::before,

         textarea::after,

         textarea::before,

         body *::after,

         body *::before {

         box-sizing: border-box;

         }

         body {

         background-image: -webkit-linear-gradient(top, #f2f2f2, #e6e6e6);

         background-image: linear-gradient(top, #f2f2f2, #e6e6e6);

         }

         h1 {

         font-size: 2rem;

         text-align: center;

         margin: 0 0 2em;

         }

         .container {

         position: relative;

         max-width: 40rem;

         margin: 5rem auto;

         background: #fff;

         width: 100%;

         padding: 3rem 5rem 0;

         border-radius: 1px;

         }

         .container::before {

         content: '';

         position: absolute;

         top: 0;

         left: 0;

         right: 0;

         bottom: 0;

         box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);

         -webkit-transform: scale(0.98);

         transform: scale(0.98);

         -webkit-transition: -webkit-transform 0.28s ease-in-out;

         transition: -webkit-transform 0.28s ease-in-out;

         transition: transform 0.28s ease-in-out;

         transition: transform 0.28s ease-in-out, -webkit-transform 0.28s ease-in-out;

         z-index: -1;

         }

         .container:hover::before {

         -webkit-transform: scale(1);

         transform: scale(1);

         }

         .button-container {

         text-align: center;

         }

         fieldset {

         margin: 0 0 3rem;

         padding: 0;

         border: none;

         }

         .form-radio,

         .form-group {

         position: relative;

         margin-top: 2.25rem;

         margin-bottom: 2.25rem;

         }

         .form-inline > .form-group,

         .form-inline > .btn {

         display: inline-block;

         margin-bottom: 0;

         }

         .form-help {

         margin-top: 0.125rem;

         margin-left: 0.125rem;

         color: #b3b3b3;

         font-size: 0.8rem;

         }

         .checkbox .form-help, .form-radio .form-help, .form-group .form-help {

         position: absolute;

         width: 100%;

         }

         .checkbox .form-help {

         position: relative;

         margin-bottom: 1rem;

         }

         .form-radio .form-help {

         padding-top: 0.25rem;

         margin-top: -1rem;

         }

         .form-group input {

         height: 1.9rem;

         }

         .form-group textarea {

         resize: none;

         }

         .form-group select {

         width: 100%;

         font-size: 1rem;

         height: 1.6rem;

         padding: 0.125rem 0.125rem 0.0625rem;

         background: none;

         border: none;

         line-height: 1.6;

         box-shadow: none;

         }

         .form-group .control-label {

         position: absolute;

         top: 0.25rem;

         pointer-events: none;

         padding-left: 0.125rem;

         z-index: 1;

         color: #b3b3b3;

         font-size: 1rem;

         font-weight: normal;

         -webkit-transition: all 0.28s ease;

         transition: all 0.28s ease;

         }

         .form-group .bar {

         position: relative;

         border-bottom: 0.0625rem solid #999;

         display: block;

         }

         .form-group .bar::before {

         content: '';

         height: 0.125rem;

         width: 0;

         left: 50%;

         bottom: -0.0625rem;

         position: absolute;

         background: #337ab7;

         -webkit-transition: left 0.28s ease, width 0.28s ease;

         transition: left 0.28s ease, width 0.28s ease;

         z-index: 2;

         }

         .form-group input,

         .form-group textarea {

         display: block;

         background: none;

         padding: 0.125rem 0.125rem 0.0625rem;

         font-size: 1rem;

         border-width: 0;

         border-color: transparent;

         line-height: 1.9;

         width: 100%;

         color: transparent;

         -webkit-transition: all 0.28s ease;

         transition: all 0.28s ease;

         box-shadow: none;

         }

         .form-group input[type="file"] {

         line-height: 1;

         }

         .form-group input[type="file"] ~ .bar {

         display: none;

         }

         .form-group select,

         .form-group input:focus,

         .form-group input:valid,

         .form-group input.form-file,

         .form-group input.has-value,

         .form-group textarea:focus,

         .form-group textarea:valid,

         .form-group textarea.form-file,

         .form-group textarea.has-value {

         color: #333;

         }

         .form-group select ~ .control-label,

         .form-group input:focus ~ .control-label,

         .form-group input:valid ~ .control-label,

         .form-group input.form-file ~ .control-label,

         .form-group input.has-value ~ .control-label,

         .form-group textarea:focus ~ .control-label,

         .form-group textarea:valid ~ .control-label,

         .form-group textarea.form-file ~ .control-label,

         .form-group textarea.has-value ~ .control-label {

         font-size: 0.8rem;

         color: gray;

         top: -1rem;

         left: 0;

         }

         .form-group select:focus,

         .form-group input:focus,

         .form-group textarea:focus {

         outline: none;

         }

         .form-group select:focus ~ .control-label,

         .form-group input:focus ~ .control-label,

         .form-group textarea:focus ~ .control-label {

         color: #337ab7;

         }

         .form-group select:focus ~ .bar::before,

         .form-group input:focus ~ .bar::before,

         .form-group textarea:focus ~ .bar::before {

         width: 100%;

         left: 0;

         }

         .checkbox label,

         .form-radio label {

         position: relative;

         cursor: pointer;

         padding-left: 2rem;

         text-align: left;

         color: #333;

         display: block;

         }

         .checkbox input,

         .form-radio input {

         width: auto;

         opacity: 0.00000001;

         position: absolute;

         left: 0;

         }

         .radio {

         margin-bottom: 1rem;

         }

         .radio .helper {

         position: absolute;

         top: -0.25rem;

         left: -0.25rem;

         cursor: pointer;

         display: block;

         font-size: 1rem;

         -webkit-user-select: none;

         -moz-user-select: none;

         -ms-user-select: none;

         user-select: none;

         color: #999;

         }

         .radio .helper::before, .radio .helper::after {

         content: '';

         position: absolute;

         left: 0;

         top: 0;

         margin: 0.25rem;

         width: 1rem;

         height: 1rem;

         -webkit-transition: -webkit-transform 0.28s ease;

         transition: -webkit-transform 0.28s ease;

         transition: transform 0.28s ease;

         transition: transform 0.28s ease, -webkit-transform 0.28s ease;

         border-radius: 50%;

         border: 0.125rem solid currentColor;

         }

         .radio .helper::after {

         -webkit-transform: scale(0);

         transform: scale(0);

         background-color: #337ab7;

         border-color: #337ab7;

         }

         .radio label:hover .helper {

         color: #337ab7;

         }

         .radio input:checked ~ .helper::after {

         -webkit-transform: scale(0.5);

         transform: scale(0.5);

         }

         .radio input:checked ~ .helper::before {

         color: #337ab7;

         }

         .checkbox {

         margin-top: 3rem;

         margin-bottom: 1rem;

         }

         .checkbox .helper {

         color: #999;

         position: absolute;

         top: 0;

         left: 0;

         width: 1rem;

         height: 1rem;

         z-index: 0;

         border: 0.125rem solid currentColor;

         border-radius: 0.0625rem;

         -webkit-transition: border-color 0.28s ease;

         transition: border-color 0.28s ease;

         }

         .checkbox .helper::before, .checkbox .helper::after {

         position: absolute;

         height: 0;

         width: 0.2rem;

         background-color: #337ab7;

         display: block;

         -webkit-transform-origin: left top;

         transform-origin: left top;

         border-radius: 0.25rem;

         content: '';

         -webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;

         transition: opacity 0.28s ease, height 0s linear 0.28s;

         opacity: 0;

         }

         .checkbox .helper::before {

         top: 0.65rem;

         left: 0.38rem;

         -webkit-transform: rotate(-135deg);

         transform: rotate(-135deg);

         box-shadow: 0 0 0 0.0625rem #fff;

         }

         .checkbox .helper::after {

         top: 0.3rem;

         left: 0;

         -webkit-transform: rotate(-45deg);

         transform: rotate(-45deg);

         }

         .checkbox label:hover .helper {

         color: #337ab7;

         }

         .checkbox input:checked ~ .helper {

         color: #337ab7;

         }

         .checkbox input:checked ~ .helper::after, .checkbox input:checked ~ .helper::before {

         opacity: 1;

         -webkit-transition: height 0.28s ease;

         transition: height 0.28s ease;

         }

         .checkbox input:checked ~ .helper::after {

         height: 0.5rem;

         }

         .checkbox input:checked ~ .helper::before {

         height: 1.2rem;

         -webkit-transition-delay: 0.28s;

         transition-delay: 0.28s;

         }

         .radio + .radio,

         .checkbox + .checkbox {

         margin-top: 1rem;

         }

         .has-error .legend.legend, .has-error.form-group .control-label.control-label {

         color: #d9534f;

         }

         .has-error.form-group .form-help,

         .has-error.form-group .helper, .has-error.checkbox .form-help,

         .has-error.checkbox .helper, .has-error.radio .form-help,

         .has-error.radio .helper, .has-error.form-radio .form-help,

         .has-error.form-radio .helper {

         color: #d9534f;

         }

         .has-error .bar::before {

         background: #d9534f;

         left: 0;

         width: 100%;

         }

         .button {

         position: relative;

         background: currentColor;

         border: 1px solid currentColor;

         font-size: 1.1rem;

         color: #4f93ce;

         margin: 3rem 0;

         padding: 0.75rem 3rem;

         cursor: pointer;

         -webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;

         transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;

         overflow: hidden;

         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

         }

         .button span {

         color: #fff;

         position: relative;

         z-index: 1;

         }

         .button::before {

         content: '';

         position: absolute;

         background: #071017;

         border: 50vh solid #1d4567;

         width: 30vh;

         height: 30vh;

         border-radius: 50%;

         display: block;

         top: 50%;

         left: 50%;

         z-index: 0;

         opacity: 1;

         -webkit-transform: translate(-50%, -50%) scale(0);

         transform: translate(-50%, -50%) scale(0);

         }

         .button:hover {

         color: #337ab7;

         box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);

         }

         .button:active::before, .button:focus::before {

         -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;

         transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;

         transition: transform 1.12s ease, opacity 0.28s ease 0.364s;

         transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;

         -webkit-transform: translate(-50%, -50%) scale(1);

         transform: translate(-50%, -50%) scale(1);

         opacity: 0;

         }

         .button:focus {

         outline: none;

         }

      </style>

   </head>

   <body>

      <div class="container">

         <h1>Banner Generator</h1>

         <form>

            <div class="form-group">

               <input type="color" id="backgroundColor" required="required" id="backgroundColor" value="#009933"></input>

               <label for="input" class="control-label">Background Color</label><i class="bar"></i>

            </div>

            <div class="form-group">

               <input type="color" id="textColor" required="required" value="#ffffff" id="titleColor" value=""></input>

               <label for="input" class="control-label">Text Color</label><i class="bar"></i>

            </div>

            <div class="form-group">

               <input type="color" id="backgroundTextColor" value="#282828" required="required" rows="4"></input>

               <label for="input" class="control-label">Background Text Color</label><i class="bar"></i>

            </div>

            <div class="form-group">

               <input type="text" required="required" type="text" value="Steve" id="titleText" value="" />

               <label for="input" class="control-label">Title</label><i class="bar"></i>

            </div>

            <div class="form-group">

               <textarea id="subtitleText" required="required" rows="4"></textarea>

               <label for="textarea" class="control-label">Subtitles (One per line)</label><i class="bar"></i>

            </div>

         </form>

         <div class="button-container">

            <button type="button" onClick="generate()" class="button"><span>Submit</span></button>

         </div>

         <div class="form-group">

            <input id="product" required="required" value="https://tinyrd.ml/hosting/voltiac/services/JavaPlugin/banner.php?name=Steve&bk_r=0&bk_g=153&bk_b=51&mn_r=255&mn_g=255&mn_b=255&sh_r=40&sh_g=40&sh_b=40&text="></input>

            <label for="input" class="control-label">Output</label><i class="bar"></i>

         </div>

		 <label for="input" class="control-label">Preview</label>

         <img id="preview" src="https://tinyrd.ml/hosting/voltiac/services/JavaPlugin/banner.php?name=Steve&bk_r=0&bk_g=153&bk_b=51&mn_r=255&mn_g=255&mn_b=255&sh_r=40&sh_g=40&sh_b=40&text="></img><br/><br/>

      </div>

      <script>function generate() {

         var preURL = 'https://tinyrd.ml/hosting/voltiac/services/JavaPlugin/banner.php?';

         var sufURL = '';

         var finalOutput = '';

         var title = document.getElementById('titleText').value;

         var subtitle = document.getElementById('subtitleText').value;

         if (subtitle.includes('||')) {

             alert('The string "||" is not allowed!');

             return;

         }

         var bk_color = document.getElementById('backgroundColor').value;

         var bk_txt_color = document.getElementById('backgroundTextColor').value;

         var mn_color = document.getElementById('textColor').value;

         var bk_colors = hexToRgbA(bk_color).split(',');

         var bk_txt_colors = hexToRgbA(bk_txt_color).split(',');

         var mn_colors = hexToRgbA(mn_color).split(',');

         finalOutput = preURL;

         finalOutput = finalOutput + 'name=' + title;

         finalOutput = finalOutput + '&bk_r=' + bk_colors[0];

         finalOutput = finalOutput + '&bk_g=' + bk_colors[1];

         finalOutput = finalOutput + '&bk_b=' + bk_colors[2];

         finalOutput = finalOutput + '&mn_r=' + mn_colors[0];

         finalOutput = finalOutput + '&mn_g=' + mn_colors[1];

         finalOutput = finalOutput + '&mn_b=' + mn_colors[2];

         finalOutput = finalOutput + '&sh_r=' + bk_txt_colors[0];

         finalOutput = finalOutput + '&sh_g=' + bk_txt_colors[1];

         finalOutput = finalOutput + '&sh_b=' + bk_txt_colors[2];

         subtitle = replaceAll(subtitle, '\n', '||');

         if (subtitle.substring(subtitle.length - 2, subtitle.length) == '||') {

             subtitle = subtitle.substring(0, subtitle.length - 2);

         }

         finalOutput = finalOutput + '&text=' + replaceAll(subtitle, ' ', '%20');

         document.getElementById('product').value = finalOutput;

         document.getElementById('preview').src = finalOutput;

         }

         function replaceAll(str, find, replace) {

         return str.replace(new RegExp(find, 'g'), replace);

         }

         function hexToRgbA(hex) {

         var c;

         if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {

             c = hex.substring(1).split('');

             if (c.length == 3) {

                 c = [

                     c[0],

                     c[0],

                     c[1],

                     c[1],

                     c[2],

                     c[2]

                 ];

             }

             c = '0x' + c.join('');

             return '' + [

                 c >> 16 & 255,

                 c >> 8 & 255,

                 c & 255

             ].join(',') + '';

         }

         throw new Error('Bad Hex');

         }

         //# sourceURL=pen.js

      </script>

   </body>

</html>