claudio/VSC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Issue

Browse Source 
Code backup
This commit is contained in:
Claudio
2026-05-10 16:59:01 +02:00
commit 368d6fafea
796 changed files with 315310 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/_Test/001/index.html
+17
View File
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<div id="container">
<p class="title">Hello World!</p>
<p class="corpe">Powered by Html & CSS</p>
</div>
</body>
</html>
Web/_Test/001/main.css
+33
View File
@@ -0,0 +1,33 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background: linear-gradient(315deg, #d12b2b, #5684b4);
background-attachment: fixed;
font-family: "Poppins", sans-serif;
height: 100%;
display: grid;
padding: 25px;
}
div#container {
margin: auto;
}
.title {
color: #fff;
font-size: 56px;
text-align: center;
}
.corpe {
color: #fff;
font-size: 12px;
text-align: center;
}
Web/_Test/002/index.html
+1
View File
@@ -0,0 +1 @@
<image src="data:image;base64,/B/0wDgwAAIlQTkcNChoKAAAADUlIRFIAAAEsAAAAlggGAAAAZFu10gAAAAFzUkdCAK7OHOkAAAvISURBVHhe7Z1dkt00EEYVJlTxyI6AtfDIIoA98M5WYF2BQETGheOR7ZbUn6yfM1WpgorUah21TmRd5+Zd4AcCEIDAIATeDZInaUIAAhAICIsigAAEhiGAsIZZKhIdlMA/u7zZb5WLCMBKgHSHwAWBvaxis48hhBeIlRNAWOXs6AmBKwJ/hxC+OjRAWJU1g7AqAdIdAicEjqerrRl7rqJkgFcBj64QyJRVbM6eqygb4FXAoysEEgTOTlacsBzKBWE5QCQEBHYEUhft+7ss9lxFuQCvAh5dIXAgcJRV3F/Hy3f2XEXZAK8CHl0hcHGy2u6rUhIDXCEBhFUIjm4Q2BFIvcKw7S2E5VgqCMsRJqGWJXAlJYTlWBYIyxEmoZYkcCek/e/z4mhliSCsSoB0X5pA6hWG457i7xI6lgjCcoRJqOUI5Jyutkv45SB5ThhhedIk1koE7mQVWVjarMSseq4IqxohARYkYHkURFiCwkBYAqiEnJ6A9eTE/ZVzKSAsZ6CEm56AVVa84S4oBYQlgErIaQnkfCGfVWzTwlJMDGEpqBJzRgJXb7On5ouwBFWAsARQCTklgVwB8cKooAwQlgAqIacjkPMouE2eC3dBGSAsAVRCTkUg91EwTp4Ld1EJICwRWMJOQyD3UTBOvKTPNMCUE0FYSrrEHp1AqXhK+43OS54/wpIjZoBBCZQ8Cqbur/iGBscCQFiOMCcJ9f3rPH4OIfz56b9/mWReudOoOSVx4Z5L29geYRlBTdpsL6c4xe3/99P945O4fph0/mfT8pJVjM8ecyweYDrC7DyURU6pKfy64CkLYXVazAir04WpTCvKKf767jVO6uR0NkQ8UcWf+DgY/3v7/8qUhuleI6s4ydr+w4B6IlGE9QR13zF/CyH8GEKI//bdy+sv6wiry+nIyfq1MVd8ub+yVl9BO4RVAK2jLlFWPxnz2eQUH/Hiz2onJwum2tMRL4xaKFe0QVgV8DroahVW/Gg9/sQTGD9pArWy4nGwQWUhrAaQxUPE+6nfQwjfhhC+CSG8f/11NizyQljiktSFR1g6tk9H/nAjru1EEO++Vv/xOF0dT1jsLUFVAVUAtcOQqbe2j2muWgsl38SQWmIv6XVYPv2ktGqR9rMC7TOJj4RX675aTXiJxitO+4oYaMTVinOgpZGnirh835lCWPKS5a8NNEDc/RCpd4/2Sc/6h1rNX26+eyScldnjxQzYx5egmwTuxBUTnalePE9EnrG6KYgeE5mpAHvkO2JOK4jLWzDe8UasmyY5I6wmmIccZGZxeQuGf3CiUYkjrEagBx/mTl4j1ZG3rOLS8vcHGxX4SIXWCAnDXBAYXVzeF+1HWc12z9fdZkBY3S3JEAmNKi716QphicsXYYkBTx5+JHEpZHU8YfH97eKCR1hiwIuEH0FcCmEpYi5SMmXTRFhl3OiVJtCruFRiUcWlvk4IICxKQ0GgN3GpxMKng4rquYiJsBoDX2y4HsTVQlZctjcqbITVCPTiwzwlrtS4XjWvEuHipXI9fa/FAzIELARai0slFVVcC8Ol2yCspZf/scm3EpfqjglhPVQ6COsh8Az7HwGluFRSUcWlJAwEEJYBEk3kBBTiUolFFVcOeYYBENYMqzjPHLzEpZKKKu48KyieCcISAyZ8EYFacanEoopbBGnFTghrxVUfZ85X4jqrXZVUVHHHWY0OMkVYHSwCKdwSyBGXQiyKmLeTpsFbAgiLqhiJwJ24VGJRxR2JfRe5IqwuloEkMgjc3W/tQ3nUN7LKWBx1U48FVedIfAikCFjE5VHfCKuj+vNY0I6mQyoLElCKC1l1VlAIq7MFIZ1iAt7iSsVjvxQvj09HFsCHI1GeJWCRVc7dFrJ6dj1PR0dYnS4MaWUROHt0uxPZsf5T/6pOTIR9krUcusYshI4tkdsQsNwzWcSFrNqsV9UoCKsKH507IGAR1pbmnbiO02F/dLDAOc/ynaVLOhD4gkCOrPYd78TFP9fVaaHxJ0inC0NaJgKlwrKeuP4KIXxtyoRGTQggrCaYGUREYC+snFo+u6+6SjMnvmi6hGURqIFRCZSers4eB+NeuHtU3Fixbx6qGsA/BJ5hqwmUCCslpNR9FeKqXh5NAISl4UpUPYFcYVlldcwceenX0jwCwjKjomFnBKz3V17vV30IIbw3Mlh5X0Xe8eerBKvqT19XBmusPZp1SMB6uvKSVempK45vlVyHmN+ktMko/sZLCOFKTlfzKfZOcccR6JLjtAQswip9BMyFZn1krD5d5Cbm1L7kE1XL0EXuKepkyYY2EBASuHocPNtgamHEd7biqcP6M8Les8rYOud9u6L1GAFaCQz6zEvgKKRYw3ePJq3rPHejt87vrjpKTlVRQNuj4ll8y8n4MrfeQN2B5PchMJoMcvMtOnlUlsWd8O/CW3NGWHck+f1pCORuKusmagmo5OSiOFSUsDyenkrkU9Lni/VRwGhZAIw1H4GSTb1R6FFSVyuUe/qKsUrmWMP0zBHHmJa8ENZ8+3X5GeVuYstGGQFq7rxbzOnuQJMjoJy2p3O7S6gFFMaAwJ5AzsadtX5rTkS51bRdlh9f9LSwzTllIazclaH9MARicac+ddoX/SwnK8uieAns7JO8GplY+lraWDjwXdUmSjTqhYD1r+P0kq86j6t3zrax794NO8ok9w8CyykLYakrgfjdEUi9f9VdkoMlVCurbbpXQnKTVRzM8pw62BqQ7qQEEJbvwqbuCkt9cHXKQli+60a0QQi4Fv4gc1al6Smrq1OW+5qVGlUFkrgQOCPgXvyLolbIKqK0fDBQ7ZvqAIsuOtNuT2DVTwg9SatkdXbK2ufu4hqXIJ5EiQWBEwIIq640Uicgxf5PSTH3k8fTmSoSrsNKbwikCfBKQ11ltHyklo2FsOqKgN7tCCCsctZery/kZLD9Beu798ByYvJaQxYtGj9JAGGV0VffW5VlVdiLE1YhOLo1JcA7WGW4p5JVRICwygqBXm0JIKx83tPJCmHlFwE9niGAsPK4TykrhJVXBLR+jgDCsrOfVlYIy14EtHyWAMKy8W/1rpUtG0Er7rAEUAnpTgBh3SOdXlacsO6LgBb9EOC1hvO1WEJWCKufzUgm9wQQ1jmjJ14MvV8xQQseCQVQCSkhgLDSWJeRFScsyb4iqIgAwnoLdupPBFN1xAlLtLsI606Ab2v4EulysuKE5b6nCCgkgLD+h7ukrBCWcHcR2p0AwvqMdFlZISz3PUVAIQGEtbisEJZwdxHanYDsS+HcM9UEXPpktSHl0l1TXET1J7Dy2+7I6rWeEJb/xiKihsCqwkJWu3pCWJrNRVQNgdXexUJWhzpCWJqNRVQNgZUu3pFVooYQlmZjEVVDYJWLd2R1Uj8IS7OxiKohsMI9FrK6qB2EpdlYRNURmPkeC1nd1A3C0m0sImsIzHqPhawM9YKwDJBo0hWB2e6xUl++F4GzN7l072rjkUwZgZnusZBVZg1g8UxgNO+CwAyPhalHQE5W3GF1scFIwpfA6I+FKVl9DCG8+GKaLxonrPnWdJUZjXjK4hGwsjoRViVAuj9GYLRTFo+ADqWCsBwgEuIxAiOcss5OVdxXFZQNwiqARpduCPR8yroSFfdVhSWEsArB0a0bAj2ess4e/zhVVZYNwqoESPfHCfR0yroSFacqh1JBWA4QCfE4gadPWTz+NSoBhNUINMNICTx1ykJU0mV9GxxhNQbOcDICLaWFqGTLeB0YYT0EnmHdCbT4toMrUXGh7r6knLAaIGWIBwmopIWoHlzU/dCcsDpZCNJwI+D5SsGdqPjkz23ZbIEQlo0TrcYicCWtbSZnsrmTVOyPqB6qB4T1EHiGlROwSCs3CUSVS8y5PcJyBkq4LgnUygtRdbKsCKuThSCNZgSs8kJSzZbEPhDCsrOi5XwE4n3V9sOX5w2wvghrgEUiRQhA4DMBhEUlQAACwxBAWMMsFYlCAAIIixqAAASGIYCwhlkqEoUABBAWNQABCAxDAGENs1QkCgEIICxqAAIQGIbAv+uir6ZpxtSgAAAAAElFTkSuQmCC/w=="/>
Web/_Test/Botton UI/Portal.svg
+38
View File
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g>
<path fill="#007BC0" d="M904,708.44c0,13.75-9.855,30.627-21.762,37.505L522.177,953.9c-11.906,6.878-31.418,6.878-43.324,0
L118.749,745.945C106.843,739.067,97,722.19,97,708.44V292.513c0-13.75,9.829-30.627,21.735-37.505L478.78,47.055
c11.906-6.878,31.411-6.878,43.317,0l360.129,207.954C894.133,261.887,904,278.764,904,292.514V708.44z"/>
</g>
<g opacity="0.6">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="741.4775" y1="156.3135" x2="259.5034" y2="844.6437">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="0.4803" style="stop-color:#8B87B0;stop-opacity:0.4803"/>
<stop offset="0.8379" style="stop-color:#3A3479;stop-opacity:0.8379"/>
<stop offset="1" style="stop-color:#1B1464"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M904,708.44c0,13.75-9.855,30.627-21.762,37.505L522.177,953.9c-11.906,6.878-31.418,6.878-43.324,0
L118.749,745.945C106.843,739.067,97,722.19,97,708.44V292.513c0-13.75,9.829-30.627,21.735-37.505L478.78,47.055
c11.906-6.878,31.411-6.878,43.317,0l360.129,207.954C894.133,261.887,904,278.764,904,292.514V708.44z"/>
</g>
<g>
<path fill="#D9D9D9" d="M631.316,559.534c52.354-36.205,86.725-96.645,86.725-164.972c0-0.776-0.021-1.547-0.029-2.32
L529.783,500.915L631.316,559.534z"/>
<path fill="#D9D9D9" d="M614.188,336.293L614,336.617v102.231l104.516-60.343C713.001,309.243,671,249.786,614,218.24v117.946
L614.188,336.293z"/>
<path fill="#D9D9D9" d="M403.843,229.589c-52.35,36.205-86.721,96.645-86.721,164.973c0,0.774,0.021,1.547,0.031,2.322
l188.226-108.674L403.843,229.589z"/>
<path fill="#D9D9D9" d="M600,212.154c-24-11.584-53.133-18.051-82.758-18.051c-37.299,0-72.411,10.249-102.352,28.067L600,329.141
V212.154z"/>
<path fill="#D9D9D9" d="M619.926,566.954L429,456.628v117.565c27,13.32,56.913,20.83,88.826,20.83
C555.121,595.023,589.99,584.769,619.926,566.954z"/>
<circle fill="#D9D9D9" cx="516.7" cy="394.123" r="64.499"/>
<path fill="#D9D9D9" d="M416.604,377.75c0.002-13.131-9.301-18.625-20.672-12.059l-57.352,33.051
c-11.373,6.566-20.678,22.734-20.681,35.866L317.883,527h-0.012l-0.038,217.379c-0.003,13.131,9.3,18.462,20.672,11.895
l57.353-33.132c11.371-6.565,20.678-22.45,20.68-35.579L416.554,596h0.012L416.604,377.75z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

Web/_Test/Botton UI/icomoon.woff
BIN
View File
Binary file not shown.
Web/_Test/Botton UI/index.html
+225
View File
@@ -0,0 +1,225 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Test Page</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<div class="heading">
<p>HUB</p>
</div>
<div>
<p class="title">Blocco 1</p>
<i class="fas fa-audio-description"></i>
<hr>
<div class="section">
<div class="wrapper">
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
</div>
<div class="section">
<div class="wrapper">
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
</div>
</div>
</div>
</div>
<div>
<p class="title">Blocco 2</p>
<hr>
<div class="section">
<div class="wrapper">
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
</div>
<div class="section">
<div class="wrapper">
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
</div>
</div>
</div>
</div>
<div>
<p class="title">Blocco 3</p>
<hr>
<div class="section">
<div class="wrapper">
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
</div>
<div class="section">
<div class="wrapper">
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
</div>
</div>
</div>
</div>
<div>
<p class="title">Blocco 4</p>
<hr>
<div class="section">
<div class="wrapper">
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
</div>
<div class="section">
<div class="wrapper">
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
<div onclick="location.href='LINK';" class="icon builck">
<div class="tooltip">Builck</div>
<span><p class="ob-icon"></p></span>
</div>
</div>
</div>
</div>
</div>
<div class="piedipagina">
<p>Sono un semplice pie</p>
</div>
</body>
</html>
Web/_Test/Botton UI/main.css
+141
View File
@@ -0,0 +1,141 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@font-face {
font-family: myFirstFont;
src: url(icomoon.woff);
}
::-webkit-scrollbar {
display: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:focus,
*:active {
outline: none !important;
-webkit-tap-highlight-color: transparent;
}
html {
background: black;
background-attachment: fixed;
/* background-image: url("./Portal.svg"); */
background-position: center;
background-repeat: no-repeat;
background-size: auto;
opacity: 0.1;
}
body {
display: grid;
height: 100%;
width: 100%;
font-family: "Poppins", sans-serif;
place-items: center;
padding-bottom: 25px;
}
.wrapper {
display: inline-flex;
}
.wrapper .icon {
position: relative;
background-color: #ffffff;
border-radius: 15px;
padding: 15px;
margin: 10px;
width: 100px;
height: 50px;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip {
position: absolute;
top: 0;
font-size: 14px;
background-color: #ffffff;
color: #ffffff;
padding: 5px 8px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background-color: #ffffff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip {
top: -45px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.wrapper .builck:hover,
.wrapper .builck:hover .tooltip,
.wrapper .builck:hover .tooltip::before {
background-color: #EFB729;
color: #ffffff;
}
.ob-icon {
font-family: myFirstFont;
font-size: 30px;
}
.title {
padding-left: 15px;
}
.section {
align-items: center;
}
.piedipagina {
display: grid;
position: fixed;
width: 100%;
height: 25px;
top: auto;
right: 0;
bottom: 0;
left: 0;
background-color: black;
color: #ffffff;
text-align: center;
}
.heading {
width: 100%;
height: 180px;
}
Web/_Test/Fun BG/html5-canvas-matrix-effect/README.markdown
+6
View File
@@ -0,0 +1,6 @@
# HTML5 Canvas Matrix Effect
A Pen created on CodePen.io. Original URL: [https://codepen.io/riazxrazor/pen/Gjomdp](https://codepen.io/riazxrazor/pen/Gjomdp).
Matrix fallning code rain made with HTML5 canvas ofcourse JS.
just for FUN :D
Web/_Test/Fun BG/html5-canvas-matrix-effect/dist/index.html
Vendored
+26
View File
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - HTML5 Canvas Matrix Effect</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<html>
<head>
<title>HTML5 Canvas Matrix Effect</title>
</head>
<body>
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<canvas id="canvas2">Canvas is not supported in your browser.</canvas>
</body>
</html>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
Web/_Test/Fun BG/html5-canvas-matrix-effect/dist/script.js
Vendored
+78
View File
@@ -0,0 +1,78 @@
var canvas = document.getElementById( 'canvas' ),
ctx = canvas.getContext( '2d' ),
canvas2 = document.getElementById( 'canvas2' ),
ctx2 = canvas2.getContext( '2d' ),
// full screen dimensions
cw = window.innerWidth,
ch = window.innerHeight,
charArr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
maxCharCount = 100,
fallingCharArr = [],
fontSize = 10,
maxColums = cw/(fontSize);
canvas.width = canvas2.width = cw;
canvas.height = canvas2.height = ch;
function randomInt( min, max ) {
return Math.floor(Math.random() * ( max - min ) + min);
}
function randomFloat( min, max ) {
return Math.random() * ( max - min ) + min;
}
function Point(x,y)
{
this.x = x;
this.y = y;
}
Point.prototype.draw = function(ctx){
this.value = charArr[randomInt(0,charArr.length-1)].toUpperCase();
this.speed = randomFloat(1,5);
ctx2.fillStyle = "rgba(255,255,255,0.8)";
ctx2.font = fontSize+"px san-serif";
ctx2.fillText(this.value,this.x,this.y);
ctx.fillStyle = "#0F0";
ctx.font = fontSize+"px san-serif";
ctx.fillText(this.value,this.x,this.y);
this.y += this.speed;
if(this.y > ch)
{
this.y = randomFloat(-100,0);
this.speed = randomFloat(2,5);
}
}
for(var i = 0; i < maxColums ; i++) {
fallingCharArr.push(new Point(i*fontSize,randomFloat(-500,0)));
}
var update = function()
{
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0,0,cw,ch);
ctx2.clearRect(0,0,cw,ch);
var i = fallingCharArr.length;
while (i--) {
fallingCharArr[i].draw(ctx);
var v = fallingCharArr[i];
}
requestAnimationFrame(update);
}
update();
Web/_Test/Fun BG/html5-canvas-matrix-effect/dist/style.css
Vendored
+10
View File
@@ -0,0 +1,10 @@
body {
margin: 0;
}
canvas {
display: block;
position:absolute;
top:0;
left:0;
}
Web/_Test/Fun BG/html5-canvas-matrix-effect/license.txt
+8
View File
@@ -0,0 +1,8 @@
Copyright (c) 2021 by Riaz Laskar (https://codepen.io/riazxrazor/pen/Gjomdp)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Web/_Test/Fun BG/html5-canvas-matrix-effect/src/index.html
+11
View File
@@ -0,0 +1,11 @@
<html>
<head>
<title>HTML5 Canvas Matrix Effect</title>
</head>
<body>
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<canvas id="canvas2">Canvas is not supported in your browser.</canvas>
</body>
</html>
Web/_Test/Fun BG/html5-canvas-matrix-effect/src/script.js
+78
View File
@@ -0,0 +1,78 @@
var canvas = document.getElementById( 'canvas' ),
ctx = canvas.getContext( '2d' ),
canvas2 = document.getElementById( 'canvas2' ),
ctx2 = canvas2.getContext( '2d' ),
// full screen dimensions
cw = window.innerWidth,
ch = window.innerHeight,
charArr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
maxCharCount = 100,
fallingCharArr = [],
fontSize = 10,
maxColums = cw/(fontSize);
canvas.width = canvas2.width = cw;
canvas.height = canvas2.height = ch;
function randomInt( min, max ) {
return Math.floor(Math.random() * ( max - min ) + min);
}
function randomFloat( min, max ) {
return Math.random() * ( max - min ) + min;
}
function Point(x,y)
{
this.x = x;
this.y = y;
}
Point.prototype.draw = function(ctx){
this.value = charArr[randomInt(0,charArr.length-1)].toUpperCase();
this.speed = randomFloat(1,5);
ctx2.fillStyle = "rgba(255,255,255,0.8)";
ctx2.font = fontSize+"px san-serif";
ctx2.fillText(this.value,this.x,this.y);
ctx.fillStyle = "#0F0";
ctx.font = fontSize+"px san-serif";
ctx.fillText(this.value,this.x,this.y);
this.y += this.speed;
if(this.y > ch)
{
this.y = randomFloat(-100,0);
this.speed = randomFloat(2,5);
}
}
for(var i = 0; i < maxColums ; i++) {
fallingCharArr.push(new Point(i*fontSize,randomFloat(-500,0)));
}
var update = function()
{
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0,0,cw,ch);
ctx2.clearRect(0,0,cw,ch);
var i = fallingCharArr.length;
while (i--) {
fallingCharArr[i].draw(ctx);
var v = fallingCharArr[i];
}
requestAnimationFrame(update);
}
update();
Web/_Test/Fun BG/html5-canvas-matrix-effect/src/style.css
+11
View File
@@ -0,0 +1,11 @@
body {
margin: 0;
}
canvas {
display: block;
position:absolute;
top:0;
left:0;
}
Web/_Test/Login Page/index.html
+29
View File
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="login-page.css">
<script defer src="login-page.js"></script>
</head>
<body>
<main id="main-holder">
<h1 id="login-header">Login</h1>
<div id="login-error-msg-holder">
<p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>
</div>
<form id="login-form">
<input type="text" name="username" id="username-field" class="login-form-field" placeholder="Username">
<input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password">
<input type="submit" value="Login" id="login-form-submit">
</form>
</main>
</body>
</html>
Web/_Test/Login Page/login-page.css
+81
View File
@@ -0,0 +1,81 @@
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
display: grid;
justify-items: center;
align-items: center;
background-color: #3a3a3a;
}
#main-holder {
width: 50%;
height: 70%;
display: grid;
justify-items: center;
align-items: center;
background-color: white;
border-radius: 7px;
box-shadow: 0px 0px 5px 2px black;
}
#login-error-msg-holder {
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
}
#login-error-msg {
width: 23%;
text-align: center;
margin: 0;
padding: 5px;
font-size: 12px;
font-weight: bold;
color: #8a0000;
border: 1px solid #8a0000;
background-color: #e58f8f;
opacity: 0;
}
#error-msg-second-line {
display: block;
}
#login-form {
align-self: flex-start;
display: grid;
justify-items: center;
align-items: center;
}
.login-form-field::placeholder {
color: #3a3a3a;
}
.login-form-field {
border: none;
border-bottom: 1px solid #3a3a3a;
margin-bottom: 10px;
border-radius: 3px;
outline: none;
padding: 0px 0px 5px 5px;
}
#login-form-submit {
width: 100%;
padding: 7px;
border: none;
border-radius: 5px;
color: white;
font-weight: bold;
background-color: #3a3a3a;
cursor: pointer;
outline: none;
}
Web/_Test/Login Page/login-page.js
+16
View File
@@ -0,0 +1,16 @@
const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-form-submit");
const loginErrorMsg = document.getElementById("login-error-msg");
loginButton.addEventListener("click", (e) => {
e.preventDefault();
const username = loginForm.username.value;
const password = loginForm.password.value;
if (username === "user" && password === "web_dev") {
alert("You have successfully logged in.");
location.reload();
} else {
loginErrorMsg.style.opacity = 1;
}
})
Web/_Test/_img/RALimg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 392 KiB

Web/_Test/clause.html
+79
View File
@@ -0,0 +1,79 @@
<style>
#tbl-clause{
border: 1px solid black;
}
</style>
<table id="tbl-clause" style="width: 1000px">
<caption><h2>Inserire secondo le direttive sotto riportate</h2></caption>
<tbody>
<tr>
<td style="width: 175px;">
<p>Ufficio Commerciale</p>
</td>
<td style="width: 300px;">
<div style="margin: 10px;">
<p>APPLICARE A
<br>- Offerte</p>
<p>MODALITA'
<br>- Ad ogni pié di pagina
<br>- In carattere compresso</p>
</div>
</td>
<td style="width: auto;"></td>
<td style="width: 450px;"></td>
</tr>
<tr >
<td>
<p>Ufficio Tecnico</p>
</td>
<td>
<div style="margin: 10px;">
<p>APPLICARE A
<br>- Cartigli dwg
<br>- Qualsiasi altra tabella emessa
<br>- Manuali di istruzione *</p>
<p>MODALITA'
<br>- Ad ogni pié di pagina
<br>- In carattere compresso</p>
</div>
</td>
<td></td>
<td >
<div style="margin: 10px;" style="height: 100%;">
<div style="width: 25%; float: left;">w</div>
<div style="width: 75%; float: right;">w</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<p style="margin: 10px;">* Nei manuali di istruzione inserire in ogni pagina anche il testo a lato</p>
</td>
<td></td>
<td>
<div style="margin: 10px;">
<div style="width: 50%; float: left;">©-PAL-It-[anno di emissione]</div>
<div style="width: 50%; float: right;">(Es. ©-PAL-It-2006)</div>
</div>
</td>
</tr>
<tr>
<td>
<p>Ufficio Acquisti</p>
</td>
<td>
<div style="margin: 10px;">
<p>APPLICARE A
<br>- Ordini a fornitori</p>
<p>MODALITA'
<br>- Testo in cappello ad ordini a fornitori</p>
</div>
</td>
<td></td>
<td>3</td>
</tr>
</tbody>
</table>
Web/_Test/layout.html
+92
View File
@@ -0,0 +1,92 @@
<style>
/* table, tr, td {
border: 1px solid black;
} */
.leftItem{
margin: 10px;
}
.leftSectionShortcut{
background-color: aqua;
border-radius: 5px;
height: 100%;
}
.warning-ral{
background-color: #fdf8e3;
border: 1px solid #8d6c3d;
border-radius: 10px;
color: #8d6c3d;
}
</style>
<body>
<div style="width: 800px; height: 725.2px; min-height: auto;">
<div class="warning-ral" style="margin: 10px;">
<table>
<tr>
<td style="width: 100px;"><img style="width: 100px; height: auto;"src=".\_img\RALimg.png"/></td>
<td>
<div style="margin: 12px;text-align: justify;">
<font face="Arial, Helvetica, sans-serif">
<b>Attenzione:</b> La seguente cartella colore è una
rappresentazione approssimata dei colori RAL. A causa delle
differenze nella rappresentazione a video o in stampa non è
possibile garantire una perfetta resa dei colori. Vi preghiamo
di fare riferimento a una cartella colore RAL originale per un
riferimento colore esatto.
</font>
</div>
</td>
</tr>
</table>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>
<table id="tab" style="width: 100%; height: 100%;">
<tr style="height: 100%;">
<td style="width: 25%;">
<div style="overflow:hidden;">
<p class="leftItem">00 - Pippo</p>
<p class="leftItem">00 - Pippo</p>
<p class="leftItem">00 - Pippo</p>
<p class="leftItem">00 - Pippo</p>
<p class="leftItem">00 - Pippo</p>
<p class="leftItem">00 - Pippo</p>
</div>
</td>
<td>
<div>
<p>Pluto</p>
<p>Pluto</p>
<p>Pluto</p>
<p>Pluto</p>
<p>Pluto</p>
<p>Pluto</p>
</div>
</td>
</tr>
</table>
</div>
</body>
<script>
$(document).ready(function(){
var b= $(window).height();
$("#tab").css("height",b);
});
</script>
Web/_Test/square.html
+1
View File
@@ -0,0 +1 @@
<div style='height: 35px; width: 135px; background-color: #fff00f;'></div>
Web/_Test/table.html
+25
View File
@@ -0,0 +1,25 @@
<table style="border: 1px solid black; height: 600px; width: 600px;">
<tbody>
<tr>
<td>
some
</td>
<td>
some
</td>
</tr>
<tr>
<td>
some
</td>
<td>
some
</td>
</tr>
<tr aria-colspan="2" style="background-color: blue;">
<th>
</th>
</tr>
</tbody>
</table>