Skip to content

Commit ea3e067

Browse files
MiniRobotDevMiniRobotDev
committed
my-account page static header,footer and sidebar added
style for form-changer button fixed
1 parent 2543a79 commit ea3e067

3 files changed

Lines changed: 258 additions & 75 deletions

File tree

‎assets/js/pages/my-account.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import { getElement } from "/assets/js/global/utils.js";
2-
import { renderDefaultTemplate } from "/assets/js/global/render.js";
2+
import { topbarEvent, navbarEvent, sidebarEvent } from "/assets/js/global/headerEvents.js";
33

44
//* runs when page load
55
window.addEventListener("DOMContentLoaded", function () {
6-
// header, footer
7-
renderDefaultTemplate(document.body.innerHTML);
8-
96
// code here
107
// toggles
118
const changerLogin = getElement(".changer--login");
@@ -23,4 +20,9 @@ window.addEventListener("DOMContentLoaded", function () {
2320

2421
changerLogin.addEventListener("click", accountCB);
2522
changerRegister.addEventListener("click", accountCB);
23+
24+
// Header Events
25+
topbarEvent();
26+
navbarEvent();
27+
sidebarEvent();
2628
});

‎assets/scss/pages/_my-account.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@
211211
display: none;
212212
}
213213

214-
.changer--login {
214+
[class^="changer--"] {
215215
font-family: inherit;
216216
cursor: pointer;
217217
color: $black-clr-1;

‎pages/my-account.html‎

Lines changed: 251 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -15,90 +15,271 @@
1515
</head>
1616

1717
<body>
18-
<!-- start my-account -->
19-
<main class="my-account">
20-
<!-- breadcrumb -->
21-
<div class="breadcrumb">
22-
<div class="breadcrumb__wrapper">
23-
<h1>حساب من</h1>
24-
<nav class="breadcrumb__list">
25-
<li><a href="/">خانه</a></li>
26-
<li>حساب من</li>
27-
</nav>
18+
<!-- start sidebar -->
19+
<div class="sidebar no-select">
20+
<!-- sidebar search -->
21+
<div class="sidebar__search">
22+
<form class="search__form" role="search" method="get" action="/">
23+
<input class="search-field" type="search" name="s" placeholder="ورود واژه کلیدی..." />
24+
<button class="search-submit" type="submit">
25+
<i class="fa fa-search" aria-hidden="true"></i>
26+
</button>
27+
</form>
28+
</div>
29+
30+
<!-- sidebar navigation -->
31+
<nav class="sidebar__nav">
32+
<ul class="sidebar__list">
33+
<li><a href="/">صفحه اصلی</a></li>
34+
35+
<!-- dropdown template -->
36+
<li class="list__dropdown">
37+
<div class="dropdown__header">
38+
<a href="/pages/courses.html">دوره ها</a>
39+
40+
<i class="sidebar__dropdown--toggle fa fa-angle-left"></i>
41+
</div>
42+
<ul class="dropdown__list">
43+
<li>
44+
<a href="/pages/learning-steps.html">راهنمای یادگیری</a>
45+
</li>
46+
</ul>
47+
</li>
48+
49+
<li>
50+
<a href="/pages/blog.html">بلاگ</a>
51+
</li>
52+
53+
<li>
54+
<a href="/pages/forums.html">تالار گفتمان</a>
55+
</li>
56+
57+
<li>
58+
<a href="#tel">کانال تلگرام</a>
59+
</li>
60+
</ul>
61+
</nav>
62+
</div>
63+
<!-- end sidebar -->
64+
65+
<!-- start body wrap -->
66+
<div class="body--wrap">
67+
<!-- overlay all elements -->
68+
<div class="body--overlay"></div>
69+
70+
<!-- start topbar -->
71+
<div class="topbar no-select">
72+
<div class="topbar__container">
73+
<ul class="topbar__links">
74+
<li>
75+
<a class="topbar__link" href="/pages/about-us.html">درباره ما</a>
76+
</li>
77+
<li>
78+
<a class="topbar__link" href="/pages/contact.html">تماس با ما</a>
79+
</li>
80+
</ul>
81+
<div class="topbar__icons">
82+
<div class="topbar__icon topbar__search">
83+
<a><i class="topbar__search--toggle fa fa-search" aria-hidden="true"></i></a>
84+
</div>
85+
<div class="topbar__icon topbar__bag">
86+
<a href="#"><i class="fa fa-shopping-bag" aria-hidden="true"></i></a>
87+
</div>
88+
<div class="topbar__icon topbar__perm">
89+
<a href="/pages/my-account.html"><i class="fas fa-user" aria-hidden="true"></i></a>
90+
</div>
91+
</div>
2892
</div>
2993
</div>
94+
<!-- end topbar -->
3095

31-
<!-- my-account contents -->
32-
<section class="my-account__content">
33-
<div class="content__wrapper">
34-
<div class="wrapper__account">
35-
<!-- register -->
36-
<div class="wrapper__register is-active">
37-
<div class="wrapper__title">عضویت در سایت</div>
38-
<form class="wrapper__form" action="/pages/my-account.html" method="post">
39-
<!-- form fields -->
40-
<div class="form-box">
41-
<i class="fa fa-envelope" aria-hidden="true"></i>
42-
<input type="email" name="email" placeholder="آدرس ایمیل *" />
43-
</div>
44-
<div class="form-box">
45-
<i class="fas fa-unlock-alt"></i>
46-
<input type="password" name="password" placeholder="رمز عبور *" />
96+
<!-- start navbar -->
97+
<div class="navbar no-select">
98+
<div class="navbar__container">
99+
<!-- navbar search -->
100+
<div class="navbar__search">
101+
<form class="search__form" role="search" method="get" action="/">
102+
<input class="search-input" type="search" name="s" placeholder="جستجوی دوره، استاد، مطالب و ..." />
103+
<button class="search-submit" type="submit">
104+
<i class="fa fa-search" aria-hidden="true"></i>
105+
</button>
106+
</form>
107+
</div>
108+
<!-- navbar menu -->
109+
<nav class="navbar__menu">
110+
<!-- menu list -->
111+
<ul class="menu__list">
112+
<li><a href="/">صفحه اصلی</a></li>
113+
114+
<!-- dropdown template -->
115+
<li class="list__dropdown">
116+
<div class="dropdown__header">
117+
<a href="/pages/courses.html">دوره ها</a>
118+
<i class="fa fa-angle-down"></i>
47119
</div>
48-
<button class="form-submit" type="submit">
49-
عضویت
50-
<i class="fa fa-user-plus" aria-hidden="true"></i>
51-
</button>
52-
</form>
53-
<!-- wrapper form-hanger -->
54-
<div class="wrapper__form-changer">
55-
قبلا ثبت نام کرده اید؟
56-
<button class="changer--login">وارد شوید</button>
57-
</div>
120+
<ul class="dropdown__list">
121+
<li>
122+
<a href="/pages/learning-steps.html">راهنمای یادگیری</a>
123+
</li>
124+
</ul>
125+
</li>
126+
127+
<li>
128+
<a href="/pages/blog.html">بلاگ</a>
129+
</li>
130+
131+
<li>
132+
<a href="/pages/forums.html">تالار گفتمان</a>
133+
</li>
134+
135+
<li>
136+
<a href="#tel">کانال تلگرام</a>
137+
</li>
138+
</ul>
139+
<!-- menu button -->
140+
<a class="menu__account" href="/pages/my-account.html">
141+
<i class="account__icon fa fa-user-lock">&nbsp;</i> ورود و ثبت نام
142+
</a>
143+
</nav>
144+
<!-- navbar brand -->
145+
<div class="navbar__brand">
146+
<!-- brand image -->
147+
<div class="brand__img">
148+
<a href="/">
149+
<img src="/assets/images/navbar/brand.png" alt="reactapp brand" />
150+
</a>
58151
</div>
152+
<!-- sidebar toggle in navbar as toggle -->
153+
<div class="navbar--toggle">
154+
<div class="toggle__top"></div>
155+
<div class="toggle__mid"></div>
156+
<div class="toggle__btm"></div>
157+
</div>
158+
</div>
159+
</div>
160+
</div>
161+
<!-- end navbar -->
59162

60-
<!-- separator-->
61-
<div class="wrapper__separator"></div>
62-
63-
<!-- login -->
64-
<div class="wrapper__login">
65-
<div class="wrapper__title">ورود به حساب کاربری</div>
66-
<form class="wrapper__form" action="/pages/my-account.html" method="post">
67-
<!-- form fields -->
68-
<div class="form-box">
69-
<i class="fas fa-user" aria-hidden="true"></i>
70-
<input type="text" name="username" placeholder="نام کاربری یا آدرس ایمیل *" />
71-
</div>
72-
<div class="form-box">
73-
<i class="fas fa-unlock-alt"></i>
74-
<input type="password" name="password" placeholder="رمز عبور *" />
163+
<!-- main my-account -->
164+
<main class="my-account">
165+
<!-- breadcrumb -->
166+
<div class="breadcrumb">
167+
<div class="breadcrumb__wrapper">
168+
<h1>حساب من</h1>
169+
<nav class="breadcrumb__list">
170+
<li><a href="/">خانه</a></li>
171+
<li>حساب من</li>
172+
</nav>
173+
</div>
174+
</div>
175+
176+
<!-- my-account contents -->
177+
<section class="my-account__content">
178+
<div class="content__wrapper">
179+
<div class="wrapper__account">
180+
<!-- register -->
181+
<div class="wrapper__register is-active">
182+
<div class="wrapper__title">عضویت در سایت</div>
183+
<form class="wrapper__form" action="/pages/my-account.html" method="post">
184+
<!-- form fields -->
185+
<div class="form-box">
186+
<i class="fa fa-envelope" aria-hidden="true"></i>
187+
<input type="email" name="email" placeholder="آدرس ایمیل *" />
188+
</div>
189+
<div class="form-box">
190+
<i class="fas fa-unlock-alt"></i>
191+
<input type="password" name="password" placeholder="رمز عبور *" />
192+
</div>
193+
<button class="form-submit" type="submit">
194+
عضویت
195+
<i class="fa fa-user-plus" aria-hidden="true"></i>
196+
</button>
197+
</form>
198+
<!-- wrapper form-hanger -->
199+
<div class="wrapper__form-changer">
200+
قبلا ثبت نام کرده اید؟
201+
<button class="changer--login">وارد شوید</button>
75202
</div>
76-
<button class="form-submit" type="submit">
77-
ورود
78-
<i class="fa fa-sign-in" aria-hidden="true"></i>
79-
</button>
80-
<!-- form options -->
81-
<div class="form-options">
82-
<div class="option-box">
83-
<input type="checkbox" id="option-remember" name="remember" />
84-
<label for="horns">مرا به خاطر داشته باش</label>
203+
</div>
204+
205+
<!-- separator-->
206+
<div class="wrapper__separator"></div>
207+
208+
<!-- login -->
209+
<div class="wrapper__login">
210+
<div class="wrapper__title">ورود به حساب کاربری</div>
211+
<form class="wrapper__form" action="/pages/my-account.html" method="post">
212+
<!-- form fields -->
213+
<div class="form-box">
214+
<i class="fas fa-user" aria-hidden="true"></i>
215+
<input type="text" name="username" placeholder="نام کاربری یا آدرس ایمیل *" />
216+
</div>
217+
<div class="form-box">
218+
<i class="fas fa-unlock-alt"></i>
219+
<input type="password" name="password" placeholder="رمز عبور *" />
85220
</div>
86-
<div class="option-box">
87-
<a href="/pages/my-account/recover-password.html">رمز عبور را فراموش کرده اید؟</a>
221+
<button class="form-submit" type="submit">
222+
ورود
223+
<i class="fa fa-sign-in" aria-hidden="true"></i>
224+
</button>
225+
<!-- form options -->
226+
<div class="form-options">
227+
<div class="option-box">
228+
<input type="checkbox" id="option-remember" name="remember" />
229+
<label for="horns">مرا به خاطر داشته باش</label>
230+
</div>
231+
<div class="option-box">
232+
<a href="/pages/my-account/recover-password.html">رمز عبور را فراموش کرده اید؟</a>
233+
</div>
88234
</div>
235+
</form>
236+
<!-- wrapper form-hanger -->
237+
<div class="wrapper__form-changer">
238+
کاربر جدید هستید؟
239+
<button class="changer--register">ثبت نام</button>
89240
</div>
90-
</form>
91-
<!-- wrapper form-hanger -->
92-
<div class="wrapper__form-changer">
93-
کاربر جدید هستید؟
94-
<button class="changer--register">ثبت نام</button>
95241
</div>
96242
</div>
97243
</div>
244+
</section>
245+
</main>
246+
<!-- end main my-account -->
247+
248+
<!-- start footer -->
249+
<div class="footer">
250+
<div class="footer__content">
251+
<div class="footer__contact-info">
252+
<h3 class="contact-info__title">منتظرتون هستیم</h3>
253+
<div class="info-box">
254+
<i class="fas fa-phone" aria-hidden="true"></i>09109999999
255+
</div>
256+
<div class="info-box">
257+
<i class="fa fa-envelope" aria-hidden="true"></i>
258+
<a href="mailto:reactapp.ir@gmail.com">reactapp.ir@gmail.com</a>
259+
</div>
260+
</div>
261+
<div class="footer__links">
262+
<ul>
263+
<li><a href="/pages/blog.html">بلاگ</a></li>
264+
<li><a href="#">ویدیو کست</a></li>
265+
<li><a href="/pages/terms.html">قوانین</a></li>
266+
</ul>
267+
</div>
268+
<div class="footer__text">
269+
تمام تلاش ما در برند reactapp در کنار آموزش با کیفیت و استفاده از
270+
دانش روز، اضافه کردن چاشنی تجربه چندین ساله فعالیت در پروژه های
271+
داخلی و خارجی بوده. زمانی که شما به یادگیری اختصاص دادید برای ما
272+
اهمیت بسیار بالایی داره و به همین دلیل سعی میکنیم متحوای تولید شده،
273+
غنی، پر بار و در راستای نیاز های بازار کار باشه.
274+
</div>
98275
</div>
99-
</section>
100-
</main>
101-
<!-- end my-account -->
276+
<div class="footer__copyright">
277+
کلیه حقوق این سایت محفوظ و متعلق به reactapp.ir میباشد.
278+
</div>
279+
</div>
280+
<!-- end footer -->
281+
</div>
282+
<!-- end body wrap -->
102283

103284
<!-- scripts -->
104285
<script type="module" src="/assets/js/pages/my-account.js"></script>

0 commit comments

Comments
 (0)