Add a few more things.
'Return to home' to download page. Javascript filter mockup. GitLab link on NavBar. Misc visual improvements.
This commit is contained in:
Sage Vaillancourt
parent
1384994382
commit
bb21ff8e9b
31
src/app.css
31
src/app.css
|
|
@ -47,7 +47,6 @@ select option {
|
|||
}
|
||||
|
||||
button {
|
||||
padding: 0.4em 1.0em;
|
||||
border-radius: 5px;
|
||||
border-style: solid;
|
||||
background-color: white;
|
||||
|
|
@ -55,6 +54,8 @@ button {
|
|||
width: auto;;
|
||||
transition: 100ms linear;
|
||||
font-weight: 600;
|
||||
padding: 0.5em 2em;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
|
|
@ -113,6 +114,12 @@ button.danger:hover {
|
|||
border-color: black;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-top: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.collapsed-hint {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
|
|
@ -165,7 +172,7 @@ h1 {
|
|||
font-weight: normal;
|
||||
font-family: serif;
|
||||
color: black;
|
||||
font-size: 3rem;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
h1 .fun {
|
||||
|
|
@ -226,6 +233,26 @@ button:focus:not(:focus-visible) {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.white-glow:hover {
|
||||
filter: drop-shadow(0px 0px 2px #ffffff);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
</script>
|
||||
|
||||
<nav>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<ul data-sveltekit-prefetch>
|
||||
{#each routes as route}
|
||||
<li class:active={$page.url.pathname === route.path}>
|
||||
|
|
@ -15,18 +18,25 @@
|
|||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<a title="Kafka Dance GitLab" href="https://gitlab.com/kafka-dance">
|
||||
<img alt="GitLab Logo" style="height: 20px;"
|
||||
class="white-glow"
|
||||
src="/gitlab-logo-white.svg">
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
font-size: 125%;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -5,43 +5,46 @@
|
|||
const id = 'a59038fa-5098-4e7a-836b-f62342ac445b'
|
||||
const id2 = '1b581662-2f49-4307-af93-fcd97a1dbd8e'
|
||||
const repeat = (arr, n) => [].concat(...Array(n).fill(arr));
|
||||
const fakeJson = repeat([
|
||||
`{
|
||||
|
||||
const stringy = o => o && JSON.stringify(o, null, 2)
|
||||
|
||||
const fakeObjects = repeat([
|
||||
JSON.parse(`{
|
||||
"eventType": "purchase",
|
||||
"username": "sagev",
|
||||
"itemName": "Bean Enchilada",
|
||||
"quantity": 2,
|
||||
"purchaseId": "${id}"
|
||||
}`,
|
||||
`{
|
||||
}`),
|
||||
JSON.parse(`{
|
||||
"eventType": "purchase",
|
||||
"username": "cameronl",
|
||||
"itemName": "Taco",
|
||||
"quantity": 2
|
||||
"quantity": 7,
|
||||
"purchaseId": "${id2}"
|
||||
}`,
|
||||
`{
|
||||
}`),
|
||||
JSON.parse(`{
|
||||
"eventType": "refund",
|
||||
"username": "sagev",
|
||||
"refundStatus": "APPROVED",
|
||||
"approvedBy": "westonm",
|
||||
"purchaseId": "${id}"
|
||||
}`
|
||||
}`)
|
||||
], 3)
|
||||
let realTimeIndex = 0
|
||||
const randomizeRealTime = () => setTimeout(() => {
|
||||
realTimeIndex = (realTimeIndex + 1) % fakeJson.length
|
||||
realTimeIndex = (realTimeIndex + 1) % fakeObjects.length
|
||||
randomizeRealTime()
|
||||
}, 2000)
|
||||
}, 1500)
|
||||
randomizeRealTime()
|
||||
|
||||
let line = 0
|
||||
let oneShotText = fakeJson[0]
|
||||
let oneShotText = JSON.stringify(fakeObjects[0])
|
||||
const loadingColor = '#df5dcf'
|
||||
let oneShotColor = loadingColor
|
||||
const blockLines = 7
|
||||
const fakeJsonLines = fakeJson.join('\n').split('\n')
|
||||
const randomizeOneShot = (wait = 50) => setTimeout(() => {
|
||||
const fakeJsonLines = fakeObjects.map(o => JSON.stringify(o, null, 2)).join('\n').split('\n')
|
||||
const randomizeOneShot = (wait = 30) => setTimeout(() => {
|
||||
if (line < fakeJsonLines.length - blockLines) {
|
||||
line += 1
|
||||
oneShotColor = loadingColor
|
||||
|
|
@ -55,6 +58,26 @@
|
|||
}, wait)
|
||||
randomizeOneShot()
|
||||
|
||||
const filterTexts = [
|
||||
'message.approvedBy === "westonm"',
|
||||
'message.itemName.includes("Bean")',
|
||||
'message.quantity > 4',
|
||||
]
|
||||
let filterTextIndex = 0
|
||||
$: filterFunc = text => {
|
||||
try {
|
||||
return new Function('message', 'return ' + filterTexts[filterTextIndex])(text)
|
||||
} catch (e) {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
$: filteredObject = stringy(fakeObjects.filter(filterFunc)[0]) || 'No results found.'.padEnd(50)
|
||||
const nextFilterText = () => setTimeout(() => {
|
||||
filterTextIndex = (filterTextIndex + 1) % filterTexts.length
|
||||
nextFilterText()
|
||||
}, 2800)
|
||||
nextFilterText()
|
||||
|
||||
</script>
|
||||
|
||||
<div class="logo-json-box">
|
||||
|
|
@ -65,9 +88,9 @@
|
|||
<div class="content">
|
||||
<div class="eye-catch">
|
||||
<h1>Data should be <span class="fun">Fun</span></h1>
|
||||
<h2>With <img class="inline-logo" src={logo} alt="Kafka Dance" />, it is.</h2>
|
||||
<h2 class="with-kafka-dance">With <span><img class="inline-logo" src={logo} alt="Kafka Dance" />,</span> it is.</h2>
|
||||
<div class="button-container">
|
||||
<button class="colored">Download Now</button>
|
||||
<a href="/download"><button class="colored">Download Now</button></a>
|
||||
</div>
|
||||
<Todo>
|
||||
Push 'What is Kafka Dance?' down further, but come up with a visual indicator that there's
|
||||
|
|
@ -75,8 +98,8 @@
|
|||
</Todo>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style="text-align: center; margin-top: 10em;">Continue reading, below</h3>
|
||||
<div class="column">
|
||||
<h3 class="continue-reading">Read how<br><br><span class="pulse">V</span></h3>
|
||||
<h2>What is Kafka Dance?</h2>
|
||||
<h3>Kafka Dance is a simple, elegant way to interact with your Kafka servers.</h3>
|
||||
<a href="/example_query.png">
|
||||
|
|
@ -86,18 +109,26 @@
|
|||
|
||||
<div>
|
||||
<h2>Query data your way</h2>
|
||||
<Todo>Combine these into one display with a switch?</Todo>
|
||||
<div class="data-display">
|
||||
<div class="data-display-section">
|
||||
<h3>Search your message history</h3>
|
||||
<pre style={`color: ${oneShotColor}`};>{oneShotText}</pre>
|
||||
</div>
|
||||
|
||||
<div style="margin: 12px"></div>
|
||||
|
||||
<div class="data-display-section real-time-display">
|
||||
<h3>Or monitor for new messages in real time</h3>
|
||||
<pre>{fakeJson[realTimeIndex]}</pre>
|
||||
<h3>Or monitor in real time</h3>
|
||||
<pre>{JSON.stringify(fakeObjects[realTimeIndex], null, 2)}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Flexible search</h2>
|
||||
<h3>Powered by Javascript</h3>
|
||||
<div class="data-display">
|
||||
<div class="data-display-section">
|
||||
<pre style="width: 90%; margin-top: 0; padding-bottom: 0.5em; border-bottom: solid #fbc; border-radius: 0; border-width: 1px;"><span style="color: #533;">=></span> {filterTexts[filterTextIndex]}</pre>
|
||||
<pre>{filteredObject}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -108,8 +139,15 @@
|
|||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.with-kafka-dance span {
|
||||
padding-right: 0.2em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.data-display-section h3 {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.data-display-section {
|
||||
padding: 1em 1em 0;
|
||||
|
|
@ -117,6 +155,7 @@
|
|||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--accent-color);
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.real-time-display {
|
||||
|
|
@ -128,10 +167,21 @@
|
|||
color: white;
|
||||
}
|
||||
|
||||
pre {
|
||||
max-width: 75vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2em;
|
||||
flex-wrap: wrap;
|
||||
font-size: 4rem;
|
||||
color: black;
|
||||
margin: 2em 0.5em 0.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -142,12 +192,18 @@
|
|||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.eye-catch {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.eye-catch h2 {
|
||||
font-size: 2.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -168,9 +224,9 @@
|
|||
img.big-photo {
|
||||
display: inline-block;
|
||||
/*max-width: 40vw;*/
|
||||
max-height: 50vw;
|
||||
/*max-height: 50vw;*/
|
||||
margin-top: 2em;
|
||||
width: auto;
|
||||
max-width: 60vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
|
@ -180,14 +236,8 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5em 2em;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-top: 6em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo-json-box {
|
||||
|
|
@ -199,11 +249,35 @@
|
|||
|
||||
.data-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.data-display h3 {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.continue-reading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.eye-catch h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.data-display {
|
||||
flex-direction: row;
|
||||
}
|
||||
img.big-photo {
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
.continue-reading {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 10em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
<h1>Thank you for your interest!</h1>
|
||||
<h2>Kafka Dance is not yet available for download</h2>
|
||||
<p>However, a <a href="https://sage-melba-f44713.netlify.app/">demo version</a> is available online.</p>
|
||||
<div class="button-container">
|
||||
<a href="/"><button class="colored">Return to Home</button></a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
p {
|
||||
|
|
|
|||
Loading…
Reference in New Issue