PHPIndex

This page lists files in the current directory. You can view content, get download/execute commands for Wget, Curl, or PowerShell, or filter the list using wildcards (e.g., `*.sh`).

index.html 
wget 'https://sme10.lists2.roe3.org/mdrone/pricing-plans/index.html'
View Content 
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Dooley Sworne's Tech Service Pricing Plans</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&amp;display=swap'>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="root"></div>
<script type="module" src="./script.js"></script>
</body>
</html>
script.js 
wget 'https://sme10.lists2.roe3.org/mdrone/pricing-plans/script.js'
View Content 
import React, { StrictMode, useEffect, useRef, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
createRoot(document.getElementById("root")).render(React.createElement(StrictMode, null,
    React.createElement("main", null,
        React.createElement(PricingPlans, null))));
function PricingPlans() {
    const freePlan = {
        name: "Free",
        type: "free",
        description: "Perfect for getting things done in the background without Dooley Sworne getting paid to do those things in the background because that's just what he does."
    };
    const proPlan = {
        name: "Pro",
        type: "pro",
        description: "Exactly the same as the Free Plan, except at an exorbitant price that keeps Dooley Sworne off skid row."
    };
    const plans = {
        monthly: [
            Object.assign({}, freePlan),
            Object.assign(Object.assign({}, proPlan), { price: 1199 })
        ],
        yearly: [
            Object.assign({}, freePlan),
            Object.assign(Object.assign({}, proPlan), { price: 11399 })
        ]
    };
    const [billingCycle, setBillingCycle] = useState("monthly");
    const [selectedPlan, setSelectedPlan] = useState(null);
    return (React.createElement("div", { className: "pricing" },
        React.createElement("h2", { className: "pricing__heading" }, "Pick Your Tech Service Plan"),
        React.createElement(PricingPlansTabs, { billingCycle: billingCycle, onChange: setBillingCycle }),
        React.createElement(PricingPlansOptions, { billingCycle: billingCycle, plans: plans[billingCycle], selectedPlan: selectedPlan, onSelectPlan: setSelectedPlan })));
}
function PricingPlansCard({ plan, unit, isSelected, onSelect }) {
    var _a;
    const buttonRef = useRef(null);
    const [wrapperHeight, setWrapperHeight] = useState((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight);
    const wrapperStyle = {
        height: wrapperHeight
    };
    const priceFormatted = Utils.formatCurrency(plan.price || 0);
    function updateWrapperHeight() {
        var _a;
        setWrapperHeight((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight);
    }
    function confirmPlan() {
        console.log(`${plan.name} (${priceFormatted}/${unit})`);
    }
    useEffect(() => {
        updateWrapperHeight();
        window.addEventListener("resize", updateWrapperHeight);
        return () => window.removeEventListener("resize", updateWrapperHeight);
    }, []);
    return (React.createElement("div", { className: "pricing-plan" },
        React.createElement("label", { className: "pricing-plan__label" },
            React.createElement("input", { className: "pricing-plan__input", type: "radio", name: "plan", value: plan.type, checked: isSelected, onChange: onSelect }),
            React.createElement("span", { className: "pricing-plan__header" },
                React.createElement("span", { className: "pricing-plan__name" }, plan.name),
                React.createElement("span", { className: "pricing-plan__price" },
                    priceFormatted,
                    !!plan.price && (React.createElement("small", { className: "pricing-plan__price-unit" },
                        " /",
                        unit)))),
            React.createElement("span", { className: "pricing-plan__description" }, plan.description)),
        React.createElement("div", { className: "pricing-plan__button-wrapper", style: isSelected ? wrapperStyle : undefined },
            React.createElement("button", { ref: buttonRef, className: "pricing-plan__button", type: "button", disabled: !isSelected, onClick: confirmPlan }, "Continue"))));
}
function PricingPlansOptions({ billingCycle, plans, selectedPlan, onSelectPlan }) {
    const id = `panel-${billingCycle}`;
    const ariaLabelledBy = `tab-${billingCycle}`;
    const units = {
        monthly: "month",
        yearly: "year"
    };
    return (React.createElement("div", { id: id, role: "tabpanel", "aria-labelledby": ariaLabelledBy, className: "pricing__options" }, plans.map((plan) => (React.createElement(PricingPlansCard, { key: plan.type, plan: plan, unit: units[billingCycle], isSelected: selectedPlan === plan.type, onSelect: () => onSelectPlan(plan.type) })))));
}
function PricingPlansTabs({ billingCycle, onChange }) {
    const indicatorRef = useRef(null);
    const tabsRef = useRef({
        monthly: null,
        yearly: null,
    });
    const cycleTabs = {
        monthly: "Monthly",
        yearly: "Yearly"
    };
    const tabNames = Object.keys(cycleTabs);
    function updateIndicator() {
        var _a;
        const activeTab = tabsRef.current[billingCycle];
        const indicator = indicatorRef.current;
        if (activeTab && indicator) {
            const rect = activeTab.getBoundingClientRect();
            const containerRect = (_a = activeTab.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
            if (containerRect) {
                const translateX = rect.left - containerRect.left;
                indicator.style.width = `${rect.width}px`;
                indicator.style.transform = `translateX(${translateX}px)`;
            }
        }
    }
    ;
    useEffect(() => {
        updateIndicator();
        window.addEventListener("resize", updateIndicator);
        return () => window.removeEventListener("resize", updateIndicator);
    }, [billingCycle]);
    return (React.createElement("div", { className: "pricing__tabs-wrapper" },
        React.createElement("div", { className: "pricing__tabs", role: "tablist", "aria-label": "Billing cycle" },
            tabNames.map((cycle) => {
                const id = `tab-${cycle}`;
                const ariaControls = `panel-${cycle}`;
                const tabActive = billingCycle === cycle ? " pricing__tab--active" : "";
                const className = `pricing__tab${tabActive}`;
                return (React.createElement("button", { key: cycle, ref: (el) => { tabsRef.current[cycle] = el; }, id: id, className: className, role: "tab", "aria-selected": billingCycle === cycle, "aria-controls": ariaControls, onClick: () => onChange(cycle) },
                    React.createElement("span", { className: "pricing__tab-text" }, cycleTabs[cycle])));
            }),
            React.createElement("div", { className: "pricing__tab-indicator", ref: indicatorRef }))));
}
class Utils {
    /**
     * Format a number to currency.
     * @param n number
     */
    static formatCurrency(n) {
        return new Intl.NumberFormat(this.LOCALE, {
            style: "currency",
            currency: this.CURRENCY,
            minimumFractionDigits: n === 0 ? 0 : 2
        }).format(n);
    }
}
Utils.LOCALE = "en-US";
Utils.CURRENCY = "USD";
;
;
;
;
style.css 
wget 'https://sme10.lists2.roe3.org/mdrone/pricing-plans/style.css'
View Content 
* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hue: 223;
  --sat: 10%;
  --white: hsl(0, 0%, 100%);
  --gray100: hsl(var(--hue), var(--sat), 90%);
  --gray200: hsl(var(--hue), var(--sat), 80%);
  --gray300: hsl(var(--hue), var(--sat), 70%);
  --gray350: hsl(var(--hue), var(--sat), 65%);
  --gray400: hsl(var(--hue), var(--sat), 60%);
  --gray450: hsl(var(--hue), var(--sat), 55%);
  --gray500: hsl(var(--hue), var(--sat), 50%);
  --gray550: hsl(var(--hue), var(--sat), 45%);
  --gray600: hsl(var(--hue), var(--sat), 40%);
  --gray650: hsl(var(--hue), var(--sat), 35%);
  --gray700: hsl(var(--hue), var(--sat), 30%);
  --gray800: hsl(var(--hue), var(--sat), 20%);
  --gray900: hsl(var(--hue), var(--sat), 10%);
  --black: hsl(0, 0%, 0%);
  --primary300: hsl(var(--hue), 90%, 70%);
  --trans-dur: 0.3s;
  --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
  color-scheme: light dark;
  font-size: clamp(0.625rem, 0.5947rem + 0.1294vw, 0.75rem);
}

body,
button,
input {
  color: light-dark(var(--gray900), var(--gray100));
  font: 1em/1.5 Montserrat, sans-serif;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

body {
  background-color: light-dark(var(--gray100), var(--black));
  display: grid;
  place-items: center;
  height: 100vh;
}

button,
label {
  -webkit-tap-highlight-color: transparent;
}

button {
  appearance: none;
}

main {
  padding: 3em 1.5em;
  width: 100%;
}

.pricing {
  background-color: light-dark(var(--white), var(--gray900));
  max-width: 36em;
  margin: 0 auto;
  padding: 3em;
  transition: background-color var(--trans-dur);
  width: 100%;
}
.pricing__heading {
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 1rem;
}
.pricing__tabs {
  box-shadow: 0 -1px 0 light-dark(var(--gray100), var(--gray800)) inset;
  display: flex;
  position: relative;
  width: 100%;
  transition: box-shadow var(--trans-dur);
}
.pricing__tabs-wrapper {
  margin-bottom: 3em;
  position: relative;
  width: 100%;
}
.pricing__tab {
  background: none;
  color: light-dark(var(--gray550), var(--gray450));
  cursor: pointer;
  display: block;
  font-size: 2em;
  outline: transparent;
  padding: 2.75rem 0;
  position: relative;
  transition: color var(--trans-dur);
  width: 100%;
  z-index: 1;
}
.pricing__tab-indicator {
  background-color: currentColor;
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  transition: transform var(--trans-dur) var(--trans-timing), width var(--trans-dur) var(--trans-timing);
  z-index: 0;
}
.pricing__tab-text {
  display: inline-block;
  transition: transform var(--trans-dur) var(--trans-timing);
}
.pricing__tab:focus-visible {
  box-shadow: 0 0 0 2px var(--primary300) inset;
}
.pricing__tab:hover {
  color: light-dark(var(--gray650), var(--gray350));
}
.pricing__tab--active, .pricing__tab--active:hover {
  color: light-dark(var(--black), var(--white));
}
.pricing__tab--active .pricing__tab-text {
  transform: scale(1.5);
}
.pricing__options {
  display: grid;
  gap: 2em;
}
.pricing-plan {
  box-shadow: 0 0 0 1px light-dark(var(--gray100), var(--gray800)) inset;
  cursor: pointer;
  transition: box-shadow var(--trans-dur);
}
.pricing-plan__header {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 2em;
}
.pricing-plan__input {
  cursor: pointer;
  overflow: hidden;
  position: fixed;
  top: -9px;
  left: -9px;
  width: 1px;
  height: 1px;
  appearance: none;
}
.pricing-plan:has(.pricing-plan__input:hover) {
  box-shadow: 0 0 0 1px light-dark(var(--gray300), var(--gray600)) inset;
}
.pricing-plan:has(.pricing-plan__input:checked) {
  box-shadow: 0 0 0 1px light-dark(var(--black), var(--white)) inset;
}
.pricing-plan__name, .pricing-plan__price {
  font-size: 3em;
  line-height: 1;
}
.pricing-plan__price {
  margin-inline-start: auto;
}
.pricing-plan__price-unit {
  font-size: 0.375em;
}
.pricing-plan__description {
  color: light-dark(var(--gray600), var(--gray300));
  font-size: 1.375em;
  transition: color var(--trans-dur);
}
.pricing-plan__button {
  background-color: light-dark(var(--black), var(--white));
  color: light-dark(var(--white), var(--gray900));
  cursor: pointer;
  font-size: 1.5em;
  font-weight: 500;
  outline: transparent;
  padding: 1.375rem 1.5rem;
  transition: background-color var(--trans-dur), color var(--trans-dur);
  width: 100%;
}
.pricing-plan__button:disabled {
  cursor: not-allowed;
}
.pricing-plan__button:focus-visible {
  box-shadow: 0 0 0 1px light-dark(var(--black), var(--white)) inset, 0 0 0 4px var(--primary300) inset;
}
.pricing-plan__button:hover {
  background-color: light-dark(var(--gray800), var(--gray200));
}
.pricing-plan__button-wrapper {
  height: 0;
  overflow: hidden;
  transition: height var(--trans-dur) var(--trans-timing);
}
.pricing-plan__label {
  cursor: pointer;
  display: block;
  padding: 2.5em 2em;
}