From 7c05e0c41425995169277fefda61ad890ff6feca Mon Sep 17 00:00:00 2001
From: PhiMarHal <77635908+PhiMarHal@users.noreply.github.com>
Date: Tue, 15 Oct 2024 00:21:33 +0200
Subject: [PATCH] Legacy upload

---
 legacy/app.js     | 189 +++++++++++++++++++++++++++++++++++++++++-----
 legacy/index.html |  53 ++++++++++---
 legacy/news.json  |  19 +++++
 legacy/styles.css | 157 +++++++++++++++++++++++++-------------
 4 files changed, 338 insertions(+), 80 deletions(-)
 create mode 100644 legacy/news.json

diff --git a/legacy/app.js b/legacy/app.js
index 1bc02fc..9463003 100644
--- a/legacy/app.js
+++ b/legacy/app.js
@@ -21,6 +21,116 @@ const HIGHLIGHT_WIDTH = 64; // Number of runes to highlight at once
 let isAnimating = false;
 let animationFrame = null;
 
+function toggleDarkMode() {
+    document.body.classList.toggle('dark-mode');
+    const isDarkMode = document.body.classList.contains('dark-mode');
+    localStorage.setItem('darkMode', isDarkMode);
+
+    const moonIcon = document.querySelector('#darkModeToggle .moon-icon');
+    const sunIcon = document.querySelector('#darkModeToggle .sun-icon');
+
+    if (isDarkMode) {
+        moonIcon.style.display = 'none';
+        sunIcon.style.display = 'inline';
+    } else {
+        moonIcon.style.display = 'inline';
+        sunIcon.style.display = 'none';
+    }
+
+    //updateSVGColors();
+}
+
+function applyDarkMode() {
+    const isDarkMode = localStorage.getItem('darkMode') === 'true';
+    if (isDarkMode) {
+        document.body.classList.add('dark-mode');
+        document.querySelector('#darkModeToggle .moon-icon').style.display = 'none';
+        document.querySelector('#darkModeToggle .sun-icon').style.display = 'inline';
+    } else {
+        document.querySelector('#darkModeToggle .moon-icon').style.display = 'inline';
+        document.querySelector('#darkModeToggle .sun-icon').style.display = 'none';
+    }
+    //updateSVGColors();
+}
+
+async function loadNewsContent() {
+    try {
+        const response = await fetch('news.json');
+        const data = await response.json();
+        return data.news;
+    } catch (error) {
+        console.error('Error loading news:', error);
+        return [];
+    }
+}
+
+async function displayNewsContent() {
+    const newsContent = await loadNewsContent();
+    const storyContent = document.getElementById('storyContent');
+
+    if (newsContent.length === 0) {
+        storyContent.innerHTML = '<p>No news available at this time.</p>';
+        return;
+    }
+
+    let newsHtml = '<h2 style="text-align:center;">NEWS</h2>';
+    newsContent.forEach(item => {
+        newsHtml += `
+            <div class="news-item">
+                <h3>${item.title}</h3>
+                <p class="news-date">${item.date}</p>
+                <p>${item.content}</p>
+            </div>
+        `;
+    });
+
+    storyContent.innerHTML = newsHtml;
+    storyContent.classList.add('news-content');
+}
+
+function toggleNewsContent(e) {
+    e.preventDefault();
+    const storyContent = document.getElementById('storyContent');
+
+    if (storyContent.classList.contains('news-content')) {
+        // Restore the original content
+        storyContent.textContent = cachedPages[currentPage] + ' ' + '\u00A0'.repeat(512);
+        storyContent.classList.remove('news-content');
+    } else {
+        // Show news content
+        displayNewsContent();
+    }
+}
+
+async function addScrollNetwork() {
+    if (typeof window.ethereum !== 'undefined') {
+        try {
+            await window.ethereum.request({
+                method: 'wallet_addEthereumChain',
+                params: [{
+                    chainId: '0x82750', // 534352 in decimal
+                    chainName: 'Scroll',
+                    nativeCurrency: {
+                        name: 'Ethereum',
+                        symbol: 'ETH',
+                        decimals: 18
+                    },
+                    rpcUrls: ['https://rpc.scroll.io'],
+                    blockExplorerUrls: ['https://scrollscan.com/']
+                }]
+            });
+            console.log('Scroll network has been added to the wallet!');
+            return true;
+        } catch (error) {
+            console.error('Failed to add Scroll network:', error);
+            return false;
+        }
+    } else {
+        console.error('MetaMask is not installed');
+        return false;
+    }
+}
+
 function startLoadingAnimation() {
     if (isAnimating) return; // Don't start a new animation if one is already running
 
@@ -181,6 +291,16 @@ function cleanup() {
     }
 }
 
+function filterText(text) {
+    const filters = {
+        'cock': 'chicken',
+        'badword2': 'goodword2',
+        // Add more word pairs as needed
+    };
+
+    return text.replace(/\b(?:cock|badword2)\b/gi, matched => filters[matched.toLowerCase()]);
+}
+
 async function updatePage(pageNumber) {
     startLoadingAnimation();
     try {
@@ -189,13 +309,24 @@ async function updatePage(pageNumber) {
         let pageContent = cachedPages[pageNumber];
         if (!pageContent) {
             pageContent = await readOnlyContract.pageScript(pageNumber);
+            pageContent = filterText(pageContent);
             cachedPages[pageNumber] = pageContent;
         }
 
-        // Add 512 blank spaces to the end of the content
-        pageContent = pageContent + ' ' + '\u00A0'.repeat(512);
+        const storyContent = document.getElementById('storyContent');
+
+        let displayedContent = ' ' + '\u00A0'.repeat(192) + pageContent;
+
+        if (pageContent.trim() === '') {
+            // If the page is empty, display the placeholder text
+            storyContent.innerHTML = displayedContent + '<span style="color: #808080;">A new page unrolls. Be the first to contribute!</span>';
+        } else {
+            // If there's content, display it as before
+            // Add 512 blank spaces to the end of the content
+            displayedContent = displayedContent + ' ' + '\u00A0'.repeat(384);
+            storyContent.textContent = displayedContent;
+        }
 
-        document.getElementById('storyContent').textContent = pageContent;
         currentPage = pageNumber;
         document.getElementById('pageNumber').textContent = `PAGE ${pageNumber}`;
 
@@ -251,6 +382,10 @@ async function initializeApp() {
             console.log("No web3 wallet detected. Read-only mode activated.");
         }
 
+        applyDarkMode();
+        document.getElementById('darkModeToggle').addEventListener('click', toggleDarkMode);
+        document.getElementById('newsIcon').addEventListener('click', toggleNewsContent);
+
         updateWalletStatus();
         await fetchCurrentPage();
         checkContributionCost();
@@ -325,7 +460,8 @@ function setupEventListener() {
 async function updatePageContent(pageNumber) {
     try {
         startLoadingAnimation();
-        const newPageContent = await readOnlyContract.pageScript(pageNumber);
+        newPageContent = await readOnlyContract.pageScript(pageNumber);
+        newPageContent = filterText(newPageContent);
         cachedPages[pageNumber] = newPageContent;
 
         const newTotalPages = await readOnlyContract.currentPage();
@@ -383,6 +519,13 @@ async function connectWallet() {
         try {
             const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
             userAddress = accounts[0];
+
+            // Check and switch to the correct network if necessary
+            if (!await checkAndSwitchNetwork()) {
+                // If the user didn't switch to the correct network, don't proceed
+                return false;
+            }
+
             const web3Provider = new ethers.providers.Web3Provider(window.ethereum);
             const signer = web3Provider.getSigner();
             contract = new ethers.Contract(CONFIG.CONTRACT_ADDRESS, CONFIG.CONTRACT_ABI, signer);
@@ -486,24 +629,36 @@ async function checkAndSwitchNetwork() {
                 method: 'wallet_switchEthereumChain',
                 params: [{ chainId: `0x${rpcNetworkId.toString(16)}` }],
             });
-
-            // Wait for the network to finish switching
-            await new Promise(resolve => setTimeout(resolve, 1000));
-
-            // Reinitialize the contract with the new network
-            const web3Provider = new ethers.providers.Web3Provider(window.ethereum);
-            const signer = web3Provider.getSigner();
-            contract = new ethers.Contract(CONFIG.CONTRACT_ADDRESS, CONFIG.CONTRACT_ABI, signer);
-
-            return true;
         } catch (switchError) {
             if (switchError.code === 4902) {
-                showCustomAlert("This network is not available in your MetaMask, please add it manually.");
+                showCustomAlert("Scroll Mainnet missing. Attempting to add it to your wallet...");
+                // This error code indicates that the chain has not been added to MetaMask
+                const added = await addScrollNetwork();
+                if (added) {
+                    // Try switching again after adding the network
+                    await window.ethereum.request({
+                        method: 'wallet_switchEthereumChain',
+                        params: [{ chainId: `0x${rpcNetworkId.toString(16)}` }],
+                    });
+                } else {
+                    showCustomAlert("Failed to add Scroll network. Please add it manually.");
+                    return false;
+                }
             } else {
-                handleError("switch networks", error);
+                handleError("switch networks", switchError);
+                return false;
             }
-            return false;
         }
+
+        // Wait for the network to finish switching
+        await new Promise(resolve => setTimeout(resolve, 1000));
+
+        // Reinitialize the contract with the new network
+        const web3Provider = new ethers.providers.Web3Provider(window.ethereum);
+        const signer = web3Provider.getSigner();
+        contract = new ethers.Contract(CONFIG.CONTRACT_ADDRESS, CONFIG.CONTRACT_ABI, signer);
+
+        return true;
     }
     return true;
 }
diff --git a/legacy/index.html b/legacy/index.html
index ac3a1bc..0a4f2d7 100644
--- a/legacy/index.html
+++ b/legacy/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Contributors - Collaborative Story</title>
     <link rel="stylesheet" href="styles.css">
+    <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
 </head>
 
 <body>
@@ -40,8 +41,24 @@
                     <path
                         d="M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 0 0 2.048-2.578a9.3 9.3 0 0 1-2.958 1.13a4.66 4.66 0 0 0-7.938 4.25a13.229 13.229 0 0 1-9.602-4.868c-.4.69-.63 1.49-.63 2.342A4.66 4.66 0 0 0 3.96 9.824a4.647 4.647 0 0 1-2.11-.583v.06a4.66 4.66 0 0 0 3.737 4.568a4.692 4.692 0 0 1-2.104.08a4.661 4.661 0 0 0 4.352 3.234a9.348 9.348 0 0 1-5.786 1.995a9.5 9.5 0 0 1-1.112-.065a13.175 13.175 0 0 0 7.14 2.093c8.57 0 13.255-7.098 13.255-13.254c0-.2-.005-.402-.014-.602a9.47 9.47 0 0 0 2.323-2.41z" />
                 </symbol>
+
+                <!-- Light Mode icons -->
+                <symbol id="moonIconSymbol" viewBox="0 0 24 24">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </symbol>
+                <symbol id="sunIconSymbol" viewBox="0 0 24 24">
+                    <path
+                        d="M12 16.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0 1.5a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM12 0a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 12 0zm0 19.5a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75zM24 12a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1 0-1.5h3a.75.75 0 0 1 .75.75zM4.5 12a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1 0-1.5h3a.75.75 0 0 1 .75.75zM20.485 3.515a.75.75 0 0 1 0 1.06l-2.12 2.122a.75.75 0 0 1-1.061-1.06l2.12-2.122a.75.75 0 0 1 1.061 0zM6.696 17.304a.75.75 0 0 1 0 1.06l-2.12 2.122a.75.75 0 0 1-1.061-1.06l2.12-2.122a.75.75 0 0 1 1.061 0zM20.485 20.485a.75.75 0 0 1-1.061 0l-2.12-2.12a.75.75 0 0 1 1.061-1.061l2.12 2.12a.75.75 0 0 1 0 1.061zM6.696 6.696a.75.75 0 0 1-1.061 0l-2.12-2.12a.75.75 0 0 1 1.061-1.061l2.12 2.12a.75.75 0 0 1 0 1.061z" />
+                </symbol>
+
+                <!-- Announcement icon -->
+                <symbol id="newsIconSymbol" viewBox="0 0 24 24">
+                    <path fill-rule="evenodd" clip-rule="evenodd"
+                        d="M3.9 2.7H20.1C21.1 2.7 21.9 3.5 21.9 4.5V16.5C21.9 17.5 21.1 18.3 20.1 18.3H5.7L2.1 21.9V4.5C2.1 3.5 2.9 2.7 3.9 2.7ZM11.4 5.4H13.2V12.6H11.4V5.4ZM13.2 14.4H11.4V16.2H13.2V14.4Z" />
+                </symbol>
+
             </defs>
-            <rect width="100%" height="100%" fill="#ffffff" />
+            <rect width="100%" height="100%" fill="var(--background-color, #ffffff)" />
             <rect class="scroll-body" x="50" y="58.5" width="500" height="783" />
             <g id="runesContainer">
                 <text class="runes" id="leftRunes">
@@ -56,7 +73,7 @@
                 </text>
             </g>
             <g clip-path="url(#scroll-clip)">
-                <foreignObject x="68" y="60" width="452" height="781.5">
+                <foreignObject x="78" y="60" width="448" height="781.5">
                     <div xmlns="http://www.w3.org/1999/xhtml" id="storyContent"></div>
                 </foreignObject>
             </g>
@@ -67,35 +84,49 @@
 
                 <!-- Left icons -->
                 <a href="#" id="helpIcon" class="icon-link">
-                    <rect x="65" y="0" width="60" height="60" fill="transparent" />
-                    <g class="icon" transform="translate(80, 15)">
+                    <rect x="35" y="0" width="50" height="60" fill="transparent" />
+                    <g class="icon" transform="translate(50, 15)">
                         <use href="#helpIconSymbol" width="30" height="30"></use>
                     </g>
                 </a>
                 <a href="https://scrollscan.com/address/0xb253a1A8741A0637C55F0D7BFaBDa1A0B5cAE4bA" target="_blank"
                     rel="noopener noreferrer" class="icon-link">
-                    <rect x="125" y="0" width="60" height="60" fill="transparent" />
-                    <g class="icon" transform="translate(140, 15)">
+                    <rect x="85" y="0" width="50" height="60" fill="transparent" />
+                    <g class="icon" transform="translate(100, 15)">
                         <use href="#contractIconSymbol" width="30" height="30"></use>
                     </g>
                 </a>
+                <a href="#" id="darkModeToggle" class="icon-link">
+                    <rect x="135" y="0" width="50" height="60" fill="transparent"></rect>
+                    <g class="icon" transform="translate(150, 15)">
+                        <use href="#moonIconSymbol" width="30" height="30" class="moon-icon"></use>
+                        <use href="#sunIconSymbol" width="30" height="30" class="sun-icon" style="display: none;"></use>
+                    </g>
+                </a>
 
                 <!-- Title -->
                 <text class="title" x="300" y="38">CONTRIBUTORS</text>
 
                 <!-- Right icons -->
                 <a href="https://discord.gg/2KMZCv2YNa" target="_blank" rel="noopener noreferrer" class="icon-link">
-                    <rect x="415" y="0" width="60" height="60" fill="transparent" />
-                    <g class="icon" transform="translate(430, 15)">
+                    <rect x="405" y="0" width="50" height="60" fill="transparent" />
+                    <g class="icon" transform="translate(420, 15)">
                         <use href="#discordIconSymbol" width="30" height="30"></use>
                     </g>
                 </a>
                 <a href="https://twitter.com/_LOIYAA" target="_blank" rel="noopener noreferrer" class="icon-link">
-                    <rect x="475" y="0" width="60" height="60" fill="transparent" />
-                    <g class="icon" transform="translate(490, 15)">
+                    <rect x="455" y="0" width="50" height="60" fill="transparent" />
+                    <g class="icon" transform="translate(470, 15)">
                         <use href="#twitterIconSymbol" width="30" height="30"></use>
                     </g>
                 </a>
+                <a href="#" id="newsIcon" class="icon-link">
+                    <rect x="505" y="0" width="50" height="60" fill="transparent" />
+                    <g class="icon" transform="translate(520, 15)">
+                        <use href="#newsIconSymbol" width="30" height="30"></use>
+                    </g>
+                </a>
+
             </g>
             <g class="cylinder-container" transform="translate(0, 840)">
                 <rect class="handle" x="1.5" y="11.5" width="37" height="37" rx="8.5" ry="8.5" />
@@ -116,7 +147,7 @@
                 </g>
             </g>
             <g id="contributeButton" class="button" style="cursor: pointer;">
-                <rect x="220" y="770" width="160" height="50" rx="25" ry="25" fill="#D2691E"></rect>
+                <rect x="220" y="770" width="160" height="50" rx="25" ry="25" fill="var(--button-color)"></rect>
                 <text x="300" y="803" fill="white" text-anchor="middle" font-size="22">CONTRIBUTE</text>
             </g>
         </svg>
diff --git a/legacy/news.json b/legacy/news.json
new file mode 100644
index 0000000..2bcc5be
--- /dev/null
+++ b/legacy/news.json
@@ -0,0 +1,19 @@
+{
+    "news": [
+        {
+            "date": "2024-10-12",
+            "title": "Chicken Mystery",
+            "content": "Alignment now enhanced through word transformations. Unabridged text always available in the smart contract and NFTs."
+        },
+        {
+            "date": "2024-10-05",
+            "title": "Darkness Falls",
+            "content": "Toggle between the powers of the sun and the moon. Many thanks to <a href='https://www.reddit.com/user/CosmicCollusion/' target='_blank'>CosmicCollusion</a>."
+        },
+        {
+            "date": "2024-10-03",
+            "title": "Scroll Unrolls",
+            "content": "Deep within a cave, explorers find a floating parchment, adorned with runes. Contributors deployed to Scroll mainnet."
+        }
+    ]
+}
\ No newline at end of file
diff --git a/legacy/styles.css b/legacy/styles.css
index eb5eb18..0e51d51 100644
--- a/legacy/styles.css
+++ b/legacy/styles.css
@@ -1,3 +1,55 @@
+:root {
+    --background-color: #ffffff;
+    --text-color: #000000;
+    --scroll-color: #F5E5B3;
+    --handle-color: #8B4513;
+    --button-color: #D2691E;
+    --button-hover-color: #A0522D;
+    --highlight-color: #8A2BE2;
+}
+
+/* Add this block for dark mode */
+.dark-mode {
+    --background-color: #202020;
+    --text-color: #ffffff;
+    --scroll-color: #686274;
+    --handle-color: #4a4a4a;
+    --button-color: #594b68;
+    --button-hover-color: #291f33;
+    --highlight-color: #2c163e;
+}
+
+#darkModeToggle .moon-icon,
+#darkModeToggle .sun-icon {
+    transition: opacity 0.3s ease;
+}
+
+body.dark-mode #darkModeToggle .moon-icon {
+    display: none;
+}
+
+body.dark-mode #darkModeToggle .sun-icon {
+    display: inline;
+}
+
+.news-content {
+    padding: 20px;
+}
+
+.news-item {
+    margin-bottom: 20px;
+    border-bottom: 1px solid var(--text-color);
+    padding-bottom: 10px;
+}
+
+.news-item:last-child {
+    border-bottom: none;
+}
+
+.news-date {
+    font-style: italic;
+    color: var(--highlight-color);
+}
 
 body, html {
     margin: 0;
@@ -7,6 +59,8 @@ body, html {
     justify-content: center;
     align-items: center;
     overflow: hidden;
+    background-color: var(--background-color);
+    color: var(--text-color);
 }
 
 #loadingAnimation {
@@ -28,7 +82,7 @@ body, html {
 
 #runesContainer .runes {
     font-size: 16px;
-    fill: #000000;
+    fill: var(--text-color);
 }
 
 .rune {
@@ -45,32 +99,32 @@ body, html {
 }
 
 #svg-container {
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     position: relative;
     overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--background-color);
 }
 
 svg {
-    width: 100%;
-    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
 }
 
-.scroll-body {
-    fill: #F5E5B3;
-    stroke: black;
-    stroke-width: 3;
-}
-
-.cylinder {
-    fill: #F5E5B3;
-    stroke: black;
+.scroll-body, .cylinder {
+    fill: var(--scroll-color);
+    stroke: #000000;
     stroke-width: 3;
 }
 
 .handle {
-    fill: #8B4513;
-    stroke: black;
+    fill: var(--handle-color);
+    stroke: #000000;
     stroke-width: 3;
 }
 
@@ -78,6 +132,7 @@ svg {
     font-family: Arial, sans-serif;
     font-size: 24px;
     text-anchor: middle;
+    fill: var(--text-color);
 }
 
 .nav-button {
@@ -85,6 +140,7 @@ svg {
     font-size: 36px;
     text-anchor: middle;
     cursor: pointer;
+    fill: var(--text-color);
 }
 
 .nav-button {
@@ -93,11 +149,11 @@ svg {
 }
 
 .nav-button:hover {
-    fill: #8B4513; /* Purple color on hover */
+    fill: var(--handle-color); /* Purple color on hover */
 }
 
 .nav-button:active {
-    fill: #8A2BE2;
+    fill: var(--highlight-color);
     transition: fill 0s;
 }
 
@@ -144,7 +200,7 @@ svg {
 }
 
 #contributeButton:hover rect {
-    fill: #A0522D;
+    fill: var(--button-hover-color);
 }
 
 #contributeButton .button-content {
@@ -169,7 +225,7 @@ svg {
 
 #contributionInput:focus {
     outline: none; /* Remove default focus outline */
-    border-color: #8A2BE2; /* Change border color to purple */
+    border-color: var(--highlight-color); /* Change border color to purple */
     box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.4); /* Add a subtle purple glow */
 }
 
@@ -196,14 +252,9 @@ svg {
 }
 
 
-.button-container {
-    display: flex;
-    justify-content: space-between;
-}
-
 .popup button {
     padding: 10px 0;
-    background-color: #D2691E;
+    background-color: var(--button-color);
     color: white;
     border: none;
     border-radius: 5px;
@@ -227,8 +278,8 @@ svg {
 }
 
 dialog#customAlert {
-    background-color: #F5E5B3;
-    border: 3px solid #8B4513;
+    background-color: var(--scroll-color);
+    border: 3px solid var(--handle-color);
     border-radius: 10px;
     padding: 20px;
     max-width: 80%;
@@ -248,7 +299,7 @@ dialog#customAlert p {
   }
   
 dialog#customAlert button {
-    background-color: #D2691E;
+    background-color: var(--button-color);
     color: white;
     border: none;
     padding: 10px 20px;
@@ -259,17 +310,17 @@ dialog#customAlert button {
   }
   
 dialog#customAlert button:hover {
-    background-color: #A0522D;
+    background-color: var(--button-hover-color);
   }
 
   .popup-content {
-    background-color: #F5E5B3;
+    background-color: var(--scroll-color);
     padding: 20px;
     border-radius: 10px;
     text-align: center;
     width: 80%;
     max-width: 500px;
-    border: 3px solid #8B4513;
+    border: 3px solid var(--handle-color);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     display: flex;
     flex-direction: column;
@@ -277,7 +328,7 @@ dialog#customAlert button:hover {
 }
 
 #submitContribution {
-    background-color: #D2691E;
+    background-color: var(--button-color);
     color: white;
     border: none;
     border-radius: 5px;
@@ -288,7 +339,7 @@ dialog#customAlert button:hover {
 }
 
 #submitContribution:hover {
-    background-color: #A0522D;
+    background-color: var(--button-hover-color);
 }
 
 .alert-area {
@@ -318,7 +369,7 @@ dialog#customAlert button:hover {
 #walletButton {
     padding: 8px 12px;
     font-size: 14px;
-    background-color: #D2691E;
+    background-color: var(--button-color);
     color: white;
     border: none;
     border-radius: 3px;
@@ -347,8 +398,10 @@ dialog#customAlert button:hover {
     padding: 15px;  /* Increased padding for more space between text and borders */
     padding-bottom: 35px;  /* Increased to ensure space for character counter */
     box-sizing: border-box;
-    border: 2px solid #8B4513;
+    border: 2px solid var(--handle-color);
     border-radius: 5px;
+    background-color: var(--background-color);
+    color: var(--text-color);
 }
 
 .char-counter {
@@ -366,7 +419,7 @@ dialog#customAlert button:hover {
 }
 
 #walletButton:hover {
-    background-color: #A0522D;
+    background-color: var(--button-hover-color);
 }
 
 #nameInput {
@@ -374,14 +427,14 @@ dialog#customAlert button:hover {
     margin-right: 10px;
     padding: 8px;  /* Slightly increased padding */
     font-size: 14px;
-    border: 1px solid #8B4513;
+    border: 1px solid var(--handle-color);
     border-radius: 3px;
 }
 
 #registerName {
     padding: 8px 12px;  /* Slightly increased padding */
     font-size: 14px;
-    background-color: #D2691E;
+    background-color: var(--button-color);
     color: white;
     border: none;
     border-radius: 3px;
@@ -389,7 +442,7 @@ dialog#customAlert button:hover {
 }
 
 #registerName:hover {
-    background-color: #A0522D;
+    background-color: var(--button-hover-color);
 }
 
 .cylinder-container a {
@@ -397,7 +450,7 @@ dialog#customAlert button:hover {
 }
 
 .cylinder-container a:hover {
-    fill: #A0522D;
+    fill: var(--button-hover-color);
 }
 
 .icon-link {
@@ -417,7 +470,7 @@ dialog#customAlert button:hover {
 }
 
 .icon-link:active .icon {
-    fill: #8A2BE2; /* Purple color on click */
+    fill: var(--highlight-color); /* Purple color on click */
 }
 
 #pageNumber {
@@ -426,11 +479,11 @@ dialog#customAlert button:hover {
 }
 
 #pageNumber:hover {
-    fill: #8B4513;
+    fill: var(--handle-color);
 }
 
 #pageNumber:active {
-    fill: #8A2BE2;
+    fill: var(--highlight-color);
 }
 
 #jumpToPagePopup .popup-content {
@@ -449,7 +502,7 @@ dialog#customAlert button:hover {
     width: 100%;
     margin-bottom: 16px;
     font-size: 32px; 
-    background-color: #F5E5B3;
+    background-color: var(--scroll-color);
     border: none;
     text-align: center;
     -moz-appearance: textfield; /* Remove arrows in Firefox */
@@ -463,12 +516,12 @@ dialog#customAlert button:hover {
 
 #jumpToPageInput:focus {
     outline: none;
-    border-bottom-color: #8B4513; /* Changed from #8A2BE2 to remove purple line */
+    border-bottom-color: var(--handle-color); /* Changed from #8A2BE2 to remove purple line */
 }
 
 #jumpToPageButton {
     padding: 10px 20px;
-    background-color: #D2691E;
+    background-color: var(--button-color);
     color: white;
     border: none;
     border-radius: 5px;
@@ -479,7 +532,7 @@ dialog#customAlert button:hover {
 }
 
 #jumpToPageButton:hover {
-    background-color: #A0522D;
+    background-color: var(--button-hover-color);
 }
 
 #jumpToPageButton:active {
@@ -501,7 +554,7 @@ dialog#customAlert button:hover {
 #goToCurrentPageButton {
     padding: 8px 8px;
     font-size: 14px;
-    background-color: #D2691E;
+    background-color: var(--button-color);
     color: white;
     border: none;
     border-radius: 3px;
@@ -510,7 +563,7 @@ dialog#customAlert button:hover {
 }
 
 #goToCurrentPageButton:hover {
-    background-color: #A0522D;
+    background-color: var(--button-hover-color);
 }
 
 .reward-info {
@@ -529,7 +582,7 @@ dialog#customAlert button:hover {
 #withdrawButton {
     padding: 8px 12px;
     font-size: 14px;
-    background-color: #D2691E;
+    background-color: var(--button-color);
     color: white;
     border: none;
     border-radius: 3px;
@@ -537,5 +590,5 @@ dialog#customAlert button:hover {
 }
 
 #withdrawButton:hover {
-    background-color: #A0522D;
+    background-color: var(--button-hover-color);
 }
\ No newline at end of file