-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
274 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
|
|
||
| import SwiftUI | ||
|
|
||
| struct GlowbyScreen: View { | ||
| static let enabled = true | ||
| static let title = "Pricing Plans" | ||
| @Environment(\.horizontalSizeClass) var horizontalSizeClass | ||
|
|
||
| var body: some View { | ||
| VStack { | ||
| Spacer() | ||
| HStack { | ||
| Spacer() | ||
| ScrollView(.vertical, showsIndicators: false) { | ||
| if horizontalSizeClass == .compact { | ||
| VStack(spacing: 16) { | ||
| PricingPlanCard(title: "Free", price: "$0", subtitle: "to start", features: ["Brainstorm with Glowby", "App creation powered by GPT-4", "Claude 3.5 Sorrel", "Llama 3.1 and Gemini 1.5 Pro"], buttonTitle: "Get Started") | ||
| PricingPlanCard(title: "Creator", price: "$20", subtitle: "Everything in Free, plus", features: ["Unlimited projects", "Unlimited code exports", "All boilerplates", "$10 monthly credits for AI usage"], buttonTitle: "Start Free Trial") | ||
| PricingPlanCard(title: "Pro", price: "$40", subtitle: "Everything in Creator, plus", features: ["Early feature access", "Priority support", "Testflight access", "$20 monthly credits for AI usage"], buttonTitle: "Start Free Trial") | ||
| } | ||
| .padding(.horizontal, 16) | ||
| } else { | ||
| HStack(spacing: 16) { | ||
| PricingPlanCard(title: "Free", price: "$0", subtitle: "to start", features: ["Brainstorm with Glowby", "App creation powered by GPT-4", "Claude 3.5 Sorrel", "Llama 3.1 and Gemini 1.5 Pro"], buttonTitle: "Get Started") | ||
| PricingPlanCard(title: "Creator", price: "$20", subtitle: "Everything in Free, plus", features: ["Unlimited projects", "Unlimited code exports", "All boilerplates", "$10 monthly credits for AI usage"], buttonTitle: "Start Free Trial") | ||
| PricingPlanCard(title: "Pro", price: "$40", subtitle: "Everything in Creator, plus", features: ["Early feature access", "Priority support", "Testflight access", "$20 monthly credits for AI usage"], buttonTitle: "Start Free Trial") | ||
| } | ||
| .padding(.horizontal, 32) | ||
| } | ||
| } | ||
| .frame(maxWidth: .infinity) | ||
| Spacer() | ||
| } | ||
| Spacer() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| struct PricingPlanCard: View { | ||
| let title: String | ||
| let price: String | ||
| let subtitle: String | ||
| let features: [String] | ||
| let buttonTitle: String | ||
|
|
||
| var body: some View { | ||
| VStack { | ||
| Text(title) | ||
| .font(.headline) | ||
| .fontWeight(.bold) | ||
| Text(price) | ||
| .font(.largeTitle) | ||
| .fontWeight(.bold) | ||
| Text(subtitle) | ||
| .font(.subheadline) | ||
| ForEach(features, id: \.self) { feature in | ||
| Text(feature) | ||
| .font(.body) | ||
| } | ||
| Button(action: { | ||
| print("Button tapped") | ||
| }) { | ||
| Text(buttonTitle) | ||
| .font(.headline) | ||
| .padding() | ||
| .background(Color.blue) | ||
| .foregroundColor(.white) | ||
| .cornerRadius(8) | ||
| } | ||
| } | ||
| .padding() | ||
| .background(Color.green.opacity(0.2)) | ||
| .cornerRadius(16) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
|
|
||
| <html> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Pricing Plans</title> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | ||
| <style> | ||
| .plan { | ||
| @apply bg-green-100 rounded-lg p-8 border border-gray-200; | ||
| } | ||
| .plan:hover { | ||
| @apply shadow-md; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | ||
| <div class="flex flex-wrap -mx-4"> | ||
| <div class="w-full md:w-1/3 xl:w-1/3 p-4"> | ||
| <div class="plan"> | ||
| <h2 class="text-lg font-bold mb-2">Free</h2> | ||
| <p class="text-3xl font-bold mb-2">$0 <span class="text-sm">/ month</span></p> | ||
| <p class="text-sm text-gray-600 mb-4">to start</p> | ||
| <p class="text-sm text-gray-600 mb-4">All you need to create apps.</p> | ||
| <ul> | ||
| <li class="text-sm text-gray-600 mb-2">Brainstorm with Glowby</li> | ||
| <li class="text-sm text-gray-600 mb-2">App creation powered by GPT-4</li> | ||
| <li class="text-sm text-gray-600 mb-2">Claude 3.5 Sorrel</li> | ||
| <li class="text-sm text-gray-600 mb-2">Llama 3.1 and Gemini 1.5 Pro</li> | ||
| </ul> | ||
| <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Get Started</button> | ||
| </div> | ||
| </div> | ||
| <div class="w-full md:w-1/3 xl:w-1/3 p-4"> | ||
| <div class="plan"> | ||
| <h2 class="text-lg font-bold mb-2">Creator</h2> | ||
| <p class="text-3xl font-bold mb-2">$20 <span class="text-sm">/ month</span></p> | ||
| <p class="text-sm text-gray-600 mb-4">Everything in Free, plus.</p> | ||
| <ul> | ||
| <li class="text-sm text-gray-600 mb-2">Unlimited projects</li> | ||
| <li class="text-sm text-gray-600 mb-2">Unlimited code exports</li> | ||
| <li class="text-sm text-gray-600 mb-2">All boilerplates</li> | ||
| <li class="text-sm text-gray-600 mb-2">$10 monthly credits for AI usage</li> | ||
| </ul> | ||
| <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Start Free Trial</button> | ||
| </div> | ||
| </div> | ||
| <div class="w-full md:w-1/3 xl:w-1/3 p-4"> | ||
| <div class="plan"> | ||
| <h2 class="text-lg font-bold mb-2">Pro</h2> | ||
| <p class="text-3xl font-bold mb-2">$40 <span class="text-sm">/ month</span></p> | ||
| <p class="text-sm text-gray-600 mb-4">Everything in Creator, plus.</p> | ||
| <ul> | ||
| <li class="text-sm text-gray-600 mb-2">Early feature access</li> | ||
| <li class="text-sm text-gray-600 mb-2">Priority support</li> | ||
| <li class="text-sm text-gray-600 mb-2">Testflight access</li> | ||
| <li class="text-sm text-gray-600 mb-2">$20 monthly credits for AI usage</li> | ||
| </ul> | ||
| <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Start Free Trial</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> | ||
| <script> | ||
| // Add event listener to buttons | ||
| const buttons = document.querySelectorAll('button'); | ||
| buttons.forEach(button => { | ||
| button.addEventListener('click', () => { | ||
| alert('Button clicked!'); | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| <html> | ||
| <head> | ||
| <title>My SF & Silicon Valley Notes</title> | ||
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet"> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| <style> | ||
| body { | ||
| font-family: 'Poppins', sans-serif; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body class="bg-gray-100"> | ||
| <div class="container mx-auto p-8"> | ||
| <h1 class="text-3xl font-bold mb-6">My SF & Silicon Valley Notes</h1> | ||
|
|
||
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | ||
| <div> | ||
| <h2 class="text-xl font-semibold mb-4">Categories</h2> | ||
| <ul class="space-y-2"> | ||
| <li>Landmarks</li> | ||
| <li>Technology</li> | ||
| <li>Attractions</li> | ||
| <li>Education</li> | ||
| <li>Transportation</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="col-span-2"> | ||
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | ||
| <div class="bg-white rounded-lg shadow-md p-6"> | ||
| <img src="https://picsum.photos/400/200?random=1" alt="Golden Gate Bridge" class="w-full h-40 object-cover rounded-t-lg"> | ||
| <h3 class="text-lg font-medium mt-4">Golden Gate Bridge</h3> | ||
| <p class="text-gray-600">Iconic suspension bridge and symbol of San Francisco.</p> | ||
| <div class="mt-4 flex justify-end"> | ||
| <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none">Delete</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="bg-white rounded-lg shadow-md p-6"> | ||
| <img src="https://picsum.photos/400/200?random=2" alt="Silicon Valley Tech Hub" class="w-full h-40 object-cover rounded-t-lg"> | ||
| <h3 class="text-lg font-medium mt-4">Silicon Valley Tech Hub</h3> | ||
| <p class="text-gray-600">Home to many start-ups and global technology companies.</p> | ||
| <div class="mt-4 flex justify-end"> | ||
| <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none">Delete</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="bg-white rounded-lg shadow-md p-6"> | ||
| <img src="https://picsum.photos/400/200?random=3" alt="Fisherman's Wharf" class="w-full h-40 object-cover rounded-t-lg"> | ||
| <h3 class="text-lg font-medium mt-4">Fisherman's Wharf</h3> | ||
| <p class="text-gray-600">Popular waterfront neighborhood with seafood restaurants.</p> | ||
| <div class="mt-4 flex justify-end"> | ||
| <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none">Delete</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="bg-white rounded-lg shadow-md p-6"> | ||
| <img src="https://picsum.photos/400/200?random=4" alt="Stanford University" class="w-full h-40 object-cover rounded-t-lg"> | ||
| <h3 class="text-lg font-medium mt-4">Stanford University</h3> | ||
| <p class="text-gray-600">Prestigious private research university in Silicon Valley.</p> | ||
| <div class="mt-4 flex justify-end"> | ||
| <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none">Delete</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="bg-white rounded-lg shadow-md p-6"> | ||
| <img src="https://picsum.photos/400/200?random=5" alt="Cable Cars" class="w-full h-40 object-cover rounded-t-lg"> | ||
| <h3 class="text-lg font-medium mt-4">Cable Cars</h3> | ||
| <p class="text-gray-600">San Francisco's historic cable car system.</p> | ||
| <div class="mt-4 flex justify-end"> | ||
| <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none">Delete</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="bg-white rounded-lg shadow-md p-6"> | ||
| <img src="https://picsum.photos/400/200?random=6" alt="Apple Park" class="w-full h-40 object-cover rounded-t-lg"> | ||
| <h3 class="text-lg font-medium mt-4">Apple Park</h3> | ||
| <p class="text-gray-600">Circular "spaceship" campus of Apple Inc. in Cupertino.</p> | ||
| <div class="mt-4 flex justify-end"> | ||
| <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none">Delete</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="mt-8"> | ||
| <h2 class="text-xl font-semibold mb-4">Add New Note</h2> | ||
| <form> | ||
| <div class="mb-4"> | ||
| <label for="title" class="block text-gray-700 text-sm font-bold mb-2">Title</label> | ||
| <input type="text" id="title" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> | ||
| </div> | ||
|
|
||
| <div class="mb-4"> | ||
| <label for="content" class="block text-gray-700 text-sm font-bold mb-2">Content</label> | ||
| <textarea id="content" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea> | ||
| </div> | ||
|
|
||
| <div class="mb-4"> | ||
| <label for="category" class="block text-gray-700 text-sm font-bold mb-2">Category</label> | ||
| <select id="category" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> | ||
| <option value="">Select Category</option> | ||
| <option value="Landmarks">Landmarks</option> | ||
| <option value="Technology">Technology</option> | ||
| <option value="Attractions">Attractions</option> | ||
| <option value="Education">Education</option> | ||
| <option value="Transportation">Transportation</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <div class="flex justify-end"> | ||
| <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none">Add Note</button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| // Add JavaScript for interactive features here | ||
| </script> | ||
| </body> | ||
| </html> |