<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Link Saver</title>

        <meta name="description" content="A web app to save and manage all the links from social networks and the web.">

        <meta name="keywords" content="Link Saver, Web App, Save links">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



        <script type="text/javascript">

            try {

                var links = [];



                function saveLocal(key, data) {

                    localStorage.setItem(key, JSON.stringify(data));

                }



                function loadLocal(key) {

                    return JSON.parse(localStorage.getItem(key));

                }



                function addLink() {

                    var link = document.getElementById('link-input').value;

                    var tag = document.getElementById('tag-input').value;

                    links.push({link: link, tag: tag});

                    saveLocal('links', links);

                    displayLinks();

                }



                function displayLinks() {

                    var linksContainer = document.getElementById('links-container');

                    linksContainer.innerHTML = '';

                    links.forEach(function(linkObj, index) {

                        linksContainer.innerHTML += '<div class="link-item"><a href="' + linkObj.link + '">' + linkObj.link + '</a> <span class="tag">' + linkObj.tag + '</span></div>';

                    });

                }



                document.addEventListener("DOMContentLoaded", function() {

                    links = loadLocal('links') || [];

                    displayLinks();

                });

            } catch (error) {

                throw error;

            }

        </script>

        

        <style>

            body {

                background: linear-gradient(to right, #ff9966, #ff5e62);

                font-family: 'Open Sans', sans-serif;

            }



            .link-item {

                background: #fff;

                border-radius: 5px;

                padding: 10px;

                margin-bottom: 10px;

            }



            .tag {

                font-size: 0.8em;

                color: #888;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <h1 class="text-light">Link Saver <i class="fa fa-link" aria-hidden="true"></i></h1>

            <div class="input-group mb-3">

              <input type="text" id="link-input" class="form-control" placeholder="Link" aria-label="Link">

              <input type="text" id="tag-input" class="form-control" placeholder="Tag" aria-label="Tag">

              <button class="btn btn-outline-secondary" type="button" onclick="addLink()">Save</button>

            </div>

            <div id="links-container"></div>

        </div>

    </body>

</html>