diff options
| author | Nate Buttke <nate-web@riseup.net> | 2023-07-27 17:29:36 -0700 |
|---|---|---|
| committer | Nate Buttke <nate-web@riseup.net> | 2023-07-27 17:29:36 -0700 |
| commit | db824e067d17eba3469a49dffb04566aed3449b2 (patch) | |
| tree | 3cedc59cf4824f1774e2f9b9148857cedea1ab68 /frontend/index.html | |
| parent | ad9ebbe7c78c2cf7c717d7898534371d59f325d9 (diff) | |
add frontend components with my fixes. still messy.
Diffstat (limited to 'frontend/index.html')
| -rw-r--r-- | frontend/index.html | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..47060ab --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;900&display=swap" rel="stylesheet"> + + <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script> + <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css"> + <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script> + + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"> + <!-- <link rel="icon" type="image/x-icon" href="./assets/logo.ico"> --> + <link rel="stylesheet" + href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark-reasonable.min.css"> + <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> + + <link href="./style.css" rel="stylesheet"> + <title>talktoANYcode</title> + </head> + <body> + <div id="main-content" class="row center-xs"> + <div id="spinny"> + <div class="ui active inverted dimmer"> + <div class="ui large text loader" id="loader">Querying...</div> + </div> + <p></p> + <p></p> + <p></p> + </div> + <div class="col-xs-12 col-md-12 center-xs"> + <a href="/" style="text-decoration: none;"> + <h1 id="jumbo-title">talkto<span style="color:tomato">ANY</span>code</h1> + </a> + </div> + <div class="row center-xs col-xs-12" id="qa"> + <div class="ui action input col-xs-8" > + <input type="text" placeholder="Talk to Code!" id="talk-text" style="font-size: 20px;"> + <button class="ui red button" id="talk-button">Search</button> + <button class="ui red button" id="talk-button-2">Explain</button> + </div> + </div> + <div id="main-title"></div> + <div class="row center-xs col-xs-12" id="main"> + + </div> + <div class="col-xs-12 center-xs footie"> + <p> + <a class="col-xs-12 ui white label" href="https://git.nategb.xyz/talk-to-any-code.git/" target="_blank"> + <i class="key icon"></i> + git.nategb.xyz/talk-to-any-code.git/ + </a> + <span style="color:white">forked from</span> + <a class="col-xs-12 ui white label" href="https://github.com/nuwandavek/talktocode" target="_blank"> + <i class="github icon"></i> + nuwandavek/talktocode + </a> + </p> + </div> + </div> + <script> + res = {{payload|tojson}}; + + console.log(res); + text = "" + if (res['loctype'] == "folder"){ + text+="<div class='code'>" + res['text'].forEach((a)=>{ + text += "<div><a href='/?path="+a[0]+"'>"+a[0]+"</a><div>" + }) + text+="<div>" + + } + else if(res['loctype'] == "file"){ + leftClass = "language-go" + res['text'].forEach((a, i)=>{ + text += '<div class="col-xs-5 code" id="code-'+i+'"><pre><code class="language-go">'+a[0]+'</code></pre></div>' + text += '<div class="col-xs-5 summary" id="summary-"'+i+'><p>'+a[1]+'</p></div>' + }) + } + else{ + text = ""; + } + $("#main").html(text); + $("#main-title").html(res['parents'] + "/" + res['current']); + hljs.highlightAll(); + + $("#talk-button").click(()=>{ + query = $("#talk-text").val() + console.log(query); + $("#spinny").show(); + + fetch('/answer?q='+query, {method: "GET"}) + .then((response) => response.json()) + .then((data) => { + console.log(data); + $("#spinny").hide(); + text = "" + data.forEach((a, i)=>{ + text += '<div class="col-xs-5 code" id="code-'+i+'"><pre><code class="language-go">'+a['blob']+'</code></pre></div>' + text += '<div class="col-xs-5 summary" id="summary-"'+i+'><p>'+a['summary']+'</p></div>' + }) + $("#main").html(text); + $("#main-title").html(""); + hljs.highlightAll(); + + }); + }) + + $("#talk-button-2").click(()=>{ + query = $("#talk-text").val() + console.log(query); + $("#spinny").show(); + + fetch('/explain?q='+query, {method: "GET"}) + .then((response) => response.json()) + .then((data) => { + console.log(data); + $("#spinny").hide(); + $("#main").html('<div class="col-xs-5 code"><pre><code class="language-plaintext">'+data+'</code></pre></div>'); + $("#main-title").html(""); + hljs.highlightAll(); + + }); + }) + + </script> + <script src="./jsmain.js"></script> + </body> +</html> |