mirror of
https://github.com/headporter81/specialsource-homepage-frontend.git
synced 2026-08-08 15:21:11 +09:00
This commit is contained in:
+14
-10
@@ -1,13 +1,17 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="ko">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>specialsource-homepage-frontend</title>
|
<title>SpecialSource</title>
|
||||||
</head>
|
|
||||||
<body>
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||||||
<div id="app"></div>
|
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />
|
||||||
</body>
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Generated
+186
-1
@@ -9,6 +9,7 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^1.7.9",
|
"axios": "^1.7.9",
|
||||||
|
"jquery.terminal": "^2.46.0",
|
||||||
"vue": "^3.5.34",
|
"vue": "^3.5.34",
|
||||||
"vue-router": "^4.5.0"
|
"vue-router": "^4.5.0"
|
||||||
},
|
},
|
||||||
@@ -427,6 +428,11 @@
|
|||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@jcubic/lily": {
|
||||||
|
"version": "0.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jcubic/lily/-/lily-0.3.0.tgz",
|
||||||
|
"integrity": "sha512-4z6p4jLGSthc8gQ7wu4nHfGYn/IgCKFr+7hjuf80VdXUs7sm029mZGGDpS8sb29PVZWUBvMMTBCVGFhH2nN4Vw=="
|
||||||
|
},
|
||||||
"node_modules/@jridgewell/sourcemap-codec": {
|
"node_modules/@jridgewell/sourcemap-codec": {
|
||||||
"version": "1.5.5",
|
"version": "1.5.5",
|
||||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
|
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
|
||||||
@@ -763,6 +769,19 @@
|
|||||||
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
|
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/jquery": {
|
||||||
|
"version": "3.5.34",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.34.tgz",
|
||||||
|
"integrity": "sha512-3m3939S3erqmTLJANS/uy0B6V7BorKx7RorcGZVjZ62dF5PAGbKEDZK1CuLtKombJkFA2T1jl8LAIIs7IV6gBQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/sizzle": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@types/sizzle": {
|
||||||
|
"version": "2.3.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.10.tgz",
|
||||||
|
"integrity": "sha512-TC0dmN0K8YcWEAEfiPi5gJP14eJe30TTGjkvek3iM/1NdHHsdCA/Td6GvNndMOo/iSnIsZ4HuuhrYPDAmbxzww=="
|
||||||
|
},
|
||||||
"node_modules/@vitejs/plugin-vue": {
|
"node_modules/@vitejs/plugin-vue": {
|
||||||
"version": "5.2.4",
|
"version": "5.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
|
||||||
@@ -883,6 +902,11 @@
|
|||||||
"node": ">= 6.0.0"
|
"node": ">= 6.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/ansidec": {
|
||||||
|
"version": "0.3.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/ansidec/-/ansidec-0.3.5.tgz",
|
||||||
|
"integrity": "sha512-egqzSHBkr8/Jm+wCaqdnN6qspZYBQ8dNYmXuJ5ynXu6AQSBRdQBqdPbbiuIrfNRh+MZMd95x+sTcxKA06ZxKPQ=="
|
||||||
|
},
|
||||||
"node_modules/asynckit": {
|
"node_modules/asynckit": {
|
||||||
"version": "0.4.0",
|
"version": "0.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||||
@@ -911,6 +935,14 @@
|
|||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/clone": {
|
||||||
|
"version": "1.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
|
||||||
|
"integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/combined-stream": {
|
"node_modules/combined-stream": {
|
||||||
"version": "1.0.8",
|
"version": "1.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||||
@@ -927,6 +959,14 @@
|
|||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
||||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
|
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
|
||||||
},
|
},
|
||||||
|
"node_modules/data-uri-to-buffer": {
|
||||||
|
"version": "4.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
|
||||||
|
"integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 12"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/debug": {
|
"node_modules/debug": {
|
||||||
"version": "4.4.3",
|
"version": "4.4.3",
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||||
@@ -943,6 +983,17 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/defaults": {
|
||||||
|
"version": "1.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
|
||||||
|
"integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
|
||||||
|
"dependencies": {
|
||||||
|
"clone": "^1.0.2"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/delayed-stream": {
|
"node_modules/delayed-stream": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||||
@@ -1059,6 +1110,28 @@
|
|||||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
||||||
},
|
},
|
||||||
|
"node_modules/fetch-blob": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/jimmywarting"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "paypal",
|
||||||
|
"url": "https://paypal.me/jimmywarting"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"node-domexception": "^1.0.0",
|
||||||
|
"web-streams-polyfill": "^3.0.3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "^12.20 || >= 14.13"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/follow-redirects": {
|
"node_modules/follow-redirects": {
|
||||||
"version": "1.16.0",
|
"version": "1.16.0",
|
||||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
|
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
|
||||||
@@ -1093,11 +1166,21 @@
|
|||||||
"node": ">= 6"
|
"node": ">= 6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/formdata-polyfill": {
|
||||||
|
"version": "4.0.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
|
||||||
|
"integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
|
||||||
|
"dependencies": {
|
||||||
|
"fetch-blob": "^3.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.20.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/fsevents": {
|
"node_modules/fsevents": {
|
||||||
"version": "2.3.3",
|
"version": "2.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||||
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||||
"dev": true,
|
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1209,6 +1292,43 @@
|
|||||||
"node": ">= 6"
|
"node": ">= 6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/iconv-lite": {
|
||||||
|
"version": "0.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
|
||||||
|
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
|
||||||
|
"dependencies": {
|
||||||
|
"safer-buffer": ">= 2.1.2 < 3.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/jquery": {
|
||||||
|
"version": "3.7.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
|
||||||
|
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
|
||||||
|
},
|
||||||
|
"node_modules/jquery.terminal": {
|
||||||
|
"version": "2.46.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jquery.terminal/-/jquery.terminal-2.46.0.tgz",
|
||||||
|
"integrity": "sha512-qsel1JJom/sY7jylO5UnerO/7IjBpo02MH6L9T527J2sAn8chO7/WrVXC1Gc2ihyeWyViq057yexQtZAqP4EDA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@jcubic/lily": "^0.3.0",
|
||||||
|
"@types/jquery": "^3.5.29",
|
||||||
|
"ansidec": "^0.3.4",
|
||||||
|
"iconv-lite": "^0.6.3",
|
||||||
|
"jquery": "^3.7.1",
|
||||||
|
"node-fetch": "^3.3.2",
|
||||||
|
"prismjs": "^1.30.0",
|
||||||
|
"wcwidth": "^1.0.1"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"from-ansi": "bin/convert.js"
|
||||||
|
},
|
||||||
|
"optionalDependencies": {
|
||||||
|
"fsevents": "^2.3.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/magic-string": {
|
"node_modules/magic-string": {
|
||||||
"version": "0.30.21",
|
"version": "0.30.21",
|
||||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
|
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
|
||||||
@@ -1266,6 +1386,42 @@
|
|||||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/node-domexception": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
|
||||||
|
"deprecated": "Use your platform's native DOMException instead",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/jimmywarting"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://paypal.me/jimmywarting"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/node-fetch": {
|
||||||
|
"version": "3.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
|
||||||
|
"integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
|
||||||
|
"dependencies": {
|
||||||
|
"data-uri-to-buffer": "^4.0.0",
|
||||||
|
"fetch-blob": "^3.1.4",
|
||||||
|
"formdata-polyfill": "^4.0.10"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/node-fetch"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/picocolors": {
|
"node_modules/picocolors": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||||
@@ -1298,6 +1454,14 @@
|
|||||||
"node": "^10 || ^12 || >=14"
|
"node": "^10 || ^12 || >=14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/prismjs": {
|
||||||
|
"version": "1.30.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
|
||||||
|
"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/proxy-from-env": {
|
"node_modules/proxy-from-env": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
|
||||||
@@ -1350,6 +1514,11 @@
|
|||||||
"fsevents": "~2.3.2"
|
"fsevents": "~2.3.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/safer-buffer": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
|
||||||
|
},
|
||||||
"node_modules/source-map-js": {
|
"node_modules/source-map-js": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||||
@@ -1450,6 +1619,22 @@
|
|||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"vue": "^3.5.0"
|
"vue": "^3.5.0"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"node_modules/wcwidth": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
|
||||||
|
"dependencies": {
|
||||||
|
"defaults": "^1.0.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/web-streams-polyfill": {
|
||||||
|
"version": "3.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
|
||||||
|
"integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 8"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,6 +10,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^1.7.9",
|
"axios": "^1.7.9",
|
||||||
|
"jquery.terminal": "^2.46.0",
|
||||||
"vue": "^3.5.34",
|
"vue": "^3.5.34",
|
||||||
"vue-router": "^4.5.0"
|
"vue-router": "^4.5.0"
|
||||||
},
|
},
|
||||||
|
|||||||
Vendored
+3
@@ -0,0 +1,3 @@
|
|||||||
|
import $ from 'jquery';
|
||||||
|
window.$ = $;
|
||||||
|
window.jQuery = $;
|
||||||
+3
-13
@@ -1,10 +1,10 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
import Login from '@/views/Login.vue'
|
|
||||||
import Main from '@/views/Main.vue'
|
import Main from '@/views/Main.vue'
|
||||||
|
import Login from '@/views/Login.vue'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{ path: '/login', component: Login },
|
{ path: '/', component: Main }, // 메인은 누구나 접속 가능
|
||||||
{ path: '/', component: Main, meta: { requiresAuth: true } } // 로그인 필수 메뉴
|
{ path: '/login', component: Login }
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
@@ -12,14 +12,4 @@ const router = createRouter({
|
|||||||
routes
|
routes
|
||||||
})
|
})
|
||||||
|
|
||||||
// 문지기 설정: 토큰 없으면 로그인 페이지로 강제 배송
|
|
||||||
router.beforeEach((to, from, next) => {
|
|
||||||
const token = localStorage.getItem('token')
|
|
||||||
if (to.meta.requiresAuth && !token) {
|
|
||||||
next('/login')
|
|
||||||
} else {
|
|
||||||
next()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
+387
-44
@@ -1,65 +1,408 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-layout">
|
<div class="homepage-wrapper">
|
||||||
<aside class="sidebar">
|
<nav class="auth-nav">
|
||||||
<div class="logo">👤 Special Source</div>
|
<div class="nav-left">
|
||||||
<nav class="menu">
|
<span class="status-dot" :class="{ 'secure-mode': isLoggedIn }"></span>
|
||||||
<a href="#" class="active">🏠 홈/메인</a>
|
<span class="brand">SPECIALSOURCE.SYSTEM</span>
|
||||||
<a href="#">📊 서비스 현황</a>
|
</div>
|
||||||
<a href="#">⚙️ 시스템 설정</a>
|
|
||||||
<button @click="handleLogout" class="btn-logout">🔓 로그아웃</button>
|
<div class="nav-menu">
|
||||||
|
<button
|
||||||
|
v-for="item in menuItems"
|
||||||
|
:key="item.id"
|
||||||
|
@click="changeMenu(item.id)"
|
||||||
|
:class="['menu-btn', { active: activeMenu === item.id }]"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-right">
|
||||||
|
<div v-if="!isLoggedIn" class="auth-group">
|
||||||
|
<button @click="changeMenu('login')" :class="['nav-item', { 'active-auth': activeMenu === 'login' }]">LOGIN</button>
|
||||||
|
<button @click="handleRegister" class="nav-item btn-reg">SIGN UP</button>
|
||||||
|
</div>
|
||||||
|
<div v-else class="auth-group">
|
||||||
|
<span class="user-info">ACCESS GRANTED: ADMIN</span>
|
||||||
|
<button @click="handleLogout" class="nav-item btn-logout">LOGOUT</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</aside>
|
|
||||||
|
|
||||||
<div class="main-container">
|
<main class="content-area">
|
||||||
<header class="navbar">
|
<transition name="fade" mode="out-in">
|
||||||
<h2>Flexible UI Dashboard</h2>
|
|
||||||
<div class="user-info">접속계정: <strong>admin</strong></div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="content">
|
<div v-if="activeMenu === 'main'" id="videos-container" key="main">
|
||||||
<div class="card-grid">
|
<div
|
||||||
<div class="card status">🟢 NAS Server Running (Port: 18081)</div>
|
v-for="(video, index) in videos"
|
||||||
<div class="card">
|
:key="video.id.videoId"
|
||||||
<h3>Vite + Vue 3</h3>
|
class="video-card"
|
||||||
<p>초고속 HMR 빌드 엔진 탑재 완료</p>
|
:class="{ 'new-item': index === 0 }"
|
||||||
</div>
|
@click="openVideo(video.id.videoId)"
|
||||||
<div class="card">
|
>
|
||||||
<h3>JWT Authentication</h3>
|
<iframe
|
||||||
<p>보안 통신 필터 및 CSRF 해제 상태</p>
|
:src="`https://www.youtube-nocookie.com/embed/${video.id.videoId}`"
|
||||||
|
frameborder="0"
|
||||||
|
allowfullscreen
|
||||||
|
></iframe>
|
||||||
|
<h5 class="video-title">{{ video.snippet.title }}</h5>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="activeMenu === 'login'" class="sub-page login-page" key="login">
|
||||||
|
<div class="login-terminal-frame">
|
||||||
|
<h2 class="login-gate-title">> SECURE_AUTHENTICATION_GATEWAY.EXE</h2>
|
||||||
|
<p class="login-gate-desc">WARNING: UNAUTHORIZED ACCESS IS STRICTLY PROHIBITED BY COMPLIANCE LAW.</p>
|
||||||
|
|
||||||
|
<div class="login-form-form">
|
||||||
|
<div class="login-input-group">
|
||||||
|
<label class="login-label">ACCESS ID_</label>
|
||||||
|
<input
|
||||||
|
v-model="loginId"
|
||||||
|
type="text"
|
||||||
|
class="login-input"
|
||||||
|
placeholder="ENTER ACCESS ID"
|
||||||
|
@keyup.enter="handleLoginSubmit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="login-input-group">
|
||||||
|
<label class="login-label">ACCESS KEY_</label>
|
||||||
|
<input
|
||||||
|
v-model="loginPw"
|
||||||
|
type="password"
|
||||||
|
class="login-input"
|
||||||
|
placeholder="ENTER ENCRYPTION KEY"
|
||||||
|
@keyup.enter="handleLoginSubmit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button @click="handleLoginSubmit" class="login-submit-btn">
|
||||||
|
[ INITIALIZE DECRYPT & ACCESS ]
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="activeMenu === 'project'" class="sub-page project-page" key="project">
|
||||||
|
<h2 class="page-title">> EXECUTING PROJECTS_LOG.EXE</h2>
|
||||||
|
<div class="project-grid">
|
||||||
|
<div class="project-item" v-for="i in 3" :key="i">
|
||||||
|
<div class="item-header">PROJ_00{{i}}</div>
|
||||||
|
<p>스페셜소스 자동 배포 시스템 고도화 프로젝트 진행 중...</p>
|
||||||
|
<div class="status">STATUS: COMPLETED</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="activeMenu === 'about'" class="sub-page about-page" key="about">
|
||||||
|
<h2 class="page-title">> ACCESSING CORE_IDENTITY.DAT</h2>
|
||||||
|
<p class="about-text">
|
||||||
|
스페셜소스는 2021년 설립된 기술 중심의 컴퍼니입니다.<br>
|
||||||
|
우리는 인프라 자동화와 효율적인 배포 파이프라인을 구축하여<br>
|
||||||
|
개발자가 비즈니스 로직에만 집중할 수 있는 환경을 만듭니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="activeMenu === 'contact'" class="sub-page contact-page" key="contact">
|
||||||
|
<h2 class="page-title">> INITIALIZING ENCRYPTED_COMM.INK</h2>
|
||||||
|
<div class="contact-form">
|
||||||
|
<p>EMAIL: specialsource.company@gmail.com</p>
|
||||||
|
<p>LOCATION: SEOUL, SOUTH KOREA</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<div class="crt-monitor-frame">
|
||||||
|
<div class="monitor-header">
|
||||||
|
<span class="monitor-title">📟 SECURE TERMINAL CONSOLE V3.2 [ROOT/{{ activeMenu.toUpperCase() }}]</span>
|
||||||
|
<span class="monitor-status">ACTIVE</span>
|
||||||
|
</div>
|
||||||
|
<div class="crt-screen-overlay">
|
||||||
|
<div ref="terminalRef" class="terminal-box"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useRouter } from 'vue-router'
|
import { ref, onMounted, computed } from 'vue';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
const router = useRouter()
|
const videos = ref([]);
|
||||||
|
const terminalRef = ref(null);
|
||||||
|
const termInstance = ref(null);
|
||||||
|
|
||||||
|
// 로그인 폼 양방향 바인딩 변수
|
||||||
|
const loginId = ref('');
|
||||||
|
const loginPw = ref('');
|
||||||
|
|
||||||
|
// 메뉴 및 인증 토큰 반응형 변수화
|
||||||
|
const activeMenu = ref('main');
|
||||||
|
const authToken = ref(localStorage.getItem('token'));
|
||||||
|
|
||||||
|
const menuItems = [
|
||||||
|
{ id: 'main', name: 'HOME' },
|
||||||
|
{ id: 'project', name: 'PROJECT' },
|
||||||
|
{ id: 'about', name: 'ABOUT' },
|
||||||
|
{ id: 'contact', name: 'CONTACT' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 실시간 로그인 여부 체크
|
||||||
|
const isLoggedIn = computed(() => !!authToken.value);
|
||||||
|
|
||||||
|
const changeMenu = (id) => {
|
||||||
|
activeMenu.value = id;
|
||||||
|
if (termInstance.value) {
|
||||||
|
termInstance.value.echo(`\n[[b;green;]>] NAVIGATING TO /${id.toUpperCase()}... SUCCESS.`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 📺 유튜브 API 세팅 (8개 출력)
|
||||||
|
const apiKey = 'AIzaSyD51LHwqoY8spjq6rsY_RlhBXzb96j7D6o';
|
||||||
|
const channelId = 'UC8L92ju0V88s6TcmLPb8Bkg';
|
||||||
|
const maxResults = 8;
|
||||||
|
const apiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${channelId}&maxResults=${maxResults}&order=date&type=video&key=${apiKey}`;
|
||||||
|
|
||||||
|
const fetchVideos = async () => {
|
||||||
|
try {
|
||||||
|
const res = await axios.get(apiUrl);
|
||||||
|
videos.value = res.data.items || [];
|
||||||
|
} catch (err) { console.error("유튜브 로드 실패:", err); }
|
||||||
|
};
|
||||||
|
|
||||||
|
const openVideo = (id) => window.open(`https://www.youtube.com/watch?v=${id}`);
|
||||||
|
const handleRegister = () => alert("회원가입은 현재 관리자 승인제로 운영됩니다.");
|
||||||
|
|
||||||
|
// 로그아웃 로직 (새로고침 없이 실시간 상태 갱신)
|
||||||
const handleLogout = () => {
|
const handleLogout = () => {
|
||||||
localStorage.removeItem('token')
|
localStorage.removeItem('token');
|
||||||
router.push('/login')
|
authToken.value = null;
|
||||||
}
|
activeMenu.value = 'main';
|
||||||
|
if (termInstance.value) {
|
||||||
|
termInstance.value.echo(`\n[[b;red;][ALERT]] SESSION TERMINATED. USER LOGGED OUT.`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 🔥 [핵심 기능] 보안 로그인 처리 및 터미널 동시 출력 로직
|
||||||
|
const handleLoginSubmit = async () => {
|
||||||
|
if (!loginId.value || !loginPw.value) {
|
||||||
|
alert("아이디와 비밀번호를 모두 입력해 주세요.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (termInstance.value) {
|
||||||
|
termInstance.value.echo(`\n[SYS] INITIALIZING SECURITY GATEWAY CONNECTION...`);
|
||||||
|
termInstance.value.echo(`[SYS] TRANSMITTING CREDENTIALS [USER: ${loginId.value}]`);
|
||||||
|
termInstance.value.echo(`[SYS] VALIDATING AGAINST CENTRAL POSTGRES_DB CORE...`);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 백엔드 포트인 18080 서버로 인증 요청을 전송합니다.
|
||||||
|
const response = await axios.post('http://192.168.0.215:18080/api/auth/login', {
|
||||||
|
username: loginId.value,
|
||||||
|
password: loginPw.value
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.data && response.data.token) {
|
||||||
|
// 1. 토큰 저장 및 반응형 상태 동기화
|
||||||
|
localStorage.setItem('token', response.data.token);
|
||||||
|
authToken.value = response.data.token;
|
||||||
|
|
||||||
|
// 2. 터미널에 성공 스크립트 출력
|
||||||
|
if (termInstance.value) {
|
||||||
|
termInstance.value.echo(`[[b;green;][SUCCESS]] ACCESS GRANTED. CREDENTIALS VERIFIED.`);
|
||||||
|
termInstance.value.echo(`[[b;green;][SYS]] WELCOME BACK, CENTRAL ADMIN AUTHORIZED.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 폼 초기화 및 홈화면(유튜브)으로 화면 즉시 복귀
|
||||||
|
loginId.value = '';
|
||||||
|
loginPw.value = '';
|
||||||
|
activeMenu.value = 'main';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("로그인 실패:", error);
|
||||||
|
// 실패 시 터미널 경고음 효과 및 붉은색 에러 로그 출력
|
||||||
|
if (termInstance.value) {
|
||||||
|
termInstance.value.echo(`[[b;red;][CRITICAL ERROR]] ACCESS DENIED! INVALID ACCESS KEY.`);
|
||||||
|
termInstance.value.echo(`[[b;red;][WARN]] IP LOGGED. UNAUTHORIZED ATTEMPT REGISTERED.`);
|
||||||
|
}
|
||||||
|
alert("인증에 실패했습니다. 액세스 키를 확인하세요.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchVideos();
|
||||||
|
|
||||||
|
const globaljQuery = window.$;
|
||||||
|
if (globaljQuery && terminalRef.value) {
|
||||||
|
termInstance.value = globaljQuery(terminalRef.value).terminal({
|
||||||
|
'hello': function () { this.echo('Hello, Welcome to Specialsource.company'); },
|
||||||
|
'help': function () {
|
||||||
|
this.echo(`- hello : Say hello\n- specialsource : Core info\n- email : Contact\n- clear : Clear console`);
|
||||||
|
},
|
||||||
|
'specialsource': function () { this.echo('SPECIALSOURCE Established 2021.01.'); },
|
||||||
|
'email': function () { this.echo('specialsource.company@gmail.com'); },
|
||||||
|
}, {
|
||||||
|
greetings: `[SYSTEM V3.2] INTERFACE ONLINE. TYPE 'help' FOR COMMANDS.`,
|
||||||
|
prompt: 'admin@specialsource:~$ '
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 📐 Flexbox & Grid 기반 플렉서블 레이아웃 */
|
.homepage-wrapper {
|
||||||
.app-layout { display: flex; height: 100vh; width: 100vw; overflow: hidden; font-family: sans-serif; }
|
background-color: #050505;
|
||||||
.sidebar { width: 240px; background-color: #1e293b; color: white; display: flex; flex-direction: column; padding: 20px; transition: all 0.3s; }
|
color: #00ff00;
|
||||||
.logo { font-size: 20px; font-weight: bold; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #334155; }
|
min-height: 100vh;
|
||||||
.menu { display: flex; flex-direction: column; gap: 10px; height: 100%; }
|
display: flex;
|
||||||
.menu a { color: #94a3b8; text-decoration: none; padding: 12px; border-radius: 6px; transition: 0.2s; }
|
flex-direction: column;
|
||||||
.menu a:hover, .menu a.active { color: white; background: #334155; }
|
}
|
||||||
.btn-logout { margin-top: auto; padding: 12px; background: #ef4444; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
|
|
||||||
|
|
||||||
.main-container { flex: 1; display: flex; flex-direction: column; background-color: #f1f5f9; overflow: hidden; }
|
/* --- GNB --- */
|
||||||
.navbar { height: 60px; background: white; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; border-bottom: 1px solid #e2e8f0; }
|
.auth-nav {
|
||||||
.content { flex: 1; padding: 30px; overflow-y: auto; }
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px 40px;
|
||||||
|
background: #000;
|
||||||
|
border-bottom: 1px solid rgba(0, 255, 0, 0.2);
|
||||||
|
}
|
||||||
|
.nav-menu { display: flex; gap: 20px; }
|
||||||
|
.menu-btn {
|
||||||
|
background: none; border: none; color: #008800;
|
||||||
|
font-family: monospace; font-size: 16px; cursor: pointer;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
.menu-btn:hover, .menu-btn.active { color: #00ff00; text-shadow: 0 0 10px #00ff00; }
|
||||||
|
|
||||||
/* 반응형 카드 그리드 */
|
.auth-group { display: flex; align-items: center; }
|
||||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
|
|
||||||
.card { background: white; padding: 25px; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
|
/* 로그인/회원가입 버튼 테마 깔맞춤 고정 */
|
||||||
.card.status { grid-column: 1 / -1; background: #bbf7d0; color: #166534; font-weight: bold; }
|
.nav-item {
|
||||||
|
color: #00ff00 !important;
|
||||||
|
text-decoration: none;
|
||||||
|
background: none;
|
||||||
|
border: 1px solid #00ff00 !important;
|
||||||
|
padding: 6px 18px;
|
||||||
|
margin-left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
.nav-item:hover, .nav-item.active-auth {
|
||||||
|
background: rgba(0, 255, 0, 0.2) !important;
|
||||||
|
color: #00ff00 !important;
|
||||||
|
box-shadow: 0 0 10px #00ff00;
|
||||||
|
}
|
||||||
|
.user-info { color: #008800 !important; font-size: 12px; margin-right: 15px; font-family: monospace; letter-spacing: 1px;}
|
||||||
|
.status-dot { width: 8px; height: 8px; background: #ff3b3b; border-radius: 50%; box-shadow: 0 0 8px #ff3b3b; transition: 0.5s; }
|
||||||
|
.status-dot.secure-mode { background: #00ff00; box-shadow: 0 0 8px #00ff00; }
|
||||||
|
|
||||||
|
/* --- 컨텐츠 영역 --- */
|
||||||
|
.content-area {
|
||||||
|
flex: 1; padding: 20px; min-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.sub-page { max-width: 1000px; margin: 0 auto; padding-top: 15px; }
|
||||||
|
.page-title { font-family: monospace; border-bottom: 1px solid #113311; padding-bottom: 10px; margin-bottom: 20px; color: #00ff00;}
|
||||||
|
|
||||||
|
/* 📺 유튜브 그리드 레이아웃 (4열 8개 무화) */
|
||||||
|
#videos-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
max-width: 1300px;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.video-card {
|
||||||
|
width: 100%;
|
||||||
|
background: #000;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #113311;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
.video-card:hover { border-color: #00ff00; box-shadow: 0 0 10px rgba(0, 255, 0, 0.3); }
|
||||||
|
.video-title { color: #00aa00; margin-top: 10px; font-size: 14px; height: 40px; overflow: hidden; font-family: sans-serif; }
|
||||||
|
iframe { width: 100%; height: 180px; border-radius: 4px; }
|
||||||
|
|
||||||
|
.new-item::before {
|
||||||
|
content: 'NEW'; position: absolute; top: -5px; left: -5px;
|
||||||
|
background: #00ff00; color: #000; font-size: 10px; font-weight: bold;
|
||||||
|
padding: 2px 5px; box-shadow: 0 0 5px #00ff00; z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 🔐 [신규 추가] 컨텐츠 내장형 해커 로그인 박스 디자인 스타일 양식 */
|
||||||
|
.login-terminal-frame {
|
||||||
|
max-width: 550px; margin: 40px auto;
|
||||||
|
border: 1px dashed #00ff00; padding: 35px;
|
||||||
|
background: #020a02; box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
}
|
||||||
|
.login-gate-title { color: #00ff00; font-size: 20px; margin-bottom: 10px; font-weight: bold;}
|
||||||
|
.login-gate-desc { color: #008800; font-size: 12px; margin-bottom: 30px; line-height: 1.4; }
|
||||||
|
.login-form-form { display: flex; flex-direction: column; gap: 20px; }
|
||||||
|
.login-input-group { display: flex; align-items: center; border-bottom: 1px solid #005500; padding-bottom: 5px; }
|
||||||
|
.login-label { width: 120px; color: #00ff00; font-weight: bold; font-size: 14px; }
|
||||||
|
.login-input {
|
||||||
|
flex: 1; background: none; border: none; color: #00ff00;
|
||||||
|
font-family: 'Courier New', Courier, monospace; font-size: 15px; outline: none;
|
||||||
|
}
|
||||||
|
.login-input::placeholder { color: #004400; }
|
||||||
|
.login-submit-btn {
|
||||||
|
margin-top: 15px; background: none; border: 1px solid #00ff00;
|
||||||
|
color: #00ff00; padding: 12px; font-family: 'Courier New', Courier, monospace;
|
||||||
|
font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.login-submit-btn:hover { background: #00ff00; color: #000; box-shadow: 0 0 15px #00ff00; }
|
||||||
|
|
||||||
|
/* 프로젝트 리스트 */
|
||||||
|
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
||||||
|
.project-item { border: 1px solid #113311; padding: 15px; background: #080808; font-family: monospace;}
|
||||||
|
.item-header { font-weight: bold; margin-bottom: 10px; color: #00ff00; }
|
||||||
|
.about-text { font-family: monospace; line-height: 2; color: #00cc00;}
|
||||||
|
.contact-form { font-family: monospace; line-height: 2; color: #00cc00;}
|
||||||
|
|
||||||
|
/* 애니메이션 트랜지션 */
|
||||||
|
.fade-enter-active, .fade-leave-active { transition: opacity 0.25s ease; }
|
||||||
|
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||||
|
|
||||||
|
/* --- 하단 CRT 터미널 영역 --- */
|
||||||
|
.crt-monitor-frame {
|
||||||
|
height: 300px; margin: 10px 40px 30px;
|
||||||
|
border: 2px solid #1a1a1a; background: #0a0a0a; overflow: hidden;
|
||||||
|
}
|
||||||
|
.monitor-header { background: #151515; padding: 5px 15px; color: #555; display: flex; justify-content: space-between; font-family: monospace; font-size: 12px;}
|
||||||
|
.monitor-status { color: #00aa00; animation: blink 2s infinite; }
|
||||||
|
.crt-screen-overlay { position: relative; height: calc(100% - 30px); background: #020802; }
|
||||||
|
.crt-screen-overlay::before {
|
||||||
|
content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
|
||||||
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
||||||
|
z-index: 2; background-size: 100% 4px, 6px 100%; pointer-events: none;
|
||||||
|
}
|
||||||
|
.terminal-box { width: 100%; height: 100%; padding: 10px; }
|
||||||
|
|
||||||
|
:deep(.terminal), :deep(.terminal span) {
|
||||||
|
--color: #33ff33 !important; font-family: monospace !important;
|
||||||
|
text-shadow: 0 0 5px rgba(51, 255, 51, 0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 📱 반응형 분기점 */
|
||||||
|
@media screen and (max-width: 1100px) {
|
||||||
|
#videos-container { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.project-grid { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 650px) {
|
||||||
|
#videos-container { grid-template-columns: 1fr; }
|
||||||
|
.project-grid { grid-template-columns: 1fr; }
|
||||||
|
.auth-nav { flex-direction: column; gap: 12px; padding: 15px 20px; }
|
||||||
|
}
|
||||||
|
@keyframes blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user