Entrix/transportPortal.html at main · doondi30/Entrix · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transport Portal</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        /* Positioning the logo at the top left corner */
        .logo {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 120px;
            height: auto;
        }

        /* Profile button with profile picture silhouette */
        .profile-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: #333;
            color: white;
            padding: 15px;
            border-radius: 50%;
            cursor: pointer;
            font-family: 'Raleway', sans-serif;
            font-weight: 600;
            width: 60px; /* Increased size */
            height: 60px; /* Increased size */
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Adding profile picture silhouette */
        .profile-btn img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        /* Body and layout styles */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Raleway', sans-serif;
        }

        .split-screen {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            background-color: #ffcc00;
            position: relative;
        }

        /* Enlarged form container */
        .form-container {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 60px; /* Increased padding */
            border-radius: 15px; /* Slightly larger border radius */
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* More prominent shadow */
            max-width: 700px; /* Increased width */
            width: 100%;
            text-align: center;
        }

        /* Buttons for the delivery actions */
        .buttons {
            display: flex;
            flex-direction: column; /* Arrange buttons vertically */
            align-items: center; /* Center buttons horizontally */
            margin-top: 30px; /* Adjusted margin */
        }

        .action-btn {
            background-color: #333;
            color: white;
            padding: 15px 30px; /* Increased padding */
            margin: 10px 0; /* Vertical margin for spacing between buttons */
            border-radius: 30px; /* Slightly larger border radius */
            width: 100%;
            max-width: 300px; /* Set a maximum width for buttons */
            border: none;
            cursor: pointer;
            font-size: 18px; /* Larger font size */
            font-weight: 600;
            transition: background-color 0.3s ease;
        }

        .action-btn:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
    <div class="split-screen">
        <!-- Company Logo in the top left corner -->
        <img src="Entrix Logo.png" alt="Company Logo" class="logo">

        <!-- Profile Button in the top-right corner with profile silhouette -->
        <button class="profile-btn" onclick="goToProfile()">
            <img src="userIcon.png" alt="Profile Icon">
        </button>

        <!-- Centralized Form and Action Buttons Container -->
        <div class="form-container">
            <h1>Welcome to the Transport Portal</h1>
            <p class="tagline">Streamlining your transport experience</p>

            <div class="buttons">
                <!-- Buttons for various actions -->
                <button class="action-btn" onclick="sendDelivery()">Send Delivery</button>
                <button class="action-btn" onclick="deliveryReceived()">Delivery Received</button>
                <button class="action-btn" onclick="deliveryStatus()">Delivery Status</button>

            </div>
        </div>
    </div>

    <script>
        // JavaScript functions to handle button actions
        function goToProfile() {
            // Redirect to profile page (you can change the URL as needed)
            window.location.href = 'account-profile.html';
        }

        function sendDelivery() {
            // Redirect to send delivery page (you can change the URL as needed)
            window.location.href = 'vehicle.html';
        }

        function deliveryReceived() {
            // Redirect to send delivery page (you can change the URL as needed)
            window.location.href = 'receive.html';
        }

        function deliveryStatus() {
            // Redirect to send delivery page (you can change the URL as needed)
            window.location.href = 'status.html';
        }

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