Changeset 9868304 for src/main/resources/static/index.html
- Timestamp:
- 02/17/25 01:39:28 (4 months ago)
- Branches:
- master
- Children:
- de83113
- Parents:
- a70b5a4
- git-author:
- ste08 <sjovanoska@…> (02/17/25 01:39:02)
- git-committer:
- ste08 <sjovanoska@…> (02/17/25 01:39:28)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
src/main/resources/static/index.html
ra70b5a4 r9868304 4 4 <meta charset="UTF-8"> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Support Tickets</title> 7 <link rel="stylesheet" href="/css/main.css"> 8 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 6 <title>SkyChase-mk</title> 7 <style> 8 body { 9 background: url('images/homepage.jpg') no-repeat center center fixed; 10 background-size: cover; 11 display: flex; 12 flex-direction: column; 13 align-items: center; 14 justify-content: center; 15 height: 100vh; 16 margin: 0; 17 font-family: Arial, sans-serif; 18 } 19 20 .header { 21 position: absolute; 22 top: 0; 23 left: 0; 24 display: flex; 25 align-items: center; 26 background-color:rebeccapurple; 27 padding: 10px; 28 width: 100%; 29 } 30 31 .header img { 32 width: 40px; 33 height: 40px; 34 margin-right: 10px; 35 } 36 37 .header h1 { 38 color: white; 39 margin: 0; 40 font-size: 15px; 41 padding-right: 50px; 42 } 43 44 .buttons { 45 text-align: center; 46 } 47 48 .buttons button { 49 padding: 15px 30px; 50 margin: 10px; 51 font-size: 18px; 52 border: none; 53 border-radius: 5px; 54 cursor: pointer; 55 transition: 0.3s; 56 } 57 58 .signup { 59 background-color: rebeccapurple; 60 color: white; 61 } 62 63 .signup:hover { 64 background-color: mediumpurple; 65 } 66 67 .login { 68 background-color: #007bff; 69 color: white; 70 } 71 72 .login:hover { 73 background-color: #0056b3; 74 } 75 .adminlogin { 76 top:0; 77 right: 0; 78 background-color: rebeccapurple; 79 border:0; 80 color:white; 81 padding: 0 1200px; 82 } 83 </style> 9 84 </head> 10 85 <body> 11 12 <div id="app" class="support-ticket-container"> 13 <h1>Support Tickets</h1> 14 <div class="ticket-layout"> 15 <!-- Left side: Ticket list --> 16 <div class="ticket-list"> 17 <div class="ticket-item" 18 v-for="ticket in tickets" 19 :key="ticket.id" 20 @click="selectTicket(ticket)" 21 :class="{'active': selectedTicket && selectedTicket.id === ticket.id}"> 22 <div class="ticket-info"> 23 <p><strong>Subject:</strong> {{ ticket.subject }}</p> 24 <p><strong>Date:</strong> {{ ticket.date }}</p> 25 </div> 26 <div class="ticket-actions"> 27 <button @click.stop="resolveTicket(ticket.id)">Resolve</button> 28 </div> 29 </div> 30 </div> 31 32 <!-- Right side: Ticket details --> 33 <div class="ticket-details" v-if="selectedTicket"> 34 <h2>Ticket Details</h2> 35 <p><strong>Subject:</strong> {{ selectedTicket.subject }}</p> 36 <p><strong>Description:</strong> {{ selectedTicket.description }}</p> 37 <p><strong>Date:</strong> {{ selectedTicket.date }}</p> 38 <button @click="resolveTicket(selectedTicket.id)">Resolve</button> 39 </div> 40 </div> 86 <div class="header"> 87 <img src="/images/home.png" alt="Home Icon"> 88 <h1>SkyChase</h1> 89 <button class="adminlogin" onclick="location.href='/admin'">Admin?</button> 41 90 </div> 42 91 43 <script> 44 new Vue({ 45 el: '#app', 46 data: { 47 tickets: [ 48 { id: 1, subject: 'Flight booking issue', description: 'Customer could not book a flight.', date: '2025-02-01' }, 49 { id: 2, subject: 'Payment failure', description: 'Payment was not processed during checkout.', date: '2025-02-02' } 50 ], 51 selectedTicket: null 52 }, 53 methods: { 54 resolveTicket(id) { 55 alert(`Ticket ${id} resolved.`); 56 // Optionally, you can update the ticket's status or remove it 57 }, 58 selectTicket(ticket) { 59 this.selectedTicket = ticket; 60 } 61 } 62 }); 63 </script> 64 92 <div class="buttons"> 93 <button class="signup" onclick="location.href='/signup'">Sign Up</button> 94 <button class="login" onclick="location.href='/login'">Login</button> 95 </div> 65 96 </body> 66 97 </html>
Note:
See TracChangeset
for help on using the changeset viewer.