feat(ui): update hero button text and enhance welcome screen
- Change primary hero button text from "Start Learning" to "Start Vibe Together!" across all language versions to align with project branding - Update online reading links in README files to point to /welcome.html for better user onboarding - Enhance WelcomeScreen.vue with improved animation timing and spacing - Add dynamic SVG wordmark to homepage hero section for visual appeal - Implement animated color transition for top promo bar - Remove testing guidelines comment in AGENTS.md as placeholder - Adjust feature card styling with increased min-height and icon sizes
This commit is contained in:
@@ -16,16 +16,16 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">还想学 OpenClaw</a><br>
|
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">还想学 OpenClaw</a><br>
|
||||||
<span style="font-size: 0.85em; color: #888;"><a href="https://datawhalechina.github.io/easy-vibe/">Start Experience</a> · <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Interactive Tutorial</a> · <a href="https://github.com/datawhalechina/hello-claw">Learn OpenClaw</a></span>
|
<span style="font-size: 0.85em; color: #888;"><a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Start Experience</a> · <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Interactive Tutorial</a> · <a href="https://github.com/datawhalechina/hello-claw">Learn OpenClaw</a></span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/">在线阅读</a> ·
|
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">在线阅读</a> ·
|
||||||
<a href="#-内容导航">学习地图</a> ·
|
<a href="#-内容导航">学习地图</a> ·
|
||||||
<a href="#contact">社区交流</a><br>
|
<a href="#contact">社区交流</a><br>
|
||||||
<span style="font-size: 0.85em; color: #888;">
|
<span style="font-size: 0.85em; color: #888;">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/">Read Online</a> ·
|
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> ·
|
||||||
<a href="#-content-navigation">Learning Map</a> ·
|
<a href="#-content-navigation">Learning Map</a> ·
|
||||||
<a href="#contact">Community</a>
|
<a href="#contact">Community</a>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -12,11 +12,11 @@
|
|||||||
# Easy-Vibe : تعلم Vibe Coding من 0 إلى 1
|
# Easy-Vibe : تعلم Vibe Coding من 0 إلى 1
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">القراءة عبر الإنترنت (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">دليل تفاعلي</a>
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">القراءة عبر الإنترنت (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">دليل تفاعلي</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/">القراءة عبر الإنترنت</a> ·
|
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">القراءة عبر الإنترنت</a> ·
|
||||||
<a href="#-التنقل">خريطة التعلم</a> ·
|
<a href="#-التنقل">خريطة التعلم</a> ·
|
||||||
<a href="#contact">المجتمع</a>
|
<a href="#contact">المجتمع</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -12,11 +12,11 @@
|
|||||||
# Easy-Vibe : Lerne Vibe Coding von 0 auf 1
|
# Easy-Vibe : Lerne Vibe Coding von 0 auf 1
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Online lesen (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interaktives Tutorial</a>
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Online lesen (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interaktives Tutorial</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/">Online lesen</a> ·
|
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Online lesen</a> ·
|
||||||
<a href="#-navigation">Lernkarte</a> ·
|
<a href="#-navigation">Lernkarte</a> ·
|
||||||
<a href="#contact">Community</a>
|
<a href="#contact">Community</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -12,11 +12,11 @@
|
|||||||
# Easy-Vibe : Learn vibe coding from 0 to 1
|
# Easy-Vibe : Learn vibe coding from 0 to 1
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Read Online</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interactive Tutorial</a>
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interactive Tutorial</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/">Read Online</a> ·
|
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> ·
|
||||||
<a href="#-navigation">Learning Map</a> ·
|
<a href="#-navigation">Learning Map</a> ·
|
||||||
<a href="#contact">Community</a>
|
<a href="#contact">Community</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -12,11 +12,11 @@
|
|||||||
# Easy-Vibe : Aprende Vibe Coding de 0 a 1
|
# Easy-Vibe : Aprende Vibe Coding de 0 a 1
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Leer en línea (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutorial interactivo</a>
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Leer en línea (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutorial interactivo</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/">Leer en línea</a> ·
|
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Leer en línea</a> ·
|
||||||
<a href="#-navegación">Mapa de aprendizaje</a> ·
|
<a href="#-navegación">Mapa de aprendizaje</a> ·
|
||||||
<a href="#contact">Comunidad</a>
|
<a href="#contact">Comunidad</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -12,11 +12,11 @@
|
|||||||
# Easy-Vibe : Apprendre le Vibe Coding de 0 à 1
|
# Easy-Vibe : Apprendre le Vibe Coding de 0 à 1
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Lire en ligne (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutoriel interactif</a>
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Lire en ligne (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutoriel interactif</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/">Lire en ligne</a> ·
|
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Lire en ligne</a> ·
|
||||||
<a href="#-navigation">Carte d'apprentissage</a> ·
|
<a href="#-navigation">Carte d'apprentissage</a> ·
|
||||||
<a href="#contact">Communauté</a>
|
<a href="#contact">Communauté</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -12,11 +12,11 @@
|
|||||||
# Easy-Vibe : 0から1で学ぶVibe Coding
|
# Easy-Vibe : 0から1で学ぶVibe Coding
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読む (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">インタラクティブチュートリアル</a>
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">オンラインで読む (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">インタラクティブチュートリアル</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読む</a> ·
|
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">オンラインで読む</a> ·
|
||||||
<a href="#-コンテンツナビゲーション">学習マップ</a> ·
|
<a href="#-コンテンツナビゲーション">学習マップ</a> ·
|
||||||
<a href="#contact">コミュニティ交流</a>
|
<a href="#contact">コミュニティ交流</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -12,11 +12,11 @@
|
|||||||
# Easy-Vibe : 0에서 1까지 배우는 Vibe Coding
|
# Easy-Vibe : 0에서 1까지 배우는 Vibe Coding
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">온라인 읽기 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">대화형 튜토리얼</a>
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">온라인 읽기 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">대화형 튜토리얼</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/">온라인 읽기</a> ·
|
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">온라인 읽기</a> ·
|
||||||
<a href="#-콘텐츠-탐색">학습 지도</a> ·
|
<a href="#-콘텐츠-탐색">학습 지도</a> ·
|
||||||
<a href="#contact">커뮤니티 교류</a>
|
<a href="#contact">커뮤니티 교류</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -12,11 +12,11 @@
|
|||||||
# Easy-Vibe : Học Vibe Coding từ 0 đến 1
|
# Easy-Vibe : Học Vibe Coding từ 0 đến 1
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Đọc trực tuyến (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Hướng dẫn tương tác</a>
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Đọc trực tuyến (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Hướng dẫn tương tác</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/">Đọc trực tuyến</a> ·
|
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Đọc trực tuyến</a> ·
|
||||||
<a href="#-điều-hướng">Bản đồ học tập</a> ·
|
<a href="#-điều-hướng">Bản đồ học tập</a> ·
|
||||||
<a href="#contact">Cộng đồng</a>
|
<a href="#contact">Cộng đồng</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -12,11 +12,11 @@
|
|||||||
# Easy-Vibe : 從 0 到 1 學習 Vibe Coding
|
# Easy-Vibe : 從 0 到 1 學習 Vibe Coding
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
📌 <a href="https://datawhalechina.github.io/easy-vibe/">在線閱讀 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程 (Interactive Tutorial)</a>
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">在線閱讀 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程 (Interactive Tutorial)</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/">在線閱讀</a> ·
|
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">在線閱讀</a> ·
|
||||||
<a href="#-內容導航">學習地圖</a> ·
|
<a href="#-內容導航">學習地圖</a> ·
|
||||||
<a href="#contact">社區交流</a>
|
<a href="#contact">社區交流</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import GitHubStars from './components/GitHubStars.vue'
|
|||||||
import { onMounted, ref, watch, computed } from 'vue'
|
import { onMounted, ref, watch, computed } from 'vue'
|
||||||
import ReadingProgress from './components/ReadingProgress.vue'
|
import ReadingProgress from './components/ReadingProgress.vue'
|
||||||
import { Setting } from '@element-plus/icons-vue'
|
import { Setting } from '@element-plus/icons-vue'
|
||||||
|
import easyVibePaths from './data/easyVibePaths.json'
|
||||||
|
|
||||||
const { frontmatter } = useData()
|
const { frontmatter } = useData()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
@@ -416,6 +417,38 @@ watch(sidebarCollapsed, (collapsed) => {
|
|||||||
</el-popover>
|
</el-popover>
|
||||||
</ClientOnly>
|
</ClientOnly>
|
||||||
</template>
|
</template>
|
||||||
|
<template #home-hero-info-before>
|
||||||
|
<div
|
||||||
|
v-if="frontmatter.layout === 'home'"
|
||||||
|
class="vp-home-wordmark"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 460 220"
|
||||||
|
class="vp-home-wordmark-svg"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="home-hero-ocean"
|
||||||
|
x1="0"
|
||||||
|
y1="0"
|
||||||
|
x2="460"
|
||||||
|
y2="0"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop offset="0%" stop-color="#06b6d4" />
|
||||||
|
<stop offset="50%" stop-color="#0ea5e9" />
|
||||||
|
<stop offset="100%" stop-color="#3b82f6" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path
|
||||||
|
v-for="(path, index) in easyVibePaths"
|
||||||
|
:key="index"
|
||||||
|
:d="path"
|
||||||
|
class="vp-home-wordmark-path"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<template #home-hero-info-after>
|
<template #home-hero-info-after>
|
||||||
<div
|
<div
|
||||||
v-if="
|
v-if="
|
||||||
@@ -467,7 +500,8 @@ watch(sidebarCollapsed, (collapsed) => {
|
|||||||
|
|
||||||
/* 调整打字机容器的样式,使其看起来像原来的 tagline */
|
/* 调整打字机容器的样式,使其看起来像原来的 tagline */
|
||||||
.vp-typed-tagline {
|
.vp-typed-tagline {
|
||||||
padding-top: 8px;
|
padding-top: 0;
|
||||||
|
margin-top: 8px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -485,7 +519,7 @@ watch(sidebarCollapsed, (collapsed) => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.VPHomeHero .main {
|
.VPHomeHero .main {
|
||||||
margin: 0 auto;
|
margin: -18px auto 0;
|
||||||
}
|
}
|
||||||
.VPHomeHero .name,
|
.VPHomeHero .name,
|
||||||
.VPHomeHero .text {
|
.VPHomeHero .text {
|
||||||
@@ -493,11 +527,30 @@ watch(sidebarCollapsed, (collapsed) => {
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
.VPHomeHero .name {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
.VPHomeHero .text {
|
.VPHomeHero .text {
|
||||||
color: var(--vp-c-text-1) !important;
|
color: var(--vp-c-text-1) !important;
|
||||||
}
|
}
|
||||||
.VPHomeHero .actions {
|
.VPHomeHero .actions {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.vp-home-wordmark {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: -12px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.vp-home-wordmark-svg {
|
||||||
|
width: min(380px, 52vw);
|
||||||
|
height: auto;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
.vp-home-wordmark-path {
|
||||||
|
fill: url(#home-hero-ocean);
|
||||||
|
stroke: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
|
|||||||
@@ -8,6 +8,11 @@ const { site, page, lang } = useData()
|
|||||||
const activeTab = ref('home')
|
const activeTab = ref('home')
|
||||||
const showLangMenu = ref(false)
|
const showLangMenu = ref(false)
|
||||||
const topPromoProgress = ref(1)
|
const topPromoProgress = ref(1)
|
||||||
|
const topPromoIntroProgress = ref(0)
|
||||||
|
const topPromoColorProgress = ref(0)
|
||||||
|
let topPromoIntroRaf = 0
|
||||||
|
let topPromoColorRaf = 0
|
||||||
|
let topPromoColorTimer = 0
|
||||||
const WELCOME_SEEN_KEY = 'easy-vibe-welcome-seen'
|
const WELCOME_SEEN_KEY = 'easy-vibe-welcome-seen'
|
||||||
|
|
||||||
// Appendix Scroll Logic
|
// Appendix Scroll Logic
|
||||||
@@ -1620,12 +1625,27 @@ const updateTopPromoVisibility = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const topPromoStyle = computed(() => {
|
const topPromoStyle = computed(() => {
|
||||||
const progress = topPromoProgress.value
|
const scrollProgress = topPromoProgress.value
|
||||||
|
const introProgress = topPromoIntroProgress.value
|
||||||
|
const colorProgress = topPromoColorProgress.value
|
||||||
|
const progress = scrollProgress * introProgress
|
||||||
|
const scrollOffset = -100 * (1 - scrollProgress)
|
||||||
|
const startTextColor = { r: 255, g: 255, b: 255 }
|
||||||
|
const endTextColor = { r: 29, g: 29, b: 31 }
|
||||||
|
const startBgColor = { r: 0, g: 113, b: 227 }
|
||||||
|
const endBgColor = { r: 245, g: 245, b: 247 }
|
||||||
|
const startLinkColor = { r: 255, g: 255, b: 255 }
|
||||||
|
const endLinkColor = { r: 0, g: 102, b: 204 }
|
||||||
|
const textColor = `rgb(${Math.round(startTextColor.r + (endTextColor.r - startTextColor.r) * colorProgress)}, ${Math.round(startTextColor.g + (endTextColor.g - startTextColor.g) * colorProgress)}, ${Math.round(startTextColor.b + (endTextColor.b - startTextColor.b) * colorProgress)})`
|
||||||
|
const bgColor = `rgb(${Math.round(startBgColor.r + (endBgColor.r - startBgColor.r) * colorProgress)}, ${Math.round(startBgColor.g + (endBgColor.g - startBgColor.g) * colorProgress)}, ${Math.round(startBgColor.b + (endBgColor.b - startBgColor.b) * colorProgress)})`
|
||||||
|
const linkColor = `rgb(${Math.round(startLinkColor.r + (endLinkColor.r - startLinkColor.r) * colorProgress)}, ${Math.round(startLinkColor.g + (endLinkColor.g - startLinkColor.g) * colorProgress)}, ${Math.round(startLinkColor.b + (endLinkColor.b - startLinkColor.b) * colorProgress)})`
|
||||||
return {
|
return {
|
||||||
opacity: progress,
|
opacity: progress,
|
||||||
transform: `translateY(${-100 * (1 - progress)}%)`,
|
transform: `translateY(${scrollOffset}%)`,
|
||||||
maxHeight: `${30 * progress}px`,
|
maxHeight: `${30 * progress}px`,
|
||||||
borderTopColor: `rgba(229, 229, 234, ${progress})`,
|
backgroundColor: bgColor,
|
||||||
|
color: textColor,
|
||||||
|
'--top-promo-link-color': linkColor,
|
||||||
pointerEvents: progress < 0.02 ? 'none' : 'auto'
|
pointerEvents: progress < 0.02 ? 'none' : 'auto'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -1636,6 +1656,33 @@ const replayIntro = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
const introDuration = 1800
|
||||||
|
const colorDelay = 500
|
||||||
|
const colorDuration = 1800
|
||||||
|
const introStart = performance.now()
|
||||||
|
const stepTopPromoIntro = (now) => {
|
||||||
|
const raw = Math.min(1, (now - introStart) / introDuration)
|
||||||
|
const eased = 1 - Math.pow(1 - raw, 3)
|
||||||
|
topPromoIntroProgress.value = eased
|
||||||
|
if (raw < 1) {
|
||||||
|
topPromoIntroRaf = window.requestAnimationFrame(stepTopPromoIntro)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
topPromoColorTimer = window.setTimeout(() => {
|
||||||
|
const colorStart = performance.now()
|
||||||
|
const stepTopPromoColor = (time) => {
|
||||||
|
const colorRaw = Math.min(1, (time - colorStart) / colorDuration)
|
||||||
|
const colorEased = 1 - Math.pow(1 - colorRaw, 3)
|
||||||
|
topPromoColorProgress.value = colorEased
|
||||||
|
if (colorRaw < 1) {
|
||||||
|
topPromoColorRaf = window.requestAnimationFrame(stepTopPromoColor)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
topPromoColorRaf = window.requestAnimationFrame(stepTopPromoColor)
|
||||||
|
}, colorDelay)
|
||||||
|
}
|
||||||
|
topPromoIntroRaf = window.requestAnimationFrame(stepTopPromoIntro)
|
||||||
|
|
||||||
const currentPath = window.location.pathname
|
const currentPath = window.location.pathname
|
||||||
const basePath = site.value.base || '/'
|
const basePath = site.value.base || '/'
|
||||||
const normalizedBase = basePath.endsWith('/') ? basePath : `${basePath}/`
|
const normalizedBase = basePath.endsWith('/') ? basePath : `${basePath}/`
|
||||||
@@ -1681,6 +1728,18 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
|
if (topPromoIntroRaf) {
|
||||||
|
window.cancelAnimationFrame(topPromoIntroRaf)
|
||||||
|
topPromoIntroRaf = 0
|
||||||
|
}
|
||||||
|
if (topPromoColorRaf) {
|
||||||
|
window.cancelAnimationFrame(topPromoColorRaf)
|
||||||
|
topPromoColorRaf = 0
|
||||||
|
}
|
||||||
|
if (topPromoColorTimer) {
|
||||||
|
window.clearTimeout(topPromoColorTimer)
|
||||||
|
topPromoColorTimer = 0
|
||||||
|
}
|
||||||
document.removeEventListener('click', closeLangMenu)
|
document.removeEventListener('click', closeLangMenu)
|
||||||
if (appendixWrapper.value) {
|
if (appendixWrapper.value) {
|
||||||
appendixWrapper.value.removeEventListener('scroll', onAppendixScroll)
|
appendixWrapper.value.removeEventListener('scroll', onAppendixScroll)
|
||||||
@@ -2365,8 +2424,8 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-promo {
|
.nav-promo {
|
||||||
|
height: 30px;
|
||||||
max-height: 30px;
|
max-height: 30px;
|
||||||
border-top: 1px solid #e5e5ea;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -2378,17 +2437,19 @@ a {
|
|||||||
transform-origin: top center;
|
transform-origin: top center;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
will-change: transform, opacity, max-height, border-color;
|
will-change: transform, opacity, max-height, background-color, color;
|
||||||
transition:
|
transition:
|
||||||
transform 0.16s ease-out,
|
transform 0.16s ease-out,
|
||||||
opacity 0.16s ease-out,
|
opacity 0.16s ease-out,
|
||||||
max-height 0.16s ease-out,
|
max-height 0.16s ease-out,
|
||||||
border-color 0.16s ease-out;
|
background-color 0.22s ease-out,
|
||||||
|
color 0.22s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-promo a {
|
.nav-promo a {
|
||||||
color: #0066cc;
|
color: var(--top-promo-link-color, #0066cc);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
transition: color 0.25s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
@@ -2786,6 +2847,7 @@ a {
|
|||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-height: 360px;
|
||||||
transition: transform 0.25s ease;
|
transition: transform 0.25s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2853,14 +2915,14 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.appendix-icon-wrapper {
|
.appendix-icon-wrapper {
|
||||||
width: 64px;
|
width: 100%;
|
||||||
height: 64px;
|
height: 190px;
|
||||||
border-radius: 17.5px; /* Apple continuous curve approximation */
|
border-radius: 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 32px;
|
font-size: 88px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 14px;
|
||||||
/* Glassmorphism / VisionOS Style */
|
/* Glassmorphism / VisionOS Style */
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
-webkit-backdrop-filter: blur(20px);
|
-webkit-backdrop-filter: blur(20px);
|
||||||
@@ -2916,7 +2978,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.appendix-text {
|
.appendix-text {
|
||||||
font-size: 15px;
|
font-size: 13px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #6e6e73;
|
color: #6e6e73;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -2928,7 +2990,7 @@ a {
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1d1d1f;
|
color: #1d1d1f;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
font-size: 13px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
|
|||||||
@@ -258,23 +258,26 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.welcome-tip {
|
.welcome-tip {
|
||||||
margin: 24px 0 0;
|
margin: 44px 0 0;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.2em;
|
||||||
color: rgba(34, 34, 34, 0.38);
|
color: rgba(34, 34, 34, 0.32);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
animation: welcome-tip-breathe 7s ease-in-out infinite;
|
animation: welcome-tip-breathe 5s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes welcome-tip-breathe {
|
@keyframes welcome-tip-breathe {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0.24;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
50% {
|
40% {
|
||||||
opacity: 0.72;
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
opacity: 0.24;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -305,15 +305,43 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Hero Section Refinements */
|
/* Hero Section Refinements */
|
||||||
.VPHomeHero .name {
|
.VPHomeHero .name,
|
||||||
background: -webkit-linear-gradient(315deg, #0071e3 10%, #5ac8fa 90%);
|
.VPHomeHero .name.clip {
|
||||||
|
position: relative;
|
||||||
|
top: -8px;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
100deg,
|
||||||
|
#06b6d4 0%,
|
||||||
|
#0ea5e9 18%,
|
||||||
|
#3b82f6 36%,
|
||||||
|
#9d4edd 56%,
|
||||||
|
#ff3c81 74%,
|
||||||
|
#f97316 88%,
|
||||||
|
#06b6d4 100%
|
||||||
|
);
|
||||||
|
background-size: 220% 220%;
|
||||||
|
background-position: 0% 50%;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
filter: drop-shadow(0 0 24px rgba(0, 113, 227, 0.28));
|
filter: drop-shadow(0 0 22px rgba(59, 130, 246, 0.26));
|
||||||
|
animation: ev-hero-name-flow 8s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ev-hero-name-flow {
|
||||||
|
0% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 35% 50%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.VPHomeHero .text {
|
.VPHomeHero .text {
|
||||||
|
display: none !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1d1d1f;
|
color: #1d1d1f;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
|
|||||||
+1
-1
@@ -16,7 +16,7 @@ hero:
|
|||||||
- هكذا يجب أن تكون البرمجة.
|
- هكذا يجب أن تكون البرمجة.
|
||||||
actions:
|
actions:
|
||||||
- theme: brand
|
- theme: brand
|
||||||
text: ابدأ التعلم
|
text: ابدأ vibe معًا!
|
||||||
link: /ar-sa/stage-0/
|
link: /ar-sa/stage-0/
|
||||||
- theme: alt
|
- theme: alt
|
||||||
text: مخطط الدورة
|
text: مخطط الدورة
|
||||||
|
|||||||
+1
-1
@@ -16,7 +16,7 @@ hero:
|
|||||||
- So sollte Programmieren sich anfühlen.
|
- So sollte Programmieren sich anfühlen.
|
||||||
actions:
|
actions:
|
||||||
- theme: brand
|
- theme: brand
|
||||||
text: Starten
|
text: Zusammen vibe starten!
|
||||||
link: /de-de/stage-0/
|
link: /de-de/stage-0/
|
||||||
- theme: alt
|
- theme: alt
|
||||||
text: Kursübersicht
|
text: Kursübersicht
|
||||||
|
|||||||
+1
-1
@@ -16,7 +16,7 @@ hero:
|
|||||||
- This is how coding should feel.
|
- This is how coding should feel.
|
||||||
actions:
|
actions:
|
||||||
- theme: brand
|
- theme: brand
|
||||||
text: Start Learning
|
text: Start Vibe Together!
|
||||||
link: /en/stage-0/
|
link: /en/stage-0/
|
||||||
- theme: alt
|
- theme: alt
|
||||||
text: GitHub
|
text: GitHub
|
||||||
|
|||||||
+1
-1
@@ -16,7 +16,7 @@ hero:
|
|||||||
- Así debería sentirse programar.
|
- Así debería sentirse programar.
|
||||||
actions:
|
actions:
|
||||||
- theme: brand
|
- theme: brand
|
||||||
text: Empezar
|
text: ¡Empezar a vibe juntos!
|
||||||
link: /es-es/stage-0/
|
link: /es-es/stage-0/
|
||||||
- theme: alt
|
- theme: alt
|
||||||
text: Esquema del Curso
|
text: Esquema del Curso
|
||||||
|
|||||||
+1
-1
@@ -16,7 +16,7 @@ hero:
|
|||||||
- C'est ainsi que le coding devrait être.
|
- C'est ainsi que le coding devrait être.
|
||||||
actions:
|
actions:
|
||||||
- theme: brand
|
- theme: brand
|
||||||
text: Commencer
|
text: Commencer à vibe ensemble !
|
||||||
link: /fr-fr/stage-0/
|
link: /fr-fr/stage-0/
|
||||||
- theme: alt
|
- theme: alt
|
||||||
text: Plan du Cours
|
text: Plan du Cours
|
||||||
|
|||||||
+1
-1
@@ -16,7 +16,7 @@ hero:
|
|||||||
- プログラミングは、こうあるべき。
|
- プログラミングは、こうあるべき。
|
||||||
actions:
|
actions:
|
||||||
- theme: brand
|
- theme: brand
|
||||||
text: 学習を開始
|
text: 一緒にvibeを始めよう!
|
||||||
link: /ja-jp/stage-0/
|
link: /ja-jp/stage-0/
|
||||||
- theme: alt
|
- theme: alt
|
||||||
text: コース概要
|
text: コース概要
|
||||||
|
|||||||
+1
-1
@@ -16,7 +16,7 @@ hero:
|
|||||||
- 프로그래밍은, 이래야 합니다.
|
- 프로그래밍은, 이래야 합니다.
|
||||||
actions:
|
actions:
|
||||||
- theme: brand
|
- theme: brand
|
||||||
text: 학습 시작
|
text: 함께 vibe 시작!
|
||||||
link: /ko-kr/stage-0/
|
link: /ko-kr/stage-0/
|
||||||
- theme: alt
|
- theme: alt
|
||||||
text: 과정 개요
|
text: 과정 개요
|
||||||
|
|||||||
+1
-1
@@ -16,7 +16,7 @@ hero:
|
|||||||
- Lập trình nên như thế này.
|
- Lập trình nên như thế này.
|
||||||
actions:
|
actions:
|
||||||
- theme: brand
|
- theme: brand
|
||||||
text: Bắt đầu học
|
text: Bắt đầu vibe cùng nhau!
|
||||||
link: /vi-vn/stage-0/
|
link: /vi-vn/stage-0/
|
||||||
- theme: alt
|
- theme: alt
|
||||||
text: Đề cương khóa học
|
text: Đề cương khóa học
|
||||||
|
|||||||
+1
-1
@@ -16,7 +16,7 @@ hero:
|
|||||||
- 这就是编程该有的样子。
|
- 这就是编程该有的样子。
|
||||||
actions:
|
actions:
|
||||||
- theme: brand
|
- theme: brand
|
||||||
text: 开始学习
|
text: 开始一起 vibe!
|
||||||
link: /zh-cn/stage-0/0.1-learning-map/
|
link: /zh-cn/stage-0/0.1-learning-map/
|
||||||
- theme: alt
|
- theme: alt
|
||||||
text: GitHub 加速更新
|
text: GitHub 加速更新
|
||||||
|
|||||||
+1
-1
@@ -16,7 +16,7 @@ hero:
|
|||||||
- 這就是編程該有的樣子。
|
- 這就是編程該有的樣子。
|
||||||
actions:
|
actions:
|
||||||
- theme: brand
|
- theme: brand
|
||||||
text: 開始學習
|
text: 開始一起 vibe!
|
||||||
link: /zh-tw/stage-0/
|
link: /zh-tw/stage-0/
|
||||||
- theme: alt
|
- theme: alt
|
||||||
text: 課程大綱
|
text: 課程大綱
|
||||||
|
|||||||
Reference in New Issue
Block a user