@@ -3,148 +3,90 @@
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=1280, height=720" >
< link href = "https://fonts.googleapis.com/css2?family=Inter :wght@300; 400;500;600;700&display=swap" rel = "stylesheet" >
< link href = "https://fonts.googleapis.com/css2?family=Noto+Serif+SC :wght@400;500;600;700&family=Inter:wght@400;500;600& display=swap" rel = "stylesheet" >
< style >
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
body { font-family : 'Inter' , - apple-system , BlinkMacSystemFont , sans- serif; -webkit- font-smoothing : antialiased ; }
. slide {
width : 1280 px ; height : 720 px ;
display : flex ; flex-direction : column ;
padding : 6 4px 80 px ;
background : linear-gradient ( 160 deg , #F8F6F2 0 % , #F0EDE8 35 % , #F5F3EF 100 % ) ;
position : relative ; overflow : hidden ;
}
. slide :: before {
content : '' ; position : absolute ; top : -40 % ; right : -25 % ;
width : 70 % ; height : 90 % ;
background : radial-gradient ( ellipse , rgba ( 175 , 82 , 222 , 0.06 ) 0 % , transparent 60 % ) ;
pointer-events : none ;
}
. glass {
background : rgba ( 255 , 255 , 255 , 0.6 ) ;
backdrop-filter : blur ( 48 px ) ; -webkit- backdrop-filter : blur ( 48 px ) ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.7 ) ;
border-radius : 28 px ;
box-shadow : 0 8 px 32 px rgba ( 0 , 0 , 0 , 0.04 ) , 0 0 0 1 px rgba ( 255 , 255 , 255 , 0.8 ) inset ;
}
. glass-strong {
background : rgba ( 255 , 255 , 255 , 0.72 ) ;
backdrop-filter : blur ( 56 px ) ; -webkit- backdrop-filter : blur ( 56 px ) ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.75 ) ;
border-radius : 32 px ;
box-shadow : 0 12 px 40 px rgba ( 0 , 0 , 0 , 0.06 ) , 0 0 0 1 px rgba ( 255 , 255 , 255 , 0.9 ) inset ;
}
. accent { color : #8B5CF6 ; }
. text-dark { color : #1D1D1F ; }
. text-muted { color : #6B7280 ; }
h1 { font-size : 48 px ; font-weight : 700 ; letter-spacing : -0.03 em ; line-height : 1.2 ; }
h2 { font-size : 18 px ; font-weight : 600 ; letter-spacing : 0.06 em ; text-transform : uppercase ; color : #8B5CF6 ; }
body { font-family : 'Noto Serif SC' , ' Inter' , - apple-system , serif; -webkit- font-smoothing : antialiased ; }
. slide { width : 1280 px ; height : 720 px ; display : flex ; flex-direction : column ; padding : 72 px 96 px ; position : relative ; overflow : hidden ; }
/* 设计原则: Apple 一页一主题 + 麦肯锡行动标题 + 极简留白 */
h1 { font-size : 56 px ; font-weight : 700 ; letter-spacing : -0.02 em ; line-height : 1.2 ; }
h2 { font-size : 1 4px ; font-weight : 600 ; letter-spacing : 0.2 em ; text-transform : uppercase ; opacity : 0.6 ; }
. lead { font-size : 32 px ; font-weight : 500 ; line-height : 1.5 ; letter-spacing : 0.02 em ; }
. quote { font-size : 36 px ; font-weight : 600 ; line-height : 1.5 ; letter-spacing : 0.01 em ; }
< / style >
< / head >
< body >
<!-- 1. 封面 -->
< div class = "slide" id = "slide-1" style = "justify-content: center; align-items: center; text-align: center;" >
< h1 class = "text-dark" style= "margin-bottom: 20 px;" > 《 纳瓦尔 3 小时访谈》 < / h1 >
< p class = "text-muted" style= "font-size: 26 px; font-weight: 500 ;" > 读书笔记 · 五行结构 < / p >
<!-- 1. 封面: 黑底白字, 极简, Apple 风格 -->
< div class = "slide" id = "slide-1" style = "background: #0F0F0F; justify-content: center; align-items: center; text-align: center;" >
< h1 style = "color: #FAFAFA; margin-bottom: 24 px;" > 纳瓦尔 3 小时访谈< / h1 >
< p style = "color: rgba(255,255,255,0.5); font-size: 20 px; letter-spacing: 0.15em ;" > 读书笔记< / p >
< / div >
<!-- 2. 一句话总结 -->
< div class = "slide" id = "slide-2" style = "justify-content : center;" >
< h2 style = "margin-bottom: 36px;" > 一句话总结< / h2 >
< div class = "glass-strong" style = "padding: 56px 64px; max-width: 920px;" >
< p class = "text-dark" style = "font-size: 28px; line-height: 1.6; font-weight: 500;" > 讲怎么少内耗、多干活,把人生当产品经营。< br > 幸福、赚钱、自由,全有。< / p >
< / div >
<!-- 2. 一句话:整屏一句话,无装饰 -->
< div class = "slide" id = "slide-2" style = "background: #FAF8F5; justify-content: center; align-items: center; text-align : center;" >
< p class = "lead" style = "color: #1A1A1A; max-width: 900px;" > 少内耗、多干活,把人生当产品经营。< br > 幸福、赚钱、自由,全有。< / p >
< / div >
<!-- 3. 金:定位与角色 -->
< div class = "slide" id = "slide-3" style = "justify-content: center ;" >
< h2 style = "margin-bottom: 32 px;" > 金 · 定位与角色< / h2 >
< div class = "glass" style = "padding: 44px 56px; max-width: 960px;" >
< div style = " font-size: 22 px; line-height: 2; color: #1D1D1F;" >
< p > AngelList 创始人 · 投资人 · 硅谷爱聊哲学的< / p >
< p > 财富可一起赚,地位要抢;先搞钱,再谈名< / p >
< p > 时代位置:个人杠杆大,比任何时候都好造财富< / p >
< / div >
< / div >
<!-- 3. 金:行动标题 + 一句话支撑 -->
< div class = "slide" id = "slide-3" style = "background: #FAF8F5 ;" >
< h2 style = "color: #1A1A1A; margin-bottom: 16 px;" > 金 · 定位与角色< / h2 >
< h1 style = "color: #1A1A1A; margin-bottom: 32px;" > 财富可一起赚,地位要抢< / h1 >
< p class = "lead" style = "color: #4A4A4A; font-size: 26 px;" > AngelList 创始人 · 硅谷爱聊哲学的投资人 · 个人杠杆比任何时候都好造财富< / p >
< / div >
<!-- 4. 水:经历与路径 -->
< div class = "slide" id = "slide-4" style = "justify-content: center ;" >
< h2 style = "margin-bottom: 32 px;" > 水 · 经历与路径< / h2 >
< div class = "glass" style = "padding: 44px 56px; max-width: 960px;" >
< div style = " font-size: 22 px; line-height: 2.2; color: #1D1D1F;" >
< p > 走「先赚到钱再谈放下」的路,不搞苦修< / p >
< p > 从推文到播客,更喜欢对话,不爱被当 guru< / p >
< p > 待在旧金山,跟聪明人、能反驳你的人混< / p >
< / div >
< / div >
<!-- 4. 水 -->
< div class = "slide" id = "slide-4" style = "background: #FAF8F5 ;" >
< h2 style = "color: #1A1A1A; margin-bottom: 16 px;" > 水 · 经历与路径< / h2 >
< h1 style = "color: #1A1A1A; margin-bottom: 32px;" > 先赚到钱,再谈放下< / h1 >
< p class = "lead" style = "color: #4A4A4A; font-size: 26 px;" > 不搞苦修 · 更喜欢对话不爱被当 guru · 跟能反驳你的聪明人混< / p >
< / div >
<!-- 5. 木:方法与产出 -->
< div class = "slide" id = "slide-5" style = "justify-content: center ;" >
< h2 style = "margin-bottom: 32 px;" > 木 · 方法与产出< / h2 >
< div class = "glass-strong" style = "padding: 44px 56px; max-width: 960px;" >
< div style = " font-size: 20 px; line-height: 2; color: #1D1D1F;" >
< p > 核心:把天生会干、别人要、能放大的事,做成产品< / p >
< p > 秘书定理——先试 1/3, 摸清标准, 再选第一个达标或更好的< / p >
< p > 灵感会过期,想到就干;拿不准就说 no< / p >
< p > 要做 4 年的决定,花 1 年想< / p >
< / div >
< / div >
<!-- 5. 木 -->
< div class = "slide" id = "slide-5" style = "background: #FAF8F5 ;" >
< h2 style = "color: #1A1A1A; margin-bottom: 16 px;" > 木 · 方法与产出< / h2 >
< h1 style = "color: #1A1A1A; margin-bottom: 32px;" > 天生会干、别人要、能放大 → 做成产品< / h1 >
< p class = "lead" style = "color: #4A4A4A; font-size: 24 px;" > 秘书定理 · 灵感会过期想到就干 · 拿不准就说 no · 4 年的事花 1 年想< / p >
< / div >
<!-- 6. 火:认知与判断 -->
< div class = "slide" id = "slide-6" style = "justify-content: center ;" >
< h2 style = "margin-bottom: 32 px;" > 火 · 认知与判断< / h2 >
< div class = "glass" style = "padding: 44px 56px; max-width: 960px;" >
< div style = " font-size: 20 px; line-height: 2; color: #1D1D1F;" >
< p > 不想要就跟有了差不多;玩赢游戏是为了不用再玩< / p >
< p > 欲望 = 签了「得不到就不开心」的合同< / p >
< p > 痛苦多半是自己加的戏;骄傲最贵< / p >
< p > 一万次试错修正 > 一万小时傻练< / p >
< / div >
< / div >
<!-- 6. 火 -->
< div class = "slide" id = "slide-6" style = "background: #FAF8F5 ;" >
< h2 style = "color: #1A1A1A; margin-bottom: 16 px;" > 火 · 认知与判断< / h2 >
< h1 style = "color: #1A1A1A; margin-bottom: 32px;" > 欲望 = 签了「得不到就不开心」的合同< / h1 >
< p class = "lead" style = "color: #4A4A4A; font-size: 24 px;" > 不想要就跟有了差不多 · 痛苦多半是自己加的戏 · 一万次试错 > 一万小时傻练< / p >
< / div >
<!-- 7. 土:系统与沉淀 -->
< div class = "slide" id = "slide-7" style = "justify-content: center ;" >
< h2 style = "margin-bottom: 32 px;" > 土 · 系统与沉淀< / h2 >
< div class = "glass" style = "padding: 44px 56px; max-width: 960px;" >
< div style = " font-size: 22 px; line-height: 2.2; color: #1D1D1F;" >
< p > 财富可一起造,地位要抢;管不了的少操心< / p >
< p > 别给自己贴死标签;家都搞不定就别想着救世界< / p >
< p > 复利:一万次试错修正 > 一万小时傻练< / p >
< / div >
< / div >
<!-- 7. 土 -->
< div class = "slide" id = "slide-7" style = "background: #FAF8F5 ;" >
< h2 style = "color: #1A1A1A; margin-bottom: 16 px;" > 土 · 系统与沉淀< / h2 >
< h1 style = "color: #1A1A1A; margin-bottom: 32px;" > 管不了的少操心,别给自己贴死标签< / h1 >
< p class = "lead" style = "color: #4A4A4A; font-size: 24 px;" > 家都搞不定就别想着救世界 · 复利在试错修正里< / p >
< / div >
<!-- 8. 金句 -->
< div class = "slide" id = "slide-8" style = "justify-content : center;" >
< h2 style = "margin-bottom: 36px ;"> 金句 < / h2 >
< div class = "glass-strong" style = "padding: 48px 56px; max-width: 960px;" >
< div style = "font-size: 20px; line-height: 2.2; color: #1D1D1F;" >
< p > 把自己当产品卖< / p >
< p > 你当玩,别人当干——找这种事< / p >
< p > 欲望等于签了「得不到就不开心」的合同< / p >
< p > 要背就是没懂,真懂了不用背< / p >
< p > 做 4 年的事,花 1 年想清楚< / p >
< / div >
< / div >
<!-- 8. 金句 1: 一页一句, 居中大号 -->
< div class = "slide" id = "slide-8" style = "background: #1A1A1A; justify-content: center; align-items: center; text-align : center;" >
< p class = "quote" style = "color: #FAFAFA ;"> 把自己当产品卖 < / p >
< / div >
<!-- 9. 关键词 · 使用 -->
< div class = "slide" id = "slide-9" style = "justify-content : center;" >
< h2 style = "margin-bottom: 36px;" > 关键词 · 使用规则< / h2 >
< div class = "glass" style = "padding: 44px 56px; max-width: 960px; display: flex; gap: 48px;" >
< div style = "flex: 1;" >
< p class = "text-muted" style = "font-size: 16px; margin-bottom: 12px;" > 关键词< / p >
< p class = "text-dark" style = "font-size: 20px ; line-height: 1.8;" > 产品化自己 / 欲望合约 / 秘书定理 / 默认说不 / 灵感过期< / p >
< / div >
< div style = "flex: 1; border-left: 1px solid rgba(0,0,0,0.08); padding-left: 48px;" >
< p class = "text-muted" style = "font-size: 16px; margin-bottom: 12px;" > 使用顺序< / p >
< p class = "text-dark" style = "font-size: 20px; line-height: 1.8;" > 木(方法)→ 火(认知)→ 日常按金句提醒自己< / p >
< / div >
< / div >
<!-- 9. 金句 2 -->
< div class = "slide" id = "slide-9" style = "background: #1A1A1A; justify-content: center; align-items: center; text-align : center;" >
< p class = "quote" style = "color: #FAFAFA;" > 你当玩,别人当干< br > 找这种事< / p >
< / div >
<!-- 10. 金句 3 -- >
< div class = "slide" id = "slide-10" style = "background: #1A1A1A; justify-content: center ; a lign-items: center; text-align: center;" >
< p class = "quote" style = "color: #FAFAFA;" > 要背就是没懂< br > 真懂了不用背< / p >
< / div >
<!-- 11. 金句 4 -- >
< div class = "slide" id = "slide-11" style = "background: #1A1A1A; justify-content: center; align-items: center; text-align: center;" >
< p class = "quote" style = "color: #FAFAFA;" > 做 4 年的事< br > 花 1 年想清楚< / p >
< / div >
<!-- 12. 尾页:关键词,极简 -->
< div class = "slide" id = "slide-12" style = "background: #FAF8F5; justify-content: center; align-items: center; text-align: center;" >
< h2 style = "color: #1A1A1A; margin-bottom: 32px;" > 关键词< / h2 >
< p class = "lead" style = "color: #4A4A4A; font-size: 28px;" > 产品化自己 · 欲望合约 · 秘书定理 · 默认说不 · 灵感过期< / p >
< p style = "color: #8A8A8A; font-size: 18px; margin-top: 48px;" > 木(方法)→ 火(认知)→ 日常按金句提醒自己< / p >
< / div >
< / body >
< / html >