Skip to content

Instantly share code, notes, and snippets.

@Osmiogrzesznik

Osmiogrzesznik/index.html

Last active December 16, 2022 14:29
Show Gist options
  • Save Osmiogrzesznik/0ab6634713577ee762967e8454c950ac to your computer and use it in GitHub Desktop.
Save Osmiogrzesznik/0ab6634713577ee762967e8454c950ac to your computer and use it in GitHub Desktop.
Download ZIP
ai manga fake prank
Raw
index.html
<html>
<!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>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Contrail+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Contrail+One&family=Noto+Sans:wght@700&display=swap"
rel="stylesheet">
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Contrail+One&family=Noto+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Contrail+One&display=swap');
</style>
<style>
* {
/*border:1px solid white;*/
}
.ctrlpanel {
position: absolute;
top:0px;
}
body {
background: transparent;
background:black;
background: url('Zz2.jpg');
background-size: cover;
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
background-repeat: no-repeat;
}
details {
border: 1px solid black;
padding: 20px;
}
.uu {
opacity: 1;
/* background: #00000088; */
background-position: center;
position: absolute;
margin:50% auto 50% auto;
padding: 0px;
width: 110px;
height: 110px;
border-radius: 100%;
}
.graycircle {
opacity: 1;
background-position: center;
position: absolute;
margin:50% auto 50% auto;
text-align:center;
padding: 40px;
border-radius: 100%;
border: 12.5px solid #ffffff6f;
z-index: 2;
}
.uu2 {
font-family: Helvetica;
background: #ff000088;
position: absolute;
top: 2%;
left: 47%;
padding: 0px;
width: 12px;
height: 12px;
border-radius: 100%;
box-shadow: 0px -14px 10px 0px cyan
}
.rtrrall {
border-radius: 100%;
border: inset 12px solid gray;
width: 100%;
height: 100%;
transform-origin: centre;
transform: rotateZ(0deg);
}
.rtrr {
position: absolute;
width: 100%;
height: 100%;
transform-origin: centre;
transform: rotateZ(5deg);
}
.rtrr4 {
position: absolute;
width: 100%;
height: 100%;
transform-origin: centre;
transform: rotateZ(10deg);
}
.perc {
font-family: Contrail One;
/* text-align: center; */
/* text-align: justify; */
opacity: 1;
position: absolute;
top: 84px;
margin:50% auto 50% auto;
padding: 0;
border-radius: 100%;
color: white;
font-weight: bold;
font-size: 22px;
z-index: 1;
transform-origin: centre;
transform: scaleY(0.85) scaleX(1.5);
}
.container {
position: relative;
top:-12px;
margin:50% auto 50% auto;
transform-origin: center;
transform: scale(0.7);
width: 100%;
heigth:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: url('Zz.jpg');
background: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-repeat: no-repeat;
}
.wh {
color: white;
}
.textlogo {
font-family: Noto Sans;
opacity: 1;
margin:49.5% auto 50% auto;
text-align:center;
width:100%;
height:100%;
color: #00000055;
color:white;
font-weight: 800;
font-size: 22px;
z-index: 1;
/*letter-spacing:-2px;*/
font-kerning:normal;
transform-origin: centre;
transform: scaleY(0.90) scaleX(0.95);
}
.kerned{
letter-spacing:-1px;
}
x,y{
position:relative;
display:inline-block;
transform-origin: center;}
x{
top:1.0px;
transform: scaleY(0.88) scaleX(0.95);
}
y{
top:0px;
{
</style>
<body>
<div id=ctrlpanel style="">
<input class=ctrl min=0 max=100 id=speedinput type=range value=0>
<input class=ctrl min=0 max=100 id=vdeg type=range oninput=bbb()>
<input type="file" id="beforeAI"><span class="wh">-before AI</span>
</div>
<div class="container">
<span id=textlogo class=textlogo><span class=kerned><y>T<y><x>i</x></span>kTok</span>
<span id=graycircle class=graycircle></span>
<span id=rtrall class=uu>
<div id=rtralla class=rtrrall>
</div>
</span>
<span id=perc class=perc>99%</span>
</div>
<script>
overTheMaxAngle=360*5;
dce = (x, y) => {
let oo = document.createElement(y);
x.append(oo);
return oo;
}
stopped = false;
bbbtimeoutID = 999;
StepAngle = 2;
howManySteps = 0;
let vda = 0;
vdainc = 5;
GrayRGBA = [200, 200, 200, 0.05].join();
gindex = 0;
somenumber = 0;
perc.innerText = "0%";
function bbbrot() {
let vd = vdeg.value;
vda += vdainc;
console.log(vd);
rtrall.style.transform = "rotateZ(" + vda + "deg)";
//setTimeout(bbb,50);
}
function mf(x,places=0){
let placesfactor = 10**places;
return Math.floor(x*placesfactor)/placesfactor;
}
floor = x => Math.floor(x)
maxAngle = 347
maxAngle = 347
minAngle = 8
allSteps = [];
function addStepsOnCircle() {
for (x = maxAngle+overTheMaxAngle; x > minAngle; x -= StepAngle) {
magfac = 1.3;
howManySteps++;
let rtrel = dce(rtralla, "div");
rtrel.className = "rtrr4"
let vd = x;
let fract = x * magfac / maxAngle;
rtrel.style.transform = "rotateZ(" + vd + "deg)";
let span = dce(rtrel, "span");
// We reduce green to zero first (0 at 50% gradient), then we increase red
span.className = "uu2";
let R, G, B = 0;
if (fract < 0.5) {
G = 255 - floor(fract * 255) * 2;
R = 0;
B = 180;
}
else if (fract < magfac) {
R = floor((fract - .5) * 1 * 255);
G = 0;
B = 180;
}
else {
R = 230 - Math.sin((fract - magfac) * 5) * 128;
G = -0 + Math.sin((fract - magfac) * 3) * 128;
B = 180 + Math.sin((fract - magfac) * 2) * 128;
// Math.abs(180 - floor((fract) * 1 * 255));
span.style.padding = mf((fract - magfac),2);
sdl = [
0,//mf((fract - magfac) * 0,2),
mf((fract - magfac) * -20,2),
mf((fract - magfac) * 4,2)
].join("px,") + "px"
console.log(sdl);
span.style.transform =
"perspective(100px) translate3d(" + sdl + ")"
"scale(" + mf((1 + (fract - magfac)) * 2,2) + ")";
// span.style.zIndex = Math.floor(fract * 1000) + "";
}
console.log([R, G, B]);
let BG = 'rgba(' + [R, G, B].join() + ',1)';
span.originalBG = BG;
span.style.background = BG;
span.style.boxShadow = "0px -14px 10px 0px "
+ 'rgba(' + [R, G, B, 0.13].join() + ')';
allSteps.push(span);
vdeg.max = allSteps.length;
currentIndex = allSteps.length;
}
bbb();
}
function displayProgress(cur, max) {
let prc = 100 - Math.floor(cur*StepAngle/360* max * 100);
prc = mf(((max - cur)*2/360)*100);
perc.innerText = prc + "%";
for (i = 0; i < vdeg.max; i++) {
el = allSteps[i]
if (i > cur) {
el.style.display = '';
}
else {
el.style.display = 'none';
}
}
}
function bbb() {
if(stopped) return;
let as = allSteps;
let vd = currentIndex;
displayProgress(vd, vdeg.max);
clearTimeout(bbbtimeoutID);
if (vd > 0){
bbbtimeoutID = setTimeout(xx => { somenumber++;
currentIndex = vdeg.max - somenumber;
bbb() }, parseInt(speedinput.value))
}
}
graycircle.addEventListener('click', xx => {
if (ctrlpanel.style.display != 'none') {
ctrlpanel.style.display = 'none';
stopped=false;
bbbtimeoutID = setTimeout(bbb,500);
} else {
somenumber = 0;
vdeg.value = vdeg.max - somenumber;
displayProgress(vdeg.max, vdeg.max);
clearTimeout(bbbtimeoutID);
ctrlpanel.style.display = '';
stopped = true;
}
});
document.getElementById('beforeAI').onchange = function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onloadend = function () {
document.body.style.backgroundImage = "url(" + reader.result + ")";
document.getElementById('unselect-image').style.display = "inline";
}
if (file) {
reader.readAsDataURL(file);
}
}
addStepsOnCircle()
vdeg.addEventListener('oninput', bbb);
</script>
</body>
</html>
@Osmiogrzesznik
Copy link
Author

i moved the project to its repositiory at https://github.com/Osmiogrzesznik/AiMangaPrank.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment