Pantera cor-de-pele the Error Message Simulator
About this app
Simulate error messages with fun and colorful skins
Pantera cor-de-pele the Error Message Simulator Pantera cor-de-pele the Error Message Simulator Generate Error Message
Related apps
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pantera cor-de-pele the Error Message Simulator</title>
<meta name="description" content="Simulate error messages with fun and colorful skins">
<meta name="keywords" content="error message, simulator, fun, colorful, skins">
<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">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
function generateError() {
// Get random error message
var errorMessages = [
"Oops! Something went wrong.",
"Error: 404 - Page not found.",
"Fatal error: Out of memory.",
"Invalid input. Please try again.",
"An unexpected error occurred.",
"Access denied. Unauthorized user.",
"Network error. Please check your internet connection.",
"Error: Division by zero.",
"Error: File not found.",
"Undefined variable encountered."
];
var randomErrorMessage = errorMessages[Math.floor(Math.random() * errorMessages.length)];
// Get random skin color class
var skinColors = [
"skin-blue",
"skin-green",
"skin-yellow",
"skin-purple",
"skin-red"
];
var randomSkinColor = skinColors[Math.floor(Math.random() * skinColors.length)];
// Generate error message with random skin color
var errorMessage = '<div class="error-box ' + randomSkinColor + '">' +
'<i class="fa fa-exclamation-triangle"></i>' +
'<p>' + randomErrorMessage + '</p>' +
'</div>';
// Append error message to the main container
$("#main-container").append(errorMessage);
}
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
// Generate initial error message
generateError();
// Generate new error message on button click
$("#generate-error-btn").click(function () {
generateError();
});
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
font-family: 'Roboto', sans-serif;
background-color: #f9f9f9;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.error-box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
.error-box i {
font-size: 48px;
margin-bottom: 10px;
}
.error-box p {
font-size: 18px;
text-align: center;
margin: 0;
}
.skin-blue {
background-color: #2196f3;
color: #fff;
}
.skin-green {
background-color: #4caf50;
color: #fff;
}
.skin-yellow {
background-color: #ffeb3b;
color: #000;
}
.skin-purple {
background-color: #9c27b0;
color: #fff;
}
.skin-red {
background-color: #f44336;
color: #fff;
}
#generate-error-btn {
display: inline-block;
padding: 10px 20px;
background-color: #2196f3;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
#generate-error-btn:hover {
background-color: #0a84e7;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
<h1>Pantera cor-de-pele the Error Message Simulator</h1>
<button id="generate-error-btn">Generate Error Message</button>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!