diff --git a/get-pricing.js b/get-pricing.js new file mode 100644 index 00000000..ed077959 --- /dev/null +++ b/get-pricing.js @@ -0,0 +1,41 @@ +// Global variable to store pricing data +window.pricingData = { + "eventTypePricing": { + "Post": 0.005, + "User": 0.01 + }, + "requestTypePricing": { + "Write": 0.01 + }, + "defaultCost": 0.0 +}; + +// // Fetch pricing data from X console API +// async function fetchPricingData() { +// try { +// const response = await fetch('https://console.x.com/api/credits/pricing', { +// method: 'GET', +// headers: { +// 'dtab-local': '/s/datadelivery-foundation/dev-portal-api:https=>/srv#/staging1/pdxa/datadelivery-foundation/dev-portal-api:https' +// } +// }); + +// if (!response.ok) { +// throw new Error(`HTTP error! status: ${response.status}`); +// } + +// const data = await response.json(); +// console.log('Pricing data:', data); + +// // Set the global variable +// window.pricingData = data; + +// return data; +// } catch (error) { +// console.error('Error fetching pricing data:', error); +// window.pricingData = null; +// } +// } + +// Execute the function when the script loads +fetchPricingData(); diff --git a/pilot.mdx b/pilot.mdx new file mode 100644 index 00000000..b321fc5d --- /dev/null +++ b/pilot.mdx @@ -0,0 +1,590 @@ +--- +title: X API Pay-Per-Use Pricing Pilot +sidebarTitle: "Overview" +mode: 'custom' +--- + +import { Button } from '/snippets/button.mdx'; + +
+ {/* Pattern overlay */} +
+ {/* Gradient overlay */} +
+ {/* Content */} +
+
+ X API Pay-Per-Use Pricing Pilot +
+

+ Pay only for the API requests you make with our new credit-based system. No upfront fees, no monthly caps. +

+
+ This pilot is currently available to a select group of developers. +
+
+ +
+
+
+ +
+
+ Key Benefits +
+

+ Discover why our pay-per-use model is better for developers of all sizes +

+ + + + + + +
+ +
+ {/* Pattern overlay */} +
+ {/* Gradient overlay */} +
+ {/* Content */} +
+
+ How the Pay-Per-Use Model Works +
+

+ This model uses a credits system where you buy credits upfront and deduct them based on usage. +

+ +
+
+
+ +
+
+

Purchase Credits

+
+ Buy from the Developer Console Billing tab. +
+
+
+
+ +
+
+
+
+ +
+
+
+

Track Usage

+
+ Monitor in real-time via the Dashboard. +
+
+
+
+ +
+
+
+ +
+
+

Rate Limits

+
+ Applied per endpoint but more generous than before. +
+
+
+
+
+
+ Credits can be purchased in the Developer Console. Free credits may also be awarded through promotions or vouchers. +
+
+
+ +
+
+
+ Credit Consumption Details +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ResourceDescriptionCost per UnitExample
+ Post Reads + + Each Post object returned in responses + $0.005 + Fetching a timeline with 10 posts: $0.05 +
+ User Reads + + Each User object returned in responses + $0.01 + Fetching a List with 10 members: $0.10 +
+ Post Writes + + Requests to POST /2/tweets + $0.01 + Creating a new post: $0.01
+
+ Like Writes + + Requests to POST /2/users/{id}/likes + $0.01 + Liking a post: $0.01
+
+ Follow Writes + + Requests to POST /2/users/{id}/following + $0.01 + Following a user: $0.01
+
+
+
+ +
+ Future updates may add credit costs for more objects (e.g. DMs, Likes) or operations (e.g. DELETE/PUT) based on feedback. +
+
+ +
+ {/* Pattern overlay */} +
+ {/* Gradient overlay */} +
+ {/* Content */} +
+
+ Comparison to the Old Subscription Model +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureSubscription Model (Old)Pay-Per-Use Model (New)
+ Pricing Structure + + Fixed monthly fees: Free ($0), Basic ($200), Pro ($5,000) + + Usage-based: Purchase credits as needed; no subscriptions +
+ Rate Limits + + Tier-dependent (higher = better) + + Less restrictive overall; per endpoint +
+ Resource Caps + + Monthly cap on objects + + No cap; $0.005 per Post, $0.01 per User +
+ Write Costs + + Included in subscription + + $0.01 for Posts, Likes, Follows +
+
+
+ +
+
+ Getting Started with Pay-Per-Use +
+
+
+
+
+
1
+
+
+

Sign Up

+
If you’re in the beta/pilot, log in to the Developer Console.
+
+
+
+
+
2
+
+
+

Purchase Credits

+
Go to the Billing > Credits tab to buy credits using a saved payment method.
+
+
+
+
+
3
+
+
+

Create an App

+
In the Apps tab, create a new app to get API keys and credentials.
+
+
+
+
+
4
+
+
+

Make Requests

+
Use the API as usual—credits will be deducted automatically.
+
+
+
+
+
5
+
+
+

Monitor Usage

+
Check the Dashboard or Usage tab for real-time analytics.
+
+
+
+
+
+ +
+ {/* Pattern overlay */} +
+ {/* Gradient overlay */} +
+ {/* Content */} +
+

Ready to join the pilot?

+

Start using the pay-per-use model today.

+
+ +
diff --git a/style.css b/style.css index ccb111cf..bf840d02 100644 --- a/style.css +++ b/style.css @@ -47,7 +47,7 @@ td[data-label="Free Limit"] strong { } #assistant-entry span::before { content: "Ask Grok"; - font-size: 0.875rem; + font-size: 0.6rem; line-height: 1.5rem; } #assistant-entry svg { @@ -71,7 +71,7 @@ td[data-label="Free Limit"] strong { } .chat-assistant-sheet-header span.font-semibold::before { content: "Grok"; - font-size: 0.875rem; + font-size: 0.6rem; font-weight: 600; } .chat-assistant-sheet-header svg.size-5.text-primary.dark\:text-primary-light { @@ -107,5 +107,728 @@ td[data-label="Free Limit"] strong { } #sidebar-content { - padding-left: 2rem; -} \ No newline at end of file + padding-left: 1rem; +} + +@media (max-width: 640px) { + .steps { + flex-direction: column !important; + gap: 2rem !important; + } + + .step { + padding-right: 0 !important; + } +} + +@media (max-width: 768px) { + .footer-section { + flex-direction: column; + justify-content: center; + padding-left: 1rem; + padding-right: 1rem; + height: auto; + gap: 2rem; + } + + .footer-text { + text-align: center; + font-size: 1.25rem; + } + + .footer-buttons { + justify-content: center; + gap: 1rem; + flex-wrap: wrap; + } + + .footer-buttons .not-prose.group button { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + font-size: 0.9rem; + } +} +/* Pilot page responsive styles */ +.pilot-hero { + min-height: 24rem; +} + +.pilot-section { + padding-top: 4rem; + padding-bottom: 4rem; +} + +.pilot-section-title { + font-size: 20px; +} + +.pilot-table-container { + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +.pilot-table { + min-width: 600px; +} + +@media (max-width: 640px) { + .pilot-hero { + min-height: 16rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + } + + .pilot-section { + padding-top: 2rem; + padding-bottom: 2rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + } + + .pilot-section-title { + font-size: 14px; + } + + .pilot-table th, + .pilot-table td { + padding: 0.3rem; + font-size: 0.6rem; + } + + .text-hero { + font-size: 1.25rem !important; + line-height: 1.2; + } +} + +@media (max-width: 480px) { + .pilot-hero { + min-height: 16rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + } + + .pilot-section { + padding-top: 2rem; + padding-bottom: 2rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + } + + .pilot-section-title { + font-size: 14px; + } + + .pilot-table th, + .pilot-table td { + padding: 0.3rem; + font-size: 0.6rem; + } + + .text-hero { + font-size: 1.25rem !important; + line-height: 1.1; + } +} + +/* Enhanced mobile styles for very small screens */ +@media (max-width: 375px) { + .pilot-hero { + min-height: 16rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .pilot-section { + padding-top: 1.5rem; + padding-bottom: 1.5rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .pilot-section-title { + font-size: 14px; + } + + .pilot-table th, + .pilot-table td { + padding: 0.375rem; + font-size: 0.75rem; + } + + .text-hero { + font-size: 1.25rem !important; + line-height: 1.1; + } + + /* Mobile button scaling */ + .pilot-hero button, + .footer-buttons button { + padding: 0.75rem 1rem !important; + font-size: 0.875rem !important; + } + + /* Mobile footer improvements */ + .footer-section { + padding-left: 1rem !important; + padding-right: 1rem !important; + height: auto !important; + min-height: 12rem; + } + + .footer-text { + font-size: 1.25rem !important; + margin-bottom: 1rem; + } + + .footer-buttons { + flex-direction: column !important; + gap: 0.75rem !important; + width: 100%; + } + + .footer-buttons .not-prose.group { + width: 100%; + } + + .footer-buttons .not-prose.group button { + width: 100% !important; + padding: 0.75rem 1rem !important; + font-size: 0.875rem !important; + } +} + +@media (max-width: 320px) { + .pilot-hero { + min-height: 14rem; + padding-left: 0.25rem; + padding-right: 0.25rem; + } + + .pilot-section { + padding-top: 1rem; + padding-bottom: 1rem; + padding-left: 0.25rem; + padding-right: 0.25rem; + } + + .pilot-section-title { + font-size: 12px; + } + + .pilot-table th, + .pilot-table td { + padding: 0.2rem; + font-size: 0.6rem; + } + + .text-hero { + font-size: 1.125rem !important; + line-height: 1.1; + } + + /* Extra small mobile button scaling */ + .pilot-hero button, + .footer-buttons button { + padding: 0.5rem 0.75rem !important; + font-size: 0.8rem !important; + } + + /* Extra small mobile footer */ + .footer-section { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; + min-height: 10rem; + } + + .footer-text { + font-size: 1rem !important; + margin-bottom: 0.75rem; + } + + .footer-buttons .not-prose.group button { + padding: 0.5rem 0.75rem !important; + font-size: 0.8rem !important; + } +} + +/* Mobile table improvements */ +@media (max-width: 640px) { + .pilot-table-container { + margin-left: -0.5rem; + margin-right: -0.5rem; + border-radius: 0; + } + + .pilot-table { + min-width: 380px; + } + + .pilot-table th:first-child, + .pilot-table td:first-child { + position: sticky; + left: 0; + background-color: rgba(0, 0, 0, 0.9); + z-index: 1; + } +} + +@media (max-width: 480px) { + .pilot-table-container { + margin-left: -0.75rem; + margin-right: -0.75rem; + } + + .pilot-table { + min-width: 380px; + } +} + +@media (max-width: 375px) { + .pilot-table-container { + margin-left: -0.5rem; + margin-right: -0.5rem; + } + + .pilot-table { + min-width: 320px; + } +} + +@media (max-width: 320px) { + .pilot-table-container { + margin-left: -0.25rem; + margin-right: -0.25rem; + } + + .pilot-table { + min-width: 320px; + } +} + +/* Mobile card improvements */ +@media (max-width: 640px) { + .pilot-section .card { + margin-bottom: 1rem; + } +} + +/* Mobile info boxes */ +@media (max-width: 640px) { + .pilot-section .info { + font-size: 0.6rem; + padding: 0.3rem; + } +} + +@media (max-width: 375px) { + .pilot-section .info { + font-size: 0.6rem; + padding: 0.3rem; + } +} + +/* Mobile button styles */ +@media (max-width: 640px) { + .pilot-hero-button, + .pilot-footer-button { + padding: 0.75rem 1.5rem !important; + font-size: 1rem !important; + } +} + +@media (max-width: 480px) { + .pilot-hero-button, + .pilot-footer-button { + padding: 0.625rem 1.25rem !important; + font-size: 0.9rem !important; + } +} + +@media (max-width: 375px) { + .pilot-hero-button, + .pilot-footer-button { + padding: 0.5rem 1rem !important; + font-size: 0.85rem !important; + } +} + +@media (max-width: 320px) { + .pilot-hero-button, + .pilot-footer-button { + padding: 0.4rem 0.8rem !important; + font-size: 0.8rem !important; + } +} + +/* Mobile paragraph text scaling */ +@media (max-width: 640px) { + .pilot-hero p { + font-size: 14px !important; + } +} + +@media (max-width: 480px) { + .pilot-hero p { + font-size: 13px !important; + } +} + +@media (max-width: 375px) { + .pilot-hero p { + font-size: 12px !important; + } +} + +@media (max-width: 320px) { + .pilot-hero p { + font-size: 11px !important; + } +} + +/* Mobile footer bottom padding to prevent buttons touching screen edge */ +@media (max-width: 768px) { + .footer-section { + padding-bottom: 2rem !important; + } +} + +@media (max-width: 640px) { + .footer-section { + padding-bottom: 2.5rem !important; + } +} + +@media (max-width: 480px) { + .footer-section { + padding-bottom: 3rem !important; + } +} + +@media (max-width: 375px) { + .footer-section { + padding-bottom: 3.5rem !important; + } +} + +@media (max-width: 320px) { + .footer-section { + padding-bottom: 4rem !important; + } +} + +/* Additional mobile body padding for very small screens */ +@media (max-width: 480px) { + body { + padding-bottom: 1rem !important; + } +} + +@media (max-width: 375px) { + body { + padding-bottom: 1.5rem !important; + } +} + +@media (max-width: 320px) { + body { + padding-bottom: 2rem !important; + } +} + +/* Pilot page specific bottom spacing */ +@media (max-width: 768px) { + .pilot-section:last-of-type { + margin-bottom: 2rem; + } +} + +@media (max-width: 640px) { + .pilot-section:last-of-type { + margin-bottom: 2.5rem; + } +} + +@media (max-width: 480px) { + .pilot-section:last-of-type { + margin-bottom: 3rem; + } +} + +@media (max-width: 375px) { + .pilot-section:last-of-type { + margin-bottom: 3.5rem; + } +} + +@media (max-width: 320px) { + .pilot-section:last-of-type { + margin-bottom: 4rem; + } +} + +/* Ensure footer has proper spacing from content */ +@media (max-width: 768px) { + .footer-section { + margin-top: 2rem !important; + } +} + +@media (max-width: 480px) { + .footer-section { + margin-top: 2.5rem !important; + } +} + +@media (max-width: 375px) { + .footer-section { + margin-top: 3rem !important; + } +} + +@media (max-width: 320px) { + .footer-section { + margin-top: 3.5rem !important; + } +} + +/* iPhone 16 Pro and Pro Max specific styles */ +@media (max-width: 430px) and (min-width: 376px) { + .pilot-hero { + min-height: 18rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + } + + .pilot-section { + padding-top: 2rem; + padding-bottom: 2rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + } + + .pilot-section-title { + font-size: 15px; + } + + .pilot-table th, + .pilot-table td { + padding: 0.4rem; + font-size: 0.75rem; + } + + .text-hero { + font-size: 1.4rem !important; + line-height: 1.2; + } + + .pilot-hero-button, + .pilot-footer-button { + padding: 0.6rem 1.2rem !important; + font-size: 0.9rem !important; + } + + .pilot-hero p { + font-size: 13px !important; + } + + .footer-section { + padding-bottom: 3rem !important; + margin-top: 2.5rem !important; + } + + .footer-text { + font-size: 1.2rem !important; + } + + .footer-buttons .not-prose.group button { + padding: 0.6rem 1.2rem !important; + font-size: 0.9rem !important; + } +} + +/* Enhanced table scaling for all mobile sizes */ +@media (max-width: 640px) { + .pilot-table { + min-width: 380px; + } + + .pilot-table th, + .pilot-table td { + padding: 0.4rem; + font-size: 0.75rem; + } +} + +@media (max-width: 480px) { + .pilot-table { + min-width: 380px; + } + + .pilot-table th, + .pilot-table td { + padding: 0.3rem; + font-size: 0.6rem; + } +} + +@media (max-width: 430px) { + .pilot-table { + min-width: 320px; + } + + .pilot-table th, + .pilot-table td { + padding: 0.2rem; + font-size: 0.65rem; + } +} + +@media (max-width: 375px) { + .pilot-table { + min-width: 320px; + } + + .pilot-table th, + .pilot-table td { + padding: 0.2rem; + font-size: 0.6rem; + } +} + +@media (max-width: 320px) { + .pilot-table { + min-width: 280px; + } + + .pilot-table th, + .pilot-table td { + padding: 0.15rem; + font-size: 0.55rem; + } +} + +/* More aggressive table container margins for better scrolling */ +@media (max-width: 640px) { + .pilot-table-container { + margin-left: -1rem; + margin-right: -1rem; + border-radius: 0; + } +} + +@media (max-width: 480px) { + .pilot-table-container { + margin-left: -1.25rem; + margin-right: -1.25rem; + } +} + +@media (max-width: 430px) { + .pilot-table-container { + margin-left: -1.5rem; + margin-right: -1.5rem; + } +} + +@media (max-width: 375px) { + .pilot-table-container { + margin-left: -1.75rem; + margin-right: -1.75rem; + } +} + +@media (max-width: 320px) { + .pilot-table-container { + margin-left: -2rem; + margin-right: -2rem; + } +} + +/* iPhone 16 Pro Max specific (430px width) */ +@media (max-width: 430px) { + .pilot-hero { + min-height: 17rem; + } + + .pilot-section { + padding-top: 1.75rem; + padding-bottom: 1.75rem; + } + + .pilot-section-title { + font-size: 14px; + } + + .text-hero { + font-size: 1.3rem !important; + } + + .pilot-hero p { + font-size: 12px !important; + } + + .footer-section { + padding-bottom: 3.5rem !important; + margin-top: 3rem !important; + } + + .footer-text { + font-size: 1.1rem !important; + } +} + +/* Table content optimization for mobile */ +@media (max-width: 640px) { + .pilot-table th:not(:first-child), + .pilot-table td:not(:first-child) { + max-width: 120px; + word-wrap: break-word; + overflow-wrap: break-word; + } +} + +@media (max-width: 480px) { + .pilot-table th:not(:first-child), + .pilot-table td:not(:first-child) { + max-width: 100px; + } +} + +@media (max-width: 430px) { + .pilot-table th:not(:first-child), + .pilot-table td:not(:first-child) { + max-width: 80px; + } +} + +@media (max-width: 375px) { + .pilot-table th:not(:first-child), + .pilot-table td:not(:first-child) { + max-width: 70px; + } +} + +@media (max-width: 320px) { + .pilot-table th:not(:first-child), + .pilot-table td:not(:first-child) { + max-width: 60px; + } +} + +/* Better table header styling for mobile */ +@media (max-width: 640px) { + .pilot-table th { + font-weight: 600; + background-color: rgba(0, 0, 0, 0.8); + } +} + +/* Improved table row spacing */ +@media (max-width: 640px) { + .pilot-table tr { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } +} diff --git a/tally.js b/tally.js new file mode 100644 index 00000000..d1603f90 --- /dev/null +++ b/tally.js @@ -0,0 +1 @@ +var d=document,w="https://tally.so/widgets/embed.js",v=function(){"undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((function(e){e.src=e.dataset.tallySrc}))};if("undefined"!=typeof Tally)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);} \ No newline at end of file