Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground
Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
data_array
Python Editor
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><h1>Plan lekcji 2A</h1> <div class='tabela lp'> <p class="naglowek">lp</p> <p>0</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p> </div> <div class='tabela godzina'> <p class="naglowek">Godzina</p> <p>7:15-8:00</p><p>8:00-8:45</p><p>8:50-9:35</p><p>9:40-10:25</p><p>10:30-11:15</p><p>11:30-12:15</p><p>12:25-13:10</p><p>13:15-14:00</p><p>14:10-14:55</p> </div> <div class='dzien1 tabela'> <p class="naglowek">Poniedziałek</p> </div> <div class='dzien2 tabela'> <p class="naglowek">Wtorek</p> </div> <div class='dzien3 tabela'> <p class="naglowek">Środa</p> </div> <div class='dzien4 tabela'> <p class="naglowek">Czwartek</p> </div> <div class='dzien5 tabela'> <p class="naglowek">Piątek</p> </div>
body { font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; font-size: 22px; } .tabela { display: block; width: 200px; float: left; } .lp > p:not(:first-child){ background-color:#EAFCC7; } .godzina > p:not(:first-child){ background-color: #FAFAB7; } .naglowek { background-color: #FAEBD7; font-style: italic; font-size: 28px; } p { border: 1px solid black; height: 30px; text-align: center; margin-top: -15px; } .lp { width: 50px; } .godzina { width: 150px; } p:hover { background-color: #D2691E; } .naglowek:hover { background-color: #FAEBD7; } #dymek { display: none; position: absolute; border: 1px solid #FAEBD7; border-radius: 15px; padding: 5px 20px 5px 20px; background-color: RGBA(250,250,183, 0.8); }
/*zmienne ktorymi ma byc uzupelniony plan, nevermind var liczby = ['0','1','2','3','4','5','6','7','8']; var godziny = ['7:15-8:00','8:00-8:45','8:50-9:35','9:40-10:25','10:30-11:15','11:30-12:15','12:25-13:10','13:15-14:00','14:10-14:55']; */ //wybor dnia, petla powinna przeleciec po 1-5 i wpisac je w pon-ptk var l = ['---','matma', 'fizyka', 'informatyka', 'polski', 'angielski', 'niemiecki', 'czlowiek i srod.', 'historia', 'religia']; var plan2a = [ [l[0], l[1], l[4], l[4], l[2], l[5], l[6]], [l[2],l[1],l[0],l[3],l[3]], [l[6],l[4],l[4],l[1],l[1],l[5]], [l[0],l[1],l[1],l[7],l[2],l[2],l[4],l[3]], [l[1],l[1],l[1],l[1],l[1],l[2],l[2]] ]; var sale = ['1','2','3','4','5','6','7','8','9']; //matma, fiz, inf, polski, ang, niem, cis, his, rel var lekcja = ''; var plan = []; var numerSali = ''; // Funkcja tworząca cały plan var stworzPlan = function(){ var aktualnyDzien; plan = plan2a; // Pierwsza petla po dniach tygodnia w planie for (var i = 0; i < plan.length; i++){ aktualnyDzien = i + 1; // + 1, ponieważ zaczynamy od 0, a w HTMLu masz od 1 // Druga pętla po przedmiotach w danym dniu for(var j = 0; j < plan[i].length; j++){ $( "<p>" + plan[i][j] + '</p>' ).appendTo( ".dzien" + aktualnyDzien ); } } }; stworzPlan(); $('p').hover(function pobierztxt(p){ p = $(this); lekcja = (p).text(); if (lekcja !== '' && lekcja != '---' && isNaN(lekcja) === true && p.hasClass('naglowek') === false && p.parent().hasClass('godzina') === false){ $('#dymek').text('Sala nr: ' + numerSali); $('#dymek').css('display', 'block'); var offset = p.offset(); $('#dymek').offset({left:offset.left, top:offset.top - 50}); } }, function(p){ p = $(this); $('#dymek').css('display', 'none'); }); switch(lekcja){ case l[0]: numerSali =sale[0]; break; case l[1]: numerSali =sale[1]; break; case l[2]: numerSali =sale[2]; break; case l[3]: numerSali =sale[3]; break; default: numerSali='111'; } $('<div id="dymek"></div>').appendTo('body');
Check out the new AI-powered Python Playground
×