Skip to content

Instantly share code, notes, and snippets.

@tyzbit
Created August 10, 2024 15:38
Show Gist options
  • Save tyzbit/0f81508f263c92cc34c23a9487c6033d to your computer and use it in GitHub Desktop.
Save tyzbit/0f81508f263c92cc34c23a9487c6033d to your computer and use it in GitHub Desktop.
Audit Log + comment mockup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Audit Log and Comments</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
padding: 1rem;
}
.entry {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 1rem;
padding: 0.5rem;
margin-bottom: 1rem;
}
.audit-log {
font-size: 0.8rem;
color: #666;
background-color: #f9f9f9;
padding: 0.5rem;
border: 1px solid #ddd;
}
.comment {
font-size: 1rem;
color: #333;
background-color: #e9e9e9;
padding: 1rem;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="entry">
<div class="audit-log">[2024-08-10 10:00] User A logged in.</div>
<div></div>
</div>
<div class="entry">
<div></div>
<div class="comment">
This is a comment about the recent changes in the project. Everything
looks good!
</div>
</div>
<div class="entry">
<div class="audit-log">
[2024-08-10 10:05] User B updated the document.
</div>
<div></div>
</div>
<div class="entry">
<div class="audit-log">
[2024-08-10 10:05] User C reverted the document.
</div>
<div></div>
</div>
<div class="entry">
<div class="audit-log">
[2024-08-10 10:05] User B changed the document permissions.
</div>
<div></div>
</div>
<div class="entry">
<div></div>
<div class="comment">
I think we should review the last section once more before finalizing.
</div>
</div>
<div class="entry">
<div></div>
<div class="comment">We need to check to see what Manager A thinks</div>
</div>
<div class="entry">
<div></div>
<div class="comment">They said it's okay</div>
</div>
<div class="entry">
<div class="audit-log">[2024-08-10 10:10] User A logged out.</div>
<div></div>
</div>
<div class="entry">
<div></div>
<div class="comment">
Great work, team! Looking forward to the next update.
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment