442 lines
17 KiB
Plaintext
442 lines
17 KiB
Plaintext
---
|
|
import { ViewTransitions } from "astro:transitions";
|
|
|
|
export interface Props {
|
|
site: string;
|
|
title: string;
|
|
tagline: string;
|
|
}
|
|
|
|
const { site, title, tagline } = Astro.props;
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en" data-new-ui-theme="dark">
|
|
<head>
|
|
<ViewTransitions />
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<link rel="icon" type="image/svg+xml" href="/rise-of-machine.png" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<title>{site} — Discover AI tools curated for makers and SMBs.</title>
|
|
<meta name="author" content="Method Black" />
|
|
<meta
|
|
name="description"
|
|
content="Discover AI tools curated for makers and SMBs."
|
|
/>
|
|
<meta property="og:title" content="Rise of Machine" />
|
|
<meta property="og:type" content="website" />
|
|
<meta
|
|
property="og:description"
|
|
content="Discover AI tools curated for makers and SMBs."
|
|
/>
|
|
<meta
|
|
property="og:image"
|
|
content="https://res.cloudinary.com/drwfwpkeo/image/upload/v1703755911/Light_Screenshot_ub9ydn.png"
|
|
/>
|
|
<meta property="og:url" content="https://riseofmachine.com/" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="floating-nav" aria-label="main navigation">
|
|
<div class="logo">
|
|
<a href="/" aria-label="home page" tabindex="-1"
|
|
><img
|
|
src="/rise-of-machine.png"
|
|
width="24"
|
|
height="24"
|
|
alt="Rise of Machine"
|
|
aria-hidden="true"
|
|
/></a
|
|
>
|
|
</div>
|
|
<div class="btn-group">
|
|
<a
|
|
href="https://forms.gle/pzpG1cbxW6AA57uc9"
|
|
target="_blank"
|
|
class="submit-btn"
|
|
tabindex="0">Submit a Tool</a
|
|
>
|
|
<button
|
|
class="theme-toggle"
|
|
id="theme-toggle"
|
|
title="Toggles light & dark"
|
|
aria-label="auto"
|
|
aria-live="polite"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
fill="none"
|
|
><path
|
|
stroke="var(--icon-secondary)"
|
|
stroke-linecap="round"
|
|
stroke-miterlimit="10"
|
|
stroke-width="1.5"
|
|
d="M12 4V2M3 13H1m22 0h-2m-1.222-7.778-1.414 1.414m-12.728 0L4.222 5.222M4 18h16M8 21h8m-7.43-3.07A5.98 5.98 0 0 1 6 13c0-3.31 2.69-6 6-6s6 2.69 6 6c0 2.05-1.03 3.86-2.6 4.94l-6.83-.01Z"
|
|
></path></svg
|
|
>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<header class="nu-u-mb-10 nu-u-mt-10">
|
|
<div class="container">
|
|
<h1
|
|
class="nu-c-h3 nu-u-text--primary nu-u-mt-0 nu-u-mb-2 title"
|
|
>
|
|
{title}
|
|
</h1>
|
|
<p class="nu-c-fs-normal nu-u-text--secondary description-text">
|
|
{tagline}
|
|
</p>
|
|
</div>
|
|
</header>
|
|
<slot />
|
|
|
|
<div class="footer">
|
|
<p>
|
|
© 2024 Method Black. Created by <a
|
|
href="https://planetabhi.com/"
|
|
class="nu-u-link--subtle"
|
|
target="_blank">@planetabhi</a
|
|
>. <br /><a
|
|
href="https://new-ui.com/templates/directory"
|
|
class="nu-u-link--subtle"
|
|
target="_blank">Get this template</a
|
|
>
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<style is:global>
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
src: url("/fonts/InterVariable.woff2") format("woff2");
|
|
}
|
|
:root {
|
|
--accent: var(--link);
|
|
--body-copy: "Inter", var(--system-ui);
|
|
--cursor-default:url(
|
|
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='26' fill='none' viewBox='0 0 24 26'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.69 2.69a2.357 2.357 0 0 1 2.495-.54L21.47 8.632a2.357 2.357 0 0 1-.255 4.494l-7.271 1.818-1.818 7.27a2.357 2.357 0 0 1-4.494.256L1.15 5.185a2.357 2.357 0 0 1 .54-2.495Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.633 3.622A.786.786 0 0 0 2.62 4.633L9.103 21.92a.786.786 0 0 0 1.498-.086l2.047-8.185 8.185-2.046a.785.785 0 0 0 .086-1.498L3.633 3.622Z' fill='%23010101'/%3E%3C/svg%3E"
|
|
),auto;
|
|
--cursor-pointer:url(
|
|
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' fill='none' viewBox='0 0 28 29'%3E%3Cpath fill='%23fff' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z' clip-rule='evenodd'/%3E%3Cpath fill='%23000' d='M20.65 22.3v-6.24c0-.38-.31-.68-.7-.68-.37 0-.68.3-.68.68v6.23c0 .38.3.68.69.68.38 0 .69-.3.69-.68ZM17.2 22.3l-.04-6.25a.67.67 0 1 0-1.34.01l.04 6.24a.67.67 0 1 0 1.34 0ZM12.37 16.07l.04 6.22c0 .38.3.68.67.68.37 0 .67-.3.67-.68l-.04-6.23c0-.38-.3-.68-.67-.68-.37 0-.67.31-.67.69Z'/%3E%3C/svg%3E"
|
|
),auto;
|
|
--cursor-text:url(
|
|
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='25' fill='none' viewBox='0 0 13 25'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.75' d='M8 18.48v-4.23h1.27v-3H8V5.8c.2-.44.5-.82.87-1.14.23-.16.52-.32.83-.44a5.4 5.4 0 0 1 1.17-.05l.87.05.05-.87.08-1.27.06-.87-.88-.06c-.7-.04-1.4 0-2.1.14l-.05.01-.06.02c-.7.25-1.29.56-1.82.95L7 2.28l-.03.02c-.16.13-.31.28-.46.42a6.93 6.93 0 0 0-.39-.38l-.03-.03-.03-.02a5.86 5.86 0 0 0-1.85-.97l-.04-.01-.04-.01a8.1 8.1 0 0 0-2.19-.16l-.87.06.06.87.08 1.27.06.88.87-.06c.43-.03.85 0 1.27.08.23.08.5.21.74.4.33.3.63.72.84 1.19v5.42H3.72v3h1.27v4.2c-.21.47-.51.89-.88 1.24-.2.14-.46.28-.75.37-.36.07-.8.1-1.22.06l-.87-.05-.06.87-.08 1.27-.06.88.87.05c.71.05 1.42 0 2.12-.14h.04l.04-.02a5.83 5.83 0 0 0 1.88-.95l.03-.02.03-.03.44-.43c.14.14.28.27.44.4l.02.02.02.01c.55.42 1.14.73 1.76.95l.05.02.06.01c.77.17 1.47.22 2.17.18l.88-.05-.05-.87-.07-1.27-.05-.87-.87.04c-.42.03-.83 0-1.24-.08-.24-.1-.52-.25-.8-.45A3.4 3.4 0 0 1 8 18.48Z'/%3E%3C/svg%3E"
|
|
),auto;
|
|
}
|
|
html {
|
|
font-family: var(--body-copy);
|
|
background-color: var(--background);
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
cursor: var(--cursor-default);
|
|
}
|
|
p, h1, h2, h3, h4, h5, h6, li, pre, code, strong, dl, dt {
|
|
cursor: var(--cursor-text);
|
|
}
|
|
a, a *, button {
|
|
cursor: var(--cursor-pointer);
|
|
}
|
|
main,
|
|
.container {
|
|
margin: var(--spacing-09);
|
|
}
|
|
section {
|
|
margin-bottom: var(--spacing-10);
|
|
}
|
|
p {
|
|
margin-top: var(--spacing-00);
|
|
}
|
|
p.description-text {
|
|
max-inline-size: 37.5rem;
|
|
}
|
|
.nu-u-link--subtle {
|
|
color: var(--text-secondary) !important;
|
|
}
|
|
.floating-nav {
|
|
padding: var(--spacing-06) var(--spacing-09);
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
z-index: 999999;
|
|
}
|
|
.btn-group {
|
|
display: flex;
|
|
gap: var(--spacing-03);
|
|
align-items: center;
|
|
}
|
|
.submit-btn {
|
|
padding: 0.5625rem 0.9375rem;
|
|
border: 1px solid var(--border-muted);
|
|
outline: none;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
cursor: var(--cursor-pointer);
|
|
color: var(--text-secondary);
|
|
background-color: var(--background);
|
|
border-radius: var(--spacing-03);
|
|
font-size: var(--desktop-body-sm);
|
|
|
|
&:hover {
|
|
background-color: var(--background-secondary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--background);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
&.disabled {
|
|
background-color: var(--background);
|
|
color: var(--icon-secondary);
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:focus {
|
|
background-color: var(--background);
|
|
outline: 1px solid var(--button-primary);
|
|
color: var(--icon-secondary);
|
|
}
|
|
}
|
|
.theme-toggle {
|
|
z-index: 999;
|
|
--icon-fill: var(--icon-secondary);
|
|
--icon-fill-hover: var(--icon-secondary);
|
|
width: var(--spacing-09);
|
|
height: var(--spacing-09);
|
|
background: none;
|
|
border: none;
|
|
padding: var(--spacing-00);
|
|
color: var(--icon-secondary);
|
|
cursor: var(--cursor-pointer);
|
|
touch-action: manipulation;
|
|
-webkit-tap-highlight-color: transparent;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: var(--spacing-02);
|
|
cursor: var(--cursor-pointer);
|
|
|
|
@nest [data-theme="dark"] & {
|
|
--icon-fill: var(--icon-secondary);
|
|
--icon-fill-hover: var(--icon-secondary);
|
|
}
|
|
}
|
|
.footer p {
|
|
padding-bottom: var(--spacing-10);
|
|
text-align: center;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
color: var(--text-secondary-alt);
|
|
font-size: var(--desktop-body-sm);
|
|
line-height: var(--lh-desktop-body);
|
|
}
|
|
|
|
@media (max-width: 30rem) {
|
|
main {
|
|
margin: auto var(--spacing-06);
|
|
}
|
|
.floating-nav {
|
|
padding: var(--spacing-06) var(--spacing-06);
|
|
}
|
|
.container {
|
|
margin: var(--spacing-06);
|
|
}
|
|
}
|
|
|
|
/* logo animation */
|
|
.logo {
|
|
transition: all 0.2s ease-out;
|
|
padding-top: var(--spacing-03);
|
|
}
|
|
.logo:hover {
|
|
animation: buzz 0.32s linear 2;
|
|
transform: scale(1.1) translateZ(0);
|
|
filter: brightness(1.1);
|
|
}
|
|
@keyframes buzz {
|
|
50% {
|
|
transform: translateX(3px) rotate(2deg);
|
|
}
|
|
100% {
|
|
transform: translateX(-3px) rotate(-2deg);
|
|
}
|
|
}
|
|
@supports (not (animation: buzz)) {
|
|
.logo:hover {
|
|
-webkit-animation: buzz 0.32s linear 2;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.logo:hover {
|
|
animation: none;
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
body {
|
|
cursor:var(--cursor-default);
|
|
}
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
cursor:var(--cursor-text);
|
|
}
|
|
a,
|
|
a *,
|
|
button:not(.tooltip-btn),
|
|
button:not(.tooltip-btn) *,
|
|
select,
|
|
input[type=checkbox] {
|
|
cursor:var(--cursor-pointer);
|
|
}
|
|
button[aria-disabled='true'] {
|
|
pointer-events:none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script is:inline>
|
|
history.scrollRestoration = "manual";
|
|
window.onbeforeunload = function () {
|
|
window.scrollTo(0, 0);
|
|
};
|
|
|
|
const nav = document.querySelector(".floating-nav");
|
|
const pageCTA = document.querySelector(".floating-nav .submit-btn");
|
|
var pageCTAPosition = 0;
|
|
if (pageCTA) {
|
|
pageCTAPosition = pageCTA.getBoundingClientRect().bottom;
|
|
}
|
|
|
|
var previousScrollPosition = 0;
|
|
|
|
const handleNavScroll = () => {
|
|
let currentScrolledPosition = window.scrollY || window.pageYOffset;
|
|
if (isScrollingDown()) {
|
|
nav.classList.add("scroll-down");
|
|
nav.classList.remove("scroll-up");
|
|
} else {
|
|
nav.classList.add("scroll-up");
|
|
nav.classList.remove("scroll-down");
|
|
}
|
|
if (currentScrolledPosition > pageCTAPosition + 50) {
|
|
if (!nav.classList.contains("is-active")) {
|
|
nav.classList.add("is-active");
|
|
}
|
|
} else {
|
|
if (nav.classList.contains("is-active")) {
|
|
nav.classList.remove("is-active");
|
|
}
|
|
}
|
|
};
|
|
|
|
function isScrollingDown() {
|
|
let currentScrolledPosition = window.scrollY || window.pageYOffset;
|
|
let scrollingDown;
|
|
if (currentScrolledPosition > previousScrollPosition) {
|
|
scrollingDown = true;
|
|
} else {
|
|
scrollingDown = false;
|
|
}
|
|
previousScrollPosition = currentScrolledPosition;
|
|
return scrollingDown;
|
|
}
|
|
|
|
var throttleWait;
|
|
function throttle(callback, time) {
|
|
if (throttleWait) return;
|
|
throttleWait = true;
|
|
setTimeout(() => {
|
|
callback();
|
|
throttleWait = false;
|
|
}, time);
|
|
}
|
|
|
|
window.addEventListener("scroll", () => {
|
|
throttle(handleNavScroll, 80);
|
|
});
|
|
</script>
|
|
|
|
<script is:inline>
|
|
// Initial theme setup
|
|
const theme = (() => {
|
|
if (
|
|
typeof localStorage !== "undefined" &&
|
|
localStorage.getItem("theme-preference")
|
|
) {
|
|
return localStorage.getItem("theme-preference");
|
|
}
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light";
|
|
})();
|
|
|
|
document.firstElementChild.setAttribute("data-new-ui-theme", theme);
|
|
|
|
// Handle theme toggle
|
|
function toggleTheme() {
|
|
const currentTheme =
|
|
document.firstElementChild.getAttribute("data-new-ui-theme");
|
|
const newTheme = currentTheme === "light" ? "dark" : "light";
|
|
|
|
document.firstElementChild.setAttribute("data-new-ui-theme", newTheme);
|
|
localStorage.setItem("theme-preference", newTheme);
|
|
}
|
|
|
|
// Initialize toggle button
|
|
function initThemeToggle() {
|
|
const themeToggle = document.querySelector("#theme-toggle");
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener("click", toggleTheme);
|
|
}
|
|
}
|
|
|
|
// Handle page transitions
|
|
document.addEventListener("astro:page-load", () => {
|
|
const storedTheme = localStorage.getItem("theme-preference");
|
|
if (storedTheme) {
|
|
document.firstElementChild.setAttribute(
|
|
"data-new-ui-theme",
|
|
storedTheme,
|
|
);
|
|
}
|
|
initThemeToggle();
|
|
});
|
|
|
|
// Handle system theme changes
|
|
window
|
|
.matchMedia("(prefers-color-scheme: dark)")
|
|
.addEventListener("change", ({ matches: isDark }) => {
|
|
const newTheme = isDark ? "dark" : "light";
|
|
document.firstElementChild.setAttribute(
|
|
"data-new-ui-theme",
|
|
newTheme,
|
|
);
|
|
localStorage.setItem("theme-preference", newTheme);
|
|
});
|
|
|
|
// Initialize on first load
|
|
initThemeToggle();
|
|
</script>
|