htamas1210/webtech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ora 8 9

Browse Source
This commit is contained in:
htom
2025-11-14 17:30:19 +01:00
parent 5b19b729c4
commit 9ff15dd9f7
26 changed files with 1044 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
ora7/roxfort.css Normal file
View File

@@ -0,0 +1,63 @@
body {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-shadow: 2px 2px 4px silver;
}
form.fancy-form {
background-color: #f8faff;
border: medium solid indigo;
max-width: 50ch;
width: 100%;
}
form.fancy-form div {
margin: 1em;
}
form.fancy-form label:has(+:is(input, select, textarea)[required])::after {
color: red;
content: "*";
vertical-align: super;
}
form.fancy-form input[type=checkbox]:not(:checked)+fieldset.conditional {
display: none;
}
form.fancy-form label {
display: block;
margin-bottom: 0.25em;
}
form.fancy-form > div:has(button[type=submit]){
text-align: center;
}
form.fancy-form button[type=submit]{
background-color: slateblue;
border: none;
border-radius: 0.5em;
color: white;
cursor: pointer;
padding: 0.5em 1.5em;
transition: background-color 0.3s ease;
}
form.fancy-form button[type=submit]:hover{
background-color: forestgreen;
}
form.fancy-form input[type=email]:invalid{
background-color: tomato;
color: white;
}
form.fancy-form :focus{
border-color: gold;
border-width: thick;
outline: none;
}

61
ora7/roxfort.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Roxfort</title>
<link rel="stylesheet" href="roxfort.css">
</head>
<body>
<h1>Roxforti regisztracios urlap urlap</h1>
<form id="hogwarts-form" class="fancy-form" method="post"
action="https://webhook.site/a5246656-f984-4021-b7b7-f25ba55a8852">
<div>
<label for="name">Név</label>
<input type="text" name="name" id="name" required placeholder="name">
</div>
<div>
<label for="dateofbirth">Születési Dátum</label>
<input type="date" name="dateofbirth" id="dateofbirth" required>
</div>
<div>
<label for="house">Ház</label>
<select name="house" id="house" required>
<option data-color-primary="transparent">Válassz egy házat</option>
<option data-color-primary="red" value="Griffindor">Griffindor</option>
<option data-color-primary="yellow" value="Hufflepuff">Hufflepuff</option>
<option data-color-primary="blue" value="Ravenclaw">Ravenclaw</option>
<option data-color-primary="green" value="Slytherin">Slytherin</option>
</select>
</div>
<div>
<label for="password">Jelszó</label>
<input type="password" name="password" id="password" minlength="6" title="Legalább 6 karakter"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$" required>
</div>
<div>
<label for="haspet">Van állata</label>
<input type="checkbox" name="haspet" id="haspet">
<fieldset class="conditional">
<legend>Kisállat</legend>
<label>Faj <input type="text" name="petspecies" placeholder="fajta"></label>
<label>Név <input type="text" name="petname" placeholder="nev"></label>
</fieldset>
</div>
<div>
<label for="email">Email</label>
<input type="email" name="email" id="email" pattern=".+@hogwarts\.ac\.uk">
</div>
<div>
<label for="comments">Commentek</label>
<textarea name="comments" id="comments" rows="5" maxlength="200" placeholder="kviddics"></textarea>
</div>
<div>
<button type="submit">Küldés</button>
</div>
</form>
<script src="roxfort.js"></script>
</body>
</html>

26
ora7/roxfort.js Normal file
View File

@@ -0,0 +1,26 @@
function calculateYearsSince(dateString) {
const date = new Date(dateString);
const diff = Date.now() - date.getTime();
return new Date(diff).getUTCFullYear() - 1970;
}
console.log(calculate2("2001-09-01"));
const form = document.getElementById('hogwarts-form');
form.dateofbirth.addEventListener("input", function(event){
console.log(form.dateofbirth.value);
const age = calculateYearsSince(form.dateofbirth.value);
console.log(age);
if(age >= 11){
form.dateofbirth.setCustomValidity('');
}else{
form.dateofbirth.setCustomValidity('young');
}
})
form.house.addEventListener('change', function (event){
const houseColor = form.house.options[form.house.selectedIndex].dataset.colorPrimary;
console.log(houseColor);
document.body.style.backgroundColor = houseColor;
})

101
ora8/hamlet/hamlet.html Normal file
View File

@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>William Shakespeare: The Tragedy of Hamlet, Prince of Denmark</title>
<meta name="author" content="William Shakespeare">
<meta name="description" content="William Shakespeare's shortest tragedy, published in 1623.">
<meta name="keywords" content="drama, literature, shakespeare">
<meta name="googlebot" content="notranslate">
<link rel="stylesheet" href="play.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<hgroup>
<p class="author">William Shakespeare</p>
<h1>The Tragedy of Hamlet, Prince of Denmark</h1>
</hgroup>
</header>
<nav id="toc">
<h2>Contents</h2>
<ul>
<li>Act 1
<ul>
<li>
<a href="#act1-scene5">Scene 5</a>
</li>
</ul>
</li>
</ul>
</nav>
<main>
<section class="act" id="act1">
<h2>Act 1</h2>
<section class="scene">
<h3 id="act1-scene5">
<a href="#act1-scene5">Scene 5. Another part of the platform.</a>
</h3>
<div class="speech">
<div class="speaker">Hamlet</div>
<div class="line">O all you host of heaven! O earth! What else?</div>
<div class="line">And shall I couple hell? O, fie! Hold, hold, my heart;</div>
<div class="line">And you, my sinews, grow not instant old,</div>
<div class="line">But bear me stiffly up. Remember thee!</div>
<div class="line">Ay, thou poor ghost, while memory holds a seat</div>
<div class="line">In this distracted globe. Remember thee!</div>
<div class="line">Yea, from the table of my memory</div>
<div class="line">I'll wipe away all trivial fond records,</div>
<div class="line">All saws of books, all forms, all pressures past,</div>
<div class="line">That youth and observation copied there;</div>
<div class="line">And thy commandment all alone shall live</div>
<div class="line">Within the book and volume of my brain,</div>
<div class="line">Unmix'd with baser matter: yes, by heaven!</div>
<div class="line">O most pernicious woman!</div>
<div class="line">O villain, villain, smiling, damned villain!</div>
<div class="line">My tables,—meet it is I set it down,</div>
<div class="line">That one may smile, and smile, and be a villain;</div>
<div class="line">At least I'm sure it may be so in Denmark:</div>
<div class="stagedir">Writing</div>
<div class="line">So, uncle, there you are. Now to my word;</div>
<div class="line">It is 'Adieu, adieu! remember me.'</div>
<div class="line">I have sworn 't.</div>
</div>
<div class="stagedir">Enter Horatio and Marcellus</div>
<div class="speech">
<div class="speaker">Horatio</div>
<div class="line"><span class="stagedir">Within</span> My lord, my
lord,—</div>
</div>
<div class="speech">
<div class="speaker">Marcellus</div>
<div class="line"><span class="stagedir">Within</span> Lord
Hamlet,—</div>
</div>
<div class="speech">
<div class="speaker">Horatio</div>
<div class="line"><span class="stagedir">Within</span> Heaven secure him!</div>
</div>
<div class="speech">
<div class="speaker">Hamlet</div>
<div class="line">So be it!</div>
</div>
<div class="speech">
<div class="speaker">Horatio</div>
<div class="line"><span class="stagedir">Within</span> Hillo, ho, ho, my
lord!</div>
</div>
<div class="speech">
<div class="speaker">Hamlet</div>
<div class="line">Hillo, ho, ho, boy! come, bird, come.</div>
</div>
</section>
</section>
</main>
<footer>
<p><small>Text is taken from <cite>The Complete Works of William Shakespeare</cite> at <a href="https://shakespeare.mit.edu/">shakespeare.mit.edu</a>.</small></p>
</footer>
<button id="toggle-stagedir-button">Show/Hide Stage directions</button>
<script src="script.js"></script>
</body></html>

115
ora8/hamlet/play.css Normal file
View File

@@ -0,0 +1,115 @@
body {
border: thin solid black;
font-family: "Palatino Linotype", Palatino, "Times New Roman", serif;
line-height: 1.5;
margin: 1em auto;
padding: 1em;
max-width: 80ch;
}
header, h2, h3, section.scene > div.stagedir, footer {
text-align: center;
}
header > hgroup {
font-variant: small-caps;
letter-spacing: 0.25em;
}
header > hgroup > p.author {
font-size: x-large;
}
nav#toc, section.act {
border-top: medium solid black;
}
nav#toc a {
color: slateblue;
text-decoration: none;
}
section.scene > h3 {
border: thin solid red;
padding: 0.5em;
}
div.speaker {
font-weight: bold;
text-transform: uppercase;
}
.stagedir {
color: gray;
font-style: italic;
}
.stagedir::before {
content: "(";
}
.stagedir::after {
content: ")";
}
div.speech, section.scene > div.stagedir {
padding: 1em;
}
div.speaker > span.stagedir {
font-weight: normal;
text-transform: none;
}
section.scene > div.speech:nth-of-type(odd) {
background-color: aliceblue;
border-top: medium solid slateblue;
}
section.scene > div.speech:nth-of-type(even) {
border-top: medium solid silver;
}
section.scene {
counter-reset: line-number;
}
div.speech > div.line::after {
content: counter(line-number);
counter-increment: line-number;
float: right;
}
div.line:hover, div.stagedir:hover, div.line:hover > span.stagedir {
background-color: crimson;
color: white;
}
section.scene > h3 > a {
color: black;
text-decoration: none;
}
section.scene > h3 > a:hover {
text-decoration: underline;
}
section.scene > h3 > a:hover::before {
color: silver;
content: "#";
display: inline-block;
margin-left: -1em;
width: 1em;
}
section.scene > div:last-of-type:nth-of-type(even) {
border-bottom: medium solid slateblue;
}
section.scene > div:last-of-type:nth-of-type(odd) {
border-bottom: medium solid silver;
}
footer {
padding-top: 1em;
}

13
ora8/hamlet/script.js Normal file
View File

@@ -0,0 +1,13 @@
function toggleStageDirections(){
console.log('button is clicked');
document.querySelectorAll('.stagedir').forEach(stagedir => {
const isShown = getComputedStyle(stagedir).display !== 'none';
if(isShown){
stagedir.style.display = 'none';
}else{
stagedir.style.display = stagedir.tagName === 'DIV' ? 'block' : 'inline';
}
})
}
document.getElementById("toggle-stagedir-button").addEventListener('click', toggleStageDirections);

7
ora8/hamlet/style.css Normal file
View File

@@ -0,0 +1,7 @@
#toggle-stagedir-button{
margin: 1em;
padding: 1em;
position: fixed;
right: 0;
top: 0;
}

120
ora8/webtechnologies/Web Technologies.html Normal file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Web Technologies</title>
<link rel="stylesheet" href="web-technologies.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Web Technologies</h1>
<p>Last modified: <time datetime="2025-10-11">October 11, 2025</time></p>
</header>
<nav id="toc">
<h2>Table of Contents</h2>
<ul class="toc">
<li>
<a href="#json">JSON</a>
</li>
<li>
<a href="#css">CSS</a>
</li>
<li>
<a href="#html">HTML</a>
</li>
</ul>
</nav>
<main>
<article id="json">
<h2>
<a href="#json">JSON</a>
</h2>
<p>JavaScript Object Notation (JSON) is a lightweight, text-based, language-independent data interchange
format.</p>
<h3>Specifications</h3>
<ul class="specs">
<li>
<a href="https://ecma-international.org/publications-and-standards/standards/ecma-404/">ECMA-404:
The JSON Data Interchange Syntax</a>
</li>
<li>
<a href="https://datatracker.ietf.org/doc/html/rfc8259">RFC 8259: The JavaScript Object Notation
(JSON) Data Interchange Format</a>
</li>
<li>
<a href="https://www.iso.org/standard/71616.html">ISO/IEC 21778:2017: Information technology—The
JSON data interchange syntax</a>
</li>
</ul>
<h3>Sample Code</h3>
<pre class="number-lines">{
"title": "Batman Begins",
"year": 2005,
"rating": "PG-13",
"genres": ["action", "crime", "drama"]
}
</pre>
</article>
<article id="css">
<h2>
<a href="#css">CSS</a>
</h2>
<p>Cascading Style Sheets (CSS) is a language for describing
the rendering of structured documents (such as HTML and XML) on a
variety of media.</p>
<h3>Specifications</h3>
<ul class="specs">
<li>
<a href="https://www.w3.org/Style/CSS/current-work">The list of all CSS specifications</a>
</li>
</ul>
<h3>Sample Code</h3>
<pre class="number-lines">h1, h2, h3, h4, h5, h6 {
text-align: center;
}
table.summary &gt; tbody &gt; tr:nth-child(odd) &gt; td {
background-color: lightgray;
}
</pre>
</article>
<article id="html">
<h2>
<a href="#html">HTML</a>
</h2>
<p>HTML is the World Wide Web's core markup language.</p>
<h3>Specifications</h3>
<ul class="specs">
<li>
<a href="https://html.spec.whatwg.org/">HTML Standard</a>
</li>
</ul>
<h3>Sample Code</h3>
<pre class="number-lines">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Hello, World!&lt;/title&gt;
&lt;meta charset="UTF-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Hello, World!&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</article>
</main>
<footer>
<p class="legal"><small>This work is licensed under a <a
href="https://creativecommons.org/licenses/by/4.0/">Creative Commons "Attribution 4.0
International"</a> license.</small>
<img src="Web%20Technologies_files/80x15.png" alt="CC BY 4.0 license logo">
</p>
</footer>
<script src="script.js"></script>
</body>
</html>

17
ora8/webtechnologies/script.js Normal file
View File

@@ -0,0 +1,17 @@
function wrapTextLinesInSpan(element){
const lines = element.textContent.split('\n').filter(Boolean);
element.textContent = '';
for (let index = 0; index < lines.length; index++) {
const span = document.createElement('span');
span.className = 'line';
span.textContent = lines[index];
element.appendChild(span);
if(index < lines.length - 1){
element.appendChild(document.createTextNode('\n'));
}
}
}
document.querySelectorAll('pre.number-lines').forEach(wrapTextLinesInSpan);

14
ora8/webtechnologies/style.css Normal file
View File

@@ -0,0 +1,14 @@
pre.number-lines{
counter-reset: line-number;
}
pre.number-lines > span.line::before{
border-right: 0.5em solid indigo;
content: counter(line-number);
counter-increment: line-number;
display: inline-block;
margin-right: 0.5em;
padding-right: 0.5em;
text-align: right;
width: 2ch;
}

50
ora8/webtechnologies/web-technologies.css Normal file
View File

@@ -0,0 +1,50 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
body {
background-color: whitesmoke;
font-family: "Noto Sans", sans-serif;
margin: 0;
}
header, nav#toc, article, footer {
background-color: white;
border: thin solid gray;
border-radius: 0.25em;
box-shadow: 0 0 0.25em gray;
margin: 1em;
padding: 1em;
}
ul:is(.toc, .specs) a:hover {
background-color: indigo;
color: white;
}
pre {
background-color: aliceblue;
border-left: 0.5em solid indigo;
font-family: "Noto Sans Mono", monospace;
overflow-x: auto;
padding: 0.5em;
}
footer {
text-align: center;
}
p.legal img {
vertical-align: middle;
}
a:is(:link, :visited) {
color: indigo;
}
h2 > a:is(:link, :visited) {
color: black;
text-decoration: none;
}
h2 > a:hover {
text-decoration: underline;
}

37
ora9/colors/color.css Normal file
View File

@@ -0,0 +1,37 @@
body {
margin: 0;
}
div.columns {
display: flex;
height: 100 vh;
}
div.columns > div {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
div.columns > div::before {
content: attr(id);
}
#base {
background-color: plum;
}
#lighter1 {
background-color: rgb(234.4418604651, 197.5581395349, 231.3682170543);
}
#lighter2 {
background-color: rgb(247.8837209302, 235.1162790698, 245.7558139535);
}
#darker1 {
background-color: rgb(200.4651162791, 122.4418604651, 207.5581395349);
}
#darker2 {
background-color: rgb(175.9108527132, 84.8837209302, 194.1162790698);
}/*# sourceMappingURL=color.css.map */

1
ora9/colors/color.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["color.scss","color.css"],"names":[],"mappings":"AAEA;EACI,SAAA;ACDJ;;ADIA;EACI,aAAA;EACA,cAAA;ACDJ;ADGI;EACI,aAAA;EACA,OAAA;EACA,mBAAA;EACA,uBAAA;ACDR;ADII;EACI,iBAAA;ACFR;;ADaA;EACI,sBARG;ACFP;;ADaA;EACI,qEAXO;ACCX;;ADaA;EACI,qEAdO;ACIX;;ADaA;EACI,qEAjBM;ACOV;;ADaA;EACI,oEApBM;ACUV","file":"color.css"}

48
ora9/colors/color.scss Normal file
View File

@@ -0,0 +1,48 @@
@use 'sass:color';
body{
margin: 0;
}
div.columns{
display: flex;
height: 100 vh;
& > div{
display:flex;
flex: 1;
align-items: center;
justify-content: center;
}
& > div::before{
content: attr(id);
}
}
$base: plum;
$lighter1: color.adjust($base, $hue: 5, $lightness: 10%);
$lighter2: color.adjust($base, $hue: 10, $lightness: 20%);
$darker1: color.adjust($base, $hue: -5, $lightness: -10%);
$darker2: color.adjust($base, $hue: -10, $lightness: -20%);
#base {
background-color: $base;
}
#lighter1 {
background-color: $lighter1;
}
#lighter2{
background-color: $lighter2;
}
#darker1 {
background-color: $darker1;
}
#darker2{
background-color: $darker2;
}

22
ora9/colors/index.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Sass Color Manipulation Functions</title>
<link rel="stylesheet" href="color.css">
</head>
<body>
<div class="columns">
<div id="lighter2"></div>
<div id="lighter1"></div>
<div id="base"></div>
<div id="darker1"></div>
<div id="darker2"></div>
</div>
</body>
</html>

28
ora9/sudoku/diagonal-sudoku.css Normal file
View File

@@ -0,0 +1,28 @@
body {
display: flex;
height: 100vh;
margin: 0;
}
table.sudoku {
border: medium solid black;
border-collapse: collapse;
margin: auto;
}
table.sudoku td {
border: thin solid lightgray;
height: 3rem;
width: 3rem;
vertical-align: middle;
text-align: center;
}
table.sudoku td:nth-child(3n) {
border-right: medium solid black;
}
table.sudoku tr:nth-child(3n) {
border-bottom: medium solid black;
}
table.sudoku tr:nth-child(9) > td:nth-child(1), table.sudoku tr:nth-child(9) > td:nth-child(9), table.sudoku tr:nth-child(8) > td:nth-child(2), table.sudoku tr:nth-child(8) > td:nth-child(8), table.sudoku tr:nth-child(7) > td:nth-child(3), table.sudoku tr:nth-child(7) > td:nth-child(7), table.sudoku tr:nth-child(6) > td:nth-child(4), table.sudoku tr:nth-child(6) > td:nth-child(6), table.sudoku tr:nth-child(5) > td:nth-child(5), table.sudoku tr:nth-child(4) > td:nth-child(6), table.sudoku tr:nth-child(4) > td:nth-child(4), table.sudoku tr:nth-child(3) > td:nth-child(7), table.sudoku tr:nth-child(3) > td:nth-child(3), table.sudoku tr:nth-child(2) > td:nth-child(8), table.sudoku tr:nth-child(2) > td:nth-child(2), table.sudoku tr:nth-child(1) > td:nth-child(9), table.sudoku tr:nth-child(1) > td:nth-child(1) {
background-color: gold;
}/*# sourceMappingURL=diagonal-sudoku.css.map */

1
ora9/sudoku/diagonal-sudoku.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["sudoku.scss","diagonal-sudoku.css","diagonal-sudoku.scss"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,aAAA;EACA,SAAA;ACCJ;;ADEA;EACI,0BAAA;EACA,yBAAA;EACA,YAAA;ACCJ;ADCI;EACI,4BAAA;EACA,YAAA;EACA,WAAA;EACA,sBAAA;EACA,kBAAA;ACCR;ADEI;EACI,gCAAA;ACAR;ADEI;EACI,iCAAA;ACAR;;ACrBA;EACI,sBAAA;ADwBJ","file":"diagonal-sudoku.css"}

16
ora9/sudoku/diagonal-sudoku.scss Normal file
View File

@@ -0,0 +1,16 @@
@use "sudoku";
%diagonal{
background-color: gold;
}
table.sudoku{
@for $i from 1 through 9{
tr:nth-child(#{$i}) > td:nth-child(#{$i}){
@extend %diagonal;
}
tr:nth-child(#{$i}) > td:nth-child(#{10 - $i}){
@extend %diagonal;
}
}
}

117
ora9/sudoku/index.html Normal file
View File

@@ -0,0 +1,117 @@
<!DOCTYPE html>
<!-- Source: http://sudoku.menu/diagonal.html -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Diagonal Sudoku</title>
<link rel="stylesheet" type="text/css" href="diagonal-sudoku.css">
</head>
<body>
<table class="sudoku">
<tbody>
<tr>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td>5</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>8</td>
<td>2</td>
<td></td>
<td></td>
<td>9</td>
<td></td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>7</td>
<td></td>
<td>4</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>7</td>
<td>8</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>4</td>
<td>8</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td></td>
<td>9</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>6</td>
<td></td>
<td>2</td>
<td></td>
<td></td>
<td>3</td>
<td>9</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td>5</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

24
ora9/sudoku/sudoku.css Normal file
View File

@@ -0,0 +1,24 @@
body {
display: flex;
height: 100vh;
margin: 0;
}
table.sudoku {
border: medium solid black;
border-collapse: collapse;
margin: auto;
}
table.sudoku td {
border: thin solid lightgray;
height: 3rem;
width: 3rem;
vertical-align: middle;
text-align: center;
}
table.sudoku td:nth-child(3n) {
border-right: medium solid black;
}
table.sudoku tr:nth-child(3n) {
border-bottom: medium solid black;
}/*# sourceMappingURL=sudoku.css.map */

1
ora9/sudoku/sudoku.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["sudoku.scss","sudoku.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,aAAA;EACA,SAAA;ACCJ;;ADEA;EACI,0BAAA;EACA,yBAAA;EACA,YAAA;ACCJ;ADCI;EACI,4BAAA;EACA,YAAA;EACA,WAAA;EACA,sBAAA;EACA,kBAAA;ACCR;ADEI;EACI,gCAAA;ACAR;ADEI;EACI,iCAAA;ACAR","file":"sudoku.css"}

26
ora9/sudoku/sudoku.scss Normal file
View File

@@ -0,0 +1,26 @@
body {
display: flex;
height: 100vh;
margin: 0;
}
table.sudoku{
border: medium solid black;
border-collapse: collapse;
margin: auto;
td{
border: thin solid lightgray;
height: 3rem;
width: 3rem;
vertical-align: middle;
text-align: center;
}
td:nth-child(3n){
border-right: medium solid black;
}
tr:nth-child(3n){
border-bottom: medium solid black;
}
}

74
ora9/transition/color-transition.css Normal file
View File

@@ -0,0 +1,74 @@
body {
margin: 0;
}
div.columns {
display: flex;
height: 100vh;
}
div.columns > div {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
div.columns > div:nth-child(1) {
background-color: pink;
}
div.columns > div:nth-child(1)::before {
content: "pink";
}
div.columns > div:nth-child(2) {
background-color: #ffdfc0;
}
div.columns > div:nth-child(2)::before {
content: "#ffdfc0";
}
div.columns > div:nth-child(3) {
background-color: #f5ffc0;
}
div.columns > div:nth-child(3)::before {
content: "#f5ffc0";
}
div.columns > div:nth-child(4) {
background-color: #cbffc0;
}
div.columns > div:nth-child(4)::before {
content: "#cbffc0";
}
div.columns > div:nth-child(5) {
background-color: #c0ffdf;
}
div.columns > div:nth-child(5)::before {
content: "#c0ffdf";
}
div.columns > div:nth-child(6) {
background-color: #c0f5ff;
}
div.columns > div:nth-child(6)::before {
content: "#c0f5ff";
}
div.columns > div:nth-child(7) {
background-color: #c0cbff;
}
div.columns > div:nth-child(7)::before {
content: "#c0cbff";
}
div.columns > div:nth-child(8) {
background-color: #dfc0ff;
}
div.columns > div:nth-child(8)::before {
content: "#dfc0ff";
}
div.columns > div:nth-child(9) {
background-color: #ffc0f5;
}
div.columns > div:nth-child(9)::before {
content: "#ffc0f5";
}
div.columns > div:nth-child(10) {
background-color: pink;
}
div.columns > div:nth-child(10)::before {
content: "pink";
}/*# sourceMappingURL=color-transition.css.map */

1
ora9/transition/color-transition.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["color-transition.scss","color-transition.css"],"names":[],"mappings":"AAKA;EACI,SAAA;ACJJ;;ADOA;EACI,aAAA;EACA,aAAA;ACJJ;ADMI;EACI,aAAA;EACA,OAAA;EACA,mBAAA;EACA,uBAAA;ACJR;ADWY;EACI,sBAHI;ACNpB;ADYY;EACI,eAAA;ACVhB;ADKY;EACI,yBAHI;ACApB;ADMY;EACI,kBAAA;ACJhB;ADDY;EACI,yBAHI;ACMpB;ADAY;EACI,kBAAA;ACEhB;ADPY;EACI,yBAHI;ACYpB;ADNY;EACI,kBAAA;ACQhB;ADbY;EACI,yBAHI;ACkBpB;ADZY;EACI,kBAAA;ACchB;ADnBY;EACI,yBAHI;ACwBpB;ADlBY;EACI,kBAAA;ACoBhB;ADzBY;EACI,yBAHI;AC8BpB;ADxBY;EACI,kBAAA;AC0BhB;AD/BY;EACI,yBAHI;ACoCpB;AD9BY;EACI,kBAAA;ACgChB;ADrCY;EACI,yBAHI;AC0CpB;ADpCY;EACI,kBAAA;ACsChB;AD3CY;EACI,sBAHI;ACgDpB;AD1CY;EACI,eAAA;AC4ChB","file":"color-transition.css"}

36
ora9/transition/color-transition.scss Normal file
View File

@@ -0,0 +1,36 @@
@use 'sass:color';
@use 'sass:math';
$base-color: pink;
body{
margin: 0
}
div.columns{
display: flex;
height: 100vh;
& > div{
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
@mixin color-columns($n){
@for $i from 1 through $n{
$color: color.adjust($base-color, $hue: ($i - 1) * math.div(360, $n - 1));
& > div:nth-child(#{$i}){
background-color: $color;
}
& > div:nth-child(#{$i})::before{
content: "#{$color}";
}
}
}
@include color-columns(10);
}

25
ora9/transition/index.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Transition</title>
<link rel="stylesheet" href="color-transition.css">
</head>
<body>
<div class="columns">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>