Create basic layout
This commit is contained in:
parent
b2023f79c5
commit
9270932213
|
@ -3,6 +3,10 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Bin2Dec</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
|
||||
<link rel="css" data-trunk href="style.css">
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
|
@ -1,9 +1,35 @@
|
|||
use sycamore::prelude::*;
|
||||
|
||||
fn main() {
|
||||
let inp = Signal::new(String::new());
|
||||
let err = Signal::new(false);
|
||||
let double = create_memo(cloned!((inp, err) => move || {
|
||||
if *inp.get() == "" {
|
||||
return 0;
|
||||
}
|
||||
if let Ok(parsed) = (*inp.get()).parse::<u64>() {
|
||||
err.set(false);
|
||||
return parsed * 2;
|
||||
} else {
|
||||
err.set(true);
|
||||
return 0;
|
||||
}
|
||||
}));
|
||||
|
||||
sycamore::render(|| {
|
||||
template! {
|
||||
p { "Hello, world!" }
|
||||
h1(style="text-align: center") { "Bin2Dec" }
|
||||
div(class="wrapper", style="text-align: center") {
|
||||
input(placeholder="Binary", bind:value=inp, style="text-align: center")
|
||||
(if *err.get() {
|
||||
template! {
|
||||
span(style="color: red") { "unable to convert" }
|
||||
}
|
||||
} else {
|
||||
template! {}
|
||||
})
|
||||
div(class="card") { (double.get()) }
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
15
bin2dec/style.css
Normal file
15
bin2dec/style.css
Normal file
|
@ -0,0 +1,15 @@
|
|||
.wrapper {
|
||||
/* Text margin */
|
||||
margin: auto;
|
||||
width: 60%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 0.1rem solid #d1d1d1;
|
||||
border-radius: .4rem;
|
||||
padding: .6rem 1.0rem .7rem;
|
||||
margin-bottom: 1.5rem;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
Loading…
Reference in a new issue