`mockups/027-vinyl-liner-notes.html`

107 lines
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=1440">
<title>vinyl-liner-notes — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Spectral:wght@700&family=Source+Sans+Pro:wght@400&display=swap">
<style>
body {
  margin:0;
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #0d0d0d;
  color: #fff8e7;
  display: flex;
  flex-direction: column;
  height: 900px;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: #1a1a1a;
  color: #c4a747;
  font-family: 'Spectral', serif;
  font-size: 24px;
}
header select {
  padding: 6px 12px;
  background: #0d0d0d;
  color: #fff8e7;
  border: 1px solid #a83232;
  border-radius: 4px;
}
.status-indicator {
  padding: 6px 12px;
  background: #a83232;
  color: #fff8e7;
  border-radius: 4px;
  font-size: 14px;
}
main {
  display: flex;
  flex:1;
  overflow: hidden;
}
.left-pane {
  width: 40%;
  background: #1a1a1a;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.chat-log {
  flex:1;
  overflow-y: auto;
  margin-bottom: 10px;
}
.chat-message {
  margin: 10px 0;
}
.chat-message.user {
  color: #c4a747;
}
.chat-message.agent {
  color: #fff8e7;
}
.chat-input {
  display: flex;
  border-top: 1px solid #a83232;
  padding: 10px 0;
}
.chat-input input {
  flex:1;
  padding: 8px;
  background: #0d0d0d;
  color: #fff8e7;
  border: none;
  outline: none;
}
.right-pane {
  width: 60%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding: 20px;
}
.panel {
  background: #0d0d0d;
  border: 1px solid #a83232;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.panel h3 {
  color: #c4a747;
  margin-bottom: 15px;
  font-family: 'Spectral', serif;
}
.panel-content {
  font-size: 14px;
  color: #fff8e7;
}
.preview {
  background: #1a1a1a;
}
.preview .panel-content::before {
  content: "•••••••••••••••••••••••••••••••