arya/mozhi
1
0
Fork 0
mirror of https://codeberg.org/aryak/mozhi synced 2025-02-27 08:45:09 +05:30
Code Issues Actions Packages Projects Releases Wiki Activity

Added more style, also buttons are sticky when away from button (fixes #16 in a way.)

Browse Source
This commit is contained in:
Midou36O 2024-01-09 23:37:45 +01:00
parent aa39615d06
commit 014f15e1d1
Signed by untrusted user: midou
GPG Key ID: 1D134A95FE521A7A
5 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/css/style.css
View File

@ -1,13 +1,11 @@
/*General theming*/
body {
font-family: sans-serif;
margin: 20px auto;
line-height: 1.5em;
max-width: 1000px;
font-size: 1rem;
background-color: #222;
color: #f8f9fa;
padding: 0 10px;
hyphens: auto;
}
@ -94,7 +92,6 @@ button {
justify-content: flex-end;
gap: 2px;
border: none;
border-radius: 4px;
background: #f57c00;
}
button:hover {
@ -151,6 +148,7 @@ button:hover {
margin: 5px 10px;
}
/*
.selected-option {
padding: 7px;
border: 1px solid #ccc;
@ -158,6 +156,7 @@ button:hover {
text-decoration: none;
color: #f8f9fa;
}
*/
.options {
display: none;

1
public/css/tailwind.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
views/footer.html
View File

@ -2,12 +2,12 @@
<footer style="text-align: center">
<br />
<p>
Copyright 2023 <a href="https://aryak.me">Arya Kiran</a> and other
Copyright 2023 <a class="text-orange-600 hover:font-bold no-underline" href="https://aryak.me">Arya Kiran</a> and other
contributors
</p>
<p>
View Source Code on
<a href="https://codeberg.org/aryak/mozhi">Codeberg</a>
<a class="text-orange-600 hover:font-bold no-underline" href="https://codeberg.org/aryak/mozhi">Codeberg</a>
</p>
</footer>
</body>

10
views/header.html
View File

@ -26,8 +26,14 @@
><img src="/assets/mozhi.png" alt="Mozhi Logo" class="navlogo"
/></a>
<nav>
<a href="/about">About</a>
<a href="/api/swagger">API</a>
<a class="text-orange-600 hover:font-bold no-decoration" href="/about"
>About</a
>
<a
class="text-orange-600 hover:font-bold no-decoration"
href="/api/swagger"
>API</a
>
</nav>
</header>
<br />

24
views/index.html
View File

@ -60,7 +60,7 @@
<textarea autofocus class="item" id="input" name="text" dir="auto" placeholder="Enter Text Here">
{{ .OriginalText }}</textarea>
{{if .TtsFrom}}
<audio controls>
<audio class="mx-auto" controls>
<source type="audio/mpeg" src="{{ .TtsFrom }}" />
</audio>
{{end}}
@ -74,7 +74,7 @@
{{.OutputText}}</textarea>
{{if .AutoDetect}}
Detected Language: {{.AutoDetect}}{{end}} {{if $.TtsTo}}
<audio controls>
<audio class="mx-auto" controls>
<source type="audio/mpeg" src="{{ $.TtsTo }}" />
</audio>
{{end}}
@ -86,23 +86,25 @@
{{.Translation.OutputText}}</textarea>
{{if .Translation.AutoDetect}}
Detected Language: {{.Translation.AutoDetect}}{{end}} {{if .TtsTo}}
<audio controls>
<source type="audio/mpeg" src="{{ .TtsTo }}" />
<audio class="mx-auto" controls>
<source class="mx-auto" type="audio/mpeg" src="{{ .TtsTo }}" />
</audio>
{{end}}
{{end}}
{{end}}
<div style="display:flex; justify-content:space-around; align-items:center;">
{{if .TranslationExists}}
<button class="wrap bg-orange-600 flex px-1 py-2 justify-end gap-1 rounded" type="button" onclick="copyToClipboard()">
<div class="sticky bottom-0 inline-flex w-full md:gap-2 md:py-0 md:flex place-content-around items-center">
<button class="wrap hover:bg-orange-700 bg-orange-600 flex px-1 py-2 justify-end gap-1 rounded-l md:rounded" type="button" onclick="copyToClipboard()">
Copy the translation
</button>
{{end}}
{{ if and .Engine .From .To .OriginalText }}<p><a class="wrap bg-orange-600 flex px-1 py-2 justify-end gap-1 rounded" href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{end}}
{{if .TranslationExists}}
<button class="wrap bg-orange-600 flex px-1 py-2 justify-end gap-1 rounded" type="submit">
{{else}}
<button class="wrap bg-orange-600 flex px-1 py-2 justify-end gap-1 rounded" style="margin-left:auto; position:relative; left:-10%;margin-top: 1%;" type="submit">
<div class="pt-4">
{{end}}
{{ if and .Engine .From .To .OriginalText }}<p><a class="wrap hover:bg-orange-700 bg-orange-600 flex px-1 py-2 justify-end gap-1 md:rounded" href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{end}}
{{if .TranslationExists}}
<button class="wrap hover:bg-orange-700 bg-orange-600 flex px-1 py-5 md:py-1 justify-end gap-1 rounded-r md:rounded" type="submit">
{{else}}
<button class="wrap hover:bg-orange-700 bg-orange-600 flex px-1 py-1 justify-end gap-1 rounded" style="margin-left:auto; position:relative; left:-10%;margin-top: 1%;" type="submit">
{{end}}
Translate!
</button>