AkramOS/
│── home.htmlAkramOS/
│── home.html
<title>Akram OS — Home</title>
<!-- ستايل الويدجت -->
<link rel="stylesheet" href="css/widgets.css">
<style>
body {
margin: 0;
padding: 0;
background: url('wallpapers/bg1.jpg') center/cover no-repeat fixed;
font-family: sans-serif;
direction: rtl;
color: #fff;
}
/* الشريط العلوي */
.top-bar {
display: flex;
justify-content: space-between;
padding: 15px 20px;
font-size: 18px;
backdrop-filter: blur(12px);
background: rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* شبكة الويدجت */
.widgets-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 90px;
gap: 12px;
padding: 15px;
margin-bottom: 90px;
}
/* Dock */
.dock {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
justify-content: center;
gap: 25px;
align-items: center;
backdrop-filter: blur(18px);
background: rgba(0,0,0,0.35);
border-top: 1px solid rgba(255,255,255,0.08);
}
.dock-icon {
width: 55px;
height: 55px;
border-radius: 16px;
background: rgba(255,255,255,0.08);
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
transition: 0.25s;
}
.dock-icon:active {
transform: scale(0.9);
}
</style>
<!-- الشريط العلوي -->
<div class="top-bar">
<div id="top-time">--:--</div>
<div id="top-battery">--%</div>
</div>
<!-- شبكة الويدجت -->
<div class="widgets-grid">
<!-- الساعة -->
<div class="widget size-2x1 enter" data-id="clock">
<div>🕒 الساعة</div>
<div id="clock-text" style="font-size: 26px; margin-top: 5px;">--:--</div>
</div>
<!-- الطقس -->
<div class="widget size-2x1 enter" data-id="weather">
<div id="w-weather-icon" style="font-size: 32px;">☀️</div>
<div id="w-temp">--°C</div>
<div id="w-city">--</div>
<div id="w-desc">--</div>
</div>
<!-- التعدين -->
<div class="widget size-2x1 enter" data-id="mining">
<div>⛏️ التعدين</div>
<div id="m-status">--</div>
<div id="m-rate">-- π/h</div>
<div id="m-last">--</div>
</div>
<!-- الرصيد -->
<div class="widget size-2x1 enter" data-id="balance">
<div>💰 الرصيد</div>
<div id="balance-text" style="font-size: 24px;">-- π</div>
</div>
<!-- المزاج -->
<div class="widget size-2x1 enter" data-id="mood">
<div>🧠 المزاج</div>
<div id="mood-text">--</div>
<div id="mood-score">--</div>
</div>
</div>
<!-- Dock -->
<div class="dock">
<div class="dock-icon">📞</div>
<div class="dock-icon">💬</div>
<div class="dock-icon">🌐</div>
<div class="dock-icon">📷</div>
</div>
<!-- محرك الويدجت -->
<script src="engine/AkramWidgetsEngine.js"></script>
<!-- تحديث الساعة -->
<script>
function updateClock() {
const now = new Date();
document.getElementById("clock-text").textContent =
now.getHours().toString().padStart(2, "0") + ":" +
now.getMinutes().toString().padStart(2, "0");
document.getElementById("top-time").textContent =
document.getElementById("clock-text").textContent;
}
setInterval(updateClock, 1000);
updateClock();
</script>
<!-- تحديث البطارية للشريط العلوي -->
<script>
setInterval(() => {
try {
document.getElementById("top-battery").textContent =
AkramOS.getBattery() + "%";
} catch {}
}, 2000);
</script>
│── manifest.json
{
"name": "AkramOS Launcher",
"short_name": "AkramOS",
"version": "1.0.0",
"description": "A fast, adaptive, widget-based launcher built for Pi Browser.",
"start_url": "/home.html",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#000000",
"orientation": "portrait",
"icons": [
{
"src": "icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"permissions": {
"geolocation": true,
"notifications": false,
"camera": false,
"microphone": false
}
}
│── css/
│ └── widgets.css
widget {
position: relative;
border-radius: 18px;
background: rgba(15,15,25,0.65);
backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.06);
padding: 10px;
color: #fff;
transition: 0.25s ease;
}
.widgets-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 90px;
gap: 10px;
padding: 10px;
}
.highlighted { box-shadow: 0 0 20px rgba(138,43,226,0.5); }
.mem-happy { transform: scale(1.03); }
.mem-sad { opacity: 0.7; filter: grayscale(0.4); }
.ui-happy .widget { transform: scale(1.02); }
.ui-tired .widget { opacity: 0.85; }
.ui-focused .widget { box-shadow: 0 0 20px rgba(77,166,255,0.3); }
.ui-stressed .widget { animation: shake 0.3s infinite; }
.ui-calm .widget { filter: blur(0.2px); }
@Keyframes shake {
0% { transform: translateX(0); }
50% { transform: translateX(3px); }
100% { transform: translateX(0); }
}
│── js/
│ └── AkramWidgetsEngine.js
const AkramWidgetsEngine = {
widgets: [],
dom: {},
cached: {},
lastUpdate: 0,
state: {
battery: 0,
mining: { active: false, rate: 0, last: "" },
balance: 0,
weather: { icon: "", temp: 0, desc: "", city: "" },
mood: { mood: "", score: 0 },
energy: {},
memory: {}
},
config: {
production: true,
enableMemory: true,
enableMood: true,
updateInterval: 1500 // تحديث كل 1.5 ثانية
},
init() {
this.cacheWidgets();
this.cacheDOM();
this.initState();
this.initEvents();
this.preloadValues();
this.updateLoop();
this.memoryCleaner();
},
cacheWidgets() {
this.widgets = Array.from(document.querySelectorAll(".widget"));
},
cacheDOM() {
this.dom = {
battery: document.getElementById("battery-text"),
mStatus: document.getElementById("m-status"),
mRate: document.getElementById("m-rate"),
mLast: document.getElementById("m-last"),
balance: document.getElementById("balance-text"),
wIcon: document.getElementById("w-weather-icon"),
wTemp: document.getElementById("w-temp"),
wDesc: document.getElementById("w-desc"),
wCity: document.getElementById("w-city"),
moodText: document.getElementById("mood-text"),
moodScore: document.getElementById("mood-score")
};
},
initState() {
this.widgets.forEach(w => {
const id = w.dataset.id;
if (!this.state.energy[id]) this.state.energy[id] = { value: 50 };
if (!this.state.memory[id]) this.state.memory[id] = { short: [] };
});
},
initEvents() {
document.addEventListener("click", e => {
const w = e.target.closest(".widget");
if (!w) return;
const id = w.dataset.id;
this.addShortMemory(id, "click");
this.highlight(id);
});
},
preloadValues() {
try {
this.cached = {
battery: AkramOS.getBattery(),
miningStatus: AkramOS.miningStatus(),
miningRate: AkramOS.miningRate(),
miningLast: AkramOS.miningLast(),
balance: AkramOS.getBalance(),
weatherIcon: AkramOS.weatherIcon(),
weatherTemp: AkramOS.weatherTemp(),
weatherDesc: AkramOS.weatherDesc(),
weatherCity: AkramOS.weatherCity(),
mood: AkramOS.mood(),
moodScore: AkramOS.moodScore()
};
} catch {}
},
updateLoop() {
const now = Date.now();
if (now - this.lastUpdate < this.config.updateInterval) {
return requestAnimationFrame(() => this.updateLoop());
}
this.lastUpdate = now;
this.updateBattery();
this.updateMining();
this.updateBalance();
this.updateWeather();
this.updateMood();
this.updateMemoryView();
this.applyUIEffects();
requestAnimationFrame(() => this.updateLoop());
},
updateBattery() {
try {
const level = this.cached.battery = AkramOS.getBattery();
this.state.battery = level;
this.dom.battery.textContent = level + "%";
} catch {}
},
updateMining() {
try {
const status = this.cached.miningStatus = AkramOS.miningStatus();
const rate = this.cached.miningRate = AkramOS.miningRate();
const last = this.cached.miningLast = AkramOS.miningLast();
this.state.mining = { active: status === "Active", rate, last };
this.dom.mStatus.textContent = status;
this.dom.mRate.textContent = rate + " π/h";
this.dom.mLast.textContent = last;
} catch {}
},
updateBalance() {
try {
const bal = this.cached.balance = AkramOS.getBalance();
this.state.balance = parseFloat(bal);
this.dom.balance.textContent = bal + " π";
} catch {}
},
updateWeather() {
try {
const icon = this.cached.weatherIcon = AkramOS.weatherIcon();
const temp = this.cached.weatherTemp = AkramOS.weatherTemp();
const desc = this.cached.weatherDesc = AkramOS.weatherDesc();
const city = this.cached.weatherCity = AkramOS.weatherCity();
this.state.weather = { icon, temp, desc, city };
this.dom.wIcon.textContent = icon;
this.dom.wTemp.textContent = temp + "°C";
this.dom.wDesc.textContent = desc;
this.dom.wCity.textContent = city;
} catch {}
},
updateMood() {
if (!this.config.enableMood) return;
try {
const mood = this.cached.mood = AkramOS.mood();
const score = this.cached.moodScore = AkramOS.moodScore();
this.state.mood = { mood, score };
this.dom.moodText.textContent = mood;
this.dom.moodScore.textContent = score;
} catch {}
},
addShortMemory(id, event) {
if (!this.config.enableMemory) return;
const mem = this.state.memory[id].short;
mem.push({ event, time: Date.now() });
if (mem.length > 5) mem.shift();
},
updateMemoryView() {
if (!this.config.enableMemory) return;
this.widgets.forEach(w => {
const id = w.dataset.id;
const mem = this.state.memory[id].short;
w.classList.toggle("mem-happy", mem.length >= 3);
w.classList.toggle("mem-sad", mem.length === 0);
});
},
applyUIEffects() {
const mood = this.state.mood.mood;
if (mood) {
document.body.className = "";
document.body.classList.add("ui-" + mood);
}
},
highlight(id) {
this.widgets.forEach(w => w.classList.remove("highlighted"));
const w = this.widgets.find(x => x.dataset.id === id);
if (w) w.classList.add("highlighted");
},
memoryCleaner() {
setInterval(() => {
for (let id in this.state.memory) {
const mem = this.state.memory[id].short;
if (mem.length > 5) mem.splice(0, mem.length - 5);
}
}, 600000); // كل 10 دقائق
}
};
document.addEventListener("DOMContentLoaded", () => {
AkramWidgetsEngine.init();
});
│── icons/
├── icon-192.png
└── icon-512.png
<title>Akram OS — Home</title>
<!-- ستايل الويدجت -->
<link rel="stylesheet" href="css/widgets.css">
<style>
body {
margin: 0;
padding: 0;
background: url('wallpapers/bg1.jpg') center/cover no-repeat fixed;
font-family: sans-serif;
direction: rtl;
color: #fff;
}
/* الشريط العلوي */
.top-bar {
display: flex;
justify-content: space-between;
padding: 15px 20px;
font-size: 18px;
backdrop-filter: blur(12px);
background: rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* شبكة الويدجت */
.widgets-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 90px;
gap: 12px;
padding: 15px;
margin-bottom: 90px;
}
/* Dock */
.dock {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
justify-content: center;
gap: 25px;
align-items: center;
backdrop-filter: blur(18px);
background: rgba(0,0,0,0.35);
border-top: 1px solid rgba(255,255,255,0.08);
}
.dock-icon {
width: 55px;
height: 55px;
border-radius: 16px;
background: rgba(255,255,255,0.08);
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
transition: 0.25s;
}
.dock-icon:active {
transform: scale(0.9);
}
</style>
<!-- الشريط العلوي -->
<div class="top-bar">
<div id="top-time">--:--</div>
<div id="top-battery">--%</div>
</div>
<!-- شبكة الويدجت -->
<div class="widgets-grid">
<!-- الساعة -->
<div class="widget size-2x1 enter" data-id="clock">
<div>🕒 الساعة</div>
<div id="clock-text" style="font-size: 26px; margin-top: 5px;">--:--</div>
</div>
<!-- الطقس -->
<div class="widget size-2x1 enter" data-id="weather">
<div id="w-weather-icon" style="font-size: 32px;">☀️</div>
<div id="w-temp">--°C</div>
<div id="w-city">--</div>
<div id="w-desc">--</div>
</div>
<!-- التعدين -->
<div class="widget size-2x1 enter" data-id="mining">
<div>⛏️ التعدين</div>
<div id="m-status">--</div>
<div id="m-rate">-- π/h</div>
<div id="m-last">--</div>
</div>
<!-- الرصيد -->
<div class="widget size-2x1 enter" data-id="balance">
<div>💰 الرصيد</div>
<div id="balance-text" style="font-size: 24px;">-- π</div>
</div>
<!-- المزاج -->
<div class="widget size-2x1 enter" data-id="mood">
<div>🧠 المزاج</div>
<div id="mood-text">--</div>
<div id="mood-score">--</div>
</div>
</div>
<!-- Dock -->
<div class="dock">
<div class="dock-icon">📞</div>
<div class="dock-icon">💬</div>
<div class="dock-icon">🌐</div>
<div class="dock-icon">📷</div>
</div>
<!-- محرك الويدجت -->
<script src="engine/AkramWidgetsEngine.js"></script>
<!-- تحديث الساعة -->
<script>
function updateClock() {
const now = new Date();
document.getElementById("clock-text").textContent =
now.getHours().toString().padStart(2, "0") + ":" +
now.getMinutes().toString().padStart(2, "0");
document.getElementById("top-time").textContent =
document.getElementById("clock-text").textContent;
}
setInterval(updateClock, 1000);
updateClock();
</script>
<!-- تحديث البطارية للشريط العلوي -->
<script>
setInterval(() => {
try {
document.getElementById("top-battery").textContent =
AkramOS.getBattery() + "%";
} catch {}
}, 2000);
</script>
│── manifest.json
{
"name": "AkramOS Launcher",
"short_name": "AkramOS",
"version": "1.0.0",
"description": "A fast, adaptive, widget-based launcher built for Pi Browser.",
"start_url": "/home.html",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#000000",
"orientation": "portrait",
"icons": [
{
"src": "icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"permissions": {
"geolocation": true,
"notifications": false,
"camera": false,
"microphone": false
}
}
│── css/
│ └── widgets.css
widget {
position: relative;
border-radius: 18px;
background: rgba(15,15,25,0.65);
backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.06);
padding: 10px;
color: #fff;
transition: 0.25s ease;
}
.widgets-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 90px;
gap: 10px;
padding: 10px;
}
.highlighted { box-shadow: 0 0 20px rgba(138,43,226,0.5); }
.mem-happy { transform: scale(1.03); }
.mem-sad { opacity: 0.7; filter: grayscale(0.4); }
.ui-happy .widget { transform: scale(1.02); }
.ui-tired .widget { opacity: 0.85; }
.ui-focused .widget { box-shadow: 0 0 20px rgba(77,166,255,0.3); }
.ui-stressed .widget { animation: shake 0.3s infinite; }
.ui-calm .widget { filter: blur(0.2px); }
@Keyframes shake {
0% { transform: translateX(0); }
50% { transform: translateX(3px); }
100% { transform: translateX(0); }
}
│── js/
│ └── AkramWidgetsEngine.js
const AkramWidgetsEngine = {
widgets: [],
dom: {},
cached: {},
lastUpdate: 0,
state: {
battery: 0,
mining: { active: false, rate: 0, last: "" },
balance: 0,
weather: { icon: "", temp: 0, desc: "", city: "" },
mood: { mood: "", score: 0 },
energy: {},
memory: {}
},
config: {
production: true,
enableMemory: true,
enableMood: true,
updateInterval: 1500 // تحديث كل 1.5 ثانية
},
init() {
this.cacheWidgets();
this.cacheDOM();
this.initState();
this.initEvents();
this.preloadValues();
this.updateLoop();
this.memoryCleaner();
},
cacheWidgets() {
this.widgets = Array.from(document.querySelectorAll(".widget"));
},
cacheDOM() {
this.dom = {
battery: document.getElementById("battery-text"),
mStatus: document.getElementById("m-status"),
mRate: document.getElementById("m-rate"),
mLast: document.getElementById("m-last"),
balance: document.getElementById("balance-text"),
wIcon: document.getElementById("w-weather-icon"),
wTemp: document.getElementById("w-temp"),
wDesc: document.getElementById("w-desc"),
wCity: document.getElementById("w-city"),
moodText: document.getElementById("mood-text"),
moodScore: document.getElementById("mood-score")
};
},
initState() {
this.widgets.forEach(w => {
const id = w.dataset.id;
if (!this.state.energy[id]) this.state.energy[id] = { value: 50 };
if (!this.state.memory[id]) this.state.memory[id] = { short: [] };
});
},
initEvents() {
document.addEventListener("click", e => {
const w = e.target.closest(".widget");
if (!w) return;
const id = w.dataset.id;
this.addShortMemory(id, "click");
this.highlight(id);
});
},
preloadValues() {
try {
this.cached = {
battery: AkramOS.getBattery(),
miningStatus: AkramOS.miningStatus(),
miningRate: AkramOS.miningRate(),
miningLast: AkramOS.miningLast(),
balance: AkramOS.getBalance(),
weatherIcon: AkramOS.weatherIcon(),
weatherTemp: AkramOS.weatherTemp(),
weatherDesc: AkramOS.weatherDesc(),
weatherCity: AkramOS.weatherCity(),
mood: AkramOS.mood(),
moodScore: AkramOS.moodScore()
};
} catch {}
},
updateLoop() {
const now = Date.now();
if (now - this.lastUpdate < this.config.updateInterval) {
return requestAnimationFrame(() => this.updateLoop());
}
this.lastUpdate = now;
this.updateBattery();
this.updateMining();
this.updateBalance();
this.updateWeather();
this.updateMood();
this.updateMemoryView();
this.applyUIEffects();
requestAnimationFrame(() => this.updateLoop());
},
updateBattery() {
try {
const level = this.cached.battery = AkramOS.getBattery();
this.state.battery = level;
this.dom.battery.textContent = level + "%";
} catch {}
},
updateMining() {
try {
const status = this.cached.miningStatus = AkramOS.miningStatus();
const rate = this.cached.miningRate = AkramOS.miningRate();
const last = this.cached.miningLast = AkramOS.miningLast();
this.state.mining = { active: status === "Active", rate, last };
this.dom.mStatus.textContent = status;
this.dom.mRate.textContent = rate + " π/h";
this.dom.mLast.textContent = last;
} catch {}
},
updateBalance() {
try {
const bal = this.cached.balance = AkramOS.getBalance();
this.state.balance = parseFloat(bal);
this.dom.balance.textContent = bal + " π";
} catch {}
},
updateWeather() {
try {
const icon = this.cached.weatherIcon = AkramOS.weatherIcon();
const temp = this.cached.weatherTemp = AkramOS.weatherTemp();
const desc = this.cached.weatherDesc = AkramOS.weatherDesc();
const city = this.cached.weatherCity = AkramOS.weatherCity();
this.state.weather = { icon, temp, desc, city };
this.dom.wIcon.textContent = icon;
this.dom.wTemp.textContent = temp + "°C";
this.dom.wDesc.textContent = desc;
this.dom.wCity.textContent = city;
} catch {}
},
updateMood() {
if (!this.config.enableMood) return;
try {
const mood = this.cached.mood = AkramOS.mood();
const score = this.cached.moodScore = AkramOS.moodScore();
this.state.mood = { mood, score };
this.dom.moodText.textContent = mood;
this.dom.moodScore.textContent = score;
} catch {}
},
addShortMemory(id, event) {
if (!this.config.enableMemory) return;
const mem = this.state.memory[id].short;
mem.push({ event, time: Date.now() });
if (mem.length > 5) mem.shift();
},
updateMemoryView() {
if (!this.config.enableMemory) return;
this.widgets.forEach(w => {
const id = w.dataset.id;
const mem = this.state.memory[id].short;
w.classList.toggle("mem-happy", mem.length >= 3);
w.classList.toggle("mem-sad", mem.length === 0);
});
},
applyUIEffects() {
const mood = this.state.mood.mood;
if (mood) {
document.body.className = "";
document.body.classList.add("ui-" + mood);
}
},
highlight(id) {
this.widgets.forEach(w => w.classList.remove("highlighted"));
const w = this.widgets.find(x => x.dataset.id === id);
if (w) w.classList.add("highlighted");
},
memoryCleaner() {
setInterval(() => {
for (let id in this.state.memory) {
const mem = this.state.memory[id].short;
if (mem.length > 5) mem.splice(0, mem.length - 5);
}
}, 600000); // كل 10 دقائق
}
};
document.addEventListener("DOMContentLoaded", () => {
AkramWidgetsEngine.init();
});
│── icons/
├── icon-192.png
└── icon-512.png
AkramOS/
<title>Akram OS — Home</title>│── home.htmlAkramOS/
│── home.html
.widgets-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 90px;
gap: 10px;
padding: 10px;
}
.highlighted { box-shadow: 0 0 20px rgba(138,43,226,0.5); }
.mem-happy { transform: scale(1.03); }
.mem-sad { opacity: 0.7; filter: grayscale(0.4); }
.ui-happy .widget { transform: scale(1.02); }
.ui-tired .widget { opacity: 0.85; }
.ui-focused .widget { box-shadow: 0 0 20px rgba(77,166,255,0.3); }
.ui-stressed .widget { animation: shake 0.3s infinite; }
.ui-calm .widget { filter: blur(0.2px); }
@Keyframes shake {
0% { transform: translateX(0); }
50% { transform: translateX(3px); }
100% { transform: translateX(0); }
}
│── js/
│ └── AkramWidgetsEngine.js
const AkramWidgetsEngine = {
widgets: [],
dom: {},
cached: {},
lastUpdate: 0,
};
document.addEventListener("DOMContentLoaded", () => {
<title>Akram OS — Home</title>AkramWidgetsEngine.init();
});
│── icons/
├── icon-192.png
└── icon-512.png
.widgets-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 90px;
gap: 10px;
padding: 10px;
}
.highlighted { box-shadow: 0 0 20px rgba(138,43,226,0.5); }
.mem-happy { transform: scale(1.03); }
.mem-sad { opacity: 0.7; filter: grayscale(0.4); }
.ui-happy .widget { transform: scale(1.02); }
.ui-tired .widget { opacity: 0.85; }
.ui-focused .widget { box-shadow: 0 0 20px rgba(77,166,255,0.3); }
.ui-stressed .widget { animation: shake 0.3s infinite; }
.ui-calm .widget { filter: blur(0.2px); }
@Keyframes shake {
0% { transform: translateX(0); }
50% { transform: translateX(3px); }
100% { transform: translateX(0); }
}
│── js/
│ └── AkramWidgetsEngine.js
const AkramWidgetsEngine = {
widgets: [],
dom: {},
cached: {},
lastUpdate: 0,
};
document.addEventListener("DOMContentLoaded", () => {
AkramWidgetsEngine.init();
});
│── icons/
├── icon-192.png
└── icon-512.png