Skip to content

Instantly share code, notes, and snippets.

@OlegJakushkin

OlegJakushkin/art

Last active October 1, 2024 06:30
Show Gist options
  • Save OlegJakushkin/a9726d0a11ab719f17ff6f5b482dc137 to your computer and use it in GitHub Desktop.
Save OlegJakushkin/a9726d0a11ab719f17ff6f5b482dc137 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
uitest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Send Panel</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap"> <!-- Include Sora font -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/css/topcoat-desktop-dark.min.css">
<style>
body, input, button, h1, label {
font-family: 'Sora', sans-serif; /* Set the Sora font for all relevant elements */
font-weight: 400;
}
body {
background-color: #222;
color: #fff;
margin: 0;
padding: 0;
}
.header {
background-color: #333;
padding: 20px;
text-align: center;
border-bottom: 2px solid #444;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.header h1 {
margin: 0;
font-size: 24px;
font-weight: bold;
}
.header img {
width: 40px;
height: 40px;
border-radius: 50%; /* Rounded borders */
object-fit: cover; /* Ensures the image fits within the border */
}
.container {
display: flex;
justify-content: space-around;
padding: 20px;
flex-wrap: wrap;
}
.panel {
width: 300px;
padding: 20px;
border: 1px solid #444;
background-color: #444;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
margin: 10px;
}
.panel h1 {
text-align: center;
font-size: 20px;
}
.panel label {
display: block;
margin: 10px 0 5px;
}
.topcoat-button--cta {
display: block;
width: 100%;
margin-top: 20px;
padding: 6px;
background-color: #ff8c00; /* Beautiful orange color */
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.topcoat-button--cta:hover {
background-color: #e07a00; /* Darker orange on hover */
}
.topcoat-text-input--large {
width: 100%;
margin: 0;
padding: 5px;
border: 1px solid #444;
border-radius: 4px;
background-color: #333;
color: #fff;
font-weight: 400;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); /* Uniform inner shadow */ }
/* Media Query for Mobile View */
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
}
.panel {
width: 90%;
}
}
::selection {
background-color: #ff8c00; /* Background color for selected text */
color: #fff; /* Text color for selected text */
}
.topcoat-text-input--large:focus {
outline: none; /* Remove default blue outline */
border: 1px solid #ff8c00; /* Add custom border on focus */
box-shadow: 0 0 5px #ff8c00; /* Optional: Add shadow to indicate focus */
}
.topcoat-button--cta:focus {
outline: none;
border: 1px solid #5b4ec8; /* Border color matching the button */
box-shadow: 0 0 5px #5b4ec8; /* Shadow indicating focus */
}
</style>
</head>
<body>
<!-- Header Navigation -->
<div class="header">
<!-- Add the image near the logo text -->
<img src="https://private-user-images.githubusercontent.com/2915361/372337163-af9921dc-f551-4724-9f29-952651c11a01.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mjc3NjMwNTYsIm5iZiI6MTcyNzc2Mjc1NiwicGF0aCI6Ii8yOTE1MzYxLzM3MjMzNzE2My1hZjk5MjFkYy1mNTUxLTQ3MjQtOWYyOS05NTI2NTFjMTFhMDEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MTAwMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDEwMDFUMDYwNTU2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OWE1OWMwMWFhNGYxMTJlOGJjNWM4ZDg2ZjhiMTQxMGExMTA1Yzg4ZTUxNTJiMGZlNTA5Y2Q5Yjk3ZTA0YzA3NCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.pBRVp4aqgukG1e7m2p0yA2D1uzdsifmE-VsSNponKSQ" alt="Logo"> <!-- Replace 'logo.png' with the path to your image file -->
<h1>DontMind</h1>
</div>
<!-- Main Container -->
<div class="container">
<!-- List Incoming Form -->
<div class="panel">
<h1>List Incoming</h1>
<form id="list-incoming-form">
<label for="incoming-address">From Address</label>
<input type="text" id="incoming-address" class="topcoat-text-input--large" placeholder="Enter address" required>
<button type="button" class="topcoat-button--cta" onclick="listIncomingMessages()">List Messages</button>
</form>
</div>
<!-- Send Form -->
<div class="panel">
<h1>Send</h1>
<form id="send-form" onsubmit="sendMessage(event)">
<label for="user-address">User Address</label>
<input type="text" id="user-address" class="topcoat-text-input--large" placeholder="Enter user address" required>
<label for="message">Message</label>
<input type="text" id="message" class="topcoat-text-input--large" placeholder="Enter message" required>
<button type="submit" class="topcoat-button--cta">Send</button>
</form>
</div>
<!-- Publish New Key Form -->
<div class="panel">
<h1>Publish New Key</h1>
<form id="publish-key-form">
<button type="button" class="topcoat-button--cta" onclick="publishKey()">Publish Key</button>
</form>
</div>
</div>
<script>
// Function to simulate listing incoming messages
function listIncomingMessages() {
const address = document.getElementById('incoming-address').value;
if (address) {
alert(`Listing messages for address: ${address}`);
}
}
// Function to simulate sending a message
function sendMessage(event) {
event.preventDefault(); // Prevent form submission
const address = document.getElementById('user-address').value;
const message = document.getElementById('message').value;
if (address && message) {
console.log(`Address: ${address}, Message: ${message}`);
alert(`Message sent to ${address} with content: "${message}"`);
}
}
// Function to simulate publishing a new key
function publishKey() {
alert('Publishing new key...');
}
</script>
</body>
</html>
@OlegJakushkin
Copy link
Author

DontMind

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment