https://kris.software/

스캔 ID:: 9b14398d-35c1-468b-aa67-250a49888474완료
제출된 URL:: https://kris.software/
보고서 완료:: 2024년 11월 20일 11:34:19
링크 · 1개 결과

페이지에서 식별된 외부 링크
링크	텍스트
https://github.com/Kris-0605	y
JavaScript 변수 · 16개 결과

페이지의 창 개체에 로드된 전역 JavaScript 변수는 함수 외부에서 선언된 변수로, 현재 범위 내에서 코드의 어느 부분에서나 액세스할 수 있습니다
이름	유형
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
resizeCanvas	function
cullBlocks	function
drawBackgroundBlocks	function
updatePhysics	function
draw	function
spawnBlock	function
handleClick	function
콘솔 로그 메시지 · 0개 결과

웹 콘솔에 기록된 메시지
HTML

페이지의 원시 HTML 본문
<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Kris Software is the home of projects by Kris, a 19-year old British software developer.">
    <title>Kris Software</title>
    
    
    <link href="https://fonts.googleapis.com/css2?family=Kode+Mono:wght@500&amp;display=swap" rel="stylesheet">
    <link rel="icon" href="kris.webp">
    <meta content="Kris Software" property="og:title">
    <meta content="Kris Software is the home of projects by Kris, a 19-year old British software developer." property="og:description">
    <meta content="https://kris.software" property="og:url">
    <meta content="https://kris.software/kris.webp" property="og:image">
    <meta content="#ff00ff" data-react-helmet="true" name="theme-color">
    <style>
body,
html {
    width: 100%;
    height: 100%;
}

body {
    background-color: black;
    color: white;
    font-family: "Kode Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    margin: 0px;
    overflow: hidden;
    user-select: none;
}

canvas {
    position: absolute;
}

#background {
    z-index: -2;
}

#particle {
    z-index: -1;
}

.page-content {
    padding: 1rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(5px);
    height: 100%;
}

.page-content * {
    display: inline;
}

.title img {
    height: 2.1rem;
    padding: 0rem;
    margin: 0rem;
}

h1,
h2,
.github h2 a {
    font-size: 3rem;
    color: black;
    margin-bottom: 0rem;
    margin-top: 1rem;
}

h2,
.github h2 a,
#cursor2 {
    font-size: 2rem;
}

@media only screen and (max-width: 586px) {
    .page-content {
        padding: 2.73vw;
    }

    .title img {
        height: 5.73vw;
    }

    h1,
    h2,
    .github h2 a {
        font-size: 8.19vw;
        margin-top: 2.73vw;
    }

    h2,
    .github h2 a,
    #cursor2 {
        font-size: 5vw;
    }
}
    </style>
</head>
<body>
    <canvas id="background" width="800" height="600"></canvas>
    <canvas id="particle" width="800" height="600"></canvas>
    <div class="page-content">
        <div class="title">
            <picture>
                <source srcset="kris.webp" type="image/webp">
                <source srcset="kris.png" type="image/png">
                <img src="kris.png" alt="Simple logo">
            </picture>
            <h1>
                <span>K</span><span>r</span><span>i</span><span>s</span><span> </span><span>S</span><span>o</span><span>f</span><span>t</span><span>w</span><span>a</span><span>r</span><span>e</span><span class="cursor" id="cursor1">█</span>
            </h1>
        </div>
        <div class="github">
            <h2>
                <a href="https://github.com/Kris-0605" target="_blank">M</a><a href="https://github.com/Kris-0605" target="_blank">y</a><a href="https://github.com/Kris-0605" target="_blank"> </a><a href="https://github.com/Kris-0605" target="_blank">G</a><a href="https://github.com/Kris-0605" target="_blank">i</a><a href="https://github.com/Kris-0605" target="_blank">t</a><a href="https://github.com/Kris-0605" target="_blank">H</a><a href="https://github.com/Kris-0605" target="_blank">u</a><a href="https://github.com/Kris-0605" target="_blank">b</a>
            </h2>
        </div>
        <div class="more">
            <h2>
                <span>M</span><span>o</span><span>r</span><span>e</span> <span>s</span><span>o</span><span>o</span><span>n</span><span> </span><span>:</span><span>)</span>
            </h2>
        </div>
        <div class="counter">
            <h2>
                <span id="value">1</span><span> </span><span>p</span><span>e</span><span>o</span><span>p</span><span>l</span><span>e</span><span> </span><span>a</span><span>r</span><span>e</span><span> </span><span>c</span><span>u</span><span>r</span><span>r</span><span>e</span><span>n</span><span>t</span><span>l</span><span>y</span><span> </span><span>h</span><span>e</span><span>r</span><span>e</span>
            </h2>
        </div>
        <div>
            <h2>
                <span>T</span><span>r</span><span>y</span><span> </span><span>c</span><span>l</span><span>i</span><span>c</span><span>k</span><span>i</span><span>n</span><span>g</span><span> </span><span>a</span><span>r</span><span>o</span><span>u</span><span>n</span><span>d</span><span>!</span></h2><span class="cursor" id="cursor2">█</span>
        </div>
    </div>
<style>
:root {
    --github: #a58fe2;
}

@keyframes reveal-white {
    0% {
        color: black;
        background-color: black;
    }

    49.99% {
        color: black;
        background-color: black;
    }

    50% {
        color: white;
        background-color: white;
    }

    99.99% {
        color: white;
        background-color: white;
    }

    100% {
        color: white;
        background-color: transparent;
    }
}

h1 span,
h2 span {
    animation: reveal-white 0.08s forwards;
}

h2 span {
    animation-duration: 0.04s;
}

h1 span:nth-child(1),
.github h2 a:nth-child(1) {
    animation-delay: 0.04s;
}

h1 span:nth-child(2),
.github h2 a:nth-child(2) {
    animation-delay: 0.08s;
}

h1 span:nth-child(3),
.github h2 a:nth-child(3) {
    animation-delay: 0.12s;
}

h1 span:nth-child(4),
.github h2 a:nth-child(4) {
    animation-delay: 0.16s;
}

h1 span:nth-child(5),
.github h2 a:nth-child(5) {
    animation-delay: 0.2s;
}

h1 span:nth-child(6),
.github h2 a:nth-child(6) {
    animation-delay: 0.24s;
}

h1 span:nth-child(7),
.github h2 a:nth-child(7) {
    animation-delay: 0.28s;
}

h1 span:nth-child(8),
.github h2 a:nth-child(8) {
    animation-delay: 0.32s;
}

h1 span:nth-child(9),
.github h2 a:nth-child(9) {
    animation-delay: 0.36s;
}

h1 span:nth-child(10) {
    animation-delay: 0.4s;
}

h1 span:nth-child(11) {
    animation-delay: 0.44s;
}

h1 span:nth-child(12) {
    animation-delay: 0.48s;
}

h1 span:nth-child(13) {
    animation-delay: 0.52s;
}

h2 span:nth-child(1) {
    animation-delay: 0.02s;
}

h2 span:nth-child(2) {
    animation-delay: 0.04s;
}

h2 span:nth-child(3) {
    animation-delay: 0.06s;
}

h2 span:nth-child(4) {
    animation-delay: 0.08s;
}

h2 span:nth-child(5) {
    animation-delay: 0.1s;
}

h2 span:nth-child(6) {
    animation-delay: 0.12s;
}

h2 span:nth-child(7) {
    animation-delay: 0.14s;
}

h2 span:nth-child(8) {
    animation-delay: 0.16s;
}

h2 span:nth-child(9) {
    animation-delay: 0.18s;
}

h2 span:nth-child(10) {
    animation-delay: 0.2s;
}

h2 span:nth-child(11) {
    animation-delay: 0.22s;
}

h2 span:nth-child(12) {
    animation-delay: 0.24s;
}

h2 span:nth-child(13) {
    animation-delay: 0.26s;
}

h2 span:nth-child(14) {
    animation-delay: 0.28s;
}

h2 span:nth-child(15) {
    animation-delay: 0.3s;
}

h2 span:nth-child(16) {
    animation-delay: 0.32s;
}

h2 span:nth-child(17) {
    animation-delay: 0.34s;
}

h2 span:nth-child(18) {
    animation-delay: 0.36s;
}

h2 span:nth-child(19) {
    animation-delay: 0.38s;
}

h2 span:nth-child(20) {
    animation-delay: 0.4s;
}

h2 span:nth-child(21) {
    animation-delay: 0.42s;
}

h2 span:nth-child(22) {
    animation-delay: 0.44s;
}

h2 span:nth-child(23) {
    animation-delay: 0.46s;
}

h2 span:nth-child(24) {
    animation-delay: 0.48s;
}

h2 span:nth-child(25) {
    animation-delay: 0.5s;
}

h2 span:nth-child(26) {
    animation-delay: 0.52s;
}

h2 span:nth-child(27) {
    animation-delay: 0.54s;
}

@keyframes reveal-github {
    0% {
        color: black;
        background-color: black;
    }

    49.99% {
        color: black;
        background-color: black;
    }

    50% {
        color: var(--github);
        background-color: var(--github);
    }

    99.99% {
        color: var(--github);
        background-color: var(--github);
    }

    100% {
        color: var(--github);
        background-color: transparent;
    }
}

.github h2 {
    display: inline-block;
}

.github h2 a {
    animation: reveal-github 0.08s forwards;
}

@keyframes cursor {
    0% {
        opacity: 100%;
    }

    50% {
        opacity: 100%;
    }

    50.01% {
        opacity: 0%;
    }

    100% {
        opacity: 0%;
    }
}

.counter {
    display: inline-block;
    margin-top: 1rem;
}

.cursor {
    opacity: 0%;
    animation: cursor 1s infinite 0.56s;
    color: white;
}
</style>
    <script type="text/javascript">
const backgroundCanvas = document.getElementById("background");
const backgroundCtx = backgroundCanvas.getContext("2d");
const particleCanvas = document.getElementById("particle");
const particleCtx = particleCanvas.getContext("2d");

const maxWidth = 20;
const maxHeight = 20;
const acceleration = 0.003;
const maxHorizontalVelocity = 0.3;
const maxVerticalVelocity = -0.3;
const maxBlocksPerClick = 10;

const maxBackgroundWidth = 200;
const maxBackgroundHeight = 200;
const maxBackgroundHorizontalVelocity = 0.2;

function resizeCanvas() {
    backgroundCanvas.width = window.innerWidth;
    backgroundCanvas.height = window.innerHeight;
    particleCanvas.width = window.innerWidth;
    particleCanvas.height = window.innerHeight;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

let blocks = [];
let backgroundBlocks = [];

function cullBlocks() {
    blocks = blocks.filter(function (item) { return item.y < particleCanvas.height });
    backgroundBlocks = backgroundBlocks.filter(function (item) { return item.x >= -maxBackgroundWidth - 50 && item.x <= backgroundCanvas.width + 50 })
}

function drawBackgroundBlocks(timestamp) {
    backgroundCtx.clearRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);

    for (let i = 0; i < backgroundBlocks.length; i++) {
        let block = backgroundBlocks[i]

        if (block.timestamp === 0) {
            block.timestamp = timestamp;
        }

        block.x = block.x_start + block.uHor * (timestamp - block.timestamp);

        backgroundCtx.fillStyle = "#f0f";
        backgroundCtx.globalCompositeOperation = "destination-over";
        backgroundCtx.fillRect(block.x, block.y, block.w, block.h);
        backgroundCtx.globalCompositeOperation = "lighter";
        backgroundCtx.shadowBlur = block.w / 10;
        backgroundCtx.shadowColor = "#f0f";
        backgroundCtx.shadowOffsetX = 0;
        backgroundCtx.shadowOffsetY = 0;
        backgroundCtx.fillRect(block.x - backgroundCtx.shadowBlur, block.y - backgroundCtx.shadowBlur, block.w + 2 * backgroundCtx.shadowBlur, block.h + 2 * backgroundCtx.shadowBlur);
    }
}

function updatePhysics(block, timestamp) {
    if (block.timestamp === 0) {
        block.timestamp = timestamp;
    }

    time = timestamp - block.timestamp;

    block.x = block.x_start + block.uHor * time;
    block.y = block.y_start + block.uVer * time + acceleration * time * time * 0.5;
}

function draw(timestamp) {
    particleCtx.clearRect(0, 0, particleCanvas.width, particleCanvas.height);
    drawBackgroundBlocks(timestamp);
    for (let i = 0; i < blocks.length; i++) {
        let block = blocks[i];
        updatePhysics(block, timestamp);
        if (block.colour === 0) {
            particleCtx.fillStyle = `rgba(255, 0, 255, ${block.opacity})`;
        } else if (block.colour === 1) {
            particleCtx.fillStyle = `rgba(0, 0, 255, ${block.opacity})`;
        } else {
            particleCtx.fillStyle = `rgba(255, 0, 0, ${block.opacity})`;
        }
        particleCtx.fillRect(block.x, block.y, block.w, block.h);
    }
    requestAnimationFrame(draw);
}

requestAnimationFrame(draw);

function spawnBlock(colour, amount, x, y) {
    let opacity = Math.random() + 0.3;

    for (let i = 0; i < amount; i++) {
        blocks.push({
            x: x,
            y: y,
            x_start: x,
            y_start: y,
            w: maxWidth * Math.random() + 10,
            h: maxHeight * Math.random() + 10,
            opacity: opacity,
            uHor: 2 * maxHorizontalVelocity * Math.random() - maxHorizontalVelocity,
            uVer: 4 * maxVerticalVelocity * Math.random() - maxVerticalVelocity,
            timestamp: 0,
            colour: colour,
        });
    }
}

function handleClick(event) {
    let numOfBlocks = maxBlocksPerClick * Math.random();
    spawnBlock(0, numOfBlocks, event.clientX, event.clientY);
    socket.send(new Float32Array([event.clientX / particleCanvas.width, event.clientY / particleCanvas.height]))
}

document.addEventListener('click', handleClick);

function spawnBackgroundBlock() {
    if (!document.hidden) {
        let uHor = 2 * maxBackgroundHorizontalVelocity * Math.random() - maxBackgroundHorizontalVelocity + 0.0005;
        if (uHor > 0) {
            x = -maxBackgroundWidth - 50;
        } else {
            x = particleCanvas.width + 50;
        }

        backgroundBlocks.push({
            x: x,
            y: particleCanvas.height * Math.random(),
            x_start: x,
            w: maxBackgroundWidth * Math.random() + 50,
            h: maxBackgroundHeight * Math.random(),
            uHor: uHor,
            timestamp: 0,
        })
    }
}

setInterval(spawnBackgroundBlock, 1000)
setInterval(cullBlocks, 200)

function updateCounter(event) {
    document.getElementById("value").innerHTML = String(new Uint32Array(event.data)[0]);
}

function openWebSocket(event) {
    const socket = new WebSocket("wss://particle.kris.software/");
    socket.binaryType = 'arraybuffer';

    socket.addEventListener("open", (event) => { requestUpdateCounter(); });
    socket.addEventListener("close", openWebSocket);
    socket.addEventListener("error", openWebSocket);
    socket.addEventListener("message", (event) => {
        data = new Float32Array(event.data);
        if (data.length === 1) {
            updateCounter(event);
        } else {
            if (Math.random() < 0.5) {
                colour = 1;
            } else {
                colour = 2;
            }
            spawnBlock(colour, 1, data[0] * particleCanvas.width, data[1] * particleCanvas.height);
        }
    });
    return socket;
}

let socket = openWebSocket();

function requestUpdateCounter() {
    socket.send(new Uint8Array([0]))
}

setInterval(requestUpdateCounter, 5000);
    </script>

</body></html>