mirror of
https://github.com/NotoChen/Jetbrains-Help.git
synced 2025-11-01 01:38:31 +08:00
style: ui 重构
This commit is contained in:
藏柏
parent
b0d4b6d8af
commit
b6aaa1c398
|
|
@ -1,535 +1,160 @@
|
||||||
.form {
|
/* Custom Icon Styles - Keep these for JetBrains product icons */
|
||||||
background-color: #15172b;
|
|
||||||
border-radius: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 500px;
|
|
||||||
padding: 20px;
|
|
||||||
width: 320px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #eee;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 36px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: #eee;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-container {
|
|
||||||
height: 50px;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ic1 {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ic2 {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
background-color: #303245;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: #eee;
|
|
||||||
font-size: 18px;
|
|
||||||
height: 100%;
|
|
||||||
outline: 0;
|
|
||||||
padding: 4px 20px 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cut {
|
|
||||||
background-color: #15172b;
|
|
||||||
border-radius: 10px;
|
|
||||||
height: 20px;
|
|
||||||
left: 20px;
|
|
||||||
position: absolute;
|
|
||||||
top: -20px;
|
|
||||||
transform: translateY(0);
|
|
||||||
transition: transform 200ms;
|
|
||||||
width: 76px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cut-short {
|
|
||||||
width: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input:focus ~ .cut,
|
|
||||||
.input:not(:placeholder-shown) ~ .cut {
|
|
||||||
transform: translateY(8px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder {
|
|
||||||
color: #65657b;
|
|
||||||
font-family: sans-serif;
|
|
||||||
left: 20px;
|
|
||||||
line-height: 14px;
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
transform-origin: 0 50%;
|
|
||||||
transition: transform 200ms, color 200ms;
|
|
||||||
top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input:focus ~ .placeholder,
|
|
||||||
.input:not(:placeholder-shown) ~ .placeholder {
|
|
||||||
transform: translateY(-30px) translateX(10px) scale(0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input:not(:placeholder-shown) ~ .placeholder {
|
|
||||||
color: #808097;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input:focus ~ .placeholder {
|
|
||||||
color: #dc2f55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit {
|
|
||||||
background-color: #08d;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: #eee;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 18px;
|
|
||||||
height: 50px;
|
|
||||||
margin-top: 38px;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit:active {
|
|
||||||
background-color: #06b;
|
|
||||||
}
|
|
||||||
:root {
|
|
||||||
--text-grey: #9e9e9e;
|
|
||||||
--text-main: rgba(0, 0, 0, 0.87);
|
|
||||||
--spacing: 4px;
|
|
||||||
--size: 64px;
|
|
||||||
--radius: 1.5rem;
|
|
||||||
--accent: #5380f7;
|
|
||||||
--text-sm: 0.875rem;
|
|
||||||
--main-bg: #fff;
|
|
||||||
--card-bg: #fff;
|
|
||||||
--hover-color: #eee;
|
|
||||||
--border-color: rgba(0, 0, 0, 0.05);
|
|
||||||
--grey-400: rgba(0, 0, 0, 0.04);
|
|
||||||
--grey-600: rgba(0, 0, 0, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--main-bg: rgb(0, 0, 0);
|
|
||||||
--card-bg: rgb(31, 34, 38);
|
|
||||||
--text-main: #d9d9d9;
|
|
||||||
--text-grey: #6e767d;
|
|
||||||
--accent: #1d9bf0;
|
|
||||||
--hover-color: rgba(255, 255, 255, 0.07);
|
|
||||||
--border-color: #4b4648;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
word-wrap: break-word;
|
|
||||||
font-kerning: normal;
|
|
||||||
font-family: 'Gotham SSm A', 'Gotham SSm B', 'Arial Unicode MS', Helvetica, sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
background-color: var(--main-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
* ul, * ol {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
*[role='button'], button {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-primary {
|
|
||||||
color: var(--text-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.mt-0 {
|
/* JetBrains Product Icons */
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.radius-1 {
|
|
||||||
border-radius: var(--radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-6 {
|
|
||||||
padding-left: calc(var(--spacing) * 6);
|
|
||||||
padding-right: calc(var(--spacing) * 6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-6 {
|
|
||||||
padding-left: calc(var(--spacing)* 6);
|
|
||||||
padding-right: calc(var(--spacing)* 6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-10 {
|
|
||||||
padding-top: calc(var(--spacing) * 10);
|
|
||||||
padding-bottom: calc(var(--spacing) * 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pd-6 {
|
|
||||||
padding: calc(var(--spacing) * 6);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.pt-1 {
|
|
||||||
padding-top: var(--spacing);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-0 {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflow-hidden {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-between {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-center {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.items-center {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shrink-0 {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-grey {
|
|
||||||
color: var(--text-grey);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-sm {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.truncate {
|
|
||||||
/* display: -webkit-box; */
|
|
||||||
/* -webkit-box-orient: vertical; */
|
|
||||||
/* -webkit-line-clamp: var(--line, 3); */
|
|
||||||
/* overflow: hidden; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.truncate-1 {
|
|
||||||
--line: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflow-ellipsis {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.z-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-gap: var(--gutter, 1rem);
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(min(var(--space, 10rem), 100%), 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.card {
|
|
||||||
box-shadow: rgb(0 0 0 / 30%) 0 8px 40px -12px;
|
|
||||||
border-radius: 1.5rem;
|
|
||||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
||||||
width: 90%;
|
|
||||||
position: relative;
|
|
||||||
overflow: visible;
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover .mask {
|
|
||||||
bottom: -1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover .mask-c-1 {
|
|
||||||
bottom: -2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
padding-top: calc(var(--spacing) * 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container p {
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container p::after {
|
|
||||||
content: attr(data-content);
|
|
||||||
position: absolute;
|
|
||||||
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
||||||
color: transparent;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container p:hover {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container p:hover::after {
|
|
||||||
color: var(--text-main);
|
|
||||||
background-color: var(--hover-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle li {
|
|
||||||
z-index: 99;
|
|
||||||
position: relative;
|
|
||||||
background: transparent;
|
|
||||||
padding: 0 20px;
|
|
||||||
color: var(--text-main);
|
|
||||||
transition: background-color 250ms ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle li:hover {
|
|
||||||
background-color: var(--hover-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle li.active a {
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle li:first-child {
|
|
||||||
border-top-left-radius: var(--text-sm);
|
|
||||||
border-top-right-radius: var(--text-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle li:last-child {
|
|
||||||
border-bottom-left-radius: var(--text-sm);
|
|
||||||
border-bottom-right-radius: var(--text-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle li:last-child a {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle li a {
|
|
||||||
display: block;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
padding: 16px 0;
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
background-image: url('../images/icons.svg?t=4567');
|
background-image: url('../images/icons.svg?t=4567');
|
||||||
background-size: 64px;
|
background-size: 64px;
|
||||||
background-position-x: 0;
|
background-position-x: 0;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.icon-ii {
|
.icon-ii {
|
||||||
background-image: url('../images/intellij-idea.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/intellij-idea/intellij-idea.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-ps {
|
.icon-ps {
|
||||||
background-image: url('../images/phpstorm.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/phpstorm/phpstorm.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-ac {
|
.icon-ac {
|
||||||
background-position-y: -192px;
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/appcode/appcode.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-db {
|
.icon-db {
|
||||||
background-image: url('../images/datagrip.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/datagrip/datagrip.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-rm {
|
.icon-rm {
|
||||||
background-image: url('../images/rubymine.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/rubymine/rubymine.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-ws {
|
.icon-ws {
|
||||||
background-image: url('../images/webstorm.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/webstorm/webstorm.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-rd {
|
.icon-rd {
|
||||||
background-image: url('../images/rider.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/rider/rider.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-cl {
|
.icon-cl {
|
||||||
background-image: url('../images/clion.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/clion/clion.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-pc {
|
.icon-pc {
|
||||||
background-image: url('../images/pycharm.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/pycharm/pycharm.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-go {
|
.icon-go {
|
||||||
background-image: url('../images/goland.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/goland/goland.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-ds {
|
.icon-ds {
|
||||||
background-image: url('../images/dataspell.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/dataspell/dataspell.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-dc {
|
.icon-dc {
|
||||||
background-image: url('../images/dotcover.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/dotcover/dotcover.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-dpn {
|
.icon-dpn {
|
||||||
background-image: url('../images/dottrace.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/dottrace/dottrace.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-dm {
|
.icon-dm {
|
||||||
background-image: url('../images/dotmemory.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/dotmemory/dotmemory.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-rr {
|
.icon-rr {
|
||||||
background-image: url('../images/rustrover.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/rustrover/rustrover.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-qa {
|
.icon-qa {
|
||||||
background-image: url('../images/aqua.svg?v=1');
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/aqua/aqua.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.mask {
|
.icon-al {
|
||||||
transition: 0.2s;
|
background-image: url('https://resources.jetbrains.com/storage/logos/web/toolbox/toolbox.svg');
|
||||||
position: absolute;
|
|
||||||
z-index: -1;
|
|
||||||
width: 88%;
|
|
||||||
height: 100%;
|
|
||||||
bottom: 0;
|
|
||||||
border-radius: 1.5rem;
|
|
||||||
background-color: var(--grey-600);
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mask-c-1 {
|
/* Custom animations and transitions for enhanced UX */
|
||||||
bottom: 0;
|
@keyframes fadeIn {
|
||||||
width: 72%;
|
from { opacity: 0; transform: translateY(20px); }
|
||||||
background-color: var(--grey-400);
|
to { opacity: 1; transform: translateY(0); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-wrapper {
|
@keyframes slideIn {
|
||||||
position: relative;
|
from { transform: translateX(-100%); }
|
||||||
width: var(--size);
|
to { transform: translateX(0); }
|
||||||
height: var(--size);
|
|
||||||
font-size: 1.25rem;
|
|
||||||
user-select: none;
|
|
||||||
transform: translateY(50%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-wrapper img, .avatar-wrapper .icon {
|
.animate-fade-in {
|
||||||
|
animation: fadeIn 0.5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-slide-in {
|
||||||
|
animation: slideIn 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Grid Layout */
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
color: transparent;
|
|
||||||
object-fit: cover;
|
|
||||||
text-align: center;
|
|
||||||
text-indent: 10000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
header.tip a {
|
|
||||||
color: var(--accent);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
header.tip p {
|
|
||||||
word-break: break-word;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
main hr {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: var(--border-color);
|
|
||||||
height: 1px;
|
|
||||||
border: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
/* Responsive breakpoints for different card sizes */
|
||||||
--_size: 40px;
|
@media (max-width: 640px) {
|
||||||
padding-top: var(--_size);
|
.grid-container {
|
||||||
width: 96%;
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||||
margin: calc(var(--spacing) * 10) auto 0;
|
gap: 1rem;
|
||||||
padding-bottom: var(--_size);
|
}
|
||||||
border-top: 1px solid var(--border-color);
|
|
||||||
-moz-box-align: center;
|
|
||||||
-webkit-box-pack: justify;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer .lt-panel p:nth-of-type(1) {
|
@media (min-width: 641px) and (max-width: 1024px) {
|
||||||
color: inherit;
|
.grid-container {
|
||||||
}
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||||
header.tip {
|
gap: 1.25rem;
|
||||||
top: 2.3%;
|
}
|
||||||
background-color: var(--card-bg);
|
|
||||||
color: var(--text-main);
|
|
||||||
z-index: 99;
|
|
||||||
width: 80%;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: rgb(0 0 0 / 30%) 0 8px 40px -12px;
|
|
||||||
transition: transform 250ms ease, box-shadow 250ms ease;
|
|
||||||
}
|
|
||||||
.sticky {
|
|
||||||
position: sticky;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1025px) {
|
||||||
|
.grid-container {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.parent {
|
/* Custom scrollbar for better aesthetics */
|
||||||
position: relative;
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
}
|
}
|
||||||
.search {
|
|
||||||
width: 300px;
|
::-webkit-scrollbar-track {
|
||||||
height: 40px;
|
background: #f1f1f1;
|
||||||
border-radius: 18px;
|
}
|
||||||
outline: none;
|
|
||||||
/*border: 1px solid #ccc;*/
|
::-webkit-scrollbar-thumb {
|
||||||
padding-left: 20px;
|
background: #c1c1c1;
|
||||||
/*position: absolute;*/
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #a8a8a8;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #2d2d2d;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #777;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -14,7 +14,14 @@ $(document).ready(function() {
|
||||||
expiryDate: $('#expiryDate').val()
|
expiryDate: $('#expiryDate').val()
|
||||||
};
|
};
|
||||||
localStorage.setItem('licenseInfo', JSON.stringify(licenseInfo));
|
localStorage.setItem('licenseInfo', JSON.stringify(licenseInfo));
|
||||||
$('#mask, #form').hide();
|
|
||||||
|
// Add fade out animation
|
||||||
|
$('#form').addClass('opacity-0 scale-95');
|
||||||
|
$('#mask').addClass('opacity-0');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
$('#mask, #form').hide().removeClass('opacity-0 scale-95');
|
||||||
|
}, 300);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Function to handle search input
|
// Function to handle search input
|
||||||
|
|
@ -22,15 +29,52 @@ $(document).ready(function() {
|
||||||
$("#product-list").load('/search?search=' + e.target.value);
|
$("#product-list").load('/search?search=' + e.target.value);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Function to update preview
|
||||||
|
window.updatePreview = function() {
|
||||||
|
const licenseeName = $('#licenseeName').val() || '光云';
|
||||||
|
const assigneeName = $('#assigneeName').val() || '藏柏';
|
||||||
|
const expiryDate = $('#expiryDate').val() || '2111/11/11';
|
||||||
|
|
||||||
|
$('#previewLicenseName').text(licenseeName);
|
||||||
|
$('#previewAssigneeName').text(assigneeName);
|
||||||
|
$('#previewExpiryDate').text(expiryDate);
|
||||||
|
};
|
||||||
|
|
||||||
// Function to show license form
|
// Function to show license form
|
||||||
window.showLicenseForm = function () {
|
window.showLicenseForm = function () {
|
||||||
let licenseInfo = JSON.parse(localStorage.getItem('licenseInfo'));
|
let licenseInfo = JSON.parse(localStorage.getItem('licenseInfo'));
|
||||||
$('#licenseeName').val(licenseInfo?.licenseeName || '光云');
|
$('#licenseeName').val(licenseInfo?.licenseeName || '光云');
|
||||||
$('#assigneeName').val(licenseInfo?.assigneeName || '藏柏');
|
$('#assigneeName').val(licenseInfo?.assigneeName || '藏柏');
|
||||||
$('#expiryDate').val(licenseInfo?.expiryDate || '2111-11-11');
|
$('#expiryDate').val(licenseInfo?.expiryDate || '2111-11-11');
|
||||||
|
|
||||||
|
// Update preview with current values
|
||||||
|
updatePreview();
|
||||||
|
|
||||||
|
// Show with fade in animation
|
||||||
$('#mask, #form').show();
|
$('#mask, #form').show();
|
||||||
|
setTimeout(() => {
|
||||||
|
$('#form').removeClass('opacity-0 scale-95');
|
||||||
|
$('#mask').removeClass('opacity-0');
|
||||||
|
}, 10);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Function to close modal
|
||||||
|
window.closeModal = function() {
|
||||||
|
$('#form').addClass('opacity-0 scale-95');
|
||||||
|
$('#mask').addClass('opacity-0');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
$('#mask, #form').hide().removeClass('opacity-0 scale-95');
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Close modal when clicking on mask
|
||||||
|
$('#mask').on('click', function(e) {
|
||||||
|
if (e.target === this) {
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Function to show VM options
|
// Function to show VM options
|
||||||
window.showVmoptins = function () {
|
window.showVmoptins = function () {
|
||||||
var text = "-javaagent:/(Your Path)/ja-netfilter/ja-netfilter.jar\n" +
|
var text = "-javaagent:/(Your Path)/ja-netfilter/ja-netfilter.jar\n" +
|
||||||
|
|
|
||||||
|
|
@ -5,99 +5,277 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<title>Jetbrains-Help</title>
|
<title>Jetbrains-Help</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<link rel="stylesheet" type="text/css" href="/css/index.css">
|
<link rel="stylesheet" type="text/css" href="/css/index.css">
|
||||||
<link rel="icon" href="https://www.jetbrains.com/favicon.ico?r=1234">
|
<link rel="icon" href="https://www.jetbrains.com/favicon.ico?r=1234">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: 'media',
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
'jetbrains-blue': '#5380f7',
|
||||||
|
'jetbrains-dark-blue': '#1d9bf0',
|
||||||
|
'card-light': '#ffffff',
|
||||||
|
'card-dark': '#1f2226',
|
||||||
|
'bg-light': '#ffffff',
|
||||||
|
'bg-dark': '#000000',
|
||||||
|
'text-light': 'rgba(0, 0, 0, 0.87)',
|
||||||
|
'text-dark': '#d9d9d9',
|
||||||
|
'text-grey-light': '#9e9e9e',
|
||||||
|
'text-grey-dark': '#6e767d',
|
||||||
|
'border-light': 'rgba(0, 0, 0, 0.05)',
|
||||||
|
'border-dark': '#4b4648',
|
||||||
|
'hover-light': '#eeeeee',
|
||||||
|
'hover-dark': 'rgba(255, 255, 255, 0.07)'
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
'jetbrains': ['Gotham SSm A', 'Gotham SSm B', 'Arial Unicode MS', 'Helvetica', 'sans-serif']
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
'card': 'rgb(0 0 0 / 30%) 0 8px 40px -12px',
|
||||||
|
'card-hover': 'rgb(0 0 0 / 40%) 0 12px 50px -8px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="bg-bg-light dark:bg-bg-dark text-text-light dark:text-text-dark font-jetbrains antialiased min-h-screen">
|
||||||
<header class="tip sticky flex items-center py-6">
|
<!-- Header Section -->
|
||||||
<p>
|
<header class="sticky top-0 z-50 bg-card-light dark:bg-card-dark shadow-card rounded-2xl mx-auto mt-4 w-11/12 max-w-6xl">
|
||||||
🇨🇳 下载 <a href="ja-netfilter" title="Download jetbra first">ja-netfilter.zip</a> , 然后配置
|
<div class="flex flex-col lg:flex-row items-start lg:items-center justify-between p-6 gap-4">
|
||||||
你的JetBrains IDE(anything)'s <a onclick="showVmoptins()">IDE.vmoptions</a> 配置文件!<br>
|
<!-- Info Section -->
|
||||||
🇨🇳 当然你也可以 <a onclick="showLicenseForm()">重新定制激活授权</a> 用以自定义你的激活信息!</br>
|
<div class="flex-1 space-y-2">
|
||||||
<strong>🇨🇳 请注意,此页面仅由 <span
|
<div class="flex items-center gap-2 text-sm lg:text-base">
|
||||||
th:text="${defaults.getDefaultLicenseName()} + '/' + ${defaults.getDefaultAssigneeName()}"></span>
|
<span class="text-2xl">🇨🇳</span>
|
||||||
个人所有!</strong>
|
<span>下载
|
||||||
</p>
|
<a href="ja-netfilter"
|
||||||
<form class="parent">
|
title="Download jetbra first"
|
||||||
<input type="text" class="search" id="search" placeholder="搜索IDE或者插件">
|
class="text-jetbrains-blue dark:text-jetbrains-dark-blue hover:underline font-medium transition-colors">
|
||||||
</form>
|
ja-netfilter.zip (点击下载Jar)
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 text-sm lg:text-base">
|
||||||
|
<span class="text-2xl">🇨🇳</span>
|
||||||
|
<span>配置JetBrains IDE's
|
||||||
|
<a onclick="showVmoptins()"
|
||||||
|
class="text-jetbrains-blue dark:text-jetbrains-dark-blue hover:underline font-medium cursor-pointer transition-colors">
|
||||||
|
IDE.vmoptions (点击复制VM配置)
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 text-sm lg:text-base">
|
||||||
|
<span class="text-2xl">🇨🇳</span>
|
||||||
|
<span>选择合适的IDE or Plugin, 点击复制激活码即可, 激活预览如下 ↓</span>
|
||||||
|
</div>
|
||||||
|
<!-- License Preview -->
|
||||||
|
<div class="inline-block bg-gray-50 dark:bg-gray-800 rounded-lg px-4 py-2 mb-3 border border-gray-200 dark:border-gray-700">
|
||||||
|
<span class="text-sm text-text-light dark:text-text-dark">
|
||||||
|
授权给 <span id="previewLicenseName" th:text="${defaults.getDefaultLicenseName()}" class="font-medium">光云</span> / <span id="previewAssigneeName" th:text="${defaults.getDefaultAssigneeName()}" class="font-medium">藏柏</span>，有效期至 <span id="previewExpiryDate" th:text="${defaults.getDefaultExpiryDate()}" class="font-medium">2111/11/11</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2 text-sm lg:text-base">
|
||||||
|
<span class="text-2xl">🇨🇳</span>
|
||||||
|
<span>可以
|
||||||
|
<a onclick="showLicenseForm()"
|
||||||
|
class="text-jetbrains-blue dark:text-jetbrains-dark-blue hover:underline font-medium cursor-pointer transition-colors">
|
||||||
|
自定义激活信息 (点击修改)
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="flex items-center gap-2 text-sm lg:text-base font-semibold">-->
|
||||||
|
<!-- <span class="text-2xl">🇨🇳</span>-->
|
||||||
|
<!-- <span>请注意,此页面仅由-->
|
||||||
|
<!-- <span class="text-jetbrains-blue dark:text-jetbrains-dark-blue"-->
|
||||||
|
<!-- th:text="${defaults.getDefaultLicenseName()} + '/' + ${defaults.getDefaultAssigneeName()}">-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<!-- 个人所有!-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Search Section -->
|
||||||
|
<div class="w-full lg:w-auto lg:min-w-[400px] xl:min-w-[500px]">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
|
<svg class="h-5 w-5 text-text-grey-light dark:text-text-grey-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input type="text"
|
||||||
|
id="search"
|
||||||
|
placeholder="搜索IDE或者插件"
|
||||||
|
class="w-full pl-10 pr-4 py-3 bg-white dark:bg-gray-800 border border-border-light dark:border-border-dark rounded-xl text-text-light dark:text-text-dark placeholder-text-grey-light dark:placeholder-text-grey-dark focus:outline-none focus:ring-2 focus:ring-jetbrains-blue dark:focus:ring-jetbrains-dark-blue focus:border-transparent transition-all duration-200 shadow-sm hover:shadow-md">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main id="product-list" class="px-6 z-grid py-10" style="--space: 20rem; --gutter: 3.5rem">
|
<!-- Main Content -->
|
||||||
|
<main id="product-list" class="px-4 py-8">
|
||||||
<th:block th:fragment="product-list">
|
<th:block th:fragment="product-list">
|
||||||
|
<!-- Unified Products and Plugins Grid -->
|
||||||
|
<div class="grid-container">
|
||||||
|
<!-- Products (will be rendered first) -->
|
||||||
<th:block th:each="product:${products}">
|
<th:block th:each="product:${products}">
|
||||||
<article class="card" th:data-product="${product.getName()}"
|
<article class="group relative bg-card-light dark:bg-card-dark rounded-2xl shadow-card hover:shadow-card-hover transform hover:-translate-y-1 transition-all duration-300 overflow-hidden cursor-pointer"
|
||||||
th:data-product-codes="${product.getProductCode()}">
|
th:data-product="${product.getName()}"
|
||||||
<header>
|
th:data-product-codes="${product.getProductCode()}"
|
||||||
<div class="flex items-center justify-between px-6 pt-1 pb-0 bg-card radius-1">
|
onclick="copyLicense(this)"
|
||||||
<div class="avatar-wrapper flex items-center justify-center overflow-hidden shrink-0">
|
title="点击复制激活码">
|
||||||
<div class="icon" th:classappend="${product.getIconClass()}" role="img"></div>
|
|
||||||
|
<!-- Card Content -->
|
||||||
|
<div class="p-6 flex items-center h-32">
|
||||||
|
<!-- Icon -->
|
||||||
|
<div class="w-20 h-20 rounded-xl bg-white dark:bg-gray-800 shadow-sm flex items-center justify-center mr-6 flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
|
||||||
|
<div class="icon w-16 h-16 bg-contain bg-center bg-no-repeat" th:classappend="${product.getIconClass()}" role="img"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Product Name -->
|
||||||
|
<h3 class="text-base font-semibold text-text-light dark:text-text-dark leading-tight group-hover:opacity-30 transition-opacity duration-300 flex-grow"
|
||||||
|
th:title="${product.getName()}"
|
||||||
|
th:text="${product.getName()}">
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hover Overlay -->
|
||||||
|
<div class="absolute inset-0 bg-card-light dark:bg-card-dark rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-95 transition-opacity duration-300">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="w-12 h-12 mx-auto mb-3 text-jetbrains-blue dark:text-jetbrains-dark-blue">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-base font-medium text-jetbrains-blue dark:text-jetbrains-dark-blue">
|
||||||
|
点击复制激活码
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
<div class="pd-6 overflow-hidden bg-card container radius-1">
|
|
||||||
<h1 class="truncate truncate-1 color-primary mt-0 overflow-ellipsis" th:title="${product.getName()}"
|
|
||||||
th:text="${product.getName()}"></h1>
|
|
||||||
<p title="复制到剪贴板" class="truncate text-sm text-grey" onclick="copyLicense(this)"
|
|
||||||
data-content="复制到剪贴板">
|
|
||||||
*********************************************************************************************************************************************************
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mask"></div>
|
|
||||||
<div class="mask mask-c-1"></div>
|
<!-- Subtle Shadow -->
|
||||||
|
<div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-11/12 h-2 bg-gray-200 dark:bg-gray-600 rounded-2xl -z-10 opacity-30 group-hover:opacity-50 transition-opacity duration-300"></div>
|
||||||
</article>
|
</article>
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|
||||||
|
<!-- Plugins (will be rendered after products) -->
|
||||||
<th:block th:each="plugin:${plugins}">
|
<th:block th:each="plugin:${plugins}">
|
||||||
<article class="card" th:data-product="${plugin.getName()}"
|
<article class="group relative bg-card-light dark:bg-card-dark rounded-2xl shadow-card hover:shadow-card-hover transform hover:-translate-y-1 transition-all duration-300 overflow-hidden cursor-pointer"
|
||||||
th:data-product-codes="${plugin.getProductCode()}">
|
th:data-product="${plugin.getName()}"
|
||||||
<header>
|
th:data-product-codes="${plugin.getProductCode()}"
|
||||||
<div class="flex items-center justify-between px-6 pt-1 pb-0 bg-card radius-1">
|
onclick="copyLicense(this)"
|
||||||
<div class="avatar-wrapper flex items-center justify-center overflow-hidden shrink-0">
|
title="点击复制激活码">
|
||||||
<div class="icon" role="img"
|
|
||||||
th:style="'background-image: url(' + ${plugin.getIcon()} + ')'"></div>
|
<!-- Card Content -->
|
||||||
|
<div class="p-6 flex items-center h-32">
|
||||||
|
<!-- Icon -->
|
||||||
|
<div class="w-20 h-20 rounded-xl bg-white dark:bg-gray-800 shadow-sm flex items-center justify-center mr-6 flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
|
||||||
|
<div class="icon w-16 h-16 bg-cover bg-center bg-no-repeat rounded-lg"
|
||||||
|
role="img"
|
||||||
|
th:style="'background-image: url(' + ${plugin.getIcon()} + ')'">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr/>
|
|
||||||
</header>
|
<!-- Product Name -->
|
||||||
<div class="pd-6 overflow-hidden bg-card container radius-1">
|
<h3 class="text-base font-semibold text-text-light dark:text-text-dark leading-tight group-hover:opacity-30 transition-opacity duration-300 flex-grow"
|
||||||
<h1 class="truncate truncate-1 color-primary mt-0 overflow-ellipsis" th:title="${plugin.getName()}"
|
th:title="${plugin.getName()}"
|
||||||
th:text="${plugin.getName()}"></h1>
|
th:text="${plugin.getName()}">
|
||||||
<p title="复制到剪贴板" class="truncate text-sm text-grey" onclick="copyLicense(this)"
|
</h3>
|
||||||
data-content="复制到剪贴板">
|
|
||||||
*********************************************************************************************************************************************************
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mask"></div>
|
|
||||||
<div class="mask mask-c-1"></div>
|
<!-- Hover Overlay -->
|
||||||
|
<div class="absolute inset-0 bg-card-light dark:bg-card-dark rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-95 transition-opacity duration-300">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="w-12 h-12 mx-auto mb-3 text-jetbrains-blue dark:text-jetbrains-dark-blue">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-base font-medium text-jetbrains-blue dark:text-jetbrains-dark-blue">
|
||||||
|
点击复制激活码
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Subtle Shadow -->
|
||||||
|
<div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-11/12 h-2 bg-gray-200 dark:bg-gray-600 rounded-2xl -z-10 opacity-30 group-hover:opacity-50 transition-opacity duration-300"></div>
|
||||||
</article>
|
</article>
|
||||||
</th:block>
|
</th:block>
|
||||||
|
</div>
|
||||||
</th:block>
|
</th:block>
|
||||||
</main>
|
</main>
|
||||||
<div id="mask"
|
<!-- Modal Overlay -->
|
||||||
style="position:fixed;top:0;left:0;z-index:998;width:100%;height:100%;display:none;background-color:#000;opacity:0.5;overflow:hidden;"></div>
|
<div id="mask" class="fixed inset-0 bg-black bg-opacity-40 backdrop-blur-sm z-40 hidden opacity-0 transition-all duration-300"></div>
|
||||||
<div id="form" style="position:fixed;top:20%;left:40%;width:40%;height:500px;z-index:999;display:none;">
|
|
||||||
<div class="form">
|
<!-- License Form Modal -->
|
||||||
<div class="title">授权信息</div>
|
<div id="form" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 hidden opacity-0 scale-95 transition-all duration-300">
|
||||||
<div class="subtitle">欢迎你自定义</div>
|
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 w-80 shadow-lg border border-gray-200 dark:border-gray-700">
|
||||||
<div class="input-container ic1">
|
<!-- Close Button -->
|
||||||
<input id="licenseeName" class="input" type="text" placeholder=" "
|
<div class="flex justify-end mb-3">
|
||||||
th:value="${defaults.getDefaultLicenseName()}"/>
|
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200">
|
||||||
<div class="cut"></div>
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<label for="licenseeName" class="placeholder">许可证名称</label>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-container ic2">
|
|
||||||
<input id="assigneeName" class="input" type="text" placeholder=" "
|
<!-- Modal Header -->
|
||||||
th:value="${defaults.getDefaultAssigneeName()}"/>
|
<div class="text-center mb-6">
|
||||||
<div class="cut"></div>
|
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">授权信息定制</h2>
|
||||||
<label for="assigneeName" class="placeholder">许可人名称</label>
|
<p class="text-sm text-gray-500 dark:text-gray-400">自定义您的激活授权信息</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-container ic2">
|
|
||||||
<input id="expiryDate" class="input" type="text" placeholder=""
|
<!-- Form Fields -->
|
||||||
th:value="${defaults.getDefaultExpiryDate()}"/>
|
<div class="space-y-4">
|
||||||
<div class="cut cut-short"></div>
|
<!-- License Name Field -->
|
||||||
<label for="expiryDate" class="placeholder">过期时间</label>
|
<div class="space-y-1">
|
||||||
|
<label for="licenseeName" class="block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
许可证名称
|
||||||
|
</label>
|
||||||
|
<input id="licenseeName"
|
||||||
|
type="text"
|
||||||
|
th:value="${defaults.getDefaultLicenseName()}"
|
||||||
|
oninput="updatePreview()"
|
||||||
|
class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all duration-200">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Assignee Name Field -->
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label for="assigneeName" class="block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
许可人名称
|
||||||
|
</label>
|
||||||
|
<input id="assigneeName"
|
||||||
|
type="text"
|
||||||
|
th:value="${defaults.getDefaultAssigneeName()}"
|
||||||
|
oninput="updatePreview()"
|
||||||
|
class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all duration-200">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expiry Date Field -->
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label for="expiryDate" class="block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||||
|
过期时间
|
||||||
|
</label>
|
||||||
|
<input id="expiryDate"
|
||||||
|
type="text"
|
||||||
|
th:value="${defaults.getDefaultExpiryDate()}"
|
||||||
|
oninput="updatePreview()"
|
||||||
|
class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all duration-200">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action Buttons -->
|
||||||
|
<div class="flex gap-2 mt-6">
|
||||||
|
<button onclick="closeModal()"
|
||||||
|
class="flex-1 px-4 py-2 text-sm bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-500">
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button onclick="submitLicenseInfo(this)"
|
||||||
|
class="flex-1 px-4 py-2 text-sm bg-blue-500 dark:bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-600 dark:hover:bg-blue-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
|
||||||
|
确认保存
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button class="submit" onclick="submitLicenseInfo(this)">确认</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user