Demo entry 6682555

1

   

Submitted by anonymous on Dec 09, 2017 at 12:33
Language: HTML. Code size: 9.1 kB.

{% load staticfiles %}
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>POSLUNCH-MAIN</title>

  <style>
    @import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
    @import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
  </style>

  <!-- Bootstrap core CSS -->
  <link href='{% static "vendor/bootstrap/css/bootstrap.min.css" %}' rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href='{% static "css/shop-homepage.css" %}' rel="stylesheet">

</head>

<body>
  <!-- test modal-->
  <div id="myModal" class="modal fade">
  <div class="modal-dialog modal-lg">
      <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">상세 정보</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
      </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  <!-- modal test completed -->

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="index.html">
        <img src='{% static "PosLunLogo.png" %}' width="30" height="30" class="d-inline-block align-top mr-1" alt="">
        <lead class="align-bottom" >
        POSLUNCH
      </lead>
        </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">Home
                <span class="sr-only">(current)</span>
              </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="feedback/1/new/">Feedback</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="calendar.html">Calendar</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Content -->
  <div class="container">

    <div class="row">

      <div class="col-lg-3">

        <h2 class="my-4">categories</h2>
        <div class="list-group">
          <a href="#" class="list-group-item">총학생회 행사</a>
          <a href="#" class="list-group-item">동아리 공연</a>
          <a href="#" class="list-group-item">강연</a>
          <a href="#" class="list-group-item">공연</a>
          <a href="#" class="list-group-item">채용/세미나</a>
        </div>


      </div>
      <!-- /.col-lg-3 -->

      <div class="col-lg-9">
        <div class="row">
          <h2 class="my-4">오늘의 행사</h5>
          </div>
          <div id="carouselExampleIndicators" class="carousel slide my-0" data-ride="carousel">
            <ol class="carousel-indicators">
              {% for pd2 in today_list %}
              <li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.counter}}"
                {% if forloop.first %}
                class="active">
                {% endif %}
              </li>
              <!--temp
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            -->
              {% endfor %}
            </ol>
            <div class="carousel-inner" role="listbox">
            {% for pd2 in today_list %}
              {% if forloop.first %}
              <div class="carousel-item active">
              {% else %}
              <div class="carousel-item">
              {% endif %}
              <a class="a_carousel_item" id={{pd2.imgurl}} href="">
                <img class="d-block img-fluid" src="{{pd2.imgurl}}" alt="{{pd2.title}}">
              </a>
              </div>
            {% endfor %}

            <!--
              <div class="carousel-item">
                <img class="d-block img-fluid" src="http://photo.jtbc.joins.com/news/2016/11/03/20161103150104259.jpg" alt="Second slide">
              </div>
              <div class="carousel-item">
                <img class="d-block img-fluid" src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="Third slide">
              </div>
            -->
            </div>

            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>

          <div class="row">
            <h2 class="my-4">금주의 행사</h2>
          </div>
        <div class="row">
          <h4 class="mb-2">내일의 행사</h4>
        </div>
        <div class="row">

          {% for pd2 in tomorrow_list %}
          <div class="col-lg-4 col-md-6 mb-4">
            <div class="card">
              <a href="#"><img class="card-img-top" src= "{{pd2.imgurl}}" alt=""></a>
               <div class="card-body">
                  <p class="card-text">{{pd2.title}}</p>
                </div>

              <!-- 별표-->
              <!--
              <div class="card-footer">
                <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
              </div>
            -->
            </div>
          </div>
          {% endfor %}

        </div>
        <!-- /.row -->
        <div class="row">
          <h4 class="mb-2">금주의 행사</h4>
          <div class="row">

            {% for pd2 in this_week_list %}
            <div class="col-lg-4 col-md-6 mb-4">
              <div class="card">
                <a href="#"><img class="card-img-top" src= "{{pd2.imgurl}}" alt=""></a>
                 <div class="card-body">
                    <p class="card-text">{{pd2.title}}</p>
                  </div>

                <!-- 별표-->
                <!--
                <div class="card-footer">
                  <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
                </div>
              -->
              </div>
            </div>
            {% endfor %}

          </div>
          <!-- /.row -->
      </div>
      <!-- /.col-lg-9 -->

    </div>
    <!-- /.row -->

  </div>
  <!-- /.container -->

  <!-- Footer -->
  <footer class="myfooter py-5 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; POSLUNCH 2017</p>
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src='{% static  "vendor/jquery/jquery.min.js " %}'></script>
  <script src='{% static  "vendor/bootstrap/js/bootstrap.bundle.min.js " %}'></script>
  <script>
    $('#test_a_tag').click(function(event){
      event.preventDefault();
      $('#myModal').modal('toggle');
    });
    $(".a_carousel_item").click(function(event){
      //function(event)에서 event는 이벤트 타입이 저장되는 변수임
      event.preventDefault();
      //carousel-inner 안에있는 carousel-item 각각에 대해 a태그를 입력해서 클릭 가능하게 해둠.
      //근데, 클릭만 되고 링크이동은 안시키려고 위의 문장을 추가해둠.
      var carousel_id = $(this).attr('id');  //this는 class가 carousel인 DOM이 저장됨
      //(DOM은 일종의 객체, 아마 this에는 class가 a_carousel_item인 문서가 들어있을것)
      //attr()는 속성을 반환함. 'id'속성 값을 반환함.
      //alert(carousel_id);  //연습용

      //http://hsj0511.tistory.com/205 참고
      //https://simpleisbetterthancomplex.com/tutorial/2016/08/29/how-to-work-with-ajax-request-with-django.html 참고

      $.ajax({
        url:'/ajax/poster_detail/',
        data:{
          'clicked_poster':carousel_id
        },
        success: function(data){
          //alert("!!");
          //여기서 data는 서버로부터 받아온 data
          console.log(data);
          $(".modal-body").html(data.post_html);
        },
        error:function (xhr, ajaxOptions, thrownError) {
        }
      });
      $('#myModal').modal('toggle');
    });
  </script>

</body>

</html>

This snippet took 0.01 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).