Spaces:

smjain
/

selfishgene

Running

App Files Files Community

smjain commited on Apr 2

Commit

a14a321

verified ·

1 Parent(s): ac62d55

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +281 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Selfishgene
-emoji: 🏆
-colorFrom: blue
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: selfishgene
+emoji: 🐳
+colorFrom: red
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,281 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>The Selfish Gene - Chapter Summaries</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .chapter-card {
+            transition: all 0.3s ease;
+            transform-origin: top;
+        }
+        .chapter-card:hover {
+            transform: scale(1.02);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        .chapter-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.5s ease;
+        }
+        .chapter-content.open {
+            max-height: 1000px;
+        }
+        .active-tab {
+            border-bottom: 3px solid #3b82f6;
+            color: #3b82f6;
+        }
+        .search-highlight {
+            background-color: #fef08a;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="text-center mb-12">
+            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">The Selfish Gene</h1>
+            <p class="text-xl text-gray-600 mb-6">by Richard Dawkins</p>
+            <div class="relative max-w-2xl mx-auto">
+                <input type="text" id="searchInput" placeholder="Search chapters..."
+                       class="w-full px-6 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm">
+                <i class="fas fa-search absolute right-6 top-3.5 text-gray-400"></i>
+            </div>
+        </header>
+        <!-- Tabs -->
+        <div class="flex overflow-x-auto mb-8 border-b border-gray-200">
+            <button class="tab-btn px-6 py-3 font-medium text-gray-600 whitespace-nowrap" data-tab="all">All Chapters</button>
+            <button class="tab-btn px-6 py-3 font-medium text-gray-600 whitespace-nowrap" data-tab="core">Core Ideas</button>
+            <button class="tab-btn px-6 py-3 font-medium text-gray-600 whitespace-nowrap" data-tab="examples">Examples</button>
+        </div>
+        <!-- Chapters Container -->
+        <div id="chaptersContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Chapters will be inserted here by JavaScript -->
+        </div>
+        <!-- Back to Top Button -->
+        <button id="backToTop" class="fixed bottom-6 right-6 bg-blue-500 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
+            <i class="fas fa-arrow-up"></i>
+        </button>
+    </div>
+    <script>
+        // Book data
+        const chapters = [
+            {
+                title: "Chapter 1: Why are people?",
+                coreIdea: "Life on earth evolved through natural selection. Dawkins argues against group or species-level explanations for behavior, insisting instead that genes drive evolution.",
+                explanation: "Animals behave selfishly because genes promoting their own survival reproduce better.",
+                example: "Blackheaded gulls eat neighbor's chicks secretly for easy food, a clear selfish behavior that helps their genes spread."
+            },
+            {
+                title: "Chapter 2: The replicators",
+                coreIdea: "Life started with molecules capable of copying themselves, called 'replicators.' These replicators evolved through natural selection by becoming stable, fast, and accurate at copying themselves.",
+                explanation: "Early replicators accidentally made copying mistakes (mutations), which sometimes produced improvements, kickstarting evolution.",
+                example: "Like a document copied many times by hand, occasional errors creep in. If an error makes the copy better at replicating, it spreads more widely."
+            },
+            {
+                title: "Chapter 3: Immortal coils",
+                coreIdea: "Genes, specifically DNA molecules, are modern replicators. Dawkins explains how these genes build complex survival machines (organisms) to preserve themselves.",
+                explanation: "DNA stores 'blueprints' for building organisms. Bodies are temporary structures created to protect and pass on genes.",
+                example: "Every cell in your body holds DNA instructions ('architectural plans') for building you, copied perfectly billions of times, passing your genes forward."
+            },
+            {
+                title: "Chapter 4: The gene machine",
+                coreIdea: "Organisms (survival machines) evolved to protect and spread genes, which indirectly control the bodies carrying them. Dawkins emphasizes that genes 'program' organisms for their own benefit.",
+                explanation: "Genes control bodies by creating proteins that build structures (eyes, limbs) and influence behavior to maximize their survival.",
+                example: "A bird's wings, controlled by genes, evolved because flight helps the genes spread, not because flight is good for the bird species."
+            },
+            {
+                title: "Chapter 5: Aggression: stability and the selfish machine",
+                coreIdea: "Aggressive behavior is explained through game theory and evolutionary stability. Genes evolve strategies that cannot easily be defeated by others, creating stable patterns in nature.",
+                explanation: "Animals use aggressive strategies that balance risks and benefits, evolving stable behaviors.",
+                example: "Animals often bluff or display aggression rather than fight directly because direct combat is risky, but threats are effective and stable strategies."
+            },
+            {
+                title: "Chapter 6: Genesmanship",
+                coreIdea: "Dawkins explores how genes influence behaviors beyond aggression, manipulating their environment—including other organisms—to spread themselves.",
+                explanation: "Genes evolve to manipulate not just bodies but interactions, producing cunning strategies to outwit rivals.",
+                example: "Parasites manipulate host behavior to spread themselves (like certain viruses that cause sneezing or coughing, effectively spreading genes)."
+            },
+            {
+                title: "Chapter 7: Family planning",
+                coreIdea: "Family relationships (parent-offspring) involve conflicts of genetic interest. Dawkins describes how genes promote certain familial strategies for their benefit.",
+                explanation: "Parents balance resource allocation among offspring to optimize gene survival. Offspring compete for parental resources.",
+                example: "Baby birds loudly demand food, manipulating parents to invest heavily in their survival, often more than the parents genetically 'prefer.'"
+            },
+            {
+                title: "Chapter 8: Battle of the generations",
+                coreIdea: "Conflict between generations arises from differing genetic interests, especially in reproduction and resource allocation.",
+                explanation: "Genes balance the resources given to current offspring against resources for future offspring, causing conflicts.",
+                example: "A fetus may chemically signal its mother's body to gain extra nutrition, causing pregnancy stress, reflecting a genetic tug-of-war."
+            },
+            {
+                title: "Chapter 9: Battle of the sexes",
+                coreIdea: "Sexual reproduction involves genetic conflict between males and females. Dawkins describes how genes exploit strategies to maximize reproductive success.",
+                explanation: "Males typically invest less in offspring, females more. Genes lead males to compete for mates, females to choose carefully.",
+                example: "Male birds develop bright feathers to attract females. Females choose the brightest male because brightness signals good genes."
+            },
+            {
+                title: "Chapter 10: You scratch my back, I'll ride on yours",
+                coreIdea: "Explains cooperation and mutual benefit through reciprocal altruism. Cooperation evolves when organisms benefit from exchanging favors.",
+                explanation: "Animals cooperate if both sides gain genetic advantages over time.",
+                example: "Vampire bats share blood meals with others who previously helped them, ensuring survival when food is scarce."
+            },
+            {
+                title: "Chapter 11: Memes: the new replicators",
+                coreIdea: "Dawkins introduces 'memes,' cultural units (ideas, behaviors, beliefs) that replicate similarly to genes, spreading culturally rather than biologically.",
+                explanation: "Cultural ideas spread because they replicate well, independently of biological advantage.",
+                example: "Songs, jokes, fashion trends spread rapidly by imitation, similar to how genes replicate biologically."
+            },
+            {
+                title: "Chapter 12: Nice guys finish first",
+                coreIdea: "'Nice' (cooperative) strategies often outperform selfish ones over time. Dawkins explains the evolution of cooperation using game theory, particularly the 'Tit-for-Tat' strategy.",
+                explanation: "'Tit-for-Tat'—cooperate first, then copy the other player—proves successful in long-term interactions.",
+                example: "Animals grooming each other cooperate by mutual benefit; those who cheat lose long-term help, making cooperation a stable strategy."
+            },
+            {
+                title: "Chapter 13: The long reach of the gene",
+                coreIdea: "Genes' influence extends far beyond individual bodies, shaping environments and interactions among organisms. Dawkins explains 'extended phenotypes.'",
+                explanation: "Genes indirectly control features outside their organism's body, shaping their environment to improve survival chances.",
+                example: "Beaver dams represent genes indirectly creating environmental conditions that enhance survival, illustrating the gene's far-reaching influence."
+            }
+        ];
+        // DOM Elements
+        const chaptersContainer = document.getElementById('chaptersContainer');
+        const searchInput = document.getElementById('searchInput');
+        const tabButtons = document.querySelectorAll('.tab-btn');
+        const backToTopBtn = document.getElementById('backToTop');
+        // Current filter state
+        let currentTab = 'all';
+        let currentSearchTerm = '';
+        // Initialize the app
+        function init() {
+            renderChapters();
+            setupEventListeners();
+        }
+        // Render chapters based on current filters
+        function renderChapters() {
+            chaptersContainer.innerHTML = '';
+            const filteredChapters = chapters.filter(chapter => {
+                // Filter by search term
+                const matchesSearch = currentSearchTerm === '' ||
+                    chapter.title.toLowerCase().includes(currentSearchTerm) ||
+                    chapter.coreIdea.toLowerCase().includes(currentSearchTerm) ||
+                    chapter.explanation.toLowerCase().includes(currentSearchTerm) ||
+                    chapter.example.toLowerCase().includes(currentSearchTerm);
+                return matchesSearch;
+            });
+            filteredChapters.forEach((chapter, index) => {
+                const chapterCard = document.createElement('div');
+                chapterCard.className = 'chapter-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100';
+                chapterCard.innerHTML = `
+                    <div class="p-6 cursor-pointer" onclick="toggleChapterContent(${index})">
+                        <div class="flex justify-between items-start">
+                            <h3 class="text-xl font-bold text-gray-800 mb-2">${chapter.title}</h3>
+                            <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300" id="chevron-${index}"></i>
+                        </div>
+                        ${currentTab === 'all' || currentTab === 'core' ? `
+                        <div class="mt-3">
+                            <h4 class="font-semibold text-gray-700">Core Idea:</h4>
+                            <p class="text-gray-600 mt-1">${highlightSearchTerms(chapter.coreIdea)}</p>
+                        </div>
+                        ` : ''}
+                    </div>
+                    <div class="chapter-content px-6 pb-6" id="content-${index}">
+                        ${currentTab === 'all' || currentTab === 'core' ? `
+                        <div class="mt-4">
+                            <h4 class="font-semibold text-gray-700">Explanation:</h4>
+                            <p class="text-gray-600 mt-1">${highlightSearchTerms(chapter.explanation)}</p>
+                        </div>
+                        ` : ''}
+                        ${currentTab === 'all' || currentTab === 'examples' ? `
+                        <div class="mt-4">
+                            <h4 class="font-semibold text-gray-700">Example:</h4>
+                            <p class="text-gray-600 mt-1">${highlightSearchTerms(chapter.example)}</p>
+                        </div>
+                        ` : ''}
+                    </div>
+                `;
+                chaptersContainer.appendChild(chapterCard);
+            });
+        }
+        // Highlight search terms in text
+        function highlightSearchTerms(text) {
+            if (!currentSearchTerm) return text;
+            const regex = new RegExp(currentSearchTerm, 'gi');
+            return text.replace(regex, match =>
+                `<span class="search-highlight">${match}</span>`
+            );
+        }
+        // Toggle chapter content visibility
+        function toggleChapterContent(index) {
+            const content = document.getElementById(`content-${index}`);
+            const chevron = document.getElementById(`chevron-${index}`);
+            content.classList.toggle('open');
+            chevron.classList.toggle('rotate-180');
+        }
+        // Set up event listeners
+        function setupEventListeners() {
+            // Search input
+            searchInput.addEventListener('input', (e) => {
+                currentSearchTerm = e.target.value.toLowerCase().trim();
+                renderChapters();
+            });
+            // Tab buttons
+            tabButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    currentTab = button.dataset.tab;
+                    tabButtons.forEach(btn => btn.classList.remove('active-tab'));
+                    button.classList.add('active-tab');
+                    renderChapters();
+                });
+            });
+            // Set first tab as active by default
+            tabButtons[0].classList.add('active-tab');
+            // Back to top button
+            window.addEventListener('scroll', () => {
+                if (window.pageYOffset > 300) {
+                    backToTopBtn.classList.remove('opacity-0', 'invisible');
+                    backToTopBtn.classList.add('opacity-100', 'visible');
+                } else {
+                    backToTopBtn.classList.remove('opacity-100', 'visible');
+                    backToTopBtn.classList.add('opacity-0', 'invisible');
+                }
+            });
+            backToTopBtn.addEventListener('click', () => {
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            });
+        }
+        // Make toggle function available globally
+        window.toggleChapterContent = toggleChapterContent;
+        // Initialize the app
+        document.addEventListener('DOMContentLoaded', init);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=smjain/selfishgene" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>