A AIGC couplet
// ==UserScript==
// @license MIT
// @name AIGC春联
// @namespace http://tampermonkey.net/
// @version 2024-01-27
// @description A AIGC couplet
// @author Sincenir
// @match *://*/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=undefined.
// @grant GM_addStyle
// @require https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js
// ==/UserScript==
(function () {
"use strict";
GM_addStyle(`@keyframes horizontal-expand {
0% {
transform: scaleX(0) translateX(-50%);
}
100% {
transform: scaleX(1) translateX(-50%);
}
}
@keyframes vertical-expand {
0% {
transform: scaleY(0) translateY(-50%);
}
100% {
transform: scaleY(1) translateY(-50%);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes hide {
0% {
opacity: 1;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.couplet-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
font-family: "楷体", "宋体", "Microsoft YaHei", sans-serif;
font-size: 32px;
font-weight: 700;
color: #fec401;
z-index: 1000000000;
}
.top {
position: absolute;
top: 5%;
left: 50%;
transform: translateX(-50%);
transform-origin: left;
width: 200px;
height: auto;
padding: 16px 24px;
background-color: #ca3a2a;
text-align: center;
overflow: hidden;
white-space: nowrap;
animation: horizontal-expand 1s ease-in-out;
box-shadow: 0 0 0 6px #ff664d;
border-radius: 8px;
}
.top::before {
content: "";
position: absolute;
top: 10px;
left: 16px;
right: 16px;
bottom: 10px;
border: 4px solid #f3dab8;
border-radius: 8px;
}
.couplet-all {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: auto;
height: auto;
padding: 32px 24px;
background-color: #ca3a2a;
writing-mode: vertical-rl;
text-align: center;
overflow: hidden;
white-space: nowrap;
animation: vertical-expand 1s ease-in-out;
box-shadow: 0 0 0 6px #ff664d;
border-radius: 8px;
}
.couplet-all::before {
content: "";
position: absolute;
top: 16px;
left: 10px;
right: 10px;
bottom: 16px;
border: 4px solid #f3dab8;
border-radius: 8px;
}
.couplet-up {
transform-origin: top;
right: 5%;
}
.couplet-down {
transform-origin: top;
left: 5%;
}
.couplet-fu {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
animation: spin 1s ease;
}
.hide {
animation: hide 3s ease-in-out;
}`);
const showTime = 10000;
const coupletList = [
{
up: "龙飞凤舞春盈四海",
down: "岁稔年丰福满九州",
top: "四海同春",
},
{
up: "龙骧盛世财源广进",
down: "岁稔新春福运亨通",
top: "盛世财源",
},
{
up: "龙舞云天开新运财如泉涌",
down: "春回大地展宏图福满人间",
top: "龙运亨通",
},
{
up: "龙年百福临喜气祥和户户",
down: "春风万里送欢歌笑语声声",
top: "迎春接福",
},
{
up: "龙腾盛世展宏图业兴财旺",
down: "春满神州添锦绣福寿安康",
top: "大展鸿图",
},
{
up: "龙年百福临喜气祥和户户",
down: "春风万里送欢歌笑语声声",
top: "迎春接福",
},
{
up: "龙征万里",
down: "福满乾坤",
top: "万里乾坤福",
},
];
function createCoupletContainer() {
const container = document.createElement("div");
container.className = "couplet-container";
return container;
}
function createTop(str) {
const topEl = document.createElement("div");
topEl.innerHTML = str;
topEl.className = "top";
return topEl;
}
function createUp(str) {
const upEl = document.createElement("div");
upEl.className = "couplet-all couplet-up";
upEl.innerHTML = str;
return upEl;
}
function createDown(str) {
const down = document.createElement("div");
down.className = "couplet-all couplet-down";
down.innerHTML = str;
return down;
}
function createFu() {
const fu = document.createElement("div");
fu.className = "couplet-fu";
fu.innerHTML =
'<svg t="1706247528897" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2446" width="200" height="200"><path d="M457.665918 982.912037L41.187933 566.334082c-29.891243-29.891243-29.891243-78.776921 0-108.468222L457.665918 41.387875c29.891243-29.891243 78.67695-29.891243 108.468222 0L982.712096 457.86586c29.891243 29.891243 29.891243 78.776921 0 108.468222L566.334082 983.012008c-29.891243 29.791272-78.776921 29.791272-108.668164-0.099971z m0 0" fill="#CA3A2A" p-id="2447"></path><path d="M512.049985 1024c-24.392854 0-48.885678-9.297276-67.48023-27.891829L28.09177 579.630186c-37.189105-37.189105-37.189105-97.671385 0-134.86049L444.569755 28.09177c37.189105-37.189105 97.671385-37.189105 134.86049 0l416.477985 416.477985c37.189105 37.189105 37.189105 97.671385 0 134.86049L579.430245 996.108171c-18.594552 18.594552-42.987406 27.891829-67.38026 27.891829z m0-986.510983c-14.895636 0-29.791272 5.698331-41.187933 16.995021L54.384067 470.962023c-22.693352 22.693352-22.693352 59.582544 0 82.175925L470.862052 969.715904c22.693352 22.693352 59.582544 22.693352 82.175925 0l416.477985-416.477985c22.693352-22.693352 22.693352-59.582544 0-82.175925L553.037977 54.484038c-11.29669-11.396661-26.192326-16.995021-40.987992-16.995021z m0 0" fill="#CA3A2A" p-id="2448"></path><path d="M864.346773 475.060822L549.039149 159.653227c-9.79713-9.8971-22.993264-15.295519-36.989164-15.295519s-27.092063 5.398418-36.989163 15.295519L159.553256 475.060822c-20.394025 20.394025-20.394025 53.684272 0 74.178268L475.060822 864.746656c10.097042 10.197013 23.693059 15.295519 36.989163 15.295519 13.396075 0 26.892121-5.098506 36.989164-15.295519l315.307624-315.707507c9.8971-9.79713 15.295519-22.993264 15.295519-36.989164s-5.398418-27.192034-15.295519-36.989163z m-12.996192 45.486674l-330.903056 330.903056c-4.398711 4.598653-12.096456 4.598653-16.695109 0l-331.003026-330.903056c-4.598653-4.498682-4.598653-12.096456 0-16.695109l331.003026-331.003026c2.999121-2.999121 6.498096-3.399004 8.39754-3.399005 1.899444 0 5.398418 0.399883 8.39754 3.399005l330.903056 331.003026c2.999121 2.999121 3.399004 6.498096 3.399004 8.39754-0.199941 1.799473-0.599824 5.298448-3.498975 8.297569z m0 0" fill="#F3DAB8" p-id="2449"></path><path d="M668.60412 596.425266H562.835107c-7.297862 0-13.9959-4.298741-16.995021-10.896808-2.999121-6.598067-1.899444-14.395782 2.899151-19.894171L670.203651 425.875232c6.798008-7.797716 18.494582-8.597481 26.292297-1.799473 7.797716 6.698038 8.597481 18.494582 1.899444 26.292297l-94.672264 108.968076h64.980963c10.197013 0 18.594552 8.39754 18.594552 18.594552 0.099971 10.197013-8.297569 18.494582-18.694523 18.494582z m-33.190276 51.584887l-28.09177-33.990042" fill="#FEC401" p-id="2450"></path><path d="M635.413844 666.604706c-5.298448 0-10.696866-2.299326-14.295812-6.698038l-27.991799-33.890071c-6.498096-7.897686-5.498389-19.69423 2.399297-26.192327s19.69423-5.498389 26.192326 2.399297l27.991799 33.890072c6.498096 7.897686 5.498389 19.69423-2.399297 26.192326-3.598946 2.899151-7.697745 4.298741-11.896514 4.298741z m-22.793323-135.060432c-10.197013 0-18.594552-8.39754-18.594552-18.594552V376.189788c0-10.197013 8.39754-18.594552 18.594552-18.594552 10.197013 0 18.594552 8.39754 18.594553 18.594552v136.759934c0 10.197013-8.39754 18.594552-18.594553 18.594552z m0 0" fill="#FEC401" p-id="2451"></path><path d="M582.829249 504.052328c-4.998536 0-9.997071-1.999414-13.695987-6.098213l-32.690423-35.589573c-6.99795-7.597774-6.398126-19.294347 1.199649-26.292298 7.597774-6.99795 19.294347-6.398126 26.292297 1.199649l32.690422 35.589573c6.99795 7.597774 6.398126 19.294347-1.199648 26.292298-3.598946 3.199063-8.197598 4.898565-12.59631 4.898564z m-94.772234 162.552378H351.896905c-10.197013 0-18.594552-8.39754-18.594552-18.594553 0-10.197013 8.39754-18.594552 18.594552-18.594552h136.16011c10.197013 0 18.594552 8.39754 18.594552 18.594552 0 10.197013-8.297569 18.594552-18.594552 18.594553z m-19.294348-48.485796h-97.571414c-12.196427 0-22.093527-9.8971-22.093528-22.093527V549.838914c0-12.196427 9.8971-22.093527 22.093528-22.093527h97.571414c12.196427 0 22.093527 9.8971 22.093527 22.093527v46.186469c0.099971 12.196427-9.8971 22.093527-22.093527 22.093527zM386.28683 580.829835h67.48023v-15.895343h-67.48023V580.829835z m84.175339-75.577858h-100.970419c-26.69218 0-48.485795-21.693644-48.485795-48.485795v-49.18559c0-26.69218 21.793615-48.485795 48.485795-48.485796h100.970419c26.69218 0 48.485795 21.793615 48.485795 48.485796V456.866152c0 26.69218-21.693644 48.385824-48.485795 48.385825zM369.591721 396.383872c-6.198184 0-11.29669 5.098506-11.29669 11.29669V456.866152c0 6.198184 5.098506 11.29669 11.29669 11.296691h100.970419c6.198184 0 11.29669-5.098506 11.29669-11.296691v-49.18559c0-6.198184-5.098506-11.29669-11.29669-11.29669h-100.970419z m0 0" fill="#FEC401" p-id="2452"></path><path d="M482.858538 450.767939H356.695499c-10.197013 0-18.594552-8.39754-18.594552-18.594552 0-10.197013 8.39754-18.594552 18.594552-18.594553H482.858538c10.197013 0 18.594552 8.39754 18.594552 18.594553 0 10.197013-8.39754 18.594552-18.594552 18.594552z m0 0" fill="#FEC401" p-id="2453"></path><path d="M419.677048 496.354584c-10.197013 0-18.594552-8.39754-18.594553-18.594553v-92.972762c0-10.197013 8.39754-18.594552 18.594553-18.594552 10.197013 0 18.594552 8.39754 18.594552 18.594552v92.972762c0 10.197013-8.197598 18.594552-18.594552 18.594553z m0 0" fill="#FEC401" p-id="2454"></path><path d="M512.049985 1024c-24.392854 0-48.885678-9.297276-67.48023-27.891829L28.09177 579.630186c-37.189105-37.189105-37.189105-97.671385 0-134.86049L444.569755 28.09177c37.189105-37.189105 97.671385-37.189105 134.86049 0l416.477985 416.477985c37.189105 37.189105 37.189105 97.671385 0 134.86049L579.430245 996.108171c-18.594552 18.594552-42.987406 27.891829-67.38026 27.891829z m0-986.510983c-14.895636 0-29.791272 5.698331-41.187933 16.995021L54.384067 470.962023c-22.693352 22.693352-22.693352 59.582544 0 82.175925L470.862052 969.715904c22.693352 22.693352 59.582544 22.693352 82.175925 0l416.477985-416.477985c22.693352-22.693352 22.693352-59.582544 0-82.175925L553.037977 54.484038c-11.29669-11.396661-26.192326-16.995021-40.987992-16.995021z m0 0" fill="#FF664D" p-id="2455"></path></svg>';
return fu;
}
const coupletContainer = createCoupletContainer();
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const c = coupletList[getRandomInt(0, coupletList.length - 1)];
const top = createTop(c.top);
const up = createUp(c.up);
const down = createDown(c.down);
const fu = createFu();
coupletContainer.append(top);
coupletContainer.append(up);
coupletContainer.append(down);
coupletContainer.append(fu);
document.body.append(coupletContainer);
setTimeout(() => {
document.querySelector(".couplet-container").className =
"couplet-container hide";
setTimeout(() => {
document.querySelector(".couplet-container").remove();
}, 1000);
}, showTime);
document.addEventListener("keydown", (e) => {
if (e.key !== "Escape") return;
document.querySelector(".couplet-container").className =
"couplet-container hide";
setTimeout(() => {
document.querySelector(".couplet-container").remove();
}, 1000);
});
})();