Untitled

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Income.aspx.cs" Inherits="FinalPersonalProject.Income" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style>
        /* Basic Reset */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }

        .container {
            width: 35%;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .form-group input, .form-group select {
            width: calc(100% - 18px);
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .button-group {
            margin: 20px 0;
        }

        .button-group button {
            background-color: #007bff;
            border: none;
            color: white;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
        }

        .button-group button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        .button-group button:active {
            background-color: #004080;
            transform: scale(0.95);
        }

        .button-group button:focus {
            outline: none;
        }

        .grid-view {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }

        .grid-view th, .grid-view td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }

        .grid-view th {
            background-color: #f4f4f4;
        }

        .header {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
        }
        #Image1{
            object-fit:cover;
            width:100%;
            height:100%;
            position:fixed;
            z-index:-1;
            top:0;
            left:0;
        }
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:Image ID="Image1" runat="server" ImageUrl="~/abc.jpg" />

    <div class="container">

        <div class="form-group">
            <asp:Label ID="Label2" runat="server" Text="UserID"></asp:Label>
            <asp:TextBox ID="TextBox1" runat="server" ReadOnly="true"></asp:TextBox>
        </div>

        <div class="form-group">
            <asp:Label ID="Label3" runat="server" Text="Date"></asp:Label>
            <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
        </div>

        <div class="form-group">
            <asp:Label ID="Label4" runat="server" Text="Category"></asp:Label>
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem>Salary</asp:ListItem>
                <asp:ListItem>ROI</asp:ListItem>
                <asp:ListItem>SIP</asp:ListItem>
                <asp:ListItem>Rent</asp:ListItem>
                <asp:ListItem>Others</asp:ListItem>
            </asp:DropDownList>
        </div>

        <div class="form-group">
            <asp:Label ID="Label5" runat="server" Text="TransactionID"></asp:Label>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        </div>

        <div class="form-group">
            <asp:Label ID="Label6" runat="server" Text="Amount"></asp:Label>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        </div>

        <div class="button-group">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:Button ID="Button1" runat="server" Text="ADD" OnClick="Button1_Click" CssClass="button-group" ForeColor="Black" Height="41px" Width="95px" Font-Bold="True" Font-Size="Medium" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:Button ID="Button2" runat="server" Text="UPDATE" OnClick="Button2_Click1" CssClass="button-group" Height="40px" Width="95px" Font-Bold="True" Font-Size="Medium" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:Button ID="Button3" runat="server" Text="DELETE" OnClick="Button3_Click1" CssClass="button-group" Height="40px" Width="94px" Font-Bold="True" Font-Size="Medium" />
        </div>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="TransactionID" DataSourceID="SqlDataSource1" OnSelectedIndexChanged="GridView1_SelectedIndexChanged1" CssClass="grid-view">
            <Columns>
                <asp:CommandField ShowSelectButton="True" />
                <asp:BoundField DataField="UserId" HeaderText="User ID" SortExpression="UserId" />
                <asp:BoundField DataField="TransactionID" HeaderText="Transaction ID" ReadOnly="True" SortExpression="TransactionID" />
                <asp:BoundField DataField="calender" HeaderText="Date" SortExpression="calender" />
                <asp:BoundField DataField="Category" HeaderText="Category" SortExpression="Category" />
                <asp:BoundField DataField="Amount" HeaderText="Amount" SortExpression="Amount" />
            </Columns>
        </asp:GridView>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ExpenseManagerConnectionString2 %>" ProviderName="<%$ ConnectionStrings:ExpenseManagerConnectionString2.ProviderName %>" SelectCommand="SELECT * FROM [TransactionTable2]"></asp:SqlDataSource>
    </div>
</asp:Content>