master
km0 3 years ago
commit 8e47b87f2b

@ -0,0 +1,119 @@
html,
body {
font-size: 1.125rem;
background-color: #fee;
font-family: Arial, Helvetica, sans-serif;
}
.info {
border: 1px solid tomato;
border-radius: 16px;
display: inline-block;
margin: 16px;
padding: 16px;
}
input[type="file"] {
display: none;
}
.info .file-upload,
input[type="submit"] {
cursor: pointer;
background-color: transparent;
font-size: 16px;
padding: 0;
line-height: 1;
border: none;
border-bottom: 1px solid tomato;
color: tomato;
}
#categories {
border-radius: 16px;
display: block;
margin: 16px;
margin-top: 32px;
margin-bottom: 64px;
}
.tag {
display: inline-block;
border: 1px solid currentColor;
padding: 0 0.5ch;
border-radius: 1em;
margin: 4px;
transform: translate(0);
transition: transform 0.4s ease-out;
text-transform: capitalize;
}
.tag:hover {
transition: transform 0.1s ease-in;
transform: translateY(-4px);
cursor: pointer;
}
.tag.active {
background-color: tomato;
color: white;
}
.tag.all {
background-color: transparent;
color: currentColor;
}
.all-button {
font-size: 1.125rem;
display: inline-block;
background-color: transparent;
border: 1px solid currentColor;
padding: 0 0.5ch;
border-radius: 1em;
margin: 4px;
cursor: pointer;
}
.all-button.active {
background-color: tomato;
color: white;
}
#chat-container {
padding: 0 8px;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.baloon {
display: none;
position: relative;
background-color: #fff;
border-radius: 16px;
padding: 16px;
margin: 16px;
max-width: 40ch;
line-height: 1.4;
}
.baloon.active {
display: inline-block;
}
.baloon .author {
font-family: "Times New Roman", Times, serif;
position: absolute;
top: 0;
margin: 0;
transform: translateY(-24px);
color: tomato;
white-space: pre;
}
.baloon .contents {
margin: 0;
}

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chat a pad - WIP</title>
<script src="./csv_to_chat.js" defer="defer"></script>
<link rel="stylesheet" href="./chat.css" />
</head>
<body>
<div class="info">
You can also upload a CSV file with the following headers:
<em>text; author; image; tag;</em>
<form id="myForm">
<label for="csvFile" class="file-upload">
<input type="file" id="csvFile" accept=".csv" />
Select File
</label>
<br />
<input type="submit" value="Upload" />
</form>
</div>
<div id="categories">
<button class="all-button active" id="active-all">All Tags</button>
</div>
<div id="chat-container"></div>
</body>
</html>

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save