summaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
authorNate Buttke <nate-web@riseup.net>2023-07-27 17:29:36 -0700
committerNate Buttke <nate-web@riseup.net>2023-07-27 17:29:36 -0700
commitdb824e067d17eba3469a49dffb04566aed3449b2 (patch)
tree3cedc59cf4824f1774e2f9b9148857cedea1ab68 /frontend
parentad9ebbe7c78c2cf7c717d7898534371d59f325d9 (diff)
add frontend components with my fixes. still messy.
Diffstat (limited to 'frontend')
-rw-r--r--frontend/index.html132
-rw-r--r--frontend/jsmain.js0
-rw-r--r--frontend/style.css138
3 files changed, 270 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>
diff --git a/frontend/jsmain.js b/frontend/jsmain.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/frontend/jsmain.js
diff --git a/frontend/style.css b/frontend/style.css
new file mode 100644
index 0000000..8417106
--- /dev/null
+++ b/frontend/style.css
@@ -0,0 +1,138 @@
+html {
+ font-size: 16px;
+}
+
+#main-content {
+ text-align: center;
+ min-height: 100vh;
+}
+
+
+#jumbo-title {
+ font-weight: 900;
+ font-size: 10rem;
+ font-family: 'Inter' !important;
+ color: #2d3436;
+}
+
+#top-bar {
+ padding: 1rem 2rem 1rem 2rem;
+ border-bottom: #eee 1px solid;
+ margin-bottom: 2rem;
+}
+
+.top-xs {
+ align-content: start !important;
+}
+
+
+.normal-font {
+ font-size: 1rem !important;
+ color: #fff !important;
+ font-family: 'Inter' !important;
+}
+
+.normal-font-light {
+ font-size: 1rem !important;
+ color: #2d3436 !important;
+ font-family: 'Inter' !important;
+}
+
+.fat-font {
+ font-weight: 900;
+}
+
+code {
+ background-color: #2a3b4d;
+ border-radius: 2px;
+ padding: 1px;
+}
+
+.ui.button {
+ /* padding: 0.5rem !important; */
+ font-size: 1rem !important;
+ margin-left: 0.5rem !important;
+}
+
+.footie{
+ border-radius: 5px;
+ background: #2d3436;
+ padding: 2rem;
+}
+
+#transcription-result{
+ border-radius: 5px;
+ border: 1px solid #ddd;
+ min-height: 10rem;
+ margin: 1rem 0.5rem 1rem 0.5rem;
+ padding: 1rem;
+ text-align: left;
+}
+
+#spinny {
+ position: absolute;
+ z-index: 10;
+ width: 100%;
+ height: 100%;
+ display: none;
+}
+
+#transcription-title {
+ text-align: center;
+ text-transform: uppercase;
+ letter-spacing: 1rem;
+ font-weight: 900;
+}
+
+.divider{
+ color: #fff !important;
+}
+
+#all-inputs{
+ padding: 1rem;
+ border: 1px solid #2d3436;;
+ border-radius: 5px;
+ background: #2d3436;;
+}
+
+audio{
+ border: 1px solid #424e51;
+ border-radius: 5px;
+}
+
+#blinker {
+ color: #db2828;
+ margin: 1rem;
+ display: none;
+}
+
+.blink {
+ animation: blinker 1s infinite alternate;
+}
+
+.code, .summary{
+ text-align: left;
+ min-height: 500px;
+ width: 100%;
+ display: inline-block;
+ background: #282c34;
+ padding: 20px;
+ color: #fff;
+ margin: 5px;
+ border-radius: 5px;
+ font-size: 16px;;
+}
+
+#main-title{
+ background-color: #eee;
+ color: red;
+ font-size: 25px !important;
+ padding: 10px;
+ margin: 10px;
+ border-radius: 5px;;
+}
+
+@keyframes blinker {
+from { opacity: 1; }
+to { opacity: 0; }
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-15 20:00:05 +0000