smart-house-web: фронт эссперименты
This commit is contained in:
@@ -1,46 +0,0 @@
|
|||||||
/* App-wide styling */
|
|
||||||
body {
|
|
||||||
background-color: #0f1116;
|
|
||||||
color: #ffffff;
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#hero {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#links {
|
|
||||||
width: 400px;
|
|
||||||
text-align: left;
|
|
||||||
font-size: x-large;
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
#links a {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin: 10px 0px;
|
|
||||||
border: white 1px solid;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#links a:hover {
|
|
||||||
background-color: #1f1f1f;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header {
|
|
||||||
max-width: 1200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,197 +0,0 @@
|
|||||||
/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
|
|
||||||
@layer properties;
|
|
||||||
@layer theme, base, components, utilities;
|
|
||||||
@layer theme {
|
|
||||||
:root, :host {
|
|
||||||
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
||||||
'Noto Color Emoji';
|
|
||||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
|
||||||
monospace;
|
|
||||||
--default-font-family: var(--font-sans);
|
|
||||||
--default-mono-font-family: var(--font-mono);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@layer base {
|
|
||||||
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0 solid;
|
|
||||||
}
|
|
||||||
html, :host {
|
|
||||||
line-height: 1.5;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
tab-size: 4;
|
|
||||||
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
|
|
||||||
font-feature-settings: var(--default-font-feature-settings, normal);
|
|
||||||
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
hr {
|
|
||||||
height: 0;
|
|
||||||
color: inherit;
|
|
||||||
border-top-width: 1px;
|
|
||||||
}
|
|
||||||
abbr:where([title]) {
|
|
||||||
-webkit-text-decoration: underline dotted;
|
|
||||||
text-decoration: underline dotted;
|
|
||||||
}
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-size: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
-webkit-text-decoration: inherit;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
b, strong {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
code, kbd, samp, pre {
|
|
||||||
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
|
|
||||||
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
|
||||||
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
sub, sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
text-indent: 0;
|
|
||||||
border-color: inherit;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
:-moz-focusring {
|
|
||||||
outline: auto;
|
|
||||||
}
|
|
||||||
progress {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
ol, ul, menu {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
img, svg, video, canvas, audio, iframe, embed, object {
|
|
||||||
display: block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
img, video {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
button, input, select, optgroup, textarea, ::file-selector-button {
|
|
||||||
font: inherit;
|
|
||||||
font-feature-settings: inherit;
|
|
||||||
font-variation-settings: inherit;
|
|
||||||
letter-spacing: inherit;
|
|
||||||
color: inherit;
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
:where(select:is([multiple], [size])) optgroup {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
:where(select:is([multiple], [size])) optgroup option {
|
|
||||||
padding-inline-start: 20px;
|
|
||||||
}
|
|
||||||
::file-selector-button {
|
|
||||||
margin-inline-end: 4px;
|
|
||||||
}
|
|
||||||
::placeholder {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
|
||||||
::placeholder {
|
|
||||||
color: currentcolor;
|
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
|
||||||
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
::-webkit-date-and-time-value {
|
|
||||||
min-height: 1lh;
|
|
||||||
text-align: inherit;
|
|
||||||
}
|
|
||||||
::-webkit-datetime-edit {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
::-webkit-datetime-edit-fields-wrapper {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
|
|
||||||
padding-block: 0;
|
|
||||||
}
|
|
||||||
:-moz-ui-invalid {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
|
|
||||||
appearance: button;
|
|
||||||
}
|
|
||||||
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
[hidden]:where(:not([hidden='until-found'])) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@layer utilities {
|
|
||||||
.visible {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
.transform {
|
|
||||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@property --tw-rotate-x {
|
|
||||||
syntax: "*";
|
|
||||||
inherits: false;
|
|
||||||
}
|
|
||||||
@property --tw-rotate-y {
|
|
||||||
syntax: "*";
|
|
||||||
inherits: false;
|
|
||||||
}
|
|
||||||
@property --tw-rotate-z {
|
|
||||||
syntax: "*";
|
|
||||||
inherits: false;
|
|
||||||
}
|
|
||||||
@property --tw-skew-x {
|
|
||||||
syntax: "*";
|
|
||||||
inherits: false;
|
|
||||||
}
|
|
||||||
@property --tw-skew-y {
|
|
||||||
syntax: "*";
|
|
||||||
inherits: false;
|
|
||||||
}
|
|
||||||
@layer properties {
|
|
||||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
|
||||||
*, ::before, ::after, ::backdrop {
|
|
||||||
--tw-rotate-x: initial;
|
|
||||||
--tw-rotate-y: initial;
|
|
||||||
--tw-rotate-z: initial;
|
|
||||||
--tw-skew-x: initial;
|
|
||||||
--tw-skew-y: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,9 +1,5 @@
|
|||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
const FAVICON: Asset = asset!("/assets/favicon.ico");
|
|
||||||
const MAIN_CSS: Asset = asset!("/assets/main.css");
|
|
||||||
const HEADER_SVG: Asset = asset!("/assets/header.svg");
|
|
||||||
|
|
||||||
fn main() {
|
fn main() {
|
||||||
dioxus::launch(App);
|
dioxus::launch(App);
|
||||||
}
|
}
|
||||||
@@ -11,27 +7,15 @@ fn main() {
|
|||||||
#[component]
|
#[component]
|
||||||
fn App() -> Element {
|
fn App() -> Element {
|
||||||
rsx! {
|
rsx! {
|
||||||
document::Link { rel: "icon", href: FAVICON }
|
div { id: "title",
|
||||||
document::Link { rel: "stylesheet", href: MAIN_CSS }
|
h1 { "HotDog! 🌭" }
|
||||||
Hero {}
|
}
|
||||||
|
div { id: "dogview",
|
||||||
}
|
img { src: "https://images.dog.ceo/breeds/pitbull/dog-3981540_1280.jpg" }
|
||||||
}
|
}
|
||||||
|
div { id: "buttons",
|
||||||
#[component]
|
button { id: "skip", "skip" }
|
||||||
pub fn Hero() -> Element {
|
button { id: "save", "save!" }
|
||||||
rsx! {
|
|
||||||
div {
|
|
||||||
id: "hero",
|
|
||||||
img { src: HEADER_SVG, id: "header" }
|
|
||||||
div { id: "links",
|
|
||||||
a { href: "https://dioxuslabs.com/learn/0.7/", "📚 Learn Dioxus" }
|
|
||||||
a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
|
|
||||||
a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
|
|
||||||
a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
|
|
||||||
a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
|
|
||||||
a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
@import "tailwindcss";
|
|
||||||
Reference in New Issue
Block a user