cyberweb 0.4.174 → 0.5.225
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of cyberweb might be problematic. Click here for more details.
- checksums.yaml +4 -4
- data/README.md +1782 -405
- data/bin/cyberweb_sanitize +10 -0
- data/bin/download_webpage +7 -0
- data/bin/html_to_cyberweb_converter +7 -0
- data/cyberweb.gemspec +25 -25
- data/doc/README.gen +1745 -383
- data/doc/USAGE.md +16 -16
- data/doc/{AUTHORS.md → authors.md} +0 -0
- data/doc/configuration/configuration.md +3 -1
- data/doc/deprecations.md +13 -7
- data/doc/{DOCUMENTATION_FOR_CYBERSPRAWL.md → documentation_for_cybersprawl.md} +7 -4
- data/doc/future_design_goals.md +33 -0
- data/doc/html_characters.md +7 -7
- data/doc/{JQUERY.md → jquery/jquery.md} +20 -12
- data/doc/{MOUSE.md → mouse.md} +1 -9
- data/doc/{RENDER_WEB_BASE.md → render_web_base.md} +11 -4
- data/doc/todo/todo_for_the_cyberweb_project.md +791 -0
- data/examples/advanced/animated_css_example/animated_css_example.html +47 -0
- data/examples/advanced/animated_submarine/animated_submarine.html +511 -0
- data/examples/advanced/animated_windmill/animated_windmill.html +468 -0
- data/examples/advanced/delayed_update_of_the_body_via_javascript.cgi +8 -5
- data/examples/advanced/draw_circle/draw_circle.cgi +36 -0
- data/examples/advanced/drop_shadow_examples.cgi +37 -0
- data/examples/advanced/games/snake/food.png +0 -0
- data/examples/advanced/games/snake/ground.png +0 -0
- data/examples/advanced/games/snake/snake.cgi +28 -0
- data/examples/advanced/games/tetris/tetris.cgi +7 -0
- data/examples/advanced/games/tetris/tetris.rb +17 -0
- data/examples/advanced/games/tetris/tetris.sinatra +58 -0
- data/examples/advanced/games/tic-tac-toe/tic-tac-toe.cgi +123 -0
- data/examples/advanced/get_some_coffee/get_some_coffee.html +293 -0
- data/examples/advanced/glow_on_hover_example/glow_on_hover_example.cgi +27 -0
- data/examples/advanced/hybrid_experiment.cgi +34 -12
- data/examples/advanced/images/global_css_rules_for_the_images.cgi +32 -0
- data/examples/advanced/larger_image_on_mouse_over_example.cgi +2 -2
- data/examples/advanced/no_right_click.cgi +4 -3
- data/examples/advanced/{objectified_html_tags.cgi → objectified_html_tags/objectified_html_tags.cgi} +12 -3
- data/examples/advanced/objectified_html_tags/testing_objectified_html_tags_with_the_webobject.cgi +28 -0
- data/examples/advanced/random_glow_effects.cgi +34 -0
- data/examples/advanced/select_everything_example/select_everything_example.cgi +25 -0
- data/examples/advanced/simple_calculator.cgi +13 -21
- data/examples/advanced/simple_form_example.cgi +11 -11
- data/examples/advanced/traffic_light/traffic_light.html +163 -0
- data/examples/advanced/weather_animation/weather_animation.html +560 -0
- data/examples/css/animated_3D_cube_example/animated_3D_cube_example.html +265 -0
- data/examples/css/animated_bird_example/animated_bird_example.html +207 -0
- data/examples/css/animated_desk_example/animated_desk_example.html +120 -0
- data/examples/css/animated_dog_example/animated_dog_example.html +432 -0
- data/examples/css/animated_submit_button.html +190 -0
- data/examples/css/animated_text_colour_change/animated_text_colour_change.html +41 -0
- data/examples/css/blue_border.html +3 -1
- data/examples/css/border_image_example/border_image_example.html +40 -0
- data/examples/css/box_shadow/box_shadow_example.html +18 -0
- data/examples/css/christmas_snow_globe_animation.html +596 -0
- data/examples/css/css_border_spacing_example.html +5 -5
- data/examples/css/css_bubbles.html +3 -1
- data/examples/css/css_checkboxes_example/css_checkboxes_example.html +110 -0
- data/examples/css/css_drag_and_drop.html +1 -5
- data/examples/css/css_grid_feline_style/css_grid_feline_style.html +161 -0
- data/examples/css/css_neon_glow_effects.html +1 -1
- data/examples/css/css_rotate_these_words.html +83 -0
- data/examples/css/css_text_decoration_example.html +7 -7
- data/examples/css/css_thermometer/css_thermometer.html +91 -0
- data/examples/css/{css_tooltip.html → css_tooltip/css_tooltip.html} +8 -6
- data/examples/css/css_typewriter_example/css_typewriter_example.html +226 -0
- data/examples/css/cyberweb_animated_logo/cyberweb_animated_logo.html +179 -0
- data/examples/css/daily_coffee/daily_coffee.html +1110 -0
- data/examples/css/different_colour_on_selected_text/different_colour_on_selected_text.html +31 -0
- data/examples/css/differentially_glowing_text_example/differentially_glowing_text_example.html +82 -0
- data/examples/css/fade_in_and_fade_out_effect.html +2 -2
- data/examples/css/flying_birds_example/flying_birds_example.html +171 -0
- data/examples/css/folding_cards_example/folding_cards_example.html +624 -0
- data/examples/css/font_size_examples.html +7 -5
- data/examples/css/glowing_on_hover_animation/glowing_on_hover_animation.html +90 -0
- data/examples/css/grow_example.html +31 -0
- data/examples/css/happy_toaster_example/happy_toaster_example.html +830 -0
- data/examples/css/landing_on_mars_animation/landing_on_mars_animation.html +374 -0
- data/examples/css/letter_spacing_example.cgi +18 -14
- data/examples/css/lighthouse_example/lighthouse_example.html +1161 -0
- data/examples/css/{meter_example.html → meter_example/meter_example.html} +0 -0
- data/examples/css/motorcycle_on_the_go/motorcycle_on_the_go.html +227 -0
- data/examples/css/on_hover_glow_effect/on_hover_glow_effect.html +50 -0
- data/examples/css/on_mouse_button_pressed.html +6 -4
- data/examples/css/our_solar_system/our_solar_system.html +441 -0
- data/examples/css/outline/outline_versus_border_example.html +57 -0
- data/examples/css/polaroid_card_effect_example/polaroid_card_effect_example.html +130 -0
- data/examples/css/responsive_image_gallery/responsive_image_gallery.html +97 -0
- data/examples/css/rotating_DNA/rotating_DNA.html +626 -0
- data/examples/css/rotating_sphere_example/rotating_sphere_example.html +112 -0
- data/examples/css/scale_example.html +4 -5
- data/examples/css/shadow_example_in_CSS/shadow_example_in_CSS.cgi +62 -0
- data/examples/css/shaking_shapes_example.html +133 -0
- data/examples/css/simple_stars_example/simple_stars_example.html +27 -0
- data/examples/css/slide_checkbox_example/slide_checkbox_example.html +564 -0
- data/examples/css/speak_bubble_quote_example/speak_bubble_quote_example.html +109 -0
- data/examples/css/speedy_truck_example/speedy_truck_example.html +168 -0
- data/examples/css/{sticky_div_example.html → sticky_div_example/sticky_div_example.html} +0 -0
- data/examples/css/stitched_div.html +9 -0
- data/examples/css/sun_and_clouds_animation/sun_and_clouds_animation.html +292 -0
- data/examples/css/talking_candles_example/talking_candles_example.html +550 -0
- data/examples/css/text_decoration_underline_example/text_decoration_underline_example.html +62 -0
- data/examples/css/this_is_a_cat/this_is_a_cat.html +219 -0
- data/examples/css/three_dots_indicating_page_loading.html +65 -0
- data/examples/css/user_select_example/user_select_example.html +24 -0
- data/examples/css/walking_cat/walking_cat.html +128 -0
- data/examples/css/water_wave_text_animation_effect/water_wave_text_animation_effect.html +86 -0
- data/examples/csv/README.md +2 -1
- data/examples/flip_card_example/flip_card_example.html +10 -3
- data/examples/games/README.md +3 -0
- data/examples/games/snake/images/food.png +0 -0
- data/examples/games/snake/images/ground.png +0 -0
- data/examples/games/snake/snake.html +16 -0
- data/examples/games/snake/snake.js +117 -0
- data/examples/games/tetris/smaller_tetris_game.html +518 -0
- data/examples/games/tetris/tetris.html +461 -0
- data/examples/games/tic-tac-toe/index.js +125 -0
- data/examples/games/tic-tac-toe/style.css +79 -0
- data/examples/games/tic-tac-toe/tic-tac-toe.html +39 -0
- data/examples/html/MathML/001_show_a_simple_quadratic_equation.html +22 -0
- data/examples/html/MathML/002_simple_equation.html +7 -0
- data/examples/html/MathML/003_function_of_example.html +17 -0
- data/examples/html/MathML/README.md +2 -0
- data/examples/html/abbr_example.html +2 -5
- data/examples/html/accordion/README.md +1 -0
- data/examples/html/accordion/accordion.html +56 -0
- data/examples/html/base64_image_example.html +8 -5
- data/examples/html/buttons_example.html +133 -0
- data/examples/html/canvas_drawing_example.html +54 -0
- data/examples/html/colour_wheel.html +441 -442
- data/examples/html/column_width_example.html +2 -2
- data/examples/html/custom_cursor.html +8 -5
- data/examples/html/cyberweb_logo/README.md +2 -0
- data/examples/html/cyberweb_logo/cyberweb_logo.html +11 -0
- data/examples/html/draggable_paragraph.html +1 -2
- data/examples/html/email_popup_example/email_popup_example.html +175 -0
- data/examples/html/fieldset_example.html +3 -1
- data/examples/html/font_examples/README.md +1 -0
- data/examples/html/font_examples/chancery_text.html +19 -0
- data/examples/html/font_examples/fantasy_text.html +19 -0
- data/examples/html/font_examples/georgia_text.html +19 -0
- data/examples/html/font_size_example/font_size_example.html +85 -0
- data/examples/html/glyph_example.html +0 -1
- data/examples/html/grayscale_filter_example/grayscale_filter_example.html +15 -0
- data/examples/html/html_links_example.html +61 -0
- data/examples/html/html_slider/html_slider.html +39 -0
- data/examples/html/input_autofocus_example.html +11 -7
- data/examples/html/input_placeholder_example.html +15 -0
- data/examples/html/larger_image_on_mouse_over_example.html +1 -1
- data/examples/html/ordered_and_unordered_bulletsin.html +4 -2
- data/examples/html/play_video_example.html +3 -2
- data/examples/html/remote_image_example.html +8 -2
- data/examples/html/select_everything_on_mouse_click_event.html +38 -0
- data/examples/html/selected_text_appears_in_another_colour_example.html +34 -0
- data/examples/html/send_email_hyperlink/send_email_hyperlink.html +8 -0
- data/examples/html/simple_unordered_list.html +3 -0
- data/examples/html/spinner_example/spinner.html +79 -0
- data/examples/html/table_with_header_example.html +26 -13
- data/examples/html/test_mkv_codec/test_mkv_codec.html +11 -0
- data/examples/html/two_columns_flex_example.html +4 -1
- data/examples/{javascript → javascript_and_jquery}/README.md +0 -0
- data/examples/{javascript → javascript_and_jquery}/arrays/arrays_example_in_javascript.html +0 -0
- data/examples/javascript_and_jquery/autocomplete_on_an_input_field/autocomplete_on_an_input_field.html +295 -0
- data/examples/javascript_and_jquery/change_the_background_colour_dynamically/change_the_background_colour_dynamically.html +41 -0
- data/examples/{javascript → javascript_and_jquery}/delay_example/delay_example.html +0 -0
- data/examples/{javascript → javascript_and_jquery}/drag_support/drag_support.html +0 -0
- data/examples/javascript_and_jquery/jquery_bubbling_header/bubbling_header.html +109 -0
- data/examples/{javascript → javascript_and_jquery}/jquery_drag_and_drop/drag_and_drop_image_example.html +0 -0
- data/examples/javascript_and_jquery/jquery_showcase/README.md +6 -0
- data/examples/javascript_and_jquery/jquery_showcase/jquery_001.cgi +23 -0
- data/examples/javascript_and_jquery/jquery_showcase/jquery_002.cgi +34 -0
- data/examples/javascript_and_jquery/jquery_showcase/jquery_003.cgi +24 -0
- data/examples/javascript_and_jquery/jquery_showcase/jquery_004.cgi +34 -0
- data/examples/javascript_and_jquery/on_change_event/on_change_event.html +29 -0
- data/examples/javascript_and_jquery/on_click_colour_change/on_click_colour_change.html +31 -0
- data/examples/javascript_and_jquery/on_click_display_random_number/on_click_display_random_number.html +43 -0
- data/examples/{javascript → javascript_and_jquery}/on_click_event_hello_world/on_click_event_hello_world.html +0 -0
- data/examples/javascript_and_jquery/on_mouse_wheel_event/on_mouse_wheel_event.html +37 -0
- data/examples/javascript_and_jquery/read_the_content_of_a_local_file/read_the_content_of_a_local_file.html +35 -0
- data/examples/{javascript → javascript_and_jquery}/rgb_to_hex/rgb_to_hex.html +0 -0
- data/examples/{javascript → javascript_and_jquery}/screen_resolution/screen_resolution.html +2 -1
- data/examples/{javascript → javascript_and_jquery}/select_everything/select_everything.html +1 -1
- data/examples/javascript_and_jquery/vue/README.md +1 -0
- data/examples/javascript_and_jquery/vue/showcasing_vue.html +80 -0
- data/examples/{javascript → javascript_and_jquery}/write_into_a_file/write_into_a_file.html +0 -0
- data/examples/rack/example_with_html_template.rb +5 -4
- data/examples/rack/example_with_rack_and_cyberweb_showing_how_to_use_images.rb +3 -2
- data/examples/rack/hello_world_example_with_rack.rb +3 -2
- data/examples/rack/lobster.rb +7 -5
- data/examples/rack/rack_env.rb +3 -3
- data/examples/{show_greek_letters.rb → show_greek_letters/show_greek_letters.rb} +0 -0
- data/examples/simple/input_example_with_coloured_focus.cgi +32 -0
- data/examples/simple/input_type_examples.cgi +51 -0
- data/examples/simple/on_click_event_hello_world.cgi +5 -5
- data/examples/simple/rotate_these_words.cgi +90 -0
- data/examples/{example1.rb → simple/show_how_to_set_a_title.rb} +0 -0
- data/examples/simple/simple_gradient.cgi +57 -0
- data/images/cyberweb_favicon.png +0 -0
- data/images/cyberweb_logo.png +0 -0
- data/images/cyberweb_theme.png +0 -0
- data/lib/cyberweb/REST/README.md +7 -0
- data/lib/cyberweb/REST/base/accept_entry.rb +94 -0
- data/lib/cyberweb/REST/base/application.rb +37 -0
- data/lib/cyberweb/REST/base/bad_request.rb +10 -0
- data/lib/cyberweb/REST/base/base.rb +1131 -0
- data/lib/cyberweb/REST/base/common_logger.rb +35 -0
- data/lib/cyberweb/REST/base/delegator.rb +75 -0
- data/lib/cyberweb/REST/base/error.rb +8 -0
- data/lib/cyberweb/REST/base/extended_rack.rb +66 -0
- data/lib/cyberweb/REST/base/helpers/helpers.rb +473 -0
- data/lib/cyberweb/REST/base/helpers/stream.rb +75 -0
- data/lib/cyberweb/REST/base/mime_type_entry.rb +67 -0
- data/lib/cyberweb/{constants/file_constants.rb → REST/base/not_found.rb} +10 -5
- data/lib/cyberweb/REST/base/request.rb +145 -0
- data/lib/cyberweb/REST/base/response.rb +94 -0
- data/lib/cyberweb/REST/base/templates/templates.rb +208 -0
- data/lib/cyberweb/REST/base/wrapper.rb +28 -0
- data/lib/cyberweb/{constants/nl.rb → REST/constants.rb} +8 -9
- data/lib/cyberweb/REST/main.rb +109 -0
- data/lib/cyberweb/REST/show_exceptions.rb +396 -0
- data/lib/cyberweb/and_sinatra_base.rb +0 -0
- data/lib/cyberweb/autoinclude.rb +0 -0
- data/lib/cyberweb/autoinclude_webobject.rb +0 -0
- data/lib/cyberweb/base/base.rb +9 -2
- data/lib/cyberweb/base/colours.rb +8 -6
- data/lib/cyberweb/base/constants.rb +8 -0
- data/lib/cyberweb/base/misc.rb +140 -53
- data/lib/cyberweb/base/save_file.rb +3 -0
- data/lib/cyberweb/base_module/base_module.rb +79 -0
- data/lib/cyberweb/cascading_style_sheets/admonition.css +0 -0
- data/lib/cyberweb/cascading_style_sheets/balloon.css +0 -0
- data/lib/cyberweb/cascading_style_sheets/border.css +107 -41
- data/lib/cyberweb/cascading_style_sheets/code.css +0 -0
- data/lib/cyberweb/cascading_style_sheets/colours.css +46 -23
- data/lib/cyberweb/cascading_style_sheets/css_reset.css +59 -0
- data/lib/cyberweb/cascading_style_sheets/cursors.css +14 -0
- data/lib/cyberweb/cascading_style_sheets/custom/animated_bike.css +199 -0
- data/lib/cyberweb/cascading_style_sheets/default.css +171 -136
- data/lib/cyberweb/cascading_style_sheets/div.css +18 -4
- data/lib/cyberweb/cascading_style_sheets/drop_shadow.css +154 -0
- data/lib/cyberweb/cascading_style_sheets/error_404_css_class.css +26 -0
- data/lib/cyberweb/cascading_style_sheets/fonts.css +60 -39
- data/lib/cyberweb/cascading_style_sheets/glow_effects.css +69 -0
- data/lib/cyberweb/cascading_style_sheets/gradient_effects.css +5 -0
- data/lib/cyberweb/cascading_style_sheets/hover.css +4212 -0
- data/lib/cyberweb/cascading_style_sheets/links.css +8 -8
- data/lib/cyberweb/cascading_style_sheets/margin.css +195 -178
- data/lib/cyberweb/cascading_style_sheets/menu.css +0 -0
- data/lib/cyberweb/cascading_style_sheets/message_boxes.css +0 -0
- data/lib/cyberweb/cascading_style_sheets/misc.css +51 -11
- data/lib/cyberweb/cascading_style_sheets/popup.css +0 -0
- data/lib/cyberweb/cascading_style_sheets/rpg.css +0 -0
- data/lib/cyberweb/cascading_style_sheets/ruby_regexes.css +12 -0
- data/lib/cyberweb/cascading_style_sheets/shapes.css +59 -0
- data/lib/cyberweb/cascading_style_sheets/template2.css +0 -0
- data/lib/cyberweb/cascading_style_sheets/text_shadow.css +21 -0
- data/lib/cyberweb/cascading_style_sheets/tooltip.css +0 -0
- data/lib/cyberweb/cgi/constants.rb +1 -2
- data/lib/cyberweb/cgi/exceptions.rb +1 -1
- data/lib/cyberweb/coloured_tags/coloured_tags.rb +1 -1
- data/lib/cyberweb/colours/colour_chart.rb +10 -56
- data/lib/cyberweb/colours/colours.rb +149 -4
- data/lib/cyberweb/commandline/commandline_interface.rb +13 -8
- data/lib/cyberweb/configuration/load_the_configuration_file.rb +1 -1
- data/lib/cyberweb/constants/constants.rb +592 -2
- data/lib/cyberweb/controller/{webobject_controller.rb → controller.rb} +1 -1
- data/lib/cyberweb/css_manager/css_manager.rb +237 -0
- data/lib/cyberweb/databases/sqlite.rb +56 -0
- data/lib/cyberweb/debug/debug.rb +1 -1
- data/lib/cyberweb/encoding/encoding.rb +11 -0
- data/lib/cyberweb/erb/test.rhtml +0 -0
- data/lib/cyberweb/erb/test_template.erb +0 -0
- data/lib/cyberweb/evaluate_from_the_same_named_file_then_serve.rb +1 -1
- data/lib/cyberweb/favicon/favicon.rb +8 -7
- data/lib/cyberweb/forum/README.md +4 -0
- data/lib/cyberweb/foto_gallery/foto_gallery.rb +158 -0
- data/lib/cyberweb/generator/README.md +2 -2
- data/lib/cyberweb/generator/cgi.rb +22 -9
- data/lib/cyberweb/generator/static_webpage.rb +22 -12
- data/lib/cyberweb/html_tags/README.md +3 -3
- data/lib/cyberweb/html_tags/button.rb +10 -2
- data/lib/cyberweb/html_tags/h2.rb +6 -4
- data/lib/cyberweb/html_tags/html_tags.rb +17 -1
- data/lib/cyberweb/html_tags/input.rb +10 -5
- data/lib/cyberweb/html_tags/legend.rb +1 -1
- data/lib/cyberweb/html_tags/span.rb +10 -2
- data/lib/cyberweb/html_tags/table.rb +30 -19
- data/lib/cyberweb/html_template/html_template.rb +248 -85
- data/lib/cyberweb/images/embed_this_image.rb +3 -1
- data/lib/cyberweb/images/images.rb +2 -2
- data/lib/cyberweb/images/is_image.rb +2 -1
- data/lib/cyberweb/images/path_to_images.rb +2 -1
- data/lib/cyberweb/images/remove_this_substring_from_all_images.rb +1 -1
- data/lib/cyberweb/images/standalone_drag_and_drop_this_image.rb +3 -3
- data/lib/cyberweb/images/string_image.rb +6 -3
- data/lib/cyberweb/images_base64_encoded/404_ERROR.png.md +1 -0
- data/lib/cyberweb/images_base64_encoded/AUSRUFUNGSZEICHEN.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/BLUEARROW.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/BUBBLE.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/CAT.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/CAUTION.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/CHEERING_PERSON.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/CURSOR.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/DOT_01.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/DUCKY.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/ELEPHANT.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/HALLOWEEN.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/HANGING_MONKEY.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/LENS.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/README.md +0 -0
- data/lib/cyberweb/images_base64_encoded/SIX_SIDED_DICE.png.md +1 -0
- data/lib/cyberweb/images_base64_encoded/TU_WIEN_LOGO.png.md +0 -0
- data/lib/cyberweb/images_base64_encoded/VOGEL.png.md +0 -0
- data/lib/cyberweb/javascript/drag_and_drop.rb +17 -14
- data/lib/cyberweb/javascript/javascript.rb +79 -34
- data/lib/cyberweb/javascript/javascript_clock.rb +50 -14
- data/lib/cyberweb/javascript/javascript_helper/javascript_helper.rb +59 -0
- data/lib/cyberweb/javascript/jquery.rb +9 -5
- data/lib/cyberweb/javascript/on_click_change_opacity.rb +5 -1
- data/lib/cyberweb/javascript/on_click_hide.rb +2 -0
- data/lib/cyberweb/javascript/popup.rb +5 -2
- data/lib/cyberweb/javascript/resize.rb +4 -1
- data/lib/cyberweb/javascript_code/README.md +1 -1
- data/lib/cyberweb/javascript_code/custom_functions.js +51 -25
- data/lib/cyberweb/javascript_code/disable_right_click.js +5 -0
- data/lib/cyberweb/javascript_code/games/snake.js +113 -0
- data/lib/cyberweb/javascript_code/games/tetris.js +491 -0
- data/lib/cyberweb/javascript_code/games/tic-tac-toe.js +125 -0
- data/lib/cyberweb/javascript_code/html_colours.js +161 -0
- data/lib/cyberweb/javascript_code/jquery/jquery-3.6.1.js +10909 -0
- data/lib/cyberweb/javascript_code/select_everything_on_mouse_click_event.js +23 -0
- data/lib/cyberweb/javascript_code/simple_calculator.js +3 -3
- data/lib/cyberweb/javascript_code/simulate_a_dice.js +20 -0
- data/lib/cyberweb/javascript_code/sleep.js +3 -0
- data/lib/cyberweb/mouse/mouse.rb +4 -1
- data/lib/cyberweb/objectified/html_tags/README.md +13 -0
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/a.rb +17 -35
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/abbr.rb +18 -9
- data/lib/cyberweb/objectified/html_tags/base.rb +960 -0
- data/lib/cyberweb/objectified/html_tags/blockquote.rb +106 -0
- data/lib/cyberweb/{objectified_html_tags/span.rb → objectified/html_tags/body.rb} +25 -20
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/button.rb +26 -34
- data/lib/cyberweb/objectified/html_tags/canvas.rb +202 -0
- data/lib/cyberweb/objectified/html_tags/cite.rb +103 -0
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/combobox.rb +26 -34
- data/lib/cyberweb/objectified/html_tags/div.rb +155 -0
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/embed.rb +18 -33
- data/lib/cyberweb/objectified/html_tags/fieldset.rb +107 -0
- data/lib/cyberweb/objectified/html_tags/figure.rb +152 -0
- data/lib/cyberweb/objectified/html_tags/form.rb +155 -0
- data/lib/cyberweb/objectified/html_tags/h1.rb +176 -0
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/h2.rb +32 -40
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/h3.rb +30 -42
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/h4.rb +30 -42
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/h5.rb +31 -40
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/h6.rb +31 -41
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/hbox.rb +12 -10
- data/lib/cyberweb/objectified/html_tags/head.rb +126 -0
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/img.rb +47 -32
- data/lib/cyberweb/objectified/html_tags/include_objectified_html_tags.rb +49 -0
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/input.rb +50 -51
- data/lib/cyberweb/objectified/html_tags/map.rb +107 -0
- data/lib/cyberweb/{objectified_html_tags/div.rb → objectified/html_tags/meta.rb} +36 -47
- data/lib/cyberweb/{objectified_html_tags/h1.rb → objectified/html_tags/object.rb} +34 -42
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/p.rb +17 -32
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/pre.rb +28 -34
- data/lib/cyberweb/{objectified_html_tags/table.rb → objectified/html_tags/progress.rb} +99 -94
- data/lib/cyberweb/objectified/html_tags/span.rb +103 -0
- data/lib/cyberweb/objectified/html_tags/table.rb +257 -0
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/textarea.rb +25 -36
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/title.rb +11 -17
- data/lib/cyberweb/{objectified_html_tags/form.rb → objectified/html_tags/ul.rb} +45 -42
- data/lib/cyberweb/{objectified_html_tags → objectified/html_tags}/window.rb +15 -10
- data/lib/cyberweb/objectified/mask/README.md +8 -0
- data/lib/cyberweb/objectified/mask/compatibility_to_html_tags.rb +40 -0
- data/lib/cyberweb/objectified/mask/mask.rb +490 -0
- data/lib/cyberweb/objectified/web_object/README.md +4 -0
- data/lib/cyberweb/objectified/web_object/web_object.rb +119 -0
- data/lib/cyberweb/predefined_and_freeform_methods/frage.rb +4 -2
- data/lib/cyberweb/predefined_and_freeform_methods/freeform_methods.rb +30 -19
- data/lib/cyberweb/predefined_and_freeform_methods/hash_registered_extra_tags.rb +6 -0
- data/lib/cyberweb/predefined_and_freeform_methods/header.rb +2 -0
- data/lib/cyberweb/predefined_and_freeform_methods/predefined_methods.rb +10 -175
- data/lib/cyberweb/project/project.rb +9 -4
- data/lib/cyberweb/rack/request.rb +11 -11
- data/lib/cyberweb/raw_images/404.png +0 -0
- data/lib/cyberweb/raw_images/500.png +0 -0
- data/lib/cyberweb/raw_images/README.md +2 -0
- data/lib/cyberweb/raw_images/a_dice.png +0 -0
- data/lib/cyberweb/raw_images/food.png +0 -0
- data/lib/cyberweb/raw_images/ground.png +0 -0
- data/lib/cyberweb/requires/require_generators.rb +1 -1
- data/lib/cyberweb/requires/require_html_tags_files.rb +1 -1
- data/lib/cyberweb/requires/require_javascript_files.rb +1 -1
- data/lib/cyberweb/requires/require_objectified_html_tags_files.rb +29 -3
- data/lib/cyberweb/requires/require_the_constants.rb +3 -1
- data/lib/cyberweb/requires/require_the_cyberweb_project.rb +12 -31
- data/lib/cyberweb/requires/require_the_toplevel_methods_files.rb +1 -1
- data/lib/cyberweb/requires/require_web_object_files.rb +1 -1
- data/lib/cyberweb/requires/require_yaml.rb +3 -3
- data/lib/cyberweb/rest +1 -0
- data/lib/cyberweb/route_handler/class_based_test.rb +43 -0
- data/lib/cyberweb/route_handler/module/misc.rb +108 -0
- data/lib/cyberweb/route_handler/module/route_handler_module.rb +215 -0
- data/lib/cyberweb/route_handler/module/verbs.rb +53 -0
- data/lib/cyberweb/route_handler/route_handler.rb +56 -0
- data/lib/cyberweb/route_handler/test.rb +43 -0
- data/lib/cyberweb/{constants/array_predefined_constants.rb → sinatra/base/set_use_this_port.rb} +16 -9
- data/lib/cyberweb/sinatra/base/use_this_port.rb +40 -0
- data/lib/cyberweb/sinatra/base.rb +51 -36
- data/lib/cyberweb/sinatra/custom_extensions.rb +39 -14
- data/lib/cyberweb/standalone_classes/all_css_classes.rb +1 -1
- data/lib/cyberweb/standalone_classes/calculator.rb +7 -1
- data/lib/cyberweb/standalone_classes/correct_image_entries_in_html_file.rb +12 -7
- data/lib/cyberweb/standalone_classes/turn_html_into_cyberweb.rb +13 -11
- data/lib/cyberweb/svg/standalone/README.md +2 -0
- data/lib/cyberweb/svg/standalone/amusement_park.svg +738 -0
- data/lib/cyberweb/svg/svg.cgi +2 -3
- data/lib/cyberweb/toplevel_methods/a.rb +2 -1
- data/lib/cyberweb/toplevel_methods/anmerkung.rb +3 -0
- data/lib/cyberweb/toplevel_methods/audio.rb +1 -1
- data/lib/cyberweb/toplevel_methods/bold.rb +9 -3
- data/lib/cyberweb/toplevel_methods/charsets.rb +17 -13
- data/lib/cyberweb/toplevel_methods/consider_serving_the_web_object.rb +3 -3
- data/lib/cyberweb/toplevel_methods/css.rb +719 -25
- data/lib/cyberweb/{csv → toplevel_methods}/csv.rb +5 -3
- data/lib/cyberweb/{constants/roebe.rb → toplevel_methods/custom_error_page.rb} +10 -10
- data/lib/cyberweb/toplevel_methods/{date.rb → date_and_time.rb} +23 -10
- data/lib/cyberweb/toplevel_methods/disable.rb +7 -3
- data/lib/cyberweb/toplevel_methods/dot.rb +2 -2
- data/lib/cyberweb/toplevel_methods/download_webpage.rb +41 -3
- data/lib/cyberweb/toplevel_methods/edit_configuration_file.rb +1 -1
- data/lib/cyberweb/toplevel_methods/fields.rb +2 -0
- data/lib/cyberweb/toplevel_methods/filename.rb +3 -1
- data/lib/cyberweb/toplevel_methods/frames.rb +0 -2
- data/lib/cyberweb/toplevel_methods/google.rb +52 -0
- data/lib/cyberweb/{html_codes → toplevel_methods}/greek_letters.rb +22 -1
- data/lib/cyberweb/toplevel_methods/hardware_information.rb +2 -1
- data/lib/cyberweb/{help → toplevel_methods}/help.rb +3 -2
- data/lib/cyberweb/toplevel_methods/html_comment.rb +2 -2
- data/lib/cyberweb/toplevel_methods/html_tables.rb +401 -266
- data/lib/cyberweb/toplevel_methods/internal_hash.rb +173 -0
- data/lib/cyberweb/{io → toplevel_methods}/io.rb +1 -1
- data/lib/cyberweb/toplevel_methods/javascript.rb +42 -0
- data/lib/cyberweb/toplevel_methods/jquery.rb +8 -0
- data/lib/cyberweb/toplevel_methods/last_modified.rb +4 -0
- data/lib/cyberweb/toplevel_methods/links.rb +23 -7
- data/lib/cyberweb/toplevel_methods/listing.rb +2 -1
- data/lib/cyberweb/toplevel_methods/localhost.rb +3 -0
- data/lib/cyberweb/toplevel_methods/markdown.rb +3 -2
- data/lib/cyberweb/toplevel_methods/mathml.rb +5 -3
- data/lib/cyberweb/toplevel_methods/message_boxes.rb +6 -2
- data/lib/cyberweb/toplevel_methods/misc.rb +531 -79
- data/lib/cyberweb/toplevel_methods/padlem_and_marlem.rb +3 -0
- data/lib/cyberweb/toplevel_methods/path.rb +6 -1
- data/lib/cyberweb/toplevel_methods/pdf.rb +1 -1
- data/lib/cyberweb/toplevel_methods/process_content.rb +4 -7
- data/lib/cyberweb/toplevel_methods/progress.rb +6 -2
- data/lib/cyberweb/toplevel_methods/quote.rb +7 -1
- data/lib/cyberweb/toplevel_methods/random.rb +4 -1
- data/lib/cyberweb/toplevel_methods/rds.rb +14 -6
- data/lib/cyberweb/toplevel_methods/read_and_display.rb +3 -2
- data/lib/cyberweb/toplevel_methods/return_head_start.rb +1 -1
- data/lib/cyberweb/toplevel_methods/return_html_fin.rb +6 -3
- data/lib/cyberweb/toplevel_methods/return_html_header.rb +8 -3
- data/lib/cyberweb/toplevel_methods/return_html_start.rb +7 -2
- data/lib/cyberweb/toplevel_methods/return_meta_collection.rb +15 -4
- data/lib/cyberweb/toplevel_methods/return_pwd.rb +4 -0
- data/lib/cyberweb/toplevel_methods/return_strict_doctype.rb +8 -7
- data/lib/cyberweb/toplevel_methods/roebe.rb +6 -0
- data/lib/cyberweb/toplevel_methods/s2.rb +3 -1
- data/lib/cyberweb/toplevel_methods/sanitize_url.rb +7 -5
- data/lib/cyberweb/toplevel_methods/sbr.rb +7 -7
- data/lib/cyberweb/toplevel_methods/server_base_directory.rb +7 -3
- data/lib/cyberweb/toplevel_methods/show_and_display.rb +15 -15
- data/lib/cyberweb/toplevel_methods/show_configuration.rb +2 -2
- data/lib/cyberweb/toplevel_methods/spacer.rb +5 -2
- data/lib/cyberweb/toplevel_methods/svg.rb +62 -4
- data/lib/cyberweb/toplevel_methods/tag.rb +8 -2
- data/lib/cyberweb/toplevel_methods/temp_directory.rb +2 -2
- data/lib/cyberweb/toplevel_methods/textile.rb +2 -2
- data/lib/cyberweb/toplevel_methods/title.rb +14 -2
- data/lib/cyberweb/toplevel_methods/video.rb +3 -4
- data/lib/cyberweb/toplevel_methods/write_what_into.rb +2 -0
- data/lib/cyberweb/utility_scripts/README.md +3 -4
- data/lib/cyberweb/utility_scripts/autogenerate_drop_shadow_rules/autogenerate_drop_shadow_rules.rb +71 -0
- data/lib/cyberweb/utility_scripts/create_standalone_html_page.rb +223 -0
- data/lib/cyberweb/utility_scripts/download_all_images_from_this_website.rb +143 -0
- data/lib/cyberweb/utility_scripts/download_balloon_css.rb +1 -1
- data/lib/cyberweb/utility_scripts/fix_incorrect_links_to_locally_existing_images_in_this_file.rb +142 -0
- data/lib/cyberweb/utility_scripts/html_to_cyberweb_converter.rb +235 -0
- data/lib/cyberweb/utility_scripts/images_to_html/images_to_html.rb +878 -0
- data/lib/cyberweb/utility_scripts/images_to_html/misc.rb +62 -0
- data/lib/cyberweb/utility_scripts/new_tags.rb +105 -0
- data/lib/cyberweb/utility_scripts/simple_index/README.md +9 -0
- data/lib/cyberweb/utility_scripts/simple_index/simple_index.rb +149 -0
- data/lib/cyberweb/version/version.rb +2 -2
- data/lib/cyberweb/vue/README.md +2 -0
- data/lib/cyberweb/vue/vue.rb +91 -0
- data/lib/cyberweb/web_images/array_listing_all_project_images.rb +1 -1
- data/lib/cyberweb/web_images/map_symbol_to_image_location.rb +60 -4
- data/lib/cyberweb/web_images/web_images.rb +37 -20
- data/lib/cyberweb/{constants/array_images.rb → web_object/display_output_and_report.rb} +11 -10
- data/lib/cyberweb/web_object/english.rb +55 -0
- data/lib/cyberweb/web_object/favicon.rb +103 -22
- data/lib/cyberweb/web_object/html_tags.rb +1433 -0
- data/lib/cyberweb/web_object/images.rb +428 -398
- data/lib/cyberweb/web_object/{javascript.rb → javascript_and_jquery.rb} +174 -276
- data/lib/cyberweb/web_object/{links.rb → link.rb} +185 -83
- data/lib/cyberweb/web_object/misc.rb +3934 -3928
- data/lib/cyberweb/web_object/reset.rb +153 -67
- data/lib/cyberweb/web_object/run.rb +1 -1
- data/lib/cyberweb/web_object/web_object.rb +3690 -49
- data/lib/cyberweb/web_scraper/scrape_this_url.rb +4 -2
- data/lib/cyberweb/webmin/biology_server.cgi +14 -15
- data/lib/cyberweb/webmin/calculator.cgi +2 -2
- data/lib/cyberweb/webmin/colour_chart.cgi +4 -5
- data/lib/cyberweb/webmin/comments.cgi +8 -7
- data/lib/cyberweb/webmin/comments_data +0 -0
- data/lib/cyberweb/webmin/constants.rb +1 -2
- data/lib/cyberweb/webmin/dictionary.cgi +3 -4
- data/lib/cyberweb/webmin/sys_info.cgi +1 -2
- data/lib/cyberweb/webmin/webforum.cgi +1 -2
- data/lib/cyberweb/webmin/webmin.cgi +2 -3
- data/lib/cyberweb/yaml/autogenerated_system_settings.yml +10 -10
- data/lib/cyberweb/yaml/custom_tags.yml +1 -1
- data/lib/cyberweb/yaml/html5_global_attributes.yml +5 -1
- data/lib/cyberweb/yaml/html_tag_legend.yml +2 -0
- data/lib/cyberweb/yaml/http_status_codes.yml +4 -1
- data/lib/cyberweb/yaml/load_these_yaml_files_by_default.yml +29 -0
- data/lib/cyberweb/yaml/project_configuration.yml +42 -31
- data/lib/cyberweb/yaml/video_attributes.yml +2 -0
- data/lib/cyberweb/yaml/web_images.yml +1 -1
- data/test/REST/simple.rb +7 -0
- data/test/complex_tests/simple_sinatra_example_using_cyberweb/simple.rb +1 -1
- data/test/complex_tests/sinatra_or_cyberweb/sinatra_or_cyberweb.cgi +1 -1
- data/test/complex_tests/sinatra_or_cyberweb/sinatra_or_cyberweb.rb +4 -4
- data/test/complex_tests/sinatra_or_cyberweb/sinatra_or_cyberweb.sinatra +1 -2
- data/test/complex_tests/testing_frames.cgi +3 -5
- data/test/complex_tests/testing_objectified_html_tags/testing_objectified_html_tags.html +28 -0
- data/test/complex_tests/testing_objectified_html_tags/testing_objectified_html_tags.rb +175 -0
- data/test/complex_tests/testing_style_variants/show_coloured_boxes.cgi +11 -7
- data/test/complex_tests/testing_tables.cgi +3 -3
- data/test/complex_tests/testing_the_cyberweb_shell.rb +2 -0
- data/test/complex_tests/testing_web_object.rb +5 -2
- data/test/css/README.md +4 -3
- data/test/css/return_the_content_of_these_css_classes.rb +5 -1
- data/test/css/test_hover_css/test_hover_css.cgi +59 -0
- data/test/css/test_ordered_list/test_ordered_list.cgi +31 -0
- data/test/css/testing_css_effects.cgi +3 -4
- data/test/css/testing_css_masking.cgi +3 -4
- data/test/hello_world/hello_world.cgi +6 -4
- data/test/html_template/html_template.rb +15 -0
- data/test/javascript/testing_custom_functions.js +24 -0
- data/test/javascript/testing_drag_and_drop_support.cgi +1 -1
- data/test/javascript/testing_on_click_change_opacity.cgi +4 -5
- data/test/javascript/testing_snowflakes.cgi +2 -2
- data/test/simple_tests/ad-hoc-test.cgi +5 -2
- data/test/simple_tests/cgi/hello_world_with_cyberweb.cgi +14 -0
- data/test/simple_tests/commandline_tests.rb +21 -15
- data/test/simple_tests/display_this_file.cgi +2 -2
- data/test/simple_tests/simple_html_example.cgi +2 -1
- data/test/simple_tests/simple_html_test_page/simple_html_test_page.html +20 -0
- data/test/simple_tests/simple_status_page.cgi +2 -2
- data/test/simple_tests/string_s2_test.rb +5 -0
- data/test/simple_tests/test_simple_string_as_input.rb +3 -1
- data/test/simple_tests/testing_base64_images.cgi +3 -4
- data/test/simple_tests/testing_checkboxes.cgi +22 -0
- data/test/simple_tests/testing_dragging_an_image.cgi +5 -6
- data/test/simple_tests/testing_editable_text.cgi +2 -3
- data/test/simple_tests/testing_email.cgi +6 -7
- data/test/simple_tests/testing_embedding_a_pdf_file.cgi +5 -5
- data/test/simple_tests/testing_google_charts.cgi +3 -3
- data/test/simple_tests/testing_html_forms.cgi +3 -3
- data/test/simple_tests/testing_html_template.rb +2 -0
- data/test/simple_tests/testing_popup_div.cgi +2 -3
- data/test/simple_tests/testing_return_dataset_without_any_comments.rb +3 -1
- data/test/simple_tests/testing_the_cap_box.cgi +3 -4
- data/test/simple_tests/testing_the_div_tag.cgi +3 -4
- data/test/simple_tests/testing_the_headers_tag.cgi +3 -4
- data/test/simple_tests/testing_the_html_colours.cgi +2 -3
- data/test/simple_tests/testing_the_info_box.cgi +2 -3
- data/test/simple_tests/testing_the_li_tag.cgi +2 -1
- data/test/simple_tests/testing_the_s2_method.rb +6 -1
- data/test/simple_tests/testing_the_select_tag.cgi +16 -8
- data/test/simple_tests/testing_the_span_tag.cgi +2 -3
- data/test/simple_tests/testing_web_images.rb +4 -2
- data/test/testing_html_tags/button_example.cgi +6 -7
- metadata +345 -151
- data/doc/CONVENTIONS.md +0 -7
- data/doc/CYBERWEB_TUTORIAL.cgi +0 -43
- data/doc/FUTURE_DESIGN_GOAL_CONSIDERATIONS.md +0 -13
- data/doc/todo/TODO_FOR_THE_CYBERWEB_PROJECT.md +0 -1089
- data/examples/css/shadow_example_in_CSS.cgi +0 -30
- data/lib/cyberweb/charts/README.md +0 -2
- data/lib/cyberweb/charts/google_charts.rb +0 -51
- data/lib/cyberweb/colours/random_colour.rb +0 -28
- data/lib/cyberweb/colours/sanitize_for_colours.rb +0 -95
- data/lib/cyberweb/constants/array_local_css_files.rb +0 -35
- data/lib/cyberweb/constants/configuration_file.rb +0 -33
- data/lib/cyberweb/constants/http_status_codes.rb +0 -42
- data/lib/cyberweb/constants/project_constants.rb +0 -99
- data/lib/cyberweb/constants/standalone_constants.rb +0 -309
- data/lib/cyberweb/csv/README.md +0 -2
- data/lib/cyberweb/generator/webpage_for_images.rb +0 -553
- data/lib/cyberweb/html_codes/README.md +0 -15
- data/lib/cyberweb/images/real/README.md +0 -6
- data/lib/cyberweb/io/README.md +0 -1
- data/lib/cyberweb/javascript/scroll.rb +0 -17
- data/lib/cyberweb/objectified_html_tags/README.md +0 -8
- data/lib/cyberweb/objectified_html_tags/base.rb +0 -376
- data/lib/cyberweb/predefined_and_freeform_methods/hash_css_class_to_use.rb +0 -55
- data/lib/cyberweb/requires/require_charts.rb +0 -20
- data/lib/cyberweb/web_object/css.rb +0 -627
- data/lib/cyberweb/web_object/evaluate.rb +0 -126
- data/lib/cyberweb/web_object/html_related_tags.rb +0 -320
- data/lib/cyberweb/web_object/initialize.rb +0 -51
- data/lib/cyberweb/web_object/input_related_functionality.rb +0 -414
- data/lib/cyberweb/web_object/languages.rb +0 -172
- data/lib/cyberweb/web_object/params.rb +0 -289
- data/lib/cyberweb/web_object/sinatra_related_functionality.rb +0 -30
- data/lib/cyberweb/web_object/sitemap.rb +0 -176
- data/lib/cyberweb/web_object/table.rb +0 -378
- data/test/complex_tests/testing_objectified_html_tags.rb +0 -82
- data/test/javascript/testing_cheerleader_javascript.cgi +0 -0
@@ -0,0 +1,219 @@
|
|
1
|
+
<html>
|
2
|
+
<style>
|
3
|
+
|
4
|
+
.this_is_a_cat {
|
5
|
+
position: relative;
|
6
|
+
height: 170px;
|
7
|
+
width: 192.1px;
|
8
|
+
}
|
9
|
+
|
10
|
+
.this_is_the_cats_left_ear {
|
11
|
+
position: absolute;
|
12
|
+
top: -30%;
|
13
|
+
height: 60%;
|
14
|
+
width: 25%;
|
15
|
+
background: #fff;
|
16
|
+
}
|
17
|
+
|
18
|
+
.this_is_the_cats_left_ear::before,
|
19
|
+
.this_is_the_cats_left_ear::after {
|
20
|
+
content: '';
|
21
|
+
position: absolute;
|
22
|
+
bottom: 24%;
|
23
|
+
height: 10%;
|
24
|
+
width: 5%;
|
25
|
+
border-radius: 50%;
|
26
|
+
background: #161616;
|
27
|
+
}
|
28
|
+
|
29
|
+
.this_is_the_cats_left_ear::after {
|
30
|
+
transform-origin: 50% 100%;
|
31
|
+
}
|
32
|
+
.this_is_the_cats_left_ear--left {
|
33
|
+
left: -7%;
|
34
|
+
border-radius: 70% 30% 0% 0% / 100% 100% 0% 0%;
|
35
|
+
transform: rotate(-15deg);
|
36
|
+
}
|
37
|
+
|
38
|
+
.this_is_the_cats_left_ear--left::before,
|
39
|
+
.this_is_the_cats_left_ear--left::after {
|
40
|
+
right: 10%;
|
41
|
+
}
|
42
|
+
|
43
|
+
.this_is_the_cats_left_ear--left::after {
|
44
|
+
transform: rotate(-45deg);
|
45
|
+
}
|
46
|
+
|
47
|
+
.this_is_the_cats_left_ear--right {
|
48
|
+
right: -7%;
|
49
|
+
border-radius: 30% 70% 0% 0% / 100% 100% 0% 0%;
|
50
|
+
transform: rotate(15deg);
|
51
|
+
}
|
52
|
+
.this_is_the_cats_left_ear--right::before,
|
53
|
+
.this_is_the_cats_left_ear--right::after {
|
54
|
+
left: 10%;
|
55
|
+
}
|
56
|
+
.this_is_the_cats_left_ear--right::after {
|
57
|
+
transform: rotate(45deg);
|
58
|
+
}
|
59
|
+
|
60
|
+
.this_is_the_face_of_the_cat {
|
61
|
+
position: absolute;
|
62
|
+
height: 100%;
|
63
|
+
width: 100%;
|
64
|
+
background: #161616;
|
65
|
+
border-radius: 50%;
|
66
|
+
}
|
67
|
+
|
68
|
+
.this_is_the_cats_left_eye {
|
69
|
+
position: absolute;
|
70
|
+
top: 35%;
|
71
|
+
height: 30%;
|
72
|
+
width: 31%;
|
73
|
+
background: #fff;
|
74
|
+
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
75
|
+
}
|
76
|
+
.this_is_the_cats_left_eye::after {
|
77
|
+
content: '';
|
78
|
+
position: absolute;
|
79
|
+
top: 0;
|
80
|
+
left: 0;
|
81
|
+
height: 0;
|
82
|
+
width: 100%;
|
83
|
+
border-radius: 0 0 50% 50Array/0Array 0 40% 40%;
|
84
|
+
background: #161616;
|
85
|
+
animation: blink 4s infinite ease-in;
|
86
|
+
}
|
87
|
+
@keyframes blink {
|
88
|
+
0% {
|
89
|
+
height: 0;
|
90
|
+
}
|
91
|
+
90% {
|
92
|
+
height: 0;
|
93
|
+
}
|
94
|
+
92.5% {
|
95
|
+
height: 100%;
|
96
|
+
}
|
97
|
+
95% {
|
98
|
+
height: 0;
|
99
|
+
}
|
100
|
+
97.5% {
|
101
|
+
height: 100%;
|
102
|
+
}
|
103
|
+
100% {
|
104
|
+
height: 0;
|
105
|
+
}
|
106
|
+
}
|
107
|
+
|
108
|
+
.this_is_the_cats_left_eye::before {
|
109
|
+
content: '';
|
110
|
+
position: absolute;
|
111
|
+
top: 60%;
|
112
|
+
height: 10%;
|
113
|
+
width: 15%;
|
114
|
+
background: #fff;
|
115
|
+
border-radius: 50%;
|
116
|
+
}
|
117
|
+
|
118
|
+
.this_is_the_cats_left_eye--left {
|
119
|
+
left: 0;
|
120
|
+
}
|
121
|
+
|
122
|
+
.this_is_the_cats_left_eye--left::before {
|
123
|
+
right: -5%;
|
124
|
+
}
|
125
|
+
|
126
|
+
.this_is_the_cats_left_eye--right {
|
127
|
+
right: 0;
|
128
|
+
}
|
129
|
+
|
130
|
+
.this_is_the_cats_left_eye--right::before {
|
131
|
+
left: -5%;
|
132
|
+
}
|
133
|
+
.this_is_the_muzzle_of_the_cat {
|
134
|
+
position: absolute;
|
135
|
+
top: 60%;
|
136
|
+
left: 50%;
|
137
|
+
height: 6%;
|
138
|
+
width: 10%;
|
139
|
+
background: #fff;
|
140
|
+
transform: translateX(-50%);
|
141
|
+
border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
|
142
|
+
}
|
143
|
+
|
144
|
+
.this_is_the_cats_left_eye-pupil {
|
145
|
+
position: absolute;
|
146
|
+
top: 25%;
|
147
|
+
height: 50%;
|
148
|
+
width: 20%;
|
149
|
+
background: #161616;
|
150
|
+
border-radius: 50%;
|
151
|
+
animation: look-around 4s infinite;
|
152
|
+
}
|
153
|
+
@keyframes look-around {
|
154
|
+
0% {
|
155
|
+
transform: translate(0);
|
156
|
+
}
|
157
|
+
5% {
|
158
|
+
transform: translate(50%, -25%);
|
159
|
+
}
|
160
|
+
10% {
|
161
|
+
transform: translate(50%, -25%);
|
162
|
+
}
|
163
|
+
15% {
|
164
|
+
transform: translate(-100%, -25%);
|
165
|
+
}
|
166
|
+
20% {
|
167
|
+
transform: translate(-100%, -25%);
|
168
|
+
}
|
169
|
+
25% {
|
170
|
+
transform: translate(0, 0);
|
171
|
+
}
|
172
|
+
100% {
|
173
|
+
transform: translate(0, 0);
|
174
|
+
}
|
175
|
+
}
|
176
|
+
.this_is_the_cats_left_eye--left .this_is_the_cats_left_eye-pupil {
|
177
|
+
right: 30%;
|
178
|
+
}
|
179
|
+
.this_is_the_cats_left_eye--right .this_is_the_cats_left_eye-pupil {
|
180
|
+
left: 30%;
|
181
|
+
}
|
182
|
+
.this_is_the_cats_left_eye-pupil::after {
|
183
|
+
content: '';
|
184
|
+
position: absolute;
|
185
|
+
top: 30%;
|
186
|
+
right: -5%;
|
187
|
+
height: 20%;
|
188
|
+
width: 35%;
|
189
|
+
border-radius: 50%;
|
190
|
+
background: #fff;
|
191
|
+
}
|
192
|
+
|
193
|
+
/* General page styling */
|
194
|
+
html {
|
195
|
+
height: 100%;
|
196
|
+
display: flex;
|
197
|
+
align-items: center;
|
198
|
+
justify-content: center;
|
199
|
+
}
|
200
|
+
|
201
|
+
</style>
|
202
|
+
|
203
|
+
<body style="background: black;">
|
204
|
+
<div class="this_is_a_cat">
|
205
|
+
<div class="this_is_the_cats_left_ear this_is_the_cats_left_ear--left"></div>
|
206
|
+
<div class="this_is_the_cats_left_ear this_is_the_cats_left_ear--right"></div>
|
207
|
+
<div class="this_is_the_face_of_the_cat">
|
208
|
+
<div class="this_is_the_cats_left_eye this_is_the_cats_left_eye--left">
|
209
|
+
<div class="this_is_the_cats_left_eye-pupil"></div>
|
210
|
+
</div>
|
211
|
+
<div class="this_is_the_cats_left_eye this_is_the_cats_left_eye--right">
|
212
|
+
<div class="this_is_the_cats_left_eye-pupil"></div>
|
213
|
+
</div>
|
214
|
+
<div class="this_is_the_muzzle_of_the_cat"></div>
|
215
|
+
</div>
|
216
|
+
</div>
|
217
|
+
|
218
|
+
</body>
|
219
|
+
</html>
|
@@ -0,0 +1,65 @@
|
|
1
|
+
<html>
|
2
|
+
<head>
|
3
|
+
<title>
|
4
|
+
Animated Colour Palette
|
5
|
+
</title>
|
6
|
+
|
7
|
+
<style>
|
8
|
+
|
9
|
+
:root {
|
10
|
+
/*
|
11
|
+
--main-color: #ecf0f1;
|
12
|
+
*/
|
13
|
+
/* Specify the background colour here. */
|
14
|
+
--point-color: #555; /* This is the colour of the animated dots */
|
15
|
+
--size: 8px; /* How big the dots are */
|
16
|
+
}
|
17
|
+
|
18
|
+
.main_css_loader {
|
19
|
+
display: flex;
|
20
|
+
background-color: var(--main-color);
|
21
|
+
overflow: hidden;
|
22
|
+
width: 100%;
|
23
|
+
height: 100%;
|
24
|
+
position: fixed;
|
25
|
+
top: 0;
|
26
|
+
left: 0;
|
27
|
+
align-items: center;
|
28
|
+
align-content: center;
|
29
|
+
justify-content: center;
|
30
|
+
z-index: 100000;
|
31
|
+
}
|
32
|
+
|
33
|
+
.css_loader_with_dots {
|
34
|
+
border-radius: 100%;
|
35
|
+
border: var(--size) solid var(--point-color);
|
36
|
+
margin: calc(var(--size)*2);
|
37
|
+
}
|
38
|
+
|
39
|
+
.css_loader_with_dots:nth-child(1) {
|
40
|
+
animation: preloader .6s ease-in-out alternate 4;
|
41
|
+
}
|
42
|
+
.css_loader_with_dots:nth-child(2) {
|
43
|
+
animation: preloader .6s ease-in-out alternate .2s 4;
|
44
|
+
}
|
45
|
+
|
46
|
+
.css_loader_with_dots:nth-child(3) {
|
47
|
+
animation: preloader .6s ease-in-out alternate .4s 4;
|
48
|
+
}
|
49
|
+
|
50
|
+
@keyframes preloader {
|
51
|
+
100% { transform: scale(2); }
|
52
|
+
}
|
53
|
+
|
54
|
+
</style>
|
55
|
+
</head>
|
56
|
+
<body>
|
57
|
+
|
58
|
+
<div class="main_css_loader">
|
59
|
+
<span class="css_loader_with_dots"></span>
|
60
|
+
<span class="css_loader_with_dots"></span>
|
61
|
+
<span class="css_loader_with_dots"></span>
|
62
|
+
</div>
|
63
|
+
|
64
|
+
</body>
|
65
|
+
</html>
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<html>
|
2
|
+
<head>
|
3
|
+
<title>User Select Example</title>
|
4
|
+
<style>
|
5
|
+
.all {
|
6
|
+
user-select: all;
|
7
|
+
}
|
8
|
+
.all::selection
|
9
|
+
|
10
|
+
</style>
|
11
|
+
</head>
|
12
|
+
<body>
|
13
|
+
<div>
|
14
|
+
<h2 class="all">20 CSS Tips That Greatly Improve User Experience</h2>
|
15
|
+
<h3 class="all">bytefish</h3>
|
16
|
+
<div>tel num: <span class="all">12345678</span></div>
|
17
|
+
<p class="all">Lorem ipsum dolor sit amet consectetur
|
18
|
+
adipisicing elit. Sequi velit eos asperiores labore
|
19
|
+
voluptate atque doloremque ad assumenda nihil quia
|
20
|
+
ullam ipsum in non magni quam facere fugiat, ipsam
|
21
|
+
amet.</p>
|
22
|
+
</div>
|
23
|
+
</body>
|
24
|
+
</html>
|
@@ -0,0 +1,128 @@
|
|
1
|
+
<html>
|
2
|
+
<head>
|
3
|
+
<style>
|
4
|
+
|
5
|
+
#main_background_scene {
|
6
|
+
width: 1325px;
|
7
|
+
height: 500px;
|
8
|
+
margin: 0 auto;
|
9
|
+
overflow: hidden;
|
10
|
+
border-radius: 16px;
|
11
|
+
margin-top: 2em;
|
12
|
+
}
|
13
|
+
|
14
|
+
#the_sky{
|
15
|
+
border-radius: 16px;
|
16
|
+
width: 1325px;
|
17
|
+
height: 500px;
|
18
|
+
background: linear-gradient(to bottom, #0B4C5F 0%,#04B4AE 52%,#0c0207 100%);
|
19
|
+
position: absolute;
|
20
|
+
z-index: -30;
|
21
|
+
top: 0;
|
22
|
+
margin-top: 2em;
|
23
|
+
}
|
24
|
+
|
25
|
+
#edificios{
|
26
|
+
background: url('https://res.cloudinary.com/pastelitos/image/upload/v1610526533/eva/edificiosOne_fsg7nx.svg');
|
27
|
+
height: 500px;
|
28
|
+
width: 1325px;
|
29
|
+
z-index: -10;
|
30
|
+
top: 6.5em;
|
31
|
+
background-position: 0px 0px;
|
32
|
+
background-repeat: repeat-x;
|
33
|
+
-webkit-animation: animate_the_walking_cat 120s linear infinite;
|
34
|
+
-ms-animation: animate_the_walking_cat 120s linear infinite;
|
35
|
+
-moz-animation: animate_the_walking_cat 120s linear infinite;
|
36
|
+
position: absolute;
|
37
|
+
}
|
38
|
+
|
39
|
+
/* Animacion edificios */
|
40
|
+
|
41
|
+
@keyframes animate_the_walking_cat {
|
42
|
+
from { background-position: 0 0; }
|
43
|
+
to { background-position: 100% 0; }
|
44
|
+
}
|
45
|
+
@-webkit-keyframes animate_the_walking_cat {
|
46
|
+
from { background-position: 0 0; }
|
47
|
+
to { background-position: 100% 0; }
|
48
|
+
}
|
49
|
+
@-ms-keyframes animate_the_walking_cat {
|
50
|
+
from { background-position: 0 0; }
|
51
|
+
to { background-position: 100% 0; }
|
52
|
+
}
|
53
|
+
@-moz-keyframes animate_the_walking_cat {
|
54
|
+
from { background-position: 0 0; }
|
55
|
+
to { background-position: 100% 0; }
|
56
|
+
}
|
57
|
+
|
58
|
+
#the_moon {
|
59
|
+
width: 6.5em;
|
60
|
+
height: 6.5em;
|
61
|
+
-moz-border-radius: 50%;
|
62
|
+
-webkit-border-radius: 50%;
|
63
|
+
border-radius: 50%;
|
64
|
+
-moz-box-shadow: 30px 10px 0 #F7F8E0;
|
65
|
+
-webkit-box-shadow: 30px 10px 0 #F7F8E0;
|
66
|
+
box-shadow: 30px 10px 0 #F7F8E0;
|
67
|
+
margin-top: 1em;
|
68
|
+
margin-left: 50%;
|
69
|
+
position: absolute;
|
70
|
+
z-index: -19;
|
71
|
+
}
|
72
|
+
|
73
|
+
#the_ground {
|
74
|
+
height: 23em;
|
75
|
+
width: 100%;
|
76
|
+
background: -moz-linear-gradient(top, #416663 0%, #0c0207 19%);
|
77
|
+
background: -webkit-linear-gradient(top, #416663 0%,#0c0207 19%);
|
78
|
+
background: linear-gradient(to bottom, #416663 0%,#0c0207 19%);
|
79
|
+
bottom:0px;
|
80
|
+
}
|
81
|
+
|
82
|
+
#the_cat {
|
83
|
+
background: url('https://res.cloudinary.com/pastelitos/image/upload/v1610526571/eva/gatito_pushui.svg');
|
84
|
+
height: 297px;
|
85
|
+
width: 507.5px;
|
86
|
+
margin-top: 2em;
|
87
|
+
margin-left: 2em;
|
88
|
+
z-index: 10;
|
89
|
+
-webkit-animation: sprite-animation 1.2s steps(16,end) infinite;
|
90
|
+
-moz-animation: sprite-animation 1.2s steps(16,end) infinite;
|
91
|
+
-ms-animation: sprite-animation 1.2s steps(16,end) infinite;
|
92
|
+
animation: sprite-animation 1.2s steps(16,end) infinite;
|
93
|
+
}
|
94
|
+
|
95
|
+
@-webkit-keyframes sprite-animation {
|
96
|
+
from { background-position: 0 0; }
|
97
|
+
to { background-position: -8120px 0; }
|
98
|
+
}
|
99
|
+
|
100
|
+
@-ms-keyframes sprite-animation {
|
101
|
+
from { background-position: 0 0; }
|
102
|
+
to { background-position: -8120px 0; }
|
103
|
+
}
|
104
|
+
|
105
|
+
@-moz-keyframes sprite-animation {
|
106
|
+
from { background-position: 0 0; }
|
107
|
+
to { background-position: -8120px 0; }
|
108
|
+
}
|
109
|
+
|
110
|
+
@keyframes sprite-animation {
|
111
|
+
from { background-position: 0 0; }
|
112
|
+
to { background-position: -8120px 0; }
|
113
|
+
}
|
114
|
+
|
115
|
+
|
116
|
+
</style>
|
117
|
+
</head>
|
118
|
+
<body style="background: #0c0207;">
|
119
|
+
<div id="main_background_scene">
|
120
|
+
<div id="the_sky"></div>
|
121
|
+
<div id="the_moon"></div>
|
122
|
+
<div id="the_cat"></div>
|
123
|
+
<div id="the_ground"></div>
|
124
|
+
<div id="edificios"></div>
|
125
|
+
</div>
|
126
|
+
</body>
|
127
|
+
|
128
|
+
</html>
|
@@ -0,0 +1,86 @@
|
|
1
|
+
<html>
|
2
|
+
<title>Water Wave Text Animation Effect</title>
|
3
|
+
<style>
|
4
|
+
|
5
|
+
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
|
6
|
+
|
7
|
+
* {
|
8
|
+
margin: 0;
|
9
|
+
padding: 0;
|
10
|
+
box-sizing: border-box;
|
11
|
+
font-family: "Poppins", sans-serif;
|
12
|
+
}
|
13
|
+
|
14
|
+
body {
|
15
|
+
display: flex;
|
16
|
+
background: #000;
|
17
|
+
min-height: 100vh;
|
18
|
+
align-items: center;
|
19
|
+
justify-content: center;
|
20
|
+
}
|
21
|
+
|
22
|
+
.content {
|
23
|
+
position: relative;
|
24
|
+
}
|
25
|
+
|
26
|
+
.content h2 {
|
27
|
+
color: #fff;
|
28
|
+
font-size: 8em;
|
29
|
+
position: absolute;
|
30
|
+
transform: translate(-50%, -50%);
|
31
|
+
}
|
32
|
+
|
33
|
+
.content h2:nth-child(1) {
|
34
|
+
color: transparent;
|
35
|
+
-webkit-text-stroke: 2px #03a9f4;
|
36
|
+
}
|
37
|
+
|
38
|
+
.content h2:nth-child(2) {
|
39
|
+
color: #03a9f4;
|
40
|
+
animation: animate 4s ease-in-out infinite;
|
41
|
+
}
|
42
|
+
|
43
|
+
@keyframes animate {
|
44
|
+
0%,
|
45
|
+
100% {
|
46
|
+
clip-path: polygon(
|
47
|
+
0% 45%,
|
48
|
+
16% 44%,
|
49
|
+
33% 50%,
|
50
|
+
54% 60%,
|
51
|
+
70% 61%,
|
52
|
+
84% 59%,
|
53
|
+
100% 52%,
|
54
|
+
100% 100%,
|
55
|
+
0% 100%
|
56
|
+
);
|
57
|
+
}
|
58
|
+
|
59
|
+
50% {
|
60
|
+
clip-path: polygon(
|
61
|
+
0% 60%,
|
62
|
+
15% 65%,
|
63
|
+
34% 66%,
|
64
|
+
51% 62%,
|
65
|
+
67% 50%,
|
66
|
+
84% 45%,
|
67
|
+
100% 46%,
|
68
|
+
100% 100%,
|
69
|
+
0% 100%
|
70
|
+
);
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
</style>
|
75
|
+
|
76
|
+
<body>
|
77
|
+
|
78
|
+
<section>
|
79
|
+
<div class="content">
|
80
|
+
<h2>Kemi</h2>
|
81
|
+
<h2>Kemi</h2>
|
82
|
+
</div>
|
83
|
+
</section>
|
84
|
+
|
85
|
+
</body>
|
86
|
+
</html>
|
data/examples/csv/README.md
CHANGED
@@ -1 +1,2 @@
|
|
1
|
-
This is just a .csv file that can be used for quick testing
|
1
|
+
This is just a .csv file that can be used for quick testing of
|
2
|
+
csv-related functionality.
|
@@ -4,7 +4,14 @@
|
|
4
4
|
|
5
5
|
<style>
|
6
6
|
|
7
|
-
/*
|
7
|
+
/*
|
8
|
+
* The flip card container - set the width
|
9
|
+
* and height to whatever you want. We have added
|
10
|
+
* the border property to demonstrate that the
|
11
|
+
* flip itself goes out of the box on hover
|
12
|
+
* (remove perspective if you don't want the 3D
|
13
|
+
* effect
|
14
|
+
*/
|
8
15
|
.flip-card {
|
9
16
|
background-color: transparent;
|
10
17
|
width: 300px;
|
@@ -53,12 +60,12 @@
|
|
53
60
|
</style>
|
54
61
|
</head>
|
55
62
|
|
56
|
-
<body>
|
63
|
+
<body style="margin: 8px; padding: 12px">
|
57
64
|
|
58
65
|
<div class="flip-card">
|
59
66
|
<div class="flip-card-inner">
|
60
67
|
<div class="flip-card-front">
|
61
|
-
<img src="/home/x/
|
68
|
+
<img src="/home/x/data/images/NJOY/CourtneyCox.jpg" alt="Avatar" style="width:300px;height:300px;">
|
62
69
|
</div>
|
63
70
|
<div class="flip-card-back">
|
64
71
|
<h1>John Doe</h1>
|
Binary file
|
Binary file
|
@@ -0,0 +1,16 @@
|
|
1
|
+
<html>
|
2
|
+
<head>
|
3
|
+
<title>Snake Game</title>
|
4
|
+
|
5
|
+
<style>
|
6
|
+
canvas {
|
7
|
+
display: block;
|
8
|
+
margin: 0 auto;
|
9
|
+
}
|
10
|
+
</style>
|
11
|
+
</head>
|
12
|
+
<body>
|
13
|
+
<canvas id="snake_canvas" width="608" height="608"></canvas>
|
14
|
+
<script src="snake.js"></script>
|
15
|
+
</body>
|
16
|
+
</html>
|
@@ -0,0 +1,117 @@
|
|
1
|
+
const cvs = document.getElementById("snake_canvas");
|
2
|
+
const ctx = cvs.getContext("2d");
|
3
|
+
|
4
|
+
// create the unit
|
5
|
+
const box = 32;
|
6
|
+
|
7
|
+
// load images
|
8
|
+
const ground = new Image();
|
9
|
+
ground.src = "images/ground.png";
|
10
|
+
|
11
|
+
const foodImg = new Image();
|
12
|
+
foodImg.src = "images/food.png";
|
13
|
+
|
14
|
+
// create the snake
|
15
|
+
let snake = [];
|
16
|
+
|
17
|
+
snake[0] = {
|
18
|
+
x : 9 * box,
|
19
|
+
y : 10 * box
|
20
|
+
};
|
21
|
+
|
22
|
+
// create the food
|
23
|
+
let food = {
|
24
|
+
x : Math.floor(Math.random()*17+1) * box,
|
25
|
+
y : Math.floor(Math.random()*15+3) * box
|
26
|
+
}
|
27
|
+
|
28
|
+
// create the score var
|
29
|
+
let score = 0;
|
30
|
+
|
31
|
+
//control the snake
|
32
|
+
let d;
|
33
|
+
|
34
|
+
document.addEventListener("keydown", direction);
|
35
|
+
|
36
|
+
function direction(event){
|
37
|
+
let key = event.keyCode;
|
38
|
+
if( key == 37 && d != "RIGHT"){
|
39
|
+
d = "LEFT";
|
40
|
+
} else if(key == 38 && d != "DOWN"){
|
41
|
+
d = "UP";
|
42
|
+
} else if(key == 39 && d != "LEFT"){
|
43
|
+
d = "RIGHT";
|
44
|
+
} else if(key == 40 && d != "UP"){
|
45
|
+
d = "DOWN";
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
// cheack collision function
|
50
|
+
function collision(head,array){
|
51
|
+
for(let i = 0; i < array.length; i++){
|
52
|
+
if(head.x == array[i].x && head.y == array[i].y){
|
53
|
+
return true;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
return false;
|
57
|
+
}
|
58
|
+
|
59
|
+
// draw everything to the canvas
|
60
|
+
function draw(){
|
61
|
+
|
62
|
+
ctx.drawImage(ground,0,0);
|
63
|
+
|
64
|
+
for( let i = 0; i < snake.length ; i++){
|
65
|
+
ctx.fillStyle = ( i == 0 )? "green" : "white";
|
66
|
+
ctx.fillRect(snake[i].x,snake[i].y,box,box);
|
67
|
+
|
68
|
+
ctx.strokeStyle = "red";
|
69
|
+
ctx.strokeRect(snake[i].x,snake[i].y,box,box);
|
70
|
+
}
|
71
|
+
|
72
|
+
ctx.drawImage(foodImg, food.x, food.y);
|
73
|
+
|
74
|
+
// old head position
|
75
|
+
let snakeX = snake[0].x;
|
76
|
+
let snakeY = snake[0].y;
|
77
|
+
|
78
|
+
// which direction to use:
|
79
|
+
if( d == "LEFT") snakeX -= box;
|
80
|
+
if( d == "UP") snakeY -= box;
|
81
|
+
if( d == "RIGHT") snakeX += box;
|
82
|
+
if( d == "DOWN") snakeY += box;
|
83
|
+
|
84
|
+
// if the snake eats the food
|
85
|
+
if(snakeX == food.x && snakeY == food.y){
|
86
|
+
score++;
|
87
|
+
food = {
|
88
|
+
x : Math.floor(Math.random()*17+1) * box,
|
89
|
+
y : Math.floor(Math.random()*15+3) * box
|
90
|
+
}
|
91
|
+
// we don't remove the tail
|
92
|
+
} else {
|
93
|
+
// remove the tail
|
94
|
+
snake.pop();
|
95
|
+
}
|
96
|
+
|
97
|
+
// add new Head
|
98
|
+
let newHead = {
|
99
|
+
x : snakeX,
|
100
|
+
y : snakeY
|
101
|
+
}
|
102
|
+
|
103
|
+
// game over
|
104
|
+
if(snakeX < box || snakeX > 17 * box || snakeY < 3*box || snakeY > 17*box || collision(newHead,snake)){
|
105
|
+
clearInterval(game);
|
106
|
+
}
|
107
|
+
|
108
|
+
snake.unshift(newHead);
|
109
|
+
|
110
|
+
ctx.fillStyle = "white";
|
111
|
+
ctx.font = "45px Changa one";
|
112
|
+
ctx.fillText(score,2*box,1.6*box);
|
113
|
+
}
|
114
|
+
|
115
|
+
// call draw function every 100 ms
|
116
|
+
|
117
|
+
let game = setInterval(draw,100);
|