From 226a9038928fbd1aaab6b2bb9c8bd8fc84b3a932 Mon Sep 17 00:00:00 2001
From: DannyVFilms <44555970+dannyvfilms@users.noreply.github.com>
Date: Sun, 16 Apr 2023 13:55:40 -0500
Subject: [PATCH] Add files via upload

---
 static/scripts.js | 181 ++++++++++++++++++++++++++
 static/styles.css | 320 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 501 insertions(+)
 create mode 100644 static/scripts.js
 create mode 100644 static/styles.css

diff --git a/static/scripts.js b/static/scripts.js
new file mode 100644
index 0000000..558628b
--- /dev/null
+++ b/static/scripts.js
@@ -0,0 +1,181 @@
+// Variables
+var terminal = document.getElementById('terminal');
+var frostedRectangle = document.querySelector('.frosted-rectangle');
+var terminal = document.getElementById('terminal');
+
+// Event Listeners
+document.addEventListener('DOMContentLoaded', () => {
+    // Toggle terminal visibility on button click
+    setupTerminalToggle();
+
+    // Toggle senders-text visibility on arrow click
+    setupSendersTextToggle();
+
+    // Toggle settings-text visibility on arrow click
+    setupSettingsTextToggle();
+  
+    // Add and remove account input fields
+    setupAccountFields();
+});
+
+// Add event listener to the API key input
+var apiKeyInput = document.getElementById('api-key-input');
+apiKeyInput.addEventListener('input', function () {
+    if (this.value) {
+        this.classList.add('no-underline');
+    } else {
+        this.classList.remove('no-underline');
+    }
+});
+
+// Functions
+function setupTerminalToggle() {
+    const terminalToggleButton = document.getElementById('terminal-toggle-button');
+    const settingsButton = document.getElementById('settings-button');
+    const centeredContainer = document.querySelector('.centered-container');
+    const settingsContainer = document.querySelector('.settings-container');
+    const terminal = document.getElementById('terminal');
+
+    terminalToggleButton.addEventListener('click', () => {
+        terminal.classList.toggle('blurred');
+        centeredContainer.classList.toggle('hidden');
+        settingsButton.classList.toggle('hidden');
+        if (!settingsContainer.classList.contains('hidden')) {
+            settingsContainer.classList.add('hidden');
+        }
+    });
+
+    settingsButton.addEventListener('click', () => {
+        centeredContainer.classList.toggle('hidden');
+        settingsContainer.classList.toggle('hidden');
+        terminalToggleButton.classList.toggle('hidden');
+    });
+}
+
+function setupSendersTextToggle() {
+    var arrow = document.getElementById('arrow');
+    var sendersText = document.getElementById('senders-text');
+
+    arrow.addEventListener('click', function() {
+        sendersText.classList.toggle('expanded');
+        arrow.style.transform = sendersText.classList.contains('expanded') ? 'rotate(180deg)' : 'rotate(0deg)';
+    });
+}
+
+function setupSettingsTextToggle() {
+    const openaiHeader = document.getElementById('openai-arrow');
+    const openaiText = document.getElementById('openai-text');
+    const accountsHeader = document.getElementById('accounts-arrow');
+    const accountsText = document.getElementById('accounts-text');
+    const apiKeyInput = document.getElementById('api-key-input');
+    const checkMark = document.createElement('span');
+    checkMark.innerHTML = '&#x2714;'; // Check mark character
+    checkMark.classList.add('check-mark');
+
+    apiKeyInput.parentNode.insertBefore(checkMark, apiKeyInput.nextSibling);
+
+    openaiHeader.addEventListener('click', () => {
+        openaiText.classList.toggle('expanded');
+        openaiHeader.style.transform = openaiText.classList.contains('expanded') ? 'rotate(180deg)' : '';
+    });
+
+    accountsHeader.addEventListener('click', () => {
+        accountsText.classList.toggle('expanded');
+        accountsHeader.style.transform = accountsText.classList.contains('expanded') ? 'rotate(180deg)' : '';
+    });
+
+    apiKeyInput.addEventListener('input', () => {
+        if (apiKeyInput.value) {
+            checkMark.style.display = 'inline';
+            apiKeyInput.classList.add('filled');
+        } else {
+            checkMark.style.display = 'none';
+            apiKeyInput.classList.remove('filled');
+        }
+    });
+
+    apiKeyInput.addEventListener('blur', () => {
+        checkMark.style.display = 'none';
+    });
+
+    checkMark.addEventListener('click', () => {
+        // Confirm the changes here (e.g., save the API key)
+        checkMark.style.display = 'none';
+    });
+}
+
+function setupAccountFields() {
+    const addAccountBtn = document.querySelector('.add-account');
+    const removeAccountBtn = document.querySelector('.remove-account');
+    const accountList = document.querySelector('.account-list');
+    const emailProviders = {
+        "gmail": "imap.gmail.com",
+        "outlook": "imap-mail.outlook.com",
+        "yahoo": "imap.mail.yahoo.com",
+        "aol": "imap.aol.com",
+        "icloud": "imap.mail.me.com",
+        "zoho": "imap.zoho.com",
+        "gmx": "imap.gmx.com",
+        "fastmail": "imap.fastmail.com",
+        "protonmail": "imap.protonmail.com", // ProtonMail requires a paid plan and Bridge for IMAP access
+        "office365": "outlook.office365.com",
+        "mailru": "imap.mail.ru",
+        "yandex": "imap.yandex.com",
+        "cpanel": "mail.yourdomain.com", // Replace 'yourdomain.com' with your actual domain
+        "dovecot": "mail.yourdomain.com", // Replace 'yourdomain.com' with your actual domain
+        "courier": "mail.yourdomain.com", // Replace 'yourdomain.com' with your actual domain
+        "hmailserver": "mail.yourdomain.com", // Replace 'yourdomain.com' with your actual domain
+    };
+
+    addAccountBtn.addEventListener('click', () => {
+        const accountDiv = document.createElement('div');
+        accountDiv.classList.add('account');
+
+        const emailInput = document.createElement('input');
+        emailInput.type = 'email';
+        emailInput.placeholder = 'Email';
+        emailInput.classList.add('account-input');
+
+        const passwordInput = document.createElement('input');
+        passwordInput.type = 'password';
+        passwordInput.placeholder = 'Password';
+        passwordInput.classList.add('account-input');
+
+        const providerSelect = document.createElement('select');
+        providerSelect.classList.add('provider-select');
+
+        for (const provider in emailProviders) {
+            const option = document.createElement('option');
+            option.value = emailProviders[provider];
+            option.textContent = provider;
+            providerSelect.appendChild(option);
+        }
+
+        accountDiv.appendChild(emailInput);
+        accountDiv.appendChild(passwordInput);
+        accountDiv.appendChild(providerSelect);
+        accountList.appendChild(accountDiv);
+    });
+
+    removeAccountBtn.addEventListener('click', () => {
+        if (accountList.childElementCount > 0) {
+            accountList.removeChild(accountList.lastChild);
+        }
+    });
+}
+
+function updateLogs() {
+    // ... existing code ...
+}
+
+// Simulate receiving the summary after 3 seconds
+setTimeout(function() {
+    // Add the summary text below the existing text in the frosted rectangle
+    var summary = document.createElement('p');
+    summary.textContent = 'This is a paragraph summary returned by OpenAI.';
+    frostedRectangle.appendChild(summary);
+
+    // Animate the frosted rectangle by increasing its max-height
+    frostedRectangle.style.maxHeight = '800px';
+    frostedRectangle.style.paddingBottom = '40px';
+}, 3000);
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..b9c1e7b
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,320 @@
+/* General styling */
+body {
+    background-color: black;
+    font-family: monospace;
+    color: white;
+    padding: 20px;
+    margin: 0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+/* Terminal styles */
+#terminal {
+    flex-grow: 1;
+    overflow-y: scroll;
+    transition: filter 0.3s ease;
+}
+
+.blurred {
+    filter: blur(4px) brightness(0.7);
+}
+
+.hidden {
+    display: none;
+}
+
+/* Buttons container styles */
+.buttons-container {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    z-index: 10;
+}
+
+.terminal-toggle-button,
+.settings-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 5px;
+    margin-bottom: 10px;
+}
+
+.terminal-toggle-button img,
+.settings-button img {
+    width: 24px;
+    height: 24px;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    opacity: 1;
+}
+
+.settings-button.hidden {
+    opacity: 0;
+    transform: translate(-50%, -40%);
+}
+
+/* Centered container styles */
+.centered-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+/* Settings container styles */
+.settings-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 1000px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    opacity: 1;
+    z-index: 2;
+    transition-property: opacity, transform;
+    transition-duration: 0.3s, 0.3s;
+    transition-timing-function: ease, ease;
+    transition-delay: 0.3s, 0s;
+}
+
+.settings-container.hidden {
+    opacity: 0;
+    transform: translate(-50%, -40%);
+    transition-delay: 0s, 0.3s;
+}
+
+/* Settings menu styles */
+.settings-menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.settings-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.settings-header {
+    display: flex;
+    align-items: center;
+}
+
+.arrow {
+    margin-left: 5px;
+    font-size: 14px;
+    transition: transform 0.3s ease;
+}
+
+.input-container {
+    white-space: nowrap;
+}
+
+/* Settings text styles */
+.settings-text {
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    # background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 5px;
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-top: 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin-top 0.3s ease-in-out;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    width: 90%;
+    display: flex;
+    align-items: center;
+}
+
+.settings-text-content {
+    padding: 10px;
+}
+
+.settings-text.expanded {
+    opacity: 1;
+    max-height: 500px; /* You can adjust this value to fit the content */
+    margin-top: 10px;
+}
+
+/* API key input styles */
+.api-key-input {
+    background-color: transparent;
+    border: none;
+    color: white;
+    outline: none;
+    font-family: monospace;
+    font-size: inherit;
+    width: 250px;
+    margin-left: 5px;
+}
+
+.api-key-input:focus {
+    border-bottom-color: lime;
+}
+
+.api-key-input:valid {
+    border-bottom: none;
+}
+
+.api-key-input::placeholder {
+    text-align: center;
+}
+
+/* Account actions styles */
+.account-actions {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 15px;
+}
+
+.account-action-btn {
+    background: none;
+    border: none;
+    font-size: 1rem;
+    color: #FFF;
+    cursor: pointer;
+}
+
+.account-action-btn:hover {
+    text-decoration: underline;
+}
+
+.no-underline {
+    border-bottom: none;
+}
+
+.check-mark {
+    display: none;
+    color: white;
+    font-size: 18px;
+    margin-left: 5px;
+    vertical-align: middle;
+}
+
+.api-key-input:empty {
+    border-bottom: 1px solid white;
+}
+
+.api-key-input:focus + .check-mark {
+    display: inline;
+}
+
+.frosted-rectangle {
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 10px;
+    padding: 20px;
+    text-align: left;
+    width: 80%;
+    max-width: 400px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
+    max-height: 400px;
+    overflow: hidden;
+}
+
+.centered-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    opacity: 1;
+}
+
+.centered-container.hidden {
+    opacity: 0;
+    transform: translate(-50%, -40%);
+}
+
+h2 {
+    margin: 0;
+    font-size: 24px;
+}
+
+.senders-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+}
+
+.senders-header {
+    display: flex;
+    align-items: center;
+    margin-top: 5px;
+}
+
+.arrow {
+    margin-left: 5px;
+    font-size: 14px;
+    transition: transform 0.3s ease;
+}
+
+.senders-text {
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+#    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 5px;
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-top: 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin-top 0.3s ease-in-out;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    width: 90%;
+}
+
+.senders-text-content {
+    padding: 10px;
+}
+
+.senders-text.expanded {
+    opacity: 1;
+    max-height: 500px; /* You can adjust this value to fit the content */
+    margin-top: 10px;
+}
+
+.run-button {
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 10px;
+    padding: 20px;
+    text-align: center;
+    width: 80%;
+    max-width: 400px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    margin: 20px 0;
+    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
+    max-height: 400px;
+    overflow: hidden;
+}
+
+.info-container {
+    display: flex;
+    justify-content: space-between;
+    width: 80%;
+    max-width: 400px;
+}
\ No newline at end of file