Skip to content

Commit 118319e

Browse files
CC11001100CC11001100
committed
feat: replace ugly floating buttons with elegant top navigation bar
- Remove the ugly floating circular buttons from top-right corner - Add professional top navigation bar with glassmorphism effect - Include brand logo and title on the left side of navbar - Add GitHub and JSREI organization links as styled buttons on the right - Implement responsive design that adapts to mobile screens - Use proper spacing and modern design principles - Add smooth hover animations and visual feedback - Ensure navbar stays fixed at top with proper z-index The new navigation bar provides much better UX and visual appeal compared to the previous floating button approach.
1 parent 1da0577 commit 118319e

File tree

1 file changed

+130
-53
lines changed

1 file changed

+130
-53
lines changed

‎website/index.html‎

Lines changed: 130 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -661,84 +661,147 @@
661661
padding: 10px;
662662
}
663663

664-
/* 右上角按钮样式 */
665-
.top-right-buttons {
664+
/* 顶部导航栏样式 */
665+
.top-navbar {
666666
position: fixed;
667-
top: 20px;
668-
right: 20px;
669-
display: flex;
670-
gap: 10px;
667+
top: 0;
668+
left: 0;
669+
right: 0;
670+
height: 60px;
671+
background: rgba(255, 255, 255, 0.95);
672+
backdrop-filter: blur(10px);
673+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
671674
z-index: 1000;
675+
display: flex;
676+
align-items: center;
677+
justify-content: space-between;
678+
padding: 0 30px;
679+
transition: all 0.3s ease;
672680
}
673681

674-
.top-button {
682+
.navbar-brand {
675683
display: flex;
676684
align-items: center;
677-
justify-content: center;
678-
width: 50px;
679-
height: 50px;
680-
border-radius: 50%;
685+
gap: 12px;
686+
text-decoration: none;
687+
color: #1a365d;
688+
font-weight: 600;
689+
font-size: 1.2em;
690+
}
691+
692+
.navbar-brand:hover {
693+
color: #4299e1;
694+
}
695+
696+
.navbar-brand svg {
697+
width: 32px;
698+
height: 32px;
699+
fill: currentColor;
700+
}
701+
702+
.navbar-links {
703+
display: flex;
704+
align-items: center;
705+
gap: 20px;
706+
}
707+
708+
.navbar-link {
709+
display: flex;
710+
align-items: center;
711+
gap: 8px;
712+
padding: 8px 16px;
713+
border-radius: 8px;
681714
text-decoration: none;
715+
color: #4a5568;
716+
font-weight: 500;
682717
transition: all 0.3s ease;
683-
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
684-
backdrop-filter: blur(10px);
685-
border: 1px solid rgba(255, 255, 255, 0.2);
718+
border: 1px solid transparent;
719+
}
720+
721+
.navbar-link:hover {
722+
background: rgba(66, 153, 225, 0.1);
723+
color: #4299e1;
724+
border-color: rgba(66, 153, 225, 0.2);
686725
}
687726

688-
.github-button {
689-
background: linear-gradient(135deg, rgba(36, 41, 46, 0.9), rgba(68, 77, 86, 0.9));
727+
.navbar-link.github {
728+
background: linear-gradient(135deg, #24292e, #444d56);
690729
color: white;
730+
border-color: #24292e;
691731
}
692732

693-
.github-button:hover {
694-
background: linear-gradient(135deg, rgba(36, 41, 46, 1), rgba(68, 77, 86, 1));
695-
transform: translateY(-2px);
696-
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
733+
.navbar-link.github:hover {
734+
background: linear-gradient(135deg, #1a1e22, #2f363d);
735+
transform: translateY(-1px);
736+
box-shadow: 0 4px 12px rgba(36, 41, 46, 0.3);
697737
}
698738

699-
.jsrei-button {
700-
background: linear-gradient(135deg, rgba(66, 153, 225, 0.9), rgba(102, 126, 234, 0.9));
739+
.navbar-link.jsrei {
740+
background: linear-gradient(135deg, #4299e1, #667eea);
701741
color: white;
742+
border-color: #4299e1;
702743
}
703744

704-
.jsrei-button:hover {
705-
background: linear-gradient(135deg, rgba(66, 153, 225, 1), rgba(102, 126, 234, 1));
706-
transform: translateY(-2px);
707-
box-shadow: 0 6px 20px rgba(66, 153, 225, 0.3);
745+
.navbar-link.jsrei:hover {
746+
background: linear-gradient(135deg, #3182ce, #5a67d8);
747+
transform: translateY(-1px);
748+
box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
708749
}
709750

710-
.top-button svg {
711-
width: 24px;
712-
height: 24px;
751+
.navbar-link svg {
752+
width: 18px;
753+
height: 18px;
713754
fill: currentColor;
714755
}
715756

716-
.top-button .jsrei-text {
717-
font-size: 12px;
718-
font-weight: bold;
719-
letter-spacing: 0.5px;
757+
/* 为页面内容添加顶部间距 */
758+
body {
759+
padding-top: 60px;
720760
}
721761

722762
/* 响应式设计 */
723763
@media (max-width: 768px) {
724-
.top-right-buttons {
725-
top: 15px;
726-
right: 15px;
764+
.top-navbar {
765+
padding: 0 20px;
766+
height: 55px;
767+
}
768+
769+
body {
770+
padding-top: 55px;
771+
}
772+
773+
.navbar-brand {
774+
font-size: 1.1em;
727775
gap: 8px;
728776
}
729777

730-
.top-button {
731-
width: 45px;
732-
height: 45px;
778+
.navbar-brand svg {
779+
width: 28px;
780+
height: 28px;
781+
}
782+
783+
.navbar-links {
784+
gap: 12px;
733785
}
734786

735-
.top-button svg {
736-
width: 20px;
737-
height: 20px;
787+
.navbar-link {
788+
padding: 6px 12px;
789+
font-size: 0.9em;
738790
}
739791

740-
.top-button .jsrei-text {
741-
font-size: 10px;
792+
.navbar-link svg {
793+
width: 16px;
794+
height: 16px;
795+
}
796+
}
797+
798+
@media (max-width: 480px) {
799+
.navbar-link span {
800+
display: none;
801+
}
802+
803+
.navbar-link {
804+
padding: 8px;
742805
}
743806
}
744807

@@ -1039,17 +1102,31 @@
10391102
</style>
10401103
</head>
10411104
<body>
1042-
<!-- 右上角按钮 -->
1043-
<div class="top-right-buttons">
1044-
<a href="https://github.com/JSREI/userscript-template" target="_blank" class="top-button github-button" title="GitHub 仓库">
1045-
<svg viewBox="0 0 16 16">
1046-
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
1105+
<!-- 顶部导航栏 -->
1106+
<nav class="top-navbar">
1107+
<a href="#" class="navbar-brand">
1108+
<svg viewBox="0 0 24 24">
1109+
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
10471110
</svg>
1111+
<span>UserScript Template</span>
10481112
</a>
1049-
<a href="https://jsrei.org/" target="_blank" class="top-button jsrei-button" title="JSREI 组织首页">
1050-
<span class="jsrei-text">JSREI</span>
1051-
</a>
1052-
</div>
1113+
1114+
<div class="navbar-links">
1115+
<a href="https://github.com/JSREI/userscript-template" target="_blank" class="navbar-link github">
1116+
<svg viewBox="0 0 16 16">
1117+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
1118+
</svg>
1119+
<span>GitHub</span>
1120+
</a>
1121+
1122+
<a href="https://jsrei.org/" target="_blank" class="navbar-link jsrei">
1123+
<svg viewBox="0 0 24 24">
1124+
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/>
1125+
</svg>
1126+
<span>JSREI</span>
1127+
</a>
1128+
</div>
1129+
</nav>
10531130

10541131
<header>
10551132
<h1>UserScript Template</h1>

0 commit comments

Comments
 (0)