school project
This commit is contained in:
Matuush
parent
56e421d94c
commit
292370f2cc
17 changed files with 380 additions and 0 deletions
49
bridge/building.html
Normal file
49
bridge/building.html
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> Building </title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<center>
|
||||||
|
<h1>The building</h1>
|
||||||
|
<p>Here is a famous bridge - the Tower Bridge</p>
|
||||||
|
<img src="textures/towerbridge.jpg">
|
||||||
|
<p>And here is a step-by-step tutorial to build a bridge</p> <br>
|
||||||
|
<p id="step"></p>
|
||||||
|
<script>
|
||||||
|
let text = document.getElementById("step");
|
||||||
|
let steps = [
|
||||||
|
"Determine the purpose of the bridge (e.g., pedestrian, vehicular, railway).<br> Conduct a site survey to assess environmental factors such as terrain, waterways, soil conditions, and potential obstructions.<br> Consider the bridge's length, width, load capacity, and anticipated traffic volume.<br> Determine the budget and timeline for the project.",
|
||||||
|
"Hire a qualified structural engineer or bridge designer to create detailed plans and specifications.<br> Select the appropriate bridge type based on factors such as span length, terrain, and aesthetic preferences. Common bridge types include beam bridges, arch bridges, truss bridges, and suspension bridges.<br> Ensure that the design complies with relevant building codes and regulations.",
|
||||||
|
"Obtain necessary permits and approvals from local authorities, environmental agencies, and other relevant stakeholders.<br> Address any environmental impact concerns and mitigation measures.",
|
||||||
|
"Determine the required materials for construction, including structural steel, concrete, timber, or composite materials.<br> Source materials from reputable suppliers and ensure they meet quality standards and specifications.",
|
||||||
|
"Clear the construction site of vegetation, debris, and any existing structures as needed.<br> Set up temporary access roads, staging areas, and construction facilities.<br> Install temporary supports or falsework to aid in construction.",
|
||||||
|
"Excavate foundation pits or footings according to the design specifications.<br> Pour concrete or install driven piles to create stable foundations.<br> Ensure that the foundations are level and capable of supporting the weight of the bridge.",
|
||||||
|
"Assemble prefabricated bridge components off-site or construct them in-place according to the design plans.<br> Erect structural elements such as beams, girders, trusses, or arches using cranes or other heavy equipment.<br> Install deck panels or roadway surfaces, guardrails, and other finishing elements.",
|
||||||
|
"Conduct structural inspections and load tests to ensure the bridge meets safety and performance requirements.<br> Address any deficiencies or issues identified during testing.<br> Obtain final approvals from relevant authorities before opening the bridge to traffic.",
|
||||||
|
"Complete any remaining landscaping, signage, lighting, and aesthetic enhancements.<br> Develop a maintenance plan to ensure the long-term integrity and safety of the bridge.<br> Monitor the bridge regularly for signs of wear, corrosion, or damage, and perform necessary repairs or maintenance as needed.",
|
||||||
|
"Document the construction process, including as-built drawings, specifications, and inspection records.<br> Conduct a final review to ensure all contractual obligations have been met.<br> Celebrate the successful completion of the bridge project with stakeholders and the community."
|
||||||
|
];
|
||||||
|
let id = 0;
|
||||||
|
let size = 9;
|
||||||
|
let set = () => {
|
||||||
|
text.innerHTML = "<b>" + (id+1) + "</b><br>" + steps[id];
|
||||||
|
}
|
||||||
|
let next = () => {
|
||||||
|
if(id < size) id++;
|
||||||
|
set();
|
||||||
|
};
|
||||||
|
let prev = () => {
|
||||||
|
if(id > 0) id--;
|
||||||
|
console.log(id);
|
||||||
|
set();
|
||||||
|
};
|
||||||
|
set();
|
||||||
|
</script>
|
||||||
|
<button onclick="prev()"> Previous </button>
|
||||||
|
<button onclick="next()"> Next </button> <br><br>
|
||||||
|
<a class="text" href="index.html"> Back </a>
|
||||||
|
</center>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
130
bridge/city.html
Normal file
130
bridge/city.html
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="cs">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Město Most</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background-color: rgb(54, 49, 49);
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
height: 300px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
figure{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 0 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
flex: 0 1 calc(20% - 16px); /* Adjusted width */
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 0; /* Removed margin-bottom */
|
||||||
|
border-radius: 5px;
|
||||||
|
box-sizing: border-box; /* Include padding and border in the width */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#animatedText {
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
font-size: 55px;
|
||||||
|
fill: rgb(54, 49, 49);
|
||||||
|
stroke: white;
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-dasharray: 2900;
|
||||||
|
stroke-dashoffset: 2900;
|
||||||
|
animation: drawPath 7s ease-in-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes drawPath {
|
||||||
|
to {stroke-dashoffset: 0;}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="10" y="70" id="animatedText">Vítejte v Mostě!</text>
|
||||||
|
</svg>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<h2>O městě Most</h2>
|
||||||
|
<p>Město Most je historicky významné a moderní město v Ústeckém kraji, ležící na soutoku řeky Ohře a Bíliny. S bohatou kulturní dědictví, průmyslovou tradicí a malebnou krajinou Krušných hor je Most dynamickým centrem pro život, práci a odpočinek.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<h2>Historie</h2>
|
||||||
|
<p>Historie Mostu sahá až do středověku, kdy zde byla založena osada. V průběhu času se město rozvíjelo, především díky uhelným důlním aktivitám a těžbě hnědého uhlí. Během své historie prošel Most mnoha významnými událostmi, které ovlivnily jeho podobu a charakter.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<h2>Kultura a památky</h2>
|
||||||
|
<p>Most nabízí bohatou kulturní scénu, která zahrnuje divadla, muzea, galerie a další kulturní instituce. Mezi nejvýznamnější památky patří Katedrála svatého Víta, historický hrad Hněvín a sídliště Lidice.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<h2>Doprava</h2>
|
||||||
|
<p>Město Most je důležitým dopravním uzlem s dobrou dostupností díky dálnici D8, železničním spojením a autobusovými linkami. To umožňuje snadný přístup do města jak z vnitrozemí, tak i ze sousedních zemí.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<h2>Turistické akce</h2>
|
||||||
|
<p>Okolí Mostu je obklopeno malebnou krajinou Krušných hor a nabízí mnoho turisticky atraktivních míst. Vodní nádrž Fláje a přírodní rezervace jsou ideální pro rekreaci a outdoorové aktivity, zatímco historická centra města lákají milovníky architektury a historie.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Fotogalerie</h3>
|
||||||
|
<div>
|
||||||
|
<figure>
|
||||||
|
<img src="textures/city1.jpg" alt="Most obrázek 1" >
|
||||||
|
<figcaption>Krásné panorama Mostu
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="textures/city2.jpg" alt="Most obrázek 2" >
|
||||||
|
<figcaption>Kostel Nanebevzetí Panny Marie a okolní park
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="textures/city3.jpg" alt="Most obrázek 3">
|
||||||
|
<figcaption>Historická fotografie Mostu
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div></div>
|
||||||
|
</section>
|
||||||
|
<center><a class="text" href="index.html"> Zpět </a></center>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2024 Město Most. Všechna práva vyhrazena.</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
14
bridge/game.html
Normal file
14
bridge/game.html
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> Game </title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<center>
|
||||||
|
<h1>The game</h1>
|
||||||
|
<p>You just lost the game</p> <br>
|
||||||
|
<a class="text" href="index.html"> Back </a>
|
||||||
|
</center>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
18
bridge/index.html
Normal file
18
bridge/index.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> Bridge </title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<center>
|
||||||
|
<h1>Bridge</h1>
|
||||||
|
<p>This is a webpage of the bridge</p> <br>
|
||||||
|
<p>Variants:<p>
|
||||||
|
<a href="building.html">Building</a> <br>
|
||||||
|
<a href="users.html">Users</a> <br>
|
||||||
|
<a href="city.html">City</a> <br>
|
||||||
|
<a href="game.html">Game</a> <br>
|
||||||
|
</center>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
7
bridge/style.css
Normal file
7
bridge/style.css
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'the-font';
|
||||||
|
src: URL('textures/font.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
a, p, h1, button {
|
||||||
|
font-family: 'the-font';
|
||||||
|
}
|
||||||
BIN
bridge/textures/alzbeta.jpg
Normal file
BIN
bridge/textures/alzbeta.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
bridge/textures/alzbeta.png
Normal file
BIN
bridge/textures/alzbeta.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
BIN
bridge/textures/city1.jpg
Normal file
BIN
bridge/textures/city1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 716 KiB |
BIN
bridge/textures/city2.jpg
Normal file
BIN
bridge/textures/city2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
bridge/textures/city3.jpg
Normal file
BIN
bridge/textures/city3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
bridge/textures/font.ttf
Normal file
BIN
bridge/textures/font.ttf
Normal file
Binary file not shown.
BIN
bridge/textures/gordon.jpg
Normal file
BIN
bridge/textures/gordon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
bridge/textures/queen0.png
Normal file
BIN
bridge/textures/queen0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
BIN
bridge/textures/queen1.png
Normal file
BIN
bridge/textures/queen1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
BIN
bridge/textures/queen2.png
Normal file
BIN
bridge/textures/queen2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 464 KiB |
BIN
bridge/textures/towerbridge.jpg
Normal file
BIN
bridge/textures/towerbridge.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
162
bridge/users.html
Normal file
162
bridge/users.html
Normal file
|
|
@ -0,0 +1,162 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> Users </title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.text {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.main {
|
||||||
|
grid-area: main;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
grid-area: left;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
grid-area: right;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.down {
|
||||||
|
grid-area: down;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 3fr 2fr 2fr 3fr;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-template-areas:
|
||||||
|
". main main ."
|
||||||
|
". main main ."
|
||||||
|
"left main main right"
|
||||||
|
"left main main right"
|
||||||
|
". main main ."
|
||||||
|
". main main ."
|
||||||
|
"down down down down";
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
#builder {width: 500px; height: auto; border: solid;}
|
||||||
|
.b {object-fit: cover;}
|
||||||
|
.bb {width: 500px;height: 200px;}
|
||||||
|
#b0 {object-position: 0px 0%;}
|
||||||
|
#b1 {object-position: 0px 50%;}
|
||||||
|
#b2 {object-position: 0px 100%;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<center><h1>The users of Bridge</h1></center>
|
||||||
|
<div class="container">
|
||||||
|
<div class="main">
|
||||||
|
<p class="text" id="text">
|
||||||
|
In England's heart where rivers gently glide,<br>
|
||||||
|
A passion blooms, a bridge to joy beside.<br>
|
||||||
|
In quaint abodes and villages so fair,<br>
|
||||||
|
The English find a love beyond compare.<br><br>
|
||||||
|
|
||||||
|
Oh, Bridge! The game of strategy and wit,<br>
|
||||||
|
Where minds entwine, and friendships knit.<br>
|
||||||
|
Upon the green, where cards are laid,<br>
|
||||||
|
A symphony of minds, a dance well-played.<br><br>
|
||||||
|
|
||||||
|
In cozy parlors and grand saloons,<br>
|
||||||
|
Tea sipped gently, beneath the silver moons.<br>
|
||||||
|
With hands of skill and hearts so keen,<br>
|
||||||
|
English souls find solace in the Bridge machine.<br><br>
|
||||||
|
|
||||||
|
The click of cards, a shuffle soft,<br>
|
||||||
|
A game that lifts the spirits aloft.<br>
|
||||||
|
In London's fog or countryside so green,<br>
|
||||||
|
The English cherish Bridge, a love serene.<br><br>
|
||||||
|
|
||||||
|
Gentle banter, laughter rings,<br>
|
||||||
|
As partners share the joy it brings.<br>
|
||||||
|
Aces, kings, and diamonds bright,<br>
|
||||||
|
Bridge unites them in the soft twilight.<br><br>
|
||||||
|
|
||||||
|
So here's to England, its love so true,<br>
|
||||||
|
For Bridge, a game that will forever renew.<br>
|
||||||
|
In every hand, a story unfolds,<br>
|
||||||
|
Of English hearts, where Bridge's magic holds.<br><br>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="left">
|
||||||
|
<img src="textures/alzbeta.png" alt="Queen Elizbeth the II.">
|
||||||
|
<center><a class="text" href="https://en.wikipedia.org/wiki/Elizabeth_II">A Bridge user</a></center>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<img src="textures/gordon.jpg" alt="Gordon Ramsay" class="right">
|
||||||
|
<center><a class="text" href="https://en.wikipedia.org/wiki/Gordon_Ramsay">Other Bridge user</a></center>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="down">
|
||||||
|
<center>
|
||||||
|
<h1>Build your own queen</h1>
|
||||||
|
<div id="builder">
|
||||||
|
<div class="bb"><img class="b" id="b0"></div>
|
||||||
|
<div class="bb" id="nos"><img class="b" id="b1"></div>
|
||||||
|
<div class="bb"><img class="b" id="b2"></div>
|
||||||
|
</div> <br>
|
||||||
|
|
||||||
|
<button id="deleter" onclick="dletThat()"> :D </button><br>
|
||||||
|
</center>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let b = [0, 0, 0];
|
||||||
|
let set = (a) => {
|
||||||
|
document.getElementById("b" + a).setAttribute("src", "textures/queen" + b[a] + ".png");
|
||||||
|
}
|
||||||
|
for(let i = 0; i < 3; i++) {
|
||||||
|
set(i);
|
||||||
|
document.getElementById("b" + i).setAttribute("onclick", "add("+i+")");
|
||||||
|
}
|
||||||
|
let add = (a) => {
|
||||||
|
b[a] += 1;
|
||||||
|
if(b[a] == 3) b[a] = 0;
|
||||||
|
set(a);
|
||||||
|
}
|
||||||
|
let isthere = true;
|
||||||
|
let dletThat = () => {
|
||||||
|
if(isthere) {
|
||||||
|
document.getElementById("nos").remove();
|
||||||
|
document.getElementById("deleter").remove();
|
||||||
|
isthere = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>An <b>epic</b> story</h1><br>
|
||||||
|
<p class="text">
|
||||||
|
In the heart of an English village, where cobblestone streets wound their way past centuries-old cottages, lived a man named Edward, known for his sharp mind and love for the strategic game of bridge. He was the reigning champion of the local bridge club, his victories celebrated with hearty cheers and friendly banter. <br>
|
||||||
|
|
||||||
|
One crisp autumn evening, the village hall buzzed with anticipation as Edward squared off against a formidable opponent, a visiting expert known for cunning plays and unpredictable strategies. The air crackled with excitement as the cards were dealt, and the tension in the room grew palpable.<br>
|
||||||
|
|
||||||
|
As the game progressed, Edward found himself facing challenges unlike any before. The visiting opponent, shrewd and unpredictable, seemed to anticipate his every move. The once-confident Englishman was caught off guard, and the lead he had taken for granted slipped through his fingers like autumn leaves in the wind.<br>
|
||||||
|
|
||||||
|
The atmosphere in the hall shifted from jubilant to hushed whispers as Edward's once-victorious hand faltered. Each card played felt like a step closer to defeat, and the tension in the room mirrored the intensity of the game.<br>
|
||||||
|
|
||||||
|
Yet, despite the mounting pressure, Edward maintained his composure. Every loss, every misplayed hand, fueled a determination to learn and adapt. The Englishman's face, once marked by confidence, now wore the lines of concentration and resilience.<br>
|
||||||
|
|
||||||
|
In the end, as the last cards were played, and the scorecards were tallied, the room fell silent. The visiting opponent emerged victorious, leaving Edward to face the bitter taste of defeat. The once-unbeatable champion had been dethroned.<br>
|
||||||
|
|
||||||
|
But in that moment of loss, something extraordinary happened. The crowd, instead of reveling in Edward's defeat, rose to their feet in applause. They celebrated not just the victor but also the indomitable spirit of the Englishman who faced adversity with grace.<br>
|
||||||
|
|
||||||
|
As Edward shook hands with his opponent, a smile played on his lips. For in the world of bridge, where victories and defeats were mere twists of fate, the true measure of a player lay in their ability to embrace both with humility and the spirit of fair play.<br>
|
||||||
|
|
||||||
|
And so, in the small English village, the legend of Edward, the once-undefeated bridge champion, continued not only for his triumphs but for the resilience he displayed in the face of a memorable defeat.<br>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<center><a class="text" href="index.html"> Back </a></center>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue