Spaces:

wergrom
/

papertrade-pulse

Running

App Files Files Community

wergrom commited on about 1 month ago

Commit

31cb8c6

verified ·

1 Parent(s): f534c67

а можешь на bootstrap сделать?

Browse files

Files changed (3) hide show

index.html +53 -51
script.js +15 -9
style.css +10 -2

index.html CHANGED Viewed

@@ -5,57 +5,59 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PaperTrade Pulse</title>
     <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
-<body class="bg-gray-100 min-h-screen">
-    <div class="container mx-auto py-12 px-4">
-        <h1 class="text-4xl font-bold text-center mb-12 text-gray-800">PaperTrade Pulse 🎴</h1>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             <!-- Paper Product Card -->
-            <div class="paper-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
-                <div class="absolute inset-0 flex items-center justify-center z-10 notification hidden">
-                    <div class="bg-white rounded-lg shadow-2xl p-6 max-w-sm w-full text-center relative">
-                        <button class="close-notification absolute top-2 right-2 text-gray-400 hover:text-gray-600">
-                            <i data-feather="x" class="w-5 h-5"></i>
                         </button>
-<div class="icon-container mb-4">
-                            <i data-feather="check-circle" class="text-green-500 w-12 h-12 mx-auto hidden success-icon"></i>
-                            <i data-feather="x-circle" class="text-red-500 w-12 h-12 mx-auto hidden error-icon"></i>
                         </div>
-                        <h3 class="text-xl font-semibold mb-2 notification-title">Success!</h3>
-                        <p class="text-gray-600 notification-message">Your transaction was completed successfully.</p>
                     </div>
                 </div>
-                <div class="h-32 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
-<i data-feather="file-text" class="text-white w-20 h-20"></i>
                 </div>
-                <div class="p-6">
-                    <div class="flex justify-between items-start mb-2">
-                        <h2 class="text-xl font-bold text-gray-800">Premium A4 Paper</h2>
-                        <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">In Stock</span>
                     </div>
-                    <p class="text-gray-600 mb-4">High quality 80gsm paper with smooth texture for professional printing.</p>
-                    <div class="space-y-3 mb-4">
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Order Date</label>
-                            <input type="date" class="order-date w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                         </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Shares</label>
-                            <input type="number" class="shares w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter quantity">
                         </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Amount</label>
-                            <input type="number" class="amount w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter amount">
                         </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Account</label>
-                            <select class="account w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                 <option value="">Select account</option>
                                 <option value="personal">Personal</option>
                                 <option value="business">Business</option>
@@ -63,39 +65,39 @@
                         </div>
                     </div>
-                    <div class="flex items-center justify-between mb-4">
                         <div>
-                            <span class="text-2xl font-bold text-gray-900">$12.99</span>
-                            <span class="text-sm text-gray-500 ml-1">/ ream</span>
                         </div>
-                        <div class="text-yellow-400 flex">
-                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
-                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
-                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
-                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
-                            <i data-feather="star" class="w-4 h-4"></i>
                         </div>
                     </div>
-                    <div class="flex space-x-3">
-                        <button class="buy-btn flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center">
-                            <i data-feather="shopping-cart" class="w-4 h-4 mr-2"></i>
                             Buy
                         </button>
-                        <button class="sell-btn flex-1 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center">
-                            <i data-feather="dollar-sign" class="w-4 h-4 mr-2"></i>
                             Sell
                         </button>
                     </div>
-</div>
             </div>
         </div>
     </div>
     <script src="script.js"></script>
     <script>
         feather.replace();
     </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PaperTrade Pulse</title>
     <link rel="stylesheet" href="style.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
+<body class="bg-light min-vh-100">
+    <div class="container py-5">
+        <h1 class="display-4 fw-bold text-center mb-5 text-dark">PaperTrade Pulse 🎴</h1>
+        <div class="row g-4">
             <!-- Paper Product Card -->
+            <div class="col-md-6 col-lg-4">
+                <div class="paper-card card h-100 shadow-sm position-relative overflow-hidden">
+                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center z-3 notification d-none">
+                    <div class="bg-white rounded shadow-lg p-4 w-75 text-center position-relative">
+                        <button class="close-notification position-absolute top-0 end-0 m-2 text-secondary">
+                            <i class="bi bi-x-lg"></i>
                         </button>
+                        <div class="icon-container mb-3">
+                            <i class="bi bi-check-circle-fill text-success fs-1 mx-auto d-none success-icon"></i>
+                            <i class="bi bi-x-circle-fill text-danger fs-1 mx-auto d-none error-icon"></i>
                         </div>
+                        <h3 class="h4 fw-semibold mb-2 notification-title">Success!</h3>
+                        <p class="text-muted notification-message">Your transaction was completed successfully.</p>
                     </div>
                 </div>
+                <div class="card-img-top bg-primary bg-gradient d-flex align-items-center justify-content-center" style="height: 150px;">
+                    <i data-feather="file-text" class="text-white" width="80" height="80"></i>
                 </div>
+                <div class="card-body">
+                    <div class="d-flex justify-content-between align-items-start mb-2">
+                        <h2 class="h5 fw-bold card-title">Premium A4 Paper</h2>
+                        <span class="badge bg-primary">In Stock</span>
                     </div>
+                    <p class="card-text text-muted mb-3">High quality 80gsm paper with smooth texture for professional printing.</p>
+                    <div class="mb-3">
+                        <div class="mb-3">
+                            <label class="form-label">Order Date</label>
+                            <input type="date" class="form-control order-date">
                         </div>
+                        <div class="mb-3">
+                            <label class="form-label">Shares</label>
+                            <input type="number" class="form-control shares" placeholder="Enter quantity">
                         </div>
+                        <div class="mb-3">
+                            <label class="form-label">Amount</label>
+                            <input type="number" class="form-control amount" placeholder="Enter amount">
                         </div>
+                        <div class="mb-3">
+                            <label class="form-label">Account</label>
+                            <select class="form-select account">
                                 <option value="">Select account</option>
                                 <option value="personal">Personal</option>
                                 <option value="business">Business</option>
                         </div>
                     </div>
+                    <div class="d-flex justify-content-between align-items-center mb-3">
                         <div>
+                            <span class="h4 fw-bold">$12.99</span>
+                            <span class="text-muted small ms-1">/ ream</span>
                         </div>
+                        <div class="text-warning">
+                            <i class="bi bi-star-fill"></i>
+                            <i class="bi bi-star-fill"></i>
+                            <i class="bi bi-star-fill"></i>
+                            <i class="bi bi-star-fill"></i>
+                            <i class="bi bi-star"></i>
                         </div>
                     </div>
+                    <div class="d-grid gap-2 d-md-flex">
+                        <button class="buy-btn btn btn-primary flex-grow-1">
+                            <i data-feather="shopping-cart" class="feather me-2" width="16" height="16"></i>
                             Buy
                         </button>
+                        <button class="sell-btn btn btn-purple flex-grow-1">
+                            <i data-feather="dollar-sign" class="feather me-2" width="16" height="16"></i>
                             Sell
                         </button>
                     </div>
+                </div>
             </div>
         </div>
     </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
     </script>
 </body>
 </html>

script.js CHANGED Viewed

@@ -1,4 +1,11 @@
 document.addEventListener('DOMContentLoaded', function() {
     const buyButtons = document.querySelectorAll('.buy-btn');
     const sellButtons = document.querySelectorAll('.sell-btn');
@@ -15,7 +22,6 @@ document.addEventListener('DOMContentLoaded', function() {
             showNotification(card, 'error', 'Sell Request Failed', 'Minimum sell quantity not met. Please try again.');
         });
     });
     function showNotification(card, type, title, message) {
         const notification = card.querySelector('.notification');
         const successIcon = card.querySelector('.success-icon');
@@ -29,22 +35,22 @@ document.addEventListener('DOMContentLoaded', function() {
         // Show appropriate icon
         if (type === 'success') {
-            successIcon.classList.remove('hidden');
-            errorIcon.classList.add('hidden');
         } else {
-            successIcon.classList.add('hidden');
-            errorIcon.classList.remove('hidden');
         }
         // Show notification
-        notification.classList.remove('hidden');
         // Add close button event
         const closeBtn = card.querySelector('.close-notification');
         closeBtn.addEventListener('click', () => {
-            notification.classList.add('hide');
             setTimeout(() => {
-                notification.classList.add('hidden');
-                notification.classList.remove('hide');
             }, 300);
         });
 }

 document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
     const buyButtons = document.querySelectorAll('.buy-btn');
     const sellButtons = document.querySelectorAll('.sell-btn');
             showNotification(card, 'error', 'Sell Request Failed', 'Minimum sell quantity not met. Please try again.');
         });
     });
     function showNotification(card, type, title, message) {
         const notification = card.querySelector('.notification');
         const successIcon = card.querySelector('.success-icon');
         // Show appropriate icon
         if (type === 'success') {
+            successIcon.classList.remove('d-none');
+            errorIcon.classList.add('d-none');
         } else {
+            successIcon.classList.add('d-none');
+            errorIcon.classList.remove('d-none');
         }
         // Show notification
+        notification.classList.remove('d-none');
         // Add close button event
         const closeBtn = card.querySelector('.close-notification');
         closeBtn.addEventListener('click', () => {
+            notification.classList.add('fade-out');
             setTimeout(() => {
+                notification.classList.add('d-none');
+                notification.classList.remove('fade-out');
             }, 300);
         });
 }

style.css CHANGED Viewed

@@ -1,14 +1,22 @@
 .paper-card {
     position: relative;
-    transition: transform 0.3s ease;
-    height: auto;
     min-height: 650px;
 }
 .paper-card:hover {
     transform: translateY(-5px);
 }
 .notification {
     background-color: rgba(0, 0, 0, 0.7);
     animation: fadeIn 0.3s ease forwards;

 .paper-card {
     position: relative;
+    transition: all 0.3s ease;
     min-height: 650px;
 }
 .paper-card:hover {
     transform: translateY(-5px);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
 }
+.btn-purple {
+    background-color: #6f42c1;
+    color: white;
+}
+.btn-purple:hover {
+    background-color: #5a32a3;
+    color: white;
+}
 .notification {
     background-color: rgba(0, 0, 0, 0.7);
     animation: fadeIn 0.3s ease forwards;