# app.py
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        pass
    return render_template('notebook.html')

if __name__ == '__main__':
    app.run(debug=True)
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Journal</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <!-- Font Awesome for Mood Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/nb.css') }}">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">My Journal</h1>
        <form action="/" method="post">
            <!-- Journal Entry Textarea -->
            <div class="form-group">
                <label for="entry">Write your thoughts:</label>
                <textarea class="form-control" id="entry" name="entry" rows="5" required></textarea>
            </div>
            <!-- Mood Selection -->
            <div class="form-group">
                <label>Select your mood:</label>
                <div class="d-flex flex-wrap">
                    <!-- Happy Mood -->
                    <label class="mood-icon">
                        <input type="radio" name="mood" value="happy" required>
                        <i class="fa-solid fa-face-smile"></i>
                    </label>
                    <!-- Sad Mood -->
                    <label class="mood-icon">
                        <input type="radio" name="mood" value="sad">
                        <i class="fa-solid fa-face-frown"></i>
                    </label>
                    <!-- Angry Mood -->
                    <label class="mood-icon">
                        <input type="radio" name="mood" value="angry">
                        <i class="fa-solid fa-face-angry"></i>
                    </label>
                    <!-- Surprised Mood -->
                    <label class="mood-icon">
                        <input type="radio" name="mood" value="surprised">
                        <i class="fa-solid fa-face-surprise"></i>
                    </label>
                    <!-- Add more moods as needed -->
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Save Entry</button>
        </form>

        <!-- Display Entries (we'll populate this later) -->
        <div class="entries mt-5">
            <!-- Entries will be displayed here -->
        </div>
    </div>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
</body>
</html>

.mood-icon {
    position: relative;
    margin: 10px;
    cursor: pointer;
}
.mood-icon input {
    opacity: 0;
    position: absolute;
}
.mood-icon i {
    font-size: 2em;
    color: #ccc;
    transition: color 0.3s;
}
.mood-icon input:checked + i,
.mood-icon:hover i {
    color: #ffcc00;
}

"Save Entry" clicks saves my data in txt file