Code Display

Night Mode (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Toggle</title>
  <style>
    /* Base styles */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      transition: background-color 0.3s, color 0.3s;
    }

/* Light mode styles */
    body.light-mode {
      background-color: #ffffff;
      color: #000000;
    }

/* Dark mode styles */
    body.dark-mode {
      background-color: #121212;
      color: #ffffff;
    }

/* Toggle button */
    .toggle-btn {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background-color: #007bff;
      color: #ffffff;
      transition: background-color 0.3s, color 0.3s;
    }

.toggle-btn:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body class="light-mode">
  <button class="toggle-btn" id="modeToggle">Switch to Dark Mode</button>

// Function to toggle light and dark mode
    function toggleMode() {
      const isDarkMode = body.classList.contains('dark-mode');
      if (isDarkMode) {
        body.classList.remove('dark-mode');
        body.classList.add('light-mode');
        toggleButton.textContent = 'Switch to Dark Mode';
        localStorage.setItem('theme', 'light');
      } else {
        body.classList.remove('light-mode');
        body.classList.add('dark-mode');
        toggleButton.textContent = 'Switch to Light Mode';
        localStorage.setItem('theme', 'dark');
      }
    }

// Event listener for the button
    toggleButton.addEventListener('click', toggleMode);

// Load the saved theme from localStorage
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
      body.classList.remove('light-mode');
      body.classList.add('dark-mode');
      toggleButton.textContent = 'Switch to Light Mode';
    }
  </script>
</body>
</html>

Custom Animations (HTML)

Custom Animations (CSS)

/* General Styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(120deg, #89f7fe, #66a6ff);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.animation-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 1. Bouncing Ball Animation */
.ball {
  width: 50px;
  height: 50px;
  background-color: #ff6f61;
  border-radius: 50%;
  animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-150px);
  }
}

/* 2. Rotating Box Animation */
.rotating-box {
  width: 60px;
  height: 60px;
  background-color: #4caf50;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 3. Fading Button Animation */
.fade-button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  animation: fade 2s infinite;
}

@keyframes fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 4. Pulsing Circle Animation */
.pulse-circle {
  width: 50px;
  height: 50px;
  background-color: #ff9800;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

/* 5. Sliding Text Animation */
.sliding-text {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  position: relative;
  animation: slide 3s ease-in-out;
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

File Sharing (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secure File Upload to Firebase</title>
	<script src="https://www.gstatic.com/firebasejs/9.17.2/firebase-app-compat.js"></script>
	<script src="https://www.gstatic.com/firebasejs/9.17.2/firebase-storage-compat.js"></script>

// Initialize Firebase
        const app = firebase.initializeApp(firebaseConfig);
        const storage = firebase.storage();

// File upload functionality
        document.getElementById('uploadButton').addEventListener('click', async () => {
            const fileInput = document.getElementById('file');
            const file = fileInput.files[0];

if (!file) {
                alert('Please select a file to upload.');
                return;
            }

// Create a storage reference
            const storageRef = storage.ref(`uploads/${file.name}`);

try {
                // Upload the file
                const snapshot = await storageRef.put(file);
                const downloadURL = await snapshot.ref.getDownloadURL();

// Display success message
                document.getElementById('message').textContent = `File uploaded successfully! Download URL: ${downloadURL}`;
                console.log('File URL:', downloadURL);
            } catch (error) {
                console.error('File upload failed:', error);
                document.getElementById('message').textContent = 'File upload failed. Please try again.';
            }
        });
    </script>
</body>
</html>

HTML Gallery (HTML)

HTML Gallery (CSS)

Tooltips with HTML and CSS (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tooltips with HTML and CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
            color: #007BFF;
            text-decoration: underline;
        }

/* Tooltip text */
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 4px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            bottom: 125%; /* Position above the element */
            left: 50%;
            transform: translateX(-50%);
            opacity: 0; /* Start hidden */
            transition: opacity 0.3s;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }

/* Arrow pointing down */
        .tooltip .tooltiptext::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #333 transparent transparent transparent;
        }

/* Show the tooltip text on hover */
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>
    <h1>HTML and CSS Tooltips</h1>
    <p>Hover over the words below to see the tooltips:</p>

<p>
        This is a <span class="tooltip">tooltip<span class="tooltiptext">A tooltip is a small pop-up box that gives information about an element.</span></span>.
    </p>

<p>
        Another example: Hover over <span class="tooltip">this text<span class="tooltiptext">This is a custom tooltip styled with CSS!</span></span> to see the tooltip.
    </p>
</body>
</html>

Advanced Workflow Management App (Python)

import tkinter as tk
from tkinter import messagebox
from tkinter import filedialog
import json

# Dictionary to store workflows and tasks
workflows = {}

# Function to add a workflow
def add_workflow():
    workflow_name = workflow_entry.get()
    if workflow_name:
        workflow_listbox.insert(tk.END, workflow_name)
        workflows[workflow_name] = []
        workflow_entry.delete(0, tk.END)
    else:
        messagebox.showwarning("Warning", "Please enter a workflow name.")

# Function to add a task to selected workflow
def add_task():
    selected_workflow = workflow_listbox.get(tk.ACTIVE)
    task_name = task_entry.get()
    if task_name:
        task_listbox.insert(tk.END, task_name)
        workflows[selected_workflow].append(task_name)
        task_entry.delete(0, tk.END)
    else:
        messagebox.showwarning("Warning", "Please enter a task name.")

# Function to delete selected task
def delete_task():
    selected_task = task_listbox.get(tk.ACTIVE)
    selected_workflow = workflow_listbox.get(tk.ACTIVE)
    workflows[selected_workflow].remove(selected_task)
    task_listbox.delete(tk.ACTIVE)

# Function to delete selected workflow
def delete_workflow():
    selected_workflow = workflow_listbox.get(tk.ACTIVE)
    del workflows[selected_workflow]
    workflow_listbox.delete(tk.ACTIVE)
    task_listbox.delete(0, tk.END)

# Function to update task listbox when a different workflow is selected
def update_task_listbox(*args):
    selected_workflow = workflow_listbox.get(tk.ACTIVE)
    task_listbox.delete(0, tk.END)
    task_list = workflows[selected_workflow]
    for task in task_list:
        task_listbox.insert(tk.END, task)

# Function to save current session to a JSON file
def save_session():
    filename = tk.filedialog.asksaveasfilename(defaultextension=".json", filetypes=[("JSON Files", "*.json")])
    if filename:
        with open(filename, "w") as file:
            json.dump(workflows, file)
            messagebox.showinfo("Info", "Session saved successfully.")

# Function to open a saved session from a JSON file
def open_session():
    filename = tk.filedialog.askopenfilename(filetypes=[("JSON Files", "*.json")])
    if filename:
        with open(filename, "r") as file:
            loaded_workflows = json.load(file)
            workflow_listbox.delete(0, tk.END)
            task_listbox.delete(0, tk.END)
            workflows.clear()
            for workflow, tasks in loaded_workflows.items():
                workflow_listbox.insert(tk.END, workflow)
                workflows[workflow] = tasks
            messagebox.showinfo("Info", "Session opened successfully.")

# Create main window
root = tk.Tk()
root.title("Workflow Management Tool")

# Create workflow section
workflow_frame = tk.Frame(root)
workflow_frame.pack(side=tk.LEFT, padx=10, pady=10)

workflow_label = tk.Label(workflow_frame, text="Workflows", font=("Helvetica", 16))
workflow_label.pack()

workflow_listbox = tk.Listbox(workflow_frame, font=("Helvetica", 12), height=10)
workflow_listbox.pack(fill=tk.BOTH, expand=True)

workflow_entry = tk.Entry(workflow_frame, font=("Helvetica", 12))
workflow_entry.pack(pady=5)

add_workflow_button = tk.Button(workflow_frame, text="Add Workflow", command=add_workflow)
add_workflow_button.pack()

delete_workflow_button = tk.Button(workflow_frame, text="Delete Workflow", command=delete_workflow)
delete_workflow_button.pack()

# Create task section
# Create task section
task_frame = tk.Frame(root)
task_frame.pack(side=tk.LEFT, padx=10, pady=10)

task_label = tk.Label(task_frame, text="Tasks", font=("Helvetica", 16))
task_label.pack()

task_listbox = tk.Listbox(task_frame, font=("Helvetica", 12), height=10)
task_listbox.pack(fill=tk.BOTH, expand=True)

task_entry = tk.Entry(task_frame, font=("Helvetica", 12))
task_entry.pack(pady=5)

add_task_button = tk.Button(task_frame, text="Add Task", command=add_task)
add_task_button.pack()

delete_task_button = tk.Button(task_frame, text="Delete Task", command=delete_task)
delete_task_button.pack()

# Configure workflow listbox to update task listbox
workflow_listbox.bind("<<ListboxSelect>>", update_task_listbox)

# Create file menu
menu_bar = tk.Menu(root)
root.config(menu=menu_bar)

file_menu = tk.Menu(menu_bar)
menu_bar.add_cascade(label="File", menu=file_menu)
file_menu.add_command(label="Save Session", command=save_session)
file_menu.add_command(label="Open Session", command=open_session)

root.mainloop()

Simple Workflow Management App (HTML)

<!DOCTYPE html>
<html>
<head>
  <title>Workflow Management</title>
  <style>
    /* Add your custom styles here */
  </style>
</head>
<body>
  <h1>Workflow Management</h1>
  <div>
    <h2>Workflows</h2>
    <ul id="workflowList">
      
    </ul>
    <form id="workflowForm">
      <input type="text" id="workflowName" placeholder="Enter Workflow Name">
      <button type="submit">Create Workflow</button>
    </form>
  </div>
  <div>
    <h2>Tasks</h2>
    <ul id="taskList">
      
    </ul>
    <form id="taskForm">
      <input type="text" id="taskName" placeholder="Enter Task Name">
      <select id="workflowSelect">
        <option value="">Select Workflow</option>
        
      </select>
      <button type="submit">Add Task</button>
    </form>
  </div>

// Create a workflow
    document.getElementById('workflowForm').addEventListener('submit', (event) => {
      event.preventDefault();
      const workflowNameInput = document.getElementById('workflowName');
      const workflowName = workflowNameInput.value;
      if (workflowName) {
        const workflowId = new Date().getTime().toString();
        workflows.push({ id: workflowId, name: workflowName });
        workflowNameInput.value = '';
        renderWorkflowList();
      }
    });

// Render the workflow list
    function renderWorkflowList() {
      const workflowList = document.getElementById('workflowList');
      workflowList.innerHTML = '';
      workflows.forEach((workflow) => {
        const workflowItem = document.createElement('li');
        workflowItem.textContent = workflow.name;
        workflowItem.dataset.id = workflow.id;
        workflowList.appendChild(workflowItem);
      });
      renderWorkflowOptions();
    }

// Render the workflow options in the task form
    function renderWorkflowOptions() {
      const workflowSelect = document.getElementById('workflowSelect');
      workflowSelect.innerHTML = '';
      workflows.forEach((workflow) => {
        const workflowOption = document.createElement('option');
        workflowOption.value = workflow.id;
        workflowOption.textContent = workflow.name;
        workflowSelect.appendChild(workflowOption);
      });
    }

// Add a task
    document.getElementById('taskForm').addEventListener('submit', (event) => {
      event.preventDefault();
      const taskNameInput = document.getElementById('taskName');
      const taskName = taskNameInput.value;
      const workflowId = document.getElementById('workflowSelect').value;
      if (taskName && workflowId) {
        const taskId = new Date().getTime().toString();
        tasks.push({ id: taskId, name: taskName, workflowId: workflowId });
        taskNameInput.value = '';
        renderTaskList();
      }
    });

// Render the task list
function renderTaskList() {
  const taskList = document.getElementById('taskList');
  taskList.innerHTML = '';
  tasks.forEach((task) => {
    const taskItem = document.createElement('li');
    taskItem.textContent = task.name;
    taskItem.dataset.id = task.id;
    taskList.appendChild(taskItem);
  });
}

// Update the workflow options in the task form when the workflow list changes
document.getElementById('workflowList').addEventListener('click', (event) => {
  if (event.target.matches('li')) {
    const workflowId = event.target.dataset.id;
    document.getElementById('workflowSelect').value = workflowId;
  }
});
// Delete a task
document.getElementById('taskList').addEventListener('click', (event) => {
  if (event.target.matches('li')) {
    const taskId = event.target.dataset.id;
    tasks = tasks.filter((task) => task.id !== taskId);
    renderTaskList();
  }
});

// Delete a workflow
document.getElementById('workflowList').addEventListener('click', (event) => {
  if (event.target.matches('li')) {
    const workflowId = event.target.dataset.id;
    workflows = workflows.filter((workflow) => workflow.id !== workflowId);
    tasks = tasks.filter((task) => task.workflowId !== workflowId);
    renderWorkflowList();
    renderTaskList();
  }
});

</script>
</body>
</html>

Instant Messenger App/Website (index.html)

index.html and main.js are required. Scroll in this box to get both codes.

<!DOCTYPE html>
<html>
<head>
    <title>Instant Messenger</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        /* Style for message container to appear at the bottom */
        #message-container {
            overflow-y: auto;
            max-height: 300px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">Instant Messenger</h1>
        <form id="message-form">
            <div class="form-group">
                <input type="text" class="form-control" id="name-input" placeholder="Your name">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="message-input" placeholder="Type your message...">
            </div>
            <button type="submit" class="btn btn-primary">Send</button>
        </form>
        <div class="card mt-5">
            <div class="card-body" id="message-container"></div>
        </div>
    </div>

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
    <script src="main.js"></script>
</body>
</html>

Instant Messenger App/Website (main.js)

// Firebase configuration
const firebaseConfig = {
  apiKey: "APIKEY",
  authDomain: "AUTHDOMAIN",
  databaseURL: "DATABASEURL",
  projectId: "PROJECTID",
  storageBucket: "STORAGEBUCKET",
  messagingSenderId: "MESSAGINGSENDERID",
  appId: "APPID"
};

firebase.initializeApp(firebaseConfig);
const db = firebase.database();
const messageContainer = document.getElementById('message-container');
const messageForm = document.getElementById('message-form');
const nameInput = document.getElementById('name-input');
const messageInput = document.getElementById('message-input');

messageForm.addEventListener('submit', sendMessage);

function sendMessage(event) {
  event.preventDefault();

const name = nameInput.value;
  const message = messageInput.value;

if (!name || !message) {
    return;
  }

db.ref('messages').push().set({
    name: name,
    message: message,
    timestamp: firebase.database.ServerValue.TIMESTAMP // Add timestamp to each message
  });

messageInput.value = '';
}

db.ref('messages').orderByChild('timestamp').on('child_added', snapshot => { // Order messages by timestamp
  const message = snapshot.val();
  const messageElement = document.createElement('div');
  messageElement.className = 'alert alert-info mb-2';
  messageElement.textContent = `${message.name}: ${message.message}`;
  messageContainer.insertBefore(messageElement, messageContainer.firstChild); // Add new messages at the top
});

Login Page (index.html)

index.html, app.js, style.css, and page2.html are required. Scroll in this box to get all codes.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Login and Signup (index.html)</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form id="loginForm">
            <h1>Login</h1>
            <input type="email" id="loginEmail" placeholder="Email" required>
            <input type="password" id="loginPassword" placeholder="Password" required>
            <button type="submit">Sign In</button>
            <p>Don't have an account? <a id="signupLink">Sign up</a></p>
        </form>
        <form id="signupForm">
            <h1>Sign Up</h1>
            <input type="email" id="signupEmail" placeholder="Email" required>
            <input type="password" id="signupPassword" placeholder="Password" required>
            <button type="submit">Sign Up</button>
            <p>Already have an account? <a id="loginLink">Sign in</a></p>
        </form>
    </div>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
    <script src="app.js"></script>
</body>
</html>

app.js

// Initialize Firebase
var config = {
  apiKey: "APIKEY",
  authDomain: "AUTHDOMAIN",
  projectId: "PROJECTID",
  storageBucket: "STORAGEBUCKET",
  messagingSenderId: "MESSAGINGSENDERID",
  appId: "APPID",
};
firebase.initializeApp(config);

// Login form submission
document.getElementById("loginForm").addEventListener("submit", function(event) {
    event.preventDefault();
    var email = document.getElementById("loginEmail").value;
    var password = document.getElementById("loginPassword").value;

// Call Firebase signInWithEmailAndPassword method to sign in the user
    firebase.auth().signInWithEmailAndPassword(email, password)
        .then(function() {
            // Redirect to page2.html upon successful login
            window.location.href = "page2.html";
        })
        .catch(function(error) {
            // Handle login error
            console.error(error);
            alert("Failed to sign in. Please try again.");
        });
});

// Signup form submission
document.getElementById("signupForm").addEventListener("submit", function(event) {
    event.preventDefault();
    var email = document.getElementById("signupEmail").value;
    var password = document.getElementById("signupPassword").value;

// Call Firebase createUserWithEmailAndPassword method to create a new user
    firebase.auth().createUserWithEmailAndPassword(email, password)
        .then(function() {
            // Redirect to page2.html upon successful signup
            window.location.href = "page2.html";
        })
        .catch(function(error) {
            // Handle signup error
            console.error(error);
            alert("Failed to sign up. Please try again.");
        });
});

// Toggle between login and signup forms
document.getElementById("signupLink").addEventListener("click", function(event) {
    event.preventDefault();
    document.getElementById("loginForm").style.display = "none";
    document.getElementById("signupForm").style.display = "block";
});

document.getElementById("loginLink").addEventListener("click", function(event) {
    event.preventDefault();
    document.getElementById("signupForm").style.display = "none";
    document.getElementById("loginForm").style.display = "block";
});

style.css

/* Reset default styles */
body, form, input, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container styles */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0f0;
}

/* Form styles */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

/* Input styles */
input {
    margin-top: 10px;
    padding: 10px;
    border: none;
    border-radius: 3px;
    width: 100%;
}

/* Button styles */
button {
    margin-top: 10px;
    padding: 10px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
}

/* Link styles */
a {
    color: #007bff;
    text-decoration: none;
    cursor: pointer;
}

/* Hide/show styles for sign-up form */
#signupForm {
    display: none;
}

page2.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Page Name</title>
    <style>
        /* Reset some default styles */
        body,
        form,
        input,
        button {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

/* Set up basic layout */
        body {
            background-color: #fafafa;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

header {
            text-align: center;
            margin-bottom: 40px;
        }

main {
            max-width: 600px;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
        }

footer {
            text-align: center;
            margin-top: auto;
            margin-bottom: 10px;
        }

/* Hero section */
        #hero {
            text-align: center;
            margin-bottom: 40px;
        }

#hero h2 {
            font-size: 24px;
            margin-bottom: 10px;
        }

#hero p {
            font-size: 16px;
            margin-bottom: 30px;
            color: #777;
        }

#getStartedButton {
            display: inline-block;
            padding: 12px 24px;
            background-color: #ff9800;
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

#getStartedButton:hover {
            background-color: #f57c00;
        }

/* Signup and login form section */
        #signupForm,
        #loginForm {
            margin-top: 40px;
            text-align: center;
        }

form {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

input[type="email"],
        input[type="password"] {
            margin-bottom: 10px;
            padding: 10px;
            width: 100%;
            max-width: 300px;
            border: none;
            border-radius: 4px;
            background-color: #f5f5f5;
        }

button[type="submit"] {
            display: inline-block;
            padding: 12px 24px;
            background-color: #2196f3;
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

button[type="submit"]:hover {
            background-color: #1976d2;
        }

p {
            font-size: 14px;
            color: #777;
            margin-top: 10px;
        }

#loginLink {
            color: #2196f3;
            text-decoration: none;
            cursor: pointer;
        }

</style>
</head>

<body>
    <header>
        <h1>Coffee Connect</h1>
        <p>Connect with coffee enthusiasts around the world!</p>
    </header>
    <main>
        <section id="hero">
            <h2>Join the Coffee Community</h2>
            <p>Discover, connect, and share your love for coffee with like-minded individuals from all over the world.</p>
            <a href="#signupForm" id="getStartedButton">Get Started</a>
        </section>
        <section id="signupForm">
            <h2>Sign up for Free</h2>
            <form>
                <input type="email" placeholder="Email" required>
                <input type="password" placeholder="Password" required>
                <button type="submit">Sign up</button>
                <p>Already have an account? <a href="#loginForm" id="loginLink">Log in</a></p>
            </form>
        </section>
        <section id="loginForm">
            <h2>Log in to Your Account</h2>
            <form>
                <input type="email" placeholder="Email" required>
                <input type="password" placeholder="Password" required>
                <button type="submit">Log in</button>
                <p>Don't have an account yet? <a href="#signupForm" id="signupLink">Sign up</a></p>
            </form>
        </section>
    </main>
    <footer>
        <p>© copyright stuff</p>
    </footer>
</body>
</html>

Chatbot App (Python)

Two options, with or without UI. Scroll in this box to get the code(s).

Without UI

import os
import openai

# Function to read all text files from the "documents" folder
def read_documents(folder_path):
    documents = []
    for filename in os.listdir(folder_path):
        if filename.endswith(".txt"):
            file_path = os.path.join(folder_path, filename)
            with open(file_path, "r") as file:
                documents.append(file.read())
    return documents

# Function to interact with the GPT-3.5 API and get chatbot responses
def get_chatbot_response(question, documents):
    prompt = f"Question: {question}\nDocuments: {documents}\nAnswer:"
    response = openai.Completion.create(
        engine="text-davinci-003",  # Use the GPT-3.5 engine
        prompt=prompt,
        max_tokens=150,  # Adjust the length of the response as needed
        api_key="API-KEY-HERE",  # Replace with your actual API key
    )
    return response['choices'][0]['text']

# Main function to run the chatbot
def main():
    documents_folder = "documents"
    documents = read_documents(documents_folder)

print("Chatbot: Hi! I'm your chatbot assistant. How can I help you?")
    while True:
        user_input = input("User: ")
        if user_input.lower() in ["exit", "quit", "bye"]:
            print("Chatbot: Goodbye!")
            break
        answer = get_chatbot_response(user_input, documents)
        print("Chatbot:", answer)

if __name__ == "__main__":
    main()

With UI

import os
import openai
import tkinter as tk
from tkinter import messagebox

# Function to read all text files from the "documents" folder
def read_documents(folder_path):
    documents = []
    for filename in os.listdir(folder_path):
        if filename.endswith(".txt"):
            file_path = os.path.join(folder_path, filename)
            with open(file_path, "r") as file:
                documents.append(file.read())
    return documents

# Function to interact with the GPT-3.5 API and get chatbot responses
def get_chatbot_response(question, documents):
    prompt = f"Question: {question}\nDocuments: {documents}\nAnswer:"
    response = openai.Completion.create(
        engine="text-davinci-003",  # Use the GPT-3.5 engine
        prompt=prompt,
        max_tokens=150,  # Adjust the length of the response as needed
        api_key="API-KEY-HERE",  # Replace with your actual API key
    )
    return response['choices'][0]['text']

# Function to handle the user's input and get chatbot response
def handle_user_input(user_input, documents):
    question = user_input.get().strip()
    if question:
        answer = get_chatbot_response(question, documents)
        messagebox.showinfo("Chatbot", f"Chatbot: {answer}")
        user_input.delete(0, tk.END)

# Function to create the chatbot GUI
def create_gui(documents):
    root = tk.Tk()
    root.title("Chatbot")

chat_label = tk.Label(root, text="Chatbot: Hi! I'm your chatbot assistant. How can I help you?")
    chat_label.pack(pady=10)

user_input = tk.Entry(root, width=50)
    user_input.pack(pady=10)
    user_input.focus()

submit_button = tk.Button(root, text="Send", command=lambda: handle_user_input(user_input, documents))
    submit_button.pack(pady=10)

root.mainloop()

# Main function to run the chatbot
def main():
    documents_folder = "documents"
    documents = read_documents(documents_folder)

create_gui(documents)

if __name__ == "__main__":
    main()

Social/Sharing Site (HTML)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Coffee Connect</title>
    <style>
        /* Add your custom CSS styles here */
		 body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }
		    header {
        background-color: #00695C;
        color: #fff;
        padding: 20px;
        text-align: center;
    }

h1 {
        margin: 0;
    }

main {
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
    }

section {
        margin-bottom: 40px;
    }

h2 {
        margin-top: 0;
    }

form {
        display: grid;
        gap: 10px;
    }

label,
    input,
    button {
        width: 100%;
        padding: 10px;
    }

label {
        font-weight: bold;
    }

button {
        background-color: #00695C;
        color: #fff;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
    }

button:hover {
        background-color: #004D40;
    }

ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

li {
        background-color: #fff;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

h3 {
        margin-top: 0;
    }

img {
        max-width: 100%;
        height: auto;
        margin-top: 10px;
    }

</style>

</style>
</head>

<body>
    <header>
        <h1>Coffee Connect</h1>
    </header>
    <main>
        <section>
            <h2>Upload a Coffee Item</h2>
            <form id="coffeeForm">
                <label for="coffeeName">Coffee Name</label>
                <input type="text" id="coffeeName" required>
                <label for="brand">Brand</label>
                <input type="text" id="brand" required>
                <label for="roast">Roast</label>
                <input type="text" id="roast" required>
                <label for="image">Image</label>
                <input type="file" id="image" accept="image/*" required>
                <button type="submit">Upload</button>
            </form>
        </section>
        <section>
            <h2>Recent Coffee Items</h2>
            <ul id="coffeeList"></ul>
        </section>
    </main>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
    <script>
        // Replace with your Firebase configuration
        const firebaseConfig = {
  apiKey: "API KEY",
  authDomain: "AUTHDOMAIN",
  projectId: "PROJECTID",
  storageBucket: "STORAGEBUCKET",
  messagingSenderId: "MESSAGESENDEERID",
  appId: "APP ID",
        };

// Initialize Firebase
        firebase.initializeApp(firebaseConfig);

// Get a reference to the Firebase database
        const database = firebase.database();
        const storage = firebase.storage();

// Get references to the HTML elements
        const coffeeForm = document.getElementById('coffeeForm');
        const coffeeList = document.getElementById('coffeeList');

// Upload form submission
        coffeeForm.addEventListener('submit', (e) => {
            e.preventDefault();

// Get form values
            const coffeeName = document.getElementById('coffeeName').value;
            const brand = document.getElementById('brand').value;
            const roast = document.getElementById('roast').value;
            const image = document.getElementById('image').files[0];

// Upload image to Firebase storage
            const storageRef = storage.ref(`coffeeImages/${image.name}`);
            const uploadTask = storageRef.put(image);

uploadTask.on('state_changed', (snapshot) => {
                // Handle upload progress
                const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.log(`Upload progress: ${progress}%`);
            }, (error) => {
                console.error(error);
            }, () => {
                // Image upload complete
                uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                    // Save coffee data to database
                    const coffeeData = {
                        coffeeName: coffeeName,
                        brand: brand,
                        roast: roast,
                        image: downloadURL
                    };
                    const newCoffeeRef = database.ref('coffeeItems').push();
                    newCoffeeRef.set(coffeeData).then(() => {
                        console.log('Coffee item uploaded successfully');
                        // Reset form
                        coffeeForm.reset();
                    }).catch((error) => {
                        console.error(error);
                    });
                }).catch((error) => {
                    console.error(error);
                });
            });
        });

// Load recent coffee items from database
        const coffeeItemsRef = database.ref('coffeeItems');
        coffeeItemsRef.on('child_added', (snapshot) => {
            const coffeeData = snapshot.val();
            const coffeeItem = `
                <li>
                    <h3>${coffeeData.coffeeName}</h3>
                    <p><strong>Brand:</strong> ${coffeeData.brand}</p>
                    <p><strong>Roast:</strong> ${coffeeData.roast}</p>
                    <img src="${coffeeData.image}" alt="${coffeeData.coffeeName}">
                </li>
            `;
            coffeeList.insertAdjacentHTML('beforeend', coffeeItem);
        });

</script>
</body>

</html>

Image Resizer (Python)

import tkinter as tk
from tkinter import filedialog
from PIL import Image

# Function to open file explorer dialog and get selected file path
def browse_file():
    file_path = filedialog.askopenfilename()
    entry_file_path.delete(0, tk.END)
    entry_file_path.insert(tk.END, file_path)

# Function to resize and save image
def resize_image():
    file_path = entry_file_path.get()
    width = entry_width.get()
    height = entry_height.get()

try:
        # Open the image
        img = Image.open(file_path)

# Resize the image
        img = img.resize((int(width), int(height)))

# Save the resized image with "COPY" added to the filename
        new_file_path = file_path.replace(".","_COPY.")
        img.save(new_file_path)
        tk.messagebox.showinfo("Success", "Image resized and saved successfully as COPY.")
    except Exception as e:
        tk.messagebox.showerror("Error", str(e))

# Create main window
root = tk.Tk()
root.title("Image Resizer")

# Create file path entry
entry_file_path = tk.Entry(root, width=60)
entry_file_path.grid(row=0, column=0, columnspan=2, padx=10, pady=10)

# Create browse button
btn_browse = tk.Button(root, text="Browse", command=browse_file)
btn_browse.grid(row=0, column=2, padx=10, pady=10)

# Create width entry
label_width = tk.Label(root, text="Width:")
label_width.grid(row=1, column=0, padx=10, pady=10)
entry_width = tk.Entry(root, width=20)
entry_width.grid(row=1, column=1, padx=10, pady=10)

# Create height entry
label_height = tk.Label(root, text="Height:")
label_height.grid(row=2, column=0, padx=10, pady=10)
entry_height = tk.Entry(root, width=20)
entry_height.grid(row=2, column=1, padx=10, pady=10)

# Create resize button
btn_resize = tk.Button(root, text="Resize and Save", command=resize_image)
btn_resize.grid(row=3, column=0, columnspan=2, padx=10, pady=10)

# Start main loop
root.mainloop()

Simple Workflow Management App (Python)

import tkinter as tk
from tkinter import messagebox