brmjan2-tibyan's picture
Update templates/index.html
1fb223b
raw
history blame
16.6 kB
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تبيان</title>
<meta name="keywords"
content="المعجم الرياض, المعجم العربي, معجم معاني الكلمات, معاني الكلمات, معاني,مرادفات,متضادات,معاجم تراثية,معنى كلمة,تشكيل كلمات,تشكيل,المشكل,القاموس,قاموس,قاموس عربي,سمات لغوية,المدقق,المدقق الإملائي,">
<link rel="preload" href="{{ url_for('static', filename='e8c205fd85388127.css') }}" as="style">
<link rel="stylesheet" href="{{ url_for('static', filename='e8c205fd85388127.css') }}" data-n-g="">
<style data-jss="" data-meta="MuiInput">
.MuiInput-root {
position: relative;
}
label+.MuiInput-formControl {
margin-top: 16px;
}
.MuiInput-colorSecondary.MuiInput-underline:after {
border-bottom-color: #f50057;
}
.MuiInput-underline:after {
left: 0;
right: 0;
bottom: 0;
content: "";
position: absolute;
transform: scaleX(0);
transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
border-bottom: 2px solid #3f51b5;
pointer-events: none;
}
.MuiInput-underline.Mui-focused:after {
transform: scaleX(1);
}
.MuiInput-underline.Mui-error:after {
transform: scaleX(1);
border-bottom-color: #f44336;
}
.MuiInput-underline:before {
left: 0;
right: 0;
bottom: 0;
content: "\00a0";
position: absolute;
transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border-bottom: 1px solid rgba(0, 0, 0, 0.42);
pointer-events: none;
}
.MuiInput-underline:hover:not(.Mui-disabled):before {
border-bottom: 2px solid rgba(0, 0, 0, 0.87);
}
.MuiInput-underline.Mui-disabled:before {
border-bottom-style: dotted;
}
@media (hover: none) {
.MuiInput-underline:hover:not(.Mui-disabled):before {
border-bottom: 1px solid rgba(0, 0, 0, 0.42);
}
}
</style>
<style data-jss="" data-meta="MuiFormLabel">
.MuiFormLabel-root {
color: rgba(0, 0, 0, 0.54);
padding: 0;
font-size: 1rem;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
line-height: 1;
letter-spacing: 0.00938em;
}
.MuiFormLabel-root.Mui-focused {
color: #3f51b5;
}
.MuiFormLabel-root.Mui-disabled {
color: rgba(0, 0, 0, 0.38);
}
.MuiFormLabel-root.Mui-error {
color: #f44336;
}
.MuiFormLabel-colorSecondary.Mui-focused {
color: #f50057;
}
.MuiFormLabel-asterisk.Mui-error {
color: #f44336;
}
</style>
<style data-jss="" data-meta="MuiInputLabel">
.MuiInputLabel-root {
display: block;
transform-origin: top left;
}
.MuiInputLabel-formControl {
top: 0;
left: 0;
position: absolute;
transform: translate(0, 24px) scale(1);
}
.MuiInputLabel-marginDense {
transform: translate(0, 21px) scale(1);
}
.MuiInputLabel-shrink {
transform: translate(0, 1.5px) scale(0.75);
transform-origin: top left;
}
.MuiInputLabel-animated {
transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
}
.MuiInputLabel-filled {
z-index: 1;
transform: translate(12px, 20px) scale(1);
pointer-events: none;
}
.MuiInputLabel-filled.MuiInputLabel-marginDense {
transform: translate(12px, 17px) scale(1);
}
.MuiInputLabel-filled.MuiInputLabel-shrink {
transform: translate(12px, 10px) scale(0.75);
}
.MuiInputLabel-filled.MuiInputLabel-shrink.MuiInputLabel-marginDense {
transform: translate(12px, 7px) scale(0.75);
}
.MuiInputLabel-outlined {
z-index: 1;
transform: translate(14px, 20px) scale(1);
pointer-events: none;
}
.MuiInputLabel-outlined.MuiInputLabel-marginDense {
transform: translate(14px, 12px) scale(1);
}
.MuiInputLabel-outlined.MuiInputLabel-shrink {
transform: translate(14px, -6px) scale(0.75);
}
</style>
<style data-jss="" data-meta="MuiFormControl">
.MuiFormControl-root {
border: 0;
margin: 0;
display: inline-flex;
padding: 0;
position: relative;
min-width: 0;
flex-direction: column;
vertical-align: top;
}
.MuiFormControl-marginNormal {
margin-top: 16px;
margin-bottom: 8px;
}
.MuiFormControl-marginDense {
margin-top: 8px;
margin-bottom: 4px;
}
.MuiFormControl-fullWidth {
width: 100%;
}
</style>
<style data-jss="" data-meta="MuiPaper">
.MuiPaper-root {
color: rgba(0, 0, 0, 0.87);
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
background-color: #fff;
}
.MuiPaper-rounded {
border-radius: 4px;
}
.MuiPaper-outlined {
border: 1px solid rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation0 {
box-shadow: none;
}
.MuiPaper-elevation1 {
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation2 {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation3 {
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation4 {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation5 {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation6 {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation7 {
box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation8 {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation9 {
box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation10 {
box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation11 {
box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation12 {
box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation13 {
box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation14 {
box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation15 {
box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation16 {
box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation17 {
box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation18 {
box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation19 {
box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation20 {
box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation21 {
box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation22 {
box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation23 {
box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
}
.MuiPaper-elevation24 {
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}
</style>
<style data-jss="" data-meta="MuiSvgIcon">
.MuiSvgIcon-root {
fill: currentColor;
width: 1em;
height: 1em;
display: inline-block;
font-size: 1.5rem;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
flex-shrink: 0;
user-select: none;
}
.MuiSvgIcon-colorPrimary {
color: #3f51b5;
}
.MuiSvgIcon-colorSecondary {
color: #f50057;
}
.MuiSvgIcon-colorAction {
color: rgba(0, 0, 0, 0.54);
}
.MuiSvgIcon-colorError {
color: #f44336;
}
.MuiSvgIcon-colorDisabled {
color: rgba(0, 0, 0, 0.26);
}
.MuiSvgIcon-fontSizeInherit {
font-size: inherit;
}
.MuiSvgIcon-fontSizeSmall {
font-size: 1.25rem;
}
.MuiSvgIcon-fontSizeLarge {
font-size: 2.1875rem;
}
</style>
</head>
<body>
<div id="__next" data-reactroot="">
<div id="content">
<header class="header-inside">
<div class="container">
<nav class="navbar navbar-expand-lg home-nav">
<nav class="navbar navbar-light m-0 mr-4">
<img src="{{ url_for('static', filename='imgs/logo-dark.svg') }}"
alt="KSAA Logo شعار مجمع الملك سلمان العالمي للغة العربية" height="45">
</nav><button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<img src="{{ url_for('static', filename='imgs/menu-black.svg') }}" width="25px;" alt="menu">
</button>
<div class="collapse navbar-collapse responsive-light" id="navbarNav">
<ul class="navbar-nav Traditional_nav__zD2_d bg-white border-1">
<li class="nav-item active"><a class="nav-link Traditional_navItem25__VUKZC"
href="">الرئيسة</a></li>
<li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC" href="">كلمة
اليوم</a></li>
<li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC handCutsor"
href="">إثراء المعجم</a></li>
<li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC" href="">عن
المعجم</a></li>
<li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC"
href="">إحصاءات</a></li>
<li class="nav-item"><a class="nav-link Traditional_navItem25__VUKZC handCutsor"
href="">اتصل بنا</a></li>
</ul>
</div>
<a href="" class="ml-5 hide-md hide-xs">
<img src="{{ url_for('static', filename='imgs/logoA.png') }}" height="45"
alt="شعار مجمع الملك سلمان العالي للغة العربية ">
</a>
</nav>
</div>
</header>
<main class="pages-bg">
<header class="header-inside">
<main class="sub-menu ">
<div class="container mx-auto ">
<form action="/" method="" class="pb-1 pt-5">
<div
class="row no-gutters justify-content-between custom-search bg-white rounded-5 border-1">
<div class="col-xs-12 col-sm-8 col-lg-8 row no-wrap justify-content-between pl-3 ">
<img alt="search icon" src="/assets/img/searchIcon.png" class="search-icon">
<div class="form-group ">
<div class="MuiAutocomplete-root" role="combobox" aria-expanded="false"
style="width: 300px;">
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
data-shrink="false" for="autocomplete-box"
id="autocomplete-box-label">كلمة البحث</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiAutocomplete-inputRoot MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd">
<input aria-invalid="false" autocomplete="off"
id="autocomplete-box" name="word" placeholder="كلمة البحث"
type="text"
class="MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd"
aria-autocomplete="list" autocapitalize="none"
spellcheck="false" value="">
<div class="MuiAutocomplete-endAdornment"></div>
</div>
</div>
</div>
</div>
</div>
<div class=" col-xs-12 col-sm-4 col-lg-4 p-0"><input type="submit"
class="m-0 rounded-5 " value="ابحث"></div>
</div>
<div class="search-letters mt-5">
<ul>
<li id="A1">ء</li>
<li id="A2">ب</li>
<li id="A3">ت</li>
<li id="A4">ث</li>
<li id="A5">ج</li>
<li id="A6">ح</li>
<li id="A7">خ</li>
<li id="A8">د</li>
<li id="A9">ذ</li>
<li id="A10">ر</li>
<li id="A11">ز</li>
<li id="A12">س</li>
<li id="A13">ش</li>
<li id="A14">ص</li>
<li id="A15">ض</li>
<li id="A16">ط</li>
<li id="A17">ظ</li>
<li id="A18">ع</li>
<li id="A19">غ</li>
<li id="A20">ف</li>
<li id="A21">ق</li>
<li id="A22">ك</li>
<li id="A23">ل</li>
<li id="A24">م</li>
<li id="A25">ن</li>
<li id="A26">هـ</li>
<li id="A27">و</li>
<li id="A28">ي</li>
<li id="A29">رموز</li>
</ul>
</div>
</form>
</div>
</main>
</header>
{% if data is not none %}
<section class="words-detail">
<div class="container">
<div>
<div class="mb-5">
<div id="d17053" class="list-card-list p-0 my-2 clearfix separate">
<div id="17053" class="row items-center wordBg justify-content-between">
<div class="col-xs-8 col-lg-8 pl-4 pr-0">
<h2 class="clr-blue h1 py-3">{{ data.word }} </h2>
<h4 class="">
{{ data.english }}
</h4>
</div>
{% if data.img is not none %}
<div>
<img style="padding: 10px; border-radius: 20px;" width="200px"
src="data:image/jpeg;base64,{{ data.img }}">
<br>
<p style="text-align: center; font-size:7px;">كيف يرى الذكاء الإصطناعي هذه الكلمة</p>
</div>
{% endif %}
</div>
<div class="px-2 show collapse" id="c17053">
<div class="examples-container">
{% for meaning_example in data.meanings_examples %}
<div class="examples">
<ul class="text-left arabic">
<li>
<div class="row justify-content-between examplesBg">
<div class="clr-blue"><span>{{ meaning_example.i }} .
</span>
<p class="d-inline font-bol">{{ meaning_example.meaning
}}</p>
</div>
</div>
{% if meaning_example.example is not none %}
<div class="buttons-more mt-3 ">
<div class="row mx-0"><button
class="btn mr-3 my-2 rounded-3 bg-blue font-bold text-white">أمثلة</button>
</div>
</div>
<div class="row justify-content-between">
<div class="clr-blue">
<p class="d-inline font-bol">{{ meaning_example.example
}}</p>
</div>
</div>
{% endif %}
</li>
</ul>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endif %}
</main>
</div>
</div>
</body>
</html>