Rooba
/
ImHex
mirror of https://github.com/WerWolv/ImHex.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

web: More UI and SEO improvements

This commit is contained in:
WerWolv 2023-12-09 12:06:20 +01:00
parent cf13404254
commit 350635d464
3 changed files with 69 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
dist/web/source/index.html vendored
View File

@ -9,7 +9,7 @@
<!-- Primary Meta Tags --> <!-- Primary Meta Tags -->
<title>ImHex Web - Free Online Hex Editor for Reverse Engineers</title> <title>ImHex Web - Free Online Hex Editor for Reverse Engineers</title>
<meta name="title" content="ImHex"> <meta name="title" content="ImHex">
<meta name="description" content="Free and extremely powerful Online Hex Editor"> <meta name="description" content="Free and extremely powerful Online Hex Editor. ImHex is a free and open source Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Open Graph / Facebook --> <!-- Open Graph / Facebook -->
@ -67,13 +67,29 @@
<body> <body>
<div id="loading" class="centered"> <div id="loading" class="centered">
<img src="https://raw.githubusercontent.com/WerWolv/ImHex/master/plugins/builtin/romfs/assets/dark/banner.png" id="logo"/> <img src="https://raw.githubusercontent.com/WerWolv/ImHex/master/plugins/builtin/romfs/assets/dark/banner.png" id="logo"/>
<p id="loading_text">A Free open source Hex Editor available natively and on the web!</p> <h1>A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.</h1>
<h2>Available both natively and on the web</h2>
<div style="height: 50%"></div> <div style="height: 50%">
<div style="height: 30%"> </div>
<h2 id="not_working">
Not loading in your Browser? <a href="https://imhex.werwolv.net">Try the native version</a>
</h2>
<div style="height: 50%"></div>
</div>
<div class="loading_ripple"> <div class="loading_ripple">
<div class="lds-ripple"><div></div><div></div></div> <div class="lds-ripple"><div></div><div></div></div>
</div> </div>
<div style="height: 10%">
</div>
<div class="footer">
<a href="https://imhex.werwolv.net">Homepage</a>
<p>Made with ♥️ by the ImHex Team</p>
<a href="https://github.com/WerWolv/ImHex">GitHub</a>
</div>
</div> </div>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas> <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>

48
dist/web/source/style.css vendored
View File

@ -27,12 +27,54 @@ body {
left: 0; left: 0;
} }
#loading_text { h1, h2 {
color: #F0F0F0; color: #F0F0F0;
font-size: 20px; font-size: 20px;
font-family: monospace; font-family: monospace;
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-top: 60px;
margin-bottom: 10px;
}
h2 {
margin-top: 0px;
font-size: 18px;
}
#not_working {
opacity: 0;
}
#not_working.visible {
opacity: 1;
transition: opacity 2s ease;
}
a {
color: #7893ff;
text-decoration: none;
}
a:hover {
text-shadow: #3a4677 0px 0px 10px;
}
.footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
text-align: center;
color: #F0F0F0;
background-color: #0A0A0A;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 10%;
} }
.centered { .centered {
@ -45,10 +87,6 @@ body {
height: 100%; height: 100%;
} }
.loading_ripple {
}
.lds-ripple { .lds-ripple {
display: inline-block; display: inline-block;

8
dist/web/source/wasm-config.js vendored
View File

@ -30,6 +30,10 @@ function glfwCreateStandardCursorCustom(shape) {
return shape return shape
} }
var notWorkingTimer = setTimeout(() => {
document.getElementById("not_working").classList.add("visible")
}, 5000);
var Module = { var Module = {
preRun: [], preRun: [],
postRun: [], postRun: [],
@ -37,9 +41,11 @@ var Module = {
// Triggered when the wasm module is loaded and ready to use. // Triggered when the wasm module is loaded and ready to use.
document.getElementById("loading").style.display = "none" document.getElementById("loading").style.display = "none"
document.getElementById("canvas").style.display = "initial" document.getElementById("canvas").style.display = "initial"
clearTimeout(notWorkingTimer);
}, },
print: (function() { })(), print: (function() { })(),
printErr: function(text) { }, printErr: function(text) { },
canvas: (function() { canvas: (function() {
let canvas = document.getElementById('canvas'); let canvas = document.getElementById('canvas');
// As a default initial behavior, pop up an alert when webgl context is lost. To make your // As a default initial behavior, pop up an alert when webgl context is lost. To make your