You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
489 lines
30 KiB
489 lines
30 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Comment Thread Component</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.css" rel="stylesheet" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.js"></script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<div class="container my-5">
|
|
<h1>Comment Thread Component</h3>
|
|
|
|
<h5 class="mt-4">No comment</h5>
|
|
<p>No comment yet. Display clickable add comment text with icon.</p>
|
|
<table class="table table-hover table-bordered">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First column</th>
|
|
<th scope="col">Second column</th>
|
|
<th scope="col" width="30%">Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Lorem Ipsum 1</td>
|
|
<td>Lorem Ipsum 2</td>
|
|
<td>
|
|
<div class="d-flex justify-content-center align-items-center gap-1 p-2 text-muted" style="cursor:pointer">
|
|
<i class="far fa-comment text-muted"></i> Add Comment
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="pills-a-html-tab" data-bs-toggle="pill" data-bs-target="#pills-a-html" type="button" role="tab" aria-controls="pills-a-html" aria-selected="true">Home</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="pills-a-react-tab" data-bs-toggle="pill" data-bs-target="#pills-a-react" type="button" role="tab" aria-controls="pills-a-react" aria-selected="false">Profile</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="pills-a-vue-tab" data-bs-toggle="pill" data-bs-target="#pills-a-vue" type="button" role="tab" aria-controls="pills-a-vue" aria-selected="false">Contact</button>
|
|
</li>
|
|
<li class="nav-item ms-auto">
|
|
<button class="btn btn-outline-dark" onclick="copyToClipboard(this)">Copy</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="tab-content" id="pills-tabContent">
|
|
<div class="tab-pane fade active show" id="pills-a-html" role="tabpanel" aria-labelledby="pills-a-html-tab">
|
|
<pre class="mt-0"><code class="language-html">
|
|
<table class="table table-hover table-bordered">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th scope="col">...</th>
|
|
<th scope="col">...</th>
|
|
<th scope="col">...</th>
|
|
<th scope="col" width="30%">...</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">...</th>
|
|
<td>...</td>
|
|
<td>...</td>
|
|
<td>
|
|
<div class="d-flex justify-content-center align-items-center gap-1 p-2 text-muted" style="cursor:pointer">
|
|
<i class="far fa-comment text-muted"></i> Add Comment
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</code></pre>
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-a-react" role="tabpanel" aria-labelledby="pills-a-react-tab">
|
|
<pre class="mt-0"><code class="language-html">
|
|
import React from 'react';
|
|
import './styles.css'; // Assuming you have a CSS file for styling
|
|
|
|
function MyTable() {
|
|
return (
|
|
<table className="table table-hover table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First column</th>
|
|
<th scope="col">Second column</th>
|
|
<th scope="col" width="30%">Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Lorem Ipsum 1</td>
|
|
<td>Lorem Ipsum 2</td>
|
|
<td>
|
|
<div className="d-flex justify-content-center align-items-center gap-1 p-2 text-muted" style={{ cursor: 'pointer' }}>
|
|
<i className="far fa-comment text-muted"></i> Add Comment
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
);
|
|
}
|
|
|
|
export default MyTable;
|
|
</code></pre>
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-a-vue" role="tabpanel" aria-labelledby="pills-a-vue-tab">
|
|
<pre class="mt-0"><code class="language-html">
|
|
<template>
|
|
<table class="table table-hover table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First column</th>
|
|
<th scope="col">Second column</th>
|
|
<th scope="col" width="30%">Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Lorem Ipsum 1</td>
|
|
<td>Lorem Ipsum 2</td>
|
|
<td>
|
|
<div class="d-flex justify-content-center align-items-center gap-1 p-2 text-muted" style="cursor:pointer">
|
|
<i class="far fa-comment text-muted"></i> Add Comment
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'MyTable',
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
/* Add your table-specific styles here */
|
|
</style>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h5 class="mt-5">Opened comment</h5>
|
|
<p>Comment opened already.</p>
|
|
<table class="table table-hover table-bordered">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First column</th>
|
|
<th scope="col">Second column</th>
|
|
<th scope="col" width="30%">Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Lorem Ipsum 1</td>
|
|
<td>Lorem Ipsum 2</td>
|
|
<td>
|
|
<div class="card bg-light rounded-4" style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:24px; max-width:26px">
|
|
<div class="d-flex flex-column col" style="width:inherit !important">
|
|
<div class="d-flex justify-content-between gap-4">
|
|
<div class="card-title text-truncate text-xs">
|
|
<!-- Username -->
|
|
Juan Dela Cruz
|
|
</div>
|
|
<div class="text-end text-muted text-xxs">
|
|
<!-- Latest comment date & time -->
|
|
08 Aug 2024 01:06 PM
|
|
</div>
|
|
</div>
|
|
<p class="card-text text-truncate text-xs" style="width:300px !important">
|
|
<!-- Cemment content here -->
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h5 class="mt-5">Unread Latest Comment</h5>
|
|
<p>Latest comment unopened. Font weight set to bold.</p>
|
|
<table class="table table-hover table-bordered">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First column</th>
|
|
<th scope="col">Second column</th>
|
|
<th scope="col" width="30%">Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Lorem Ipsum 1</td>
|
|
<td>Lorem Ipsum 2</td>
|
|
<td>
|
|
<div class="card bg-light rounded-4" style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:24px; max-width:26px">
|
|
<div class="d-flex flex-column col" style="width:inherit !important">
|
|
<div class="d-flex justify-content-between gap-4">
|
|
<div class="card-title text-truncate fs-6 fw-bold">
|
|
<!-- Username -->
|
|
Juan Dela Cruz
|
|
</div>
|
|
<div class="text-end fs-6 fw-bold">
|
|
<!-- Latest comment date & time -->
|
|
08 Aug 2024 01:06 PM
|
|
</div>
|
|
</div>
|
|
<p class="card-text text-truncate fs-6 fw-bold" style="width:300px !important">
|
|
<!-- Cemment content here -->
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h5 class="mt-5">Open Comment Modal</h5>
|
|
<p>Click comment area to open comment modal.</p>
|
|
<table class="table table-hover table-bordered">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First column</th>
|
|
<th scope="col">Second column</th>
|
|
<th scope="col" width="30%">Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Lorem Ipsum 1</td>
|
|
<td>Lorem Ipsum 2</td>
|
|
<td>
|
|
<div class="card bg-light rounded-4" style="cursor:pointer" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:24px; max-width:26px">
|
|
<div class="d-flex flex-column col" style="width:inherit !important">
|
|
<div class="d-flex justify-content-between gap-4">
|
|
<div class="card-title text-truncate fs-6 fw-bold">
|
|
<!-- Username -->
|
|
Juan Dela Cruz
|
|
</div>
|
|
<div class="text-end fs-6 fw-bold">
|
|
<!-- Latest comment date & time -->
|
|
08 Aug 2024 01:06 PM
|
|
</div>
|
|
</div>
|
|
<p class="card-text text-truncate fs-6 fw-bold" style="width:300px !important">
|
|
<!-- Cemment content here -->
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="exampleModalLabel">Comments</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="card bg-body-secondary rounded-4" style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px">
|
|
<div class="d-flex flex-column col" style="width:inherit !important">
|
|
<div class="d-flex justify-content-between gap-4">
|
|
<div class="card-title text-truncate fs-6">
|
|
<!-- Username -->
|
|
Juan Dela Cruz <span class="badge rounded-pill text-bg-secondary">Administrator</span>
|
|
</div>
|
|
<div class="text-end fs-6">
|
|
<!-- Latest comment date & time -->
|
|
08 Aug 2024 01:06 PM
|
|
</div>
|
|
</div>
|
|
<p class="card-text fs-6">
|
|
<!-- Cemment content here -->
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer d-flex justify-content-between">
|
|
<div class="ms-5">
|
|
<a class="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i class="fas fa-file-pdf text-danger me-1"></i>sample.pdf</a>
|
|
</div>
|
|
<div class="d-flex">
|
|
<a href="#" class="btn"><i class="fas fa-reply text-dark"></i></a>
|
|
<a href="#" class="btn"><i class="fas fa-comments text-dark me-1"></i>0</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Comment with reply -->
|
|
<div class="card bg-body-secondary rounded-4 mt-3 " style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px">
|
|
<div class="d-flex flex-column col" style="width:inherit !important">
|
|
<div class="d-flex justify-content-between gap-4">
|
|
<div class="card-title text-truncate fs-6">
|
|
<!-- Username -->
|
|
Maria Delos Reyes <span class="badge rounded-pill text-bg-secondary">Proponent</span>
|
|
</div>
|
|
<div class="text-end fs-6">
|
|
<!-- Latest comment date & time -->
|
|
08 Aug 2024 01:06 PM
|
|
</div>
|
|
</div>
|
|
<p class="card-text fs-6">
|
|
<!-- Cemment content here -->
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer d-flex justify-content-between">
|
|
<div class="ms-5">
|
|
<a class="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i class="fas fa-file-image text-danger me-1"></i>sample.jpg</a>
|
|
</div>
|
|
<div class="d-flex">
|
|
<a href="#" class="btn"><i class="fas fa-reply text-dark"></i></a>
|
|
<a href="#" class="btn"><i class="fas fa-comments text-dark me-1"></i>1</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Replies -->
|
|
<div class="row">
|
|
<div class="col"></div>
|
|
<div class="col-10 border border-3 border-top-0 border-end-0 border-bottom-0 ps-5">
|
|
<div class="card bg-body-secondary rounded-4 mt-3" style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px">
|
|
<div class="d-flex flex-column col" style="width:inherit !important">
|
|
<div class="d-flex justify-content-between gap-4">
|
|
<div class="card-title text-truncate fs-6">
|
|
<!-- Username -->
|
|
Maria Delos Reyes <span class="badge rounded-pill text-bg-secondary">Proponent</span>
|
|
</div>
|
|
<div class="text-end fs-6">
|
|
<!-- Latest comment date & time -->
|
|
08 Aug 2024 01:06 PM
|
|
</div>
|
|
</div>
|
|
<p class="card-text fs-6">
|
|
<!-- Cemment content here -->
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer d-flex justify-content-between">
|
|
<div class="ms-5">
|
|
<a class="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i class="fas fa-file-image text-danger me-1"></i>sample.jpg</a>
|
|
</div>
|
|
<div class="d-flex">
|
|
<a href="#" class="btn"><i class="fas fa-pen"></i></a>
|
|
<a href="#" class="btn"><i class="far fa-trash-alt text-danger"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Send Reply Thread -->
|
|
<div class="card border-0 rounded-4 mt-2" style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px">
|
|
<div class="border border-dark rounded-4 w-100 p-2">
|
|
<textarea class="comment-textarea w-100" placeholder="Reply to this thread..." style="border:0; resize: none; outline:none"></textarea>
|
|
<div class="d-flex justify-content-between">
|
|
<div class="d-flex justify-content-between align-items-center border border-dark rounded border border-secondary text-bg-light">
|
|
<p class="p-1 mb-0 text-dark px-2 text-truncate">File.pdf</p>
|
|
<button type="button" class="btn text-danger font-weight-bold"><i class="far fa-window-close"></i></button>
|
|
</div>
|
|
<div class="d-flex">
|
|
<a href="#" class="btn"><i class=" fas fa-paperclip"></i></a>
|
|
<a href="#" class="btn"><i class=" fas fa-paper-plane text-info"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Send Comment Thread -->
|
|
<div class="card border-0 rounded-4 mt-2" style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px">
|
|
<div class="border border-dark rounded-4 w-100 p-2">
|
|
<textarea class="comment-textarea w-100" placeholder="Write a new comment..." style="border:0; resize: none; outline:none"></textarea>
|
|
<div class="d-flex justify-content-between">
|
|
<div class="d-flex justify-content-between align-items-center border border-dark rounded border border-secondary text-bg-light">
|
|
<p class="p-1 mb-0 text-dark px-2 text-truncate">File.pdf</p>
|
|
<button type="button" class="btn text-danger font-weight-bold"><i class="far fa-window-close"></i></button>
|
|
</div>
|
|
<div class="d-flex">
|
|
<a href="#" class="btn"><i class=" fas fa-paperclip"></i></a>
|
|
<a href="#" class="btn"><i class=" fas fa-paper-plane text-info"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
// Function to copy the code block content
|
|
function copyToClipboard(element) {
|
|
const activeTabPane = document.querySelector('.tab-pane.fade.active.show');
|
|
const preElement = document.getElementById(activeTabPane.id).querySelector('pre code');
|
|
const codeText = preElement.textContent;
|
|
|
|
const tempElement = document.createElement('textarea');
|
|
tempElement.value = codeText;
|
|
document.body.appendChild(tempElement);
|
|
|
|
tempElement.select();
|
|
document.execCommand('copy');
|
|
|
|
element.textContent = 'Copied!';
|
|
element.classList.add('active');
|
|
|
|
setTimeout(function(){
|
|
element.textContent = 'Copy';
|
|
element.classList.remove('active');
|
|
}, 2000)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|