From 12ee1df60b722404bcdd82e233337cb86ce3b02b Mon Sep 17 00:00:00 2001
From: Squirrel <rylancarey2011@gmail.com>
Date: Thu, 17 Oct 2024 19:52:29 -0700
Subject: [PATCH] Update newtab.html

whyy
---
 chrome/newtab.html | 778 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 776 insertions(+), 2 deletions(-)

diff --git a/chrome/newtab.html b/chrome/newtab.html
index 3b2cde5..732c76b 100644
--- a/chrome/newtab.html
+++ b/chrome/newtab.html
@@ -10,7 +10,439 @@
 <meta content="Placeholder" property="og:image" />
 <meta content="#006b79" data-react-helmet="true" name="theme-color" />
  <link rel="icon" type="image/x-icon" href="images/ico/logo.ico">
-<link rel="stylesheet" href="css/index.css">
+<style>
+ * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+
+body {
+    background-image: url("images/bg.png");
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    background-color: rgb(188, 7, 127);
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    font-family: Arial, sans-serif;
+    position: relative;
+    overflow-x: hidden;
+}
+
+
+.menu {
+    background-color: rgb(46, 46, 46);
+    width: 100%;
+    height: 30px;
+    position: fixed; 
+    top: 0;
+    left: 0;
+    z-index: 3; 
+    display: flex; 
+    align-items: center;
+    color: white;
+    padding-left: 30px;
+    font-size: 14px;
+}
+
+.textnavbar {
+    padding-left: 20px;
+}
+
+.menu a, .menu a:link, .menu a:visited {
+    text-decoration: none;
+    color: white;
+}
+
+.menu a:hover {
+    text-decoration: underline;
+}
+
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+}
+
+.overlay.active {
+    display: block; 
+}
+
+.top-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 100; 
+    display: none;
+}
+
+.top-overlay.active {
+    display: block;
+}
+
+
+.modal {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: 600px;
+    max-height: 90vh;
+    padding: 20px 30px;
+    background-color: rgb(29, 29, 29);
+    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
+    z-index: 101;
+    text-align: left;
+    color: white;
+    overflow-y: auto;
+    border-radius: 10px;
+}
+
+.modal.active {
+    display: block;
+}
+
+
+.close-btn {
+    margin-top: 20px;
+    padding: 8px 16px;
+    background-color: rgb(0, 0, 0);
+    color: white;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 14px;
+}
+
+.close-btn:hover {
+    background-color: #333;
+}
+
+
+#logo {
+    width: 140px;
+    height: auto;
+    margin-bottom: 40px;
+    z-index: 2;
+    filter: drop-shadow(5px 5px 15px rgba(23, 221, 205, 1));
+}
+
+
+.search-box {
+    width: 600px;
+    margin-bottom: 40px;
+    justify-content: center;
+    z-index: 2;
+    box-shadow: 4px 4px 5px rgba(255,255,255,0.5);
+    
+}
+
+.gcse-search input.gsc-input {
+    padding: 12px 20px;
+    font-size: 18px;
+    border-radius: 24px;
+    border: 2px solid yellow;
+    outline: none;
+}
+
+.gcse-search input.gsc-search-button {
+    padding: 12px 20px;
+    font-size: 18px;
+    border: none;
+    border-radius: 24px;
+    background-color: yellow;
+    color: black;
+    margin-left: 10px;
+    cursor: pointer;
+}
+
+.gcse-search input.gsc-search-button:hover {
+    background-color: #f1c40f;
+}
+
+.gsc-results-wrapper-visible {
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+
+.privacy {
+    color: white;
+    z-index: 2;
+    margin-top: 20px;
+    text-align: center;
+    font-size: 14px;
+}
+
+
+.options {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.weathera, .creditsa, .abouta {
+    padding-bottom: 20px;
+    z-index: 2;
+    text-decoration: none;
+    color: white;
+    font-size: 16px;
+}
+
+.weathera:hover, .creditsa:hover, .abouta:hover {
+    text-decoration: underline;
+}
+
+
+#weather-modal * {
+    box-sizing: border-box;
+}
+
+#weather-modal h1 {
+    margin-bottom: 20px;
+    font-size: 28px;
+    color: #fff;
+    text-align: center;
+}
+
+#weather-modal input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 2px solid #007BFF;
+    border-radius: 25px;
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.3s ease;
+}
+
+#weather-modal input[type="text"]:focus {
+    border-color: #0056b3;
+}
+
+#weather-modal button {
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 25px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s ease;
+    margin-top: 10px;
+    margin-right: 10px;
+}
+
+#weather-modal button:hover {
+    background-color: #0056b3;
+}
+
+#weather-modal button#geoButton {
+    background-color: #28a745;
+}
+
+#weather-modal button#geoButton:hover {
+    background-color: #1e7e34;
+}
+
+#weather-modal .weather-info {
+    margin-top: 20px;
+    color: #fff;
+}
+
+#weather-modal .weather-info h2 {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+#weather-modal .weather-info p {
+    font-size: 16px;
+    margin: 5px 0;
+}
+
+#weather-modal .error {
+    color: red;
+    margin-top: 10px;
+    font-size: 16px;
+    display: none;
+}
+
+#weather-modal .loading {
+    margin-top: 10px;
+    font-size: 16px;
+    color: #007BFF;
+    display: none;
+}
+
+#weather-modal .weather-icon {
+    width: 80px;
+    height: 80px;
+    display: block;
+    margin: 10px auto;
+}
+#clock {
+    position: absolute; 
+    left: 50%;
+    transform: translateX(-50%); 
+    height: 30px; 
+    display: flex;
+    align-items: center; 
+    padding-right: 30px;
+}
+.button-container {
+    z-index: 2;
+    position: fixed;
+    bottom: 30px;
+    right: 10px;
+}
+button {
+    padding: 5px 20px;
+    margin: 5px;
+    z-index: 2;
+    background-color: rgb(29, 29, 29);
+    color: white;
+    border: none;
+    cursor: pointer;
+    bottom: 0;
+    right: 0;
+}
+
+button:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+marquee {
+    z-index: 100;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 30px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    text-align: center;
+    line-height: 30px;
+}
+#username {
+    z-index: 100;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 30px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    text-align: center;
+    line-height: 30px;
+}
+@media (max-width: 600px) {
+    
+
+    #weather-modal h1 {
+        font-size: 22px; 
+    }
+
+    #weather-modal .weather-icon {
+        width: 60px;
+        height: 60px;
+    }
+
+    #weather-modal .weather-info h2 {
+        font-size: 20px;
+    }
+
+    #weather-modal .weather-info p {
+        font-size: 14px;
+    }
+
+    #weather-modal .error {
+        font-size: 14px;
+    }
+
+    #weather-modal .loading {
+        font-size: 14px;
+    }
+
+    .search-box {
+        width: 90%; 
+    }
+
+    .options {
+        flex-direction: row;
+        gap: 10px; 
+    }
+
+    .menu {
+        font-size: 12px; 
+        padding-left: 10px; 
+    }
+
+    .textnavbar {
+        padding-left: 10px; 
+    }
+
+    #logo {
+        width: 100px; 
+        margin-bottom: 20px; 
+    }
+
+    button {
+        padding: 10px 15px;
+        font-size: 14px; 
+    }
+
+    marquee {
+        font-size: 12px; 
+    }
+
+    #clock {
+        height: 20px; 
+        font-size: 12px; 
+       margin-left: 130px;
+    }
+
+    .button-container {
+        bottom: 30px; 
+        right: 20px;
+    }
+
+    .gcse-search input.gsc-input {
+        font-size: 16px;
+        padding: 10px 15px; 
+    }
+
+    .gcse-search input.gsc-search-button {
+        font-size: 16px; 
+        padding: 10px 15px; 
+    }
+
+  
+    .modal {
+        width: 95%; 
+        padding: 15px;
+    }
+
+    .weathera, .creditsa, .abouta {
+        font-size: 14px; 
+    }
+}
+</style>
 </head>
 <body onload="getUsername()">
         <div class="menu">
@@ -91,7 +523,349 @@ <h2>Configurations</h2>
         <button id="next-button">></button>
     </div>
     <p class="privacy">Our Privacy Policy is listed <a href="privacy">here</a>. By using anything on this webpage, you agree to these terms.</p>
-    <script src="js/index.js"></script>
+   <script>
+    // code by the Freakybob Team
+// 10/17/2024
+// Please leave this note in here if you are using this code in your project!
+// ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️
+const body = document.body;
+const backgrounds = [
+    "images/bg.png",
+    "images/idk.jpg",
+    "images/ocean.jpg"
+];
+
+let currentIndex = 0;
+
+function setCookie(name, value, days) {
+    const date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    const expires = "; expires=" + date.toUTCString();
+    document.cookie = name + "=" + (value || "") + expires + "; path=/";
+}
+
+function getCookie(name) {
+    const nameEQ = name + "=";
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+}
+
+const savedIndex = getCookie('backgroundIndex');
+if (savedIndex) {
+    currentIndex = parseInt(savedIndex);
+    body.style.backgroundImage = `url(${backgrounds[currentIndex]})`;
+} else {
+    body.style.backgroundImage = `url(${backgrounds[currentIndex]})`;
+}
+
+function changeBackground() {
+    currentIndex = (currentIndex + 1) % backgrounds.length;
+    body.style.backgroundImage = `url(${backgrounds[currentIndex]})`;
+    setCookie('backgroundIndex', currentIndex, 7);
+}
+
+            function updateClock() {
+    const now = new Date();
+    const options = { hour: 'numeric', minute: 'numeric', hour12: true };
+    const timeString = now.toLocaleString('en-US', options);
+    document.getElementById('clock').textContent = timeString;
+}
+
+updateClock();
+setInterval(updateClock, 60000);
+
+
+function setBackground(index) {
+    body.style.backgroundImage = `url('${backgrounds[index]}')`;
+}
+
+document.getElementById('next-button').addEventListener('click', function() {
+    currentIndex = (currentIndex + 1) % backgrounds.length;
+    setBackground(currentIndex);
+});
+
+document.getElementById('prev-button').addEventListener('click', function() {
+    currentIndex = (currentIndex - 1 + backgrounds.length) % backgrounds.length; 
+    setBackground(currentIndex);
+});
+
+setBackground(currentIndex);
+
+        document.addEventListener('DOMContentLoaded', function () {
+            const overlay = document.querySelector('.overlay');
+            const topOverlay = document.querySelector('.top-overlay');
+            const modals = document.querySelectorAll('.modal');
+
+            function openModal(modalId) {
+                document.getElementById(modalId).classList.add('active');
+                overlay.classList.add('active');
+                topOverlay.classList.add('active');
+            }
+
+            function closeModal() {
+                modals.forEach(modal => modal.classList.remove('active'));
+                overlay.classList.remove('active');
+                topOverlay.classList.remove('active');
+            }
+
+            
+            document.querySelector('.weathera').addEventListener('click', function (e) {
+                e.preventDefault();
+                openModal('weather-modal');
+            });
+
+            document.querySelector('.creditsa').addEventListener('click', function (e) {
+                e.preventDefault();
+                openModal('credits-modal');
+            });
+
+            document.querySelector('.abouta').addEventListener('click', function (e) {
+                e.preventDefault();
+                openModal('about-modal');
+            });
+
+            
+            document.querySelectorAll('.close-btn').forEach(btn => {
+                btn.addEventListener('click', closeModal);
+            });
+
+            
+            overlay.addEventListener('click', closeModal);
+            topOverlay.addEventListener('click', closeModal);
+        });
+
+        
+        const apiKey = '9fb72ce4a247b16999ba8df85db1b357';
+        const apiUrl = 'https://api.openweathermap.org/data/2.5/weather';
+
+        
+        const locationInput = document.getElementById('locationInput');
+        const searchButton = document.getElementById('searchButton');
+        const geoButton = document.getElementById('geoButton');
+        const locationElement = document.getElementById('location');
+        const temperatureElement = document.getElementById('temperature');
+        const descriptionElement = document.getElementById('description');
+        const humidityElement = document.getElementById('humidity');
+        const windElement = document.getElementById('wind');
+        const errorMessage = document.getElementById('errorMessage');
+        const loadingElement = document.getElementById('loading');
+        const weatherIcon = document.getElementById('weatherIcon');
+
+        
+        searchButton.addEventListener('click', () => {
+            const location = locationInput.value.trim();
+            if (location) {
+                fetchWeather(location);
+            } else {
+                displayError('Please enter a city and state.');
+            }
+        });
+
+        locationInput.addEventListener('keyup', (event) => {
+            if (event.key === 'Enter') {
+                searchButton.click();
+            }
+        });
+
+        geoButton.addEventListener('click', () => {
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(
+                    position => {
+                        const { latitude, longitude } = position.coords;
+                        fetchWeatherByCoords(latitude, longitude);
+                    },
+                    error => {
+                        switch (error.code) {
+                            case error.PERMISSION_DENIED:
+                                displayError('User denied the request for Geolocation.');
+                                break;
+                            case error.POSITION_UNAVAILABLE:
+                                displayError('Location information is unavailable.');
+                                break;
+                            case error.TIMEOUT:
+                                displayError('The request to get user location timed out.');
+                                break;
+                            case error.UNKNOWN_ERROR:
+                                displayError('An unknown error occurred.');
+                                break;
+                        }
+                    }
+                );
+            } else {
+                displayError('Geolocation is not supported by your browser.');
+            }
+        });
+
+        
+        function fetchWeather(location) {
+            const url = `${apiUrl}?q=${encodeURIComponent(location)}&appid=${apiKey}&units=imperial`; 
+
+            showLoading();
+            clearWeatherInfo();
+
+            fetch(url)
+                .then(response => {
+                    if (!response.ok) {
+                        return response.json().then(error => {
+                            throw new Error(error.message || 'City not found');
+                        });
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    hideLoading();
+                    displayWeather(data);
+                })
+                .catch(error => {
+                    hideLoading();
+                    console.error('Error fetching weather data:', error);
+                    displayError(`Unable to retrieve weather data. ${error.message}`);
+                });
+        }
+
+        
+        function fetchWeatherByCoords(lat, lon) {
+            const url = `${apiUrl}?lat=${lat}&lon=${lon}&appid=${apiKey}&units=imperial`; 
+
+            showLoading();
+            clearWeatherInfo();
+
+            fetch(url)
+                .then(response => {
+                    if (!response.ok) {
+                        return response.json().then(error => {
+                            throw new Error(error.message || 'Could not fetch weather data');
+                        });
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    hideLoading();
+                    displayWeather(data);
+                })
+                .catch(error => {
+                    hideLoading();
+                    console.error('Error fetching weather data:', error);
+                    displayError(`Unable to retrieve weather data. ${error.message}`);
+                });
+        }
+
+        
+        function displayWeather(data) {
+            const { name, sys, main, weather, wind } = data;
+            locationElement.textContent = `${name}, ${sys.country}`;
+            temperatureElement.textContent = `Temperature: ${Math.round(main.temp)}°F`;
+            descriptionElement.textContent = `Condition: ${capitalizeFirstLetter(weather[0].description)}`;
+            humidityElement.textContent = `Humidity: ${main.humidity}%`;
+            windElement.textContent = `Wind Speed: ${wind.speed} mph`;
+
+          
+            const iconCode = weather[0].icon;
+            weatherIcon.src = `https://openweathermap.org/img/wn/${iconCode}@2x.png`;
+            weatherIcon.alt = weather[0].description;
+            weatherIcon.style.display = 'block';
+        }
+
+       
+        function displayError(message) {
+            errorMessage.textContent = message;
+            errorMessage.style.display = 'block';
+            loadingElement.style.display = 'none';
+        }
+
+        
+        function showLoading() {
+            loadingElement.style.display = 'block';
+            errorMessage.style.display = 'none';
+            clearWeatherInfoDisplay();
+        }
+
+        
+        function hideLoading() {
+            loadingElement.style.display = 'none';
+        }
+
+        
+        function clearWeatherInfo() {
+            locationElement.textContent = '';
+            temperatureElement.textContent = '';
+            descriptionElement.textContent = '';
+            humidityElement.textContent = '';
+            windElement.textContent = '';
+            weatherIcon.style.display = 'none';
+            errorMessage.textContent = '';
+            errorMessage.style.display = 'none';
+        }
+
+        
+        function clearWeatherInfoDisplay() {
+            locationElement.textContent = '';
+            temperatureElement.textContent = '';
+            descriptionElement.textContent = '';
+            humidityElement.textContent = '';
+            windElement.textContent = '';
+            weatherIcon.style.display = 'none';
+        }
+
+        
+        function capitalizeFirstLetter(string) {
+            return string.charAt(0).toUpperCase() + string.slice(1);
+        }
+
+       
+        window.addEventListener('resize', adjustModalHeight);
+        function adjustModalHeight() {
+            const weatherModal = document.getElementById('weather-modal');
+            weatherModal.style.maxHeight = `${window.innerHeight * 0.9}px`;
+        }
+
+       
+        adjustModalHeight();
+        function getUsername() {
+    const savedName = localStorage.getItem('username') || 'User';
+    document.getElementById('user-name').textContent = savedName;
+}
+
+document.getElementById('change-name-button').addEventListener('click', () => {
+ 
+    const nameInputDiv = document.getElementById('change-name-input');
+    nameInputDiv.style.display = 'block';
+    const nameInput = document.getElementById('new-username');
+    
+    
+    nameInput.value = localStorage.getItem('username') || 'User';
+    nameInput.focus();
+    
+    
+    nameInput.addEventListener('blur', saveUsername);
+    
+ 
+    nameInput.addEventListener('keydown', function(event) {
+        if (event.key === 'Enter') {
+            saveUsername();
+            nameInput.blur();
+        }
+    });
+});
+
+function saveUsername() {
+    const newName = document.getElementById('new-username').value.trim();
+    
+    if (newName) {
+        
+        localStorage.setItem('username', newName);
+        document.getElementById('user-name').textContent = newName;
+    }
+
+    
+    document.getElementById('change-name-input').style.display = 'none';
+}
+   </script>
 <!--I absulutly cooked at the weather stuff. Everyone should now gibe me a cookie cause I am fatass! -Squirrel-->
 <!-- here, take it! 🍪 - wish-->
     </body>