diff --git a/examples/010/images/main/Dockerfile b/examples/010/images/main/Dockerfile index 86af5f89a2e..bf9968fb9b0 100644 --- a/examples/010/images/main/Dockerfile +++ b/examples/010/images/main/Dockerfile @@ -1,3 +1,3 @@ -FROM ghcr.io/build-trust/ockam-python:latest +FROM ghcr.io/build-trust/ockam-python:cd3c44c50 COPY . . ENTRYPOINT ["python", "main.py"] diff --git a/examples/010/images/main/index.html b/examples/010/images/main/index.html index 7d9f886a6f4..8b43e9d3f7f 100644 --- a/examples/010/images/main/index.html +++ b/examples/010/images/main/index.html @@ -54,26 +54,69 @@ padding: 6px 12px; font-size: 14px; } - @keyframes pulse { - 0% { - box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); - } - 70% { - box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); - } - 100% { - box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); - } + #loader { + display: none; + width: 15px; + height: 15px; + margin: 0; + border: 8px solid #f3f3f3; + border-radius: 50%; + border-top: 8px solid #3498db; + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; + } + @-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } + } + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } - .pulse { - animation: pulse 1.5s infinite; - border-color: #007bff; - outline: none; + .foo { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + #popup { + display: none; + background-color: rgba(0,0,0,0.5); + position: fixed; + z-index: 999; + width: 100%; + height: 100vh; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0 auto; + .popup { + background: white; + color: #fff; + padding: 10px; + border-radius: 5px; + display: flex; + flex-direction: column; + align-items: center; + width: 200px; + #text { + color: black; + } + } } - + +
+ +
+