Compare commits
40 commits
bulk_locat
...
main
Author | SHA1 | Date | |
---|---|---|---|
8fec9e6ef7 | |||
|
45c1d0f9cc | ||
|
c2334642fb | ||
|
6e98d1979c | ||
1171e0de40 | |||
|
360164be7a | ||
|
e5e61fb9c4 | ||
3b0a40ace8 | |||
|
060560d8a2 | ||
|
0fa4e48ff5 | ||
|
62699c90eb | ||
|
6b3783e69f | ||
|
15d914fae3 | ||
|
bf182251ec | ||
|
0c1a280a19 | ||
|
d98342bd02 | ||
ebf06fa163 | |||
|
7236d859eb | ||
|
f8ecf20b75 | ||
|
065fa5adbf | ||
|
1b3de458fa | ||
|
c9cda14f38 | ||
|
9f95e704b9 | ||
b9e87f09d5 | |||
|
5b5728f7e2 | ||
457af44a79 | |||
9935c0562b | |||
7b51b3414d | |||
a6e363220a | |||
|
299a2f5914 | ||
b6a0d22674 | |||
b41f74bf7b | |||
c25188611e | |||
2ec7600fa4 | |||
|
2aae5dd441 | ||
|
f91b83d3ca | ||
|
6cdeb1a3da | ||
0bc3cac6f5 | |||
277b2aec57 | |||
111a0f6e45 |
14 changed files with 678 additions and 89 deletions
22
.forgejo/workflows/deployment-pull-request.yaml
Normal file
22
.forgejo/workflows/deployment-pull-request.yaml
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
name: deployment-on-pull-request
|
||||||
|
on:
|
||||||
|
pull_request:
|
||||||
|
pull_request_target:
|
||||||
|
types:
|
||||||
|
- opened
|
||||||
|
- reopened
|
||||||
|
- synchronize
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
deployment:
|
||||||
|
runs-on: docker
|
||||||
|
container:
|
||||||
|
image: node:bookworm
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
- name: Build inventory
|
||||||
|
uses: https://codeberg.org/umglurf/kaniko-action@main
|
||||||
|
with:
|
||||||
|
cache: false
|
||||||
|
push: 'false'
|
||||||
|
context: /workspace/snoopy/in-c4/
|
24
.forgejo/workflows/deployment.yaml
Normal file
24
.forgejo/workflows/deployment.yaml
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
name: deployment
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- 'main'
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
deployment:
|
||||||
|
runs-on: docker
|
||||||
|
container:
|
||||||
|
image: node:bookworm
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
- name: Build inventory
|
||||||
|
uses: https://codeberg.org/umglurf/kaniko-action@main
|
||||||
|
with:
|
||||||
|
cache: true
|
||||||
|
cache_repo: git.koeln.ccc.de/${{ github.repository }}/cache
|
||||||
|
push: 'true'
|
||||||
|
context: /workspace/snoopy/in-c4/
|
||||||
|
credentials: |
|
||||||
|
git.koeln.ccc.de=snoopy:${{ secrets.REGISTRY_WRITE }}
|
||||||
|
destinations: |
|
||||||
|
git.koeln.ccc.de/${{ github.repository }}/in-c4:latest
|
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -1,2 +1,2 @@
|
||||||
/inventory.sqlite3
|
/data/*
|
||||||
*.pyc
|
*.pyc
|
||||||
|
|
|
@ -1,59 +0,0 @@
|
||||||
#!/usr/bin/env python3
|
|
||||||
|
|
||||||
from datetime import date
|
|
||||||
|
|
||||||
import requests
|
|
||||||
|
|
||||||
BASE = "https://in.ccc.ac"
|
|
||||||
|
|
||||||
|
|
||||||
session = requests.Session()
|
|
||||||
# session.auth = (":)", ":)")
|
|
||||||
|
|
||||||
res = session.get(f"{BASE}/api/items")
|
|
||||||
res.raise_for_status()
|
|
||||||
items = res.json()
|
|
||||||
|
|
||||||
is_in = input("is in (eg. R7): ")
|
|
||||||
print(items[is_in])
|
|
||||||
|
|
||||||
|
|
||||||
def format_last_updated(item) -> str:
|
|
||||||
last_updated = item["last_updated"]
|
|
||||||
if last_updated is None:
|
|
||||||
return ""
|
|
||||||
return date.fromtimestamp(item["last_updated"]).isoformat()[:-3]
|
|
||||||
|
|
||||||
|
|
||||||
print(f"Items that should be in {is_in}:")
|
|
||||||
print(
|
|
||||||
"\n".join(
|
|
||||||
(
|
|
||||||
f"{item['id']:<5} last_updated={format_last_updated(item)}"
|
|
||||||
for item in items.values()
|
|
||||||
if item["is_in"] == is_in
|
|
||||||
)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
|
|
||||||
while True:
|
|
||||||
try:
|
|
||||||
item_id = input(f"item that is in {is_in}: ")
|
|
||||||
except KeyboardInterrupt:
|
|
||||||
break
|
|
||||||
if item_id == "":
|
|
||||||
break
|
|
||||||
|
|
||||||
if item_id not in items:
|
|
||||||
item_id = "K" + str(int(item_id))
|
|
||||||
if item_id not in items:
|
|
||||||
print(f"{item_id} and K{item_id} do not exist.")
|
|
||||||
continue
|
|
||||||
item = items[item_id]
|
|
||||||
|
|
||||||
print(f'location of {item_id}: {item["is_in"]} ->', end="")
|
|
||||||
item["is_in"] = is_in
|
|
||||||
print(f' {item["is_in"]}')
|
|
||||||
|
|
||||||
res = session.put(f"{BASE}/api/items/{item_id}", json=item)
|
|
||||||
res.raise_for_status()
|
|
|
@ -2,7 +2,7 @@ from sqlalchemy import create_engine
|
||||||
from sqlalchemy.ext.declarative import declarative_base
|
from sqlalchemy.ext.declarative import declarative_base
|
||||||
from sqlalchemy.orm import sessionmaker
|
from sqlalchemy.orm import sessionmaker
|
||||||
|
|
||||||
SQLALCHEMY_DATABASE_URL = "sqlite:///./inventory.sqlite3"
|
SQLALCHEMY_DATABASE_URL = "sqlite:///./data/inventory.sqlite3"
|
||||||
|
|
||||||
engine = create_engine(
|
engine = create_engine(
|
||||||
SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}, echo=True
|
SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}, echo=True
|
||||||
|
|
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 60 KiB |
122
static/c4.css
Normal file
122
static/c4.css
Normal file
|
@ -0,0 +1,122 @@
|
||||||
|
body {
|
||||||
|
color: #f0f0f0;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h1 a {
|
||||||
|
color: #dfaa37; /* C4 Yellow */
|
||||||
|
}
|
||||||
|
|
||||||
|
#search.failed {
|
||||||
|
color: #200;
|
||||||
|
background-color: #ec6d5f;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
border: 1px solid #202020;
|
||||||
|
background-color: #4d4d4d;
|
||||||
|
max-width: 1440px;
|
||||||
|
max-height: 50vh;
|
||||||
|
aspect-ratio: 2 / 1;
|
||||||
|
box-shadow: 0px 6px 12px #000c;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mapnote {
|
||||||
|
background-color: #ccc;
|
||||||
|
color: #333;
|
||||||
|
border-color: #202020;
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
box-shadow: 0px 6px 12px #000c;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mapnote:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#itemcount {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 1ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
background-color: #202020;
|
||||||
|
border-color: #4d4d4d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result:focus {
|
||||||
|
background-color: #202020;
|
||||||
|
border-color: #dfaa37;
|
||||||
|
outline-color: #dfaa37;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result a {
|
||||||
|
color: #dfaa37;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note {
|
||||||
|
background-color: #333;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
#knowntypes button {
|
||||||
|
color: #220;
|
||||||
|
background-color: #dfaa37;
|
||||||
|
border: 1px solid #220;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
margin: 0.2em;
|
||||||
|
font-weight: bolder;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#knowntypes button:hover, #knowntypes button:focus {
|
||||||
|
background-color: #f5c251;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
box-shadow: 0 3px 6px -1px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.primary {
|
||||||
|
color: #220;
|
||||||
|
background-color: #dfaa37;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.primary:hover,.btn.primary:focus {
|
||||||
|
background-color: #f5c251;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.grn {
|
||||||
|
color: #020;
|
||||||
|
background-color: #9f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.grn:hover ,.btn.grn:focus {
|
||||||
|
background-color: #3f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.red {
|
||||||
|
color: #200;
|
||||||
|
background-color: #ec6d5f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.red:hover, .btn.red:focus {
|
||||||
|
background-color: #ff7667;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blinker {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
40% { opacity: 1; }
|
||||||
|
90% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#mapgrid {
|
||||||
|
outline: 2px solid #333;
|
||||||
|
background-color: #dfaa37;
|
||||||
|
border-radius: min(4px, 25%);
|
||||||
|
animation: blinker 1s infinite;
|
||||||
|
}
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<title>in?</title>
|
<title>in?</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="c4.css">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<script src="form.js"></script>
|
<script src="form.js"></script>
|
||||||
<script src="shared.js"></script>
|
<script src="shared.js"></script>
|
||||||
|
@ -21,7 +22,7 @@
|
||||||
<b>Coordinates</b> (click on map)
|
<b>Coordinates</b> (click on map)
|
||||||
|
|
||||||
<div id="map" title="Map for reference only. Not to scale!">
|
<div id="map" title="Map for reference only. Not to scale!">
|
||||||
<img src="80x80.svg" onclick="mapClick(event)">
|
<img src="map.svg" onclick="mapClick(event)">
|
||||||
<div id="mapgrid"></div>
|
<div id="mapgrid"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -49,6 +50,6 @@
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<button id="delete" class="btn red" autocomplete="off">Delete</button>
|
<button id="delete" class="btn red" autocomplete="off">Delete</button>
|
||||||
<button id="save" class="btn green" autocomplete="off">Save</button>
|
<button id="save" class="btn primary" autocomplete="off">Save</button>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -65,8 +65,22 @@ function knownTypes() {
|
||||||
map[i.type] = true;
|
map[i.type] = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let types = Object.keys(map).sort().join(', ')
|
|
||||||
document.getElementById('knowntypes').textContent = `Known types: ${types}.`;
|
// Get location in document.
|
||||||
|
const known_types = document.getElementById('knowntypes');
|
||||||
|
known_types.textContent = `Known types: `;
|
||||||
|
|
||||||
|
// Create a button for every known type.
|
||||||
|
for (let label of Object.keys(map).sort()) {
|
||||||
|
btn = document.createElement('button');
|
||||||
|
btn.setAttribute('type', 'button');
|
||||||
|
btn.textContent = label;
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
document.getElementById('type').value = label;
|
||||||
|
});
|
||||||
|
|
||||||
|
known_types.appendChild(btn);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function save() {
|
function save() {
|
||||||
|
@ -136,14 +150,14 @@ function del() {
|
||||||
|
|
||||||
let clicks = {x: [], y: []};
|
let clicks = {x: [], y: []};
|
||||||
function mapClick(e) {
|
function mapClick(e) {
|
||||||
let x = Math.floor(31 / e.target.width * e.layerX);
|
let x = Math.floor(36 / e.target.width * e.layerX);
|
||||||
let y = Math.floor(10 / e.target.height * e.layerY);
|
let y = Math.floor(18 / e.target.height * e.layerY);
|
||||||
|
|
||||||
let humanPos = (x, y) => {
|
let humanPos = (x, y) => {
|
||||||
return `${String.fromCharCode(65 + 8 - y)}${x}`;
|
return `${String.fromCharCode(65 + 16 - y)}${x}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
if (x > 0 && x < 31 && y > 0 && y < 9) {
|
if (x > 0 && x < 36 && y > 0 && y < 18) {
|
||||||
if (clicks.x.length > 1) {
|
if (clicks.x.length > 1) {
|
||||||
clicks.x = [x];
|
clicks.x = [x];
|
||||||
clicks.y = [y];
|
clicks.y = [y];
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<title>in?</title>
|
<title>in?</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="c4.css">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<script src="index.js"></script>
|
<script src="index.js"></script>
|
||||||
<script src="shared.js"></script>
|
<script src="shared.js"></script>
|
||||||
|
@ -11,12 +12,13 @@
|
||||||
<div id="grid">
|
<div id="grid">
|
||||||
<div id="searchcontainer">
|
<div id="searchcontainer">
|
||||||
<input type="text" id="search" value="" autocomplete="off" placeholder="RegEx search" tabindex="1" autofocus>
|
<input type="text" id="search" value="" autocomplete="off" placeholder="RegEx search" tabindex="1" autofocus>
|
||||||
|
<p id="itemcount"></p>
|
||||||
<label for="showhidden">Show hidden items</label>
|
<label for="showhidden">Show hidden items</label>
|
||||||
<input type="checkbox" id="showhidden">
|
<input type="checkbox" id="showhidden">
|
||||||
</div>
|
</div>
|
||||||
<div id="mapcontainer">
|
<div id="mapcontainer">
|
||||||
<div id="map">
|
<div id="map">
|
||||||
<img src="80x80.svg" title="Map for reference only. Not to scale!">
|
<img src="map.svg" title="Map for reference only. Not to scale!">
|
||||||
<div id="mapgrid"></div>
|
<div id="mapgrid"></div>
|
||||||
</div>
|
</div>
|
||||||
<p id="mapnote"></p>
|
<p id="mapnote"></p>
|
||||||
|
@ -37,7 +39,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<a href="form.html" class="btn green">+</a>
|
<a href="form.html" class="btn primary">+</a>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -17,6 +17,7 @@ function renderItems() {
|
||||||
const container = document.getElementById('results');
|
const container = document.getElementById('results');
|
||||||
const template = document.getElementById('item');
|
const template = document.getElementById('item');
|
||||||
const loading = document.getElementById('loading');
|
const loading = document.getElementById('loading');
|
||||||
|
let count = 0;
|
||||||
|
|
||||||
for (const [id, item] of Object.entries(items)) {
|
for (const [id, item] of Object.entries(items)) {
|
||||||
const clone = template.content.cloneNode(true);
|
const clone = template.content.cloneNode(true);
|
||||||
|
@ -31,11 +32,14 @@ function renderItems() {
|
||||||
clone.querySelector(".result").id = `item-${id}`;
|
clone.querySelector(".result").id = `item-${id}`;
|
||||||
clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`;
|
clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`;
|
||||||
if (item.hidden) {
|
if (item.hidden) {
|
||||||
clone.querySelector(".result").classList.add('hidden')
|
clone.querySelector(".result").classList.add('hidden');
|
||||||
};
|
} else {
|
||||||
|
count++;
|
||||||
|
}
|
||||||
container.appendChild(clone);
|
container.appendChild(clone);
|
||||||
};
|
}
|
||||||
loading.remove();
|
loading.remove();
|
||||||
|
updateCounter(count);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getLocString(items, item) {
|
function getLocString(items, item) {
|
||||||
|
@ -67,6 +71,7 @@ function search(e) {
|
||||||
const searchAttrs = ['id', 'name', 'type', 'note', 'content'];
|
const searchAttrs = ['id', 'name', 'type', 'note', 'content'];
|
||||||
const query = e.target.value;
|
const query = e.target.value;
|
||||||
const regex = new RegExp(query, 'i')
|
const regex = new RegExp(query, 'i')
|
||||||
|
let count = 0;
|
||||||
|
|
||||||
for (const elem of document.getElementsByClassName('result')) {
|
for (const elem of document.getElementsByClassName('result')) {
|
||||||
const item = items[elem.id.slice(5)];
|
const item = items[elem.id.slice(5)];
|
||||||
|
@ -85,10 +90,36 @@ function search(e) {
|
||||||
|
|
||||||
if (found) {
|
if (found) {
|
||||||
elem.classList.remove('filtered');
|
elem.classList.remove('filtered');
|
||||||
|
count++;
|
||||||
} else {
|
} else {
|
||||||
elem.classList.add('filtered');
|
elem.classList.add('filtered');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Indicate failed search.
|
||||||
|
if (count) {
|
||||||
|
e.target.classList.remove('failed');
|
||||||
|
} else {
|
||||||
|
e.target.classList.add('failed');
|
||||||
|
}
|
||||||
|
|
||||||
|
updateCounter(count);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCounter(count) {
|
||||||
|
const itemcount = document.getElementById('itemcount');
|
||||||
|
|
||||||
|
switch(count) {
|
||||||
|
case 0:
|
||||||
|
itemcount.textContent = 'No items found.';
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
itemcount.textContent = '1 item found.';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
itemcount.textContent = `${count} items found.`;
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showhidden(e){
|
function showhidden(e){
|
||||||
|
|
433
static/map.svg
Normal file
433
static/map.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 96 KiB |
|
@ -1,12 +1,12 @@
|
||||||
function renderMap(xx, yy) {
|
function renderMap(xx, yy) {
|
||||||
if (xx[0] > 0 && xx[0] < 31 && yy[0] > 0 && yy[0] < 9 &&
|
if (xx[0] > 0 && xx[0] < 36 && yy[0] > 0 && yy[0] < 18 &&
|
||||||
xx[1] > 0 && xx[1] < 31 && yy[1] > 0 && yy[1] < 9 &&
|
xx[1] > 0 && xx[1] < 36 && yy[1] > 0 && yy[1] < 18 &&
|
||||||
xx[1] >= xx[0] && yy[1] >= yy[0]) {
|
xx[1] >= xx[0] && yy[1] >= yy[0]) {
|
||||||
let grid = document.getElementById('mapgrid');
|
let grid = document.getElementById('mapgrid');
|
||||||
grid.style.top = `${yy[0]*10}%`;
|
grid.style.top = `${yy[0]*100/18}%`;
|
||||||
grid.style.left = `${100/31*xx[0]}%`;
|
grid.style.left = `${100/36*xx[0]}%`;
|
||||||
grid.style.height = `${(yy[1] - yy[0] + 1) * 10}%`;
|
grid.style.height = `${(yy[1] - yy[0] + 1) * 100/18}%`;
|
||||||
grid.style.width = `${100/31*(xx[1] - xx[0] + 1)}%`;
|
grid.style.width = `${100/36*(xx[1] - xx[0] + 1)}%`;
|
||||||
} else {
|
} else {
|
||||||
alert(`invalid coordinates x=${xx} y=${yy}`);
|
alert(`invalid coordinates x=${xx} y=${yy}`);
|
||||||
}
|
}
|
||||||
|
@ -26,8 +26,8 @@ function coordsToMap(coords_bl, coords_tr) {
|
||||||
let bl_x = parseInt(coords_bl.slice(1));
|
let bl_x = parseInt(coords_bl.slice(1));
|
||||||
let tr_x = parseInt(coords_tr.slice(1));
|
let tr_x = parseInt(coords_tr.slice(1));
|
||||||
|
|
||||||
bl_y = 8 - (bl_y.charCodeAt(0) - 65);
|
bl_y = 16 - (bl_y.charCodeAt(0) - 65);
|
||||||
tr_y = 8 - (tr_y.charCodeAt(0) - 65);
|
tr_y = 16 - (tr_y.charCodeAt(0) - 65);
|
||||||
|
|
||||||
renderMap([bl_x, tr_x], [tr_y, bl_y]);
|
renderMap([bl_x, tr_x], [tr_y, bl_y]);
|
||||||
}
|
}
|
|
@ -171,10 +171,10 @@ textarea {
|
||||||
#map {
|
#map {
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: #fff;
|
background: #4d4d4d;
|
||||||
max-width: 800px;
|
max-width: 1440px;
|
||||||
max-height: 50vh;
|
max-height: 50vh;
|
||||||
aspect-ratio: 31 / 10;
|
aspect-ratio: 2 / 1;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue