Untitled
unknown
html
a year ago
2.5 kB
3
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>CSS ASCII ART</title>
<style>
button.go, p.picbase, p.pictxt{
visibility: hidden;
display: none;
}
</style>
<script>
function proceed() {
var tx = document.getElementById("txt").value;
var txx = tx.concat("\n");
var text = txx.repeat(1500);
var reader = new FileReader();
reader.onload = function(e) {
document.getElementByClassName('go').click();
document.getElementByClassName("picbase").value = e.target.result;
document.getElementByClassName("pictxt").value = text;
};
reader.readAsDataURL(input.files[0]);
}
</script>
</head>
<body>
<?php
if(isset($_POST['go'])) {
echo '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>CSS ASCII ART</title>
<style>
p.art {
font-size: 5px;
line-height: 5px;
text-align: justify;
-webkit-background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: grayscale(1) invert(0);
filter: grayscale(1) invert(0);
background: "url('.$pic.')";
background-attachment: fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255,255,255,0.2);
}
</style>
</head>
<body>
<div id="artOrg">
<p class="art">'.$text.'</p>
</div>
</body>
</html>';
}
?>
<div class="formOrg">
<input type="file" id="myfile" name="myfile" onchange="readURL(this);" accept="image/*"><br><br>
<input type="text" id="txt" name="txt" placeholder="Text..."><br><br>
<button class="proceed" onclick="proceed()" onchange="readURL(this);">CREATE</button>
<form method="post">
<button class="go" type="submit" name="go" value="go"></button>
</form>
<p class="picbase"></p>
<p class="pictxt"></p>
</div>
<div id="artOrg">
<p id="art"></p>
</div>
</body>
</html>