From e455c271c469402468d9202a2126f40425802a02884301936219087114fc60b2 Mon Sep 17 00:00:00 2001 From: Utkarsh Khedkar Date: Fri, 19 Dec 2025 16:20:43 +0530 Subject: [PATCH 1/3] Chat UI Changes --- resources/views/admin/chat_support.blade.php | 429 +++++++++---------- resources/views/admin/shipments.blade.php | 327 ++++++++++---- 2 files changed, 452 insertions(+), 304 deletions(-) diff --git a/resources/views/admin/chat_support.blade.php b/resources/views/admin/chat_support.blade.php index 623fa65..b6b9eb3 100644 --- a/resources/views/admin/chat_support.blade.php +++ b/resources/views/admin/chat_support.blade.php @@ -10,10 +10,10 @@ --danger-gradient: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%); --warning-gradient: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); --info-gradient: linear-gradient(135deg, #56ccf2 0%, #2f80ed 100%); - --card-shadow: 0 8px 25px rgba(0,0,0,0.08); - --card-shadow-hover: 0 15px 35px rgba(0,0,0,0.12); - --border-radius: 12px; - --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --card-shadow: 0 3px 10px rgba(0,0,0,0.05); + --card-shadow-hover: 0 6px 16px rgba(0,0,0,0.10); + --border-radius: 8px; + --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } * { @@ -23,24 +23,24 @@ .chat-dashboard { min-height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); - padding: 1.5rem; + padding: 0.75rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .dashboard-header { text-align: center; - margin-bottom: 2rem; + margin-bottom: 1rem; position: relative; } .dashboard-title { - font-size: clamp(2rem, 4vw, 3rem); + font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; background: var(--primary-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; - margin: 0 0 0.75rem 0; + margin: 0 0 0.4rem 0; position: relative; display: inline-block; } @@ -48,143 +48,106 @@ .dashboard-title::before { content: '💬'; position: absolute; - left: -2.5rem; + left: -1.6rem; top: 50%; transform: translateY(-50%); - font-size: 2rem; + font-size: 1.3rem; animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(-50%) translateY(0); } - 40% { transform: translateY(-50%) translateY(-8px); } - 60% { transform: translateY(-50%) translateY(-4px); } + 40% { transform: translateY(-50%) translateY(-5px); } + 60% { transform: translateY(-50%) translateY(-2px); } } .dashboard-subtitle { color: #64748b; - font-size: 1rem; - max-width: 500px; + font-size: 0.8rem; + max-width: 380px; margin: 0 auto; - line-height: 1.5; + line-height: 1.3; } - .stats-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 1rem; - margin-bottom: 2rem; - } - - .stat-card { - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(15px); - border-radius: var(--border-radius); - padding: 1.25rem 1.5rem; - display: flex; - align-items: center; - gap: 1rem; - border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: var(--card-shadow); - transition: var(--transition); - position: relative; - overflow: hidden; - } - - .stat-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: var(--primary-gradient); - transform: scaleX(0); - transition: transform 0.3s ease; - } - - .stat-card:hover { - transform: translateY(-4px); - box-shadow: var(--card-shadow-hover); - } - - .stat-card:hover::before { - transform: scaleX(1); - } - - .stat-icon { - width: 55px; - height: 55px; - border-radius: 12px; + /* 🔔 GLOBAL NEW MESSAGE COUNTER */ + .global-notify { + margin: 0 auto 0.75rem auto; + max-width: 320px; + padding: 0.35rem 0.7rem; + border-radius: 999px; + background: rgba(15,23,42,0.03); + border: 1px dashed #cbd5f5; display: flex; align-items: center; justify-content: center; - font-size: 1.5rem; - box-shadow: 0 6px 20px rgba(0,0,0,0.1); - flex-shrink: 0; - } - - .stat-total { background: var(--primary-gradient); color: white; } - .stat-open { background: var(--success-gradient); color: white; } - .stat-closed{ background: var(--danger-gradient); color: white; } - - .stat-content h3 { - font-size: 2rem; - font-weight: 800; - margin: 0 0 0.125rem 0; + gap: 0.4rem; + font-size: 0.78rem; color: #1e293b; } - .stat-content p { - margin: 0; - color: #64748b; - font-size: 0.9rem; - font-weight: 500; + .global-notify-badge { + background: #ef4444; + color: #fff; + min-width: 18px; + padding: 0 0.35rem; + height: 18px; + border-radius: 999px; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 0.7rem; + font-weight: 700; + box-shadow: 0 0 0 2px rgba(254, 226, 226, 0.8); + } + + .global-notify.d-none { + display: none; } .tickets-container { background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(15px); + backdrop-filter: blur(12px); border-radius: var(--border-radius); - padding: 1.5rem; + padding: 0.75rem 0.9rem; box-shadow: var(--card-shadow); border: 1px solid rgba(255, 255, 255, 0.3); + /* max-height / overflow काढले, जेणेकरून बाहेरचा page scroll वापरला जाईल */ + display: block; } .tickets-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 1.5rem; - padding-bottom: 1rem; + margin-bottom: 0.6rem; + padding-bottom: 0.45rem; border-bottom: 1px solid #f1f5f9; } .tickets-title { - font-size: 1.4rem; + font-size: 1rem; font-weight: 700; color: #1e293b; display: flex; align-items: center; - gap: 0.5rem; + gap: 0.3rem; } .tickets-count { background: var(--primary-gradient); color: white; - padding: 0.2rem 0.6rem; - border-radius: 16px; - font-size: 0.8rem; + padding: 0.1rem 0.45rem; + border-radius: 12px; + font-size: 0.7rem; font-weight: 600; } - /* ========= COMPACT TICKET CARD ========= */ .ticket-item { background: white; - border-radius: 10px; - padding: 0.75rem 1rem; - margin-bottom: 0.6rem; - border: 1px solid #f1f5f9; + border-radius: 6px; + padding: 0.4rem 0.6rem; + margin-bottom: 0.3rem; + border: 1px solid #e5e7eb; transition: var(--transition); position: relative; overflow: hidden; @@ -196,16 +159,16 @@ left: 0; top: 0; bottom: 0; - width: 3px; + width: 2px; background: var(--primary-gradient); transform: scaleY(0); transition: var(--transition); } .ticket-item:hover { - transform: translateY(-2px); + transform: translateY(-1px); box-shadow: var(--card-shadow-hover); - border-color: rgba(102, 126, 234, 0.15); + border-color: rgba(102, 126, 234, 0.35); } .ticket-item:hover::before { @@ -215,23 +178,23 @@ .ticket-header { display: flex; align-items: flex-start; - gap: 0.6rem; - margin-bottom: 0.5rem; + gap: 0.4rem; + margin-bottom: 0.25rem; } .ticket-avatar { - width: 40px; - height: 40px; - border-radius: 10px; + width: 26px; + height: 26px; + border-radius: 6px; background: var(--info-gradient); display: flex; align-items: center; justify-content: center; - font-size: 1rem; + font-size: 0.75rem; font-weight: 700; color: white; flex-shrink: 0; - box-shadow: 0 6px 16px rgba(86, 204, 242, 0.25); + box-shadow: 0 3px 8px rgba(86, 204, 242, 0.25); position: relative; overflow: hidden; } @@ -244,7 +207,7 @@ width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); - transition: left 0.5s; + transition: left 0.4s; } .ticket-item:hover .ticket-avatar::after { @@ -257,27 +220,27 @@ } .ticket-name { - font-size: 0.95rem; + font-size: 0.8rem; font-weight: 700; color: #1e293b; - margin: 0 0 0.15rem 0; + margin: 0 0 0.08rem 0; display: flex; align-items: center; - gap: 0.4rem; + gap: 0.25rem; } .unread-count { background: #ef4444; color: white; - min-width: 20px; - height: 20px; - border-radius: 50%; + min-width: 16px; + height: 16px; + border-radius: 999px; display: flex; align-items: center; justify-content: center; - font-size: 0.7rem; + font-size: 0.6rem; font-weight: 700; - box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4); + box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4); animation: pulse 2s infinite; } @@ -288,25 +251,27 @@ .ticket-preview { color: #64748b; - font-size: 0.8rem; - line-height: 1.4; - margin-bottom: 0.25rem; - display: flex; - align-items: center; - gap: 0.4rem; - } - - .ticket-time { - font-size: 0.75rem; - color: #94a3b8; + font-size: 0.7rem; + line-height: 1.25; + margin-bottom: 0.1rem; display: flex; align-items: center; gap: 0.25rem; + max-height: 1.8em; + overflow: hidden; + } + + .ticket-time { + font-size: 0.65rem; + color: #94a3b8; + display: flex; + align-items: center; + gap: 0.18rem; } .ticket-time svg { - width: 12px; - height: 12px; + width: 10px; + height: 10px; flex-shrink: 0; } @@ -314,18 +279,18 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: 0.6rem; - border-top: 1px dashed #f1f5f9; - margin-top: 0.4rem; + padding-top: 0.3rem; + border-top: 1px dashed #e5e7eb; + margin-top: 0.2rem; } .status-badge { - padding: 0.25rem 0.7rem; - border-radius: 50px; - font-size: 0.7rem; + padding: 0.14rem 0.45rem; + border-radius: 999px; + font-size: 0.6rem; font-weight: 700; text-transform: uppercase; - letter-spacing: 0.3px; + letter-spacing: 0.2px; } .status-open { background: var(--success-gradient); color: white; } @@ -335,86 +300,87 @@ background: var(--primary-gradient); color: white; border: none; - padding: 0.45rem 0.9rem; - border-radius: 25px; + padding: 0.25rem 0.6rem; + border-radius: 999px; font-weight: 600; - font-size: 0.8rem; - display: flex; + font-size: 0.7rem; + display: inline-flex; align-items: center; - gap: 0.4rem; + gap: 0.25rem; text-decoration: none; transition: var(--transition); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25); + box-shadow: 0 3px 10px rgba(102, 126, 234, 0.25); + white-space: nowrap; } .chat-btn:hover { transform: translateY(-1px); - box-shadow: 0 10px 25px rgba(102, 126, 234, 0.35); + box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35); color: white; } .chat-btn::after { content: '→'; - transition: margin-left 0.3s ease; + transition: margin-left 0.25s ease; margin-left: 0; } .chat-btn:hover::after { - margin-left: 0.4rem; + margin-left: 0.18rem; } .empty-state { text-align: center; - padding: 2.5rem 1.5rem; + padding: 1.6rem 1rem; background: rgba(255, 255, 255, 0.6); border-radius: var(--border-radius); border: 2px dashed #e2e8f0; } .empty-icon { - font-size: 4rem; - margin-bottom: 1.5rem; + font-size: 2.8rem; + margin-bottom: 0.9rem; display: block; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } - 50% { transform: translateY(-15px); } + 50% { transform: translateY(-8px); } } .empty-title { - font-size: 1.4rem; + font-size: 1.05rem; font-weight: 700; color: #1e293b; - margin-bottom: 0.75rem; + margin-bottom: 0.4rem; } .empty-subtitle { color: #64748b; - font-size: 1rem; - margin-bottom: 1.5rem; - line-height: 1.5; + font-size: 0.85rem; + margin-bottom: 1rem; + line-height: 1.35; } .ticket-id { - background: rgba(102, 126, 234, 0.1); + background: rgba(102, 126, 234, 0.08); color: #667eea; - padding: 0.2rem 0.75rem; - border-radius: 16px; - font-size: 0.75rem; + padding: 0.12rem 0.5rem; + border-radius: 999px; + font-size: 0.65rem; font-weight: 600; display: inline-flex; align-items: center; - gap: 0.25rem; + gap: 0.18rem; } .new-message-dot { position: absolute; - top: 0.75rem; - right: 0.75rem; - width: 10px; - height: 10px; + top: 0.45rem; + right: 0.5rem; + width: 7px; + height: 7px; background: #ef4444; border-radius: 50%; border: 2px solid white; @@ -425,53 +391,52 @@ @keyframes blink { 0%, 100% { opacity: 1; transform: scale(1); } - 50% { opacity: 0.5; transform: scale(1.15); } - } - - @media (max-width: 768px) { - .chat-dashboard { - padding: 1rem; - } - - .stats-grid { - grid-template-columns: 1fr; - gap: 0.75rem; - } - - .ticket-header { - flex-direction: column; - gap: 0.75rem; - } - - .ticket-footer { - flex-direction: column; - gap: 0.75rem; - align-items: stretch; - } - - .chat-btn { - justify-content: center; - } + 50% { opacity: 0.5; transform: scale(1.1); } } + /* इथे आता inner scroll नाही */ .tickets-list { - max-height: 55vh; - overflow-y: auto; - padding-right: 0.4rem; + /* flex: 1; काढला, overflow काढला, parent + body scroll वापरेल */ + padding-right: 0; } .tickets-list::-webkit-scrollbar { - width: 5px; + width: 3px; } .tickets-list::-webkit-scrollbar-track { background: #f1f5f9; - border-radius: 8px; + border-radius: 6px; } .tickets-list::-webkit-scrollbar-thumb { background: var(--primary-gradient); - border-radius: 8px; + border-radius: 6px; + } + + @media (max-width: 768px) { + .chat-dashboard { + padding: 0.6rem; + } + + .tickets-container { + /* max-height काढलेले, mobile वरही outer scroll */ + } + + .ticket-header { + flex-direction: column; + gap: 0.35rem; + } + + .ticket-footer { + flex-direction: column; + gap: 0.35rem; + align-items: stretch; + } + + .chat-btn { + justify-content: center; + } } @@ -484,29 +449,10 @@

- -
-
-
💬
-
-

{{ $tickets->count() }}

-

Total Conversations

-
-
-
-
📈
-
-

{{ $tickets->where('status', 'open')->count() }}

-

Active Tickets

-
-
-
-
✅
-
-

{{ $tickets->where('status', 'closed')->count() }}

-

Resolved Tickets

-
-
+ +
+ New messages: + 0
@@ -552,15 +498,15 @@ @endif
- + @php $lastMsg = $ticket->messages()->latest()->first(); @endphp - +
@if($lastMsg) @if($lastMsg->message) - {{ Str::limit($lastMsg->message, 55) }} + {{ Str::limit($lastMsg->message, 45) }} @elseif(Str::startsWith($lastMsg->file_type, 'image')) 📷 Photo shared @else @@ -581,7 +527,6 @@
@endif -
#{{ $ticket->id }}
@@ -626,21 +571,51 @@ function waitForEcho(callback, retries = 40) { waitForEcho(() => { console.log('[ADMIN LIST] Listening for new messages...'); + const globalBox = document.getElementById('globalNewMessageBox'); + const globalCount = document.getElementById('globalNewMessageCount'); + let totalNewMessages = 0; + window.Echo.private('admin.chat') .listen('.NewChatMessage', (event) => { // only USER → ADMIN messages if (event.sender_type !== 'App\\Models\\User') return; - const badge = document.getElementById(`badge-${event.ticket_id}`); - if (!badge) return; + const ticketId = event.ticket_id; - let count = parseInt(badge.innerText || 0); - badge.innerText = count + 1; - badge.classList.remove('d-none'); + // 1) UPDATE PER-TICKET BADGE + const badge = document.getElementById(`badge-${ticketId}`); + if (badge) { + let count = parseInt(badge.innerText || 0); + badge.innerText = count + 1; + badge.classList.remove('d-none'); + } - console.log('[ADMIN LIST] Badge updated for ticket', event.ticket_id); + // 2) UPDATE GLOBAL NEW MESSAGE COUNTER + totalNewMessages++; + if (globalBox && globalCount) { + globalBox.classList.remove('d-none'); + globalCount.innerText = totalNewMessages; + } + + // 3) त्या ticket ला यादीत सर्वात वर आणा आणि स्क्रोल करा + const listContainer = document.querySelector('.tickets-list'); + const ticketEl = document.querySelector(`.ticket-item[data-ticket-id="${ticketId}"]`); + + if (listContainer && ticketEl) { + if (ticketEl.previousElementSibling) { + listContainer.insertBefore(ticketEl, listContainer.firstElementChild); + } + + const topOffset = ticketEl.offsetTop; + window.scrollTo({ + top: listContainer.offsetTop + topOffset - 20, + behavior: 'smooth' + }); + } + + console.log('[ADMIN LIST] Badge/global counter updated for ticket', ticketId); }); }); -@endsection \ No newline at end of file +@endsection diff --git a/resources/views/admin/shipments.blade.php b/resources/views/admin/shipments.blade.php index b3565a9..2d8be18 100644 --- a/resources/views/admin/shipments.blade.php +++ b/resources/views/admin/shipments.blade.php @@ -964,8 +964,8 @@ display: table-row; } - /* ---------- Pagination Styles (Same as Account Dashboard) ---------- */ - .pagination-container { + /* ---------- Pagination Styles ---------- */ + .pagination-container, .modal-pagination-container { display: flex; justify-content: space-between; align-items: center; @@ -974,19 +974,19 @@ border-top: 1px solid #eef3fb; } - .pagination-info { + .pagination-info, .modal-pagination-info { font-size: 13px; color: #9ba5bb; font-weight: 600; } - .pagination-controls { + .pagination-controls, .modal-pagination-controls { display: flex; align-items: center; gap: 8px; } - .pagination-btn { + .pagination-btn, .modal-pagination-btn { background: #fff; border: 1px solid #e3eaf6; color: #1a2951; @@ -1003,13 +1003,13 @@ height: 32px; } - .pagination-btn:hover:not(:disabled) { + .pagination-btn:hover:not(:disabled), .modal-pagination-btn:hover:not(:disabled) { background: #1a2951; color: white; border-color: #1a2951; } - .pagination-btn:disabled { + .pagination-btn:disabled, .modal-pagination-btn:disabled { background: #f8fafc; color: #cbd5e0; border-color: #e2e8f0; @@ -1017,7 +1017,7 @@ opacity: 0.6; } - .pagination-page-btn { + .pagination-page-btn, .modal-pagination-page-btn { background: #fff; border: 1px solid #e3eaf6; color: #1a2951; @@ -1031,13 +1031,13 @@ text-align: center; } - .pagination-page-btn:hover { + .pagination-page-btn:hover, .modal-pagination-page-btn:hover { background: #1a2951; color: white; border-color: #1a2951; } - .pagination-page-btn.active { + .pagination-page-btn.active, .modal-pagination-page-btn.active { background: #1a2951; color: white; border-color: #1a2951; @@ -1055,56 +1055,14 @@ padding: 0 4px; } - /* Image-based pagination buttons */ - .pagination-img-btn { - background: #fff; - border: 1px solid #e3eaf6; - border-radius: 6px; - cursor: pointer; - transition: all 0.3s ease; - display: flex; - align-items: center; - justify-content: center; - min-width: 40px; - height: 32px; - padding: 0; - } - - .pagination-img-btn:hover:not(:disabled) { - background: #1a2951; - border-color: #1a2951; - } - - .pagination-img-btn:disabled { - background: #f8fafc; - border-color: #e2e8f0; - cursor: not-allowed; - opacity: 0.5; - } - - .pagination-img-btn img { - width: 16px; - height: 16px; - filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(748%) hue-rotate(201deg) brightness(93%) contrast(89%); - transition: filter 0.3s ease; - } - - .pagination-img-btn:hover:not(:disabled) img { - filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(106%) contrast(101%); - } - - .pagination-img-btn:disabled img { - filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(165%) hue-rotate(179deg) brightness(89%) contrast(86%); - } - @media (max-width: 768px) { - .pagination-container { + .pagination-container, .modal-pagination-container { flex-direction: column; gap: 10px; align-items: stretch; } - .pagination-controls { + .pagination-controls, .modal-pagination-controls { justify-content: center; } } @@ -1205,7 +1163,7 @@ Amount (₹) - + @forelse($availableOrders as $order) @@ -1233,6 +1191,29 @@
+ + + +
-
-@endsection \ No newline at end of file +@endsection From ccce02f43ee280938e44caaedd025621f90588ef4fbdb1360c120ee74bffcc25 Mon Sep 17 00:00:00 2001 From: Utkarsh Khedkar Date: Mon, 22 Dec 2025 16:49:27 +0530 Subject: [PATCH 3/3] Account Changes --- resources/views/admin/account.blade.php | 147 ++++++++++++++++++++++++ 1 file changed, 147 insertions(+) diff --git a/resources/views/admin/account.blade.php b/resources/views/admin/account.blade.php index c584ca9..4ffeedd 100644 --- a/resources/views/admin/account.blade.php +++ b/resources/views/admin/account.blade.php @@ -1021,6 +1021,153 @@ tr:hover td{ background:#fbfdff; } align-items: center; flex-wrap: wrap; } +/* नवीन responsive styles */ +@media (max-width:980px){ + .account-container { + padding: 20px !important; + margin: 0 auto; + } + + .panel-card { + min-width:100% !important; + padding: 18px !important; + } + + .search-row input{ + width:220px !important; + } + + .pagination-container { + flex-direction: column; + gap: 10px; + align-items: stretch; + margin-right: 0 !important; + } + + .combined-filters-row { + flex-direction: column; + align-items: stretch; + } + + .filter-group1, + .filter-group2, + .filter-group3, + .filter-group4 { + width: 100% !important; + } +} + +@media (max-width:768px){ + body { + overflow-x: hidden; + } + + .account-container { + padding: 15px !important; + } + + .account-header { + padding: 18px !important; + } + + .top-actions { + flex-direction: column; + align-items: stretch; + gap: 10px; + } + + .top-actions .left { + justify-content: center; + } + + .account-panels { + gap: 15px; + } + + .search-row input { + width: 100% !important; + max-width: 300px; + } + + /* pagination adjustments for mobile */ + .pagination-controls, + .pagination-controls1, + .pagination-controls2 { + margin-right: 0 !important; + justify-content: center; + } + + .pagination-container { + margin-right: 0 !important; + } +} + +/* Zoom out specific fix */ +@media screen and (max-width: 1200px) { + .account-container { + padding: 20px; + max-width: 95%; + } + + .payment-block { + min-width: 100%; + } +} + +/* Extra small screens */ +@media screen and (max-width: 576px) { + .account-container { + padding: 10px; + } + + .account-header h2 { + font-size: 22px; + } + + .panel-card { + padding: 15px; + min-height: auto; + } + + .pagination-container { + padding: 10px 0; + } + + .pagination-info { + font-size: 12px; + } +} + +/* Prevent horizontal scroll on very small screens */ +@media screen and (max-width: 400px) { + body { + min-width: 320px; + } + + .account-container { + padding: 10px 5px; + } + + .table-responsive { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} + +/* Fix for sidebar gap on zoom out */ +html, body { + max-width: 100vw; + overflow-x: hidden; +} + +/* Ensure all containers are properly constrained */ +.container, .container-fluid, .account-container { + max-width: 100%; + overflow-x: hidden; +} + + +