index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,
    shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Preview</title>

    <link href="css/style.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/transition.css" rel="stylesheet">

</head>

<body class="dir-rtl text-right">

<!-- Login Modal -->
<div class="modal fade" id="loginModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title ml-auto">ورود</h4>
                <button type="button" class="close ml-0" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="container py-3 text-right">
                <form action="/action_page.php">
                    <div class="form-group dir-ltr">
                        <label for="email">آدرس ایمیل</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="email">
                            <div class="input-group-append">
                                <span class="input-group-text">@ce.sharif.edu</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group dir-ltr">
                        <label for="pwd">گذرواژه</label>
                        <input type="password" class="form-control" id="pwd">
                    </div>
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" type="checkbox" id="remember-me">
                        <label class="custom-control-label" for="remember-me"> مرا به خاطر بسپار </label>
                    </div>
                    <button type="submit" class="btn btn-primary mt-3">برو!</button>
                </form>
            </div>

        </div>
    </div>
</div>

<aside class="col-xl-2 bg-white p-0">
    <nav class="navbar navbar-expand-xl navbar-light flex-xl-column p-0 h-100">
        <!-- Brand -->
        <div class="navbar-brand m-0 p-0">
            <div id="logo-container" class="bg-red" style="text-align: center">
                <a href="index.html">
                    <img src="img/white-logo.png" class="logo" alt="Logo">
                </a>
            </div>
            <span class="w-100 nav-logo-box">
                <!--guest-->
                <!--<button class="btn btn-success" type="button" data-toggle="modal"-->
                <!--data-target="#loginModal">ورود</button>-->

                <!--logged in-->
                <div class="d-flex w-100">
                    <div class="dropdown w-100">
                        <div class="btn dropdown-toggle w-100" data-toggle="dropdown">
                            <img class="rounded-circle"
                                 src="https://secure.gravatar.com/avatar/053a38f5dd87f56f5ce1680d0b202d0e.jpg?r=g&d=retro&s=40">
                            <span class="btn-username">باقرآباد</span>
                        </div>
                        <div class="dropdown-menu text-right">
                            <span class="dropdown-item dropdown-username">باقرآباد</span>
                            <a class="dropdown-item" href="#">تغییر گذرواژه</a>
                            <a class="dropdown-item" href="#">خروج</a>
                        </div>
                    </div>
                </div>

            </span>
        </div>

        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler" type="button"
                data-toggle="collapse" data-target="#collapsibleNavbar"
                style="margin-left: 15px">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navbar links -->
        <div class="collapse navbar-collapse w-100 justify-content-between flex-column" id="collapsibleNavbar">
            <ul class="navbar-nav flex-xl-column w-100 text-center p-0 mb-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="index.html">خانه</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="announcements.html">اطلاعیه&zwnj;ها</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">ثبت گزارش</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">کتابخانه</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="locker.html">کمد</a>
                </li>
            </ul>
            <div class="d-flex">
                <div class="mx-auto d-inline-flex my-3" id="contact-icons">
                    <a href="https://t.me/SenfiCE" data-toggle="tooltip" data-placement="top" title="تلگرام">
                        <i class="telegram-icon"></i>
                    </a>
                    <a href="mailto:shora.cesharif@gmail.com" data-toggle="tooltip" data-placement="top" title="ایمیل">
                        <i class="email-icon"></i>
                    </a>
                    <a href="https://t.me/shora_ce" data-toggle="tooltip" data-placement="top" title="کانال تلگرام">
                        <i class="channel-icon"></i>
                    </a>
                </div>
            </div>
        </div>
    </nav>
</aside>

<main class="col-xl-10 mr-auto p-0 text-right">
    <header id="intro">
        <div class="header-wrapper">
            <div class="container text-center m-auto">
                <img src="img/white-logo.png" alt="Logo" class="mx-auto d-block">
                <h1 class="text-white">شورای صنفی دانشکده&zwnj;ی مهندسی کامپیوتر</h1>
                <button type="button" class="btn btn-outline-light ml-3" onclick="about_us.scrollIntoView(
        {
            behavior:'smooth',
            block:'start'
        });">
                    درباره ی ما
                </button>
                <button type="button" class="btn btn-outline-light" onclick="members.scrollIntoView(
        {
            behavior:'smooth',
            block:'start'
        });">
                    اعضای شورا
                </button>
            </div>
        </div>
    </header>

    <!-- Announcements -->
    <section class="bg-red py-5">
        <div class="container">
            <h2 class="mb-4 mx-2 px-4 text-white border-right-white">اطلاعیه&zwnj;ها</h2>
            <div class="timeline mx-2">
                <span class="line"></span>
                <article class="entry">
                    <div class="content">
                        <h2>فراخوان</h2>
                        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک
                            است...</p>
                        <a role="button" class="btn btn-sm btn-primary" href="article.html">ادامه</a>
                    </div>
                </article>
                <article class="entry">
                    <div class="content">
                        <h2>جلسه</h2>
                        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک
                            است...</p>
                        <a role="button" class="btn btn-sm btn-primary" href="article.html">ادامه</a>
                    </div>
                </article>
                <article class="entry">
                    <div class="content">
                        <h2>انتخابات</h2>
                        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک
                            است...</p>
                        <a role="button" class="btn btn-sm btn-primary" href="article.html">ادامه</a>
                    </div>
                </article>
            </div>
            <div class="mt-4 text-center">
                <a href="announcements.html" class="btn btn-outline-light mx-auto">همه&zwnj;ی اطلاعیه&zwnj;ها</a>
            </div>
        </div>
    </section>

    <!-- Services -->
    <section class="bg-light-blue py-5" id="services">
        <div class="container">
            <h2 class="mb-4 mx-2 px-4  text-navy-blue border-right-navy-blue">خدمات شورا</h2>
            <div class="row pt-3">
                <div class="col-md">
                    <img src="img/icon/inbox.svg" class="list-icon">
                    <h5 class="mr-4">رسیدگی به مشکلات درسی و رفاهی</h5>
                </div>
                <div class="col-md bg-white">
                    <img src="img/icon/wardrobe.svg" class="list-icon">
                    <h5 class="mr-4"> اجاره&zwnj;ی کمد </h5>
                </div>
                <div class="col-md">
                    <img src="img/icon/books.svg" class="list-icon">
                    <h5 class="mr-4">قرض گرفتن کتاب</h5>
                </div>
            </div>
            <div class="row">
                <div class="col-md bg-red">
                    <img src="img/icon/pencil-box.svg" class="list-icon">
                    <h5 class="text-white mr-4">قرض گرفتن اشیا ضروری</h5>
                </div>
                <div class="col-md">
                    <img src="img/icon/loupe.svg" class="list-icon">
                    <h5 class="mr-4">پیگیری وسایل گم شده</h5>
                </div>
                <div class="col-md bg-navy-blue">
                    <img src="img/icon/open-book.svg" class="list-icon">
                    <h5 class="text-white mr-4">رزرو اتاق مطالعه</h5>
                </div>
            </div>
        </div>
    </section>
    <!-- Members -->
    <section class="bg-navy-blue py-5" id="members">
        <div class="container">
            <h2 class="mb-4 mx-2 px-4 text-white border-right-white">اعضای شورا</h2>
            <div class="row" style="justify-content: space-evenly">
                <div class="col-md-3 my-3 memberHidden">
                    <img src="img/members/ali_babaei.png" class="rounded-top">
                    <h5 class="bg-primary text-white p-2 mb-0 text-center rounded-bottom">علی بابایی <span
                            class="badge badge-light">ورزش</span></h5>
                </div>
                <div class="col-md-3 my-3 memberHidden">
                    <img src="img/members/amin_isaai.png" class="rounded-top">
                    <h5 class="bg-primary text-white p-2 mb-0 text-center rounded-bottom">امین عیسائی <span
                            class="badge badge-light">تأسیسات</span></h5>
                </div>
            </div>
            <div class="row" style="justify-content: space-between">
                <div class="col-md-3 my-3 memberHidden">
                    <img src="img/members/hoda_torabi.png" class="rounded-top">
                    <h5 class="bg-primary text-white p-2 mb-0 text-center rounded-bottom">هدی ترابی <span
                            class="badge badge-light">روابط عمومی</span></h5>
                </div>
                <div class="col-md-3 my-3 memberHidden">
                    <img src="img/members/rasoul_ghasemi.png" class="rounded-top">
                    <h5 class="bg-primary text-white p-2 mb-0 text-center rounded-bottom">رسول قاسمی <span
                            class="badge badge-light">دبیر و نماینده مرکز</span></h5>
                </div>
                <div class="col-md-3 my-3 memberHidden">
                    <img src="img/members/hoora_aboutalebi.png" class="rounded-top">
                    <h5 class="bg-primary text-white p-2 mb-0 text-center rounded-bottom">حورا ابوطالبی <span
                            class="badge badge-light">آموزش - نایب رئیس</span></h5>
                </div>
            </div>
            <div class="row" style="justify-content: space-evenly">
                <div class="col-md-3 my-3 memberHidden">
                    <img src="img/members/mr_jafarzadeh.png" class="rounded-top">
                    <h5 class="bg-primary text-white p-2 mb-0 text-center rounded-bottom">محمدرضا جعفرزاده <span
                            class="badge badge-light">؟؟؟؟؟</span></h5>
                </div>
                <div class="col-md-3 my-3 memberHidden">
                    <img src="img/members/parsa_salavati.png" class="rounded-top">
                    <h5 class="bg-primary text-white p-2 mb-0 text-center rounded-bottom">پارسا صلواتی <span
                            class="badge badge-light">فنی - مالی و اموال</span></h5>
                </div>
            </div>
            <div class="mt-4 text-center ">
                <a href="#" class="btn btn-outline-light mx-auto" data-toggle="modal"
                   data-target="#prevMembers">اعضای دوره‌های قبلی</a>
            </div>
        </div>
        <div class="modal fade" id="prevMembers" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title ml-auto">
                            اعضای سابق شورای صنفی
                        </h4>
                        <button type="button" class="close ml-0"
                                data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>

                    </div>
                    <div class="modal-body">
                        <h4>دوره&zwnj;ی ۹۶-۹۷ </h4>
                        <ul>
                            <li>سامان هادیان <span class="text-muted">دبیر و نماینده شورا مرکز</span></li>
                            <li>حمید هاشمی <span class="text-muted">نایب دبیر</span></li>
                            <li>محمدحسین ایرانپاک <span class="text-muted">مالی و اموال</span></li>
                            <li>علی عسگری <span class="text-muted">روابط عمومی</span></li>
                            <li>حورا ابوطالبی <span class="text-muted">آموزش</span></li>
                            <li>علی بهجتی <span class="text-muted">فنی</span></li>
                            <li>علیرضا ظهری <span class="text-muted">تأسیسات</span></li>
                        </ul>
                    </div>
                    <div class="modal-body">
                        <h4>دوره&zwnj;ی ۹۵-۹۶</h4>
                        <ul>
                            <li>رامتین یزدانیان<span class="text-muted">دبیر</span></li>
                            <li>سیدمحمد حسینی <span class="text-muted">نایب دبیر</span></li>
                            <li>سامان هادیان <span class="text-muted">نماینده شورا مرکز</span></li>
                            <li>صدرا مرادیان <span class="text-muted">مالی و اموال</span></li>
                            <li>فرزانه هاشمی <span class="text-muted">روابط عمومی</span></li>
                            <li>محمدجعفر مشهدی <span class="text-muted">فنی</span></li>
                            <li>امیرحسین حمیدیان <span class="text-muted">تأسیسات</span></li>
                            <li>دانیال فامیل‌خلیلی <span class="text-muted">تأسیسات</span></li>
                        </ul>
                    </div>
                    <div class="modal-body">
                        <h4>دوره&zwnj;ی ۹۴-۹۵</h4>
                        <ul>
                            <li>امین صباغیان <span class="text-muted">دبیر</span></li>
                            <li>محسن رشیدی <span class="text-muted">نایب دبیر</span></li>
                            <li>پویا مصدق <span class="text-muted">نماینده شورا مرکز</span></li>
                            <li>سید رضی موسوی <span class="text-muted">مالی و اموال</span></li>
                            <li>دانیال فامیل‌خلیلی <span class="text-muted">تأسیسات</span></li>
                            <li>رامتین یزدانیان <span class="text-muted">مراسم‌ها و کتابخانه</span></li>
                            <li>صدرا مرادیان <span class="text-muted"></span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- About us -->
    <section class="bg-light-blue py-5" id="about_us">
        <div class="container">
            <h2 class="mb-4 mx-2 px-4 text-navy-blue border-right-navy-blue">درباره&zwnj;ی شورا</h2>
            <div class="col-md-10 m-auto p-3 rounded">
                <p>
                    شورای صنفی دانشگاه که بعدها به شورای صنفی رفاهی دانشجویان تغییر نام یافت، یکی از سازمان‌های دانشگاه
                    است
                    که برای مشارکت و تصمیم گیری در کارهای صنفی، رفاهی، آموزشی، و پژوهشی دانشجویان دانشگاه به وجود آمد.
                    این
                    سازمان پس از انحلال موقت در سال 1388، از اردیبهشت 1391 کار خود را از سر گرفت که شورای صنفی دانشگاه
                    صنعتی
                    شریف و بالتبع شورای صنفی دانشکده مهندسی کامپیوتر شریف نیز از این قاعده مستثنی نبودند.

                    محوریت اصلی فعالیت‌های شورا پیگیری حقوق صنفی دانشجویان در زمینه‌های مختلف و رساندن صدای دانشجو به
                    مسئولین و ایجاد راه تعاملی بهتر و مثمرثمر تر است. در کنار این موارد، می‌توان به دیگر کارهایی که بسته
                    به
                    نیاز و تقاضای دانشجویان مطرح شده و در حوزه‌ی فعالیتی شورا می‌گنجد نیز اشاره کرد؛ اعم از اداره‌ی امور
                    رفاهی درون دانشکده‌ای مانند ایجاد کتابخانه، اجاره‌ی کمدهای شخصی، برگزاری مراسم یادبود «یاد استاد» با
                    همکاری انجمن علمی و فوق برنامه و ...؛ و همچنین امور مربوط به آموزش مانند برگزاری کلاس‌های رفع اشکال
                    و
                    سمینارهای راهنمای انتخاب واحد ویژه دانشجویان ورودی.
                </p>
            </div>
        </div>
    </section>
</main>

<!-- SCRIPTS -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="js/transition.js"></script>

<script>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
        showAnnouncements(event);
    });
    $(document).scroll(showMembers);

</script>
</body>

</html>