Richard-61.github.io/love.html at main · Richard-61/Richard-61.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Destiny Liu</title>
<style>
    body {
        font-family: "微软雅黑", Arial, sans-serif;
        background-color: rgb(244, 207, 214);
        color: rgb(21, 10, 141);
        text-align: center;
        padding: 50px;
    }
    h1 {
        font-size: 2em;
    }
    p {
        font-size: 1.5em;
        margin-top: 20px;
    }
    a {
        color: rgb(24, 23, 23);
        font-weight: bold;
        text-decoration: none;
    }
    span {
        color: #2e2d28;
        font-size: 1.2em;
    }
    canvas {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <canvas id="heartCanvas" width="300" height="300"></canvas>
    <h1>王小鱼，520快乐！</h1>
    <p>You know I wanna be your destiny! ❤️</p>
    <p><span id="runtime_span"></span></p>
    <script type="text/javascript">
        const canvas = document.getElementById('heartCanvas');
        const ctx = canvas.getContext('2d');
        let hearts = [];

        function Heart(angle) {
            const position = calculateHeartPosition(angle);
            this.x = position.x;
            this.y = position.y;
            this.opacity = Math.random() * 0.5 + 0.5;
            this.scale = Math.random() * 5 + 5; // smaller hearts
            this.color = 'rgba(221, 46, 68,' + this.opacity + ')';
        }

        Heart.prototype.draw = function() {
            ctx.fillStyle = this.color;
            ctx.beginPath();
            let x = this.x;
            let y = this.y;
            let scale = this.scale;
            ctx.moveTo(x, y);
            ctx.bezierCurveTo(x + 0.5 * scale, y - 1.4 * scale, x + 1.5 * scale, y - 0.6 * scale, x, y + 0.6 * scale);
            ctx.bezierCurveTo(x - 1.5 * scale, y - 0.6 * scale, x - 0.5 * scale, y - 1.4 * scale, x, y);
            ctx.fill();
        };

        function calculateHeartPosition(angle) {
            const t = angle * Math.PI / 180;
            const x = 16 * Math.pow(Math.sin(t), 3);
            const y = - (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
            return {
                x: canvas.width / 2 + x * 15, // Adjusted scale for better fit
                y: canvas.height / 2 + y * 15 + 50 // Adjusted offset for vertical alignment
            };
        }

        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (hearts.length < 200) { // increase for more density
                const angle = Math.random() * 360;
                hearts.push(new Heart(angle));
            }
            hearts.forEach(heart => {
                heart.draw();
            });
            requestAnimationFrame(update);
        }

        function resize() {
            canvas.width = window.innerWidth * 0.5;
            canvas.height = window.innerHeight * 0.5; // Increased height
        }

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

        function show_runtime() {
            window.setTimeout("show_runtime()", 1000);
            const X = new Date("05/05/2024 00:02:34"); // 设置相识的日期
            const Y = new Date();
            const T = (Y - X);
            const A = Math.floor(T / (24 * 3600 * 1000));
            const B = Math.floor((T % (24 * 3600 * 1000)) / (3600 * 1000));
            const C = Math.floor((T % (3600 * 1000)) / (60 * 1000));
            const D = Math.floor((T % (60 * 1000)) / 1000);
            runtime_span.innerHTML = "我喜欢你已经: " + A + "天" + B + "小时" + C + "分" + D + "秒";
        }
        show_runtime();
    </script>
</body>
</html>