Vehicle_Auction_System/post_auction.php at main · VehanRajintha/Vehicle_Auction_System · 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
<?php
session_start();
if (!isset($_SESSION['email'])) {
    header('Location: login.php');
    exit();
}
$email = $_SESSION['email'];
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Post Auction</title>
    <link rel="stylesheet" href="css/post.css">
    <script src="https://unpkg.com/scrollreveal"></script> <!-- Include ScrollReveal.js -->
    <style>
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            display: none;
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="user_profile.php">Home</a></li>
                <li><a href="http://localhost/Auction_System/search.php?query=">Auctions</a></li>
                <li><a href="post_auction.php">Post Auction</a></li>
                <li><a href="user_profile_info.php">Profile</a></li>
                <li><a href="logout.php">Logout</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="post-auction-section">
            <div class="form-container">
                <h1>Post Your Auction</h1>
                <form id="post-auction-form" method="POST" action="post_auction.php" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="title">Title:</label>
                        <input type="text" id="title" name="title" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email:</label>
                        <input type="email" id="email" name="email" value="<?php echo $email; ?>" readonly>
                    </div>
                    <div class="form-group">
                        <label for="starting_bid">Starting Bid:</label>
                        <input type="number" id="starting_bid" name="starting_bid" required>
                    </div>
                    <div class="form-group">
                        <label for="image">Upload Image:</label>
                        <input type="file" id="image" name="image" accept="image/*" required
                            onchange="previewImage(event)">
                    </div>
                    <button type="submit" class="submit-btn">Post Auction</button>
                </form>
            </div>
            <div class="image-preview-container">
                <img id="image-preview" src="#" alt="Image Preview" style="display: none;">
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 Auction System. All rights reserved.</p>
    </footer>

    <div class="notification" id="notification">Auction posted successfully!</div>

    <script>
        function previewImage(event) {
            const reader = new FileReader();
            reader.onload = function () {
                const output = document.getElementById('image-preview');
                output.src = reader.result;
                output.style.display = 'block';
            };
            reader.readAsDataURL(event.target.files[0]);
        }

        document.getElementById('post-auction-form').addEventListener('submit', function (event) {
            event.preventDefault();
            const formData = new FormData(this);

            fetch('submit_auction.php', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const notification = document.getElementById('notification');
                        notification.style.display = 'block';
                        setTimeout(() => {
                            notification.style.display = 'none';
                            window.location.href = 'user_profile.php';
                        }, 5000);
                    } else {
                        alert('!' + data.message);
                        window.location.href = 'user_profile.php';
                    }
                })
                .catch(error => console.error('Error:', error));
        });
    </script>
    <script>
        // Initialize ScrollReveal
        ScrollReveal().reveal('footer p', { duration: 1000, origin: 'bottom', distance: '50px' });
        ScrollReveal().reveal('.notification', { duration: 1000, origin: 'top', distance: '50px' });
        ScrollReveal().reveal('#post-auction-form', { duration: 1000, origin: 'left', distance: '50px' });

    </script>

</body>

</html>