Single Web Page UI

  • Hali: Closed
  • Zawadi: $50
  • Wasilisho Zilizopokelewa: 1
  • Mshindi: jonokemball

Maelezo ya Shindano

I am looking for what I think should be a very simple interface. I would build it myself, but I just can't find the time. Lucky you!

Essentially, I'm looking for a single page that will load a list of server-side video files sitting in a particular path on the left, and when you click on one of those items it displays the video player on the right with controls so the user can play, pause, fullscreen, etc.

I would like the page as a whole to be non-scrolling, and have the components fill the window, and resize gracefully when the window does. The resolution and ratio of screens that this will be used on with vary greatly. on a standard 16:9 wide screen monitor, i'd like the list to take up about 25% of the view, as this should allow for the file name to display properly with plenty of space for the video, but then should not collapse down too small or get extra large with other ratios of the window so as not to hide or distort the look and feel of the list. The video area with notes and title (see bonus below regarding notes and title) should take up as much area as possible, but not expand past the size of the window.

The file list will need to be able to grow to more items than can be displayed on the screen, so that list area will need to scroll. The files are just going to show up on the file system, so the list will need to automatically update periodically to reflect the new files. The delay shouldn't be more than a few seconds between updates. However, if the list is scrolled, I can't have it constantly refreshing and going back up to the top, or some silly thing like that. It needs to update, but remain in it's current location, unless it's at the very top, in which case it can update and keep the list scrolled to the top. The new files will almost always be at the top of the list. When hovering over the file in the list, there should be a hover effect with alt-text showing the filename as well (important for bonus option).

The list will be a two level list. First level will be the date, which will need to be picked up from the filenames. The filenames will be like: YYMMDD_HHMMSS.mp4

Take the date portion, and make a list item, then in a sublist, put all of the files that are from that date, etc, etc, in descending order, with the most recent date/files at the top of the list.

I'm attaching a hand drawn picture of what I'd very roughly like it to look like.

The video files will just be standard mp4, so no special player or plugins should be required, just the html5 video tags, I'm sure.

I will pay a Bonus if your design allows for being able to edit the file name, or at least the name that is displayed for the file in this interface, and add notes for each video. For this, the use case is that the files will just show up in the file system, and then the person using this interface will be able to change the name to something more useful and add notations for that video that can be referenced later. If I were doing this, it would interact with a db, but if you have a way to do it without that, I'm ok with that too. Whatever works properly is fine with me, as long as I can work with it later.

If the title is updated by the user, the file list should reflect using that title, instead of the date_time filename, but should still have a hover effect with the alt-text of the original file name. And it should remain in order by the original file name (date/time order descending).

The look and feel should be clean, modern, high performing with low backend resource utilization. Need to make sure that if I play a video, and then click a new file, that the first video should have stopped, and doesn't keep playing in a hidden view. I'm not looking for a mock-up, or graphics as the end product, I'm looking for someone to write the actual code.

All code must be free from any copyrights or license requirements, or any other restrictions on use.

Any combination of PHP, Javascript, CSS, HTML are fine.

Ujuzi unaopendekezwa

Maoni ya Muajiri

“Excellent work, and more than willing to make adjustments to whatever I needed. Thanks!”

Picha ya Profaili bortegavw, United States.

Bodi ya Ufafanuzi ya Umma

  • Pieter2627
    Pieter2627
    • Miaka 7 iliyopita

    Will you be the only one using this? If multiple users will use it, should one's notes be visible to all?

    • Miaka 7 iliyopita
    1. bortegavw
      Mwenye Shindano
      • Miaka 7 iliyopita

      more than one person may use it at the same time, everyone should be able to see everything.

      • Miaka 7 iliyopita
  • dragonnpoulp
    dragonnpoulp
    • Miaka 7 iliyopita

    Is nodejs server welcome?

    • Miaka 7 iliyopita
    1. bortegavw
      Mwenye Shindano
      • Miaka 7 iliyopita

      unfortunately, no. but thank you.

      • Miaka 7 iliyopita
  • arkadebnath
    arkadebnath
    • Miaka 7 iliyopita

    $50 is okay for this project but as I need to get into the coding job, I must be sure that you'll choose me winner. I can show you my HTML5, CSS3, PHP, Ajax jobs (yes these are required for your page) if you send me a private message.

    • Miaka 7 iliyopita
    1. bortegavw
      Mwenye Shindano
      • Miaka 7 iliyopita

      This is a contest, so I'll need to see actual entries for my particular project, not just prior work.

      • Miaka 7 iliyopita
    2. bortegavw
      Mwenye Shindano
      • Miaka 7 iliyopita

      I would be interested in seeing some of your other work though, if you would like to show me some ideas and see if I'm interested in going a particular way.

      • Miaka 7 iliyopita
  • jonokemball
    jonokemball
    • Miaka 7 iliyopita

    #guaranteed

    • Miaka 7 iliyopita
    1. bortegavw
      Mwenye Shindano
      • Miaka 7 iliyopita

      this project is now guaranteed

      • Miaka 7 iliyopita
  • NestorheadFree
    NestorheadFree
    • Miaka 7 iliyopita

    I can make it for a US$50 in 15 days.

    • Miaka 7 iliyopita
    1. bortegavw
      Mwenye Shindano
      • Miaka 7 iliyopita

      I'd love to see your entry.

      • Miaka 7 iliyopita
  • suryakumaran11
    suryakumaran11
    • Miaka 7 iliyopita

    do you need the code to be uploaded here or host it in my server and share you the link for the full working project?

    • Miaka 7 iliyopita
    1. bortegavw
      Mwenye Shindano
      • Miaka 7 iliyopita

      Both would be very helpful in being able to select the best option.

      • Miaka 7 iliyopita
  • thecedi0
    thecedi0
    • Miaka 7 iliyopita

    #guaranteed #increaseprize

    • Miaka 7 iliyopita
  • shridesigning
    shridesigning
    • Miaka 7 iliyopita

    Hello,
    I am able to do Design + HTML, Please let me know if it is okay or you need PHP code too?

    • Miaka 7 iliyopita
  • ZFredD
    ZFredD
    • Miaka 7 iliyopita

    #guaranteed, #increaseprize.

    • Miaka 7 iliyopita

Onyesha maoni zaidi

Jinsi ya kuanza kwa kutumia mashindano

  • Chapisha Shindano Lako

    Chapisha Shindano Lako Haraka na rahisi

  • Pokea wasilisho nyingi

    Pokea Wasilisho Nyingi Kutoka kote ulimwenguni

  • Tuza wasilisho bora zaidi

    Tuza wasilisho bora zaidi Pakua faili - Rahisi!

Tuma Shindano Sasa ama Jiunge nasi Leo!