mirror of
https://github.com/bytedance/deer-flow.git
synced 2026-05-24 17:06:00 +00:00
ci: enforce code formatting checks for backend and frontend (#1536)
This commit is contained in:
greatmengqi
+316
-226
@@ -1,264 +1,354 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Pride and Prejudice | Jane Austen</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="nav">
|
||||
<div class="nav-brand">P&P</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#characters">Characters</a></li>
|
||||
<li><a href="#themes">Themes</a></li>
|
||||
<li><a href="#quotes">Quotes</a></li>
|
||||
</ul>
|
||||
<div class="nav-brand">P&P</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#characters">Characters</a></li>
|
||||
<li><a href="#themes">Themes</a></li>
|
||||
<li><a href="#quotes">Quotes</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-bg">
|
||||
<div class="hero-pattern"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<p class="hero-subtitle">A Novel by</p>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line">Pride</span>
|
||||
<span class="title-ampersand">&</span>
|
||||
<span class="title-line">Prejudice</span>
|
||||
</h1>
|
||||
<p class="hero-author">Jane Austen</p>
|
||||
<p class="hero-year">1813</p>
|
||||
<div class="hero-divider">
|
||||
<span class="divider-line"></span>
|
||||
<span class="divider-ornament">❦</span>
|
||||
<span class="divider-line"></span>
|
||||
</div>
|
||||
<p class="hero-tagline">"It is a truth universally acknowledged..."</p>
|
||||
<a href="#about" class="hero-cta">
|
||||
<span>Discover the Story</span>
|
||||
<svg class="cta-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M12 5v14M5 12l7 7 7-7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="hero-scroll-indicator">
|
||||
<div class="scroll-line"></div>
|
||||
<div class="hero-bg">
|
||||
<div class="hero-pattern"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<p class="hero-subtitle">A Novel by</p>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line">Pride</span>
|
||||
<span class="title-ampersand">&</span>
|
||||
<span class="title-line">Prejudice</span>
|
||||
</h1>
|
||||
<p class="hero-author">Jane Austen</p>
|
||||
<p class="hero-year">1813</p>
|
||||
<div class="hero-divider">
|
||||
<span class="divider-line"></span>
|
||||
<span class="divider-ornament">❦</span>
|
||||
<span class="divider-line"></span>
|
||||
</div>
|
||||
<p class="hero-tagline">"It is a truth universally acknowledged..."</p>
|
||||
<a href="#about" class="hero-cta">
|
||||
<span>Discover the Story</span>
|
||||
<svg
|
||||
class="cta-arrow"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
>
|
||||
<path d="M12 5v14M5 12l7 7 7-7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="hero-scroll-indicator">
|
||||
<div class="scroll-line"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="about">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-number">01</span>
|
||||
<h2 class="section-title">The Novel</h2>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<div class="about-text">
|
||||
<p class="about-lead">Set in rural England in the early 19th century, <em>Pride and Prejudice</em> tells the story of the Bennet family and their five unmarried daughters.</p>
|
||||
<p>When the wealthy and eligible Mr. Bingley rents a nearby estate, Mrs. Bennet sees an opportunity to marry off her eldest daughter, Jane. At a ball, Jane forms an attachment to Mr. Bingley, while her sister Elizabeth meets his friend, the proud Mr. Darcy.</p>
|
||||
<p>What follows is a masterful exploration of manners, morality, education, and marriage in the society of the landed gentry of early 19th-century England.</p>
|
||||
</div>
|
||||
<div class="about-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">61</span>
|
||||
<span class="stat-label">Chapters</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">122K</span>
|
||||
<span class="stat-label">Words</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">20M+</span>
|
||||
<span class="stat-label">Copies Sold</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-number">01</span>
|
||||
<h2 class="section-title">The Novel</h2>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<div class="about-text">
|
||||
<p class="about-lead">
|
||||
Set in rural England in the early 19th century,
|
||||
<em>Pride and Prejudice</em> tells the story of the Bennet family
|
||||
and their five unmarried daughters.
|
||||
</p>
|
||||
<p>
|
||||
When the wealthy and eligible Mr. Bingley rents a nearby estate,
|
||||
Mrs. Bennet sees an opportunity to marry off her eldest daughter,
|
||||
Jane. At a ball, Jane forms an attachment to Mr. Bingley, while
|
||||
her sister Elizabeth meets his friend, the proud Mr. Darcy.
|
||||
</p>
|
||||
<p>
|
||||
What follows is a masterful exploration of manners, morality,
|
||||
education, and marriage in the society of the landed gentry of
|
||||
early 19th-century England.
|
||||
</p>
|
||||
</div>
|
||||
<div class="about-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">61</span>
|
||||
<span class="stat-label">Chapters</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">122K</span>
|
||||
<span class="stat-label">Words</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">20M+</span>
|
||||
<span class="stat-label">Copies Sold</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Characters Section -->
|
||||
<section id="characters" class="characters">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-number">02</span>
|
||||
<h2 class="section-title">The Characters</h2>
|
||||
</div>
|
||||
<div class="characters-grid">
|
||||
<div class="character-card featured">
|
||||
<div class="character-portrait elizabeth"></div>
|
||||
<div class="character-info">
|
||||
<h3>Elizabeth Bennet</h3>
|
||||
<p class="character-role">The Protagonist</p>
|
||||
<p class="character-desc">Intelligent, witty, and independent, Elizabeth navigates society's expectations while staying true to her principles.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-card featured">
|
||||
<div class="character-portrait darcy"></div>
|
||||
<div class="character-info">
|
||||
<h3>Fitzwilliam Darcy</h3>
|
||||
<p class="character-role">The Romantic Lead</p>
|
||||
<p class="character-desc">Wealthy, reserved, and initially perceived as arrogant, Darcy's true character is revealed through his actions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-card">
|
||||
<div class="character-portrait jane"></div>
|
||||
<div class="character-info">
|
||||
<h3>Jane Bennet</h3>
|
||||
<p class="character-role">The Eldest Sister</p>
|
||||
<p class="character-desc">Beautiful, gentle, and always sees the best in people.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-card">
|
||||
<div class="character-portrait bingley"></div>
|
||||
<div class="character-info">
|
||||
<h3>Charles Bingley</h3>
|
||||
<p class="character-role">The Amiable Gentleman</p>
|
||||
<p class="character-desc">Wealthy, good-natured, and easily influenced by his friends.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-card">
|
||||
<div class="character-portrait lydia"></div>
|
||||
<div class="character-info">
|
||||
<h3>Lydia Bennet</h3>
|
||||
<p class="character-role">The Youngest Sister</p>
|
||||
<p class="character-desc">Frivolous, flirtatious, and impulsive, causing family scandal.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-card">
|
||||
<div class="character-portrait wickham"></div>
|
||||
<div class="character-info">
|
||||
<h3>George Wickham</h3>
|
||||
<p class="character-role">The Antagonist</p>
|
||||
<p class="character-desc">Charming on the surface but deceitful and manipulative.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-number">02</span>
|
||||
<h2 class="section-title">The Characters</h2>
|
||||
</div>
|
||||
<div class="characters-grid">
|
||||
<div class="character-card featured">
|
||||
<div class="character-portrait elizabeth"></div>
|
||||
<div class="character-info">
|
||||
<h3>Elizabeth Bennet</h3>
|
||||
<p class="character-role">The Protagonist</p>
|
||||
<p class="character-desc">
|
||||
Intelligent, witty, and independent, Elizabeth navigates
|
||||
society's expectations while staying true to her principles.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-card featured">
|
||||
<div class="character-portrait darcy"></div>
|
||||
<div class="character-info">
|
||||
<h3>Fitzwilliam Darcy</h3>
|
||||
<p class="character-role">The Romantic Lead</p>
|
||||
<p class="character-desc">
|
||||
Wealthy, reserved, and initially perceived as arrogant, Darcy's
|
||||
true character is revealed through his actions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-card">
|
||||
<div class="character-portrait jane"></div>
|
||||
<div class="character-info">
|
||||
<h3>Jane Bennet</h3>
|
||||
<p class="character-role">The Eldest Sister</p>
|
||||
<p class="character-desc">
|
||||
Beautiful, gentle, and always sees the best in people.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-card">
|
||||
<div class="character-portrait bingley"></div>
|
||||
<div class="character-info">
|
||||
<h3>Charles Bingley</h3>
|
||||
<p class="character-role">The Amiable Gentleman</p>
|
||||
<p class="character-desc">
|
||||
Wealthy, good-natured, and easily influenced by his friends.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-card">
|
||||
<div class="character-portrait lydia"></div>
|
||||
<div class="character-info">
|
||||
<h3>Lydia Bennet</h3>
|
||||
<p class="character-role">The Youngest Sister</p>
|
||||
<p class="character-desc">
|
||||
Frivolous, flirtatious, and impulsive, causing family scandal.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-card">
|
||||
<div class="character-portrait wickham"></div>
|
||||
<div class="character-info">
|
||||
<h3>George Wickham</h3>
|
||||
<p class="character-role">The Antagonist</p>
|
||||
<p class="character-desc">
|
||||
Charming on the surface but deceitful and manipulative.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Themes Section -->
|
||||
<section id="themes" class="themes">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-number">03</span>
|
||||
<h2 class="section-title">Themes</h2>
|
||||
</div>
|
||||
<div class="themes-content">
|
||||
<div class="theme-item">
|
||||
<div class="theme-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z"/>
|
||||
<path d="M24 12v20M16 24h16"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Pride</h3>
|
||||
<p>Darcy's pride in his social position initially prevents him from acknowledging his feelings for Elizabeth, while Elizabeth's pride in her discernment blinds her to Darcy's true character.</p>
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<div class="theme-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M24 4l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Prejudice</h3>
|
||||
<p>Elizabeth's prejudice against Darcy, formed from their first meeting and Wickham's lies, nearly costs her happiness. The novel shows how first impressions can be misleading.</p>
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<div class="theme-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z"/>
|
||||
<path d="M14 24c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Marriage</h3>
|
||||
<p>The novel examines marriage from multiple perspectives: for love, for security, for social advancement, and the rare ideal of marrying for both love and compatibility.</p>
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<div class="theme-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M12 12h24v24H12z"/>
|
||||
<path d="M12 12l24 24M36 12L12 36"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Class</h3>
|
||||
<p>The rigid class structure of Regency England shapes every interaction, from who may marry whom to how characters are judged by their connections and fortune.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-number">03</span>
|
||||
<h2 class="section-title">Themes</h2>
|
||||
</div>
|
||||
<div class="themes-content">
|
||||
<div class="theme-item">
|
||||
<div class="theme-icon">
|
||||
<svg
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
>
|
||||
<path
|
||||
d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z"
|
||||
/>
|
||||
<path d="M24 12v20M16 24h16" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Pride</h3>
|
||||
<p>
|
||||
Darcy's pride in his social position initially prevents him from
|
||||
acknowledging his feelings for Elizabeth, while Elizabeth's pride
|
||||
in her discernment blinds her to Darcy's true character.
|
||||
</p>
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<div class="theme-icon">
|
||||
<svg
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
>
|
||||
<path d="M24 4l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Prejudice</h3>
|
||||
<p>
|
||||
Elizabeth's prejudice against Darcy, formed from their first
|
||||
meeting and Wickham's lies, nearly costs her happiness. The novel
|
||||
shows how first impressions can be misleading.
|
||||
</p>
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<div class="theme-icon">
|
||||
<svg
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
>
|
||||
<path
|
||||
d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z"
|
||||
/>
|
||||
<path
|
||||
d="M14 24c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Marriage</h3>
|
||||
<p>
|
||||
The novel examines marriage from multiple perspectives: for love,
|
||||
for security, for social advancement, and the rare ideal of
|
||||
marrying for both love and compatibility.
|
||||
</p>
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<div class="theme-icon">
|
||||
<svg
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
>
|
||||
<path d="M12 12h24v24H12z" />
|
||||
<path d="M12 12l24 24M36 12L12 36" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Class</h3>
|
||||
<p>
|
||||
The rigid class structure of Regency England shapes every
|
||||
interaction, from who may marry whom to how characters are judged
|
||||
by their connections and fortune.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Famous Quotes Section -->
|
||||
<section id="quotes" class="quotes">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-number">04</span>
|
||||
<h2 class="section-title">Memorable Quotes</h2>
|
||||
</div>
|
||||
<div class="quotes-slider">
|
||||
<div class="quote-card active">
|
||||
<span class="quote-mark">"</span>
|
||||
<blockquote>It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</blockquote>
|
||||
<cite>— Opening Line</cite>
|
||||
</div>
|
||||
<div class="quote-card">
|
||||
<span class="quote-mark">"</span>
|
||||
<blockquote>I could easily forgive his pride, if he had not mortified mine.</blockquote>
|
||||
<cite>— Elizabeth Bennet</cite>
|
||||
</div>
|
||||
<div class="quote-card">
|
||||
<span class="quote-mark">"</span>
|
||||
<blockquote>You have bewitched me, body and soul, and I love, I love, I love you.</blockquote>
|
||||
<cite>— Mr. Darcy</cite>
|
||||
</div>
|
||||
<div class="quote-card">
|
||||
<span class="quote-mark">"</span>
|
||||
<blockquote>Till this moment I never knew myself.</blockquote>
|
||||
<cite>— Elizabeth Bennet</cite>
|
||||
</div>
|
||||
<div class="quote-card">
|
||||
<span class="quote-mark">"</span>
|
||||
<blockquote>My good opinion once lost, is lost forever.</blockquote>
|
||||
<cite>— Mr. Darcy</cite>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quotes-nav">
|
||||
<button class="quote-dot active" data-index="0"></button>
|
||||
<button class="quote-dot" data-index="1"></button>
|
||||
<button class="quote-dot" data-index="2"></button>
|
||||
<button class="quote-dot" data-index="3"></button>
|
||||
<button class="quote-dot" data-index="4"></button>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-number">04</span>
|
||||
<h2 class="section-title">Memorable Quotes</h2>
|
||||
</div>
|
||||
<div class="quotes-slider">
|
||||
<div class="quote-card active">
|
||||
<span class="quote-mark">"</span>
|
||||
<blockquote>
|
||||
It is a truth universally acknowledged, that a single man in
|
||||
possession of a good fortune, must be in want of a wife.
|
||||
</blockquote>
|
||||
<cite>— Opening Line</cite>
|
||||
</div>
|
||||
<div class="quote-card">
|
||||
<span class="quote-mark">"</span>
|
||||
<blockquote>
|
||||
I could easily forgive his pride, if he had not mortified mine.
|
||||
</blockquote>
|
||||
<cite>— Elizabeth Bennet</cite>
|
||||
</div>
|
||||
<div class="quote-card">
|
||||
<span class="quote-mark">"</span>
|
||||
<blockquote>
|
||||
You have bewitched me, body and soul, and I love, I love, I love
|
||||
you.
|
||||
</blockquote>
|
||||
<cite>— Mr. Darcy</cite>
|
||||
</div>
|
||||
<div class="quote-card">
|
||||
<span class="quote-mark">"</span>
|
||||
<blockquote>Till this moment I never knew myself.</blockquote>
|
||||
<cite>— Elizabeth Bennet</cite>
|
||||
</div>
|
||||
<div class="quote-card">
|
||||
<span class="quote-mark">"</span>
|
||||
<blockquote>My good opinion once lost, is lost forever.</blockquote>
|
||||
<cite>— Mr. Darcy</cite>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quotes-nav">
|
||||
<button class="quote-dot active" data-index="0"></button>
|
||||
<button class="quote-dot" data-index="1"></button>
|
||||
<button class="quote-dot" data-index="2"></button>
|
||||
<button class="quote-dot" data-index="3"></button>
|
||||
<button class="quote-dot" data-index="4"></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<span class="footer-logo">P&P</span>
|
||||
<p>A timeless masterpiece of English literature</p>
|
||||
</div>
|
||||
<div class="footer-divider">
|
||||
<span class="divider-ornament">❦</span>
|
||||
</div>
|
||||
<p class="footer-credit">Based on the 1813 novel by Jane Austen</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<span class="footer-logo">P&P</span>
|
||||
<p>A timeless masterpiece of English literature</p>
|
||||
</div>
|
||||
<div class="footer-divider">
|
||||
<span class="divider-ornament">❦</span>
|
||||
</div>
|
||||
<p class="footer-credit">Based on the 1813 novel by Jane Austen</p>
|
||||
</div>
|
||||
<a href="https://deerflow.tech" target="_blank" class="deerflow-signature">
|
||||
<span class="signature-text">Created By Deerflow</span>
|
||||
<span class="signature-icon">✦</span>
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
href="https://deerflow.tech"
|
||||
target="_blank"
|
||||
class="deerflow-signature"
|
||||
>
|
||||
<span class="signature-text">Created By Deerflow</span>
|
||||
<span class="signature-icon">✦</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+138
-135
@@ -1,177 +1,180 @@
|
||||
// Pride and Prejudice - Interactive Features
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Navigation scroll effect
|
||||
initNavigation();
|
||||
|
||||
// Quotes slider
|
||||
initQuotesSlider();
|
||||
|
||||
// Scroll reveal animations
|
||||
initScrollReveal();
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
initSmoothScroll();
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Navigation scroll effect
|
||||
initNavigation();
|
||||
|
||||
// Quotes slider
|
||||
initQuotesSlider();
|
||||
|
||||
// Scroll reveal animations
|
||||
initScrollReveal();
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
initSmoothScroll();
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// NAVIGATION SCROLL EFFECT
|
||||
// ============================================
|
||||
function initNavigation() {
|
||||
const nav = document.querySelector('.nav');
|
||||
let lastScroll = 0;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
// Add/remove scrolled class
|
||||
if (currentScroll > 100) {
|
||||
nav.classList.add('scrolled');
|
||||
} else {
|
||||
nav.classList.remove('scrolled');
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
const nav = document.querySelector(".nav");
|
||||
let lastScroll = 0;
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
// Add/remove scrolled class
|
||||
if (currentScroll > 100) {
|
||||
nav.classList.add("scrolled");
|
||||
} else {
|
||||
nav.classList.remove("scrolled");
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// QUOTES SLIDER
|
||||
// ============================================
|
||||
function initQuotesSlider() {
|
||||
const quotes = document.querySelectorAll('.quote-card');
|
||||
const dots = document.querySelectorAll('.quote-dot');
|
||||
let currentIndex = 0;
|
||||
let autoSlideInterval;
|
||||
|
||||
function showQuote(index) {
|
||||
// Remove active class from all quotes and dots
|
||||
quotes.forEach(quote => quote.classList.remove('active'));
|
||||
dots.forEach(dot => dot.classList.remove('active'));
|
||||
|
||||
// Add active class to current quote and dot
|
||||
quotes[index].classList.add('active');
|
||||
dots[index].classList.add('active');
|
||||
|
||||
currentIndex = index;
|
||||
}
|
||||
|
||||
function nextQuote() {
|
||||
const nextIndex = (currentIndex + 1) % quotes.length;
|
||||
showQuote(nextIndex);
|
||||
}
|
||||
|
||||
// Dot click handlers
|
||||
dots.forEach((dot, index) => {
|
||||
dot.addEventListener('click', () => {
|
||||
showQuote(index);
|
||||
resetAutoSlide();
|
||||
});
|
||||
const quotes = document.querySelectorAll(".quote-card");
|
||||
const dots = document.querySelectorAll(".quote-dot");
|
||||
let currentIndex = 0;
|
||||
let autoSlideInterval;
|
||||
|
||||
function showQuote(index) {
|
||||
// Remove active class from all quotes and dots
|
||||
quotes.forEach((quote) => quote.classList.remove("active"));
|
||||
dots.forEach((dot) => dot.classList.remove("active"));
|
||||
|
||||
// Add active class to current quote and dot
|
||||
quotes[index].classList.add("active");
|
||||
dots[index].classList.add("active");
|
||||
|
||||
currentIndex = index;
|
||||
}
|
||||
|
||||
function nextQuote() {
|
||||
const nextIndex = (currentIndex + 1) % quotes.length;
|
||||
showQuote(nextIndex);
|
||||
}
|
||||
|
||||
// Dot click handlers
|
||||
dots.forEach((dot, index) => {
|
||||
dot.addEventListener("click", () => {
|
||||
showQuote(index);
|
||||
resetAutoSlide();
|
||||
});
|
||||
|
||||
// Auto-slide functionality
|
||||
function startAutoSlide() {
|
||||
autoSlideInterval = setInterval(nextQuote, 6000);
|
||||
}
|
||||
|
||||
function resetAutoSlide() {
|
||||
clearInterval(autoSlideInterval);
|
||||
startAutoSlide();
|
||||
}
|
||||
|
||||
// Start auto-slide
|
||||
});
|
||||
|
||||
// Auto-slide functionality
|
||||
function startAutoSlide() {
|
||||
autoSlideInterval = setInterval(nextQuote, 6000);
|
||||
}
|
||||
|
||||
function resetAutoSlide() {
|
||||
clearInterval(autoSlideInterval);
|
||||
startAutoSlide();
|
||||
|
||||
// Pause on hover
|
||||
const slider = document.querySelector('.quotes-slider');
|
||||
slider.addEventListener('mouseenter', () => clearInterval(autoSlideInterval));
|
||||
slider.addEventListener('mouseleave', startAutoSlide);
|
||||
}
|
||||
|
||||
// Start auto-slide
|
||||
startAutoSlide();
|
||||
|
||||
// Pause on hover
|
||||
const slider = document.querySelector(".quotes-slider");
|
||||
slider.addEventListener("mouseenter", () => clearInterval(autoSlideInterval));
|
||||
slider.addEventListener("mouseleave", startAutoSlide);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// SCROLL REVEAL ANIMATIONS
|
||||
// ============================================
|
||||
function initScrollReveal() {
|
||||
const revealElements = document.querySelectorAll(
|
||||
'.about-content, .character-card, .theme-item, .section-header'
|
||||
);
|
||||
|
||||
const revealOptions = {
|
||||
threshold: 0.15,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
// Add staggered delay for grid items
|
||||
const delay = entry.target.classList.contains('character-card') ||
|
||||
entry.target.classList.contains('theme-item')
|
||||
? index * 100
|
||||
: 0;
|
||||
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add('reveal');
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}, delay);
|
||||
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, revealOptions);
|
||||
|
||||
revealElements.forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(30px)';
|
||||
el.style.transition = 'opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)';
|
||||
revealObserver.observe(el);
|
||||
const revealElements = document.querySelectorAll(
|
||||
".about-content, .character-card, .theme-item, .section-header",
|
||||
);
|
||||
|
||||
const revealOptions = {
|
||||
threshold: 0.15,
|
||||
rootMargin: "0px 0px -50px 0px",
|
||||
};
|
||||
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
// Add staggered delay for grid items
|
||||
const delay =
|
||||
entry.target.classList.contains("character-card") ||
|
||||
entry.target.classList.contains("theme-item")
|
||||
? index * 100
|
||||
: 0;
|
||||
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add("reveal");
|
||||
entry.target.style.opacity = "1";
|
||||
entry.target.style.transform = "translateY(0)";
|
||||
}, delay);
|
||||
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, revealOptions);
|
||||
|
||||
revealElements.forEach((el) => {
|
||||
el.style.opacity = "0";
|
||||
el.style.transform = "translateY(30px)";
|
||||
el.style.transition =
|
||||
"opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)";
|
||||
revealObserver.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// SMOOTH SCROLL FOR ANCHOR LINKS
|
||||
// ============================================
|
||||
function initSmoothScroll() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
|
||||
if (target) {
|
||||
const navHeight = document.querySelector('.nav').offsetHeight;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||
anchor.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute("href"));
|
||||
|
||||
if (target) {
|
||||
const navHeight = document.querySelector(".nav").offsetHeight;
|
||||
const targetPosition =
|
||||
target.getBoundingClientRect().top + window.pageYOffset - navHeight;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// PARALLAX EFFECT FOR HERO
|
||||
// ============================================
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrolled = window.pageYOffset;
|
||||
const heroPattern = document.querySelector('.hero-pattern');
|
||||
|
||||
if (heroPattern && scrolled < window.innerHeight) {
|
||||
heroPattern.style.transform = `translateY(${scrolled * 0.3}px) rotate(${scrolled * 0.02}deg)`;
|
||||
}
|
||||
window.addEventListener("scroll", () => {
|
||||
const scrolled = window.pageYOffset;
|
||||
const heroPattern = document.querySelector(".hero-pattern");
|
||||
|
||||
if (heroPattern && scrolled < window.innerHeight) {
|
||||
heroPattern.style.transform = `translateY(${scrolled * 0.3}px) rotate(${scrolled * 0.02}deg)`;
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// CHARACTER CARD HOVER EFFECT
|
||||
// ============================================
|
||||
document.querySelectorAll('.character-card').forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.zIndex = '10';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.zIndex = '1';
|
||||
});
|
||||
document.querySelectorAll(".character-card").forEach((card) => {
|
||||
card.addEventListener("mouseenter", function () {
|
||||
this.style.zIndex = "10";
|
||||
});
|
||||
|
||||
card.addEventListener("mouseleave", function () {
|
||||
this.style.zIndex = "1";
|
||||
});
|
||||
});
|
||||
|
||||
+613
-553
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user