Javascript, HTML, CSS Code
Copy
<html >
<head >
<script type ="text/javascript" > window .addEventListener ('error' , function (event ) { var message = JSON .parse (JSON .stringify (event.message )); var source = event.filename ; var lineno = event.lineno ; var colno = event.colno ; var error = event.error ; window .parent .postMessage ({ type : 'iframeError' , details : { message : message, source : source, lineno : lineno, colno : colno, error : error ? error.stack : '' } }, '*' ); }); window .addEventListener ('unhandledrejection' , function (event ) { window .parent .postMessage ({ type : 'iframePromiseRejection' , details : { reason : event.reason } }, '*' ); }); </script >
<meta charset ="utf-8" >
<meta http-equiv ="X-UA-Compatible" content ="IE=edge" >
<meta name ="viewport" content ="width=device-width,initial-scale=1" >
<title > Brawl Stars Brawler Maker</title >
<meta name ="description" content ="Create your own Brawl Stars brawler and generate a description." >
<meta name ="keywords" content ="Brawl Stars, brawler, description" >
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" > </script >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel ="stylesheet"
integrity ="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin ="anonymous" >
<link href ="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel ="stylesheet" >
<script type ="text/javascript" >
var localStoragePrefix = "ct-169133351063626" ;
var lastSave = 0 ;
function saveLocal (data ) {
if (Date .now () - lastSave < 1000 ) {
return ;
}
let cookie = localStoragePrefix + "=" + JSON .stringify (data) + "; path=" + window .location .pathname + "'; SameSite=Strict" ;
cookie += "; expires=" + new Date (Date .now () + 1000 * 60 * 60 * 24 * 365 * 1000 ).toUTCString ();
document .cookie = cookie;
lastSave = Date .now ();
}
function loadLocal ( ) {
var cookiePrefix = localStoragePrefix + "=" ;
var cookieStart = document .cookie .indexOf (cookiePrefix);
if (cookieStart > -1 ) {
let cookieEnd = document .cookie .indexOf (";" , cookieStart);
if (cookieEnd == -1 ) {
cookieEnd = document .cookie .length ;
}
var cookieData = document .cookie .substring (cookieStart + cookiePrefix.length , cookieEnd);
return JSON .parse (cookieData);
}
}
function generateDescription ( ) {
var brawlerName = $("#brawler-name" ).val ();
var brawlerDescription = "" ;
if (brawlerName) {
var adjectives = ["Fearless" , "Mighty" , "Swift" , "Nimble" , "Cunning" , "Ruthless" , "Fierce" , "Savage" , "Powerful" , "Brave" ];
var abilities = ["throws bombs" , "shoots lasers" , "freezes enemies" , "summons minions" , "creates barriers" , "deals area damage" , "heals allies" , "steals power-ups" , "teleports" , "turns invisible" ];
var roles = ["Tank" , "Fighter" , "Assassin" , "Sharpshooter" , "Heavyweight" , "Support" , "Thrower" , "Skirmisher" , "Control" , "Builder" ];
var randomAdjective = adjectives[Math .floor (Math .random () * adjectives.length )];
var randomAbility = abilities[Math .floor (Math .random () * abilities.length )];
var randomRole = roles[Math .floor (Math .random () * roles.length )];
brawlerDescription = brawlerName + " is a " + randomAdjective + " brawler that " + randomAbility + ". They excel in the role of a " + randomRole + "." ;
} else {
brawlerDescription = "Please enter a brawler name." ;
}
$("#brawler-description" ).text (brawlerDescription);
}
</script >
<style >
body {
background-color : #f2f2f2 ;
font-family : 'Roboto' , sans-serif;
}
.container {
max-width : 600px ;
margin : 0 auto;
padding : 40px ;
background-color : #fff ;
border-radius : 8px ;
box-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.1 );
}
h1 {
text-align : center;
font-size : 28px ;
font-weight : bold;
margin-bottom : 20px ;
color : #333 ;
}
.form-group {
margin-bottom : 20px ;
}
.form-group label {
font-weight : bold;
color : #666 ;
}
.form-control {
width : 100% ;
padding : 10px ;
font-size : 16px ;
border-radius : 4px ;
border : 1px solid #ccc ;
outline : none;
}
.btn-generate {
display : block;
width : 100% ;
padding : 10px ;
font-size : 16px ;
font-weight : bold;
text-align : center;
color : #fff ;
background-color : #ff6f00 ;
border : none;
border-radius : 4px ;
cursor : pointer;
transition : background-color 0.3s ease;
}
.btn-generate :hover {
background-color : #ff9500 ;
}
.brawler-description {
margin-top : 20px ;
padding : 10px ;
background-color : #f5f5f5 ;
border-radius : 4px ;
}
</style >
<link rel ="canonical" href ="https://calculator.tools/prompt/3331/" >
<meta charset ="utf-8" >
</head >
<body >
<div id ="main-container" class ="container" >
<h1 > Brawl Stars Brawler Maker</h1 >
<div class ="form-group" >
<label for ="brawler-name" > Brawler Name:</label >
<input type ="text" id ="brawler-name" class ="form-control" >
</div >
<button class ="btn-generate" onclick ="generateDescription()" > Generate Description</button >
<div id ="brawler-description" class ="brawler-description" > </div >
</div >
<script type ="text/javascript" > var localStoragePrefix = "ct-{{ cachebreaker }}" ; var lastSave = 0 ; function saveLocal (data ) { if (Date .now () - lastSave < 1000 ) { return ; } let cookie = localStoragePrefix + "=" + JSON .stringify (data) + "; path=" + window .location .pathname + "'; SameSite=Strict" ; cookie += "; expires=" + new Date (Date .now () + 1000 * 60 * 60 * 24 * 365 * 1000 ).toUTCString (); document .cookie = cookie; lastSave = Date .now (); } function loadLocal ( ) { var cookiePrefix = localStoragePrefix + "=" ; var cookieStart = document .cookie .indexOf (cookiePrefix); if (cookieStart > -1 ) { let cookieEnd = document .cookie .indexOf (";" , cookieStart); if (cookieEnd == -1 ) { cookieEnd = document .cookie .length ; } var cookieData = document .cookie .substring (cookieStart + cookiePrefix.length , cookieEnd); return JSON .parse (cookieData); } } </script >
<script type ="text/javascript" > window .addEventListener ('load' , function ( ) { var observer = new MutationObserver (function ( ) { window .parent .postMessage ({height : document .documentElement .scrollHeight || document .body .scrollHeight },"*" ); }); observer.observe (document .body , {attributes : true , childList : true , subtree : true }); window .parent .postMessage ({height : document .documentElement .scrollHeight || document .body .scrollHeight },"*" ); }); </script >
</body >
</html >