Skip to content

Commit

Permalink
Update main page
Browse files Browse the repository at this point in the history
* Show last version on head of site
* Convert numbers to persian numbers
* Add new font for codes
* Add new example from GitHub gist
* Add new design for sidebar
* Improve Code Quality
  • Loading branch information
kian-ahmadian committed Oct 15, 2023
1 parent 15833c1 commit 66e0a43
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 26 deletions.
64 changes: 60 additions & 4 deletions assets/css/v2.css
Original file line number Diff line number Diff line change
@@ -1,14 +1,27 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,800;0,900;1,300;1,700;1,800;1,900&display=swap');

body {
background-color: rgb(0 52 45);
}

#wrapper {
text-align: center;
align-items: center;
color: #05ffe4;
}

#bale-image {
margin-top: 20px;
margin-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
}

#title {
font-family: Roboto, serif;
font-weight: bold;
}

#short-description, .lang-description {
Expand All @@ -17,6 +30,14 @@ body {
margin-left: 10px;
}

#more-info {
color: rgb(5,231,231);
}

.help-text {
color: #abfe06;
}

.link {
color: rgba(225, 255, 121, 0.58);
cursor: pointer;
Expand Down Expand Up @@ -120,6 +141,12 @@ p {
display: block;
}

.gist {
margin-left: 20px;
margin-right: 20px;
border-radius: 7px;
}

.developers-p p:hover {background-color: rgb(128, 214, 214);border-radius: 5px;}
.developers-p .link:hover {color: rgba(252, 19, 19, 0.78);}
.developers:hover .developers-p {display: block;}
Expand Down Expand Up @@ -152,6 +179,10 @@ p {
margin-left: 10px;
}

.hidden {
display: none;
}

footer {
padding: 10px;
}
Expand All @@ -160,14 +191,19 @@ footer p {
font-family: Vazir, serif;
}

footer p b, code {
font-family: Poppins, sans-serif;
font-size: 15px;
}

@media (width >= 600px) {
#title {
font-size: 60px;
}
#short-description {
font-size: 32.5px;
}
.lang-description, footer p, #alert-box p {
.lang-description, footer p, footer p b, #alert-box p {
font-size: 19px;
}
.v2-button {
Expand All @@ -182,7 +218,7 @@ footer p {
#short-description {
font-size: 26.5px;
}
.lang-description, footer p {
.lang-description, footer p, footer p b {
font-size: 15px;
}
.v2-button, #alert-box p {
Expand All @@ -197,7 +233,7 @@ footer p {
#short-description {
font-size: 21.5px;
}
.lang-description, footer p {
.lang-description, footer p, footer p b {
font-size: 14px;
}
.v2-button, #alert-box p {
Expand All @@ -215,10 +251,30 @@ footer p {
#short-description {
font-size: 16px;
}
.lang-description, footer p {
.lang-description, footer p, footer p b, footer p b {
font-size: 13px;
}
.v2-button, #alert-box p {
font-size: 14px;
}
}

::-webkit-scrollbar {
width: 7px;
height: 7px;
background-color: transparent;
border-radius: 5px;
}

::-webkit-scrollbar-corner {
border-radius: 5px;
}

::-webkit-scrollbar-thumb {
background-color: #2a2a30;
border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
background-color: #407e99;
}
52 changes: 47 additions & 5 deletions assets/js/v2.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,53 @@
let address = { github: "github.com/python-bale-bot/python-bale-bot", github_examples: "github.com/python-bale-bot/python-bale-bot/tree/master/examples", documention: "docs.python-bale-bot.ir", bale: "bale.ai", dev_kian_ahmadian: "github.com/kian-ahmadian", dev_amin_shahrabi: "github.com/AminShahrabi", dev_kasra_gamasaee: "github.com/kasragamasaee", pypi: "pypi.org/project/python-bale-bot/", bale_bot_developers: "dev.bale.ai", bale_api_problems: "github.com/python-bale-bot/python-bale-bot/discussions/24", changelog: "python-bale-bot.ir/changelog" }
const address = { github: "github.com/python-bale-bot/python-bale-bot", github_examples: "github.com/python-bale-bot/python-bale-bot/tree/master/examples", documention: "docs.python-bale-bot.ir", bale: "bale.ai", dev_kian_ahmadian: "github.com/kian-ahmadian", dev_amin_shahrabi: "github.com/AminShahrabi", dev_kasra_gamasaee: "github.com/kasragamasaee", pypi: "pypi.org/project/python-bale-bot/", bale_bot_developers: "dev.bale.ai", bale_api_problems: "github.com/python-bale-bot/python-bale-bot/discussions/24", changelog: "python-bale-bot.ir/changelog" }
function openAddress(name){
const key = name.replaceAll("-", "_");
if (!address[key]) return;
open("https://" + address[key], "_blank");
}

document.getElementById("close-alert-box-btn").addEventListener("click", () => {
document.getElementById("alert-box").classList.add("remove-anim");
setInterval(() => document.getElementById("alert-box").remove(), 500)
})
const words = [
['1', '۱'],
['2', '۲'],
['3', '۳'],
['4', '۴'],
['5', '۵'],
['6', '۶'],
['7', '۷'],
['8', '۸'],
['9', '۹']
]

window.onload = async () => {
document.getElementById("close-alert-box-btn").addEventListener("click", () => {
document.getElementById("alert-box").classList.add("remove-anim");
setInterval(() => document.getElementById("alert-box").remove(), 500)
})

setInterval(async () => {
let versionName = await getStableVersion()
// https://python-bale-bot.ir/changelog#v-2-4-8

if (versionName == null) return;
versionName = versionName.toLowerCase()
const alertBox = document.getElementById("alert-box")
const element = alertBox.children[0];
element.innerHTML = replaceWords(`نسخه رسمی ${versionName.toLowerCase().replaceAll('v', '')} منتشر شد!`);
element.addEventListener('click', () => open(`/changelog#${versionName.replaceAll('v', 'v-').replaceAll('.', '-')}`, '_blank'))
alertBox.classList.remove('hidden')
}, 1500)
}

async function getStableVersion(){
const response = await fetch('https://api.github.com/repos/python-bale-bot/python-bale-bot/releases')
const json = await response.json()
if (Object.keys(json).length >= 1){
return json[0].tag_name
} else return null
}

function replaceWords(element){
for (let index in words){
element = element.replaceAll(words[index][0], words[index][1])
}
return element
}
27 changes: 10 additions & 17 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,13 @@
</head>

<body>
<div style="text-align: center; align-items: center;color: #05ffe4;" dir="rtl">
<div id="alert-box">
<p onclick="openAddress('changelog')">نسخه 2.4.7.2 منتشر شد!</p>
<div id="wrapper" dir="rtl">
<div class="hidden" id="alert-box">
<p id="open-btn"></p>
<button id="close-alert-box-btn"><i class="fa fa-close"></i></button>
</div>
<img id="bale-image" style="display: block;margin-left: auto;margin-right: auto;width: 150px;" src="assets/images/bale.png" alt="python-bale-bot">
<h1 id="title" style="font-weight: bold;" class="animation-title">python-bale-bot</h1>
<img id="bale-image" src="assets/images/bale.png" alt="python-bale-bot">
<h1 id="title" class="animation-title">python-bale-bot</h1>
<br/>
<h2 class="pop-anim" id="short-description" dir="rtl">برترین پکیج پایتون برای برنامه نویسی در <p onclick="openAddress('bale')" class="link">بله</p></h2>
<br/>
Expand Down Expand Up @@ -60,24 +60,17 @@ <h2 class="pop-anim" id="short-description" dir="rtl">برترین پکیج پا
<br/>
<h3 class="lang-description">در این روز ها بیشتر افراد به دلیل عوامل مختلف از پیام رسان های داخلی استفاده میکنند. <p onclick="openAddress('bale')" class="link">بله</p> یکی از پیام رسان هایی است که توانسته با توجه به امکانات مختلف آن (پرداخت، ساخت و برنامه نویسی بازو و ...) کاربران و برنامه نویسان را به سمت خود بکشاند. حال ما برای راحتی برنامه نویسان، کتابخانه ای سریع، مدرن و امن به وجود آورده ایم</h3>
<br/>
<h3 class="lang-description" style="color: #abfe06;">به راحتی با استفاده از دستور</h3>
<h3 class="lang-description help-text">به راحتی با استفاده از دستور</h3>
<br/>
<pre dir="ltr"><code class="python hljs language-python">pip <span class="hljs-keyword">install</span><span class="hljs-string"> python-bale-bot</span></code></pre>
<br/>
<h3 class="lang-description" style="color: #abfe06;">کتابخانه را نصب کنید!</h3>
<h3 class="lang-description help-text">کتابخانه را نصب کنید!</h3>
<br/>
<pre dir="ltr"><code class="python hljs language-python"><span class="hljs-keyword">from</span> bale <span class="hljs-keyword">import</span> <span class="hljs-params">Bot, Message</span>
<span class="hljs-params">bot</span> <span class="hljs-meta">=</span> <span class="hljs-params">Bot</span>(<span class="hljs-string">"YOUR TOKEN"</span>)

@bot<span class="hljs-meta">.</span>listen(<span class="hljs-string">"on_message"</span>)
<span class="hljs-keyword">async</span> <span class="hljs-keyword">def</span> <span class="hljs-title function_">on_message</span>(<span class="hljs-params">message</span>: Message):
<span class="hljs-keyword">return</span> <span class="hljs-keyword">await</span> message<span class="hljs-meta">.</span>reply(<span class="hljs-string">"Hi"</span>)

bot<span class="hljs-meta">.</span>run()</code></pre>
<script src="https://gist.github.com/kian-ahmadian/d99baf7caba5766d68ba82ed5083873c.js"></script>
<br/>
<h3 class="lang-description" style="color: rgb(5,231,231);">برای دریافت مثال های بیشتر به <p onclick="openAddress('github-examples')" class="link">گیت هاب</p> مراجعه نمائید.</h3><br/>
<h3 class="lang-description" id="more-info">برای دریافت مثال های بیشتر به <p onclick="openAddress('github-examples')" class="link">گیت هاب</p> مراجعه نمائید.</h3><br/>
<footer>
<p>© تمامی حقوق برای کتابخانه python-bale-bot محفوظ است</p>
<p>© تمامی حقوق برای کتابخانه <b>python-bale-bot</b> محفوظ است</p>
</footer>
</div>
<script src="assets/js/v2.js"></script>
Expand Down

0 comments on commit 66e0a43

Please sign in to comment.