Front/Html & Css

Scrappers ๋งŒ๋“ ๊ฑฐ saved - HTML

<!DOCTYPE html>

<html lang="ko">
<head>
    <title>SaveBox | Scrappers </title>

<meta property="og:title" content="Scrappers"/>
<meta property="og:description" content="์‹ค์‹œ๊ฐ„ ๋‰ด์Šค ๋žญํ‚น ํ™•์ธ & ์ €์žฅ"/>
<meta property="og:image" content="{{ url_for('static', filename='ogimg.png') }}"/>

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous">

    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>

    <!-- ๊ตฌ๊ธ€ํฐํŠธ -->
    <link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@300&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500&display=swap" rel="stylesheet">

     <style>
:root {
    --color-black: black;
    --color-white: white;
    --font-large: 48px;
    --font-medium: 24px;
    --font-kind: Black Han Sans, sans-serif;
}

/* navbar */

@media screen and (max-width: 700px) {

    nav {
        width: 700px;
    }

    div.card {
        width: 670px;
        display: inline-block;
        margin: 15px 15px 15px 15px;
    }
    div.center {
        width:680px;
        display:block;
        text-align:center;
    }
  img.card-img-top{
    width:670px;
    height:400px;
}
}


nav {
    background-color:black;
    padding: 40px 40px;
    color: var(--color-white);
    font-size: var(--font-large);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
}

nav ul {
    width: 200px;
    padding: 0;
    margin-bottom: 0;
    font-weight: normal;
}

nav li {
    list-style: none;
    font-size: var(--font-medium);
}

nav a {
    color: white;
    padding: 5px;
    margin: 0px 10px 0px 10px;
}

nav a:hover {
    cursor: pointer;
    color: black;
    background: white;
    border-radius: 4px;
    text-decoration: none;
    transform: scale(1.1);
    transition: transform 200ms ease-in-out ;
}

.navbar_list {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

/* home */

.home {
    padding: 100px 20px;
    text-align: center;
}

.logo img {
    width: 100px;
    height: 100px;
    color: white;
}

.logo_Btn {
    border: none;
    background: none;
    outline: none;
}

.logo_Btn:hover {
    transform: translateY(6px) rotate(0.8turn);
    transition: all 500ms ease-in-out;
}

.logo_Btn:active {
    transform: scale(1.1);
}

.logo_Btn:focus {
    outline: 0;
}


/*.col-sm-6 col-md-4 {*/
/*    width: 100%;*/
/*}*/



/*@media screen and (max-width: 768px) {*/
/*    nav {*/

/*    }*/

.warp {
    margin:auto;
}
    .card {
        width: 600px;
        display:inline-block;
        margin:15px;
    }

    .card-box {
        align-items: center;
    }

.center {
    margin-top:10px;
    display:block;
    text-align:center;
}

.card-img-top{
    width:600px;
    height:400px;
}


    </style>
</head>
<body>
<!-- HTML body structuring -->
<!-- logo(?) & title & category (Home, Category, and Saved)-->
<div class="warp">
<nav id="navbar"  style="font-family:'Black Han Sans'">Scrappers
    <div class="logo">
        <button class="logo_Btn" onclick="reload09()"><span style="font-size: 80px;">๐Ÿ“ซ</span></button>
    </div>
    <!-- ํ˜„์žฌ ๋‚ ์งœ ์‹œ๊ฐ„ ํ‘œ๊ธฐํ•ด์„œ ์—…ํ…Œ์ดํŠธ ์‹œ๊ฐ ์•Œ๋ ค์ฃผ๊ธฐ -->
    <p id="datetime"></p>
    <ul class="navbar_list">
        <a href="{{ url_for('home') }}">
            <li>Home</li>
        </a>
        <a href="{{ url_for('saveBox') }}">
            <li>Saved</li>
        </a>
    </ul>
</nav>
    </div>
<!--style="outline:none; background:none; border:none; color:pink;"-->
<div class="center">
    <button class="btn btn-info" onclick="sort_recent()" style="font-family:'Stylish'">Recent</button>
    <button class="btn btn-info" onclick="sort_Review()">๐Ÿ’ฌ</button>
    <button  class="btn btn-info" onclick="sort_like()">๐Ÿ”ฅ</button>
</div>
<div class="card-box" id="save-box" style=''> </div>


    <script>
        function reload09() {
            window.location.reload()
        }

        $(document).ready(function () {
            showArticles(), readReview()
        });

        function showArticles() {
            $.ajax({
                type: "GET",
                url: "/showSaveNews",
                data: {},
                success: function (response) {
                    let list = response['list_saveBox']
                    for (let i = 0; i < list.length; i++) {
                        let title = list[i]['title']
                        let img = list[i]['img']
                        let url = list[i]['url']
                        let newspaper = list[i]['newspaper']
                        let like_counts = list[i]['like_counts']
                        let review_counts = list[i]['review_counts']

                        let temp_html = `
                             <div class="card" style="">

                    <img class="card-img-top"
                         src="${img}"
                         alt="Card image cap">
                    <div class="card-body">
                       <a target="_blank" href="${url}" class="card-title" style="font-family: 'Noto Serif KR', serif; font-size:20px;">${title}</a>
                       <p style="font-family:'Black Han Sans'; color:lightslategrey; font-size:20px;">${newspaper}</p>



                    <div class="input-group mb-3">
                      <input type="text" id="${url}_input" class="form-control" placeholder="..." aria-label="Recipient's username" aria-describedby="button-addon2">
                      <button style="width:60px;" type="button" class="btn btn-dark" onclick="makeReview('${url}')"><span style="font-family:'Black Han Sans'">์ž‘์„ฑ</span></button>
                      <button type="button" id="${url}_save" style="border:none; outline:none; background:none; font-size:25px;" onclick="readReview('${url}')" style="width:60px;">๐Ÿ’ฌ<span style = "color:#7986cb;"><b>${review_counts}</b></span></button>
                      <button style="border:none; outline:none; background:none; font-size:25px;" onclick="incrementLikes('${url}')">๐Ÿ”ฅ <b><span style="color:#f50057;">${like_counts}</span></b></button>
                    </div>

                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col" style="font-family:'Noto Serif KR'"><b>comment</b></th>
                            </tr>
                            <tbody id="${url}_comment" class="9999">

                            </tbody>

                        </thead>
                    </table>
                   `
                        $('#save-box').append(temp_html)
                    }
                }
            })
        }

        function sort_like() {
            $.ajax({
                type: 'GET',
                url: '/showSaveNews/like_sort',
                data: {},
                success: function (response) {
                    $('#save-box').html("");
                    let list = response['list_saveBox']
                    for (let i = 0; i < list.length; i++) {
                        let title = list[i]['title']
                        let img = list[i]['img']
                        let url = list[i]['url']
                        let newspaper = list[i]['newspaper']
                        let like_counts = list[i]['like_counts']
                        let review_counts = list[i]['review_counts']

                        let temp_html = `
                             <div class="card" style="">
                    <img class="card-img-top"
                         src="${img}"
                         alt="Card image cap">
                    <div class="card-body">
                       <a target="_blank" href="${url}" class="card-title" style="font-family: 'Noto Serif KR', serif; font-size:20px;">${title}</a>
                       <p style="font-family:'Black Han Sans'; color:lightslategrey; font-size:20px;">${newspaper}</p>

                    <div class="input-group mb-3">
                      <input type="text" id="${url}_input" class="form-control" placeholder="..." aria-label="Recipient's username" aria-describedby="button-addon2">
                      <button style="width:60px;" type="button" class="btn btn-dark" onclick="makeReview('${url}')"><span style="font-family:'Black Han Sans'">์ž‘์„ฑ</span></button>
                      <button type="button" id="${url}_save" style="border:none; outline:none; background:none; font-size:25px;" onclick="readReview('${url}')" style="width:60px;">๐Ÿ’ฌ<span style = "color:#7986cb;"><b>${review_counts}</b></span></button>
                      <button style="border:none; outline:none; background:none; font-size:25px;" onclick="incrementLikes('${url}')">๐Ÿ”ฅ <b><span style="color:#f50057;">${like_counts}</span></b></button>
                    </div>

                    <table class="table">
                        <thead>
                            <tr>
                            <th scope="col" style="font-family:'Noto Serif KR'"><b>comment</b></th>
                            </tr>
                            <tbody id="${url}_comment" onload="readReview('${url}')" class="9999">

                            </tbody>

                        </thead>
                    </table>
                   `
                        $('#save-box').append(temp_html)
                    }
                }
            });

        }

        function sort_recent() {
            $.ajax({
                type: "GET",
                url: "/showSaveNews/recent",
                data: {},
                success: function (response) {
                    $('#save-box').html("");
                    let list = response['list_saveBox']
                    for (let i = list.length-1; i >= 0; i--) {
                        let title = list[i]['title']
                        let img = list[i]['img']
                        let url = list[i]['url']
                        let newspaper = list[i]['newspaper']
                        let like_counts = list[i]['like_counts']
                        let review_counts = list[i]['review_counts']

                        let temp_html = `
                             <div class="card" style="">
                    <img class="card-img-top"
                         src="${img}"
                         alt="Card image cap">
                    <div class="card-body">
            <a target="_blank" href="${url}" class="card-title" style="font-family: 'Noto Serif KR', serif; font-size:20px;">${title}</a>
                       <p style="font-family:'Black Han Sans'; color:lightslategrey; font-size:20px;">${newspaper}</p>

                    <div class="input-group mb-3">
                      <input type="text" id="${url}_input" class="form-control" placeholder="..." aria-label="Recipient's username" aria-describedby="button-addon2">
                      <button style="width:60px;" type="button" class="btn btn-dark" onclick="makeReview('${url}')"><span style="font-family:'Black Han Sans'">์ž‘์„ฑ</span></button>
                      <button type="button" id="${url}_save" style="border:none; outline:none; background:none; font-size:25px;" onclick="readReview('${url}')" style="width:60px;">๐Ÿ’ฌ<span style = "color:#7986cb;"><b>${review_counts}</b></span></button>
                      <button style="border:none; outline:none; background:none; font-size:25px;" onclick="incrementLikes('${url}')">๐Ÿ”ฅ <b><span style="color:#f50057;">${like_counts}</span></b></button>
                    </div>

                    <table class="table">
                        <thead>
                            <tr>
                               <th scope="col" style="font-family:'Noto Serif KR'"><b>comment</b></th>
                            </tr>
                            <tbody id="${url}_comment" onload="readReview('${url}')" class="9999">

                            </tbody>

                        </thead>
                    </table>
                   `
                        $('#save-box').append(temp_html)
                    }
                }
            })
        }

        function sort_Review() {
            $.ajax({
                type: "GET",
                url: "/showSaveNews/review",
                data: {},
                success: function (response) {
                    $('#save-box').html("");
                    let list = response['list_saveBox']
                    for (let i = list.length-1; i >= 0; i--) {
                        let title = list[i]['title']
                        let img = list[i]['img']
                        let url = list[i]['url']
                        let newspaper = list[i]['newspaper']
                        let like_counts = list[i]['like_counts']
                        let review_counts = list[i]['review_counts']

                        let temp_html = `
                             <div class="card" style="">
                    <img class="card-img-top"
                         src="${img}"
                         alt="Card image cap">
                    <div class="card-body">
            <a target="_blank" href="${url}" class="card-title" style="font-family: 'Noto Serif KR', serif; font-size:20px;">${title}</a>
                       <p style="font-family:'Black Han Sans'; color:lightslategrey; font-size:20px;">${newspaper}</p>

                    <div class="input-group mb-3">
                      <input type="text" id="${url}_input" class="form-control" placeholder="..." aria-label="Recipient's username" aria-describedby="button-addon2">
                      <button style="width:60px;" type="button" class="btn btn-dark" onclick="makeReview('${url}')"><span style="font-family:'Black Han Sans'">์ž‘์„ฑ</span></button>
                      <button type="button" id="${url}_save" style="border:none; outline:none; background:none; font-size:25px;" onclick="readReview('${url}')" style="width:60px;">๐Ÿ’ฌ<span style = "color:#7986cb;"><b>${review_counts}</b></span></button>
                      <button style="border:none; outline:none; background:none; font-size:25px;" onclick="incrementLikes('${url}')">๐Ÿ”ฅ <b><span style="color:#f50057;">${like_counts}</span></b></button>
                    </div>

                    <table class="table">
                        <thead>
                            <tr>
                               <th scope="col" style="font-family:'Noto Serif KR'"><b>comment</b></th>
                            </tr>
                            <tbody id="${url}_comment" onload="readReview('${url}')" class="9999">

                            </tbody>

                        </thead>
                    </table>
                   `
                        $('#save-box').append(temp_html)
                    }
                }
            })
        }

        function incrementLikes(url) {
                $.ajax({
                    type: 'POST',
                    url: '/showSaveNews/like',
                    data: {url_give: url},
                    success: function (response) {
                        alert(response['msg']);
                        window.location.reload();
                    }
                });
        }

        function makeReview(url) {
            let temp = document.getElementById(url + "_input")
            // let temp3 = document.getElementById(url)
            // url์€ ๊ทธ๋ƒฅ url๋กœ ํ•ด์„œ ๋„˜์–ด๊ฐ

            let comment = $(temp).val()

            if (comment == '') {
                console.log('๋Œ“๊ธ€ ๋ฏธ์ž‘์„ฑ')
            } else {

            // ์ธํ’‹๋ฐ•์Šค๋Š” ์ด๋ ‡๊ฒŒ val() ํ•ด์•ผ ๊ฐ’์„ ๊ฐ€์ง€๊ณ ์˜ด

            $.ajax({
                type: "POST",
                url: "/review",
                data: {
                    review_give: comment,
                    url_give: url,
                },
                // ์ง€๊ธˆ ํŒŒ์ด์ฌ์œผ๋กœ ๋ณด๋‚ด๋Š” ๊ฐ’๋“ค.
                success: function (response) {
                    console.log(comment)
                    alert(response["msg"]);
                    window.location.reload();
                }
            })
        }
        }

                // ๋Œ“๊ธ€์ฐฝ ํ™•์ธ
        function readReview(url) {
            console.log(url)
            // let save = document.getElementById(url + "_save")
            // $(url).trigger("click");
                $.ajax({
                    type: 'POST',
                    url: '/reviews',
                    data: {
                        url_give: url,
                    },
                    success: function (response) {
                        let reviewsBox = document.getElementById(url + "_comment")
                        let reviews = response['all_reviews']

                        for (let i = 0; i < reviews.length; i++) {
                            let showReview = reviews[i]['review']
                            let temp_html = `
                            <tr>
                            <td style="font-family:'Noto Serif KR'">${showReview}</td>
                            </tr>
                            `
                            $(reviewsBox).append(temp_html)}
                            document.getElementById(url + "_save").disabled = true;
                        }
                })
            }


    </script>
</section>

</body>
</html>
์ €์ž‘์žํ‘œ์‹œ
MagicPower
๊ฐœ๋ฐœ๊ณผ ์‹œ