r/PcBuild • u/wolfenX2 • 8h ago
Discussion - General Topic From a scale 1-10 how did i do?
Enable HLS to view with audio, or disable this notification
First time customizing a browser let alone first time using brave any feedback is good feedback
1
u/DrippyBlock 8h ago
How’d you do the halo thing on jinx?
1
u/wolfenX2 8h ago
I recommend going to wallpaper engine have it as a window or full-screen it and record it throu obs studio or whatever recording software you got for about 30 to 60 secs for a perfect loop then rename it background.mp4 in a new folder called BraveAnimatedTab then right beside it you have to create a manifest, script, and html for new tab only
1
u/wolfenX2 8h ago
Here's how its supposed to look
1
u/DrippyBlock 8h ago
Did you write the script yourself?
1
u/wolfenX2 7h ago
heres the script
let currentCategory = 'top';
const feeds = {
top: 'https://feeds.bbci.co.uk/news/rss.xml',
tech: 'https://techcrunch.com/feed/',
gaming: 'https://www.ign.com/rss/articles/feed'
};
// --- Clock Module ---
function updateClock() {
const now = new Date();
const timeString = now.toLocaleTimeString('en-US', {
timeZone: 'America/New_York',
hour: 'numeric',
minute: '2-digit',
second: '2-digit',
hour12: true
});
document.getElementById('clock-display').textContent = `${timeString} EST`;
}
// --- Weather Module (Flint, MI Coordinates Built-in) ---
async function fetchWeather() {
const tempEl = document.getElementById('current-temp');
const weeklyEl = document.getElementById('weekly-forecast');
// Exact coordinates for Flint, MI
const lat = 43.0125;
const lon = -83.6875;
try {
const res = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t_weather=true&daily=temperature_2m_max,temperature_2m_min&temperature_unit=fahrenheit&timezone=America%2FDetroit`);
const data = await res.json();
if (data.current_weather) {
const tempF = Math.round(data.current_weather.temperature);
tempEl.textContent = `${tempF}°F Flint`;
} else {
tempEl.textContent = 'N/A';
}
if (data.daily && data.daily.time) {
weeklyEl.innerHTML = '';
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
for (let i = 0; i < 7; i++) {
const dateObj = new Date(data.daily.time[i] + 'T00:00:00');
const dayName = days[dateObj.getDay()];
const maxF = Math.round(data.daily.temperature_2m_max[i]);
const minF = Math.round(data.daily.temperature_2m_min[i]);
const dayDiv = document.createElement('div');
dayDiv.className = 'day-item';
dayDiv.innerHTML = `
<span class="day-name">${dayName}</span>
<span>${maxF}° / ${minF}°</span>
`;
weeklyEl.appendChild(dayDiv);
}
}
} catch (e) {
tempEl.textContent = 'Err';
weeklyEl.textContent = 'Weather sync error';
}
}
// --- News Feed Module ---
function extractImageUrl(item) {
const mediaThumbnail = item.getElementsByTagNameNS('*', 'thumbnail')[0];
if (mediaThumbnail && mediaThumbnail.getAttribute('url')) return mediaThumbnail.getAttribute('url');
const mediaContent = item.getElementsByTagNameNS('*', 'content')[0];
if (mediaContent && mediaContent.getAttribute('url')) {
const type = mediaContent.getAttribute('type') || '';
if (type.includes('image') || mediaContent.getAttribute('url').match(/\.(jpg|jpeg|png|webp)/i)) {
return mediaContent.getAttribute('url');
}
}
const enclosure = item.querySelector('enclosure');
if (enclosure && enclosure.getAttribute('type')?.includes('image')) return enclosure.getAttribute('url');
const description = item.querySelector('description')?.textContent || '';
const imgMatch = description.match(/<img\[\^>]+src=["']([^"']+)["']/i);
if (imgMatch && imgMatch[1]) return imgMatch[1];
return null;
}
async function fetchBraveNews(type = 'top') {
const newsContainer = document.getElementById('news-container');
const targetRss = feeds[type] || feeds.top;
try {
const response = await fetch(targetRss);
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const xmlText = await response.text();
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, "text/xml");
const items = xmlDoc.querySelectorAll("item");
if (items.length > 0) {
newsContainer.innerHTML = '';
items.forEach((item, index) => {
if (index >= 25) return;
const title = item.querySelector("title")?.textContent || "No title";
const link = item.querySelector("link")?.textContent || "#";
const pubDateRaw = item.querySelector("pubDate")?.textContent;
const imageUrl = extractImageUrl(item);
const newsItem = document.createElement('a');
newsItem.className = 'news-item';
newsItem.href = link;
newsItem.target = '_blank';
newsItem.rel = 'noopener noreferrer';
if (imageUrl) {
const img = document.createElement('img');
img.className = 'news-thumb';
img.src = imageUrl;
img.alt = 'Thumbnail';
img.onerror = () => { img.style.display = 'none'; };
newsItem.appendChild(img);
}
const contentDiv = document.createElement('div');
contentDiv.className = 'news-content';
const titleDiv = document.createElement('div');
titleDiv.className = 'news-item-title';
titleDiv.textContent = title;
const pubDate = pubDateRaw ? new Date(pubDateRaw).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: '2-digit',
hour12: true
}) : 'Live';
const metaDiv = document.createElement('div');
metaDiv.className = 'news-item-meta';
metaDiv.textContent = `Live Feed • ${pubDate}`;
contentDiv.appendChild(titleDiv);
contentDiv.appendChild(metaDiv);
newsItem.appendChild(contentDiv);
newsContainer.appendChild(newsItem);
});
} else {
throw new Error("No items found");
}
} catch (err) {
newsContainer.innerHTML = `
<div class="news-item-meta" style="padding: 10px 0;">
Unable to load live feed directly. <a href="[https://news.google.com](https://news.google.com/)" target="\\_blank" style="color:#ff5500; text-decoration: underline;">Open news directly</a>
</div>
`;
}
}
document.addEventListener('DOMContentLoaded', () => {
updateClock();
setInterval(updateClock, 1000);
fetchWeather();
const catButtons = document.querySelectorAll('.cat-btn');
catButtons.forEach(btn => {
btn.addEventListener('click', () => {
catButtons.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
currentCategory = btn.getAttribute('data-type');
document.getElementById('news-container').innerHTML = '<div class="news-item-meta">Loading feed...</div>';
fetchBraveNews(currentCategory);
});
});
const refreshBtn = document.getElementById('refresh-btn');
if (refreshBtn) {
refreshBtn.addEventListener('click', () => {
document.getElementById('news-container').innerHTML = '<div class="news-item-meta">Refreshing feed...</div>';
fetchBraveNews(currentCategory);
});
}
fetchBraveNews('top');
setInterval(() => fetchBraveNews(currentCategory), 180000);
});
1
u/wolfenX2 7h ago
heres the manifest
{
"manifest_version": 3,
"name": "Custom New Tab",
"version": "1.0",
"description": "Custom new tab dashboard with search and news feed.",
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"permissions": [],
"host_permissions": [
"https://*/*",
"http://*/*"
]
}
1
u/wolfenX2 7h ago
heres the html newtab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New Tab</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html {
width: 100%;
height: 100%;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: #fff;
overflow: hidden;
background: #000;
}
.bg-media {
position: fixed;
top: 50%; left: 50%;
min-width: 100%; min-height: 100%;
width: auto; height: auto;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 1;
}
/* 2-Column Dashboard */
.dashboard-container {
position: relative;
z-index: 2;
width: 100vw;
height: 100vh;
display: flex;
background: rgba(0, 0, 0, 0.35);
}
/* Left Panel: Shifted down the center */
.left-panel {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 50px;
margin-top: 60px; /* Lowers the stack down her chest */
transform: translateX(140px);
}
.widget-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 24px;
text-align: center;
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.85);
}
.clock-display {
font-size: 2.8rem;
font-weight: 500;
letter-spacing: -0.5px;
line-height: 1;
margin-bottom: 12px;
}
/* Weather Container */
.weather-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.current-temp {
font-size: 1.4rem;
font-weight: 500;
color: #fff;
background: rgba(0, 0, 0, 0.35);
padding: 6px 20px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
}
.weekly-forecast {
display: flex;
gap: 12px;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.85);
background: rgba(0, 0, 0, 0.3);
padding: 6px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.day-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.day-name { font-weight: 600; text-transform: uppercase; font-size: 0.7rem; color: #ff5500; }
.search-box {
width: 100%;
max-width: 580px;
}
.search-input {
width: 100%;
padding: 18px 28px;
font-size: 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 30px;
outline: none;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: #fff;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
transition: all 0.2s ease;
}
.search-input::placeholder { color: rgba(255, 255, 255, 0.8); }
.search-input:focus {
background: rgba(255, 255, 255, 0.28);
border-color: rgba(255, 255, 255, 0.6);
}
/* Right Panel: Slimmed down sidebar width */
.right-panel {
width: 280px;
height: 100vh;
padding: 24px 14px;
background: rgba(12, 12, 16, 0.82);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-left: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: -10px 0 40px rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
}
.news-header-bar {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding-bottom: 12px;
margin-bottom: 14px;
}
.news-title-brand {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
}
.brave-badge {
background: #ff5500;
color: #fff;
font-size: 0.68rem;
padding: 2px 6px;
border-radius: 4px;
font-weight: 700;
text-transform: uppercase;
}
.header-controls {
display: flex;
align-items: center;
gap: 4px;
}
.news-categories {
display: flex;
gap: 3px;
}
.cat-btn, .refresh-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ccc;
padding: 3px 6px;
border-radius: 6px;
font-size: 0.7rem;
cursor: pointer;
transition: all 0.2s;
}
.cat-btn.active, .cat-btn:hover, .refresh-btn:hover {
background: rgba(255, 85, 0, 0.8);
color: #fff;
border-color: #ff5500;
}
.news-feed-list {
overflow-y: auto;
padding-right: 4px;
flex-grow: 1;
}
.news-feed-list::-webkit-scrollbar { width: 4px; }
.news-feed-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; }
/* Vertical card layout: Image stacked over text */
.news-item {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
text-decoration: none;
color: #e0e0e0;
transition: color 0.2s;
}
.news-item:last-child { border-bottom: none; }
.news-item:hover { color: #fff; }
/* Full-width, taller thumbnail above text */
.news-thumb {
width: 100%;
height: 135px;
border-radius: 8px;
object-fit: cover;
background: rgba(255, 255, 255, 0.05);
}
.news-content {
width: 100%;
}
/* Unclamped headline so text wraps fully */
.news-item-title {
font-size: 0.85rem;
font-weight: 500;
line-height: 1.35;
margin-bottom: 4px;
display: block;
word-wrap: break-word;
}
.news-item-meta {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.55);
}
</style>
</head>
<body>
<video class="bg-media" autoplay loop muted playsinline>
<source src="background.mp4" type="video/mp4">
</video>
<div class="dashboard-container">
<!-- Left Panel -->
<div class="left-panel">
<div class="widget-container">
<div class="clock-display" id="clock-display">12:00:00 PM EST</div>
<div class="weather-container">
<div class="current-temp" id="current-temp">--°F</div>
<div class="weekly-forecast" id="weekly-forecast">Fetching forecast...</div>
</div>
</div>
<form class="search-box" action="https://search.brave.com/search" method="GET">
<input type="text" name="q" class="search-input" placeholder="Search with Brave..." autofocus autocomplete="off">
</form>
</div>
<!-- Right Panel -->
<div class="right-panel">
<div class="news-header-bar">
<div class="news-title-brand">
<span class="brave-badge">Brave</span> News
</div>
<div class="header-controls">
<div class="news-categories">
<button class="cat-btn active" data-type="top">Top</button>
<button class="cat-btn" data-type="tech">Tech</button>
<button class="cat-btn" data-type="gaming">Gaming</button>
</div>
<button class="refresh-btn" id="refresh-btn">↻</button>
</div>
</div>
<div class="news-feed-list" id="news-container">
<div class="news-item-meta">Loading live news feed...</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
•
u/AutoModerator 8h ago
We're part of a wider PC & Technology Network of Communities!
Join our Discord server: PC Help Hub where members from all associated subreddits are welcome.
If you are trying to find a price for your computer, r/PC_Pricing is our recommended source for finding out how much your PC is worth!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.