<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>ISBN Book Scanner for College Library</title>

        <meta name="description" content="A fun and colorful ISBN book scanner app for use in a college library.">

        <meta name="keywords" content="ISBN, book scanner, college library, web app">



        <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">

        <link href='https://fonts.googleapis.com/css?family=Patrick+Hand' rel='stylesheet' type='text/css'>

        <script src="https://rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>



        <!-- Built-In Functions for Apps -->

        <script type="text/javascript">

            var localStoragePrefix = "ct-168159297233023";

            var lastSave = 0;

            // save to localstorage

            function saveLocal(data) {

                if (Date.now() - lastSave < 1000) {

                    return;

                }

                // save to cookie

                let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname +  "'; SameSite=Strict";

                cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString();

                document.cookie = cookie;

                lastSave = Date.now();

            }



            // load from localstorage

            function loadLocal() {

                var cookiePrefix = localStoragePrefix + "=";

                var cookieStart = document.cookie.indexOf(cookiePrefix);

                if (cookieStart > -1) {

                    let cookieEnd = document.cookie.indexOf(";", cookieStart);

                    if (cookieEnd == -1) {

                        cookieEnd = document.cookie.length;

                    }

                    var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd);

                    return JSON.parse(cookieData);

                }

            }

        </script>



        <script type="text/javascript">

            // App Javascript Goes Here

            $(document).ready(function() {

                $("#scan-isbn").click(function() {

                    var isbn = $("#isbn-input").val().trim();

                    if (isbn) {

                        fetchBookData(isbn);

                    }

                });



                $("#scan-barcode").click(function() {

                    $("#barcode-input").trigger("click");

                });



                $("#barcode-input").on("change", function() {

                    startBarcodeScanner();

                });



                function fetchBookData(isbn) {

                    var url = "https://openlibrary.org/api/books?bibkeys=ISBN:" + isbn + "&format=json&jscmd=data";

                    $.getJSON(url, function(response) {

                        var key = "ISBN:" + isbn;

                        if (response[key]) {

                            displayBookData(response[key]);

                        } else {

                            $("#book-data").html("<p class='text-danger'>Book not found. Please try another ISBN.</p>");

                        }

                    });

                }



                function displayBookData(book) {

                    var html = "<h3>" + book.title + "</h3>";

                    html += "<p>Author: " + book.authors[0].name + "</p>";

                    html += "<p>Published: " + book.publish_date + "</p>";

                    $("#book-data").html(html);

                }



                function startBarcodeScanner() {

                    var input = document.getElementById('barcode-input');

                    var file = input.files[0];



                    if (!file) {

                        return;

                    }



                    var reader = new FileReader();

                    reader.onload = function(e) {

                        Quagga.decodeSingle({

                            decoder: {

                                readers: ["ean_reader"]

                            },

                            src: e.target.result

                        }, function(result) {

                            if (result && result.codeResult) {

                                var isbn = result.codeResult.code;

                                $("#isbn-input").val(isbn);

                                fetchBookData(isbn);

                            } else {

                                $("#book-data").html("<p class='text-danger'>Barcode not found. Please try another image.</p>");

                            }

                        });

                    };

                    reader.readAsDataURL(file);

                }

            });

        </script>



        <style>

            /* App CSS Goes Here */

            body {

                font-family: 'Patrick Hand', cursive;

                background: linear-gradient(to right, #fceabb, #f8b500);

            }



            #main-container {

                text-align: center;

                padding-top: 50px;

            }



            #isbn-input {

                width: 50%;

                margin-bottom: 10px;

                text-align: center;

            }



            #scan-isbn, #scan-barcode {

                cursor: pointer;

            }



            #barcode-input {

                display: none;

            }

        </style>

    </head>

    <body>

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

            <!-- App HTML Goes Here -->

            <h1>📚 ISBN Book Scanner for College Library 📚</h1>

            <p>Enter the ISBN below to get book information:</p>

            <input type="text" id="isbn-input" placeholder="Enter ISBN" />

            <br />

            <button id="scan-isbn" class="btn btn-primary">🔍 Scan ISBN</button>

            <button id="scan-barcode" class="btn btn-primary">📷 Take Picture of Barcode</button>

            <input type="file" id="barcode-input" accept="image/*" capture="camera" />

            <div id="book-data"></div>

        </div>

    </body>

</html>