<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World!!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    
    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
    
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    
    <style>
        .box {
            width: 150px;
            height: 150px;
            border-radius: 70%;
            overflow: hidden;
        }

        .profile {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .feed_box {
            margin: 20px 0;
            border: solid 1px gray;
            background-color: white
        }

        .modal_overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(1.5px);
            -webkit-backdrop-filter: blur(1.5px);
            z-index: 10000;
        }

        .modal_window {
            background: white;
            backdrop-filter: blur(13.5px);
            -webkit-backdrop-filter: blur(13.5px);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            width: 800px;
            height: 600px;
            position: relative;
            padding: 10px;
        }
    </style>
</head>
  <body>
    <nav class="navbar navbar-expand-lg bg-light" style="position: fixed; width: 100%;">
        <div class="container-fluid" style="justify-content:space-between;flex-wrap: nowrap;min-width:900px">
            <a class="navbar-brand" href="#">
                <img style="object-fit:contain;width:100px" src="https://fontmeme.com/images/instagram-new-logo.png">
            </a>
            <input class="form-control me-2" style="width: 400px;" type="search" placeholder="Search" aria-label="Search">
            <div>  
                <span class="material-icons">home</span>
                <span class="material-icons-outlined">send</span>
                <span id="nav_bar_add_box" class="material-icons-outlined">add_box</span>
                <span class="material-icons-outlined">explore</span>
                <span class="material-icons-outlined">favorite_border</span>
            </div>
        </div>
    </nav>
    <div style="display: flex; flex-direction: row;text-align: center;justify-content: center;padding-top:70px;background-color:#FAFAFA;">
        <div style="width: 600px;height: 1000px;margin-right:256px;">
            
            {% for feeds in feed_list %}
                <div class="feed_box">
                    <div style="display: flex;flex-direction: row;align-items: center;margin: 20px;">
                        <div class="box">
                            <img class="profile" src="{{ feeds.profile_image }}">
                        </div>
                        <div>{{ feeds.user_id }}</div>
                    </div>
                    <div> <img style="width:100%" src="{{ feeds.image }}"></div>
                    <div style="margin:0 20px;display: flex;flex-direction: row;justify-content: space-between;">
                        <div>
                            <span class="material-icons-outlined">favorite_border</span>
                            <span class="material-icons-outlined">mode_comment</span>
                            <span class="material-icons-outlined">send</span>
                        </div>
                        <div>
                            <span class="material-icons-outlined">bookmark_border</span>
                        </div>
                    </div>
                    <div style="margin: 0 20px;text-align: left;font-size: 14px;"> Mr.Choonsik <b>외 {{ feeds.like_count }}명</b>이 좋아합니다.</div>
                    <div style="margin: 0 20px;text-align: left;font-size: 16px;"> bang_climb_account <b> 요세미티 등반하고 싶다.</b></div>
                    <div style="margin: 0 20px;text-align: left;font-size: 14px;"> <b>Mr.Choonsik</b> 나도 같이 갈래</div>
                    <div style="margin: 0 20px;text-align: left;font-size: 14px;"> <b>solb_climb_account</b> 나도 같이 갈래</div>
                    
                    <div style="display:flex;flex-direction: row;align-items: center; border-top: solid 1px gray ">
                        <input id="reply_{{ feed.id }}" type="text" class="form-control"
                               style="box-shadow: none; border: none; outline: none"
                               placeholder="댓글 달기..">
                        <div feed_id="{{ feed.id }}" class="upload_reply"
                             style="width: 50px;color: cornflowerblue; font-weight: bold">
                            게시
                        </div>
                    </div>
                </div>
            {% endfor %}
            
        </div>
        <div style="width: 400px;height: 1000px;position: fixed;left:62%">
            <div>
                <div style="display: flex;flex-direction: row;align-items: center;margin: 20px;">
                    <div class="box" style="width: 70px;height: 70px;">
                        <img class="profile" src="https://sir.kr/img/common/dow/ico2-dw06.svg">
                    </div>
                    <div style="margin-left: 10px;text-align: left;">
                        <div style="font-weight: bold;">
                            bang_climb_account
                        </div>
                        <div style="color: gray;">
                            Hoseok Jeong
                        </div>
                    </div>
                </div>
            </div>
            <div style="display: flex;flex-direction: row;justify-content: space-between;">
                <div style="font-weight: bold;color: gray;">
                    회원님을 위한 추천
                </div>
                <div>
                    <a href="#" style="color: black;font-weight: bold; text-decoration: none;">모두보기</a>
                </div>
            </div>
            <div style="display: flex;flex-direction: row;justify-content: space-between; align-items: center;">
                <div style="display: flex; flex-direction: row">
                    <div class="box" style="width: 35px; height: 35px">
                        <img class="profile"
                             src="https://sir.kr/img/common/dow/ico2-dw06.svg">
                    </div>
                    <div style="margin-left: 10px; text-align: left">
                        <div style="font-weight: bold;font-size: 14px">
                            solb_climb_account
                        </div>
                        <div style="color: gray;font-size: 14px">
                            나랑 같이 치킨 먹음
                        </div>
                    </div>
                </div>
    
                <div>
                    <a href="#" style="font-size: 14px;font-weight: bold;text-decoration: none">팔로우</a>
                </div>
            </div>
            <div style="display: flex;flex-direction: row;justify-content: space-between; align-items: center;">
                <div style="display: flex; flex-direction: row">
                    <div class="box" style="width: 35px; height: 35px">
                        <img class="profile"
                             src="https://sir.kr/img/common/dow/ico2-dw06.svg">
                    </div>
                    <div style="margin-left: 10px; text-align: left">
                        <div style="font-weight: bold;font-size: 14px">
                            solb_climb_account
                        </div>
                        <div style="color: gray;font-size: 14px">
                            나랑 같이 치킨 먹음
                        </div>
                    </div>
                </div>
    
                <div>
                    <a href="#" style="font-size: 14px;font-weight: bold;text-decoration: none">팔로우</a>
                </div>
            </div>
            <div style="display: flex;flex-direction: row;justify-content: space-between; align-items: center;">
                <div style="display: flex; flex-direction: row">
                    <div class="box" style="width: 35px; height: 35px">
                        <img class="profile"
                             src="https://sir.kr/img/common/dow/ico2-dw06.svg">
                    </div>
                    <div style="margin-left: 10px; text-align: left">
                        <div style="font-weight: bold;font-size: 14px">
                            solb_climb_account
                        </div>
                        <div style="color: gray;font-size: 14px">
                            나랑 같이 치킨 먹음
                        </div>
                    </div>
                </div>
    
                <div>
                    <a href="#" style="font-size: 14px;font-weight: bold;text-decoration: none">팔로우</a>
                </div>
            </div>
            <div style="display: flex;flex-direction: row;justify-content: space-between; align-items: center;">
                <div style="display: flex; flex-direction: row">
                    <div class="box" style="width: 35px; height: 35px">
                        <img class="profile"
                             src="https://sir.kr/img/common/dow/ico2-dw06.svg">
                    </div>
                    <div style="margin-left: 10px; text-align: left">
                        <div style="font-weight: bold;font-size: 14px">
                            solb_climb_account
                        </div>
                        <div style="color: gray;font-size: 14px">
                            나랑 같이 치킨 먹음
                        </div>
                    </div>
                </div>
    
                <div>
                    <a href="#" style="font-size: 14px;font-weight: bold;text-decoration: none">팔로우</a>
                </div>
            </div>
            <div style="display: flex;flex-direction: row;justify-content: space-between; align-items: center;">
                <div style="display: flex; flex-direction: row">
                    <div class="box" style="width: 35px; height: 35px">
                        <img class="profile"
                             src="https://sir.kr/img/common/dow/ico2-dw06.svg">
                    </div>
                    <div style="margin-left: 10px; text-align: left">
                        <div style="font-weight: bold;font-size: 14px">
                            solb_climb_account
                        </div>
                        <div style="color: gray;font-size: 14px">
                            나랑 같이 치킨 먹음
                        </div>
                    </div>
                </div>
    
                <div>
                </div>
                <a href="#" style="font-size: 14px;font-weight: bold;text-decoration: none">팔로우</a>
            </div>
            <div style="margin-top: 50px;font-size: 12px;color: gray;text-align: left;">소개 도움말 홍보센터 API<br>개인정보처리방침 약관 위치 인기 계정 해시태그 언어</div>
            <div style="margin-top: 20px;font-size: 12px;color: gray;text-align: left;">2021 어쩌구 저쩌구 저쩌구</div>
        </div>
    </div>
    
    <div id="modal_add_feed" class="modal_overlay">
        <div class="modal_window">
            <div class="modal_title">
                <div class="modal_title_side"></div>
                <div> 새 게시물 </div>
                <div class="modal_title_side">
                    <span id="close_modal" class="material-icons-outlined">
                        close
                    </span>
                </div>
            </div>
            <div class="modal_image_upload">

            </div>
        </div>
    </div>
    
    
<div id="first_modal" class="modal_overlay">
    <div class="modal_window">
        <div style="display: flex; flex-direction: row; justify-content: space-between">
            <div style="width: 40px; background: gray">

            </div>
            <div>
                새 이미지 업로드
            </div>
            <div style="width: 40px; background: gray">
                <span class="modal_close material-icons-outlined">close</span>
            </div>
        </div>

        <div class="img_upload_space" style="border-top: solid 1px gray;width: 778px; height: 540px;margin-top: 10px">

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


<div id="second_modal" class="modal_overlay">
    <div class="modal_window">
        <div style="display: flex; flex-direction: row; justify-content: space-between">
            <div style="width: 40px; background: gray">

            </div>
            <div>
                새 이미지 업로드
            </div>
            <div style="width: 40px; background: gray">
                <span class="modal_close material-icons-outlined">close</span>
            </div>
        </div>

        <div style="border-top: solid 1px gray;display: flex; flex-direction: row;margin-top: 10px">
            <div class="img_upload_space" style="width: 500px; height: 540px;">

            </div>
            <div style="border-left: solid 1px gray">
                <div>
                    <textarea id="input_feed_content" class="form-control" style="width: 276px; height: 400px"
                              id="exampleFormControlTextarea1" rows="5"></textarea>
                </div>
                <button id="feed_create_button" type="button" class="btn btn-primary" style="width: 100%">
                    공유하기
                </button>
            </div>

        </div>

    </div>
</div>

    <script>
        let files;

        $('#nav_bar_add_box').click(function(){
           $('.modal_overlay').css({
                display:'flex'
           });
           $(document.body).css({
                overflow : 'hidden'
            })
        })

        $('#feed_create_button').click(function(){
            alert("공유하기 완료" + files[0].name);

            let file = files[0];
            let image = files[0].name;
            let content = $('#input_feed_content').val();
            let user_id= "bang_climb_account";
            let profile_image= "https://sir.kr/img/common/dow/ico2-dw06.svg";

            let fd = new FormData();

            fd.append('file',file);
            fd.append('image',image);
            fd.append('content',content);
            fd.append('user_id',user_id);
            fd.append('profile_image',profile_image);

            $.ajax({
                url: "/content/upload",
                data: fd,
                processData : false,
                contentType : false,
                method : "POST",
                success : function(data){
                    console.log("성공");
                },
                error : function(request, status, error){
                    console.log("에러 발생");
                },
                compile : function(){
                    console.log("완료");
                }
            })
        });

        $('.img_upload_space')
        .on("dragover", dragOver)
        .on("dragleave", dragOver)
        .on("drop", uploadFiles);

    function dragOver(e) {
        e.stopPropagation();
        e.preventDefault();

        if (e.type == "dragover") {
            $(e.target).css({
                "background-color": "black",
                "outline-offset": "-20px"
            });
        } else {
            $(e.target).css({
                "outline-offset": "-10px"
            });
        }
    }

    function uploadFiles(e) {
        e.stopPropagation();
        e.preventDefault();

        e.dataTransfer = e.originalEvent.dataTransfer; //2
        files = e.target.files || e.dataTransfer.files;
        console.log("뭔가 파일을 올렸네??" + files[0].name);
        if (files.length > 1) {
            alert('하나만 올려라.');
            return;
        }

        if (files[0].type.match(/image.*/)) {

            $('#first_modal').css({
                display: 'none'
            });
            $('#second_modal').css({
                display: 'flex'
            });

            $('.img_upload_space').css({
                "background-image": "url(" + window.URL.createObjectURL(files[0]) + ")",
                "outline": "none",
                "background-size": "100%",
                "background-repeat": "no-repeat",
                "background-position": "center"
            });
        } else {
            alert('이미지가 아닙니다.');
            return;
        }

    }
        
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

Collaborative Calculation and Data Science

colby

sagemath

Product

Resources

Company