first commit
This commit is contained in:
aOK
commit
018f97d79e
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,118 @@
|
|||
[package]
|
||||
name = "geohot_csr"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
[lib]
|
||||
crate-type = ["cdylib", "rlib"]
|
||||
|
||||
[profile.release]
|
||||
codegen-units = 1
|
||||
lto = true
|
||||
|
||||
# Defines a size-optimized profile for the WASM bundle in release mode
|
||||
# Copied to main Cargo.toml
|
||||
#[profile.wasm-release]
|
||||
#inherits = "release"
|
||||
#opt-level = 'z'
|
||||
#lto = true
|
||||
#codegen-units = 1
|
||||
#panic = "abort"
|
||||
|
||||
[dependencies]
|
||||
# leptos = { version = "~0", features = ["csr"] }
|
||||
leptos = { version = "0.4.8", features = ["csr"] }
|
||||
leptos_axum = { version = "0.4.8", optional = true }
|
||||
leptos_meta = { version = "0.4.8", features = ["csr"] }
|
||||
leptos_router = { version = "0.4.8", features = ["csr"] }
|
||||
# leptos_query = "0.2.3"
|
||||
# leptos-use = "0.6.3"
|
||||
leptos_icons = { version = "0.0.15", default_features = false, features = [
|
||||
"macros",
|
||||
"AiCarryOutTwotone",
|
||||
"BiGraphql",
|
||||
"BiFilePlusSolid",
|
||||
"Bs1Circle",
|
||||
"BsFolder",
|
||||
"FaBarsSolid",
|
||||
"SiYourtraveldottv",
|
||||
"TbGridDots",
|
||||
"AiCloseCircleFilled",
|
||||
"ImPagebreak",
|
||||
"ImPageBreak",
|
||||
"IoColorWand",
|
||||
"OcAlertSm",
|
||||
"OcAlertLg"
|
||||
] }
|
||||
# leptos_image = "0.1.5"
|
||||
# leptonic = "0.1.0"
|
||||
# leptonic = { git = "https://github.com/lpotthast/leptonic" }
|
||||
# leptos_animation = "0.2.0"
|
||||
# leptos_heroicons = { version = "0.1.0", features = [
|
||||
# "24-solid-power",
|
||||
# "24-outline-wrench",
|
||||
# "20-solid-credit-card"
|
||||
# ]}
|
||||
reqwest = { version = "0.11.13", features = ["json"] }
|
||||
console_log = "1.0.0"
|
||||
console_error_panic_hook = "0.1.7"
|
||||
cfg-if = "1.0.0"
|
||||
log = "0.4.17"
|
||||
simple_logger = "4.0.0"
|
||||
serde = { version = "1.0.148", features = ["derive"] }
|
||||
tracing = "0.1"
|
||||
gloo-net = { version = "0.2.5", features = ["http"] }
|
||||
tower = { version = "0.4.13", optional = true }
|
||||
tower-http = { version = "0.4", features = ["fs"], optional = true }
|
||||
tokio = { version = "1.22.0", features = ["full"], optional = true }
|
||||
http = { version = "0.2.8", optional = true }
|
||||
web-sys = { version = "0.3", features = ["AbortController", "AbortSignal"] }
|
||||
wasm-bindgen = "0.2"
|
||||
|
||||
|
||||
[dev-dependencies]
|
||||
wasm-bindgen = "0.2"
|
||||
wasm-bindgen-test = "0.3.0"
|
||||
web-sys = "0.3"
|
||||
|
||||
[build-dependencies]
|
||||
leptonic-theme = "0.1.0"
|
||||
leptos-tiptap-build = "0.2.1"
|
||||
|
||||
[features]
|
||||
csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
|
||||
hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
|
||||
|
||||
[package.metadata.leptos]
|
||||
# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
|
||||
output-name = "geohot_csr"
|
||||
# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
|
||||
site-root = "target/site"
|
||||
# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
|
||||
# Defaults to pkg
|
||||
site-pkg-dir = "pkg"
|
||||
# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
|
||||
style-file = "./style.css"
|
||||
# [Optional] Files in the asset-dir will be copied to the site-root directory
|
||||
assets-dir = "public"
|
||||
|
||||
# If the --no-default-features flag should be used when compiling the bin target
|
||||
#
|
||||
# Optional. Defaults to false.
|
||||
bin-default-features = true
|
||||
|
||||
# The features to use when compiling the lib target
|
||||
#
|
||||
# Optional. Can be over-ridden with the command line parameter --lib-features
|
||||
lib-features = ["hydrate"]
|
||||
|
||||
# If the --no-default-features flag should be used when compiling the lib target
|
||||
#
|
||||
# Optional. Defaults to false.
|
||||
lib-default-features = true
|
||||
|
||||
# The profile to use for the lib target when compiling for release
|
||||
#
|
||||
# Optional. Defaults to "release".
|
||||
lib-profile-release = "wasm-release"
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
# extend = { path = "../../cargo-make/main.toml" }
|
||||
|
||||
[tasks.check-format]
|
||||
# env = { LEPTOS_PROJECT_DIRECTORY = "../../../" }
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
[watch]
|
||||
# Paths to watch. The `build.target`'s parent folder is watched by default.
|
||||
ignore = [
|
||||
# These files are generated from our build.rs script, not excluding them would result in an endless restart-cycle!
|
||||
# Keep this list in sync with what the build script generates.
|
||||
# "./generated",
|
||||
]
|
||||
|
||||
[serve]
|
||||
address = "127.0.0.1"
|
||||
port = 4001
|
||||
open = false
|
||||
|
||||
[[proxy]]
|
||||
rewrite = "/api/"
|
||||
backend = "http://127.0.0.1:3000/"
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<meta name="description" content="Tour" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#e66956" />
|
||||
|
||||
<title>Leptonic</title>
|
||||
|
||||
<!-- <script type="module" src="/js/tiptap-bundle.min.js"></script> -->
|
||||
<!-- <script type="module" src="/js/tiptap.js"></script> -->
|
||||
|
||||
<!-- <link rel="icon" href="/res/icon/leptonic_x64.png" /> -->
|
||||
|
||||
<!-- <link data-trunk rel="rust" data-wasm-opt="z" /> -->
|
||||
<link data-trunk rel="scss" href="scss/style.scss" />
|
||||
<!-- <link data-trunk rel="copy-dir" href="generated/js/" /> -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
|
||||
|
||||
<link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs />
|
||||
<link data-trunk rel="css" href="src/routes/nav.css" />
|
||||
<link data-trunk rel="css" href="src/routes/home.css" />
|
||||
<!-- <link data-trunk rel="css" href="/style.css" /> -->
|
||||
</head>
|
||||
|
||||
<body></body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1 @@
|
|||
@import "../generated/leptonic/leptonic-themes";
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,28 @@
|
|||
use std::io::Write;
|
||||
|
||||
pub fn main() {
|
||||
println!("cargo:rerun-if-changed=build.rs");
|
||||
println!("cargo:rerun-if-changed=Cargo.lock");
|
||||
|
||||
let root_dir: std::path::PathBuf = std::env::var("CARGO_MANIFEST_DIR").unwrap().into();
|
||||
let generated_dir = root_dir.join("generated");
|
||||
let js_dir = generated_dir.join("js");
|
||||
|
||||
leptonic_theme::generate(generated_dir.join("leptonic"));
|
||||
println!("cargo:warning=theme written");
|
||||
|
||||
std::fs::create_dir_all(js_dir.clone()).unwrap();
|
||||
println!("cargo:warning=js dir created");
|
||||
|
||||
std::fs::File::create(js_dir.join("tiptap-bundle.min.js"))
|
||||
.unwrap()
|
||||
.write_all(leptos_tiptap_build::TIPTAP_BUNDLE_MIN_JS.as_bytes())
|
||||
.unwrap();
|
||||
println!("cargo:warning=tiptap-bundle.min.js written");
|
||||
|
||||
std::fs::File::create(js_dir.join("tiptap.js"))
|
||||
.unwrap()
|
||||
.write_all(leptos_tiptap_build::TIPTAP_JS.as_bytes())
|
||||
.unwrap();
|
||||
println!("cargo:warning=tiptap.js written");
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
use cfg_if::cfg_if;
|
||||
use leptos::*;
|
||||
// use leptos::{component, view, IntoView, Scope};
|
||||
use leptos_meta::*;
|
||||
use leptos_router::*;
|
||||
use routes::{nav::*, home::*, main::*, footer::*};
|
||||
// mod api;
|
||||
// pub mod error_template;
|
||||
// pub mod fallback;
|
||||
// pub mod handlers;
|
||||
mod routes;
|
||||
|
||||
#[component]
|
||||
pub fn App(cx: Scope) -> impl IntoView {
|
||||
provide_meta_context(cx);
|
||||
|
||||
view! {
|
||||
cx,
|
||||
<div>
|
||||
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
|
||||
<Stylesheet id="leptos" href="/pkg/geohot_csr.css"/>
|
||||
<Meta name="description" content="Geohot."/>
|
||||
<Router>
|
||||
<Nav />
|
||||
<Home />
|
||||
<Main />
|
||||
<Footer />
|
||||
</Router>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
// Needs to be in lib.rs AFAIK because wasm-bindgen needs us to be compiling a lib. I may be wrong.
|
||||
cfg_if! {
|
||||
if #[cfg(feature = "hydrate")] {
|
||||
use wasm_bindgen::prelude::wasm_bindgen;
|
||||
|
||||
#[wasm_bindgen]
|
||||
pub fn hydrate() {
|
||||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
leptos::mount_to_body(move |cx| {
|
||||
view! { cx, <App/> }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
use geohot_csr::*;
|
||||
use leptos::*;
|
||||
|
||||
pub fn main() {
|
||||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
mount_to_body(|cx| {
|
||||
view! { cx, <App/> }
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
pub mod nav;
|
||||
pub mod home;
|
||||
pub mod main;
|
||||
pub mod footer;
|
||||
// pub mod stories;
|
||||
// pub mod story;
|
||||
// pub mod users;
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
use leptos::*;
|
||||
|
||||
#[component]
|
||||
pub fn Footer(cx: Scope) -> impl IntoView {
|
||||
// let (value, set_value) = create_signal(cx, 0);
|
||||
|
||||
view! { cx,
|
||||
<div class="footer" id="footer">
|
||||
<div class="logo">
|
||||
<img src="/images/favicon.png" alt="logoface" class="logoface"/>
|
||||
<a href="/"><h2 class="sitename reversed">Realtime Colors</h2></a>
|
||||
</div>
|
||||
<div class="footer-cols">
|
||||
<div class="footer-col">
|
||||
<p style="margin: 0;">Visualize your color choices.</p>
|
||||
<a href="https://www.producthunt.com/posts/real-time-colors?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-real-time-colors" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=390080&theme=dark" alt="Real-time Colors - Real-time UI Color Palette Tool | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
||||
// <script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support Me on Ko-fi', '#221D21', 'Z8Z2L1JGX');kofiwidget2.draw();</script>
|
||||
</div>
|
||||
|
||||
<div class="footer-col">
|
||||
<div class="reversed sub menu-item-header">EXPLORE</div>
|
||||
<a href="https://www.figma.com/community/plugin/1234060894101724457/Realtime-Colors" target="_blank" class="menu-item">Try Figma Plugin
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<rect x="0.318182" y="0.318182" width="13.3636" height="13.3636" rx="2.10647" stroke="var(--bg)" stroke-width="0.636364"/>
|
||||
<path d="M4.33594 9.7564L9.75615 4.33618M9.75615 4.33618L5.41998 4.33618M9.75615 4.33618V8.94337" stroke="var(--bg)" stroke-width="0.813033" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/palettes" class="menu-item">Palette Generator</a>
|
||||
<a href="/docs" class="menu-item reversed">Docs <span style="background-color: var(--bg); padding: 0.4em 0.4em 0.4em 0.2em; border-radius: 5px; font-size: 12px; color: var(--text);"> New!</span></a>
|
||||
</div>
|
||||
|
||||
<div class="footer-col">
|
||||
<div class="reversed sub menu-item-header">"LET'S" CONNECT</div>
|
||||
<a href="https://twitter.com/juxtopposed" class="menu-item reversed" target="_blank">Twitter</a>
|
||||
<a href="https://codepen.io/Juxtopposed" target="_blank" class="menu-item reversed">CodePen</a>
|
||||
<a href="https://www.youtube.com/@juxtopposed" target="_blank" class="menu-item reversed">YouTube</a>
|
||||
<a href="https://dribbble.com/juxtopposed" target="_blank" class="menu-item reversed">Dribbble</a>
|
||||
<a href="https://github.com/juxtopposed" target="_blank" class="menu-item reversed">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; height: 1px; background-color: var(--bg); opacity: 20%; margin-top: 1em;"></div>
|
||||
<div>
|
||||
<p class="sub">Feedback? Suggestions? Features you 'd like to see? <a href="mailto:juxtopposed.me@gmail.com" target="_blank" class="link reversed">Contact me!</a></p>
|
||||
<p class="sub">Made with "<3" by <a href="https://twitter.com/juxtopposed" target="_blank" class="link reversed">@Juxtopposed</a></p>
|
||||
<p class="sub">"Copyright © S 2023 All Rights Reserved"</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
|
||||
|
||||
/* hero */
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 6em;
|
||||
gap: 3em;
|
||||
}
|
||||
|
||||
.color-effect {
|
||||
background: linear-gradient(120deg, var(--primary), var(--accent));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 3em;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero-scroll {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mondrian {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
width: 45%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#mondrian-info-icon {
|
||||
transition: all ease 0.3s;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
#mondrian-info-icon:hover {
|
||||
opacity: 50%;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
use leptos::*;
|
||||
// use leptos_meta::*;
|
||||
|
||||
#[component]
|
||||
pub fn Home(cx: Scope) -> impl IntoView {
|
||||
// let (value, set_value) = create_signal(cx, 0);
|
||||
|
||||
// let (active, setActive) = create_signal(cx, "navBar");
|
||||
|
||||
// let showNav = move |_cx: Scope| { setActive.set("navBar activeNavbar") };
|
||||
// let removeNav = move |_cx: Scope| { setActive.set("navBar") };
|
||||
|
||||
view! { cx,
|
||||
<div class="hero">
|
||||
<div class="hero-text">
|
||||
<h1>Visualize Your <span class="color-effect">Colors</span><br/>On a Real Website</h1>
|
||||
<p class="subtitle">Choosing a color palette for your website?<br/>Use the Toolbar below to realize your choices.</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#toolbar" onclick="highlightToolbar()" class="primary-button">Get Started</a>
|
||||
<a href="#how" class="secondary-button">How does it work?</a>
|
||||
</div>
|
||||
<div class="hero-scroll">
|
||||
<svg width="23" height="33" viewBox="0 0 23 33" fill="none">
|
||||
<rect x="0.767442" y="0.767442" width="20.7209" height="31.4651" rx="10.3605" stroke="var(--text)" stroke-width="1.53488"/>
|
||||
<rect x="9" y="8" width="4" height="8" rx="2" fill="var(--text)"/>
|
||||
</svg>
|
||||
<p class="sub">Scroll to see more sections</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-img">
|
||||
<a href="#mondrian-info" id="mondrian-info-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M9.06818 14.2259V7.6804H10.8835V14.2259H9.06818ZM9.98011 6.83665C9.71023 6.83665 9.47869 6.74716 9.28551 6.56818C9.09517 6.38636 9 6.16903 9 5.91619C9 5.66619 9.09517 5.4517 9.28551 5.27273C9.47869 5.09091 9.71023 5 9.98011 5C10.25 5 10.4801 5.09091 10.6705 5.27273C10.8636 5.4517 10.9602 5.66619 10.9602 5.91619C10.9602 6.16903 10.8636 6.38636 10.6705 6.56818C10.4801 6.74716 10.25 6.83665 9.98011 6.83665Z" fill="var(--text)"/>
|
||||
<circle cx="10" cy="10" r="9.44118" stroke="var(--text)" stroke-width="1.11765"/>
|
||||
</svg>
|
||||
</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="652" height="644" viewBox="0 0 652 644" fill="none" class="mondrian">
|
||||
<rect opacity="0.05" x="1" width="163" height="60" rx="10" fill="var(--text)"/>
|
||||
<rect x="424" width="193" height="60" rx="10" fill="var(--secondary)"/>
|
||||
<rect x="424" y="68" width="193" height="175" rx="10" fill="var(--secondary)"/>
|
||||
<rect opacity="0.2" x="424" y="401" width="193" height="79" rx="10" fill="var(--primary)"/>
|
||||
<rect x="255" y="626" width="362" height="18" rx="9" fill="var(--bg)"/>
|
||||
<rect x="80" y="579" width="166" height="65" rx="10" fill="var(--bg)"/>
|
||||
<rect x="255" y="579" width="160" height="40" rx="10" fill="var(--text)"/>
|
||||
<rect opacity="0.05" x="255" y="490" width="160" height="80" rx="10" fill="var(--text)"/>
|
||||
<rect opacity="0.05" x="255" y="400" width="160" height="80" rx="10" fill="var(--text)"/>
|
||||
<rect x="80" y="68" width="335" height="324" rx="10" fill="var(--primary)"/>
|
||||
<rect x="80" y="401" width="166" height="169" rx="10" fill="var(--text)"/>
|
||||
<rect x="424" y="490" width="193" height="129" rx="10" fill="var(--accent)"/>
|
||||
<rect x="626" y="490" width="26" height="154" rx="10" fill="var(--primary)"/>
|
||||
<rect x="424" y="252" width="91" height="140" rx="10" fill="var(--bg)"/>
|
||||
<rect x="524" y="252" width="93" height="140" rx="10" fill="var(--bg)"/>
|
||||
<rect opacity="0.05" x="626" width="26" height="480" rx="10" fill="var(--text)"/>
|
||||
<rect x="173" width="242" height="60" rx="10" fill="var(--bg)"/>
|
||||
<rect x="1" y="68" width="70" height="157" rx="10" fill="var(--bg)"/>
|
||||
<rect opacity="0.05" x="1" y="234" width="70" height="259" rx="10" fill="var(--text)"/>
|
||||
<rect x="1" y="502" width="70" height="142" rx="10" fill="var(--secondary)"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,400 @@
|
|||
use leptos::*;
|
||||
|
||||
#[component]
|
||||
pub fn Main(cx: Scope) -> impl IntoView {
|
||||
// let (value, set_value) = create_signal(cx, 0);
|
||||
|
||||
|
||||
|
||||
view! { cx,
|
||||
<main>
|
||||
<div class="part1" id="why">
|
||||
<h2>Why Realtime Colors?</h2>
|
||||
<div class="part1-cards">
|
||||
<div class="part1-card">
|
||||
<svg width="117" height="117" viewBox="0 0 117 117" fill="none" style="z-index: 5;" class="part1-card-img">
|
||||
<circle cx="58.5" cy="58.5" r="58.5" fill="var(--bg)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M89.4669 8.85912L58.0465 63.9419L2.44746 41.7023C9.66585 17.5806 32.0298 0 58.5 0C69.872 0 80.4861 3.24483 89.4669 8.85912Z" fill="var(--accent)" fill-opacity="0.6"/>
|
||||
<path d="M81.5 22.5L57.1395 64.8489L32 53.5" stroke="var(--text)" stroke-width="7.25581"/>
|
||||
</svg>
|
||||
<p class="subtitle highlight">Saves time</p>
|
||||
<p>No need to spend hours implementing different variations of colors. Decide right away!</p>
|
||||
<div class="part1-card-bg"></div>
|
||||
</div>
|
||||
|
||||
<div class="part1-card">
|
||||
<svg width="112" height="114" viewBox="0 0 112 114" fill="none" style="z-index: 5;" class="part1-card-img">
|
||||
<rect width="58" height="58" fill="var(--bg)"/>
|
||||
<rect x="69" y="25" width="33" height="33" fill="var(--accent)" fill-opacity="0.6"/>
|
||||
<rect x="69" y="71" width="43" height="43" fill="var(--text)" fill-opacity="0.2"/>
|
||||
<rect x="20" y="70" width="38" height="39" fill="var(--text)"/>
|
||||
</svg>
|
||||
<p class="subtitle highlight">It 's Realistic</p>
|
||||
<p>Color Palettes make it hard to pick. This tool distributes the colors on a real website.</p>
|
||||
<div class="part1-card-bg"></div>
|
||||
</div>
|
||||
|
||||
<div class="part1-card">
|
||||
<svg width="179" height="89" viewBox="0 0 179 89" fill="none" style="z-index: 5;" class="part1-card-img">
|
||||
<rect y="26" width="154" height="63" fill="var(--accent)" fill-opacity="0.6"/>
|
||||
<path d="M142 15.5V0" stroke="var(--text)" stroke-width="8"/>
|
||||
<path d="M163 34L178.5 34" stroke="var(--text)" stroke-width="8"/>
|
||||
<path d="M158 19.5L170.5 7" stroke="var(--text)" stroke-width="8"/>
|
||||
<path d="M63 54L74.5 65L95.5 44" stroke="var(--text)" stroke-width="8"/>
|
||||
</svg>
|
||||
<p class="subtitle highlight">It 's simple</p>
|
||||
<p>Push a few buttons, and there you have it! Your very own branding colors, ready to export.</p>
|
||||
<div class="part1-card-bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="part6" id="bento">
|
||||
<ul class="bento-wrapper">
|
||||
<li class="first-row-col1 primary-color-box">100K+ Users<br/><span style="font-size: var(--subtitle); font-weight: normal;">and counting...</span></li>
|
||||
<li class="first-row-col2 secondary-color-box">100% Free!<br/><span style="font-size: var(--p); font-weight: normal;">Sponsored by YOU.</span></li>
|
||||
<li class="second-row-col1 text-color-box">
|
||||
<svg width="335" height="472" viewBox="0 0 335 472" fill="none" xmlns="http://www.w3.org/2000/svg" class="figma-icon">
|
||||
<path d="M15 236C15 264.427 29.205 289.546 50.8988 304.667C29.205 319.787 15 344.906 15 373.333C15 419.536 52.5239 457 98.7363 457C144.949 457 182.473 419.536 182.473 373.333V304.667V300.156C197.019 312.334 215.764 319.667 236.209 319.667C282.421 319.667 319.945 282.203 319.945 236C319.945 207.573 305.74 182.454 284.046 167.333C305.74 152.213 319.945 127.094 319.945 98.6667C319.945 52.4641 282.421 15 236.209 15H167.473H98.7363C52.5239 15 15 52.4641 15 98.6667C15 127.094 29.205 152.213 50.8988 167.333C29.205 182.454 15 207.573 15 236Z" fill="var(--bg)" stroke="var(--bg)" stroke-width="30" stroke-linejoin="round"/>
|
||||
<path d="M98.7363 442C136.679 442 167.473 411.237 167.473 373.333V304.667H98.7363C60.7938 304.667 30 335.429 30 373.333C30 411.237 60.7938 442 98.7363 442Z" fill="#0ACF83"/>
|
||||
<path d="M30 236C30 198.096 60.7938 167.333 98.7363 167.333H167.473V304.667H98.7363C60.7938 304.667 30 273.904 30 236Z" fill="#A259FF"/>
|
||||
<path d="M30 98.6667C30 60.7627 60.7938 30 98.7363 30H167.473V167.333H98.7363C60.7938 167.333 30 136.571 30 98.6667Z" fill="#F24E1E"/>
|
||||
<path d="M167.473 30H236.209C274.151 30 304.945 60.7627 304.945 98.6667C304.945 136.571 274.151 167.333 236.209 167.333H167.473V30Z" fill="#FF7262"/>
|
||||
<path d="M304.945 236C304.945 273.904 274.151 304.667 236.209 304.667C198.266 304.667 167.473 273.904 167.473 236C167.473 198.096 198.266 167.333 236.209 167.333C274.151 167.333 304.945 198.096 304.945 236Z" fill="#1ABCFE"/>
|
||||
</svg>
|
||||
<span style="font-weight: bold;">5K+ Plugin Users</span>
|
||||
<a href="https://www.figma.com/community/plugin/1234060894101724457/Realtime-Colors" target="_blank" class="link reversed bento-link">Check it out on Figma</a>
|
||||
|
||||
|
||||
<li class="second-row-col2 accent-color-box">
|
||||
100+ ProductHunt Upvotes<a href="https://www.producthunt.com/products/real-time-colors" target="_blank" class="link bento-link">Leave a review</a></li>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="part2" id="how">
|
||||
<div class="part2-left">
|
||||
<h2>How Does it Work?</h2>
|
||||
<p>You 'll get your finalized color palette in 4 simple steps.</p>
|
||||
</div>
|
||||
<div class="part2-right">
|
||||
<p class="one step">Start with two neutral colors for the text and the background.</p>
|
||||
<p class="two step">Choose your primary and secondary colors. Primary is for main CTAs and sections, and Secondary is for less important buttons and info cards.</p>
|
||||
<p class="three step">Accent color is an additional color. It appears in images, highlights, hyperlinks, boxes, cards, etc.</p>
|
||||
<p class="four step">Happy with the results? Press on "Export" and choose among different options to export in various formats, like .zip, .png, CSS, SCSS, QR Code, and more.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="part3" id="sub">
|
||||
<div class="part3-heading">
|
||||
<h2>Plans & Pricing</h2>
|
||||
<p>The tool is 100% free! This is just a generic section.</p>
|
||||
</div>
|
||||
|
||||
<div class="part3-cards">
|
||||
<div class="part3-card">
|
||||
<div class="part3-card-text">
|
||||
<div class="promo" style="visibility: hidden;">
|
||||
<p class="sub promo-text">None</p>
|
||||
</div>
|
||||
<h2>Basic</h2>
|
||||
<p>Free</p>
|
||||
<div class="part3-list">
|
||||
<div class="list">
|
||||
<svg width="29" height="22" viewBox="0 0 29 22" fill="none" class="check-icon">
|
||||
<path d="M3 9.72308L11.1385 17.8615L26 3" stroke="var(--accent)" stroke-width="5.66154"/>
|
||||
</svg>
|
||||
<p class="list-item">Choose any color</p>
|
||||
</div>
|
||||
<div class="list">
|
||||
<svg width="29" height="22" viewBox="0 0 29 22" fill="none" class="check-icon">
|
||||
<path d="M3 9.72308L11.1385 17.8615L26 3" stroke="var(--accent)" stroke-width="5.66154"/>
|
||||
</svg>
|
||||
<p class="list-item">Export all you want</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#toolbar" onclick="highlightToolbar()" class="secondary-button">Get Started</a>
|
||||
<div class="part3-bg"></div>
|
||||
</div>
|
||||
|
||||
<div class="part3-card">
|
||||
<div class="part3-card-text">
|
||||
<div class="promo">
|
||||
<svg width="27" height="28" viewBox="0 0 27 28" fill="none">
|
||||
<path d="M13.5412 0.494507L14.6922 8.99311L19.4165 1.83551L16.7661 9.99186L24.1282 5.59291L18.2013 11.7915L26.7429 11.0225L18.7135 14.0357L26.7429 17.0489L18.2013 16.2799L24.1282 22.4785L16.7661 18.0796L19.4165 26.2359L14.6922 19.0783L13.5412 27.5769L12.3903 19.0783L7.6659 26.2359L10.3163 18.0796L2.95427 22.4785L8.88114 16.2799L0.339506 17.0489L8.36893 14.0357L0.339506 11.0225L8.88114 11.7915L2.95427 5.59291L10.3163 9.99186L7.6659 1.83551L12.3903 8.99311L13.5412 0.494507Z" fill="var(--primary)"/>
|
||||
</svg>
|
||||
<p class="sub promo-text">Most Popular</p>
|
||||
</div>
|
||||
<h2>Pro</h2>
|
||||
<p>$0.00 / month</p>
|
||||
<div class="part3-list">
|
||||
<div class="list">
|
||||
<svg width="29" height="22" viewBox="0 0 29 22" fill="none" class="check-icon">
|
||||
<path d="M3 9.72308L11.1385 17.8615L26 3" stroke="var(--accent)" stroke-width="5.66154"/>
|
||||
</svg>
|
||||
<p class="list-item">Choose any color</p>
|
||||
</div>
|
||||
<div class="list">
|
||||
<svg width="29" height="22" viewBox="0 0 29 22" fill="none" class="check-icon">
|
||||
<path d="M3 9.72308L11.1385 17.8615L26 3" stroke="var(--accent)" stroke-width="5.66154"/>
|
||||
</svg>
|
||||
<p class="list-item">Export all you want</p>
|
||||
</div>
|
||||
<div class="list">
|
||||
<svg width="29" height="22" viewBox="0 0 29 22" fill="none" class="check-icon">
|
||||
<path d="M3 9.72308L11.1385 17.8615L26 3" stroke="var(--accent)" stroke-width="5.66154"/>
|
||||
</svg>
|
||||
<p class="list-item">Get a big thank you for checking this site out</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#toolbar" onclick="highlightToolbar()" class="primary-button">Get Started</a>
|
||||
<div class="part3-bg best"></div>
|
||||
</div>
|
||||
|
||||
<div class="part3-card">
|
||||
<div class="part3-card-text">
|
||||
<div class="promo" style="visibility: hidden;">
|
||||
<p class="sub promo-text">None</p>
|
||||
</div>
|
||||
<h2>Enterprise</h2>
|
||||
<p>$0.00 / month</p>
|
||||
<div class="part3-list">
|
||||
<div class="list">
|
||||
<svg width="29" height="22" viewBox="0 0 29 22" fill="none" class="check-icon">
|
||||
<path d="M3 9.72308L11.1385 17.8615L26 3" stroke="var(--accent)" stroke-width="5.66154"/>
|
||||
</svg>
|
||||
<p class="list-item">Choose any color</p>
|
||||
</div>
|
||||
<div class="list">
|
||||
<svg width="29" height="22" viewBox="0 0 29 22" fill="none" class="check-icon">
|
||||
<path d="M3 9.72308L11.1385 17.8615L26 3" stroke="var(--accent)" stroke-width="5.66154"/>
|
||||
</svg>
|
||||
<p class="list-item">Export all you want</p>
|
||||
</div>
|
||||
<div class="list">
|
||||
<svg width="29" height="22" viewBox="0 0 29 22" fill="none" class="check-icon">
|
||||
<path d="M3 9.72308L11.1385 17.8615L26 3" stroke="var(--accent)" stroke-width="5.66154"/>
|
||||
</svg>
|
||||
<p class="list-item">Get a big thank you for checking this site out</p>
|
||||
</div>
|
||||
<div class="list">
|
||||
<svg width="29" height="22" viewBox="0 0 29 22" fill="none" class="check-icon">
|
||||
<path d="M3 9.72308L11.1385 17.8615L26 3" stroke="var(--accent)" stroke-width="5.66154"/>
|
||||
</svg>
|
||||
<p class="list-item">Super duper exclusive chat via email</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="mailto:juxtopposed.me@gmail.com" class="secondary-button">Contact</a>
|
||||
<div class="part3-bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="part4" id="faq">
|
||||
<div class="part4-heading">
|
||||
<h2>FAQ</h2>
|
||||
<p>Answers to some questions you might have.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-list">
|
||||
<div class="faq">
|
||||
<div class="faq-q">
|
||||
<h3>How many colors should I choose?</h3>
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" class="faq-icon">
|
||||
<path d="M11.5 0L11.5 23" stroke="var(--accent)" stroke-width="6"/>
|
||||
<path d="M23 11.5L-2.38419e-07 11.5" stroke="var(--accent)" stroke-width="6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="faq-a">
|
||||
<p>Normally, 3 colors are absolutely fine (meaning background, text, and one accent color).<br/>However, if you want, you can have more. Usually, we don 't add more than 6 colors across a platform. It would just make things too... complicated. Plus, it makes it hard to keep the colors consistent throughout the design.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="faq" id="contrast-info">
|
||||
<div class="faq-q">
|
||||
<h3>How does the contrast checker work?</h3>
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" class="faq-icon contrast-icon">
|
||||
<path d="M11.5 0L11.5 23" stroke="var(--accent)" stroke-width="6"/>
|
||||
<path d="M23 11.5L-2.38419e-07 11.5" stroke="var(--accent)" stroke-width="6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="faq-a contrast-answer">
|
||||
<p>
|
||||
The contrast checker shows the contrast ratio between the selected color and its background/foreground.><br/>The contrast checker has 3 lights:</p>
|
||||
<ul style="line-height: 2; font-size: var(--p);">
|
||||
<li><b>Red:</b> The contrast ratio does not pass either AAA or AA. Therefore, both large and normal texts are hardly readable.</li>
|
||||
<li><b>Yellow:</b> The contrast ratio might pass AA but won 't pass AAA. Large texts might be readable but normal texts are probably not readable.</li>
|
||||
<li><b>Green:</b> The contrast ratio passes both AA and AAA. Both large and normal texts are readable.</li>
|
||||
</ul>
|
||||
<p>Learn more about the <a href="/docs/contrast-checker" target="_blank" class="link">contrast checker</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq">
|
||||
<div class="faq-q">
|
||||
<h3>What will I receive after downloading the exported file?</h3>
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" class="faq-icon">
|
||||
<path d="M11.5 0L11.5 23" stroke="var(--accent)" stroke-width="6"/>
|
||||
<path d="M23 11.5L-2.38419e-07 11.5" stroke="var(--accent)" stroke-width="6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="faq-a">
|
||||
<p>After downloading through export options, you will receive a .zip file. This file is compressed, so you will have to extract it.<br/>After extracting it, you will see a .png file and a .txt file. The .png image shows your color palette in squares next to each other. The .txt file includes the color codes in HEX and RGB. You can send these files to designers or developers, or just use them in your project.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq">
|
||||
<div class="faq-q">
|
||||
<h3>Why do some colors have some transparency?</h3>
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" class="faq-icon">
|
||||
<path d="M11.5 0L11.5 23" stroke="var(--accent)" stroke-width="6"/>
|
||||
<path d="M23 11.5L-2.38419e-07 11.5" stroke="var(--accent)" stroke-width="6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="faq-a">
|
||||
<p>This website allows you to choose only opaque colors. However, to make the design more appealing, I 've made some parts more transparent by adding a bit of opacity to them. Of course, you can use these colors however you want in your own projects.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq mondrian-faq" id="mondrian-info">
|
||||
<div class="faq-q">
|
||||
<h3>What does the hero image represent?</h3>
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" class="faq-icon mondrian-icon">
|
||||
<path d="M11.5 0L11.5 23" stroke="var(--accent)" stroke-width="6"/>
|
||||
<path d="M23 11.5L-2.38419e-07 11.5" stroke="var(--accent)" stroke-width="6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="faq-a mondrian-answer">
|
||||
<p>The hero image is inspired by Piet Mondrian 's <b>Composition with Large Red Plane, Yellow, Black, Grey and Blue</b>. This composition keeps the ratio of the main colors (red, blue, and yellow) very close to the 60-30-10 rule of UI design. This is mainly why I 've chosen this composition to visualize the distribution of the colors on the page.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="faq">
|
||||
<div class="faq-q">
|
||||
<h3>How can I set up the fonts?</h3>
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" class="faq-icon">
|
||||
<path d="M11.5 0L11.5 23" stroke="var(--accent)" stroke-width="6"/>
|
||||
<path d="M23 11.5L-2.38419e-07 11.5" stroke="var(--accent)" stroke-width="6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="faq-a">
|
||||
<p>You can either upload a font file from your device locally in the formats .otf, .ttf, .woff, or .woff2, or you can enter the name of a font from Google Fonts or the fonts installed on your device. Read more about <a href="/docs/font-setup" target="_blank" class="link">Font Setup</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq">
|
||||
<div class="faq-q">
|
||||
<h3>How can I learn more about this tool?</h3>
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" class="faq-icon">
|
||||
<path d="M11.5 0L11.5 23" stroke="var(--accent)" stroke-width="6"/>
|
||||
<path d="M23 11.5L-2.38419e-07 11.5" stroke="var(--accent)" stroke-width="6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="faq-a">
|
||||
<p>You can find more information about Realtime Colors on the <a href="/docs" target="_blank" class="link">Docs</a>. You can also <a href="mailto:juxtopposed.me@gmail.com" target="_blank" class="link">email me</a> any questions you might have.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="part1" id="testimonials">
|
||||
<div class="part3-heading">
|
||||
<h2>Testimonials</h2>
|
||||
<p>What (imaginary) people are saying about this site.</p>
|
||||
</div>
|
||||
<div class="part1-cards">
|
||||
<div class="part1-card">
|
||||
<div class="reviewer">
|
||||
<div class="reviewer-img r-one"></div>
|
||||
<div class="reviewer-name">Cool User<br/><span style="opacity: 0.5;">Product Designer</span></div>
|
||||
</div>
|
||||
<svg width="159" height="26" viewBox="0 0 159 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="rating">
|
||||
<path d="M145.336 21.7742L151.933 25.7642C153.141 26.4955 154.62 25.4145 154.302 24.0474L152.553 16.5443L158.387 11.4892C159.452 10.5672 158.88 8.81858 157.481 8.7073L149.803 8.05555L146.798 0.965712C146.258 -0.321904 144.414 -0.321904 143.873 0.965712L140.869 8.03965L133.191 8.69141C131.792 8.80268 131.22 10.5513 132.285 11.4733L138.119 16.5284L136.37 24.0315C136.052 25.3986 137.531 26.4796 138.739 25.7483L145.336 21.7742Z" fill="var(--accent)"/>
|
||||
<path d="M13.6026 21.7742L20.1996 25.7642C21.4077 26.4955 22.8861 25.4145 22.5682 24.0474L20.8196 16.5443L26.6536 11.4892C27.7186 10.5672 27.1464 8.81858 25.7475 8.7073L18.0695 8.05555L15.065 0.965712C14.5246 -0.321904 12.6806 -0.321904 12.1401 0.965712L9.13564 8.03965L1.45764 8.69141C0.0587495 8.80268 -0.513524 10.5513 0.55154 11.4733L6.38555 16.5284L4.63694 24.0315C4.31901 25.3986 5.79738 26.4796 7.00551 25.7483L13.6026 21.7742Z" fill="var(--accent)"/>
|
||||
<path d="M46.5357 21.7742L53.1327 25.7642C54.3408 26.4955 55.8192 25.4145 55.5013 24.0474L53.7527 16.5443L59.5867 11.4892C60.6517 10.5672 60.0795 8.81858 58.6806 8.7073L51.0026 8.05555L47.9981 0.965712C47.4577 -0.321904 45.6137 -0.321904 45.0732 0.965712L42.0687 8.03965L34.3907 8.69141C32.9919 8.80268 32.4196 10.5513 33.4846 11.4733L39.3187 16.5284L37.57 24.0315C37.2521 25.3986 38.7305 26.4796 39.9386 25.7483L46.5357 21.7742Z" fill="var(--accent)"/>
|
||||
<path d="M79.4693 21.7742L86.0663 25.7642C87.2744 26.4955 88.7528 25.4145 88.4349 24.0474L86.6863 16.5443L92.5203 11.4892C93.5853 10.5672 93.0131 8.81858 91.6142 8.7073L83.9362 8.05555L80.9317 0.965712C80.3913 -0.321904 78.5473 -0.321904 78.0068 0.965712L75.0023 8.03965L67.3243 8.69141C65.9254 8.80268 65.3532 10.5513 66.4182 11.4733L72.2523 16.5284L70.5036 24.0315C70.1857 25.3986 71.6641 26.4796 72.8722 25.7483L79.4693 21.7742Z" fill="var(--accent)"/>
|
||||
<path d="M112.402 21.7742L118.999 25.7642C120.208 26.4955 121.686 25.4145 121.368 24.0474L119.619 16.5443L125.453 11.4892C126.518 10.5672 125.946 8.81858 124.547 8.7073L116.869 8.05555L113.865 0.965712C113.324 -0.321904 111.48 -0.321904 110.94 0.965712L107.935 8.03965L100.257 8.69141C98.8586 8.80268 98.2863 10.5513 99.3513 11.4733L105.185 16.5284L103.437 24.0315C103.119 25.3986 104.597 26.4796 105.805 25.7483L112.402 21.7742Z" fill="var(--accent)"/>
|
||||
</svg>
|
||||
<p class="review">"Wow! I love this site. Realtime Colors is all websites at the same time."</p>
|
||||
<div class="part1-card-bg"></div>
|
||||
</div>
|
||||
|
||||
<div class="part1-card">
|
||||
<div class="reviewer">
|
||||
<div class="reviewer-img r-two"></div>
|
||||
<div class="reviewer-name">Creative Person<br/><span style="opacity: 0.5;">Product Owner</span></div>
|
||||
</div>
|
||||
<svg width="159" height="26" viewBox="0 0 159 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="rating">
|
||||
<path d="M145.336 21.7742L151.933 25.7642C153.141 26.4955 154.62 25.4145 154.302 24.0474L152.553 16.5443L158.387 11.4892C159.452 10.5672 158.88 8.81858 157.481 8.7073L149.803 8.05555L146.798 0.965712C146.258 -0.321904 144.414 -0.321904 143.873 0.965712L140.869 8.03965L133.191 8.69141C131.792 8.80268 131.22 10.5513 132.285 11.4733L138.119 16.5284L136.37 24.0315C136.052 25.3986 137.531 26.4796 138.739 25.7483L145.336 21.7742Z" fill="var(--accent)"/>
|
||||
<path d="M13.6026 21.7742L20.1996 25.7642C21.4077 26.4955 22.8861 25.4145 22.5682 24.0474L20.8196 16.5443L26.6536 11.4892C27.7186 10.5672 27.1464 8.81858 25.7475 8.7073L18.0695 8.05555L15.065 0.965712C14.5246 -0.321904 12.6806 -0.321904 12.1401 0.965712L9.13564 8.03965L1.45764 8.69141C0.0587495 8.80268 -0.513524 10.5513 0.55154 11.4733L6.38555 16.5284L4.63694 24.0315C4.31901 25.3986 5.79738 26.4796 7.00551 25.7483L13.6026 21.7742Z" fill="var(--accent)"/>
|
||||
<path d="M46.5357 21.7742L53.1327 25.7642C54.3408 26.4955 55.8192 25.4145 55.5013 24.0474L53.7527 16.5443L59.5867 11.4892C60.6517 10.5672 60.0795 8.81858 58.6806 8.7073L51.0026 8.05555L47.9981 0.965712C47.4577 -0.321904 45.6137 -0.321904 45.0732 0.965712L42.0687 8.03965L34.3907 8.69141C32.9919 8.80268 32.4196 10.5513 33.4846 11.4733L39.3187 16.5284L37.57 24.0315C37.2521 25.3986 38.7305 26.4796 39.9386 25.7483L46.5357 21.7742Z" fill="var(--accent)"/>
|
||||
<path d="M79.4693 21.7742L86.0663 25.7642C87.2744 26.4955 88.7528 25.4145 88.4349 24.0474L86.6863 16.5443L92.5203 11.4892C93.5853 10.5672 93.0131 8.81858 91.6142 8.7073L83.9362 8.05555L80.9317 0.965712C80.3913 -0.321904 78.5473 -0.321904 78.0068 0.965712L75.0023 8.03965L67.3243 8.69141C65.9254 8.80268 65.3532 10.5513 66.4182 11.4733L72.2523 16.5284L70.5036 24.0315C70.1857 25.3986 71.6641 26.4796 72.8722 25.7483L79.4693 21.7742Z" fill="var(--accent)"/>
|
||||
<path d="M112.402 21.7742L118.999 25.7642C120.208 26.4955 121.686 25.4145 121.368 24.0474L119.619 16.5443L125.453 11.4892C126.518 10.5672 125.946 8.81858 124.547 8.7073L116.869 8.05555L113.865 0.965712C113.324 -0.321904 111.48 -0.321904 110.94 0.965712L107.935 8.03965L100.257 8.69141C98.8586 8.80268 98.2863 10.5513 99.3513 11.4733L105.185 16.5284L103.437 24.0315C103.119 25.3986 104.597 26.4796 105.805 25.7483L112.402 21.7742Z" fill="var(--accent)"/>
|
||||
</svg>
|
||||
<p class="review">"Amazing. I found my favorite colors in literally... 2 minutes? Woah! Totally real review."</p>
|
||||
<div class="part1-card-bg"></div>
|
||||
</div>
|
||||
|
||||
<div class="part1-card">
|
||||
<div class="reviewer">
|
||||
<div class="reviewer-img r-three"></div>
|
||||
<div class="reviewer-name">Real Reviewer<br/><span style="opacity: 0.5;">Developer</span></div>
|
||||
</div>
|
||||
<svg width="159" height="26" viewBox="0 0 159 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="rating">
|
||||
<path d="M145.336 21.7742L151.933 25.7642C153.141 26.4955 154.62 25.4145 154.302 24.0474L152.553 16.5443L158.387 11.4892C159.452 10.5672 158.88 8.81858 157.481 8.7073L149.803 8.05555L146.798 0.965712C146.258 -0.321904 144.414 -0.321904 143.873 0.965712L140.869 8.03965L133.191 8.69141C131.792 8.80268 131.22 10.5513 132.285 11.4733L138.119 16.5284L136.37 24.0315C136.052 25.3986 137.531 26.4796 138.739 25.7483L145.336 21.7742Z" fill="var(--accent)"/>
|
||||
<path d="M13.6026 21.7742L20.1996 25.7642C21.4077 26.4955 22.8861 25.4145 22.5682 24.0474L20.8196 16.5443L26.6536 11.4892C27.7186 10.5672 27.1464 8.81858 25.7475 8.7073L18.0695 8.05555L15.065 0.965712C14.5246 -0.321904 12.6806 -0.321904 12.1401 0.965712L9.13564 8.03965L1.45764 8.69141C0.0587495 8.80268 -0.513524 10.5513 0.55154 11.4733L6.38555 16.5284L4.63694 24.0315C4.31901 25.3986 5.79738 26.4796 7.00551 25.7483L13.6026 21.7742Z" fill="var(--accent)"/>
|
||||
<path d="M46.5357 21.7742L53.1327 25.7642C54.3408 26.4955 55.8192 25.4145 55.5013 24.0474L53.7527 16.5443L59.5867 11.4892C60.6517 10.5672 60.0795 8.81858 58.6806 8.7073L51.0026 8.05555L47.9981 0.965712C47.4577 -0.321904 45.6137 -0.321904 45.0732 0.965712L42.0687 8.03965L34.3907 8.69141C32.9919 8.80268 32.4196 10.5513 33.4846 11.4733L39.3187 16.5284L37.57 24.0315C37.2521 25.3986 38.7305 26.4796 39.9386 25.7483L46.5357 21.7742Z" fill="var(--accent)"/>
|
||||
<path d="M79.4693 21.7742L86.0663 25.7642C87.2744 26.4955 88.7528 25.4145 88.4349 24.0474L86.6863 16.5443L92.5203 11.4892C93.5853 10.5672 93.0131 8.81858 91.6142 8.7073L83.9362 8.05555L80.9317 0.965712C80.3913 -0.321904 78.5473 -0.321904 78.0068 0.965712L75.0023 8.03965L67.3243 8.69141C65.9254 8.80268 65.3532 10.5513 66.4182 11.4733L72.2523 16.5284L70.5036 24.0315C70.1857 25.3986 71.6641 26.4796 72.8722 25.7483L79.4693 21.7742Z" fill="var(--accent)"/>
|
||||
<path d="M112.402 21.7742L118.999 25.7642C120.208 26.4955 121.686 25.4145 121.368 24.0474L119.619 16.5443L125.453 11.4892C126.518 10.5672 125.946 8.81858 124.547 8.7073L116.869 8.05555L113.865 0.965712C113.324 -0.321904 111.48 -0.321904 110.94 0.965712L107.935 8.03965L100.257 8.69141C98.8586 8.80268 98.2863 10.5513 99.3513 11.4733L105.185 16.5284L103.437 24.0315C103.119 25.3986 104.597 26.4796 105.805 25.7483L112.402 21.7742Z" fill="var(--accent)"/>
|
||||
</svg>
|
||||
<p class="review">"Astonished. This product is so cool. You should try it and upgrade to Enterprise plan. No kidding."</p>
|
||||
<div class="part1-card-bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="part1" id="featured-posts">
|
||||
<div class="part3-heading">
|
||||
<h2>Featured Articles</h2>
|
||||
<p>Just some interesting guides and posts.</p>
|
||||
</div>
|
||||
<div class="part1-cards featured-col">
|
||||
<div class="doc-item main-page"><a href="/docs/examples" class="doc-link" style="font-size: var(--p); padding: 2em 1em;">Examples of Colors from Popular Sites</a><div class="col1-doc-link-bg"></div></div>
|
||||
<div class="doc-item main-page"><a href="/docs/selecting-colors" class="doc-link" style="font-size: var(--p); padding: 2em 1em;">How to Select Colors</a><div class="col1-doc-link-bg"></div></div>
|
||||
<div class="doc-item main-page"><a href="/docs/issues" class="doc-link" style="font-size: var(--p); padding: 2em 1em;">Learn More about the Releases</a><div class="col1-doc-link-bg"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="part5" id="end">
|
||||
<h1>Your <span class="color-effect">Journey</span> Shouldn 't End Here.</h1>
|
||||
<p class="subtitle">Follow me on social media to stay tuned on more projects.</p>
|
||||
<a href="https://twitter.com/juxtopposed" target="_blank" class="primary-button">Stay Tuned</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<tool-bar class="toolbar" id="toolbar"></tool-bar>
|
||||
<export-options></export-options>
|
||||
|
||||
|
||||
<div id="tip-bar">
|
||||
<button id="close-btn">×</button>
|
||||
<p><b>Tip:</b> Press the Spacebar to randomize faster!</p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
// use leptos::{component, view, IntoView, Scope};
|
||||
use leptos::*;
|
||||
// use leptos_router::*;
|
||||
use leptos_meta::*;
|
||||
use leptos_icons::*;
|
||||
|
||||
#[component]
|
||||
pub fn Nav(cx: Scope) -> impl IntoView {
|
||||
|
||||
let (active, setActive) = create_signal(cx, "navBar");
|
||||
|
||||
let showNav = move |_cx: Scope| { setActive.set("navBar activeNavbar") };
|
||||
let removeNav = move |_cx: Scope| { setActive.set("navBar") };
|
||||
|
||||
view! { cx,
|
||||
<Stylesheet id="leptos" href="/nav.css"/>
|
||||
<section class="navBarSection">
|
||||
<header class="header flex">
|
||||
<div class="logoDiv">
|
||||
<a href="#" class="logo">
|
||||
<h1><Icon class="icon" icon=Icon::from(SiIcon::SiYourtraveldottv) />Tour.</h1>
|
||||
// <h1><SiYourtraveldottv class="icon"/>Tour.</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class={ move || active.get()}>
|
||||
<ul class="navLists flex">
|
||||
<li class="navItem">
|
||||
<a href="#" class="navLink">Home</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="#" class="navLink">Packages</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="#" class="navLink">Shop</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="#" class="navLink">About</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="#" class="navLink">Pages</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="#" class="navLink">News</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="#" class="navLink">Contact</a>
|
||||
</li>
|
||||
<button class="btn">
|
||||
<a href="#">BOOK NOW</a>
|
||||
</button>
|
||||
</ul>
|
||||
<div on:click=move |_| removeNav(cx) class="closeNavbar">
|
||||
// <AiFillCloseCircle class="icon"/>
|
||||
<Icon class="icon" icon=Icon::from(AiIcon::AiCloseCircleFilled) />
|
||||
</div>
|
||||
</div>
|
||||
<div on:click=move |_| showNav(cx) class="toggleNavBar">
|
||||
// <TbGridDots class="icon"/> TbGridDots
|
||||
<Icon class="icon" icon=Icon::from(TbIcon::TbGridDots) />
|
||||
</div>
|
||||
</header>
|
||||
</section>
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
/* nav */
|
||||
/*
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.logoface {
|
||||
width: 50px;
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.logo:hover >
|
||||
.logoface {
|
||||
transform: rotate(360deg);
|
||||
transition: all ease-in-out 0.4s;
|
||||
}
|
||||
|
||||
.sitename {
|
||||
font-size: var(--subtitle);
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.menu.hide {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ham-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
font-size: var(--sub);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
padding: 1em;
|
||||
border-radius: 6px;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.menu-item:hover {
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.menu-item-font {
|
||||
font-size: var(--sub) !important;
|
||||
}
|
||||
|
||||
.menu-item-header {
|
||||
opacity: 50%;
|
||||
}
|
||||
.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu > .primary-button {
|
||||
margin-left: 2em;
|
||||
}
|
||||
*/
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
// use leptos::{component, view, IntoView, Scope};
|
||||
use leptos::*;
|
||||
// use leptos_router::*;
|
||||
use leptos_meta::*;
|
||||
use leptos_icons::*;
|
||||
|
||||
#[component]
|
||||
pub fn Nav(cx: Scope) -> impl IntoView {
|
||||
|
||||
// let (active, setActive) = create_signal(cx, "navBar");
|
||||
|
||||
// let showNav = move |_cx: Scope| { setActive.set("navBar activeNavbar") };
|
||||
// let removeNav = move |_cx: Scope| { setActive.set("navBar") };
|
||||
|
||||
view! { cx,
|
||||
<Stylesheet id="leptos" href="/nav.css"/>
|
||||
<nav>
|
||||
<div class="logo">
|
||||
<h1><Icon class="icon" icon=Icon::from(SiIcon::SiYourtraveldottv) /></h1>
|
||||
// <img src="/images/favicon.png" alt="logoface" class="logoface"/>
|
||||
<a href="/"><h2 class="sitename">Tour</h2></a>
|
||||
</div>
|
||||
<div class="ham-menu">
|
||||
<button id="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="menu hide">
|
||||
|
||||
<a href="https://www.figma.com/community/plugin/1234060894101724457/Realtime-Colors" target="_blank" class="menu-item menu-item-mobile">Try Figma Plugin
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<rect x="0.318182" y="0.318182" width="13.3636" height="13.3636" rx="2.10647" stroke="var(--text)" stroke-width="0.636364"/>
|
||||
<path d="M4.33594 9.7564L9.75615 4.33618M9.75615 4.33618L5.41998 4.33618M9.75615 4.33618V8.94337" stroke="var(--text)" stroke-width="0.813033" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/palettes" class="menu-item menu-item-mobile">Palette Generator</a>
|
||||
<a href="/docs" class="menu-item menu-item-mobile">Docs <span style="background-color: var(--text); padding: 0.4em 0.4em 0.4em 0.2em; border-radius: 5px; font-size: 12px; color: var(--bg);"> New!</span></a>
|
||||
<a href="#sub" class="primary-button menu-item-font">Subscribe</a>
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
:root{
|
||||
--PrimaryColor : hsl(199, 100%,33%);
|
||||
--SecondaryColor: hsl(187, 85%, 43%);
|
||||
--gradientColor: linear-gradient(to right, hsl(187, 85%, 43%), hsl(199, 100%, 33%) );
|
||||
--whiteColor: hsl(0, 0%, 100%);
|
||||
--blackColor: hsl(201, 33%, 16%);
|
||||
--textColor: hsl(240, 4%, 36%);
|
||||
--whiteColorDeam: hsl(0, 0%, 93%);
|
||||
--greyText :rgb(190, 190, 190);
|
||||
--inputColor: rgb(239, 239, 239);
|
||||
--bodyColor: rgb(240, 240, 246);
|
||||
--cardBG: rgb(225, 225,235);
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.section{
|
||||
padding: 4rem 0 2rem;
|
||||
}
|
||||
|
||||
.container{
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.icon{
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flex{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.grid{
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn{
|
||||
padding: .6rem 1.5rem;
|
||||
background: var(--gradientColor);
|
||||
border-radius: 3rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn a{
|
||||
color: var(--whiteColor);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
background: var(--SecondaryColor);
|
||||
}
|
||||
|
||||
img, video{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
input{
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body{
|
||||
background: var(--bodyColor);
|
||||
}
|
||||
*/
|
||||
Loading…
Reference in New Issue