Skip to content

Commit e1ee33d

Browse files
author
TechStack Global
committed
feat: migrate entire site to premium Stitch Slate-950 UI with glassmorphism
1 parent 8e704f1 commit e1ee33d

23 files changed

+370
-91
lines changed

.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,10 @@ tmp/
2121
# Production build (if any)
2222
dist/
2323
build/
24+
25+
# Secrets
26+
.env
27+
.env.example
28+
29+
# App-specific temporary files
30+
claude_req.json

amazon-stack.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ <h1>The Amazon Stack</h1>
7777
</p>
7878
<div class="blog-grid" style="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
7979
<!-- MacBook Pro -->
80-
<div class="product-item glass-panel">
80+
<div class="product-item glass-card">
8181
<div class="product-thumbnail-wrapper">
8282
<img src="assets/images/macbook_hero.jpg" alt="Apple MacBook Pro M4 Pro — product thumbnail"
8383
class="product-thumbnail" loading="lazy">
@@ -92,7 +92,7 @@ <h3><a href="posts/apple-macbook-pro-m4-pro-review.html"
9292
</div>
9393

9494
<!-- Dell XPS 15 -->
95-
<div class="product-item glass-panel">
95+
<div class="product-item glass-card">
9696
<div class="product-thumbnail-wrapper">
9797
<img src="https://m.media-amazon.com/images/I/61Ks9X44eVL._AC_SL1181_.jpg"
9898
alt="Dell XPS 15 9530 — product thumbnail" class="product-thumbnail" loading="lazy">
@@ -107,7 +107,7 @@ <h3><a href="posts/dell-xps-15-9530-review.html" aria-label="Open review: Dell X
107107
</div>
108108

109109
<!-- Surface Laptop Studio 2 -->
110-
<div class="product-item glass-panel">
110+
<div class="product-item glass-card">
111111
<div class="product-thumbnail-wrapper">
112112
<img src="https://m.media-amazon.com/images/I/61LMopCIyTL._AC_SL1200_.jpg"
113113
alt="Surface Laptop Studio 2 — product thumbnail" class="product-thumbnail" loading="lazy">
@@ -122,7 +122,7 @@ <h3><a href="posts/surface-laptop-studio-2-review.html"
122122
</div>
123123

124124
<!-- Samsung SSD -->
125-
<div class="product-item glass-panel">
125+
<div class="product-item glass-card">
126126
<div class="product-thumbnail-wrapper">
127127
<img src="https://images-na.ssl-images-amazon.com/images/P/B0BHJJ9Y77.01._SCLZZZZZZZ_.jpg"
128128
alt="Samsung 990 PRO SSD 2TB — product thumbnail" class="product-thumbnail" loading="lazy">
@@ -137,7 +137,7 @@ <h3><a href="posts/samsung-990-pro-ssd-review.html"
137137
</div>
138138

139139
<!-- LG Monitor -->
140-
<div class="product-item glass-panel">
140+
<div class="product-item glass-card">
141141
<div class="product-thumbnail-wrapper">
142142
<img src="https://m.media-amazon.com/images/I/71R-r8EAn2L._AC_SL1500_.jpg"
143143
alt="LG 27US500-W 4K Monitor — product thumbnail" class="product-thumbnail" loading="lazy">
@@ -152,7 +152,7 @@ <h3><a href="posts/lg-27us500-w-ultrafine-monitor-review.html"
152152
</div>
153153

154154
<!-- Dell Dock -->
155-
<div class="product-item glass-panel">
155+
<div class="product-item glass-card">
156156
<div class="product-thumbnail-wrapper">
157157
<img src="assets/images/products/dell-sd25tb4-box.jpg"
158158
alt="Dell SD25TB4 Pro Dock — product thumbnail" class="product-thumbnail" loading="lazy">

blog.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ <h1>Guides</h1>
6060

6161
<div class="blog-grid" id="blog-posts-container">
6262
<!-- Best Remote Work Setup -->
63-
<div class="blog-card glass-panel" style="border-top: 3px solid var(--accent);">
63+
<div class="blog-card glass-card" style="border-top: 3px solid var(--accent);">
6464
<div class="blog-category">Ecosystem Guide</div>
6565
<h3><a href="posts/best-remote-work-setup-2026.html">The Best Remote Work Setup 2026</a></h3>
6666
<p>How we combine the perfect laptop, monitor, dock, and SSD into a single flawless home office.</p>
@@ -69,7 +69,7 @@ <h3><a href="posts/best-remote-work-setup-2026.html">The Best Remote Work Setup
6969
</div>
7070

7171
<!-- Best Premium Laptop Comparison -->
72-
<div class="blog-card glass-panel" style="border-top: 3px solid #00c3ff;">
72+
<div class="blog-card glass-card" style="border-top: 3px solid #00c3ff;">
7373
<div class="blog-category">Head-to-Head</div>
7474
<h3><a href="posts/best-premium-laptop-for-work-2026.html">Best Premium Laptop for Work 2026</a></h3>
7575
<p>MacBook Pro vs Dell XPS 15 vs Surface Laptop Studio 2. The ultimate high-end showdown.</p>
@@ -78,44 +78,44 @@ <h3><a href="posts/best-premium-laptop-for-work-2026.html">Best Premium Laptop f
7878
</div>
7979

8080
<!-- Explainers -->
81-
<div class="blog-card glass-panel">
81+
<div class="blog-card glass-card">
8282
<div class="blog-category">Storage Guide</div>
8383
<h3><a href="posts/is-samsung-990-pro-worth-it.html">Is Samsung 990 PRO Worth It?</a></h3>
8484
<p>Understanding PCIe Gen4 vs standard NVMe speeds for remote work and large file transfers.</p>
8585
<a href="posts/is-samsung-990-pro-worth-it.html" class="read-more">Read Explainer &rarr;</a>
8686
</div>
8787

88-
<div class="blog-card glass-panel">
88+
<div class="blog-card glass-card">
8989
<div class="blog-category">Display Guide</div>
9090
<h3><a href="posts/is-a-4k-monitor-worth-it.html">Is a 4K Monitor Worth It?</a></h3>
9191
<p>Discover why upgrading from 1080p to a 4K monitor might be your most important health upgrade.</p>
9292
<a href="posts/is-a-4k-monitor-worth-it.html" class="read-more">Read Explainer &rarr;</a>
9393
</div>
9494

95-
<div class="blog-card glass-panel">
95+
<div class="blog-card glass-card">
9696
<div class="blog-category">Workspace Setup</div>
9797
<h3><a href="posts/do-you-need-thunderbolt-dock.html">Do You Need a Thunderbolt Dock?</a></h3>
9898
<p>Stop crawling under your desk. Learn the difference between 40Gbps docks and basic USB-C hubs.</p>
9999
<a href="posts/do-you-need-thunderbolt-dock.html" class="read-more">Read Explainer &rarr;</a>
100100
</div>
101101

102102
<!-- Student Content -->
103-
<div class="blog-card glass-panel">
103+
<div class="blog-card glass-card">
104104
<div class="blog-category">Student Tech</div>
105105
<h3><a href="posts/best-laptops-for-students-2026.html">Best Laptops for Students 2026</a></h3>
106106
<p>The definitive guide to balancing performance with a student budget. From M1 Airs to Chromebooks.</p>
107107
<a href="posts/best-laptops-for-students-2026.html" class="read-more">Read Guide &rarr;</a>
108108
</div>
109109

110-
<div class="blog-card glass-panel">
110+
<div class="blog-card glass-card">
111111
<div class="blog-category">Budget Picks</div>
112112
<h3><a href="posts/budget-laptops-under-1000.html">Best Laptops Under $1000 (2026 Picks)</a></h3>
113113
<p>Elite performance without the sticker shock. We pick the machines with the best ROI for freelancers.
114114
</p>
115115
<a href="posts/budget-laptops-under-1000.html" class="read-more">Read Guide &rarr;</a>
116116
</div>
117117

118-
<div class="blog-card glass-panel">
118+
<div class="blog-card glass-card">
119119
<div class="blog-category">Study Setup</div>
120120
<h3><a href="posts/best-headphones-for-classes.html">Best Headphones for Online Classes</a></h3>
121121
<p>Focus and clarity. Vetted noise-cancelling picks for libraries and busy remote work environments.</p>

claude_api.py

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import os
2+
import argparse
3+
import json
4+
import subprocess
5+
from typing import Optional, List, Dict
6+
from dotenv import load_dotenv
7+
8+
# Load environment variables from .env file if it exists
9+
load_dotenv()
10+
11+
class ClaudeClient:
12+
"""
13+
A unified client for interacting with Anthropic's Claude 4.6 Sonnet model.
14+
Uses 'curl.exe' as a backend to bypass certain OS/Firewall restrictions that
15+
block Python networking libraries from sending API keys.
16+
"""
17+
def __init__(self, api_key: Optional[str] = None):
18+
self.api_key = api_key or os.environ.get("ANTHROPIC_API_KEY")
19+
if not self.api_key:
20+
raise ValueError(
21+
"Anthropic API Key not found. Please set 'ANTHROPIC_API_KEY' "
22+
"in your environment or .env file."
23+
)
24+
self.base_url = "https://api.anthropic.com/v1/messages"
25+
self.model = "claude-sonnet-4-6"
26+
27+
def _call_curl(self, data: dict, stream: bool = False) -> str:
28+
"""
29+
Calls the Anthropic API using system curl.exe.
30+
"""
31+
# Create a temporary JSON file for the data to avoid command line length issues
32+
temp_file = "claude_req.json"
33+
with open(temp_file, "w") as f:
34+
json.dump(data, f)
35+
36+
cmd = [
37+
"curl.exe", "-s", "-X", "POST", self.base_url,
38+
"-H", f"x-api-key: {self.api_key}",
39+
"-H", "anthropic-version: 2023-06-01",
40+
"-H", "content-type: application/json",
41+
"--data-binary", f"@{temp_file}"
42+
]
43+
44+
if stream:
45+
# For streaming, we need to parse the SSE output manually
46+
process = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True)
47+
full_text = []
48+
for line in process.stdout:
49+
if line.startswith("data: "):
50+
try:
51+
event_data = json.loads(line[6:])
52+
if event_data["type"] == "content_block_delta":
53+
text = event_data["delta"]["text"]
54+
print(text, end="", flush=True)
55+
full_text.append(text)
56+
except:
57+
pass
58+
print()
59+
os.remove(temp_file)
60+
return "".join(full_text)
61+
else:
62+
result = subprocess.run(cmd, capture_output=True, text=True)
63+
os.remove(temp_file)
64+
65+
if result.returncode != 0:
66+
return f"Error executing curl: {result.stderr}"
67+
68+
try:
69+
response_json = json.loads(result.stdout)
70+
if "error" in response_json:
71+
error_msg = response_json["error"]["message"]
72+
# Check for credit-related errors
73+
if "credit" in error_msg.lower() or "balance" in error_msg.lower():
74+
return f"CRITICAL ERROR: Credit Exhaustion. {error_msg}\nPlease top up your Anthropic account."
75+
return f"API Error: {error_msg}"
76+
return response_json["content"][0]["text"]
77+
except Exception as e:
78+
return f"Error parsing response: {e}\nRaw Output: {result.stdout}"
79+
80+
def ask(self, prompt: str, system_prompt: Optional[str] = None, max_tokens: int = 4096) -> str:
81+
data = {
82+
"model": self.model,
83+
"max_tokens": max_tokens,
84+
"messages": [{"role": "user", "content": prompt}]
85+
}
86+
if system_prompt:
87+
data["system"] = system_prompt
88+
return self._call_curl(data)
89+
90+
def stream_ask(self, prompt: str, system_prompt: Optional[str] = None):
91+
data = {
92+
"model": self.model,
93+
"max_tokens": 4096,
94+
"messages": [{"role": "user", "content": prompt}],
95+
"stream": True
96+
}
97+
if system_prompt:
98+
data["system"] = system_prompt
99+
return self._call_curl(data, stream=True)
100+
101+
def main():
102+
parser = argparse.ArgumentParser(description="Claude 4.6 Sonnet API Integration (Bypass Mode)")
103+
parser.add_argument("--test", action="store_true", help="Run a simple connectivity test")
104+
parser.add_argument("--prompt", type=str, help="Prompt to send to Claude")
105+
parser.add_argument("--stream", action="store_true", help="Stream the response")
106+
107+
args = parser.parse_args()
108+
109+
try:
110+
client = ClaudeClient()
111+
112+
if args.test:
113+
print(f"Testing connectivity to model: {client.model}...")
114+
response = client.ask("Confirm you are Sonnet 4.6 and our connection via curl is working.")
115+
print(f"\nResponse: {response}")
116+
elif args.prompt:
117+
if args.stream:
118+
client.stream_ask(args.prompt)
119+
else:
120+
response = client.ask(args.prompt)
121+
print(response)
122+
else:
123+
parser.print_help()
124+
125+
except Exception as e:
126+
print(f"Error: {e}")
127+
128+
if __name__ == "__main__":
129+
main()

index.html

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,16 +86,32 @@
8686
<span class="badge">Amazon Tech Authority</span>
8787
<h1>Make Smarter <br><span class="gradient-text">Tech Decisions.</span>
8888
</h1>
89-
<p class="hero-sub">No hype. No fluff. Just clear guidance on the tech that powers modern work.</p>
90-
<div class="hero-ctas">
89+
<p class="hero-sub" style="font-size: 1.25rem; max-width: 500px; margin-top: 1rem;">No hype. No fluff.
90+
Just clear guidance on the tech that powers modern work.</p>
91+
<div class="hero-ctas" style="margin-top: 2.5rem; display: flex; gap: 1rem;">
92+
<a href="amazon-stack.html" class="btn-primary"><i class="fa-brands fa-amazon"
93+
style="margin-right: 8px;"></i> View Top Picks</a>
94+
<a href="blog.html" class="btn-secondary">Read Guides</a>
9195
</div>
9296
</div>
93-
<!-- Abstract futuristic graphic representation -->
97+
98+
<!-- Hero Featured Review Card -->
9499
<div class="hero-visual">
95-
<div class="glass-card abstract-card card-1"><i class="fa-solid fa-gauge-high"></i> Performance</div>
96-
<div class="glass-card abstract-card card-2"><i class="fa-solid fa-eye"></i> Clarity
100+
<div class="glass-card"
101+
style="padding: 2.5rem; max-width: 420px; border-top: 4px solid var(--accent); position: relative; z-index: 2; box-shadow: 0 20px 40px rgba(0,0,0,0.4);">
102+
<div
103+
style="font-size: 0.8rem; color: var(--accent); font-weight: bold; text-transform: uppercase; margin-bottom: 1rem;">
104+
<i class="fa-solid fa-star"></i> Featured Review</div>
105+
<h3 style="font-size: 1.6rem; margin-bottom: 1rem; line-height: 1.3;">Samsung 990 Pro SSD: The
106+
Performance King</h3>
107+
<p style="color: var(--text-secondary); font-size: 1rem; margin-bottom: 2rem; line-height: 1.6;">
108+
Unrivaled sequential speeds up to 7,450 MB/s and premium reliability for modern, high-intensity
109+
workflows.</p>
110+
<a href="posts/samsung-990-pro-ssd-review.html" class="read-more"
111+
style="display: inline-flex; align-items: center; font-weight: 700;">Read Full Review <i
112+
class="fa-solid fa-arrow-right"
113+
style="margin-left: 8px; transition: transform 0.2s;"></i></a>
97114
</div>
98-
<div class="glass-card abstract-card card-3"><i class="fa-solid fa-shield-halved"></i> Reliability</div>
99115
</div>
100116
</section>
101117

migrate_posts.py

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import os
2+
import glob
3+
4+
posts_dir = r"c:\Users\PMLS\Desktop\Youtube Shorts\b2b_blog\posts"
5+
html_files = glob.glob(os.path.join(posts_dir, "*.html"))
6+
7+
for file_path in html_files:
8+
with open(file_path, 'r', encoding='utf-8') as f:
9+
content = f.read()
10+
11+
# Apply standard premium styling to all posts
12+
# Replace glass-panel with glass-card
13+
content = content.replace('class="blog-card glass-panel"', 'class="blog-card glass-card"')
14+
content = content.replace('class="tldr-verdict glass-panel"', 'class="tldr-verdict glass-card"')
15+
content = content.replace('class="glass-panel"', 'class="glass-card"')
16+
17+
# Ensure affiliate links have the FA amazon icon and bold styling if not already present
18+
# We will just let the global CSS handle it via `.affiliate-btn` which is already applied.
19+
20+
# Save back
21+
with open(file_path, 'w', encoding='utf-8') as f:
22+
f.write(content)
23+
24+
print(f"Migrated {len(html_files)} files to premium Stitch layout components.")

posts/apple-macbook-pro-m4-pro-review.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
<span class="badge">Elite Performance</span>
106106
<h1 class="post-title">Review: Apple MacBook Pro M4 Pro (The All-Day Powerhouse)</h1>
107107

108-
<div class="tldr-verdict glass-panel"
108+
<div class="tldr-verdict glass-card"
109109
style="padding: 1.5rem; border-left: 4px solid var(--accent); background: rgba(0,255,157,0.05); margin-bottom: 2rem;">
110110
<strong>TL;DR Verdict:</strong> The MacBook Pro M4 Pro is the ultimate powerhouse for anyone whose work
111111
demands zero compromises. Whether you are a student editing high-resolution video, a freelancer
@@ -122,7 +122,7 @@ <h1 class="post-title">Review: Apple MacBook Pro M4 Pro (The All-Day Powerhouse)
122122

123123
<div class="audience-grid"
124124
style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;">
125-
<div class="glass-panel" style="padding: 1.5rem; border-top: 3px solid #00ff9d;">
125+
<div class="glass-card" style="padding: 1.5rem; border-top: 3px solid #00ff9d;">
126126
<h4 style="margin-bottom: 0.5rem;"><i class="fa-solid fa-check-circle" style="color: #00ff9d;"></i>
127127
Who is this for?</h4>
128128
<ul style="font-size: 0.9rem; list-style: none; padding: 0;">
@@ -131,7 +131,7 @@ <h4 style="margin-bottom: 0.5rem;"><i class="fa-solid fa-check-circle" style="co
131131
<li>💻 Power users & Serious professionals</li>
132132
</ul>
133133
</div>
134-
<div class="glass-panel" style="padding: 1.5rem; border-top: 3px solid #ff4b2b;">
134+
<div class="glass-card" style="padding: 1.5rem; border-top: 3px solid #ff4b2b;">
135135
<h4 style="margin-bottom: 0.5rem;"><i class="fa-solid fa-times-circle" style="color: #ff4b2b;"></i>
136136
Who should skip?</h4>
137137
<ul style="font-size: 0.9rem; list-style: none; padding: 0;">

0 commit comments

Comments
 (0)